@staffbase/design-mcp 19.0.0

package/dist/data/components.json

@@ -0,0 +1,1118 @@
+[
+  {
+    "name": "ActionMenu",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Menu",
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "ActionMenuContent",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Menu",
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "ActionMenuItem",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Menu",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ActionMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    icon?: ReactElement;\r\n    description?: string;\r\n    variant?: ActionItemVariant;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "ActionMenuLinkItem",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Menu",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ActionMenuLinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\r\n    icon?: ReactElement;\r\n    description?: string;\r\n    variant?: ActionItemVariant;\r\n    /* Excluded from this release type: _dataindex */\r\n}",
+    "examples": []
+  },
+  {
+    "name": "ActionMenuTrigger",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Menu",
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "AlertDialog",
+    "category": "Components",
+    "description": "Alert dialogs interrupt the user to confirm a critical or destructive action. Use for actions that cannot be undone.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=45327-19566",
+    "sourcePath": "packages/design/src/components/alertDialog",
+    "docPage": "components/alert-dialog",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "typeof AlertDialog_2.Root"
+      },
+      {
+        "name": "Trigger",
+        "signature": "(props: TriggerProps) => JSX.Element"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Cancel",
+        "signature": "ForwardRefExoticComponent<Omit<Omit< ButtonProps, \"ref\"> & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Action",
+        "signature": "ForwardRefExoticComponent<Omit<Omit< ButtonProps, \"ref\"> & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Title",
+        "signature": "ForwardRefExoticComponent<Omit< AlertDialogTitleProps, \"ref\"> & RefAttributes<HTMLHeadingElement>>"
+      },
+      {
+        "name": "Description",
+        "signature": "ForwardRefExoticComponent<Omit< AlertDialogDescriptionProps, \"ref\"> & RefAttributes<HTMLParagraphElement>>"
+      },
+      {
+        "name": "Icon",
+        "signature": "ForwardRefExoticComponent<Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {\r\n        children: ReactNode;\r\n    }, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {AlertDialog, BinIcon, Button} from '@staffbase/design';\n\n<AlertDialog.Root>\n  <AlertDialog.Trigger>\n    <Button color=\"critical\">Delete item</Button>\n  </AlertDialog.Trigger>\n  <AlertDialog.Popup>\n    <AlertDialog.Icon>\n      <BinIcon />\n    </AlertDialog.Icon>\n    <AlertDialog.Title>Delete this item?</AlertDialog.Title>\n    <AlertDialog.Description>\n      This action cannot be undone. The item will be permanently removed.\n    </AlertDialog.Description>\n    <AlertDialog.Action color=\"critical\">Delete</AlertDialog.Action>\n    <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n  </AlertDialog.Popup>\n</AlertDialog.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Avatar",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface AvatarProps {\r\n    /**\r\n     * The `alt` attribute for the rendered `img` element\r\n     */\r\n    alt?: string;\r\n    /**\r\n     * Color of the avatar if no `img` is rendered\r\n     * @default purple\r\n     */\r\n    color?: AvatarColor;\r\n    /**\r\n     * Will be used as fallback content\r\n     */\r\n    children?: ReactNode;\r\n    /**\r\n     * The `src` attribute for the rendered `img` element\r\n     */\r\n    src?: string;\r\n    /**\r\n     * The size of the avatar\r\n     * @default 32\r\n     */\r\n    size?: AvatarSize;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Badge",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface BadgeProps {\r\n    /**\r\n     * Visually hidden text to explain the status or value.\r\n     */\r\n    a11yDescription: string;\r\n    /**\r\n     * Position where the badge should appear, relative to the preceding DOM element.\r\n     */\r\n    position?: BadgePosition;\r\n    /**\r\n     * Refers to the number displayed on the badge\r\n     */\r\n    value?: number;\r\n    /**\r\n     * Color of the badge\r\n     */\r\n    variant?: BadgeVariant;\r\n    /**\r\n     * When true, returns 9+ when the value is greater than 9\r\n     */\r\n    truncate?: boolean;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Banner",
+    "category": "Components",
+    "description": "Banners communicate prominent messages, such as system status, errors, or important information.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-13804",
+    "sourcePath": "packages/design/src/components/banner",
+    "docPage": "components/banner",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface BannerProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** The content of the Banner. */\r\n    children: ReactNode;\r\n    /** Defines the semantics / use case of Banner. */\r\n    variant?: 'info' | 'success' | 'warning' | 'critical';\r\n    /** Changes the size of the Banner. */\r\n    size?: 'sm' | 'md';\r\n    /** Optional className prop for styling. Targets the outermost component layer. */\r\n    className?: string;\r\n    /** Changes the style of the banner */\r\n    layout?: 'standalone' | 'bleed';\r\n}",
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Banner} from '@staffbase/design';\n\n<Banner>\n  Info banner\n  <Banner.CloseButton aria-label=\"Close message\" />\n</Banner>"
+      },
+      {
+        "variant": "Variants",
+        "code": "import {Banner} from '@staffbase/design';\n\n<Banner>Info banner (default)</Banner>\n<Banner variant=\"success\">Success banner</Banner>\n<Banner variant=\"warning\">Warning banner</Banner>\n<Banner variant=\"critical\">Critical banner</Banner>"
+      },
+      {
+        "variant": "Sizes",
+        "code": "import {Banner} from '@staffbase/design';\n\n<Banner size=\"sm\">Small banner (default)</Banner>\n<Banner size=\"md\">Medium banner</Banner>"
+      },
+      {
+        "variant": "Layouts",
+        "code": "import {Banner} from '@staffbase/design';\n\n<Banner>Standalone banner (default)</Banner>\n<Banner layout=\"bleed\">Full bleed banner</Banner>"
+      }
+    ]
+  },
+  {
+    "name": "BottomSheet",
+    "category": "Components",
+    "description": "Bottom sheets surface content or actions from the bottom of the viewport, typically on smaller screens.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=817-25314",
+    "sourcePath": "packages/design/src/components/bottomSheet",
+    "docPage": "components/bottom-sheet",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "typeof Drawer.Root"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_2, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "(props: TriggerProps_2) => JSX.Element"
+      },
+      {
+        "name": "Close",
+        "signature": "ForwardRefExoticComponent<Omit<CloseProps, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Back",
+        "signature": "ForwardRefExoticComponent<Omit<BackProps, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Description",
+        "signature": "ForwardRefExoticComponent<Omit< DrawerDescriptionProps, \"ref\"> & RefAttributes<HTMLParagraphElement>>"
+      },
+      {
+        "name": "Title",
+        "signature": "ForwardRefExoticComponent<Omit< DrawerTitleProps, \"ref\"> & RefAttributes<HTMLHeadingElement>>"
+      },
+      {
+        "name": "Action",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Header",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {BottomSheet, Button} from '@staffbase/design';\n\n<BottomSheet.Root>\n  <BottomSheet.Trigger>\n    <Button>Open BottomSheet</Button>\n  </BottomSheet.Trigger>\n  <BottomSheet.Popup>\n    <BottomSheet.Header>\n      <BottomSheet.Back aria-label=\"Back\" />\n      <BottomSheet.Title>Sheet title</BottomSheet.Title>\n      <BottomSheet.Description>Sheet description.</BottomSheet.Description>\n      <BottomSheet.Close aria-label=\"Close\" />\n    </BottomSheet.Header>\n    <BottomSheet.Action>Confirm</BottomSheet.Action>\n  </BottomSheet.Popup>\n</BottomSheet.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Button",
+    "category": "Components",
+    "description": "Buttons trigger an action or event, such as submitting a form, opening a dialog, or performing a destructive action.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=840-16058&m=dev",
+    "sourcePath": "packages/design/src/components/button",
+    "docPage": "components/button",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ButtonProps extends ComponentProps<'button'> {\r\n    variant?: 'solid' | 'outline' | 'ghost';\r\n    color?: 'primary' | 'neutral' | 'critical';\r\n    iconOnly?: boolean;\r\n    children: ReactNode;\r\n}",
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Button} from '@staffbase/design';\n\n<Button variant=\"solid\" color=\"primary\">Button</Button>"
+      }
+    ]
+  },
+  {
+    "name": "ButtonDeprecated",
+    "category": "Other",
+    "deprecated": true,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ButtonDeprecatedProps extends BaseButtonProps {\r\n    /**\r\n     * Refers to the child element of the button\r\n     */\r\n    children?: string;\r\n    /**\r\n     * Disabled state of the button\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * The icon of the button\r\n     */\r\n    icon?: ReactElement<SVGAttributes<SVGElement>>;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Card",
+    "category": "Components",
+    "description": "Cards group related content and actions into a single, contained surface.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-11082",
+    "sourcePath": "packages/design/src/components/card",
+    "docPage": "components/card",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Card} from '@staffbase/design';\n\n<Card className='p-3'>\n  <h3 className='text-title-md font-bold'>Title</h3>\n  <p>This is a card containing related content.</p>\n</Card>"
+      }
+    ]
+  },
+  {
+    "name": "Checkbox",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface CheckboxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'disabled' | 'onChange' | 'defaultChecked' | 'id' | 'name' | 'tabIndex' | 'readOnly' | 'className'> {\r\n    label: string;\r\n    description?: string;\r\n    errorMessage?: string;\r\n    hasError?: boolean;\r\n    errorAriaLive?: 'off' | 'assertive' | 'polite';\r\n    requiredLabel?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "CheckboxGroup",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface CheckboxGroupProps {\r\n    options: CheckboxOption[];\r\n    description?: string;\r\n    errorMessage?: string;\r\n    disableAll?: boolean;\r\n    hasError?: boolean;\r\n    label?: string;\r\n    value?: string[];\r\n    onChange?: (option: CheckboxOption) => void;\r\n    errorAriaLive?: 'off' | 'assertive' | 'polite';\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Dialog",
+    "category": "Components",
+    "description": "Dialogs present focused content or actions in a modal overlay above the main page.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=817-25314",
+    "sourcePath": "packages/design/src/components/dialog",
+    "docPage": "components/dialog",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "typeof Dialog_2.Root"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_3, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "(props: TriggerProps_3) => JSX.Element"
+      },
+      {
+        "name": "Close",
+        "signature": "ForwardRefExoticComponent<Omit<CloseProps_2, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Description",
+        "signature": "ForwardRefExoticComponent<Omit< AlertDialogDescriptionProps, \"ref\"> & RefAttributes<HTMLParagraphElement>>"
+      },
+      {
+        "name": "Title",
+        "signature": "ForwardRefExoticComponent<Omit< AlertDialogTitleProps, \"ref\"> & RefAttributes<HTMLHeadingElement>>"
+      },
+      {
+        "name": "Header",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Footer",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Body",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Button, CloseIcon, Dialog} from '@staffbase/design';\n\n<Dialog.Root>\n  <Dialog.Trigger>\n    <Button>Open Dialog</Button>\n  </Dialog.Trigger>\n  <Dialog.Popup>\n    <Dialog.Header>\n      <Dialog.Title>Dialog title</Dialog.Title>\n      <Dialog.Close>\n        <Button variant=\"ghost\" color=\"neutral\" iconOnly aria-label=\"Close\"><CloseIcon /></Button>\n      </Dialog.Close>\n    </Dialog.Header>\n    <Dialog.Body>\n      <Dialog.Description>This is a description of the dialog content.</Dialog.Description>\n    </Dialog.Body>\n    <Dialog.Footer>\n      <Dialog.Close>\n        <Button color=\"neutral\">Cancel</Button>\n      </Dialog.Close>\n      <Button>Confirm</Button>\n    </Dialog.Footer>\n  </Dialog.Popup>\n</Dialog.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Divider",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Separator",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface DividerProps extends HTMLAttributes<HTMLHRElement> {\r\n    dividerPosition?: 'horizontal' | 'vertical';\r\n    fullWidth?: boolean;\r\n    /**\r\n     * The padding of the divider in pixels\r\n     * @default '24'\r\n     */\r\n    padding?: number;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "EmptyState",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface EmptyStateProps {\r\n    /**\r\n     * Defines the title of the component\r\n     */\r\n    title: string;\r\n    /**\r\n     * The icon of the component\r\n     */\r\n    icon?: ReactElement<HTMLAttributes<HTMLElement>, string>;\r\n    /**\r\n     * The two icon sizes\r\n     * @default 40px\r\n     */\r\n    iconSize?: IconSize;\r\n    /**\r\n     * The body text which appears below the \"title\" of the component\r\n     */\r\n    body?: string;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Field",
+    "category": "Components",
+    "description": "Fields group form controls with labels, descriptions, and validation messages to provide clear context and accessibility.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-14241",
+    "sourcePath": "packages/design/src/components/field",
+    "docPage": "components/field",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "ForwardRefExoticComponent<Omit< FieldRootProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Label",
+        "signature": "ForwardRefExoticComponent<Omit< FieldLabelProps & {\r\n        requiredLabel?: string;\r\n    }, \"ref\"> & RefAttributes<HTMLElement>>"
+      },
+      {
+        "name": "Description",
+        "signature": "ForwardRefExoticComponent<Omit< FieldDescriptionProps, \"ref\"> & RefAttributes<HTMLParagraphElement>>"
+      },
+      {
+        "name": "Error",
+        "signature": "ForwardRefExoticComponent<Omit< FieldErrorProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, TextField} from '@staffbase/design';\n\n<Field.Root className=\"max-w-75\">\n  <Field.Label>Name</Field.Label>\n  <Field.Description>Enter your full name.</Field.Description>\n  <TextField />\n</Field.Root>"
+      },
+      {
+        "variant": "Required label",
+        "code": "import {Field, TextField} from '@staffbase/design';\n\n<Field.Root className=\"max-w-75\">\n  <Field.Label requiredLabel=\"Required\">Email</Field.Label>\n  <TextField type=\"email\" aria-required />\n</Field.Root>"
+      },
+      {
+        "variant": "Invalid state",
+        "code": "import {Field, TextField} from '@staffbase/design';\n\n<Field.Root invalid className=\"max-w-75\">\n  <Field.Label>Password</Field.Label>\n  <TextField type=\"password\" />\n  <Field.Error match>Password must be at least 8 characters.</Field.Error>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "FileUpload",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface FileUploadProps {\r\n    onDrop: DropzoneOptions['onDrop'];\r\n    disabled?: boolean;\r\n    children: ReactNode | ReactNode[];\r\n    variant: Variants;\r\n    ref?: MutableRefObject<FileUploadRef | undefined>;\r\n    accept?: DropzoneOptions['accept'];\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Filter",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "displayName",
+        "signature": "string"
+      }
+    ],
+    "examples": []
+  },
+  {
+    "name": "GhostButton",
+    "category": "Other",
+    "deprecated": true,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface GhostButtonProps extends BaseGhostButtonProps {\r\n    /**\r\n     * Refers to the child element of the ghost button\r\n     */\r\n    children?: string;\r\n    /**\r\n     * Disabled state of the ghost button\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * The icon of the button\r\n     */\r\n    icon?: ReactElement<SVGAttributes<SVGElement>>;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Growl",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface GrowlProps {\r\n    /**\r\n     * Refers to the child element of the growl\r\n     */\r\n    children: ReactNode;\r\n    /**\r\n     * The colors of the component\r\n     */\r\n    variant?: GrowlVariant;\r\n    /**\r\n     * optional className prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "GrowlContainer",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "HelpButton",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface HelpButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n     * `title` is required to introduce machine-readable text to the component\r\n     */\r\n    title: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "IconButton",
+    "category": "Other",
+    "deprecated": true,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface IconButtonProps extends Omit<BaseButtonProps, 'children'> {\r\n    icon: ReactElement<SVGAttributes<SVGElement>>;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "IconGhostButton",
+    "category": "Other",
+    "deprecated": true,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface IconGhostButtonProps extends Omit<BaseGhostButtonProps, 'children'> {\r\n    icon: ReactElement<SVGAttributes<SVGElement>>;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "iconNames",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "LoadingSpinner",
+    "category": "Components",
+    "description": "Loading spinners indicate that content is loading or an action is in progress.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-12704",
+    "sourcePath": "packages/design/src/components/loadingSpinner",
+    "docPage": "components/loading-spinner",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {LoadingSpinner} from '@staffbase/design';\n\n<LoadingSpinner aria-label=\"Loading...\" size={48} />"
+      },
+      {
+        "variant": "Sizes",
+        "code": "import {LoadingSpinner} from '@staffbase/design';\n\n<LoadingSpinner aria-label=\"Loading\" size={12} />\n<LoadingSpinner aria-label=\"Loading\" size={24} />\n<LoadingSpinner aria-label=\"Loading\" size={48} />\n<LoadingSpinner aria-label=\"Loading\" size={64} />"
+      },
+      {
+        "variant": "With progress",
+        "code": "import {LoadingSpinner} from '@staffbase/design';\n\n<LoadingSpinner aria-label=\"Uploading\" size={48} progress={40} />"
+      }
+    ]
+  },
+  {
+    "name": "Menu",
+    "category": "Components",
+    "description": "Menus display a list of actions or options that a user can choose. They open from a trigger and close on selection.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=1223-97491",
+    "sourcePath": "packages/design/src/components/menu",
+    "docPage": "components/menu",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "(props: Menu_2.Root.Props) => JSX.Element"
+      },
+      {
+        "name": "Trigger",
+        "signature": "(props: TriggerProps_4) => JSX.Element"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_4, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Item",
+        "signature": "ForwardRefExoticComponent<Omit<ItemProps, \"ref\"> & RefAttributes<HTMLElement>>"
+      },
+      {
+        "name": "Separator",
+        "signature": "ForwardRefExoticComponent<Omit< SeparatorProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Group",
+        "signature": "ForwardRefExoticComponent<Omit< ContextMenuGroupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "GroupLabel",
+        "signature": "ForwardRefExoticComponent<Omit< ContextMenuGroupLabelProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "RadioItem",
+        "signature": "ForwardRefExoticComponent<Omit< ContextMenuRadioItemProps, \"ref\"> & RefAttributes<HTMLElement>>"
+      },
+      {
+        "name": "RadioGroup",
+        "signature": "NamedExoticComponent<Omit< ContextMenuRadioGroupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "SubMenuRoot",
+        "signature": "typeof Menu_2.SubmenuRoot"
+      },
+      {
+        "name": "SubMenuTrigger",
+        "signature": "ForwardRefExoticComponent<Omit<SubMenuTriggerProps, \"ref\"> & RefAttributes<HTMLElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {AddIcon, Button, Menu} from '@staffbase/design';\n\n<Menu.Root>\n  <Menu.Trigger>\n    <Button color=\"neutral\">Open menu</Button>\n  </Menu.Trigger>\n  <Menu.Popup>\n    <Menu.Item leadingIcon={<AddIcon />} description=\"Save your favourites\">\n      Add to Library\n    </Menu.Item>\n    <Menu.Item>Add to Playlist</Menu.Item>\n    <Menu.Separator />\n    <Menu.Item variant=\"critical\">Delete</Menu.Item>\n  </Menu.Popup>\n</Menu.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Modal",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Dialog",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ModalProps {\r\n    /**\r\n     * The title of the modal component.\r\n     */\r\n    title: string;\r\n    /**\r\n     * Optional addon element displayed next to the title (e.g., Badge, Pill).\r\n     */\r\n    titleAddon?: ReactNode;\r\n    /**\r\n     * The text of the cancel button.\r\n     */\r\n    cancelButtonText?: string;\r\n    /**\r\n     * The callback function called when a click on a cancel button or outside the modal occurs.\r\n     */\r\n    onCancel: () => void;\r\n    /**\r\n     * The text of the header button.\r\n     */\r\n    headerButtonText?: string;\r\n    /**\r\n     * The optional callback function called when the header button is clicked.\r\n     */\r\n    onHeaderButtonClick?: () => void;\r\n    /**\r\n     * The text of the footer button.\r\n     */\r\n    footerButtonText?: string;\r\n    /**\r\n     * The variant of the confirmation button.\r\n     * @default 'primary'\r\n     */\r\n    footerButtonVariant?: ButtonVariant;\r\n    /**\r\n     * The optional callback function called when the footer button is clicked.\r\n     */\r\n    onFooterButtonClick?: () => void;\r\n    /**\r\n     * Disables the footer button.\r\n     */\r\n    disableFooterButton?: boolean;\r\n    /**\r\n     * Controls the visibility of the modal.\r\n     * @default false\r\n     */\r\n    isOpen?: boolean;\r\n    /**\r\n     * Controls the ability to scroll the Modal Content\r\n     * @default false\r\n     */\r\n    scroll?: boolean;\r\n    /**\r\n     * optional main content of the modal\r\n     */\r\n    children?: ReactNode;\r\n    /**\r\n     * Controls the visibility of the close button.\r\n     * @default false\r\n     */\r\n    showHeaderCancelButton?: boolean;\r\n    /**\r\n     * Controls the visibility of the confirm button in the header.\r\n     * @default false\r\n     */\r\n    showHeaderButton?: boolean;\r\n    /**\r\n     * Controls whether the optional header button is either a Button or a GhostButton\r\n     * @default true\r\n     */\r\n    headerButtonIsGhost?: boolean;\r\n    /**\r\n     * The optional content of the header\r\n     */\r\n    headerContent?: ReactNode;\r\n    /**\r\n     * Controls the visibility of the optional footer\r\n     * @default false\r\n     */\r\n    hideFooter?: boolean;\r\n    /**\r\n     * The optional content of the footer\r\n     */\r\n    footerContent?: ReactNode;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional additional classname prop for styling modal overlay (usefull for lifting modal dialog above other elements using z-index)\r\n     */\r\n    overlayClassName?: string;\r\n    /**\r\n     * Controls the visibility of the modal when a click outside the modal occurs.\r\n     * @default false\r\n     */\r\n    keepOnBackdropClick?: boolean;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "ModalDialog",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Alert",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ModalDialogProps {\r\n    /**\r\n     * The text of the cancel button.\r\n     */\r\n    cancelButtonText: string;\r\n    /**\r\n     * The text of the confirmation button.\r\n     */\r\n    confirmButtonText: string;\r\n    /**\r\n     * The variant of the confirmation button.\r\n     * @default 'primary'\r\n     */\r\n    confirmButtonVariant?: ButtonVariant;\r\n    /**\r\n     * An optional icon to display.\r\n     */\r\n    icon?: ReactElement<SVGAttributes<SVGElement>>;\r\n    /**\r\n     * Controls the visibility of the modal dialog.\r\n     */\r\n    isOpen: boolean;\r\n    /**\r\n     * The callback function called when the confirmation button is clicked.\r\n     */\r\n    onConfirm: () => void;\r\n    /**\r\n     * The callback function called when the cancel button is clicked.\r\n     */\r\n    onCancel: () => void;\r\n    /**\r\n     * The text content of the modal dialog.\r\n     */\r\n    text: string;\r\n    /**\r\n     * The title of the modal dialog.\r\n     */\r\n    title: string;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional additional classname prop for styling modal overlay (usefull for lifting modal dialog above other elements using z-index)\r\n     */\r\n    overlayClassName?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "NumberStepper",
+    "category": "Components",
+    "description": "Number steppers let the user enter a numeric value with increment and decrement controls.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-14087",
+    "sourcePath": "packages/design/src/components/numberStepper",
+    "docPage": "components/number-stepper",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "ForwardRefExoticComponent<Omit< NumberFieldRootProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Increment",
+        "signature": "ForwardRefExoticComponent<Omit< NumberFieldIncrementProps, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Input",
+        "signature": "ForwardRefExoticComponent<Omit< NumberFieldInputProps, \"ref\"> & RefAttributes<HTMLInputElement>>"
+      },
+      {
+        "name": "Decrement",
+        "signature": "ForwardRefExoticComponent<Omit< NumberFieldDecrementProps, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, NumberStepper} from '@staffbase/design';\n\n<Field.Root>\n  <Field.Label>Amount</Field.Label>\n  <Field.Description>Enter a value between 0 and 10.</Field.Description>\n  <NumberStepper.Root defaultValue={0} min={0} max={10}>\n    <NumberStepper.Decrement />\n    <NumberStepper.Input />\n    <NumberStepper.Increment />\n  </NumberStepper.Root>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Pill",
+    "category": "Components",
+    "description": "Pills label, categorise, or tag content. Use them to highlight short status or metadata.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-11485",
+    "sourcePath": "packages/design/src/components/pill",
+    "docPage": "components/pill",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Pill} from '@staffbase/design';\n\n<Pill>Pill</Pill>"
+      }
+    ]
+  },
+  {
+    "name": "PlainGrowl",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "Popover",
+    "category": "Components",
+    "description": "Popovers display floating content anchored to a trigger element. Use them for non-modal contextual information or actions.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-12357",
+    "sourcePath": "packages/design/src/components/popover",
+    "docPage": "components/popover",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "FC<RadixPopover.PopoverProps>"
+      },
+      {
+        "name": "Content",
+        "signature": "ForwardRefExoticComponent<ContentProps & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "ForwardRefExoticComponent<Omit<RadixPopover.PopoverTriggerProps & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Close",
+        "signature": "ForwardRefExoticComponent<PopoverCloseProps & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Anchor",
+        "signature": "ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Button, InfoIcon, Popover} from '@staffbase/design';\n\n<Popover.Root>\n  <Popover.Trigger>\n    <Button color=\"neutral\"><InfoIcon />Contributors</Button>\n  </Popover.Trigger>\n  <Popover.Content className=\"w-[336px]\" side=\"right\">\n    <Popover.Close title=\"Close\" />\n    <p className=\"text-body-sm mb-1\">\n      Contributors can read, publish, and edit their own posts.\n    </p>\n    <Button variant=\"ghost\" color=\"neutral\">See Support Portal</Button>\n  </Popover.Content>\n</Popover.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Radio",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface RadioProps {\r\n    /**\r\n     * The radio is checked\r\n     */\r\n    checked?: boolean;\r\n    /**\r\n     * The optional description text\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Whether the option is disabled\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * The required label of the radio\r\n     */\r\n    label: string;\r\n    /**\r\n     * The onChange event occurs when selecting the radio value/option\r\n     */\r\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\r\n    /**\r\n     * The required name of the radio to reference the data\r\n     */\r\n    name: string;\r\n    /**\r\n     * The required value of the radio\r\n     */\r\n    value: string;\r\n    /**\r\n     * Error state of the radio\r\n     */\r\n    hasError?: boolean;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional id prop\r\n     */\r\n    id?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "RadioGroup",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface RadioGroupProps {\r\n    groupDescription?: string;\r\n    disableAll?: boolean;\r\n    groupLabel?: string;\r\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\r\n    options: RadioProps[];\r\n    groupErrorMessage?: string;\r\n    errorAriaLive?: 'off' | 'assertive' | 'polite' | undefined;\r\n    requiredLabel?: string;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "SearchableMultiSelect",
+    "category": "Components",
+    "description": "Searchable multi selects let the user filter a list of options by typing and pick several. Selected values appear as chips inside the input.",
+    "figmaUrl": "",
+    "sourcePath": "packages/design/src/components/searchableMultiSelect",
+    "docPage": "components/searchable-multi-select",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "<Value, Multiple extends boolean | undefined = true>(props: Omit<Combobox.Root.Props<Value, Multiple>, \"ref\">) => JSX.Element"
+      },
+      {
+        "name": "List",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteListProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Group",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteGroupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "GroupLabel",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteGroupLabelProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_5, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Item",
+        "signature": "ForwardRefExoticComponent<Omit< ComboboxItemProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Separator",
+        "signature": "ForwardRefExoticComponent<Omit< SeparatorProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Input",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteInputProps, \"ref\"> & RefAttributes<HTMLInputElement>>"
+      },
+      {
+        "name": "Value",
+        "signature": "(props: ValueProps) => JSX.Element"
+      },
+      {
+        "name": "Chip",
+        "signature": "ForwardRefExoticComponent<Omit< ComboboxChipProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Empty",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteEmptyProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Collection",
+        "signature": "typeof Combobox.Collection"
+      },
+      {
+        "name": "Status",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteStatusProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, LanguageGlobeIcon, SearchableMultiSelect} from '@staffbase/design';\n\nconst langs = [\n{id: 'js', value: 'JavaScript'},\n{id: 'ts', value: 'TypeScript'},\n{id: 'py', value: 'Python'},\n{id: 'go', value: 'Go'},\n];\n\n<Field.Root className=\"max-w-[400px]\">\n  <Field.Label>Programming languages</Field.Label>\n  <SearchableMultiSelect.Root items={langs}>\n    <SearchableMultiSelect.Value leadingIcon={<LanguageGlobeIcon />}>\n      {(value) => (\n        <>\n          {value.map((language) => (\n            <SearchableMultiSelect.Chip key={language.id}>\n              {language.value}\n            </SearchableMultiSelect.Chip>\n          ))}\n          <SearchableMultiSelect.Input\n            placeholder={value.length > 0 ? '' : 'e.g. TypeScript'}\n          />\n        </>\n      )}\n    </SearchableMultiSelect.Value>\n    <SearchableMultiSelect.Popup>\n      <SearchableMultiSelect.Empty>No languages found.</SearchableMultiSelect.Empty>\n      <SearchableMultiSelect.List>\n        {(language) => (\n          <SearchableMultiSelect.Item key={language.id} value={language}>\n            {language.value}\n          </SearchableMultiSelect.Item>\n        )}\n      </SearchableMultiSelect.List>\n    </SearchableMultiSelect.Popup>\n  </SearchableMultiSelect.Root>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "SearchableSingleSelect",
+    "category": "Components",
+    "description": "Searchable single selects let the user filter a list of options by typing and pick one. Use them when the list is long enough to benefit from search.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?m=dev&node-id=45327-11729",
+    "sourcePath": "packages/design/src/components/searchableSingleSelect",
+    "docPage": "components/searchable-single-select",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "typeof Combobox.Root"
+      },
+      {
+        "name": "List",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteListProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Group",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteGroupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Status",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteStatusProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Collection",
+        "signature": "typeof Combobox.Collection"
+      },
+      {
+        "name": "GroupLabel",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteGroupLabelProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_6, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Item",
+        "signature": "ForwardRefExoticComponent<Omit< ComboboxItemProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "ItemIndicator",
+        "signature": "ForwardRefExoticComponent<Omit< ComboboxItemIndicatorProps, \"ref\"> & RefAttributes<HTMLSpanElement>>"
+      },
+      {
+        "name": "Separator",
+        "signature": "ForwardRefExoticComponent<Omit< SeparatorProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Input",
+        "signature": "ForwardRefExoticComponent<Omit<InputProps, \"ref\"> & RefAttributes<HTMLInputElement>>"
+      },
+      {
+        "name": "Empty",
+        "signature": "ForwardRefExoticComponent<Omit< AutocompleteEmptyProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "propsInterface": "export declare interface SearchableSingleSelectProps<TOption extends BaseOption> extends SingleSelectBaseProps<TOption> {\r\n    /**\r\n     * Value of the input field.\r\n     */\r\n    inputValue: string;\r\n    /**\r\n     * Callback to handle user-input.\r\n     */\r\n    onInputChange: (next: string) => void;\r\n    /**\r\n     * Optional ref to attach to the select trigger.\r\n     */\r\n    triggerRef?: Ref<HTMLElement>;\r\n    /**\r\n     * Determines if the single select should allow user-input.\r\n     */\r\n    searchable: true;\r\n    ariaLabelledBy?: string;\r\n}",
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, SearchableSingleSelect} from '@staffbase/design';\n\nconst fruits = ['Apple', 'Banana', 'Orange', 'Mango'];\n\n<Field.Root className=\"max-w-[300px]\">\n  <Field.Label>Favourite fruit</Field.Label>\n  <SearchableSingleSelect.Root items={fruits}>\n    <SearchableSingleSelect.Input placeholder=\"e.g. Apple\" />\n    <SearchableSingleSelect.Popup>\n      <SearchableSingleSelect.Empty>No fruits found.</SearchableSingleSelect.Empty>\n      <SearchableSingleSelect.List>\n        {(item) => (\n          <SearchableSingleSelect.Item key={item} value={item}>\n            {item}\n          </SearchableSingleSelect.Item>\n        )}\n      </SearchableSingleSelect.List>\n    </SearchableSingleSelect.Popup>\n  </SearchableSingleSelect.Root>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "SearchInput",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface SearchInputProps extends SearchBaseInputProps {\r\n    /**\r\n     * Callback function called when cancel button is clicked\r\n     */\r\n    onClear?: () => void;\r\n    /**\r\n     * Callback function called when the wrapping search form is submitted\r\n     */\r\n    onSubmit?: () => void;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "SegmentedControl",
+    "category": "Components",
+    "description": "Segmented controls let the user choose one option from a small set of mutually exclusive choices, presented inline.",
+    "figmaUrl": "",
+    "sourcePath": "packages/design/src/components/segmentedControl",
+    "docPage": "components/segmented-control",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "ForwardRefExoticComponent<Omit<RootProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Item",
+        "signature": "ForwardRefExoticComponent<Omit<Radio_2.Root.Props<any>, \"ref\"> & RefAttributes<HTMLSpanElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {SegmentedControl} from '@staffbase/design';\n\n<SegmentedControl.Root defaultValue=\"list\" aria-label=\"View options\">\n  <SegmentedControl.Item value=\"list\">List</SegmentedControl.Item>\n  <SegmentedControl.Item value=\"grid\">Grid</SegmentedControl.Item>\n</SegmentedControl.Root>"
+      },
+      {
+        "variant": "With icons",
+        "code": "import {BulletListIcon, GridIcon, SegmentedControl} from '@staffbase/design';\n\n<SegmentedControl.Root defaultValue=\"list\" aria-label=\"View options\">\n  <SegmentedControl.Item value=\"list\">\n    <BulletListIcon />\n    List\n  </SegmentedControl.Item>\n  <SegmentedControl.Item value=\"grid\">\n    <GridIcon />\n    Grid\n  </SegmentedControl.Item>\n</SegmentedControl.Root>"
+      },
+      {
+        "variant": "Variants",
+        "code": "import {SegmentedControl} from '@staffbase/design';\n\n<SegmentedControl.Root variant=\"studio\" defaultValue=\"list\" aria-label=\"Studio\">\n  <SegmentedControl.Item value=\"list\">List</SegmentedControl.Item>\n  <SegmentedControl.Item value=\"grid\">Grid</SegmentedControl.Item>\n</SegmentedControl.Root>\n\n<SegmentedControl.Root variant=\"content\" defaultValue=\"list\" aria-label=\"Content\">\n  <SegmentedControl.Item value=\"list\">List</SegmentedControl.Item>\n  <SegmentedControl.Item value=\"grid\">Grid</SegmentedControl.Item>\n</SegmentedControl.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Select",
+    "category": "Components",
+    "description": "Selects let the user choose a single option from a fixed list. Use them when the available options are known in advance.",
+    "figmaUrl": "",
+    "sourcePath": "packages/design/src/components/select",
+    "docPage": "components/select",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "typeof Select_2.Root"
+      },
+      {
+        "name": "Popup",
+        "signature": "ForwardRefExoticComponent<Omit<PopupProps_7, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "ForwardRefExoticComponent<Omit<TriggerProps_5, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "List",
+        "signature": "ForwardRefExoticComponent<Omit< SelectListProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Item",
+        "signature": "ForwardRefExoticComponent<Omit< SelectItemProps, \"ref\"> & RefAttributes<HTMLElement>>"
+      },
+      {
+        "name": "ItemIndicator",
+        "signature": "ForwardRefExoticComponent<Omit< SelectItemIndicatorProps, \"ref\"> & RefAttributes<HTMLSpanElement>>"
+      },
+      {
+        "name": "Separator",
+        "signature": "ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Value",
+        "signature": "ForwardRefExoticComponent<Omit< SelectValueProps, \"ref\"> & RefAttributes<HTMLSpanElement>>"
+      },
+      {
+        "name": "Group",
+        "signature": "ForwardRefExoticComponent<Omit< SelectGroupProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "GroupLabel",
+        "signature": "ForwardRefExoticComponent<Omit< SelectGroupLabelProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, Select} from '@staffbase/design';\n\nconst fonts = [\n{label: 'Sans-serif', value: 'sans'},\n{label: 'Serif', value: 'serif'},\n{label: 'Monospace', value: 'mono'},\n];\n\n<Field.Root>\n  <Field.Label>Font family</Field.Label>\n  <Select.Root items={fonts}>\n    <Select.Trigger className=\"w-60\">\n      <Select.Value />\n    </Select.Trigger>\n    <Select.Popup>\n      <Select.List>\n        {fonts.map(({label, value}) => (\n          <Select.Item key={value} value={value}>\n            {label}\n          </Select.Item>\n        ))}\n      </Select.List>\n    </Select.Popup>\n  </Select.Root>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Separator",
+    "category": "Components",
+    "description": "Separators visually divide groups of content using a thin horizontal or vertical line.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=840-15642",
+    "sourcePath": "packages/design/src/components/separator",
+    "docPage": "components/separator",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Separator} from '@staffbase/design';\n\n<div>\n  <p>Top content</p>\n  <Separator orientation=\"horizontal\" />\n  <p>Bottom content</p>\n</div>"
+      },
+      {
+        "variant": "Vertical",
+        "code": "import {Separator} from '@staffbase/design';\n\n<div class=\"flex gap-2\">\n  <span>Left</span>\n  <Separator orientation=\"vertical\" />\n  <span>Right</span>\n</div>"
+      }
+    ]
+  },
+  {
+    "name": "SingleSelect",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Select",
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "Skeleton",
+    "category": "Components",
+    "description": "Skeletons indicate loading content using placeholder shapes. They reduce perceived wait time while data loads.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=42328-675",
+    "sourcePath": "packages/design/src/components/skeleton",
+    "docPage": "components/skeleton",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Avatar",
+        "signature": "ForwardRefExoticComponent<Omit<AvatarProps_2, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Text",
+        "signature": "ForwardRefExoticComponent<Omit<TextProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Box",
+        "signature": "ForwardRefExoticComponent<Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"children\">, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Skeleton} from '@staffbase/design';\n\n<div className=\"flex gap-3\">\n  <Skeleton.Avatar size={48} />\n  <div className=\"flex-1\">\n    <Skeleton.Text lines={3} />\n  </div>\n</div>"
+      },
+      {
+        "variant": "Box",
+        "code": "import {Skeleton} from '@staffbase/design';\n\n<Skeleton.Box className=\"aspect-4/3 h-20\" />\n<Skeleton.Box className=\"size-16\" />\n<Skeleton.Box className=\"h-[40px] w-[400px]\" />"
+      }
+    ]
+  },
+  {
+    "name": "StyleChip",
+    "category": "Components",
+    "description": "Style chips display a short label, often used to indicate file types or formats.",
+    "figmaUrl": "",
+    "sourcePath": "packages/design/src/components/styleChip",
+    "docPage": "components/style-chip",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {StyleChip} from '@staffbase/design';\n\n<StyleChip>PNG</StyleChip>\n<StyleChip>JPG</StyleChip>\n<StyleChip>PDF</StyleChip>\n<StyleChip>SVG</StyleChip>"
+      }
+    ]
+  },
+  {
+    "name": "Switch",
+    "category": "Components",
+    "description": "Switches toggle a single setting on or off. The change takes effect immediately.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=3443-147140",
+    "sourcePath": "packages/design/src/components/switch",
+    "docPage": "components/switch",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, Switch} from '@staffbase/design';\n\n<Field.Root className=\"flex gap-2\">\n  <Switch />\n  <div>\n    <Field.Label>Enable notifications</Field.Label>\n    <Field.Description>Receive updates via email.</Field.Description>\n  </div>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "Tabs",
+    "category": "Components",
+    "description": "Tabs organise content into separate views, allowing the user to switch between them.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=840-16383",
+    "sourcePath": "packages/design/src/components/tabs",
+    "docPage": "components/tabs",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "ForwardRefExoticComponent<Omit<RadixTabs.TabsProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "List",
+        "signature": "ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+      },
+      {
+        "name": "Content",
+        "signature": "ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Tabs} from '@staffbase/design';\n\n<Tabs.Root defaultValue=\"tab1\">\n  <Tabs.List className=\"mb-4\">\n    <Tabs.Trigger value=\"tab1\">Tab Item 1</Tabs.Trigger>\n    <Tabs.Trigger value=\"tab2\">Tab Item 2</Tabs.Trigger>\n    <Tabs.Trigger value=\"tab3\">Tab Item 3</Tabs.Trigger>\n  </Tabs.List>\n  <Tabs.Content value=\"tab1\">Tab Content 1</Tabs.Content>\n  <Tabs.Content value=\"tab2\">Tab Content 2</Tabs.Content>\n  <Tabs.Content value=\"tab3\">Tab Content 3</Tabs.Content>\n</Tabs.Root>"
+      }
+    ]
+  },
+  {
+    "name": "TextArea",
+    "category": "Components",
+    "description": "Text areas allow the user to enter multi-line text, such as comments or descriptions.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=33071-5911",
+    "sourcePath": "packages/design/src/components/textArea",
+    "docPage": "components/text-area",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, TextArea} from '@staffbase/design';\n\n<Field.Root className=\"w-[400px]\">\n  <Field.Label>Description</Field.Label>\n  <Field.Description>Enter a brief description.</Field.Description>\n  <TextArea rows={4} />\n</Field.Root>"
+      },
+      {
+        "variant": "Invalid",
+        "code": "import {Field, TextArea} from '@staffbase/design';\n\n<Field.Root invalid className=\"w-[400px]\">\n  <Field.Label>Description</Field.Label>\n  <TextArea />\n  <Field.Error match>This field is required.</Field.Error>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "TextAreaDeprecated",
+    "category": "Other",
+    "deprecated": true,
+    "compoundMembers": [],
+    "propsInterface": "export declare interface TextAreaDeprecatedProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'maxLength'> {\r\n    label: string;\r\n    inputId?: string;\r\n    description?: string;\r\n    handleValueChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;\r\n    errorAriaLive?: 'off' | 'assertive' | 'polite' | undefined;\r\n    errorMessage?: string;\r\n    limit?: number;\r\n    resizable?: boolean;\r\n    requiredLabel?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "TextField",
+    "category": "Components",
+    "description": "Text fields let the user enter a single line of text, such as a name or email address.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=784-13824",
+    "sourcePath": "packages/design/src/components/textField",
+    "docPage": "components/text-field",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Field, TextField} from '@staffbase/design';\n\n<Field.Root className=\"max-w-[300px]\">\n  <Field.Label>Name</Field.Label>\n  <Field.Description>Enter your full name.</Field.Description>\n  <TextField />\n</Field.Root>"
+      },
+      {
+        "variant": "With icons",
+        "code": "import {Field, HomeIcon, TextField} from '@staffbase/design';\n\n<Field.Root className=\"max-w-[300px]\">\n  <Field.Label>Address</Field.Label>\n  <TextField leadingIcon={<HomeIcon />} />\n</Field.Root>"
+      },
+      {
+        "variant": "Invalid",
+        "code": "import {Field, TextField} from '@staffbase/design';\n\n<Field.Root invalid className=\"max-w-[300px]\">\n  <Field.Label>Email</Field.Label>\n  <TextField />\n  <Field.Error match>Enter a valid email address.</Field.Error>\n</Field.Root>"
+      }
+    ]
+  },
+  {
+    "name": "TextInput",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "TextField",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {\r\n    /**\r\n     * Label shown above the input field\r\n     */\r\n    label: string;\r\n    /**\r\n     * Sets the type of the input field.\r\n     * @default 'text'\r\n     */\r\n    type?: 'email' | 'url' | 'text' | 'password' | 'search' | 'time';\r\n    /**\r\n     * Optional Icon to be shown inside the input field\r\n     */\r\n    icon?: ReactElement<SVGAttributes<SVGElement>>;\r\n    /**\r\n     * Controls the position of the icon at the beginning or the end of the input field (optional)\r\n     * @default 'leading'\r\n     */\r\n    iconPosition?: 'trailing' | 'leading';\r\n    /**\r\n     * Optional input id\r\n     */\r\n    id?: string;\r\n    /**\r\n     * Optional required attribute that appears after the `label`\r\n     */\r\n    requiredLabel?: string;\r\n    /**\r\n     * Optional description to be shown below the input field\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Error message to be shown as hint below the input field\r\n     */\r\n    errorMessage?: string;\r\n    /**\r\n     * Optional ghost variant\r\n     */\r\n    variant?: 'default' | 'ghost';\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Toggle",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Switch",
+    "compoundMembers": [],
+    "propsInterface": "export declare interface ToggleProps {\r\n    /**\r\n     * Refers to the checked state of the toggle\r\n     */\r\n    checked?: boolean;\r\n    /**\r\n     * Disables the toggle, label and optional description\r\n     */\r\n    disabled?: boolean;\r\n    /**\r\n     * Optional description below the label\r\n     */\r\n    description?: string;\r\n    /**\r\n     * Required label of the toggle\r\n     */\r\n    label: string;\r\n    /**\r\n     * Sets or returns the value of the name attribute\r\n     */\r\n    name: string;\r\n    /**\r\n     * The event when the value of the toggle has been changed\r\n     */\r\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\r\n    /**\r\n     * The reference object of the toggle\r\n     */\r\n    ref?: RefObject<HTMLInputElement>;\r\n    /**\r\n     * Refers to space between the label and toggle and if true, it takes position to the end of the container\r\n     */\r\n    spaceBetween?: boolean;\r\n    /**\r\n     * Optional classname prop for styling\r\n     */\r\n    className?: string;\r\n}",
+    "examples": []
+  },
+  {
+    "name": "Tooltip",
+    "category": "Components",
+    "description": "Tooltips display a short label or description when the user hovers or focuses on an element.",
+    "figmaUrl": "https://www.figma.com/design/jKlhl09SG2Mk7SWLievNvM/%F0%9F%A7%B0-Design-System-Components?node-id=817-24822",
+    "sourcePath": "packages/design/src/components/tooltip",
+    "docPage": "components/tooltip",
+    "deprecated": false,
+    "compoundMembers": [
+      {
+        "name": "Root",
+        "signature": "(props: Tooltip_2.Root.Props) => JSX.Element"
+      },
+      {
+        "name": "Content",
+        "signature": "ForwardRefExoticComponent<Omit<TooltipContentProps, \"ref\"> & RefAttributes<HTMLDivElement>>"
+      },
+      {
+        "name": "Trigger",
+        "signature": "(props: TooltipTriggerProps) => JSX.Element"
+      }
+    ],
+    "examples": [
+      {
+        "variant": "default",
+        "code": "import {Button, SettingsIcon, Tooltip} from '@staffbase/design';\n\n<Tooltip.Root>\n  <Tooltip.Trigger>\n    <Button variant=\"ghost\" color=\"neutral\" iconOnly aria-label=\"Settings\"><SettingsIcon /></Button>\n  </Tooltip.Trigger>\n  <Tooltip.Content is=\"label\" side=\"bottom\">\n    Settings\n  </Tooltip.Content>\n</Tooltip.Root>"
+      }
+    ]
+  },
+  {
+    "name": "TooltipDeprecated",
+    "category": "Other",
+    "deprecated": true,
+    "replacement": "Tooltip",
+    "compoundMembers": [],
+    "examples": []
+  },
+  {
+    "name": "useActionMenuContext",
+    "category": "Other",
+    "deprecated": false,
+    "compoundMembers": [],
+    "examples": []
+  }
+]