{ "v": 0, "components": { "components-actionbar": { "id": "components-actionbar", "name": "ActionBar", "path": "./src/components/actions/ActionBar.stories.tsx", "jsDocTags": {}, "description": "Use `ActionBar` to arrange actions in a horizontally scrolling row. Place `ActionButton` components inside it; their `visible` prop animates them in and out.\n\nSet `wrap` to allow wrapping, or `disableShadow` to remove the overflow fades.", "reactDocgen": { "description": "", "methods": [], "displayName": "ActionBar", "definedInFile": "/home/runner/work/ui/ui/src/components/actions/ActionBar.tsx", "actualName": "ActionBar", "exportName": "ActionBar", "props": { "children": { "required": true, "tsType": { "name": "ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "wrap": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableShadow": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" } } }, "stories": [ { "id": "components-actionbar--default", "name": "Default", "snippet": "const Default = () => {[\n \n \n ,\n \n \n Edit\n ,\n \n \n Publish\n ,\n \n \n Overflow 1\n ,\n \n \n Overflow 2\n ,\n \n \n Overflow 3\n ,\n ]};" }, { "id": "components-actionbar--on-background", "name": "On Background", "snippet": "const OnBackground = () => {\n return (\n \n {[\n \n \n ,\n \n \n Edit\n ,\n \n \n Publish\n ,\n \n \n Overflow 1\n ,\n \n \n Overflow 2\n ,\n \n \n Overflow 3\n ,\n ]}\n \n );\n};" } ], "import": "import { ActionBar, ActionButton, Box, Icon } from '@a-type/ui';\nimport { ActionButton } from './ActionButton.js';\nimport { Icon } from '../icon/Icon.js';" }, "components-autocomplete": { "id": "components-autocomplete", "name": "Autocomplete", "path": "./src/components/autocomplete/Autocomplete.stories.tsx", "jsDocTags": {}, "description": "Use `Autocomplete.create()` for typed suggestions, or `Autocomplete.createGrouped()` for groups with an `items` array. Compose `Input`, `Content`, `List`, and `Item`, and use `value` and `onValueChange` to control the input text.\n\n`Content` renders in a portal and accepts `arrow` and `positioner` options.", "reactDocgen": { "description": "", "methods": [], "displayName": "AutocompleteIcon", "definedInFile": "/home/runner/work/ui/ui/src/components/autocomplete/Autocomplete.tsx", "actualName": "AutocompleteIcon", "exportName": "AutocompleteIcon" }, "stories": [ { "id": "components-autocomplete--default", "name": "Default", "snippet": "const Default = ({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) => {\n const [value, setValue] = useState('');\n return (\n \n }\n style={{ width: 200 }}\n />\n \n \n {(item) => (\n \n {item.label}\n \n )}\n \n \n No results found.\n \n \n \n );\n};" }, { "id": "components-autocomplete--grouped", "name": "Grouped", "snippet": "const Grouped = ({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) => {\n const [value, setValue] = useState(undefined);\n return (\n \n \n \n \n {(group) => (\n \n \n {group.category}\n \n \n {group.items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n )}\n \n \n No results found.\n \n \n \n Select your favorite fruit or berry.\n \n \n \n );\n};" }, { "id": "components-autocomplete--not-popover", "name": "Not Popover", "snippet": "const NotPopover = ({ autoHighlight, keepHighlight, highlightItemOnHover }) => {\n const [value, setValue] = useState(undefined);\n return (\n \n \n \n \n \n \n \n \n {(group) => (\n \n \n {group.category}\n \n \n {group.items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n )}\n \n \n No results found.\n \n \n \n );\n};" } ], "import": "import { Autocomplete, Box, Button, Icon } from '@a-type/ui';" }, "components-avatar": { "id": "components-avatar", "name": "Avatar", "path": "./src/components/avatar/Avatar.stories.tsx", "jsDocTags": {}, "description": "Pass `name` and optionally `imageSrc` to `Avatar`. It falls back to the first initial, or a profile icon when both are absent.\n\nFor overlapping avatars, use `AvatarList` with a `count` and an `index` on each `AvatarList.Item`.", "reactDocgen": { "description": "", "methods": [], "displayName": "Avatar", "definedInFile": "/home/runner/work/ui/ui/src/components/avatar/Avatar.tsx", "actualName": "Avatar", "exportName": "Avatar", "props": { "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "popIn": { "required": false, "tsType": { "name": "boolean" }, "description": "@deprecated" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "imageSrc": { "required": false, "tsType": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ] }, "description": "" }, "name": { "required": false, "tsType": { "name": "string" }, "description": "" }, "crossOrigin": { "required": false, "tsType": { "name": "HTMLProps['crossOrigin']", "raw": "HTMLProps['crossOrigin']" }, "description": "" }, "size": { "required": false, "tsType": { "name": "union", "raw": "string | number", "elements": [ { "name": "string" }, { "name": "number" } ] }, "description": "" } }, "composes": [ "BaseAvatarProps" ] }, "stories": [ { "id": "components-avatar--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" }, { "id": "components-avatar--with-image", "name": "With Image", "snippet": "const WithImage = () => ;" }, { "id": "components-avatar--with-name", "name": "With Name", "snippet": "const WithName = () => ;" }, { "id": "components-avatar--failed-image", "name": "Failed Image", "snippet": "const FailedImage = () => ;" }, { "id": "components-avatar--empty", "name": "Empty", "snippet": "const Empty = () => ;" } ], "import": "import { Avatar } from '@a-type/ui';" }, "components-box": { "id": "components-box", "name": "Box", "path": "./src/components/box/Box.stories.tsx", "jsDocTags": {}, "description": "`Box` is a flex layout wrapper: it defaults to a row, and `col` switches to a column. Use `gap`, `p`, `items`, `justify`, and `surface` for common layout and styling needs.\n\nUse the `render` prop to render a different element while retaining the Box styles.", "reactDocgen": { "description": "", "methods": [], "displayName": "Box", "definedInFile": "/home/runner/work/ui/ui/src/components/box/Box.tsx", "actualName": "Box", "exportName": "Box", "props": { "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "col": { "required": false, "tsType": { "name": "boolean" }, "description": "Apply flex-direction: column - default is row" }, "reverse": { "required": false, "tsType": { "name": "boolean" }, "description": "Reverse flex direction" }, "items": { "required": false, "tsType": { "name": "union", "raw": "'center' | 'stretch' | 'start' | 'end'", "elements": [ { "name": "literal", "value": "'center'" }, { "name": "literal", "value": "'stretch'" }, { "name": "literal", "value": "'start'" }, { "name": "literal", "value": "'end'" } ] }, "description": "Adjust align-items" }, "justify": { "required": false, "tsType": { "name": "union", "raw": "| 'center'\n| 'safe-center'\n| 'start'\n| 'stretch'\n| 'between'\n| 'around'\n| 'end'", "elements": [ { "name": "literal", "value": "'center'" }, { "name": "literal", "value": "'safe-center'" }, { "name": "literal", "value": "'start'" }, { "name": "literal", "value": "'stretch'" }, { "name": "literal", "value": "'between'" }, { "name": "literal", "value": "'around'" }, { "name": "literal", "value": "'end'" } ] }, "description": "Adjust justify-content" }, "layout": { "required": false, "tsType": { "name": "union", "raw": "| `${BoxAlignment} ${BoxJustification}`\n| `${BoxAlignment & BoxJustification}`", "elements": [ { "name": "literal", "value": "`${BoxAlignment} ${BoxJustification}`" }, { "name": "literal", "value": "`${BoxAlignment & BoxJustification}`" } ] }, "description": "Apply both align-items and justify-content together" }, "gap": { "required": false, "tsType": { "name": "union", "raw": "BoxSpacingSize | boolean", "elements": [ { "name": "union", "raw": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'", "elements": [ { "name": "literal", "value": "'none'" }, { "name": "literal", "value": "'xs'" }, { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" }, { "name": "literal", "value": "'xl'" } ] }, { "name": "boolean" } ] }, "description": "Adjust gap" }, "wrap": { "required": false, "tsType": { "name": "boolean" }, "description": "Add flex-wrap" }, "p": { "required": false, "tsType": { "name": "union", "raw": "BoxSpacingSize | boolean", "elements": [ { "name": "union", "raw": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'", "elements": [ { "name": "literal", "value": "'none'" }, { "name": "literal", "value": "'xs'" }, { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" }, { "name": "literal", "value": "'xl'" } ] }, { "name": "boolean" } ] }, "description": "Adjust padding" }, "squish": { "required": false, "tsType": { "name": "union", "raw": "'vertical' | 'horizontal'", "elements": [ { "name": "literal", "value": "'vertical'" }, { "name": "literal", "value": "'horizontal'" } ] }, "description": "Reduce padding in one axis by one level" }, "surface": { "required": false, "tsType": { "name": "union", "raw": "boolean | 'ambient' | 'secondary' | 'primary'", "elements": [ { "name": "boolean" }, { "name": "literal", "value": "'ambient'" }, { "name": "literal", "value": "'secondary'" }, { "name": "literal", "value": "'primary'" } ] }, "description": "Apply surface intents" }, "emphasis": { "required": false, "tsType": { "name": "union", "raw": "'ambient' | 'secondary' | 'primary'", "elements": [ { "name": "literal", "value": "'ambient'" }, { "name": "literal", "value": "'secondary'" }, { "name": "literal", "value": "'primary'" } ] }, "description": "Overlaps with 'surface' - use surface as a boolean when provided." }, "border": { "required": false, "tsType": { "name": "boolean" }, "description": "Add a default border" }, "full": { "required": false, "tsType": { "name": "union", "raw": "boolean | 'width' | 'height'", "elements": [ { "name": "boolean" }, { "name": "literal", "value": "'width'" }, { "name": "literal", "value": "'height'" } ] }, "description": "Add 100% w/h" }, "overflow": { "required": false, "tsType": { "name": "union", "raw": "'hidden' | 'clip' | 'auto' | 'auto-x' | 'auto-y'", "elements": [ { "name": "literal", "value": "'hidden'" }, { "name": "literal", "value": "'clip'" }, { "name": "literal", "value": "'auto'" }, { "name": "literal", "value": "'auto-x'" }, { "name": "literal", "value": "'auto-y'" } ] }, "description": "Control overflow / scroll" }, "grow": { "required": false, "tsType": { "name": "boolean" }, "description": "Apply flex-grow" }, "shrink": { "required": false, "tsType": { "name": "boolean" }, "description": "Apply flex-shrink and min-width" }, "elevated": { "required": false, "tsType": { "name": "literal", "value": "`${MaybeMinus}${ShadowSize}${MaybeUp}`" }, "description": "Add shadow" }, "rounded": { "required": false, "tsType": { "name": "union", "raw": "'xs' | 'sm' | 'md' | 'lg' | boolean", "elements": [ { "name": "literal", "value": "'xs'" }, { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" }, { "name": "boolean" } ] }, "description": "@deprecated - use round", "defaultValue": { "value": "surface ? true : undefined", "computed": false } }, "round": { "required": false, "tsType": { "name": "union", "raw": "'xs' | 'sm' | 'md' | 'lg' | boolean", "elements": [ { "name": "literal", "value": "'xs'" }, { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" }, { "name": "boolean" } ] }, "description": "Adust border radius", "defaultValue": { "value": "rounded = surface ? true : undefined", "computed": false } }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLDivElement" } ], "raw": "Ref" }, "description": "" }, "container": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "glass": { "required": false, "tsType": { "name": "boolean" }, "description": "Adds transparency" }, "dim": { "required": false, "tsType": { "name": "boolean" }, "description": "Applies a gray foreground color" }, "self": { "required": false, "tsType": { "name": "union", "raw": "'auto' | 'start' | 'end' | 'center' | 'stretch'", "elements": [ { "name": "literal", "value": "'auto'" }, { "name": "literal", "value": "'start'" }, { "name": "literal", "value": "'end'" }, { "name": "literal", "value": "'center'" }, { "name": "literal", "value": "'stretch'" } ] }, "description": "" }, "m": { "required": false, "tsType": { "name": "union", "raw": "'auto' | 'y-auto' | 'x-auto'", "elements": [ { "name": "literal", "value": "'auto'" }, { "name": "literal", "value": "'y-auto'" }, { "name": "literal", "value": "'x-auto'" } ] }, "description": "Use margin to center self in flex" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-box--default", "name": "Default", "snippet": "const Default = () => (<>\n \n \n \n );" }, { "id": "components-box--surfaces", "name": "Surfaces", "snippet": "const Surfaces = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-box--dim-comparison", "name": "Dim Comparison", "snippet": "const DimComparison = args => {\n return (\n \n \n Dimmed non-surface\n Text\n \n \n \n Dimmed box\n Text\n \n \n \n Dimmed box\n Text\n \n \n \n Dimmed text\n \n \n );\n};" } ], "import": "import { Box, Button, Checkbox, Icon, Progress, Slider, Switch, Text, ToggleGroup } from '@a-type/ui';\nimport { Button } from '../button/Button.js';" }, "components-button": { "id": "components-button", "name": "Button", "path": "./src/components/button/Button.stories.tsx", "jsDocTags": {}, "description": "Use `emphasis`, `size`, and `color` to style a `Button`. `loading` disables it, while `toggled` exposes a pressed state. Give icon-only buttons an accessible label.\n\n`ConfirmedButton` opens a confirmation dialog before calling `onConfirm`; `skip` bypasses the dialog.", "reactDocgen": { "description": "", "methods": [], "displayName": "Button", "definedInFile": "/home/runner/work/ui/ui/src/components/button/Button.tsx", "actualName": "ButtonRoot", "exportName": "ButtonRoot", "props": { "emphasis": { "required": false, "tsType": { "name": "union", "raw": "'primary' | 'default' | 'ghost' | 'light' | 'unstyled'", "elements": [ { "name": "literal", "value": "'primary'" }, { "name": "literal", "value": "'default'" }, { "name": "literal", "value": "'ghost'" }, { "name": "literal", "value": "'light'" }, { "name": "literal", "value": "'unstyled'" } ] }, "description": "", "defaultValue": { "value": "'default'", "computed": false } }, "size": { "required": false, "tsType": { "name": "union", "raw": "'default' | 'small' | 'wrapper'", "elements": [ { "name": "literal", "value": "'default'" }, { "name": "literal", "value": "'small'" }, { "name": "literal", "value": "'wrapper'" } ] }, "description": "" }, "toggled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "toggleMode": { "required": false, "tsType": { "name": "union", "raw": "'color-and-indicator' | 'color' | 'indicator' | 'state-only'", "elements": [ { "name": "literal", "value": "'color-and-indicator'" }, { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'indicator'" }, { "name": "literal", "value": "'state-only'" } ] }, "description": "", "defaultValue": { "value": "'color-and-indicator'", "computed": false } }, "visuallyDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "loading": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "visuallyFocused": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableIconMode": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "forceIconMode": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLButtonElement" } ], "raw": "Ref" }, "description": "" }, "disableDropdownTriggerIcon": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableDefaultLoadingIndicator": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "color": { "required": false, "tsType": { "name": "union", "raw": "'primary' | 'accent' | 'success' | 'attention'", "elements": [ { "name": "literal", "value": "'primary'" }, { "name": "literal", "value": "'accent'" }, { "name": "literal", "value": "'success'" }, { "name": "literal", "value": "'attention'" } ] }, "description": "Shortcuts for @mode-* classes." }, "full": { "required": false, "tsType": { "name": "union", "raw": "'width' | 'height' | boolean", "elements": [ { "name": "literal", "value": "'width'" }, { "name": "literal", "value": "'height'" }, { "name": "boolean" } ] }, "description": "" }, "align": { "required": false, "tsType": { "name": "union", "raw": "'start' | 'center' | 'end'", "elements": [ { "name": "literal", "value": "'start'" }, { "name": "literal", "value": "'center'" }, { "name": "literal", "value": "'end'" } ] }, "description": "" } }, "composes": [ "ButtonHTMLAttributes", "Pick" ] }, "stories": [ { "id": "components-button--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n Button\n \n \n Button\n \n Disabled\n \n Button\n \n } />\n \n \n \n \n \n \n \n \n \n Primary\n \n Default\n \n Light\n \n Ghost\n \n Contrast\n \n \n \n );\n};" }, { "id": "components-button--all-buttons", "name": "All Buttons", "snippet": "const AllButtons = () => {\n return (\n \n \n {['primary', 'light', 'default', 'ghost'].map((emphasis) => (\n \n ))}\n \n \n {['primary', 'light', 'default', 'ghost'].map((emphasis) => (\n \n ))}\n \n \n {['primary', 'light', 'default', 'ghost'].map((emphasis) => (\n \n ))}\n \n \n );\n};" }, { "id": "components-button--with-icon", "name": "With Icon", "snippet": "const WithIcon = () => (<>\n Iconic\n );" }, { "id": "components-button--icon-only", "name": "Icon Only", "snippet": "const IconOnly = () => ;" }, { "id": "components-button--icon-transition", "name": "Icon Transition", "snippet": "const IconTransition = () => {\n const [toggled, setToggled] = useState(false);\n\n return (\n setToggled((v) => !v)}>\n {toggled ? : 'no icon'}\n \n );\n};" }, { "id": "components-button--toggled", "name": "Toggled", "snippet": "const Toggled = () => {\n const [on, setOn] = useState(false);\n const toggle = () => setOn((v) => !v);\n\n return (\n Button\n );\n};" }, { "id": "components-button--toggled-icon", "name": "Toggled Icon", "snippet": "const ToggledIcon = () => {\n const [on, setOn] = useState(false);\n const toggle = () => setOn((v) => !v);\n\n return (\n \n \n \n );\n};" }, { "id": "components-button--alignment", "name": "Alignment", "snippet": "const Alignment = () => {\n return (\n
\n \n Button\n \n \n \n \n
\n \n Button\n \n \n \n \n \n );\n};" }, { "id": "components-button--confirmed-button-demo", "name": "Confirmed Button Demo", "snippet": "const ConfirmedButtonDemo = () => {\n return (\n console.log('confirmed')}\n loading={false}\n emphasis=\"default\"\n size=\"default\"\n visuallyDisabled={false}\n disabled={false}\n visuallyFocused={false}\n align=\"start\">Confirm\n \n );\n};" }, { "id": "components-button--fragment-test", "name": "Fragment Test", "snippet": "const FragmentTest = () => {\n return (\n \n \n <>Button\n \n \n <>\n \n Button\n \n \n \n \n );\n};" }, { "id": "components-button--skeleton-test", "name": "Skeleton Test", "snippet": "const SkeletonTest = () => {\n return (\n \n \n \n \n \n \n );\n};" }, { "id": "components-button--full-size-test", "name": "Full Size Test", "snippet": "const FullSizeTest = () => {\n return (\n \n \n Full Width\n \n
\n \n Full Height\n \n
\n
\n Full Both\n \n
\n \n );\n};" } ], "import": "import { Avatar, Box, Button, ConfirmedButton, Icon, TextSkeleton } from '@a-type/ui';\nimport { Icon } from '../icon/index.js';" }, "components-camera": { "id": "components-camera", "name": "Camera", "path": "./src/components/camera/Camera.stories.tsx", "jsDocTags": {}, "description": "`Camera` displays a live camera and sends a captured `File` to `onCapture`. Use `facingMode=\"environment\"` to request a rear-facing camera.\n\nCamera access requires browser permission and a secure context. `format` defaults to `image/png`, but photos taken with ImageCapture are not re-encoded to that format. Use `Camera.Root` and its controls for a custom layout.", "reactDocgen": { "description": "", "methods": [], "displayName": "CameraRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/camera/Camera.tsx", "actualName": "CameraRoot", "exportName": "CameraRoot", "props": { "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "ReactCSSProperties", "raw": "React.CSSProperties" }, "description": "" }, "onCapture": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(data: File) => void", "signature": { "arguments": [ { "type": { "name": "File" }, "name": "data" } ], "return": { "name": "void" } } }, "description": "" }, "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "" }, "format": { "required": false, "tsType": { "name": "union", "raw": "'image/png' | 'image/jpeg'", "elements": [ { "name": "literal", "value": "'image/png'" }, { "name": "literal", "value": "'image/jpeg'" } ] }, "description": "", "defaultValue": { "value": "'image/png'", "computed": false } }, "facingMode": { "required": false, "tsType": { "name": "union", "raw": "'user' | 'environment'", "elements": [ { "name": "literal", "value": "'user'" }, { "name": "literal", "value": "'environment'" } ] }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLDivElement" } ], "raw": "Ref" }, "description": "" } } }, "stories": [ { "id": "components-camera--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" }, { "id": "components-camera--back-camera", "name": "Back Camera", "snippet": "const BackCamera = () => {\n return ;\n};" } ], "import": "import { Camera } from '@a-type/ui';" }, "components-card": { "id": "components-card", "name": "CardRoot", "path": "./src/components/card/Card.stories.tsx", "jsDocTags": {}, "description": "Compose `Card` with parts such as `Card.Main`, `Card.Title`, `Card.Content`, and `Card.Actions`. Set `size` or `emphasis` on the root, and use `Card.Grid` for a responsive masonry layout.\n\n`Card.Main` becomes interactive when given `onClick` or `render`; use `nonInteractive` to prevent that.", "reactDocgen": { "description": "", "methods": [], "displayName": "CardRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/card/Card.tsx", "actualName": "CardRoot", "exportName": "CardRoot", "props": { "size": { "required": false, "tsType": { "name": "union", "raw": "'sm' | 'md' | 'lg'", "elements": [ { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" } ] }, "description": "" }, "emphasis": { "required": false, "tsType": { "name": "union", "raw": "'ambient' | 'secondary' | 'primary'", "elements": [ { "name": "literal", "value": "'ambient'" }, { "name": "literal", "value": "'secondary'" }, { "name": "literal", "value": "'primary'" } ] }, "description": "", "defaultValue": { "value": "'ambient'", "computed": false } }, "render": { "required": false, "tsType": { "name": "UseRenderRenderProp", "elements": [ { "name": "signature", "type": "object", "raw": "{\n\temphasis?: 'ambient' | 'secondary' | 'primary';\n\tsize?: CardSize;\n}", "signature": { "properties": [ { "key": "emphasis", "value": { "name": "union", "raw": "'ambient' | 'secondary' | 'primary'", "elements": [ { "name": "literal", "value": "'ambient'" }, { "name": "literal", "value": "'secondary'" }, { "name": "literal", "value": "'primary'" } ], "required": false } }, { "key": "size", "value": { "name": "union", "raw": "'sm' | 'md' | 'lg'", "elements": [ { "name": "literal", "value": "'sm'" }, { "name": "literal", "value": "'md'" }, { "name": "literal", "value": "'lg'" } ], "required": false } } ] } } ], "raw": "UseRenderRenderProp<{\n\temphasis?: 'ambient' | 'secondary' | 'primary';\n\tsize?: CardSize;\n}>" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLDivElement" } ], "raw": "Ref" }, "description": "" } }, "composes": [ "HTMLAttributes" ] }, "stories": [ { "id": "components-card--default", "name": "Default", "snippet": "const Default = () => \n \n \n } />\n alert('clicked')}>\n Card Title\n Other stuff you'd have on a card. Maybe a time?\n \n More things, if you want.\n \n \n \n \n \n \n \n \n \n \n \n \n alert('clicked')}>\n Card Title which is very long and would normally wrap\n \n Other stuff\n Styling optional\n \n \n \n \n \n \n \n \n;" }, { "id": "components-card--compact", "name": "Compact", "snippet": "const Compact = () => (\n \n \n Card Title\n Other stuff\n More things, if you want.\n \n \n \n \n \n \n \n \n);" }, { "id": "components-card--non-interactive", "name": "Non Interactive", "snippet": "const NonInteractive = () => (\n \n \n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n);" }, { "id": "components-card--as-child", "name": "As Child", "snippet": "const AsChild = () => (\n \n \n Card Title\n Other stuff\n \n }\n />\n \n \n \n \n \n \n \n);" }, { "id": "components-card--as-child-non-interactive", "name": "As Child Non Interactive", "snippet": "const AsChildNonInteractive = () => (\n \n \n Card Title\n Other stuff\n \n }\n />\n \n \n \n \n \n \n \n);" }, { "id": "components-card--grid", "name": "Grid", "snippet": "const Grid = () => {\n const [sizes, setSizes] = useState(() =>\n Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)),\n );\n const remove = (index: number) =>\n setSizes((v) => v.filter((_, i) => i !== index));\n const resize = (index: number) =>\n setSizes((v) => {\n const size = 50 + Math.floor(Math.random() * 300);\n return v.map((s, i) => (i === index ? size : s));\n });\n return (\n \n {sizes.map((size, i) => (\n remove(i)}\n resize={() => resize(i)}\n />\n ))}\n \n );\n};" }, { "id": "components-card--grid-compact", "name": "Grid Compact", "snippet": "const GridCompact = () => {\n const [sizes, setSizes] = useState(() =>\n Array.from({ length: 40 }, () => 50 + Math.floor(Math.random() * 300)),\n );\n const remove = (index: number) =>\n setSizes((v) => v.filter((_, i) => i !== index));\n return (\n \n {sizes.map((size, i) => (\n remove(i)} />\n ))}\n \n );\n};" }, { "id": "components-card--visually-focused", "name": "Visually Focused", "snippet": "const VisuallyFocused = () => (\n \n {}}>\n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n);" }, { "id": "components-card--cards-in-box", "name": "Cards In Box", "snippet": "const CardsInBox = () => {\n return (\n \n
\n \n {}}>\n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n
\n \n \n {}}>\n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n \n {}}>\n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-card--edge-cases", "name": "Edge Cases", "snippet": "const EdgeCases = () => {\n return (\n \n \n {}}>\n Card Title\n Other stuff\n \n \n \n \n \n \n \n \n \n {}}>\n Card Title\n \n \n \n );\n};" } ], "import": "import {\n Box,\n Button,\n Card,\n CardActions,\n CardContent,\n CardFooter,\n CardImage,\n CardMain,\n CardMenu,\n CardRoot,\n CardTitle,\n Icon,\n} from '@a-type/ui';" }, "components-checkbox": { "id": "components-checkbox", "name": "Checkbox", "path": "./src/components/checkbox/Checkbox.stories.tsx", "jsDocTags": {}, "description": "Use `Checkbox` with a label and, when controlled, `checked` and `onCheckedChange`. Set `checkedMode=\"faded\"` to de-emphasize checked items, such as completed tasks.\n\nFor custom composition, use `Checkbox.Root` and `Checkbox.Indicator`.", "reactDocgen": { "description": "", "methods": [], "displayName": "Checkbox", "definedInFile": "/home/runner/work/ui/ui/src/components/checkbox/Checkbox.tsx", "actualName": "Checkbox", "exportName": "Checkbox", "props": { "checkedMode": { "required": false, "tsType": { "name": "union", "raw": "'prominent' | 'faded'", "elements": [ { "name": "literal", "value": "'prominent'" }, { "name": "literal", "value": "'faded'" } ] }, "description": "The checked visual state. Prominent mode means the checked version is visually\nemphasized to the user. Faded means the checked version is visually de-emphasized.\nProminent is appropriate when the user's attention should be drawn to the 'on' state,\nwhile faded is appropriate when a checked state means the item is 'done,' like in a task list." }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLButtonElement" } ], "raw": "Ref" }, "description": "" } }, "composes": [ "CheckboxRootProps" ] }, "stories": [ { "id": "components-checkbox--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { Checkbox } from '@a-type/ui';" }, "components-chip": { "id": "components-chip", "name": "Chip", "path": "./src/components/chip/Chip.stories.tsx", "jsDocTags": {}, "description": "Use `Chip` for a compact label or piece of metadata. Choose `emphasis` to change its appearance.\n\nFor an interactive chip, use `render` with a semantic button or link so it is keyboard accessible.", "reactDocgen": { "description": "", "methods": [], "displayName": "Chip", "definedInFile": "/home/runner/work/ui/ui/src/components/chip/Chip.tsx", "actualName": "Chip", "exportName": "Chip", "props": { "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "any" } ], "raw": "Ref" }, "description": "" }, "emphasis": { "required": false, "tsType": { "name": "union", "raw": "'default' | 'primary' | 'ambient'", "elements": [ { "name": "literal", "value": "'default'" }, { "name": "literal", "value": "'primary'" }, { "name": "literal", "value": "'ambient'" } ] }, "description": "" } }, "composes": [ "UseRenderComponentProps" ] }, "stories": [ { "id": "components-chip--default", "name": "Default", "snippet": "const Default = () => {\n return Chip;\n};" }, { "id": "components-chip--colors", "name": "Colors", "snippet": "const Colors = () => {\n return (\n
\n Gray\n Primary\n Accent\n Attention\n Success\n Lemon\n Leek\n Tomato\n Blueberry\n Eggplant\n
\n );\n};" }, { "id": "components-chip--as-button", "name": "As Button", "snippet": "const AsButton = () => {\n return (\n \n } emphasis=\"primary\">Clickable Chip\n \n Non-clickable Chip\n \n );\n};" } ], "import": "import { Box, Button, Chip } from '@a-type/ui';" }, "components-collapsiblesimple": { "id": "components-collapsiblesimple", "name": "CollapsibleSimple", "path": "./src/components/collapsible/Collapsible.stories.tsx", "jsDocTags": {}, "description": "Compose `Collapsible` with `Collapsible.Trigger` and `Collapsible.Content`, or use `Collapsible.Simple` when the open state is managed elsewhere.\n\nContent animates vertically by default; set `horizontal` or `both` for other directions.", "reactDocgen": { "description": "", "methods": [], "displayName": "CollapsibleSimple", "definedInFile": "/home/runner/work/ui/ui/src/components/collapsible/Collapsible.tsx", "actualName": "CollapsibleSimple", "exportName": "CollapsibleSimple", "props": { "horizontal": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "both": { "required": false, "tsType": { "name": "boolean" }, "description": "" } } }, "stories": [ { "id": "components-collapsiblesimple--default", "name": "Default", "snippet": "const Default = () => {\n const [count, setCount] = useState(2);\n const [open, setOpen] = useState(false);\n\n return (\n <>\n \n \n \n {new Array(count).fill(null).map((_, i) => (\n
Item {i}
\n ))}\n \n \n \n );\n};" } ], "import": "import { CollapsibleSimple } from '@a-type/ui';" }, "components-colormodetoggle": { "id": "components-colormodetoggle", "name": "ColorModeToggle", "path": "./src/components/colorMode/ColorModeToggle.stories.tsx", "jsDocTags": {}, "description": "`ColorModeToggle` offers system, light, and dark modes. By default it uses the shared color mode and persists explicit choices in local storage.\n\nPass `value` and `onValueChange` to manage the selection yourself; providing the callback replaces the default update.", "reactDocgen": { "description": "", "methods": [], "displayName": "ColorModeToggle", "definedInFile": "/home/runner/work/ui/ui/src/components/colorMode/ColorModeToggle.tsx", "actualName": "ColorModeToggle", "exportName": "ColorModeToggle", "props": { "value": { "required": false, "tsType": { "name": "union", "raw": "'light' | 'dark' | 'system'", "elements": [ { "name": "literal", "value": "'light'" }, { "name": "literal", "value": "'dark'" }, { "name": "literal", "value": "'system'" } ] }, "description": "" }, "onValueChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(value: 'light' | 'dark' | 'system', event: any) => void", "signature": { "arguments": [ { "type": { "name": "union", "raw": "'light' | 'dark' | 'system'", "elements": [ { "name": "literal", "value": "'light'" }, { "name": "literal", "value": "'dark'" }, { "name": "literal", "value": "'system'" } ] }, "name": "value" }, { "type": { "name": "any" }, "name": "event" } ], "return": { "name": "void" } } }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-colormodetoggle--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { ColorModeToggle } from '@a-type/ui';" }, "components-combobox": { "id": "components-combobox", "name": "Combobox", "path": "./src/components/combobox/Combobox.stories.tsx", "jsDocTags": {}, "description": "Use `Combobox.create()` or `Combobox.createGrouped()` to select from typed items. Compose `Input`, `Content`, `List`, and `Item`; control selection with `value` and `onValueChange`.\n\nThe search text can be controlled separately with `inputValue` and `onInputValueChange`. Use `onCreate` and optionally `showCreatableItem` to offer new values.", "reactDocgen": { "description": "", "methods": [], "displayName": "ComboboxComposedInput", "definedInFile": "/home/runner/work/ui/ui/src/components/combobox/Combobox.tsx", "actualName": "ComboboxComposedInput", "exportName": "ComboboxComposedInput", "props": { "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" }, "icon": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "disableCaret": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableClear": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "children": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "open": { "required": true, "tsType": { "name": "boolean" }, "description": "" }, "render": { "required": false, "tsType": { "name": "InputProps['render']", "raw": "InputProps['render']" }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-combobox--default", "name": "Default", "snippet": "const Default = ({ arrow, autoHighlight, highlightItemOnHover, creatable }) => {\n const [value, setValue] = useState(null);\n const allItems =\n value && items.includes(value)\n ? items\n : value\n ? [value, ...items]\n : items;\n return (\n {\n console.log('Creating item:', value);\n setValue({ id: value, label: value });\n }\n : undefined\n }\n >\n }\n style={{ width: 200 }}\n >\n {creatable && (\n \n \n \n )}\n \n \n \n {(item) => (\n \n {item.label}\n \n )}\n \n No results found.\n \n \n );\n};" }, { "id": "components-combobox--grouped", "name": "Grouped", "snippet": "const Grouped = ({ arrow, autoHighlight, highlightItemOnHover, creatable }) => {\n const [value, setValue] = useState(null);\n const [input, setInput] = useState('');\n return (\n alert(`Create item: ${value}`)\n : undefined\n }\n >\n \n \n \n {(group) => (\n \n \n {group.category}\n \n \n {group.items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n )}\n \n \n {creatable ? (\n
\n Create \"{input}\"\n
\n ) : (\n `No results found.`\n )}\n \n \n \n Select your favorite fruit or berry.\n {creatable ? ' Enter creates a new item.' : ''}\n \n \n \n );\n};" }, { "id": "components-combobox--not-popover", "name": "Not Popover", "snippet": "const NotPopover = ({ autoHighlight, highlightItemOnHover, creatable }) => {\n const [value, setValue] = useState(null);\n return (\n alert(`Create item: ${value}`)\n : undefined\n }\n >\n \n \n \n \n \n \n \n {(group) => (\n \n \n {group.category}\n \n \n {group.items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n )}\n \n No results found.\n \n \n );\n};" }, { "id": "components-combobox--multi-select", "name": "Multi Select", "snippet": "const MultiSelect = ({ arrow, autoHighlight, highlightItemOnHover, creatable }) => {\n const [value, setValue] = useState([]);\n return (\n \n \n \n {(items) => (\n <>\n \n {items.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n )}\n \n \n \n }>\n {(item) => (\n \n {item.label}\n \n )}\n \n No results found.\n \n \n );\n};" } ], "import": "import { Box, Combobox, Icon } from '@a-type/ui';" }, "components-contextmenu": { "id": "components-contextmenu", "name": "ContextMenu", "path": "./src/components/contextMenu/contextMenu.stories.tsx", "jsDocTags": {}, "description": "Wrap a target in `ContextMenu.Trigger` and put `ContextMenu.Item` elements inside `ContextMenu.Content`. Use `onSelect` on items to handle actions.\n\nThe menu opens from the context-menu gesture, renders in a portal, and stops click propagation from its content.", "reactDocgen": { "description": "", "methods": [], "displayName": "ContextMenuContent", "definedInFile": "/home/runner/work/ui/ui/src/components/contextMenu/contextMenu.tsx", "actualName": "ContextMenuContent", "exportName": "ContextMenuContent", "props": { "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" } } }, "stories": [ { "id": "components-contextmenu--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n \n \n alert('Item 1 selected')}>Item 1\n \n alert('Item 2 selected')}>Item 2\n \n alert('Item 3 selected')}>Item 3\n \n \n \n );\n};" } ], "import": "import { Button, ContextMenu } from '@a-type/ui';" }, "components-datepicker": { "id": "components-datepicker", "name": "DatePicker", "path": "./src/components/datePicker/DatePicker.stories.tsx", "jsDocTags": {}, "description": "`DatePicker` is controlled with a `Date | null` value and `onChange`. `DateRangePicker` uses the same pattern with `{ start, end }`, where each date may be null.\n\nBoth start by displaying the current month. Use their `Root` and calendar parts to customize the layout.", "reactDocgen": { "description": "", "methods": [], "displayName": "DatePickerDefault", "definedInFile": "/home/runner/work/ui/ui/src/components/datePicker/DatePicker.tsx", "actualName": "DatePickerDefault", "props": { "value": { "required": true, "tsType": { "name": "union", "raw": "Date | null", "elements": [ { "name": "Date" }, { "name": "null" } ] }, "description": "" }, "onChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(date: Date | null) => void", "signature": { "arguments": [ { "type": { "name": "union", "raw": "Date | null", "elements": [ { "name": "Date" }, { "name": "null" } ] }, "name": "date" } ], "return": { "name": "void" } } }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" } } }, "stories": [ { "id": "components-datepicker--default", "name": "Default", "snippet": "const Default = () => {\n const [value, setValue] = useState(null);\n return ;\n};" }, { "id": "components-datepicker--range", "name": "Range", "snippet": "const Range = () => {\n const [value, setValue] = useState<{\n start: Date | null;\n end: Date | null;\n }>({ start: null, end: null });\n return ;\n};" }, { "id": "components-datepicker--custom-composition", "name": "Custom Composition", "snippet": "const CustomComposition = () => {\n const [value, setValue] = useState(null);\n\n return (\n \n \n \n {(value) => }\n \n \n );\n};" } ], "import": "import { DatePicker, DateRangePicker, Spinner } from '@a-type/ui';" }, "components-dialog": { "id": "components-dialog", "name": "Dialog", "path": "./src/components/dialog/Dialog.stories.tsx", "jsDocTags": {}, "description": "Compose `Dialog` with `Dialog.Trigger`, `Dialog.Content`, and a `Dialog.Title`; add `Description`, `Actions`, or `Close` as needed. Control it with `open` and `onOpenChange`, or use `defaultOpen`.\n\nOn screens at most 600px wide, it becomes a drawer unless `disableSheet` is set. Content includes a close button by default; use `disableDefaultClose` to remove it.", "reactDocgen": { "description": "", "methods": [], "displayName": "DialogRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/dialog/Dialog.tsx", "actualName": "DialogRoot", "props": { "children": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "disableSheet": { "required": false, "tsType": { "name": "boolean" }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-dialog--default", "name": "Default", "snippet": "const Default = () => (\n }>Open\n \n \n Hello world\n \n \n \n \n \n \n \n \n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-dialog--small", "name": "Small", "snippet": "const Small = () => (\n }>Open\n \n \n Hello world\n \n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-dialog--no-sheet", "name": "No Sheet", "snippet": "const NoSheet = () => (\n }>Open\n \n \n Hello world\n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-dialog--positioned", "name": "Positioned", "snippet": "const Positioned = () => (\n }>Open\n \n \n Hello world\n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-dialog--virtual-keyboard", "name": "Virtual Keyboard", "snippet": "const VirtualKeyboard = () => {\n const [keyboard, setKeyboard] = useState(false);\n\n useEffect(() => {\n if (keyboard) {\n document.body.style.setProperty(\n '--mock-virtual-keyboard-height',\n '300px',\n );\n } else {\n document.body.style.removeProperty('--mock-virtual-keyboard-height');\n }\n }, [keyboard]);\n\n return (\n \n \n }>Open\n \n \n Hello world\n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-dialog--multi-nested", "name": "Multi Nested", "snippet": "const MultiNested = () => {\n return (\n \n }>Open\n \n Hello world\n \n \n \n }>Open nested\n \n Nested dialog\n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-dialog--selectable", "name": "Selectable", "snippet": "const Selectable = () => {\n return (\n \n Open\n \n Hello world\n \n Option 1\n Option 2\n Option 3\n \n \n \n );\n};" } ], "import": "import { Box, Button, Dialog, H1, Input, P, ParticleLayer, Provider, Select, Tooltip } from '@a-type/ui';\nimport { ParticleLayer } from '../particles/index.js';\nimport { Dialog } from './Dialog.js';\nimport { Button } from '../button/index.js';\nimport { Box } from '../box/Box.js';\nimport { Input } from '../input/index.js';" }, "components-drawer": { "id": "components-drawer", "name": "Drawer", "path": "./src/components/drawer/Drawer.stories.tsx", "jsDocTags": {}, "description": "Compose `Drawer` with `Trigger`, `Content`, `Title`, and optional `Description` and `Actions` parts. Use `open` and `onOpenChange` when controlling it externally.\n\nThe drawer swipes downward. Content includes a swipe handle and close button; `disableDefaultClose` removes the button.", "reactDocgen": { "description": "", "methods": [], "displayName": "DrawerRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/drawer/Drawer.tsx", "actualName": "DrawerRoot", "composes": [ "Omit" ] }, "stories": [ { "id": "components-drawer--default", "name": "Default", "snippet": "const Default = () => (<>\n }>Open\n \n Hello world\n \n \n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-drawer--no-default-close", "name": "No Default Close", "snippet": "const NoDefaultClose = () => (<>\n }>Open\n \n No default close\n \n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." }, { "id": "components-drawer--small", "name": "Small", "snippet": "const Small = () => (<>\n }>Open\n \n Small drawer\n \n \n \n \n \n );" }, { "id": "components-drawer--snap-points", "name": "Snap Points", "snippet": "const SnapPoints = () => (<>\n }>Open\n \n Snap points\n \n \n \n \n \n \n );", "warning": "Incomplete snippet: `DummyContent` could not be resolved statically." } ], "import": "import { Button, Drawer, H1, Input, P } from '@a-type/ui';\nimport { Drawer } from './Drawer.js';\nimport { Button } from '../button/index.js';" }, "components-dropdownmenu": { "id": "components-dropdownmenu", "name": "DropdownMenu", "path": "./src/components/dropdownMenu/DropdownMenu.stories.tsx", "jsDocTags": {}, "description": "Compose `DropdownMenu` with a `Trigger`, `Content`, and `Item` children. Use the trigger `render` prop to supply a `Button`, and use checkbox or radio items for selectable options.\n\nContent is portaled and includes an arrow; positioning options such as `side` and `align` are passed to `Content`.", "reactDocgen": { "description": "", "methods": [], "displayName": "StyledItem", "definedInFile": "/home/runner/work/ui/ui/src/components/dropdownMenu/DropdownMenu.tsx", "actualName": "StyledItem", "props": { "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLDivElement" } ], "raw": "Ref" }, "description": "" } }, "composes": [ "MenuItemProps" ] }, "stories": [ { "id": "components-dropdownmenu--default", "name": "Default", "snippet": "const Default = () => (<>\n }>Open\n \n \n Item 1\n \n \n \n \n \n Item 2\n \n \n \n \n \n );" }, { "id": "components-dropdownmenu--sides", "name": "Sides", "snippet": "const Sides = (args) => (\n \n \n }>Top\n \n \n Item 1\n \n \n Item 2\n \n \n \n \n }>Right\n \n \n Item 1\n \n \n Item 2\n \n \n \n \n }>Left\n \n \n Item 1\n \n \n Item 2\n \n \n \n \n }>Bottom\n \n \n Item 1\n \n \n Item 2\n \n \n \n \n);" } ], "import": "import { Box, Button, DropdownMenu, Icon } from '@a-type/ui';\nimport { DropdownMenu } from './DropdownMenu.js';\nimport { Button } from '../button/Button.js';\nimport { Icon } from '../icon/index.js';" }, "components-editabletext": { "id": "components-editabletext", "name": "EditableText", "path": "./src/components/editableText/EditableText.stories.tsx", "jsDocTags": {}, "description": "`EditableText` displays text that can be clicked to edit. Pass `value` and `onValueChange`; changes are reported as the user types.\n\nEditing ends on Enter or blur. Pass `editing` and `onEditingChange` to control the editing state.", "reactDocgen": { "description": "", "methods": [], "displayName": "EditableText", "definedInFile": "/home/runner/work/ui/ui/src/components/editableText/EditableText.tsx", "actualName": "EditableText", "exportName": "EditableText", "props": { "value": { "required": true, "tsType": { "name": "string" }, "description": "" }, "onValueChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(value: string) => void", "signature": { "arguments": [ { "type": { "name": "string" }, "name": "value" } ], "return": { "name": "void" } } }, "description": "" }, "editing": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "onEditingChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(editing: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "editing" } ], "return": { "name": "void" } } }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "id": { "required": false, "tsType": { "name": "string" }, "description": "" }, "autoSelect": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "autoFocus": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "onFocus": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: FocusEvent) => void", "signature": { "arguments": [ { "type": { "name": "FocusEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "onBlur": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: FocusEvent) => void", "signature": { "arguments": [ { "type": { "name": "FocusEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "onChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: ChangeEvent) => void", "signature": { "arguments": [ { "type": { "name": "ChangeEvent", "elements": [ { "name": "HTMLInputElement" } ], "raw": "ChangeEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "onKeyDown": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: KeyboardEvent) => void", "signature": { "arguments": [ { "type": { "name": "KeyboardEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "onKeyUp": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: KeyboardEvent) => void", "signature": { "arguments": [ { "type": { "name": "KeyboardEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" } } }, "stories": [ { "id": "components-editabletext--default", "name": "Default", "snippet": "const Default = args => {\n const [value, setValue] = useState(args.value);\n const [editable, setEditable] = useState(false);\n\n return (\n \n );\n};" }, { "id": "components-editabletext--title", "name": "Title", "snippet": "const Title = args => {\n const [value, setValue] = useState(args.value);\n const [editable, setEditable] = useState(false);\n\n return (\n \n \n \n );\n};" } ], "import": "import { EditableText, Heading } from '@a-type/ui';" }, "components-emojipicker": { "id": "components-emojipicker", "name": "EmojiPicker", "path": "./src/components/emojiPicker/EmojiPicker.stories.tsx", "jsDocTags": {}, "description": "Use `EmojiPicker` with `onValueChange`, which receives the emoji and its label. An optional `onClear` adds a clear action.\n\nThe prefab includes search and skin-tone controls; the skin-tone choice is stored in local storage. Use the exposed parts for a custom picker.", "reactDocgen": { "description": "", "methods": [], "displayName": "EmojiPickerViewport", "definedInFile": "/home/runner/work/ui/ui/src/components/emojiPicker/EmojiPicker.tsx", "actualName": "EmojiPickerViewport", "exportName": "EmojiPickerViewport" }, "stories": [ { "id": "components-emojipicker--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" } ], "import": "import { EmojiPicker } from '@a-type/ui';" }, "components-form": { "id": "components-form", "name": "FormikForm", "path": "./src/components/forms/FormikForm.stories.tsx", "jsDocTags": {}, "description": "`FormikForm` wraps Formik and a styled form. Provide `initialValues` and `onSubmit`, then use named fields such as `FormikForm.TextField`, `FormikForm.CheckboxField`, and `FormikForm.SubmitButton`. It also exposes `TextAreaField`, `NumberStepperField`, `SwitchField`, `ToggleGroupField`, and `EmojiField`.\n\nField names must match the Formik values. `Field` exposes `Label`, `Control`, `Description`, and `Error` for custom layouts.", "reactDocgen": { "description": "", "methods": [], "displayName": "FormikFormRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/forms/FormikForm.tsx", "actualName": "FormikFormRoot", "exportName": "FormikFormRoot", "props": { "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "ReactCSSProperties", "raw": "React.CSSProperties" }, "description": "" } }, "composes": [ "FormikConfig" ] }, "stories": [ { "id": "components-form--default", "name": "Default", "snippet": "const Default = () => {\n return (\n {\n if (!values.email.endsWith('.com')) {\n return { email: 'Email must end with .com' };\n }\n }}\n onSubmit={(values) => {\n alert(JSON.stringify(values, null, 2));\n }}>\n \n \n \n \n \n \n Basic\n Pro\n Enterprise\n \n \n \n Sign up\n \n );\n};" } ], "import": "import {\n CheckboxField,\n EmojiField,\n FormikForm,\n NumberStepperField,\n SubmitButton,\n SwitchField,\n TextField,\n ToggleGroupField,\n} from '@a-type/ui';" }, "components-horizontallist": { "id": "components-horizontallist", "name": "HorizontalList", "path": "./src/components/horizontalList/HorizontalList.stories.tsx", "jsDocTags": {}, "description": "`HorizontalList` displays a scrolling row and can expand overflowing items into a wrapped layout. It manages its own open state, or accepts `open` and `onOpenChange`.\n\nUse `onCanOpenChange` to observe whether content overflows and `disableInternalOpenToggle` to supply your own toggle.", "reactDocgen": { "description": "", "methods": [], "displayName": "HorizontalList", "definedInFile": "/home/runner/work/ui/ui/src/components/horizontalList/HorizontalList.tsx", "actualName": "HorizontalList", "exportName": "HorizontalList", "props": { "open": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "onOpenChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(open: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "open" } ], "return": { "name": "void" } } }, "description": "" }, "children": { "required": true, "tsType": { "name": "ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "contentClassName": { "required": false, "tsType": { "name": "string" }, "description": "" }, "onCanOpenChange": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(canOpen: boolean) => void", "signature": { "arguments": [ { "type": { "name": "boolean" }, "name": "canOpen" } ], "return": { "name": "void" } } }, "description": "" }, "openDirection": { "required": false, "tsType": { "name": "union", "raw": "'up' | 'down'", "elements": [ { "name": "literal", "value": "'up'" }, { "name": "literal", "value": "'down'" } ] }, "description": "", "defaultValue": { "value": "'down'", "computed": false } }, "disableInternalOpenToggle": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "style": { "required": false, "tsType": { "name": "ReactCSSProperties", "raw": "React.CSSProperties" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" } } }, "stories": [ { "id": "components-horizontallist--default", "name": "Default", "snippet": "const Default = () => {\n const [open, setOpen] = useState(false);\n\n return (\n \n \n setOpen(!open)}\n style={{\n marginBottom: '0.25rem',\n marginRight: '0.25rem',\n marginTop: 'auto',\n alignSelf: 'flex-end',\n }}>\n {open ? 'Close' : 'Open'}\n \n {}}\n open={open}\n onOpenChange={setOpen}><>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-horizontallist--cant-open", "name": "Cant Open", "snippet": "const CantOpen = () => {\n const [more, setMore] = useState(false);\n\n return (\n \n {}}>\n \n \n \n {more && (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n \n \n );\n};" }, { "id": "components-horizontallist--initial-open", "name": "Initial Open", "snippet": "const InitialOpen = () => {\n const [open, setOpen] = useState(true);\n\n return (\n \n {}}\n open={open}\n onOpenChange={setOpen}><>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};" }, { "id": "components-horizontallist--can-open-changes-dynamically", "name": "Can Open Changes Dynamically", "snippet": "const CanOpenChangesDynamically = () => {\n const [itemCount, setItemCount] = useState(1);\n\n return (\n \n {}}>\n {new Array(itemCount).fill(null).map((_, i) => (\n \n ))}\n \n \n \n );\n};" } ], "import": "import { Button, HorizontalList, Icon } from '@a-type/ui';\nimport { Button } from '../button/index.js';\nimport { Icon } from '../icon/index.js';" }, "components-icon": { "id": "components-icon", "name": "Icon", "path": "./src/components/icon/Icon.stories.tsx", "jsDocTags": {}, "description": "Render `Icon` with a supported `name` and optional pixel `size`; the All story lists the available names. Icons need the spritesheet provided by `Provider`, or a manually mounted `IconSpritesheet`.\n\nIcons inside a loading `Button` show a spinner unless `loading={false}` is passed.", "reactDocgen": { "description": "", "methods": [], "displayName": "Icon", "definedInFile": "/home/runner/work/ui/ui/src/components/icon/Icon.tsx", "actualName": "Icon", "exportName": "Icon", "props": { "name": { "required": true, "tsType": { "name": "unknown[number]", "raw": "(typeof iconNames)[number]" }, "description": "" }, "size": { "required": false, "tsType": { "name": "number" }, "description": "" }, "loading": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "filled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "SVGSVGElement" } ] }, "description": "" } }, "composes": [ "UseRenderComponentProps" ] }, "stories": [ { "id": "components-icon--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" }, { "id": "components-icon--all", "name": "All", "snippet": "const All = () => {\n return (\n \n {iconNames.map((name) => (\n \n \n \n {name}\n \n \n ))}\n \n );\n};" } ], "import": "import { Box, Icon } from '@a-type/ui';" }, "components-imageuploader": { "id": "components-imageuploader", "name": "ImageUploader", "path": "./src/components/imageUploader/ImageUploader.stories.tsx", "jsDocTags": {}, "description": "`ImageUploader` takes an image URL or null as `value` and reports a `File | null` through `onChange`. It supports file selection, drag and drop, camera capture, and optional `altText`/`onAltText`.\n\n`maxDimension` resizes selected or dropped files; camera captures bypass that resize. The caller is responsible for storing the file and updating the URL.", "reactDocgen": { "description": "Renders an image if one is already set, and allows either clicking\non the image to select a new one, or dragging a new image onto the\ncomponent to replace the existing one.", "methods": [], "displayName": "ImageUploaderRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/imageUploader/ImageUploader.tsx", "actualName": "ImageUploaderRoot", "exportName": "ImageUploaderRoot", "props": { "value": { "required": true, "tsType": { "name": "union", "raw": "string | null", "elements": [ { "name": "string" }, { "name": "null" } ] }, "description": "" }, "onChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(value: File | null) => void", "signature": { "arguments": [ { "type": { "name": "union", "raw": "File | null", "elements": [ { "name": "File" }, { "name": "null" } ] }, "name": "value" } ], "return": { "name": "void" } } }, "description": "" }, "altText": { "required": false, "tsType": { "name": "string" }, "description": "" }, "onAltText": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(value: string) => void", "signature": { "arguments": [ { "type": { "name": "string" }, "name": "value" } ], "return": { "name": "void" } } }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "maxDimension": { "required": false, "tsType": { "name": "number" }, "description": "" }, "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "" } } }, "stories": [ { "id": "components-imageuploader--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-imageuploader--with-alt-text", "name": "With Alt Text", "snippet": "const WithAltText = () => ;" }, { "id": "components-imageuploader--read-only-alt-text", "name": "Read Only Alt Text", "snippet": "const ReadOnlyAltText = () => ;" } ], "import": "import { ImageUploader } from '@a-type/ui';" }, "components-input": { "id": "components-input", "name": "Input", "path": "./src/components/input/Input.stories.tsx", "jsDocTags": {}, "description": "`Input` is a styled text input. Use `value` and `onValueChange` for a controlled value, and `startAccessory` or `endAccessory` for content inside its border.\n\n`autoSelect` selects text on focus; `placeholders` can rotate placeholder text. Associate the input with a label, or use a form field.", "reactDocgen": { "description": "", "methods": [], "displayName": "InputDefault", "definedInFile": "/home/runner/work/ui/ui/src/components/input/Input.tsx", "actualName": "InputDefault", "props": { "autoSelect": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "placeholders": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "string" } ], "raw": "string[]" }, "description": "Shuffle between random placeholders" }, "placeholdersIntervalMs": { "required": false, "tsType": { "name": "number" }, "description": "" }, "borderRef": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLInputElement" } ], "raw": "Ref" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-input--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-input--button-and-input", "name": "Button And Input", "snippet": "const ButtonAndInput = () => \n \n \n;" }, { "id": "components-input--with-accessories", "name": "With Accessories", "snippet": "const WithAccessories = () => \n \n \n \n;" }, { "id": "components-input--nested-in-boxes", "name": "Nested In Boxes", "snippet": "const NestedInBoxes = () => \n \n \n \n;" } ], "import": "import { Box, Button, Icon, Input } from '@a-type/ui';" }, "components-layouts": { "id": "components-layouts", "name": "PageRoot", "path": "./src/components/layouts/layouts.stories.tsx", "jsDocTags": {}, "description": "Build a page with `PageRoot`, `PageContent`, and optionally `PageNav`; `PageSection` and `PageSectionGrid` organize content. `PageFixedArea` provides a fixed area, while `PageNowPlaying` is useful for floating controls.\n\n`PageNav` hides while the keyboard is open. `PageNowPlaying` portals to the body by default; set `disablePortal` to keep it in place.", "reactDocgen": { "description": "", "methods": [], "displayName": "SlotDiv", "definedInFile": "/home/runner/work/ui/ui/src/components/utility/SlotDiv.tsx", "actualName": "SlotDiv", "exportName": "SlotDiv", "composes": [ "UseRenderComponentProps" ] }, "stories": [ { "id": "components-layouts--default", "name": "Default", "snippet": "const Default = () => {\n const [content, setContent] = useState(true);\n const toggleContent = () => setContent((prev) => !prev);\n return (\n \n \n
\n

\n Hello, World!\n

\n

This is a simple page layout.

\n
\n \n {content && (\n \n {new Array(100).fill(null).map((_, i) => (\n \n \n \n ))}\n \n )}\n }\n surface=\"ambient\"\n elevated=\"lg\"\n p\n border\n >\n Now playing\n \n \n \n \n \n \n \n \n Item 1 long\n \n \n \n \n \n Item 2\n \n \n \n \n (\n \n )}\n />\n \n Neutral\n \n \n \n \n \n );\n};" }, { "id": "components-layouts--manual-width", "name": "Manual Width", "snippet": "const ManualWidth = () => {\n return (\n \n \n
\n

\n Hello, World!\n

\n

This is a simple page layout.

\n
\n \n {new Array(100).fill(null).map((_, i) => (\n \n \n \n ))}\n \n \n \n \n \n \n \n \n Item 1 long\n \n \n \n \n \n Item 2\n \n \n \n \n \n \n Neutral\n \n \n \n \n \n );\n};" }, { "id": "components-layouts--without-nav", "name": "Without Nav", "snippet": "const WithoutNav = () => (\n \n \n
\n

\n Hello, World!\n

\n

This is a simple page layout.

\n \n {new Array(100).fill(null).map((_, i) => (\n \n \n \n ))}\n \n
\n \n \n Now playing\n \n \n \n \n);" }, { "id": "components-layouts--with-virtual-keyboard", "name": "With Virtual Keyboard", "snippet": "const WithVirtualKeyboard = () => {\n const [keyboard, setKeyboard] = useState(false);\n\n useEffect(() => {\n if (keyboard) {\n document.body.style.setProperty(\n '--mock-virtual-keyboard-height',\n '300px',\n );\n } else {\n document.body.style.removeProperty('--mock-virtual-keyboard-height');\n }\n }, [keyboard]);\n\n return (\n \n \n
\n

\n Hello, World!\n

\n

This is a simple page layout.

\n
\n \n \n \n \n \n \n \n \n \n \n \n Item 1 long\n \n \n \n } />\n \n Item 2\n \n \n \n \n \n \n );\n};" }, { "id": "components-layouts--no-content", "name": "No Content", "snippet": "const NoContent = () => {\n return (\n \n \n \n \n \n \n \n Item 1 long\n \n \n \n \n \n Item 2\n \n \n \n \n (\n \n )}\n />\n \n Neutral\n \n \n \n \n \n );\n};" } ], "import": "import {\n Avatar,\n Box,\n Button,\n Card,\n Input,\n NavBarItem,\n NavBarItemIcon,\n NavBarItemIconWrapper,\n NavBarItemPip,\n NavBarItemText,\n NavBarRoot,\n PageContent,\n PageNav,\n PageNowPlaying,\n PageRoot,\n Switch,\n} from '@a-type/ui';" }, "components-lightbox": { "id": "components-lightbox", "name": "Lightbox", "path": "./src/components/lightbox/Lightbox.stories.tsx", "jsDocTags": {}, "description": "Wrap a single element in `Lightbox` to use it as both the trigger and the enlarged content. `Lightbox.Image` provides image styling.\n\nFor different trigger and content elements, compose `Lightbox.Root`, `Trigger`, `Portal`, `Overlay`, and `Content` yourself.", "reactDocgen": { "description": "", "methods": [], "displayName": "LightboxTitle", "definedInFile": "/home/runner/work/ui/ui/src/components/lightbox/Lightbox.tsx", "actualName": "LightboxTitle", "exportName": "LightboxTitle" }, "stories": [ { "id": "components-lightbox--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n );\n};" } ], "import": "import { Lightbox } from '@a-type/ui';" }, "components-lists": { "id": "components-lists", "name": "Ul", "path": "./src/components/lists/lists.stories.tsx", "jsDocTags": {}, "description": "Use `Ol` or `Ul` with their `Item` parts for styled ordered or unordered lists. They render semantic list elements and accept normal list props.\n\nSet `unstyled` to remove markers and default spacing.", "reactDocgen": { "description": "", "methods": [], "displayName": "OlBase", "definedInFile": "/home/runner/work/ui/ui/src/components/lists/lists.tsx", "actualName": "OlBase", "props": { "unstyled": { "required": false, "tsType": { "name": "boolean" }, "description": "" } }, "composes": [ "ComponentProps" ] }, "stories": [ { "id": "components-lists--ordered-list", "name": "Ordered List", "snippet": "const OrderedList = () => {\n return (\n
    \n First item\n Second item\n Third item\n
\n );\n};" }, { "id": "components-lists--unordered-list", "name": "Unordered List", "snippet": "const UnorderedList = () => {\n return (\n
    \n First item\n Second item\n Third item\n
\n );\n};" }, { "id": "components-lists--no-markers", "name": "No Markers", "snippet": "const NoMarkers = () => {\n return (\n
    \n First item\n Second item\n Third item\n
\n );\n};" } ], "import": "import { Ol, Ul } from '@a-type/ui';" }, "components-liveupdatetextfield": { "id": "components-liveupdatetextfield", "name": "LiveUpdateTextField", "path": "./src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx", "jsDocTags": {}, "description": "Use `LiveUpdateTextField` with `value` and `onChange` for optimistic, debounced updates. The default debounce is 500ms; set `debounceMs` to change it, or `textArea` for multiline input.\n\nExternal value changes are ignored while focused. Blur sends an edited value immediately, even if a debounced update was already sent.", "reactDocgen": { "description": "An extension of TextField which keeps a local realtime value in state and\nperiodically reports changes to the parent. Use this to connect\nto the API and update a value from the field directly.\n\nThis component is optimistic and will not respond to external changes while focused.", "methods": [], "displayName": "LiveUpdateTextField", "definedInFile": "/home/runner/work/ui/ui/src/components/liveUpdateTextField/LiveUpdateTextField.tsx", "actualName": "LiveUpdateTextField", "exportName": "LiveUpdateTextField", "props": { "value": { "required": true, "tsType": { "name": "string" }, "description": "" }, "debounceMs": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "500", "computed": false } }, "onChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(value: string) => void", "signature": { "arguments": [ { "type": { "name": "string" }, "name": "value" } ], "return": { "name": "void" } } }, "description": "" }, "textArea": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "onFocus": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: FocusEvent) => void", "signature": { "arguments": [ { "type": { "name": "FocusEvent", "elements": [ { "name": "union", "raw": "HTMLInputElement | HTMLTextAreaElement", "elements": [ { "name": "HTMLInputElement" }, { "name": "HTMLTextAreaElement" } ] } ], "raw": "FocusEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "onBlur": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(ev: FocusEvent) => void", "signature": { "arguments": [ { "type": { "name": "FocusEvent", "elements": [ { "name": "union", "raw": "HTMLInputElement | HTMLTextAreaElement", "elements": [ { "name": "HTMLInputElement" }, { "name": "HTMLTextAreaElement" } ] } ], "raw": "FocusEvent" }, "name": "ev" } ], "return": { "name": "void" } } }, "description": "" }, "autoComplete": { "required": false, "tsType": { "name": "InputProps['autoComplete']", "raw": "InputProps['autoComplete']" }, "description": "" }, "autoFocus": { "required": false, "tsType": { "name": "InputProps['autoFocus']", "raw": "InputProps['autoFocus']" }, "description": "" }, "autoSelect": { "required": false, "tsType": { "name": "InputProps['autoSelect']", "raw": "InputProps['autoSelect']" }, "description": "" }, "required": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "placeholder": { "required": false, "tsType": { "name": "string" }, "description": "" }, "type": { "required": false, "tsType": { "name": "InputProps['type']", "raw": "InputProps['type']" }, "description": "" }, "id": { "required": false, "tsType": { "name": "string" }, "description": "" }, "onKeyDown": { "required": false, "tsType": { "name": "KeyboardEventHandler" }, "description": "" }, "onKeyUp": { "required": false, "tsType": { "name": "KeyboardEventHandler" }, "description": "" }, "onClick": { "required": false, "tsType": { "name": "MouseEventHandler" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "union", "raw": "HTMLInputElement | HTMLTextAreaElement", "elements": [ { "name": "HTMLInputElement" }, { "name": "HTMLTextAreaElement" } ] } ], "raw": "Ref" }, "description": "" } } }, "stories": [ { "id": "components-liveupdatetextfield--default", "name": "Default", "snippet": "const Default = () => {\n const [value, setValue] = useState('Initial value');\n return ;\n};" } ], "import": "import { LiveUpdateTextField } from '@a-type/ui';" }, "components-marquee": { "id": "components-marquee", "name": "Marquee", "path": "./src/components/marquee/marquee.stories.tsx", "jsDocTags": {}, "description": "Place `Marquee.Item` children inside `Marquee` to cycle through them one at a time. The `timeout` prop controls the interval in milliseconds and defaults to 5000.", "reactDocgen": { "description": "", "methods": [], "displayName": "Marquee", "definedInFile": "/home/runner/work/ui/ui/src/components/marquee/marquee.tsx", "actualName": "Marquee", "exportName": "Marquee", "props": { "timeout": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "5000", "computed": false } } }, "composes": [ "ComponentProps" ] }, "stories": [ { "id": "components-marquee--default", "name": "Default", "snippet": "const Default = params => {\n return (\n \n \n \n \n \n Hello, world\n \n \n }\n />\n \n );\n};" } ], "import": "import { Marquee } from '@a-type/ui';" }, "components-masonry": { "id": "components-masonry", "name": "Masonry", "path": "./src/components/masonry/masonry.stories.tsx", "jsDocTags": {}, "description": "`Masonry` arranges its direct children into columns based on their measured heights. Set `columns` to a number or a function of container width, and `gap` to a pixel value.\n\nSet `data-span` on a child, or spread `masonrySpan(n)`, to span multiple columns.", "reactDocgen": { "description": "", "methods": [], "displayName": "Masonry", "definedInFile": "/home/runner/work/ui/ui/src/components/masonry/masonry.tsx", "actualName": "Masonry", "exportName": "Masonry", "props": { "children": { "required": true, "tsType": { "name": "ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "columns": { "required": false, "tsType": { "name": "union", "raw": "number | ((containerWidth: number) => number)", "elements": [ { "name": "number" }, { "name": "unknown" } ] }, "description": "", "defaultValue": { "value": "3", "computed": false } }, "gap": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "16", "computed": false } }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" } } }, "stories": [ { "id": "components-masonry--default", "name": "Default", "snippet": "const Default = props => {\n return {content()};\n};" }, { "id": "components-masonry--with-span", "name": "With Span", "snippet": "const WithSpan = props => {\n return {content(true)};\n};" } ], "import": "import { Box, Masonry } from '@a-type/ui';" }, "components-note": { "id": "components-note", "name": "Note", "path": "./src/components/note/Note.stories.tsx", "jsDocTags": {}, "description": "`Note` renders its children in a folded-note surface. Use `Note.Input` for an editable, auto-sizing text area inside it.\n\n`Note.Input` is the input itself rather than a complete labeled field, so provide a label when editing.", "reactDocgen": { "description": "", "methods": [], "displayName": "NoteRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/note/Note.tsx", "actualName": "NoteRoot", "props": { "children": { "required": false, "tsType": { "name": "ReactNode" }, "description": "" } }, "composes": [ "HTMLAttributes" ] }, "stories": [ { "id": "components-note--default", "name": "Default", "snippet": "const Default = () => This is a note;" }, { "id": "components-note--editable", "name": "Editable", "snippet": "const Editable = () => {\n return (\n \n \n \n );\n};" } ], "import": "import { Note } from '@a-type/ui';" }, "components-numberstepper": { "id": "components-numberstepper", "name": "NumberStepper", "path": "./src/components/numberStepper/NumberStepper.stories.tsx", "jsDocTags": {}, "description": "`NumberStepper` is controlled with a numeric `value` and `onChange`. Use `increment` for a fixed step or `steps` for a list of allowed values; the current value should be in that list.\n\n`min` and `max` disable buttons at the boundaries but do not clamp a step that crosses them.", "reactDocgen": { "description": "", "methods": [], "displayName": "NumberStepper", "definedInFile": "/home/runner/work/ui/ui/src/components/numberStepper/NumberStepper.tsx", "actualName": "NumberStepper", "exportName": "NumberStepper", "props": { "value": { "required": true, "tsType": { "name": "number" }, "description": "" }, "onChange": { "required": true, "tsType": { "name": "signature", "type": "function", "raw": "(value: number) => void", "signature": { "arguments": [ { "type": { "name": "number" }, "name": "value" } ], "return": { "name": "void" } } }, "description": "" }, "highlightChange": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "steps": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "number" } ], "raw": "number[]" }, "description": "" }, "increment": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "1", "computed": false } }, "renderValue": { "required": false, "tsType": { "name": "signature", "type": "function", "raw": "(value: number) => ReactNode", "signature": { "arguments": [ { "type": { "name": "number" }, "name": "value" } ], "return": { "name": "ReactNode" } } }, "description": "", "defaultValue": { "value": "function fractionToText(decimal) {\n let maxDenominator = 10;\n let sign = 1;\n // erase negativity for now\n if (decimal < 0) {\n sign = -1;\n decimal *= -1;\n }\n let matrix = [\n [1, 0],\n [0, 1],\n ];\n let x = decimal;\n let ai;\n let count = 0;\n while (matrix[1][0] * (ai = Math.floor(x)) + matrix[1][1] <= maxDenominator) {\n // avoid infinite loop\n if (count++ > 50) {\n break;\n }\n let term = matrix[0][0] * ai + matrix[0][1];\n matrix[0][1] = matrix[0][0];\n matrix[0][0] = term;\n term = matrix[1][0] * ai + matrix[1][1];\n matrix[1][1] = matrix[1][0];\n matrix[1][0] = term;\n if (x === ai) {\n // don't divide by zero\n break;\n }\n x = 1 / Math.abs(x - ai);\n }\n let numerator = matrix[0][0] * sign;\n let denominator = matrix[1][0];\n if (numerator === 0) {\n return '0';\n }\n if (denominator === 1) {\n return numerator.toString();\n }\n // resolve improper fractions\n if (numerator > denominator) {\n let whole = Math.floor(numerator / denominator);\n let remainder = numerator % denominator;\n if (remainder === 0) {\n return whole.toString();\n }\n return `${whole} ${fractionToUnicode(remainder, denominator)}`;\n }\n return fractionToUnicode(numerator, denominator);\n}", "computed": false } }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "disabled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "min": { "required": false, "tsType": { "name": "number" }, "description": "" }, "max": { "required": false, "tsType": { "name": "number" }, "description": "" }, "id": { "required": false, "tsType": { "name": "string" }, "description": "" }, "defaultValue": { "required": false, "tsType": { "name": "number" }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" } } }, "stories": [ { "id": "components-numberstepper--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { NumberStepper } from '@a-type/ui';" }, "components-particlelayer": { "id": "components-particlelayer", "name": "ParticleLayer", "path": "./src/components/particles/ParticleLayer.stories.tsx", "jsDocTags": {}, "description": "`ParticleLayer` provides a canvas and particle state to descendants; use `useParticles()` to create effects. `Provider` already includes a layer unless `disableParticles` is set.\n\nThe canvas is portaled to the body by default; `noPortal` keeps it in place. The layer and its children render after the client mounts, not during server rendering.", "reactDocgen": { "description": "", "methods": [], "displayName": "ParticleLayer", "definedInFile": "/home/runner/work/ui/ui/src/components/particles/ParticleLayer.tsx", "actualName": "ParticleLayer", "exportName": "ParticleLayer", "props": { "children": { "required": true, "tsType": { "name": "ReactNode" }, "description": "" }, "noPortal": { "required": false, "tsType": { "name": "boolean" }, "description": "" } } }, "stories": [ { "id": "components-particlelayer--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n );\n};" }, { "id": "components-particlelayer--hidden-test", "name": "Hidden Test", "snippet": "const HiddenTest = () => {\n const [hide, setHide] = useState(false);\n const targetRef = useRef(null);\n const particles = useParticles();\n\n return (\n <>\n \n \n \n
\n {\n particles?.addParticles(\n particles.elementExplosion({\n element: targetRef.current!,\n count: 10,\n }),\n );\n }}\n >\n Burst\n \n setHide(!!c)} />\n Hide (hidden elements should not show particles)\n
\n \n );\n};" } ], "import": "import { Button, Checkbox, Icon, ParticleLayer } from '@a-type/ui';" }, "components-peek": { "id": "components-peek", "name": "Peek", "path": "./src/components/peek/Peek.stories.tsx", "jsDocTags": {}, "description": "`Peek` initially shows a limited height of its children and provides a toggle when the content overflows. Set `peekHeight` in pixels; it defaults to 120. The expanded state is managed internally.", "reactDocgen": { "description": "", "methods": [], "displayName": "Peek", "definedInFile": "/home/runner/work/ui/ui/src/components/peek/Peek.tsx", "actualName": "Peek", "exportName": "Peek", "props": { "peekHeight": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "120", "computed": false } }, "children": { "required": true, "tsType": { "name": "ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" } } }, "stories": [ { "id": "components-peek--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n

\n \n \n );\n};" } ], "import": "import { Box, P, Peek } from '@a-type/ui';" }, "components-popover": { "id": "components-popover", "name": "Popover", "path": "./src/components/popover/Popover.stories.tsx", "jsDocTags": {}, "description": "Compose `Popover` with `Popover.Trigger` and `Popover.Content`; add `Title`, `Description`, and `Close` as appropriate. The trigger can render a custom button through `render`.\n\nContent is portaled and accepts positioning props such as `side` and `align`. Add `Popover.Arrow` explicitly if desired.", "reactDocgen": { "description": "", "methods": [], "displayName": "StyledArrow", "definedInFile": "/home/runner/work/ui/ui/src/components/popover/Popover.tsx", "actualName": "StyledArrow" }, "stories": [ { "id": "components-popover--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n }>Open Popover\n \n \n \n Hello\n This is a popover content.\n \n \n \n );\n};" } ], "import": "import { Button, Popover } from '@a-type/ui';" }, "components-progress": { "id": "components-progress", "name": "Progress", "path": "./src/components/progress/Progress.stories.tsx", "jsDocTags": {}, "description": "Pass `value` and optionally `max` to `Progress` to show completion; `max` defaults to 100. Use `Progress.Labeled` with a `label` for a visible label and value.\n\nThe `Root`, `Track`, `Indicator`, `Label`, and `Value` parts are available for custom composition.", "reactDocgen": { "description": "", "methods": [], "displayName": "ProgressLabeled", "definedInFile": "/home/runner/work/ui/ui/src/components/progress/Progress.tsx", "actualName": "ProgressLabeled", "exportName": "ProgressLabeled", "props": { "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" }, "label": { "required": true, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "formatValue": { "required": false, "tsType": { "name": "ProgressValueProps['children']", "raw": "ProgressValueProps['children']" }, "description": "" } } }, "stories": [ { "id": "components-progress--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n \n \n );\n};" }, { "id": "components-progress--labeled", "name": "Labeled", "snippet": "const Labeled = () => {\n return (\n \n \n \n \n \n );\n};" } ], "import": "import { Box, Progress } from '@a-type/ui';" }, "components-pwainstalltrigger": { "id": "components-pwainstalltrigger", "name": "PwaInstallTrigger", "path": "./src/components/pwaInstall/PwaInstallTrigger.stories.tsx", "jsDocTags": {}, "description": "`PwaInstallTrigger` opens the install dialog supplied by `Provider` and hides when the app is already installed. It renders an Install button by default and accepts custom children.\n\nThe provider loads `/manifest.json` by default; use `manifestPath` to change it. Setting `manifestPath={false}` removes the install dialog, so the trigger will not open one.", "reactDocgen": { "description": "", "methods": [], "displayName": "PwaInstallTrigger", "definedInFile": "/home/runner/work/ui/ui/src/components/pwaInstall/PwaInstallTrigger.tsx", "actualName": "PwaInstallTrigger", "exportName": "PwaInstallTrigger", "props": { "emphasis": { "required": false, "tsType": { "name": "union", "raw": "'primary' | 'default' | 'ghost' | 'light' | 'unstyled'", "elements": [ { "name": "literal", "value": "'primary'" }, { "name": "literal", "value": "'default'" }, { "name": "literal", "value": "'ghost'" }, { "name": "literal", "value": "'light'" }, { "name": "literal", "value": "'unstyled'" } ] }, "description": "" }, "size": { "required": false, "tsType": { "name": "union", "raw": "'default' | 'small' | 'wrapper'", "elements": [ { "name": "literal", "value": "'default'" }, { "name": "literal", "value": "'small'" }, { "name": "literal", "value": "'wrapper'" } ] }, "description": "" }, "toggled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "toggleMode": { "required": false, "tsType": { "name": "union", "raw": "'color-and-indicator' | 'color' | 'indicator' | 'state-only'", "elements": [ { "name": "literal", "value": "'color-and-indicator'" }, { "name": "literal", "value": "'color'" }, { "name": "literal", "value": "'indicator'" }, { "name": "literal", "value": "'state-only'" } ] }, "description": "" }, "visuallyDisabled": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "loading": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "visuallyFocused": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableIconMode": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "forceIconMode": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLButtonElement" } ], "raw": "Ref" }, "description": "" }, "disableDropdownTriggerIcon": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "disableDefaultLoadingIndicator": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "color": { "required": false, "tsType": { "name": "union", "raw": "'primary' | 'accent' | 'success' | 'attention'", "elements": [ { "name": "literal", "value": "'primary'" }, { "name": "literal", "value": "'accent'" }, { "name": "literal", "value": "'success'" }, { "name": "literal", "value": "'attention'" } ] }, "description": "Shortcuts for @mode-* classes." }, "full": { "required": false, "tsType": { "name": "union", "raw": "'width' | 'height' | boolean", "elements": [ { "name": "literal", "value": "'width'" }, { "name": "literal", "value": "'height'" }, { "name": "boolean" } ] }, "description": "" }, "align": { "required": false, "tsType": { "name": "union", "raw": "'start' | 'center' | 'end'", "elements": [ { "name": "literal", "value": "'start'" }, { "name": "literal", "value": "'center'" }, { "name": "literal", "value": "'end'" } ] }, "description": "" } }, "composes": [ "ButtonHTMLAttributes", "Pick" ] }, "stories": [ { "id": "components-pwainstalltrigger--default", "name": "Default", "snippet": "const Default = () => {\n return (\n }>\n Install\n \n );\n};" } ], "import": "import { Button, Icon, PwaInstallTrigger } from '@a-type/ui';" }, "components-quickaction": { "id": "components-quickaction", "name": "QuickAction", "path": "./src/components/quickAction/QuickAction.stories.tsx", "jsDocTags": {}, "description": "Compose `QuickAction` with `QuickAction.Trigger` and `QuickAction.Content` for an action panel anchored to its trigger. Set `align` on the content to `start`, `center`, or `end`.\n\nThe popup is portaled and uses CSS anchor positioning, so positioning depends on browser support.", "reactDocgen": { "description": "", "methods": [], "displayName": "QuickActionRoot", "definedInFile": "/home/runner/work/ui/ui/src/components/quickAction/QuickAction.tsx", "actualName": "QuickActionRoot", "exportName": "QuickActionRoot", "props": { "children": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" } } }, "stories": [ { "id": "components-quickaction--default", "name": "Default", "snippet": "const Default = args => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Home\n \n \n \n \n );\n};" } ], "import": "import {\n Box,\n Icon,\n NavBar,\n NavBarItem,\n NavBarItemIcon,\n NavBarItemText,\n PageContent,\n PageNav,\n PageNowPlaying,\n PageRoot,\n QuickAction,\n} from '@a-type/ui';" }, "components-relativetime": { "id": "components-relativetime", "name": "RelativeTime", "path": "./src/components/relativeTime/RelativeTime.stories.tsx", "jsDocTags": {}, "description": "Pass a timestamp in milliseconds as `value` to display a relative time. Use `abbreviate` for shorter units or `disableRelativeText` to omit \"ago\" and \"from now\".\n\nThe text updates every minute; `countdownSeconds` updates once per second for future times less than a minute away.", "reactDocgen": { "description": "", "methods": [], "displayName": "RelativeTime", "definedInFile": "/home/runner/work/ui/ui/src/components/relativeTime/RelativeTime.tsx", "actualName": "RelativeTime", "exportName": "RelativeTime", "props": { "value": { "required": true, "tsType": { "name": "number" }, "description": "" }, "abbreviate": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "countdownSeconds": { "required": false, "tsType": { "name": "boolean" }, "description": "Makes it count down seconds for a future date value as it approaches.\nDoes not affect past dates." }, "disableRelativeText": { "required": false, "tsType": { "name": "boolean" }, "description": "Remove \"from now\" or \"ago\" from the output." } } }, "stories": [ { "id": "components-relativetime--default", "name": "Default", "snippet": "const Default = () => ;" } ], "import": "import { RelativeTime } from '@a-type/ui';" }, "components-richeditor": { "id": "components-richeditor", "name": "RichEditor", "path": "./src/components/richEditor/richEditor.stories.tsx", "jsDocTags": {}, "error": { "name": "No component found", "message": "We could not detect the component from your story file. Specify meta.component.\n 9 | * Configure the editor and its editable state separately.\n 10 | */\n> 11 | const meta = {\n | ^\n 12 | \ttitle: 'Components/RichEditor',\n 13 | \targTypes: {\n 14 | \t\treadonly: { control: 'boolean' },\n\n./src/components/richEditor/richEditor.stories.tsx:\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport clsx from 'clsx';\nimport { Input } from '../input/Input.js';\nimport { tipTapClassName, tipTapReadonlyClassName } from './index.js';\n\n/**\n * This export provides styles, not an editor component. Apply `tipTapClassName` to the wrapper around a TipTap/ProseMirror editor, and add `tipTapReadonlyClassName` for its read-only appearance.\n *\n * Configure the editor and its editable state separately.\n */\nconst meta = {\n\ttitle: 'Components/RichEditor',\n\targTypes: {\n\t\treadonly: { control: 'boolean' },\n\t},\n\tparameters: {\n\t\tcontrols: { expanded: true },\n\t},\n} satisfies Meta<{ readonly: boolean }>;\n\nexport default meta;\n\ntype Story = StoryObj<{ readonly: boolean }>;\n\nexport const Default: Story = {\n\trender(args) {\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t

Heading 1

\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t

Heading 2

\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t

{paragraphText}

\n\n\t\t\t\t\t\t
{paragraphText}
\n\t\t\t\t\t\t

Heading 3

\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
  • {paragraphText}
    • \n\t\t\t\t\t\t\t
  • {paragraphText}
    • \n\t\t\t\t\t\t
\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t
  1. {paragraphText}
    2. \n\t\t\t\t\t\t\t
  2. {paragraphText}
    3. \n\t\t\t\t\t\t
\n\t\t\t\t\t\t

Heading 4

\n\t\t\t\t\t\t

{paragraphText}

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tHighlighted text\n\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tBold text\n\t\t\t\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tItalic text\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t);\n\t},\n};\n\nconst paragraphText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit\nSed do eiusmod tempor incididunt ut labore et dolore magna aliqua\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum`;\n" }, "stories": [ { "id": "components-richeditor--default", "name": "Default", "snippet": "const Default = args => {\n return (\n \n \n
\n

{paragraphText}

\n

Heading 1

\n

{paragraphText}

\n

Heading 2

\n

{paragraphText}

\n

{paragraphText}

\n
\n

{paragraphText}

\n\n
{paragraphText}
\n

Heading 3

\n
    \n
  • {paragraphText}
    • \n
  • {paragraphText}
    • \n
\n

{paragraphText}

\n
    \n
  1. {paragraphText}
    2. \n
  2. {paragraphText}
    3. \n
\n

Heading 4

\n

{paragraphText}

\n

\n Highlighted text\n

\n

\n Link\n

\n

\n Bold text\n

\n

\n Italic text\n

\n
\n \n \n );\n};" } ], "import": "import { Input } from '@a-type/ui';" }, "components-scrollarea": { "id": "components-scrollarea", "name": "ScrollArea", "path": "./src/components/scrollArea/ScrollArea.stories.tsx", "jsDocTags": {}, "description": "Give `ScrollArea` a constrained size and choose `direction` (`vertical`, `horizontal`, or `both`). Put the scrollable children in `ScrollArea.Content`.\n\nFades are included by default; set `disableFades` to remove them. Use `Root`, `Viewport`, and `Scrollbar` for a custom composition.", "reactDocgen": { "description": "", "methods": [], "displayName": "ScrollAreaViewportFades", "definedInFile": "/home/runner/work/ui/ui/src/components/scrollArea/ScrollArea.tsx", "actualName": "ScrollAreaViewportFades", "exportName": "ScrollAreaViewportFades" }, "stories": [ { "id": "components-scrollarea--default", "name": "Default", "snippet": "const Default = ({ direction }) => {\n return (\n \n \n \n \n \n );\n};" }, { "id": "components-scrollarea--constraint-test", "name": "Constraint Test", "snippet": "const ConstraintTest = ({ direction }) => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};" } ], "import": "import { Box, Button, Input, ScrollArea } from '@a-type/ui';" }, "components-select": { "id": "components-select", "name": "Select", "path": "./src/components/select/Select.stories.tsx", "jsDocTags": {}, "description": "Compose `Select` with `Select.Trigger`, `Select.Content`, and `Select.Item` elements. Use `value` and `onValueChange` for a controlled selection, or `defaultValue` for an initial value.\n\nThe trigger displays the selected value and a chevron by default. Use `itemToStringLabel` when values need a custom display label.", "reactDocgen": { "description": "", "methods": [], "displayName": "SelectItem", "definedInFile": "/home/runner/work/ui/ui/src/components/select/Select.tsx", "actualName": "SelectItem", "exportName": "SelectItem", "props": { "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" } } }, "stories": [ { "id": "components-select--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n );\n};" }, { "id": "components-select--empty", "name": "Empty", "snippet": "const Empty = args => {\n return (\n \n \n \n );\n};" }, { "id": "components-select--long-list-with-item-labels", "name": "Long List With Item Labels", "snippet": "const LongListWithItemLabels = () => {\n return (\n \n `Item number ${i + 1}`}>\n \n \n {new Array(50).fill(null).map((_, i) => {\n const item = `Item number ${i + 1}`;\n return (\n \n {item}\n \n );\n })}\n \n \n \n );\n};" }, { "id": "components-select--compare-select-and-button", "name": "Compare Select And Button", "snippet": "const CompareSelectAndButton = () => {\n return (\n
\n \n \n \n \n
\n );\n};" } ], "import": "import { Box, Button, Select, SelectContent, SelectItem, SelectTrigger } from '@a-type/ui';" }, "components-textskeleton": { "id": "components-textskeleton", "name": "TextSkeleton", "path": "./src/components/skeletons/TextSkeleton.stories.tsx", "jsDocTags": {}, "description": "Use `TextSkeleton` as a placeholder for text while content loads. Pass `maxLength` to influence its randomly chosen width, which stays fixed for that mount.\n\nProvide loading status separately for assistive technology.", "reactDocgen": { "description": "", "methods": [], "displayName": "TextSkeleton", "definedInFile": "/home/runner/work/ui/ui/src/components/skeletons/skeletons.tsx", "actualName": "TextSkeleton", "exportName": "TextSkeleton", "props": { "maxLength": { "required": true, "tsType": { "name": "number" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" } } }, "stories": [ { "id": "components-textskeleton--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" }, { "id": "components-textskeleton--on-background", "name": "On Background", "snippet": "const OnBackground = () => {\n return (\n \n \n \n \n \n );\n};" } ], "import": "import { Box, TextSkeleton } from '@a-type/ui';" }, "components-slider": { "id": "components-slider", "name": "Slider", "path": "./src/components/slider/Slider.stories.tsx", "jsDocTags": {}, "description": "Use `Slider` with `defaultValue`, or control it with `value` and `onValueChange`; configure `min`, `max`, and `step` as needed. `Slider.getSingle` extracts one value from a number or value array.\n\nFor a labeled thumb or a displayed value, compose `Slider.Root`, `Slider.Ui`, and `Slider.Value`.", "reactDocgen": { "description": "", "methods": [], "displayName": "Slider", "definedInFile": "/home/runner/work/ui/ui/src/components/slider/Slider.tsx", "actualName": "Slider", "exportName": "Slider", "props": { "ref": { "required": false, "tsType": { "name": "Ref", "elements": [ { "name": "HTMLDivElement" } ], "raw": "Ref" }, "description": "" } }, "composes": [ "SliderRootProps" ] }, "stories": [ { "id": "components-slider--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-slider--vertical", "name": "Vertical", "snippet": "const Vertical = () => ;" }, { "id": "components-slider--custom-styles", "name": "Custom Styles", "snippet": "const CustomStyles = () => {\n const [value, setValue] = useState(0);\n\n return (\n {\n if (Array.isArray(v)) {\n setValue(v[0]);\n } else {\n setValue(v as number);\n }\n }}\n className={\n value < 0\n ? '@mode-attention'\n : value > 0\n ? '@mode-success'\n : '@mode-base'\n }\n orientation=\"vertical\"\n style={{ height: '200px' }}\n min={-2}\n max={2}\n defaultValue={0}>\n \n \n \n
\n {['😭', '😔', '😐', '😊', '😃'][(value as number) + 2]}\n
\n \n \n \n );\n};" }, { "id": "components-slider--with-value", "name": "With Value", "snippet": "const WithValue = () => \n \n \n;" } ], "import": "import { Slider } from '@a-type/ui';" }, "components-spinner": { "id": "components-spinner", "name": "Spinner", "path": "./src/components/spinner/Spinner.stories.tsx", "jsDocTags": {}, "description": "Use `Spinner` to indicate ongoing work and provide an accessible label such as `aria-label=\"Loading\"`. `size` is in pixels and defaults to 40; pass `null` to size it with CSS.\n\n`FullScreenSpinner` centers a spinner while filling the available flex space.", "reactDocgen": { "description": "", "methods": [], "displayName": "Spinner", "definedInFile": "/home/runner/work/ui/ui/src/components/spinner/Spinner.tsx", "actualName": "Spinner", "exportName": "Spinner", "props": { "size": { "required": false, "tsType": { "name": "union", "raw": "number | null", "elements": [ { "name": "number" }, { "name": "null" } ] }, "description": "", "defaultValue": { "value": "40", "computed": false } }, "thickness": { "required": false, "tsType": { "name": "number" }, "description": "", "defaultValue": { "value": "3.2", "computed": false } }, "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-spinner--default", "name": "Default", "snippet": "const Default = () => ;" }, { "id": "components-spinner--small", "name": "Small", "snippet": "const Small = () => ;" }, { "id": "components-spinner--large", "name": "Large", "snippet": "const Large = () => ;" } ], "import": "import { Spinner } from '@a-type/ui';" }, "components-splashscreen": { "id": "components-splashscreen", "name": "SplashScreen", "path": "./src/components/splashScreen/SplashScreen.stories.tsx", "jsDocTags": {}, "description": "Use `SplashScreen` as a startup surface that fills its container, and place an image or logo inside `SplashScreen.Icon`. Both parts accept `render` when a different underlying element is needed.", "reactDocgen": { "description": "", "methods": [], "displayName": "SlotDiv", "definedInFile": "/home/runner/work/ui/ui/src/components/utility/SlotDiv.tsx", "actualName": "SlotDiv", "exportName": "SlotDiv", "composes": [ "UseRenderComponentProps" ] }, "stories": [ { "id": "components-splashscreen--default", "name": "Default", "snippet": "const Default = () => {\n return (\n \n \n \n \n \n );\n};" } ], "import": "import { SplashScreen } from '@a-type/ui';" }, "components-switch": { "id": "components-switch", "name": "Switch", "path": "./src/components/switch/Switch.stories.tsx", "jsDocTags": {}, "description": "Use `Switch` for an on/off setting, with an associated label. Control it with `checked` and `onCheckedChange`, or provide `defaultChecked`.\n\nThe default includes a thumb; use `Switch.Root` and `Switch.Thumb` for custom composition.", "reactDocgen": { "description": "", "methods": [], "displayName": "Switch", "definedInFile": "/home/runner/work/ui/ui/src/components/switch/Switch.tsx", "actualName": "Switch", "exportName": "Switch", "props": { "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLButtonElement" } ] }, "description": "" } } }, "stories": [ { "id": "components-switch--default", "name": "Default", "snippet": "const Default = () => {\n return ;\n};" } ], "import": "import { Switch } from '@a-type/ui';" }, "components-tabs": { "id": "components-tabs", "name": "Tabs", "path": "./src/components/tabs/tabs.stories.tsx", "jsDocTags": {}, "description": "Compose `Tabs` with `Tabs.List`, `Tabs.Trigger`, and matching `Tabs.Content` values. Use `value` and `onValueChange` to control the active tab.\n\nThe tab list scrolls horizontally when its triggers do not fit.", "reactDocgen": { "description": "", "methods": [], "displayName": "TabsList", "definedInFile": "/home/runner/work/ui/ui/src/components/tabs/tabs.tsx", "actualName": "TabsList", "exportName": "TabsList", "props": { "color": { "required": false, "tsType": { "name": "union", "raw": "'gray' | 'primary'", "elements": [ { "name": "literal", "value": "'gray'" }, { "name": "literal", "value": "'primary'" } ] }, "description": "", "defaultValue": { "value": "'primary'", "computed": false } } } }, "stories": [ { "id": "components-tabs--default", "name": "Default", "snippet": "const Default = (args) => {\n const [value, setValue] = useState('tab1');\n return (\n \n \n Tab 1\n Tab 2 (long)\n Tab 3\n \n \n
Tab 1 content
\n \n \n
Tab 2 content
\n \n \n
Tab 3 content
\n \n \n );\n};" }, { "id": "components-tabs--with-many-tabs", "name": "With Many Tabs", "snippet": "const WithManyTabs = (args) => {\n const [value, setValue] = useState('tab1');\n return (\n \n \n {Array.from({ length: 20 }).map((_, i) => (\n \n Tab {i + 1}\n \n ))}\n \n {Array.from({ length: 20 }).map((_, i) => (\n \n
Tab {i + 1} content
\n \n ))}\n \n );\n};" } ], "import": "import { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger } from '@a-type/ui';" }, "components-textarea": { "id": "components-textarea", "name": "TextArea", "path": "./src/components/textArea/TextArea.stories.tsx", "jsDocTags": {}, "description": "`TextArea` is a multiline input with the same `onValueChange` and placeholder options as `Input`. It auto-sizes by default; set `autoSize={false}` to use a fixed number of `rows`.\n\nUse `TextArea.Border` and `TextArea.Input` for custom composition, and provide an associated label.", "reactDocgen": { "description": "", "methods": [], "displayName": "TextAreaDefault", "definedInFile": "/home/runner/work/ui/ui/src/components/textArea/TextArea.tsx", "actualName": "TextAreaDefault", "props": { "autoSelect": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "placeholders": { "required": false, "tsType": { "name": "Array", "elements": [ { "name": "string" } ], "raw": "string[]" }, "description": "Shuffle between random placeholders" }, "placeholdersIntervalMs": { "required": false, "tsType": { "name": "number" }, "description": "" }, "borderRef": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "HTMLDivElement" } ] }, "description": "" }, "startAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "endAccessory": { "required": false, "tsType": { "name": "ReactReactNode", "raw": "React.ReactNode" }, "description": "" }, "className": { "required": false, "tsType": { "name": "string" }, "description": "" }, "ref": { "required": false, "tsType": { "name": "ReactRef", "raw": "React.Ref", "elements": [ { "name": "any" } ] }, "description": "" }, "style": { "required": false, "tsType": { "name": "CSSProperties" }, "description": "" }, "autoSize": { "required": false, "tsType": { "name": "boolean" }, "description": "" }, "padBottomPixels": { "required": false, "tsType": { "name": "number" }, "description": "" }, "rows": { "required": false, "tsType": { "name": "number" }, "description": "" } }, "composes": [ "Omit" ] }, "stories": [ { "id": "components-textarea--default", "name": "Default", "snippet": "const Default = () =>