···11+---
22+title: Editable Text
33+description: An inline editable text component that switches between display and edit modes. By default the component will enter edit mode for a long press.
44+---
55+66+import { PropDocs } from '../../lib/PropDocs'
77+import { Example } from '../../lib/Example'
88+import { Basic } from '../../examples/editable-text/basic'
99+import { Composition } from '../../examples/editable-text/composition'
1010+1111+<Example src={Basic} />
1212+1313+## Installation
1414+1515+Run the following command to add the editable text component to your project.
1616+1717+```bash
1818+pnpm hip install editable-text
1919+```
2020+2121+## Props
2222+2323+This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/).
2424+2525+<PropDocs components={["EditableText"]} />
2626+2727+## Features
2828+2929+### Composition
3030+3131+The editable text component can be composed with other components.
3232+3333+<Example src={Composition} />
3434+3535+## Related Components
3636+3737+- [TextField](/docs/components/text-field) - For standard text input fields
3838+- [TextArea](/docs/components/text-area) - For multi-line text input
3939+- [Text](/docs/components/text) - For displaying static text
4040+
+54
apps/docs/src/docs/components/toast.mdx
···11+---
22+title: Toast
33+description: A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
44+---
55+66+import { PropDocs } from '../../lib/PropDocs'
77+import { Example } from '../../lib/Example'
88+import { Basic } from '../../examples/toast/basic'
99+import { Actions } from '../../examples/toast/actions'
1010+import { Icons } from '../../examples/toast/icons'
1111+1212+<Example src={Basic} />
1313+1414+## Installation
1515+1616+Run the following command to add the toast component to your project.
1717+1818+```bash
1919+pnpm hip install toast
2020+```
2121+2222+## Props
2323+2424+This component is built using [React Aria Toast](https://react-spectrum.adobe.com/react-aria/Toast.html).
2525+2626+<PropDocs components={["ToastRegion", "Toast", "ToastContent", "ToastTitle", "ToastDescription", "ToastClose"]} />
2727+2828+## Features
2929+3030+### Actions
3131+3232+Toasts can include an action button to perform an action when the user clicks on it.
3333+3434+<Example src={Actions} />
3535+3636+### Variants and Icons
3737+3838+Toasts can be one of the following variants:
3939+4040+- `success`
4141+- `warning`
4242+- `critical`
4343+4444+Each variant can include an icon to display alongside the title and description.
4545+4646+<Example src={Icons} />
4747+4848+## Related Components
4949+5050+- [Dialog](/docs/components/dialog) - For modal dialogs
5151+- [AlertDialog](/docs/components/alert-dialog) - For critical actions and confirmations
5252+- [Popover](/docs/components/popover) - For non-modal overlays
5353+- [Button](/docs/components/button) - For triggering toasts
5454+
+10
apps/docs/src/docs/components/tree.mdx
···66import { PropDocs } from '../../lib/PropDocs'
77import { Example } from '../../lib/Example'
88import { Basic } from '../../examples/tree/basic'
99+import { DragAndDrop } from '../../examples/tree/drag-and-drop'
9101011<Example src={Basic} />
1112···2223This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).
23242425<PropDocs components={["Tree", "TreeItem"]} />
2626+2727+### Features
2828+2929+#### Drag and Drop
3030+3131+The tree supports drag and drop by providing the `dragAndDropHooks` prop to the `Tree` component.
3232+React more about it [here](https://react-spectrum.adobe.com/react-aria/Tree.html#drag-and-drop).
3333+3434+<Example src={DragAndDrop} />
25352636## Related Components
2737
+8
apps/docs/src/docs/showcase/canvas-editor.mdx
···11+---
22+title: Canvas Editor
33+description: An example showing what building a canvas editor looks like with Hip.
44+---
55+66+import { CanvasEditor } from "../../showcases/canvas-editor";
77+88+<CanvasEditor />
+8
apps/docs/src/examples/editable-text/basic.tsx
···11+import { useState } from "react";
22+33+import { EditableText } from "@/components/editable-text";
44+55+export function Basic() {
66+ const [value, setValue] = useState("Click to edit");
77+ return <EditableText onChange={setValue}>{value}</EditableText>;
88+}