{
"accordion": {
"type": "group",
"name": "Accordion",
"category": "accordion",
"description": "A collapsible content component that allows users to show and hide sections of related content. Built on Radix UI Accordion primitive with smooth animations, full keyboard navigation, and screen reader support.",
"importPath": "@glide/glide-ui/accordion",
"components": {
"accordion/accordion": {
"name": "Accordion",
"import": "import { Accordion } from '@glide/glide-ui/accordion';",
"description": "The root container component that provides context for all accordion items."
},
"accordion/accordion-content": {
"name": "AccordionContent",
"import": "import { AccordionContent } from '@glide/glide-ui/accordion';",
"description": "The collapsible content area of an accordion item."
},
"accordion/accordion-item": {
"name": "AccordionItem",
"import": "import { AccordionItem } from '@glide/glide-ui/accordion';",
"description": "A collapsible section within the accordion."
},
"accordion/accordion-trigger": {
"name": "AccordionTrigger",
"import": "import { AccordionTrigger } from '@glide/glide-ui/accordion';",
"description": "The clickable header that toggles the accordion item."
}
},
"info": "# Accordion\n\nA collapsible content component that allows users to show and hide sections of related content. Built on Radix UI Accordion primitive with smooth animations, full keyboard navigation, and screen reader support.\n\n## API\n\n### Accordion\n\nThe root container component that provides context for all accordion items.\n\n| Prop | Type | Default | Description |\n| ------------- | ------------------------------------- | ------- | ----------------------------------------------------- |\n| multiple | `boolean` | `false` | Whether multiple items can be expanded simultaneously |\n| defaultValue | `string \\| string[]` | - | The default expanded item(s) |\n| value | `string \\| string[]` | - | Controlled expanded item(s) |\n| onValueChange | `(value: string \\| string[]) => void` | - | Callback when expanded items change |\n| className | `string` | - | Additional CSS classes |\n\n**Note:** Single mode (default) allows collapsing all items. Set `multiple={true}` to allow multiple items to be expanded.\n\n### AccordionItem\n\nA collapsible section within the accordion.\n\n| Prop | Type | Default | Description |\n| --------- | --------- | -------- | ------------------------------ |\n| value | `string` | Required | Unique identifier for the item |\n| disabled | `boolean` | `false` | Disables this specific item |\n| className | `string` | - | Additional CSS classes |\n\n### AccordionTrigger\n\nThe clickable header that toggles the accordion item.\n\n| Prop | Type | Default | Description |\n| --------- | ----------- | ------- | ---------------------- |\n| className | `string` | - | Additional CSS classes |\n| children | `ReactNode` | - | Trigger content |\n\n### AccordionContent\n\nThe collapsible content area of an accordion item.\n\n| Prop | Type | Default | Description |\n| --------- | ----------- | ------- | ---------------------- |\n| className | `string` | - | Additional CSS classes |\n| children | `ReactNode` | - | Content to display |\n\n## Features\n\n- Single or multiple expansion modes\n- Controlled and uncontrolled variants\n- Smooth expand/collapse animations\n- Full keyboard navigation support\n- Screen reader accessible\n- Customizable styling via className\n\n## Examples\n\n### Basic Single Accordion\n\n```tsx\nimport {\n Accordion,\n AccordionItem,\n AccordionTrigger,\n AccordionContent,\n} from \"@glide/glide-ui/accordion\";\n\n\n \n What is your return policy?\n \n We offer a 30-day return policy for all items in original condition.\n Please contact customer service to initiate a return.\n \n \n \n How long does shipping take?\n \n Standard shipping takes 5-7 business days. Express shipping options are\n available at checkout.\n \n \n \n Do you ship internationally?\n \n Yes, we ship to over 50 countries worldwide. International shipping rates\n and times vary by location.\n \n \n;\n```\n\n### Multiple Selection Accordion\n\n```tsx\n\n \n Billing Information\n \n View and manage your billing details, payment methods, and transaction\n history.\n \n \n \n Security Settings\n \n Configure two-factor authentication, manage devices, and review security\n logs.\n \n \n \n Notification Preferences\n \n Customize how and when you receive notifications about your account\n activity.\n \n \n\n```\n\n### Default Open Accordion\n\n```tsx\n\n \n Item 1\n \n This accordion starts with item 1 open by default\n \n \n \n Item 2\n \n Only one item can be open at a time in single mode\n \n \n\n```\n"
},
"accordion/accordion": {
"name": "Accordion",
"category": "display",
"importPath": "@glide/glide-ui/accordion",
"import": "import { Accordion } from '@glide/glide-ui/accordion';",
"description": "The root container component that provides context for all accordion items.",
"props": {
"multiple": {
"type": "boolean",
"required": false
},
"value": {
"type": "string | string[]",
"required": false
},
"defaultValue": {
"type": "string | string[]",
"required": false
},
"onValueChange": {
"type": "(value: string | string[]) => void",
"required": false
},
"disabled": {
"type": "boolean",
"required": false
},
"className": {
"type": "string",
"required": false
},
"children": {
"type": "string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise",
"required": false
}
}
},
"accordion/accordion-content": {
"name": "AccordionContent",
"category": "display",
"importPath": "@glide/glide-ui/accordion",
"import": "import { AccordionContent } from '@glide/glide-ui/accordion';",
"description": "The collapsible content area of an accordion item."
},
"accordion/accordion-item": {
"name": "AccordionItem",
"category": "display",
"importPath": "@glide/glide-ui/accordion",
"import": "import { AccordionItem } from '@glide/glide-ui/accordion';",
"description": "A collapsible section within the accordion."
},
"accordion/accordion-trigger": {
"name": "AccordionTrigger",
"category": "display",
"importPath": "@glide/glide-ui/accordion",
"import": "import { AccordionTrigger } from '@glide/glide-ui/accordion';",
"description": "The clickable header that toggles the accordion item."
},
"app-icon": {
"name": "AppIcon",
"category": "display",
"importPath": "@glide/glide-ui/app-icon",
"import": "import { AppIcon } from '@glide/glide-ui/app-icon';",
"description": "A flexible app icon component that supports emojis, image URLs, and text fallbacks. Designed to be used across different contexts from small navbar icons to large splash screen icons.",
"props": {
"icon": {
"type": "string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise",
"required": false,
"description": "The icon content - can be an emoji string, image URL, icon name from"
},
"size": {
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"required": false,
"description": "Size variant for the icon"
},
"alt": {
"type": "string",
"required": false,
"description": "Alternative text for image icons (required when using image URLs)"
},
"background": {
"type": "string",
"required": false,
"description": "Background color for emoji icons (e.g., '#ff0000', 'red', 'bg-red-500') - overrides color variant"
},
"variant": {
"type": "\"default\" | \"minimal\" | \"light\" | \"neutral\"",
"required": false,
"description": "Visual variant - minimal has no background, default/light/neutral have different backgrounds"
},
"color": {
"type": "\"light\" | \"neutral\" | \"accent\"",
"required": false,
"description": "Color variant - accent (default), light (accent/20), or neutral (gray)"
},
"defaultChecked": {
"type": "boolean",
"required": false
},
"defaultValue": {
"type": "string | number | readonly string[]",
"required": false
},
"suppressContentEditableWarning": {
"type": "boolean",
"required": false
},
"suppressHydrationWarning": {
"type": "boolean",
"required": false
},
"accessKey": {
"type": "string",
"required": false
},
"autoCapitalize": {
"type": "\"none\" | \"off\" | (string & {}) | \"on\" | \"sentences\" | \"words\" | \"characters\"",
"required": false
},
"autoFocus": {
"type": "boolean",
"required": false
},
"className": {
"type": "string",
"required": false
},
"contentEditable": {
"type": "Booleanish | \"inherit\" | \"plaintext-only\"",
"required": false
},
"contextMenu": {
"type": "string",
"required": false
},
"dir": {
"type": "string",
"required": false
},
"draggable": {
"type": "boolean | \"true\" | \"false\"",
"required": false
},
"enterKeyHint": {
"type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\"",
"required": false
},
"hidden": {
"type": "boolean",
"required": false
},
"id": {
"type": "string",
"required": false
},
"lang": {
"type": "string",
"required": false
},
"nonce": {
"type": "string",
"required": false
},
"slot": {
"type": "string",
"required": false
},
"spellCheck": {
"type": "boolean | \"true\" | \"false\"",
"required": false
},
"style": {
"type": "CSSProperties",
"required": false
},
"tabIndex": {
"type": "number",
"required": false
},
"title": {
"type": "string",
"required": false
},
"translate": {
"type": "\"no\" | \"yes\"",
"required": false
},
"radioGroup": {
"type": "string",
"required": false
},
"role": {
"type": "\"none\" | \"list\" | \"link\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | \"separator\" | \"alert\" | \"alertdialog\" | \"application\" | \"article\" | \"banner\" | \"button\" | \"cell\" | \"checkbox\" | \"columnheader\" | \"combobox\" | \"complementary\" | \"contentinfo\" | \"definition\" | \"directory\" | \"document\" | \"feed\" | \"figure\" | \"form\" | \"gridcell\" | \"group\" | \"heading\" | \"img\" | \"listitem\" | \"log\" | \"main\" | \"marquee\" | \"math\" | \"menubar\" | \"menuitem\" | \"menuitemcheckbox\" | \"menuitemradio\" | \"navigation\" | \"note\" | \"option\" | \"presentation\" | \"progressbar\" | \"radio\" | \"radiogroup\" | \"region\" | \"row\" | \"rowgroup\" | \"rowheader\" | \"scrollbar\" | \"search\" | \"searchbox\" | \"slider\" | \"spinbutton\" | \"status\" | \"switch\" | \"tab\" | \"table\" | \"tablist\" | \"tabpanel\" | \"term\" | \"textbox\" | \"timer\" | \"toolbar\" | \"tooltip\" | \"treegrid\" | \"treeitem\" | (string & {})",
"required": false
},
"about": {
"type": "string",
"required": false
},
"content": {
"type": "string",
"required": false
},
"datatype": {
"type": "string",
"required": false
},
"inlist": {
"type": "any",
"required": false
},
"prefix": {
"type": "string",
"required": false
},
"property": {
"type": "string",
"required": false
},
"rel": {
"type": "string",
"required": false
},
"resource": {
"type": "string",
"required": false
},
"rev": {
"type": "string",
"required": false
},
"typeof": {
"type": "string",
"required": false
},
"vocab": {
"type": "string",
"required": false
},
"autoCorrect": {
"type": "string",
"required": false
},
"autoSave": {
"type": "string",
"required": false
},
"itemProp": {
"type": "string",
"required": false
},
"itemScope": {
"type": "boolean",
"required": false
},
"itemType": {
"type": "string",
"required": false
},
"itemID": {
"type": "string",
"required": false
},
"itemRef": {
"type": "string",
"required": false
},
"results": {
"type": "number",
"required": false
},
"security": {
"type": "string",
"required": false
},
"unselectable": {
"type": "\"off\" | \"on\"",
"required": false
},
"popover": {
"type": "\"\" | \"auto\" | \"manual\" | \"hint\"",
"required": false
},
"popoverTargetAction": {
"type": "\"hide\" | \"toggle\" | \"show\"",
"required": false
},
"popoverTarget": {
"type": "string",
"required": false
},
"inert": {
"type": "boolean",
"required": false
},
"inputMode": {
"type": "\"none\" | \"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"",
"required": false,
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
},
"is": {
"type": "string",
"required": false,
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
},
"exportparts": {
"type": "string",
"required": false
},
"part": {
"type": "string",
"required": false
},
"aria-activedescendant": {
"type": "string",
"required": false,
"description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application."
},
"aria-atomic": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
},
"aria-autocomplete": {
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
"required": false,
"description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made."
},
"aria-braillelabel": {
"type": "string",
"required": false,
"description": "Defines a string value that labels the current element, which is intended to be converted into Braille."
},
"aria-brailleroledescription": {
"type": "string",
"required": false,
"description": "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille."
},
"aria-busy": {
"type": "boolean | \"true\" | \"false\"",
"required": false
},
"aria-checked": {
"type": "boolean | \"true\" | \"false\" | \"mixed\"",
"required": false,
"description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets."
},
"aria-colcount": {
"type": "number",
"required": false,
"description": "Defines the total number of columns in a table, grid, or treegrid."
},
"aria-colindex": {
"type": "number",
"required": false,
"description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid."
},
"aria-colindextext": {
"type": "string",
"required": false,
"description": "Defines a human readable text alternative of aria-colindex."
},
"aria-colspan": {
"type": "number",
"required": false,
"description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid."
},
"aria-controls": {
"type": "string",
"required": false,
"description": "Identifies the element (or elements) whose contents or presence are controlled by the current element."
},
"aria-current": {
"type": "boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"",
"required": false,
"description": "Indicates the element that represents the current item within a container or set of related elements."
},
"aria-describedby": {
"type": "string",
"required": false,
"description": "Identifies the element (or elements) that describes the object."
},
"aria-description": {
"type": "string",
"required": false,
"description": "Defines a string value that describes or annotates the current element."
},
"aria-details": {
"type": "string",
"required": false,
"description": "Identifies the element that provides a detailed, extended description for the object."
},
"aria-disabled": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable."
},
"aria-dropeffect": {
"type": "\"none\" | \"copy\" | \"execute\" | \"link\" | \"move\" | \"popup\"",
"required": false,
"description": "Indicates what functions can be performed when a dragged object is released on the drop target."
},
"aria-errormessage": {
"type": "string",
"required": false,
"description": "Identifies the element that provides an error message for the object."
},
"aria-expanded": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed."
},
"aria-flowto": {
"type": "string",
"required": false,
"description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order."
},
"aria-grabbed": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
},
"aria-haspopup": {
"type": "boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\"",
"required": false,
"description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element."
},
"aria-hidden": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates whether the element is exposed to an accessibility API."
},
"aria-invalid": {
"type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"",
"required": false,
"description": "Indicates the entered value does not conform to the format expected by the application."
},
"aria-keyshortcuts": {
"type": "string",
"required": false,
"description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element."
},
"aria-label": {
"type": "string",
"required": false,
"description": "Defines a string value that labels the current element."
},
"aria-labelledby": {
"type": "string",
"required": false,
"description": "Identifies the element (or elements) that labels the current element."
},
"aria-level": {
"type": "number",
"required": false,
"description": "Defines the hierarchical level of an element within a structure."
},
"aria-live": {
"type": "\"off\" | \"assertive\" | \"polite\"",
"required": false,
"description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region."
},
"aria-modal": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates whether an element is modal when displayed."
},
"aria-multiline": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates whether a text box accepts multiple lines of input or only a single line."
},
"aria-multiselectable": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates that the user may select more than one item from the current selectable descendants."
},
"aria-orientation": {
"type": "\"horizontal\" | \"vertical\"",
"required": false,
"description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous."
},
"aria-owns": {
"type": "string",
"required": false,
"description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship."
},
"aria-placeholder": {
"type": "string",
"required": false,
"description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format."
},
"aria-posinset": {
"type": "number",
"required": false,
"description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
},
"aria-pressed": {
"type": "boolean | \"true\" | \"false\" | \"mixed\"",
"required": false,
"description": "Indicates the current \"pressed\" state of toggle buttons."
},
"aria-readonly": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates that the element is not editable, but is otherwise operable."
},
"aria-relevant": {
"type": "\"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\"",
"required": false,
"description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified."
},
"aria-required": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates that user input is required on the element before a form may be submitted."
},
"aria-roledescription": {
"type": "string",
"required": false,
"description": "Defines a human-readable, author-localized description for the role of an element."
},
"aria-rowcount": {
"type": "number",
"required": false,
"description": "Defines the total number of rows in a table, grid, or treegrid."
},
"aria-rowindex": {
"type": "number",
"required": false,
"description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid."
},
"aria-rowindextext": {
"type": "string",
"required": false,
"description": "Defines a human readable text alternative of aria-rowindex."
},
"aria-rowspan": {
"type": "number",
"required": false,
"description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid."
},
"aria-selected": {
"type": "boolean | \"true\" | \"false\"",
"required": false,
"description": "Indicates the current \"selected\" state of various widgets."
},
"aria-setsize": {
"type": "number",
"required": false,
"description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
},
"aria-sort": {
"type": "\"none\" | \"ascending\" | \"descending\" | \"other\"",
"required": false,
"description": "Indicates if items in a table or grid are sorted in ascending or descending order."
},
"aria-valuemax": {
"type": "number",
"required": false,
"description": "Defines the maximum allowed value for a range widget."
},
"aria-valuemin": {
"type": "number",
"required": false,
"description": "Defines the minimum allowed value for a range widget."
},
"aria-valuenow": {
"type": "number",
"required": false,
"description": "Defines the current value for a range widget."
},
"aria-valuetext": {
"type": "string",
"required": false,
"description": "Defines the human readable text alternative of aria-valuenow for a range widget."
},
"children": {
"type": "string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise",
"required": false
},
"dangerouslySetInnerHTML": {
"type": "{ __html: string | TrustedHTML; }",
"required": false
},
"onCopy": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCopyCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCut": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCutCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onPaste": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onPasteCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCompositionEnd": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionEndCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionStart": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionStartCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionUpdate": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionUpdateCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onFocus": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onFocusCapture": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onBlur": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onBlurCapture": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onChange": {
"type": "(event: FormEvent) => void",
"required": false
},
"onChangeCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onBeforeInput": {
"type": "(event: InputEvent) => void",
"required": false
},
"onBeforeInputCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInput": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInputCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onReset": {
"type": "(event: FormEvent) => void",
"required": false
},
"onResetCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onSubmit": {
"type": "(event: FormEvent) => void",
"required": false
},
"onSubmitCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInvalid": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInvalidCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onLoad": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onError": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onErrorCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onKeyDown": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyDownCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyPress": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyPressCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyUp": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyUpCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onAbort": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onAbortCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlay": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayThrough": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayThroughCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onDurationChange": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onDurationChangeCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEmptied": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEmptiedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEncrypted": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEncryptedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEnded": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEndedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedData": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedDataCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedMetadata": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedMetadataCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadStart": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadStartCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPause": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPauseCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlay": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlayCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlaying": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlayingCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onProgress": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onProgressCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onRateChange": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onRateChangeCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeeked": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeekedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeeking": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeekingCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onStalled": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onStalledCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSuspend": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSuspendCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onTimeUpdate": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onTimeUpdateCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onVolumeChange": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onVolumeChangeCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onWaiting": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onWaitingCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onAuxClick": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onAuxClickCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onClick": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onClickCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onContextMenu": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onContextMenuCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onDoubleClick": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onDoubleClickCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onDrag": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragEnd": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragEndCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragEnter": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragEnterCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragExit": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragExitCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragLeave": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragLeaveCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragOver": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragOverCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragStart": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDragStartCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDrop": {
"type": "(event: DragEvent) => void",
"required": false
},
"onDropCapture": {
"type": "(event: DragEvent) => void",
"required": false
},
"onMouseDown": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseDownCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseEnter": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseLeave": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseMove": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseMoveCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseOut": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseOutCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseOver": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseOverCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseUp": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onMouseUpCapture": {
"type": "(event: MouseEvent) => void",
"required": false
},
"onSelect": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSelectCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onTouchCancel": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchCancelCapture": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchEnd": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchEndCapture": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchMove": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchMoveCapture": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchStart": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onTouchStartCapture": {
"type": "(event: TouchEvent) => void",
"required": false
},
"onPointerDown": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerDownCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerMove": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerMoveCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerUp": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerUpCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerCancel": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerCancelCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerEnter": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerLeave": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerOver": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerOverCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerOut": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onPointerOutCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onGotPointerCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onGotPointerCaptureCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onLostPointerCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onLostPointerCaptureCapture": {
"type": "(event: PointerEvent) => void",
"required": false
},
"onScroll": {
"type": "(event: UIEvent) => void",
"required": false
},
"onScrollCapture": {
"type": "(event: UIEvent) => void",
"required": false
},
"onScrollEnd": {
"type": "(event: UIEvent) => void",
"required": false
},
"onScrollEndCapture": {
"type": "(event: UIEvent) => void",
"required": false
},
"onWheel": {
"type": "(event: WheelEvent) => void",
"required": false
},
"onWheelCapture": {
"type": "(event: WheelEvent) => void",
"required": false
},
"onAnimationStart": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onAnimationStartCapture": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onAnimationEnd": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onAnimationEndCapture": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onAnimationIteration": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onAnimationIterationCapture": {
"type": "(event: AnimationEvent) => void",
"required": false
},
"onToggle": {
"type": "(event: ToggleEvent) => void",
"required": false
},
"onBeforeToggle": {
"type": "(event: ToggleEvent) => void",
"required": false
},
"onTransitionCancel": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionCancelCapture": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionEnd": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionEndCapture": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionRun": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionRunCapture": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionStart": {
"type": "(event: TransitionEvent) => void",
"required": false
},
"onTransitionStartCapture": {
"type": "(event: TransitionEvent) => void",
"required": false
}
},
"info": "# AppIcon\n\nA flexible app icon component that supports emojis, image URLs, and text fallbacks. Designed to be used across different contexts from small navbar icons to large splash screen icons.\n\n## Props\n\n| Prop | Type | Default | Description |\n| ------------ | ------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------- |\n| `icon` | `string \\| React.ReactNode` | - | The icon content - can be an emoji string, image URL, or React node |\n| `size` | `'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| '2xl'` | `'md'` | Size variant for the icon |\n| `alt` | `string` | - | Alternative text for image icons (required when using image URLs) |\n| `background` | `string` | - | Custom background color (e.g., '#ff0000', 'red', 'bg-red-500') - overrides color variant |\n| `variant` | `'default' \\| 'minimal' \\| 'light' \\| 'neutral'` | `'default'` | Visual variant - 'minimal' removes background, others map to color variants |\n| `color` | `'accent' \\| 'light' \\| 'neutral'` | `'accent'` | Color variant - 'accent' uses app accent color, 'light' uses accent/20, 'neutral' uses muted background |\n| `className` | `string` | - | Additional CSS classes to apply |\n\n## Features\n\n- Supports image URLs for custom logos and icons\n- Supports text fallbacks (displays first character of text strings)\n- Multiple size variants from `xs` to `2xl`\n- Color variants: accent (default), light, and neutral\n- Minimal variant option (no background)\n- Custom background color support\n- Automatic text color adjustment for contrast\n\n## Examples\n\n### Basic Usage\n\n```tsx\nimport { AppIcon } from '@glide/glide-ui/app-icon';\n\n// Emoji with default accent background\n\n\n// With different color variants\n\n\n\n\n// With image URL\n\n\n// With text fallback\n\n\n// Minimal variant\n\n\n// Custom background color\n\n```\n\n### Navbar Usage\n\n```tsx\n\n```\n\n### Splash Screen Usage\n\n```tsx\n\n```\n"
},
"audio-player": {
"name": "AudioPlayer",
"category": "specialized",
"importPath": "@glide/glide-ui/audio-player",
"import": "import { AudioPlayer } from '@glide/glide-ui/audio-player';",
"description": "An audio player component with play/pause controls, seeking, volume control, playback rate adjustment, and keyboard shortcuts.",
"props": {
"src": {
"type": "string",
"required": true
},
"title": {
"type": "string",
"required": false
},
"artist": {
"type": "string",
"required": false
},
"isPlaying": {
"type": "boolean",
"required": false
},
"currentTime": {
"type": "number",
"required": false
},
"volume": {
"type": "number",
"required": false
},
"playbackRate": {
"type": "number",
"required": false
},
"showVolumeControl": {
"type": "boolean",
"required": false
},
"showSpeedControl": {
"type": "boolean",
"required": false
},
"isLoading": {
"type": "boolean",
"required": false
},
"isBuffering": {
"type": "boolean",
"required": false
},
"error": {
"type": "string",
"required": false
},
"disabled": {
"type": "boolean",
"required": false
},
"enableKeyboardShortcuts": {
"type": "boolean",
"required": false
},
"onPlay": {
"type": "() => void",
"required": false
},
"onPause": {
"type": "() => void",
"required": false
},
"onSeek": {
"type": "(time: number) => void",
"required": false
},
"onVolumeChange": {
"type": "(volume: number) => void",
"required": false
},
"onSpeedChange": {
"type": "(speed: number) => void",
"required": false
},
"onError": {
"type": "(error: Event) => void",
"required": false
},
"onEnded": {
"type": "() => void",
"required": false
},
"children": {
"type": "string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise",
"required": false
},
"className": {
"type": "string",
"required": false
},
"dangerouslySetInnerHTML": {
"type": "{ __html: string | TrustedHTML; }",
"required": false
},
"onCopy": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCopyCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCut": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCutCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onPaste": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onPasteCapture": {
"type": "(event: ClipboardEvent) => void",
"required": false
},
"onCompositionEnd": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionEndCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionStart": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionStartCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionUpdate": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onCompositionUpdateCapture": {
"type": "(event: CompositionEvent) => void",
"required": false
},
"onFocus": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onFocusCapture": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onBlur": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onBlurCapture": {
"type": "(event: FocusEvent) => void",
"required": false
},
"onChange": {
"type": "(event: FormEvent) => void",
"required": false
},
"onChangeCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onBeforeInput": {
"type": "(event: InputEvent) => void",
"required": false
},
"onBeforeInputCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInput": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInputCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onReset": {
"type": "(event: FormEvent) => void",
"required": false
},
"onResetCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onSubmit": {
"type": "(event: FormEvent) => void",
"required": false
},
"onSubmitCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInvalid": {
"type": "(event: FormEvent) => void",
"required": false
},
"onInvalidCapture": {
"type": "(event: FormEvent) => void",
"required": false
},
"onLoad": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onErrorCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onKeyDown": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyDownCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyPress": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyPressCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyUp": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onKeyUpCapture": {
"type": "(event: KeyboardEvent) => void",
"required": false
},
"onAbort": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onAbortCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlay": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayThrough": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onCanPlayThroughCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onDurationChange": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onDurationChangeCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEmptied": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEmptiedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEncrypted": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEncryptedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onEndedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedData": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedDataCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedMetadata": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadedMetadataCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadStart": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onLoadStartCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPauseCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlayCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlaying": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onPlayingCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onProgress": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onProgressCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onRateChange": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onRateChangeCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeeked": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeekedCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeeking": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSeekingCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onStalled": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onStalledCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSuspend": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onSuspendCapture": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onTimeUpdate": {
"type": "(event: SyntheticEvent) => void",
"required": false
},
"onTimeUpdateCapture": {
"type": "(event: SyntheticEvent