{"count":166,"generatedAt":"2026-06-14T11:51:11.554Z","specs":[{"category":"inputs","name":"button","title":"Button","description":"Displays a button or a component that looks like a button.","variants":{"keys":["default","destructive","outline","secondary","ghost","link","primary","info","success","warning"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","baseColorHint":"fill=#0c0c12 | text=#f8fafc","perVariant":[{"key":"default","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#0c0c12 | text=#f8fafc"},{"key":"destructive","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#ef4444 | text=#f8fafc"},{"key":"outline","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg border bg-transparent text-sm font-medium","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12"},{"key":"secondary","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#f1f5f9 | text=#18181b"},{"key":"ghost","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg bg-transparent text-sm font-medium","colorHint":"fill=transparent | text=#0c0c12"},{"key":"link","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg bg-transparent text-sm font-medium","colorHint":"fill=transparent | text=#0c0c12"},{"key":"primary","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#394794 | text=#f8fafc"},{"key":"info","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#1d4ed8 | text=#f8fafc"},{"key":"success","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#15803d | text=#f8fafc"},{"key":"warning","classes":"inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium","colorHint":"fill=#b45309 | text=#f8fafc"}]},"slots":[],"sourceFile":"src/components/inputs/Button.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/button"},{"category":"inputs","name":"calendar","title":"Calendar","description":"A date field component that allows users to enter and edit date.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] p-4 rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[320px] p-4 rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["calendarHeader","calendarGrid"],"sourceFile":"src/components/inputs/Calendar.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/calendar"},{"category":"inputs","name":"chatComposer","title":"ChatComposer","description":"Container that composes ChatInput with prompt choices, workspace context, usage status, footer context, or an accessory.","variants":{"keys":["default","context","prompt"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-full p-0 gap-3","baseColorHint":null,"perVariant":[{"key":"default","classes":"inline-flex items-center w-full p-0 gap-3","colorHint":null},{"key":"context","classes":"inline-flex items-center w-full p-0 gap-3","colorHint":null},{"key":"prompt","classes":"inline-flex items-center w-full p-0 gap-3","colorHint":null}]},"slots":[],"sourceFile":"src/components/inputs/ChatComposer.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/chat-composer"},{"category":"inputs","name":"chatInput","title":"ChatInput","description":"Message composer with multiline input, attachment action, send/stop controls, and disabled-state feedback.","variants":{"keys":["default","processing"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-full p-3 gap-2","baseColorHint":"fill=#ffffff","perVariant":[{"key":"default","classes":"inline-flex items-center w-full p-3 gap-2","colorHint":"fill=#ffffff"},{"key":"processing","classes":"inline-flex items-center w-full p-3 gap-2","colorHint":"fill=#ffffff"}]},"slots":[],"sourceFile":"src/components/inputs/ChatInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/chat-input"},{"category":"inputs","name":"checkbox","title":"Checkbox","description":"A control that allows the user to toggle between checked and not checked.","variants":{"keys":["unchecked","checked","disabled"],"default":"unchecked"},"styling":{"baseClasses":"w-5 h-5 rounded border bg-transparent","baseColorHint":"fill=transparent | stroke=#e2e8f0@1px","perVariant":[{"key":"unchecked","classes":"w-5 h-5 rounded border bg-transparent","colorHint":"fill=transparent | stroke=#e2e8f0@1px"},{"key":"checked","classes":"inline-flex items-center w-5 h-5 rounded text-xs font-semibold","colorHint":"fill=#0c0c12 | text=#f8fafc"},{"key":"disabled","classes":"w-5 h-5 rounded border","colorHint":"fill=#f1f5f9 | stroke=#e2e8f0@1px"}]},"slots":[],"sourceFile":"src/components/inputs/Checkbox.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/checkbox"},{"category":"inputs","name":"combobox","title":"Combobox","description":"Searchable select. Combines Popover + Command for filterable option lists.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/Combobox.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/combobox"},{"category":"inputs","name":"copyButton","title":"CopyButton","description":"Clipboard action button with tooltip feedback and copied-state icon or label.","variants":{"keys":["default","label"],"default":"default"},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[{"key":"default","classes":"","colorHint":null},{"key":"label","classes":"","colorHint":null}]},"slots":[],"sourceFile":"src/components/inputs/CopyButton.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/copy-button"},{"category":"inputs","name":"datePicker","title":"DatePicker","description":"Date input with popup Calendar. Wraps Popover + Calendar primitives.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/DatePicker.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/date-picker"},{"category":"inputs","name":"dateRangePicker","title":"DateRangePicker","description":"Pick a date range with two-month Calendar in popover.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/DateRangePicker.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/date-range-picker"},{"category":"inputs","name":"editableField","title":"Editable Field","description":"Labelled field that switches between read-only display and explicit save/cancel editing.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/inputs/EditableField.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/editable-field"},{"category":"inputs","name":"fileUploader","title":"File Uploader","description":"Drag-and-drop file intake with compact list rendering.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-[640px] gap-4","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center w-[640px] gap-4","colorHint":null}]},"slots":["fileUploaderDropzone","fileUploaderItem"],"sourceFile":"src/components/inputs/FileUploader.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/file-uploader"},{"category":"inputs","name":"filterButton","title":"FilterButton","description":"Filter trigger with dashed border, count badge, and command popover list.","variants":{"keys":["default","selected","popover"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md border","baseColorHint":"stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md border","colorHint":"stroke=#e2e8f0@1px"},{"key":"selected","classes":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md border","colorHint":"stroke=#e2e8f0@1px"},{"key":"popover","classes":"flex flex-col w-[200px] rounded-lg border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["filterButtonIcon","filterButtonLabel"],"sourceFile":"src/components/inputs/FilterButton.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/filter-button"},{"category":"inputs","name":"form","title":"Form","description":"Compound form primitives for vertical field composition, labels, descriptions, messages, and full-width controls.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/Form.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/form"},{"category":"inputs","name":"input","title":"Input","description":"Displays a form input field or a component that looks like an input field.","variants":{"keys":["default","placeholder","disabled"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-[280px] h-9 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","baseColorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12","perVariant":[{"key":"default","classes":"inline-flex items-center w-[280px] h-9 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12"},{"key":"placeholder","classes":"inline-flex items-center w-[280px] h-9 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#64748b"},{"key":"disabled","classes":"inline-flex items-center w-[280px] h-9 py-2 px-3 rounded-lg border text-sm font-normal","colorHint":"fill=#f1f5f9 | stroke=#e2e8f0@1px | text=#94a3b8"}]},"slots":[],"sourceFile":"src/components/inputs/Input.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/input"},{"category":"inputs","name":"inputOTP","title":"InputOTP","description":"One-time-password input with per-digit slots and optional separator.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/InputOTP.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/input-otp"},{"category":"inputs","name":"label","title":"Label","description":"Renders an accessible label associated with controls.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/Label.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/label"},{"category":"inputs","name":"mention","title":"Mention","description":"Textarea with @mention picker — autocompletes user names from a list.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/Mention.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/mention"},{"category":"inputs","name":"numberInput","title":"NumberInput","description":"Numeric input with up/down stepper buttons.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/NumberInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/number-input"},{"category":"inputs","name":"passwordGroup","title":"PasswordGroup","description":"Password field composition with visibility control, requirement checklist, strength meter, error message, and disabled feedback.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PasswordGroup.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/password-group"},{"category":"inputs","name":"passwordInput","title":"PasswordInput","description":"Password field with show/hide toggle button.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PasswordInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/password-input"},{"category":"inputs","name":"passwordRequirementList","title":"PasswordRequirementList","description":"Password requirement checklist that can be used standalone or inside PasswordGroup.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PasswordRequirementList.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/password-requirement-list"},{"category":"inputs","name":"passwordStrengthMeter","title":"PasswordStrengthMeter","description":"Password strength meter that displays a caller-provided score, label, and helper text.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PasswordStrengthMeter.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/password-strength-meter"},{"category":"inputs","name":"phoneInput","title":"PhoneInput","description":"Telephone input with country calling-code affordance and caller-provided formatting hook.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PhoneInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/phone-input"},{"category":"inputs","name":"postalCodeInput","title":"PostalCodeInput","description":"Postal-code input with prefix affordance and caller-provided formatting hook.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/PostalCodeInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/postal-code-input"},{"category":"inputs","name":"radioGroup","title":"RadioGroup","description":"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.","variants":{"keys":["unchecked","checked"],"default":"unchecked"},"styling":{"baseClasses":"w-4 h-4 rounded-lg border bg-transparent","baseColorHint":"fill=transparent | stroke=#e2e8f0@1px","perVariant":[{"key":"unchecked","classes":"w-4 h-4 rounded-lg border bg-transparent","colorHint":"fill=transparent | stroke=#e2e8f0@1px"},{"key":"checked","classes":"w-4 h-4 rounded-lg border bg-transparent","colorHint":"fill=transparent | stroke=#0c0c12@1px"}]},"slots":[],"sourceFile":"src/components/inputs/RadioGroup.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/radio-group"},{"category":"inputs","name":"rangeSlider","title":"RangeSlider","description":"Selects a minimum and maximum value within a bounded range.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"w-[240px] h-7","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-[240px] h-7","colorHint":null}]},"slots":[],"sourceFile":"src/components/inputs/RangeSlider.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/range-slider"},{"category":"inputs","name":"searchInput","title":"SearchInput","description":"Input with leading search icon for search bars.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/SearchInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/search-input"},{"category":"inputs","name":"select","title":"Select","description":"Displays a list of options for the user to pick from.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-[200px] h-9 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","baseColorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#64748b","perVariant":[{"key":"default","classes":"inline-flex items-center w-[200px] h-9 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#64748b"}]},"slots":[],"sourceFile":"src/components/inputs/Select.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/select"},{"category":"inputs","name":"slider","title":"Slider","description":"An input where the user selects a value from within a given range.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"w-[200px] h-5 rounded-[10px]","baseColorHint":"fill=#e2e8f0","perVariant":[{"key":"default","classes":"w-[200px] h-5 rounded-[10px]","colorHint":"fill=#e2e8f0"}]},"slots":[],"sourceFile":"src/components/inputs/Slider.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/slider"},{"category":"inputs","name":"sortButton","title":"SortButton","description":"Three-state sort trigger (none, asc, desc) with icon + text.","variants":{"keys":["none","asc","desc"],"default":"none"},"styling":{"baseClasses":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md","baseColorHint":null,"perVariant":[{"key":"none","classes":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md","colorHint":null},{"key":"asc","classes":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md","colorHint":"fill=#eef2ff"},{"key":"desc","classes":"flex flex-col items-center h-9 py-2 px-3 gap-2 rounded-md","colorHint":"fill=#fff7ed"}]},"slots":["sortButtonIcon","sortButtonLabel"],"sourceFile":"src/components/inputs/SortButton.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/sort-button"},{"category":"inputs","name":"switch","title":"Switch","description":"A control that allows the user to toggle between checked and not checked.","variants":{"keys":["unchecked","checked"],"default":"unchecked"},"styling":{"baseClasses":"w-11 h-6 p-0.5 rounded-full","baseColorHint":"fill=#f1f5f9","perVariant":[{"key":"unchecked","classes":"w-11 h-6 p-0.5 rounded-full","colorHint":"fill=#f1f5f9"},{"key":"checked","classes":"w-11 h-6 p-0.5 rounded-full","colorHint":"fill=#0c0c12"}]},"slots":[],"sourceFile":"src/components/inputs/Switch.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/switch"},{"category":"inputs","name":"tagInput","title":"TagInput","description":"Multi-tag input with Enter to add and × to remove.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/TagInput.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/tag-input"},{"category":"inputs","name":"textarea","title":"Textarea","description":"Displays a form textarea or a component that looks like a textarea.","variants":{"keys":["default","disabled"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-[280px] h-20 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","baseColorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#64748b","perVariant":[{"key":"default","classes":"inline-flex items-center w-[280px] h-20 py-2 px-3 rounded-lg border bg-transparent text-sm font-normal","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#64748b"},{"key":"disabled","classes":"inline-flex items-center w-[280px] h-20 py-2 px-3 rounded-lg border text-sm font-normal","colorHint":"fill=#f1f5f9 | stroke=#e2e8f0@1px | text=#94a3b8"}]},"slots":[],"sourceFile":"src/components/inputs/Textarea.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/textarea"},{"category":"inputs","name":"timePicker","title":"TimePicker","description":"Hour + minute select with optional 12 / 24 hour mode.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/TimePicker.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/time-picker"},{"category":"inputs","name":"toggle","title":"Toggle","description":"Two-state pressable button (icon-style toggle).","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/inputs/Toggle.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/toggle"},{"category":"inputs","name":"toggleGroup","title":"ToggleGroup","description":"A set of two-state buttons that can be toggled on or off.","variants":{"keys":["default","outline"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center h-9 py-0 px-3 rounded-lg text-sm font-medium","baseColorHint":"fill=#f1f5f9 | text=#0c0c12","perVariant":[{"key":"default","classes":"inline-flex items-center h-9 py-0 px-3 rounded-lg text-sm font-medium","colorHint":"fill=#f1f5f9 | text=#0c0c12"},{"key":"outline","classes":"inline-flex items-center h-9 py-0 px-3 rounded-lg border bg-transparent text-sm font-medium","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12"}]},"slots":[],"sourceFile":"src/components/inputs/ToggleGroup.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/toggle-group"},{"category":"inputs","name":"tooltipButton","title":"TooltipButton","description":"Button composition that pairs an action with a GunjoUI Tooltip for icon, compact, or explanatory controls.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[{"key":"default","classes":"","colorHint":null}]},"slots":[],"sourceFile":"src/components/inputs/TooltipButton.tsx","specSource":"design/inputs.pen","docsUrl":"https://gunjo.dev/docs/components/tooltip-button"},{"category":"display","name":"accordion","title":"Accordion","description":"A vertically stacked set of interactive headings that each reveal a section of content.","variants":{"keys":["collapsed","expanded"],"default":"collapsed"},"styling":{"baseClasses":"flex flex-col w-[400px] border","baseColorHint":"stroke=#e2e8f0@1px","perVariant":[{"key":"collapsed","classes":"flex flex-col w-[400px] border","colorHint":"stroke=#e2e8f0@1px"},{"key":"expanded","classes":"flex flex-col w-[400px] border","colorHint":"stroke=#e2e8f0@1px"}]},"slots":["accordionTriggerCollapsed"],"sourceFile":"src/components/display/Accordion.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/accordion"},{"category":"display","name":"accordionGroup","title":"AccordionGroup","description":"Labeled accordion composition with a single expand-all/collapse-all toggle control for FAQ, settings, and grouped disclosure lists.","variants":{"keys":["default","withDescription","withoutControls"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"withDescription","classes":"w-full p-0","colorHint":null},{"key":"withoutControls","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/AccordionGroup.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/accordion-group"},{"category":"display","name":"actionDataTable","title":"ActionDataTable","description":"Selectable data table composition with bulk actions, row actions, and disabled-action feedback.","variants":{"keys":["default","selection","rowActions"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"selection","classes":"w-full p-0","colorHint":null},{"key":"rowActions","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ActionDataTable.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/action-data-table"},{"category":"display","name":"activityTimelineCard","title":"Activity Timeline Card","description":"HTML/CSS timeline card for activity, sleep, and operations dashboards with editable slots, segments, metrics, and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ActivityTimelineCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/activity-timeline-card"},{"category":"display","name":"analyticsCard","title":"AnalyticsCard","description":"Composable metric card shell for chart previews, deltas, and supporting context.","variants":{"keys":["default","positive","riskIncrease","flatWithFooter"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"positive","classes":"w-full p-0","colorHint":null},{"key":"riskIncrease","classes":"w-full p-0","colorHint":null},{"key":"flatWithFooter","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/AnalyticsCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/analytics-card"},{"category":"display","name":"assetCard","title":"AssetCard","description":"Selectable media asset card for image libraries, files, and generated creative results with favorite, score, and preview affordances.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0 rounded-lg","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0 rounded-lg","colorHint":null},{"key":"compact","classes":"w-full p-0 rounded-md","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/AssetCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/asset-card"},{"category":"display","name":"assetGrid","title":"AssetGrid","description":"Responsive grouped media grid that renders AssetCard items with empty state, selection state, and preview hooks.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/AssetGrid.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/asset-grid"},{"category":"display","name":"avatar","title":"Avatar","description":"An image element with a fallback for representing the user.","variants":{"keys":["fallback","image"],"default":"fallback"},"styling":{"baseClasses":"inline-flex items-center w-10 h-10 rounded-full text-sm font-medium","baseColorHint":"fill=#f1f5f9 | text=#64748b","perVariant":[{"key":"fallback","classes":"inline-flex items-center w-10 h-10 rounded-full text-sm font-medium","colorHint":"fill=#f1f5f9 | text=#64748b"},{"key":"image","classes":"w-10 h-10 rounded-full","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/Avatar.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/avatar"},{"category":"display","name":"avatarGroup","title":"AvatarGroup","description":"Stack of overlapping avatars with optional +N overflow indicator.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/AvatarGroup.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/avatar-group"},{"category":"display","name":"badge","title":"Badge","description":"Displays a badge or a component that looks like a badge.","variants":{"keys":["default","secondary","destructive","outline"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center h-5 py-1 px-2.5 rounded-full text-xs font-semibold","baseColorHint":"fill=#0c0c12 | text=#f8fafc","perVariant":[{"key":"default","classes":"inline-flex items-center h-5 py-1 px-2.5 rounded-full text-xs font-semibold","colorHint":"fill=#0c0c12 | text=#f8fafc"},{"key":"secondary","classes":"inline-flex items-center h-5 py-1 px-2.5 rounded-full text-xs font-semibold","colorHint":"fill=#f1f5f9 | text=#18181b"},{"key":"destructive","classes":"inline-flex items-center h-5 py-1 px-2.5 rounded-full text-xs font-semibold","colorHint":"fill=#ef4444 | text=#f8fafc"},{"key":"outline","classes":"inline-flex items-center h-5 py-1 px-2.5 rounded-full border bg-transparent text-xs font-semibold","colorHint":"fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12"}]},"slots":[],"sourceFile":"src/components/display/Badge.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/badge"},{"category":"display","name":"barChart","title":"BarChart","description":"Token-driven vertical or horizontal bar chart with optional average marker and hover/focus value tooltips.","variants":{"keys":["vertical","horizontal"],"default":"vertical"},"styling":{"baseClasses":"w-full h-[192px] p-0","baseColorHint":null,"perVariant":[{"key":"vertical","classes":"w-full h-[192px] p-0","colorHint":null},{"key":"horizontal","classes":"w-full h-[192px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/BarChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/bar-chart"},{"category":"display","name":"card","title":"Card","description":"Displays a card with header, content, and footer.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-full rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-full rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["cardHeader","cardContent","cardFooter"],"sourceFile":"src/components/display/Card.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/card"},{"category":"display","name":"carousel","title":"Carousel","description":"Embla-powered slider with keyboard and arrow controls.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[640px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[640px]","colorHint":null}]},"slots":["carouselContent","carouselPrevButton","carouselNextButton"],"sourceFile":"src/components/display/Carousel.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/carousel"},{"category":"display","name":"chartLegend","title":"ChartLegend","description":"Legend rows for chart series, values, and token-driven markers.","variants":{"keys":["horizontal","vertical"],"default":"horizontal"},"styling":{"baseClasses":"inline-flex items-center w-full p-0 gap-2","baseColorHint":null,"perVariant":[{"key":"horizontal","classes":"inline-flex items-center w-full p-0 gap-2","colorHint":null},{"key":"vertical","classes":"inline-flex items-center w-full p-0 gap-2","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ChartLegend.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/chart-legend"},{"category":"display","name":"chatMessage","title":"ChatMessage","description":"Single chat transcript row for assistant, user, system, and typing states.","variants":{"keys":["assistant","user","system","typing"],"default":"assistant"},"styling":{"baseClasses":"inline-flex items-center w-full p-4 gap-4","baseColorHint":null,"perVariant":[{"key":"assistant","classes":"inline-flex items-center w-full p-4 gap-4","colorHint":null},{"key":"user","classes":"inline-flex items-center w-full p-4 gap-4","colorHint":null},{"key":"system","classes":"w-full p-4","colorHint":null},{"key":"typing","classes":"inline-flex items-center w-full p-4 gap-4","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ChatMessage.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/chat-message"},{"category":"display","name":"choroplethMap","title":"ChoroplethMap","description":"HTML/CSS region density map for GeoJSON-style boundaries, markers, and ranked locations with hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ChoroplethMap.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/choropleth-map"},{"category":"display","name":"code","title":"Code","description":"Inline code style for monospaced text content.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Code.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/code"},{"category":"display","name":"codeBlock","title":"CodeBlock","description":"Syntax-highlighted code block with optional filename and copy button.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/CodeBlock.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/code-block"},{"category":"display","name":"colorSwatch","title":"ColorSwatch","description":"Color preview chip with copyable hex/rgb value.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/ColorSwatch.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/color-swatch"},{"category":"display","name":"concentricProgressCard","title":"Concentric Progress Card","description":"HTML/CSS card for storage, quota, and multi-ring progress widgets with selectable concentric rings, metrics, and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/ConcentricProgressCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/concentric-progress-card"},{"category":"display","name":"dataTable","title":"DataTable","description":"Table + sort + filter + pagination integrated. Wraps @tanstack/react-table.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/DataTable.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/data-table"},{"category":"display","name":"distributionBar","title":"DistributionBar","description":"Stacked percentage distribution bar for segments, channels, and allocation data with hover/focus segment tooltips.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"w-full h-9 p-0 rounded-full","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full h-9 p-0 rounded-full","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/DistributionBar.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/distribution-bar"},{"category":"display","name":"docNote","title":"DocNote","description":"Supplemental note block for explanatory copy, references, and non-urgent documentation callouts.","variants":{"keys":["default","reference"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-full py-3 px-4 gap-1 rounded-md","baseColorHint":"fill=#f1f5f9","perVariant":[{"key":"default","classes":"inline-flex items-center w-full py-3 px-4 gap-1 rounded-md","colorHint":"fill=#f1f5f9"},{"key":"reference","classes":"inline-flex items-center w-full py-3 px-4 gap-1 rounded-md","colorHint":"fill=#f8fafc"}]},"slots":[],"sourceFile":"src/components/display/DocNote.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/doc-note"},{"category":"display","name":"donutChart","title":"DonutChart","description":"HTML/CSS donut chart for proportional segments with optional center labels and pointer-aware segment tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0 rounded-full","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0 rounded-full","colorHint":null},{"key":"compact","classes":"w-full p-0 rounded-full","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/DonutChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/donut-chart"},{"category":"display","name":"emptyState","title":"EmptyState","description":"Placeholder for lists / panels with no data, with optional CTA.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/EmptyState.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/empty-state"},{"category":"display","name":"fileTree","title":"FileTree","description":"File and folder tree composition with metadata, row actions, and single or multiple selection.","variants":{"keys":["single","multiple","actions"],"default":"single"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"single","classes":"w-full p-0","colorHint":null},{"key":"multiple","classes":"w-full p-0","colorHint":null},{"key":"actions","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/FileTree.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/file-tree"},{"category":"display","name":"gaugeChart","title":"GaugeChart","description":"HTML/CSS semi-circle gauge for scores, progress, and capacity readings with hover/focus value tooltip.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full h-[144px] p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full h-[144px] p-0","colorHint":null},{"key":"compact","classes":"w-full h-[112px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/GaugeChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/gauge-chart"},{"category":"display","name":"heatmapChart","title":"HeatmapChart","description":"HTML/CSS density heatmap for day, time, and cohort intensity patterns with hover/focus cell tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/HeatmapChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/heatmap-chart"},{"category":"display","name":"icon","title":"Icon","description":"Normalizes icon size, stroke, and accessibility behavior across GunjoUI.","variants":{"keys":["sm","xs","md","lg","xl"],"default":"sm"},"styling":{"baseClasses":"w-4 h-4 p-0","baseColorHint":"fill=#64748b","perVariant":[{"key":"sm","classes":"w-4 h-4 p-0","colorHint":"fill=#64748b"},{"key":"xs","classes":"w-3 h-3 p-0","colorHint":"fill=#64748b"},{"key":"md","classes":"w-5 h-5 p-0","colorHint":"fill=#64748b"},{"key":"lg","classes":"w-6 h-6 p-0","colorHint":"fill=#64748b"},{"key":"xl","classes":"w-8 h-8 p-0","colorHint":"fill=#64748b"}]},"slots":[],"sourceFile":"src/components/display/Icon.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/icon"},{"category":"display","name":"imagePreview","title":"ImagePreview","description":"Framed image preview surface for asset cards, pickers, and media inspection.","variants":{"keys":["default","contain","empty"],"default":"default"},"styling":{"baseClasses":"w-full p-0 rounded-lg","baseColorHint":"fill=#f8fafc","perVariant":[{"key":"default","classes":"w-full p-0 rounded-lg","colorHint":"fill=#f8fafc"},{"key":"contain","classes":"w-full p-0 rounded-lg","colorHint":"fill=#f8fafc"},{"key":"empty","classes":"w-full p-0 rounded-lg","colorHint":"fill=#f8fafc"}]},"slots":[],"sourceFile":"src/components/display/ImagePreview.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/image-preview"},{"category":"display","name":"img","title":"Img","description":"An enhanced image component with loading skeleton and error fallback.","variants":{"keys":["loading","loaded","error"],"default":"loading"},"styling":{"baseClasses":"w-[256px] h-[256px] rounded-lg","baseColorHint":"fill=#f1f5f9","perVariant":[{"key":"loading","classes":"w-[256px] h-[256px] rounded-lg","colorHint":"fill=#f1f5f9"},{"key":"loaded","classes":"w-[256px] h-[256px] rounded-lg","colorHint":null},{"key":"error","classes":"inline-flex items-center w-[256px] h-[256px] gap-2 rounded-lg text-xs font-normal","colorHint":"fill=#f1f5f9 | text=#94a3b8"}]},"slots":[],"sourceFile":"src/components/display/Img.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/img"},{"category":"display","name":"kbd","title":"Kbd","description":"Displays a keyboard shortcut key.","variants":{"keys":["key"],"default":"key"},"styling":{"baseClasses":"h-5 py-1 px-1.5 rounded border","baseColorHint":"fill=#f1f5f9 | stroke=#e2e8f0@1px","perVariant":[{"key":"key","classes":"h-5 py-1 px-1.5 rounded border","colorHint":"fill=#f1f5f9 | stroke=#e2e8f0@1px"}]},"slots":[],"sourceFile":"src/components/display/Kbd.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/kbd"},{"category":"display","name":"labeledDonutCard","title":"Labeled Donut Card","description":"HTML/CSS donut chart card for segment comparison with central summary, external callout rows, and hover/focus segment tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/LabeledDonutCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/labeled-donut-card"},{"category":"display","name":"lineChart","title":"LineChart","description":"HTML/CSS multi-series line or area chart for time-series comparison with reference lines, legends, and hover/focus point tooltips.","variants":{"keys":["line","area"],"default":"line"},"styling":{"baseClasses":"w-full h-[260px] p-0","baseColorHint":null,"perVariant":[{"key":"line","classes":"w-full h-[260px] p-0","colorHint":null},{"key":"area","classes":"w-full h-[260px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/LineChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/line-chart"},{"category":"display","name":"list","title":"List","description":"A semantic list component with customizable markers and spacing.","variants":{"keys":["dot","check","circle"],"default":"dot"},"styling":{"baseClasses":"flex flex-col items-center gap-2","baseColorHint":null,"perVariant":[{"key":"dot","classes":"flex flex-col items-center gap-2","colorHint":null},{"key":"check","classes":"flex flex-col items-center gap-2","colorHint":null},{"key":"circle","classes":"flex flex-col items-center gap-2","colorHint":null}]},"slots":["listDotIcon","listDotText"],"sourceFile":"src/components/display/List.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/list"},{"category":"display","name":"markdownRenderer","title":"MarkdownRenderer","description":"Markdown to HTML rendering with GFM (tables, task lists, code).","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/MarkdownRenderer.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/markdown-renderer"},{"category":"display","name":"metadataList","title":"MetadataList","description":"Definition-list style metadata rows for inspectors, file details, and compact property summaries.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/MetadataList.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/metadata-list"},{"category":"display","name":"miniDistributionBarCard","title":"Mini Distribution Bar Card","description":"HTML/CSS compact distribution card for product categories, capacity, and utilization widgets with dense ticks, selected segment details, and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/MiniDistributionBarCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/mini-distribution-bar-card"},{"category":"display","name":"pieChart","title":"PieChart","description":"HTML/CSS pie chart for proportional segment comparisons with pointer-aware segment tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0 rounded-full","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0 rounded-full","colorHint":null},{"key":"compact","classes":"w-full p-0 rounded-full","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/PieChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/pie-chart"},{"category":"display","name":"quadrantMatrix","title":"QuadrantMatrix","description":"HTML/CSS four-quadrant matrix for plotting selectable items by x/y position with ranked values and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/QuadrantMatrix.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/quadrant-matrix"},{"category":"display","name":"radarChart","title":"RadarChart","description":"HTML/CSS radar chart for comparing single or multi-series multi-axis scores with hover/focus point tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full h-[256px] p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full h-[256px] p-0","colorHint":null},{"key":"compact","classes":"w-full h-[208px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/RadarChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/radar-chart"},{"category":"display","name":"radialBarChart","title":"RadialBarChart","description":"HTML/CSS concentric radial bar chart for comparing progress, share, or capacity across multiple series with hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full h-[224px] p-0 rounded-full","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full h-[224px] p-0 rounded-full","colorHint":null},{"key":"compact","classes":"w-full h-[176px] p-0 rounded-full","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/RadialBarChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/radial-bar-chart"},{"category":"display","name":"retentionCohortCard","title":"Retention Cohort Card","description":"HTML/CSS cohort retention card for dashboard grids with editable cohorts, periods, values, and hover/focus cell tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/RetentionCohortCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/retention-cohort-card"},{"category":"display","name":"ribbonChart","title":"RibbonChart","description":"HTML/CSS ribbon chart for comparing changing flow, volume, or segment width across periods with hover/focus point tooltips.","variants":{"keys":["flow","stacked"],"default":"flow"},"styling":{"baseClasses":"w-full h-[260px] p-0","baseColorHint":null,"perVariant":[{"key":"flow","classes":"w-full h-[260px] p-0","colorHint":null},{"key":"stacked","classes":"w-full h-[260px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/RibbonChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/ribbon-chart"},{"category":"display","name":"searchableAccordion","title":"SearchableAccordion","description":"Searchable and category-filterable accordion composition for FAQ, help, and docs lists.","variants":{"keys":["default","withCategories","empty"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"withCategories","classes":"w-full p-0","colorHint":null},{"key":"empty","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/SearchableAccordion.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/searchable-accordion"},{"category":"display","name":"segmentedGaugeCard","title":"Segmented Gauge Card","description":"HTML/CSS segmented semicircle gauge card for status, spend, risk, and progress dashboards with editable segments, target value, and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/SegmentedGaugeCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/segmented-gauge-card"},{"category":"display","name":"segmentTimelineCard","title":"Segment Timeline Card","description":"HTML/CSS horizontal segment timeline card for sleep stages, uptime states, and categorical duration ranges with metrics, markers, and hover/focus tooltips.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/SegmentTimelineCard.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/segment-timeline-card"},{"category":"display","name":"separator","title":"Separator","description":"Visually or semantically separates content.","variants":{"keys":["horizontal","vertical"],"default":"horizontal"},"styling":{"baseClasses":"w-[200px] h-[1px]","baseColorHint":"fill=#e2e8f0","perVariant":[{"key":"horizontal","classes":"w-[200px] h-[1px]","colorHint":"fill=#e2e8f0"},{"key":"vertical","classes":"w-[1px] h-6","colorHint":"fill=#e2e8f0"}]},"slots":[],"sourceFile":"src/components/display/Separator.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/separator"},{"category":"display","name":"skeleton","title":"Skeleton","description":"Loading placeholder for content while it is being fetched.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Skeleton.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/skeleton"},{"category":"display","name":"spacer","title":"Spacer","description":"Flex-grow filler for pushing siblings to the edges of a flex container.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Spacer.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/spacer"},{"category":"display","name":"sparklineChart","title":"SparklineChart","description":"Compact HTML/CSS line, area, or stepped trend chart for dense dashboard cards with hover/focus point tooltips.","variants":{"keys":["line","area","step"],"default":"line"},"styling":{"baseClasses":"w-full h-24 p-0","baseColorHint":null,"perVariant":[{"key":"line","classes":"w-full h-24 p-0","colorHint":null},{"key":"area","classes":"w-full h-24 p-0","colorHint":null},{"key":"step","classes":"w-full h-24 p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/SparklineChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/sparkline-chart"},{"category":"display","name":"stackedBarChart","title":"StackedBarChart","description":"HTML/CSS stacked vertical or horizontal bar chart for grouped segment comparisons with hover/focus segment tooltips.","variants":{"keys":["vertical","horizontal"],"default":"vertical"},"styling":{"baseClasses":"w-full h-[224px] p-0","baseColorHint":null,"perVariant":[{"key":"vertical","classes":"w-full h-[224px] p-0","colorHint":null},{"key":"horizontal","classes":"w-full h-[224px] p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/StackedBarChart.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/stacked-bar-chart"},{"category":"display","name":"statistic","title":"Statistic","description":"KPI metric card: label + value + delta indicator.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Statistic.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/statistic"},{"category":"display","name":"table","title":"Table","description":"A responsive table component.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[400px] rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[400px] rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["tableHeader","tableRow"],"sourceFile":"src/components/display/Table.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/table"},{"category":"display","name":"tag","title":"Tag","description":"Removable badge with × button. Useful for filter chips and tag editors.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Tag.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/tag"},{"category":"display","name":"tagEditor","title":"TagEditor","description":"Tag editing control composed from TagInput and suggestion actions for asset inspectors and filter panels.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/display/TagEditor.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/tag-editor"},{"category":"display","name":"timeline","title":"Timeline","description":"Vertical time-ordered list with markers and connector lines.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/Timeline.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/timeline"},{"category":"display","name":"toolPill","title":"ToolPill","description":"Compact icon pill used for toolbar quick actions with active and danger states.","variants":{"keys":["primary","secondary","danger"],"default":"primary"},"styling":{"baseClasses":"w-10 h-10 p-2.5 rounded-xl","baseColorHint":"fill=#eff6ff","perVariant":[{"key":"primary","classes":"w-10 h-10 p-2.5 rounded-xl","colorHint":"fill=#eff6ff"},{"key":"secondary","classes":"w-10 h-10 p-2.5 rounded-xl","colorHint":"fill=#ffffff80"},{"key":"danger","classes":"w-10 h-10 p-2.5 rounded-xl","colorHint":"fill=#fef2f2"}]},"slots":[],"sourceFile":"src/components/display/ToolPill.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/tool-pill"},{"category":"display","name":"treeView","title":"TreeView","description":"Hierarchical tree with expand/collapse for file explorers and navigation.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/display/TreeView.tsx","specSource":"design/display.pen","docsUrl":"https://gunjo.dev/docs/components/tree-view"},{"category":"feedback","name":"alert","title":"Alert","description":"Displays a callout for user attention.","variants":{"keys":["default","destructive","info","success","warning"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px | text=#0c0c12","perVariant":[{"key":"default","classes":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px | text=#0c0c12"},{"key":"destructive","classes":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","colorHint":"fill=#fef2f2 | stroke=#fecaca@1px | text=#991b1b"},{"key":"info","classes":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","colorHint":"fill=#eff6ff | stroke=#bfdbfe@1px | text=#1e40af"},{"key":"success","classes":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","colorHint":"fill=#f0fdf4 | stroke=#bbf7d0@1px | text=#166534"},{"key":"warning","classes":"inline-flex items-center w-[320px] py-3 px-4 gap-1 rounded-lg border text-sm font-medium","colorHint":"fill=#fef3c7 | stroke=#fcd34d@1px | text=#78350f"}]},"slots":[],"sourceFile":"src/components/feedback/Alert.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/alert"},{"category":"feedback","name":"banner","title":"Banner","description":"Page-wide announcement bar, optionally dismissible.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/feedback/Banner.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/banner"},{"category":"feedback","name":"notificationCenter","title":"Notification Center","description":"Popover-based inbox for unread activity and quick actions.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[320px]","colorHint":null}]},"slots":["notificationCenterTrigger","notificationCenterPanel"],"sourceFile":"src/components/feedback/NotificationCenter.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/notification-center"},{"category":"feedback","name":"progress","title":"Progress","description":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","variants":{"keys":["bar"],"default":"bar"},"styling":{"baseClasses":"w-[200px] h-4 rounded-full","baseColorHint":"fill=#f1f5f9","perVariant":[{"key":"bar","classes":"w-[200px] h-4 rounded-full","colorHint":"fill=#f1f5f9"}]},"slots":[],"sourceFile":"src/components/feedback/Progress.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/progress"},{"category":"feedback","name":"progressWidget","title":"ProgressWidget","description":"Metric card showing title, value, progress bar, and optional subtext.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] rounded-lg border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[320px] rounded-lg border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["progressWidgetHeader","progressWidgetContent"],"sourceFile":"src/components/feedback/ProgressWidget.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/progress-widget"},{"category":"feedback","name":"spinner","title":"Spinner","description":"A visual indicator that content is being loaded.","variants":{"keys":["sm","default","lg"],"default":"default"},"styling":{"baseClasses":"w-4 h-4","baseColorHint":"fill=#64748b","perVariant":[{"key":"sm","classes":"w-3 h-3","colorHint":"fill=#64748b"},{"key":"default","classes":"w-4 h-4","colorHint":"fill=#64748b"},{"key":"lg","classes":"w-6 h-6","colorHint":"fill=#64748b"}]},"slots":[],"sourceFile":"src/components/feedback/Spinner.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/spinner"},{"category":"feedback","name":"statusBar","title":"StatusBar","description":"Bottom fixed utility bar with left, center and right regions.","variants":{"keys":["fixed"],"default":"fixed"},"styling":{"baseClasses":"flex flex-col w-[640px] py-1 px-4","baseColorHint":"fill=#2563eb","perVariant":[{"key":"fixed","classes":"flex flex-col w-[640px] py-1 px-4","colorHint":"fill=#2563eb"}]},"slots":["statusBarLeft","statusBarCenter","statusBarRight"],"sourceFile":"src/components/feedback/StatusBar.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/status-bar"},{"category":"feedback","name":"statusScreen","title":"StatusScreen","description":"Full-page status feedback for not-found, error, offline, forbidden, maintenance, and coming-soon states.","variants":{"keys":["not-found","error","offline","forbidden","maintenance","coming-soon"],"default":"not-found"},"styling":{"baseClasses":"w-full p-8","baseColorHint":null,"perVariant":[{"key":"not-found","classes":"w-full p-8","colorHint":null},{"key":"error","classes":"w-full p-8","colorHint":null},{"key":"offline","classes":"w-full p-8","colorHint":null},{"key":"forbidden","classes":"w-full p-8","colorHint":null},{"key":"maintenance","classes":"w-full p-8","colorHint":null},{"key":"coming-soon","classes":"w-full p-8","colorHint":null}]},"slots":[],"sourceFile":"src/components/feedback/StatusScreen.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/status-screen"},{"category":"feedback","name":"stepper","title":"Stepper","description":"A multi-step progress indicator with completed, current, and upcoming states.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/feedback/Stepper.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/stepper"},{"category":"feedback","name":"toast","title":"Toast","description":"Transient feedback message with semantic variants.","variants":{"keys":["success","error","info"],"default":"success"},"styling":{"baseClasses":"flex flex-col items-center w-[384px] py-3 px-4 gap-3 rounded-xl border","baseColorHint":"fill=#ffffff | stroke=#22c55e33@1px","perVariant":[{"key":"success","classes":"flex flex-col items-center w-[384px] py-3 px-4 gap-3 rounded-xl border","colorHint":"fill=#ffffff | stroke=#22c55e33@1px"},{"key":"error","classes":"flex flex-col items-center w-[384px] py-3 px-4 gap-3 rounded-xl border","colorHint":"fill=#ffffff | stroke=#ef444433@1px"},{"key":"info","classes":"flex flex-col items-center w-[384px] py-3 px-4 gap-3 rounded-xl border","colorHint":"fill=#ffffff | stroke=#3b82f633@1px"}]},"slots":["toastSuccessIcon","toastSuccessText","toastSuccessClose"],"sourceFile":"src/components/feedback/Toast.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/toast"},{"category":"feedback","name":"toastProvider","title":"Toast Provider","description":"Global toast stack manager for showing transient feedback messages.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-[320px] gap-2","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center w-[320px] gap-2","colorHint":null}]},"slots":["toastProviderStack","toastProviderDefaultDuration","toastProviderExitDelay"],"sourceFile":"src/components/feedback/ToastProvider.tsx","specSource":"design/feedback.pen","docsUrl":"https://gunjo.dev/docs/components/toast-provider"},{"category":"navigation","name":"appRail","title":"App Rail","description":"Primary vertical icon rail used for application-wide navigation.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-16 h-[320px] py-4 px-0 gap-4","baseColorHint":"fill=#111827","perVariant":[{"key":"default","classes":"flex flex-col items-center w-16 h-[320px] py-4 px-0 gap-4","colorHint":"fill=#111827"}]},"slots":["appRailIconHome","appRailIconSearch","appRailIconFolder"],"sourceFile":"src/components/navigation/AppRail.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/app-rail"},{"category":"navigation","name":"breadcrumb","title":"Breadcrumb","description":"Displays the path to the current resource using a hierarchy of links.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center gap-2","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center gap-2","colorHint":null}]},"slots":["breadcrumbLink1","breadcrumbSep1","breadcrumbLink2","breadcrumbSep2","breadcrumbPage"],"sourceFile":"src/components/navigation/Breadcrumb.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/breadcrumb"},{"category":"navigation","name":"command","title":"Command","description":"Fast, composable, unstyled command menu for React.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[320px] rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["commandInput","commandList"],"sourceFile":"src/components/navigation/Command.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/command"},{"category":"navigation","name":"commandPalette","title":"Command Palette","description":"Global quick-action launcher with grouped commands and keyboard shortcuts.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[480px] rounded-lg border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[480px] rounded-lg border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["commandPaletteInput","commandPaletteGroup"],"sourceFile":"src/components/navigation/CommandPalette.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/command-palette"},{"category":"navigation","name":"documentPager","title":"DocumentPager","description":"Adjacent-document navigation with preview thumbnail, category label, title, and description.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-full pt-5 pb-0 px-0 gap-3","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center w-full pt-5 pb-0 px-0 gap-3","colorHint":null}]},"slots":["documentPagerPrevious","documentPagerNext"],"sourceFile":"src/components/navigation/DocumentPager.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/document-pager"},{"category":"navigation","name":"footer","title":"Footer","description":"Standard footer with brand, link sections, and copyright row.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/navigation/Footer.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/footer"},{"category":"navigation","name":"header","title":"Header","description":"Top navigation bar with logo, primary nav, and right-aligned actions.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/navigation/Header.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/header"},{"category":"navigation","name":"menubar","title":"Menubar","description":"Top application menu with trigger items and nested submenu entry.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center h-10 p-1 gap-1 rounded-md border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col items-center h-10 p-1 gap-1 rounded-md border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["menubarTrigger","menubarContent"],"sourceFile":"src/components/navigation/Menubar.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/menubar"},{"category":"navigation","name":"navigationMenu","title":"NavigationMenu","description":"Top-nav with mega-menu dropdowns for site navigation.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/navigation/NavigationMenu.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/navigation-menu"},{"category":"navigation","name":"pageAside","title":"PageAside","description":"Responsive page support layout that renders supporting information as a right rail on wide screens and a collapsible block on narrow screens.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center w-full p-0 gap-6","baseColorHint":null,"perVariant":[{"key":"default","classes":"inline-flex items-center w-full p-0 gap-6","colorHint":null}]},"slots":[],"sourceFile":"src/components/navigation/PageAside.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/page-aside"},{"category":"navigation","name":"pagination","title":"Pagination","description":"Navigation controls for traversing paged content.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center gap-1","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center gap-1","colorHint":null}]},"slots":["paginationContent"],"sourceFile":"src/components/navigation/Pagination.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/pagination"},{"category":"navigation","name":"rightRail","title":"Right Rail","description":"Secondary side panel for contextual tools and inspector content.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[256px] h-[360px] border","baseColorHint":"fill=#ffffff | stroke=#e5e7eb@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[256px] h-[360px] border","colorHint":"fill=#ffffff | stroke=#e5e7eb@1px"}]},"slots":["rightRailHeader","rightRailItem"],"sourceFile":"src/components/navigation/RightRail.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/right-rail"},{"category":"navigation","name":"sidebar","title":"Sidebar","description":"Full sidebar orchestrator with provider, header, nav items, and footer slots.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/navigation/Sidebar.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/sidebar"},{"category":"navigation","name":"sidebarItem","title":"SidebarItem","description":"Nested sidebar row with chevron, icon, label, and counter area.","variants":{"keys":["default","active"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] h-9 py-1.5 px-4 rounded-md cursor-pointer","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[320px] h-9 py-1.5 px-4 rounded-md cursor-pointer","colorHint":null},{"key":"active","classes":"flex flex-col w-[320px] h-9 py-1.5 px-4 rounded-md cursor-pointer","colorHint":"fill=#f1f5f9"}]},"slots":["sidebarItemContent","sidebarItemRight"],"sourceFile":"src/components/navigation/SidebarItem.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/sidebar-item"},{"category":"navigation","name":"tabs","title":"Tabs","description":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[400px] rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[400px] rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["tabsList","tabsContent"],"sourceFile":"src/components/navigation/Tabs.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/tabs"},{"category":"navigation","name":"textLink","title":"TextLink","description":"Inline text link that automatically shows an external-tab icon when it opens a new tab.","variants":{"keys":["default","muted"],"default":"default"},"styling":{"baseClasses":"inline-flex items-center p-0 gap-1 text-sm font-medium","baseColorHint":"text=#2563eb","perVariant":[{"key":"default","classes":"inline-flex items-center p-0 gap-1 text-sm font-medium","colorHint":"text=#2563eb"},{"key":"muted","classes":"inline-flex items-center p-0 gap-1 text-sm font-medium","colorHint":"text=#0f172a"}]},"slots":[],"sourceFile":"src/components/navigation/TextLink.tsx","specSource":"design/navigation.pen","docsUrl":"https://gunjo.dev/docs/components/text-link"},{"category":"overlay","name":"alertDialog","title":"AlertDialog","description":"Modal dialog focused on confirming a destructive or important action.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/overlay/AlertDialog.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/alert-dialog"},{"category":"overlay","name":"chatPanel","title":"ChatPanel","description":"Contained chat overlay surface that composes ChatMessage and ChatInput for support, assistant, or team conversation panels.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full h-[560px] p-0 rounded-lg","baseColorHint":"fill=#ffffff","perVariant":[{"key":"default","classes":"w-full h-[560px] p-0 rounded-lg","colorHint":"fill=#ffffff"},{"key":"compact","classes":"w-full h-[420px] p-0 rounded-lg","colorHint":"fill=#ffffff"}]},"slots":[],"sourceFile":"src/components/overlay/ChatPanel.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/chat-panel"},{"category":"overlay","name":"contextMenu","title":"ContextMenu","description":"Right-click style action list with labels and nested trigger.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-[192px] p-1 gap-0.5 rounded-md border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col items-center w-[192px] p-1 gap-0.5 rounded-md border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["contextMenuLabelText","contextMenuItem","contextMenuSeparator","contextMenuSubTrigger"],"sourceFile":"src/components/overlay/ContextMenu.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/context-menu"},{"category":"overlay","name":"dialog","title":"Dialog","description":"Centered modal dialog with overlay, header, and footer actions.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[512px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[512px]","colorHint":null}]},"slots":["dialogOverlay","dialogContent"],"sourceFile":"src/components/overlay/Dialog.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/dialog"},{"category":"overlay","name":"drawer","title":"Drawer","description":"Mobile-friendly bottom sheet with drag-to-dismiss handle (vaul-based).","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/overlay/Drawer.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/drawer"},{"category":"overlay","name":"dropdownMenu","title":"Dropdown Menu","description":"Displays a menu to the user—such as a set of actions or functions—triggered by a button.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[180px] rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[180px] rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["dropdownMenuLabel","dropdownMenuSeparator","dropdownMenuItem"],"sourceFile":"src/components/overlay/DropdownMenu.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/dropdown-menu"},{"category":"overlay","name":"floatingPanel","title":"Floating Panel","description":"Animated floating container for transient UI surfaces.","variants":{"keys":["glass"],"default":"glass"},"styling":{"baseClasses":"flex flex-col w-[360px] rounded-2xl border","baseColorHint":"fill=#ffffffcc | stroke=#dddddd@1px","perVariant":[{"key":"glass","classes":"flex flex-col w-[360px] rounded-2xl border","colorHint":"fill=#ffffffcc | stroke=#dddddd@1px"}]},"slots":["floatingPanelTitleBar","floatingPanelContent"],"sourceFile":"src/components/overlay/FloatingPanel.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/floating-panel"},{"category":"overlay","name":"hoverCard","title":"HoverCard","description":"Rich hover content with compact profile-like layout.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-[256px] p-4 gap-2 rounded-md border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col items-center w-[256px] p-4 gap-2 rounded-md border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["hoverCardHeader"],"sourceFile":"src/components/overlay/HoverCard.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/hover-card"},{"category":"overlay","name":"mediaLightbox","title":"MediaLightbox","description":"Full-screen media preview dialog with navigation, zoom controls, and asset actions.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/overlay/MediaLightbox.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/media-lightbox"},{"category":"overlay","name":"mediaPickerDialog","title":"MediaPickerDialog","description":"Media selection dialog with search, AssetGrid rendering, single-select and multi-select confirmation flows.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/overlay/MediaPickerDialog.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/media-picker-dialog"},{"category":"overlay","name":"modal","title":"Modal","description":"Dialog surface with header, content, and optional footer actions.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[448px] rounded-lg border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[448px] rounded-lg border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["modalHeader","modalContent","modalFooter"],"sourceFile":"src/components/overlay/Modal.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/modal"},{"category":"overlay","name":"onboardingFlow","title":"OnboardingFlow","description":"Multi-step guided flow with step indicator, content, and Back/Continue actions.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/overlay/OnboardingFlow.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/onboarding-flow"},{"category":"overlay","name":"popover","title":"Popover","description":"Displays rich content in a portal, triggered by a button.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[288px] p-4 rounded-lg border","baseColorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[288px] p-4 rounded-lg border","colorHint":"fill=#FFFFFF | stroke=#e2e8f0@1px"}]},"slots":["popoverContentText","popoverMetaText"],"sourceFile":"src/components/overlay/Popover.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/popover"},{"category":"overlay","name":"shareModal","title":"Share Modal","description":"Dialog for toggling public access and copying shareable URLs.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[448px] rounded-xl border","baseColorHint":"fill=#ffffff | stroke=#e5e7eb@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[448px] rounded-xl border","colorHint":"fill=#ffffff | stroke=#e5e7eb@1px"}]},"slots":["shareModalHeader","shareModalContent"],"sourceFile":"src/components/overlay/ShareModal.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/share-modal"},{"category":"overlay","name":"sheet","title":"Sheet","description":"Side panel variant with overlay, heading, and action area.","variants":{"keys":["right"],"default":"right"},"styling":{"baseClasses":"flex flex-col w-[384px]","baseColorHint":null,"perVariant":[{"key":"right","classes":"flex flex-col w-[384px]","colorHint":null}]},"slots":["sheetOverlay","sheetContent"],"sourceFile":"src/components/overlay/Sheet.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/sheet"},{"category":"overlay","name":"tooltip","title":"Tooltip","description":"Compact helper text bubble for hover and focus states.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[168px] py-1.5 px-3 rounded-md border","baseColorHint":"fill=#ffffff | stroke=#e2e8f0@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[168px] py-1.5 px-3 rounded-md border","colorHint":"fill=#ffffff | stroke=#e2e8f0@1px"}]},"slots":["tooltipText","tooltipHintText"],"sourceFile":"src/components/overlay/Tooltip.tsx","specSource":"design/overlay.pen","docsUrl":"https://gunjo.dev/docs/components/tooltip"},{"category":"layout","name":"aspectRatio","title":"AspectRatio","description":"Maintains a fixed aspect ratio for media containers (image, video, iframe).","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/AspectRatio.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/aspect-ratio"},{"category":"layout","name":"assetInspectorPanel","title":"AssetInspectorPanel","description":"Media library inspector panel for asset preview, title and note fields, tag editing, metadata rows, and asset actions.","variants":{"keys":["default","compact"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"compact","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/layout/AssetInspectorPanel.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/asset-inspector-panel"},{"category":"layout","name":"cluster","title":"Cluster","description":"Wrapping flex layout — items flow horizontally and wrap onto new lines.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/Cluster.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/cluster"},{"category":"layout","name":"collapsiblePanelToggle","title":"CollapsiblePanelToggle","description":"Boundary control for opening and closing a collapsible panel from the left, right, top, or bottom edge.","variants":{"keys":["left","right","top","bottom"],"default":"left"},"styling":{"baseClasses":"w-10 h-10","baseColorHint":null,"perVariant":[{"key":"left","classes":"w-10 h-10","colorHint":null},{"key":"right","classes":"w-10 h-10","colorHint":null},{"key":"top","classes":"w-10 h-10","colorHint":null},{"key":"bottom","classes":"w-10 h-10","colorHint":null}]},"slots":[],"sourceFile":"src/components/layout/CollapsiblePanelToggle.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/collapsible-panel-toggle"},{"category":"layout","name":"container","title":"Container","description":"Max-width + horizontal padding wrapper for page content.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/Container.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/container"},{"category":"layout","name":"deviceFrame","title":"DeviceFrame","description":"Browser chrome frame with URL entry, visual chrome variants, and desktop, tablet, and mobile viewport controls for interactive pattern previews.","variants":{"keys":["default","windows11"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"windows11","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/layout/DeviceFrame.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/device-frame"},{"category":"layout","name":"grid","title":"Grid","description":"CSS grid wrapper with cols, gap, and minItemWidth props.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/Grid.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/grid"},{"category":"layout","name":"hStack","title":"HStack","description":"Horizontal flex layout with gap, align, and justify props.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/HStack.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/h-stack"},{"category":"layout","name":"inspectorPanel","title":"Inspector Panel","description":"Structured side panel for detailed property editing.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] h-[420px] border","baseColorHint":"fill=#ffffff | stroke=#e5e7eb@1px","perVariant":[{"key":"default","classes":"flex flex-col w-[320px] h-[420px] border","colorHint":"fill=#ffffff | stroke=#e5e7eb@1px"}]},"slots":["inspectorPanelHeader","inspectorPanelBody"],"sourceFile":"src/components/layout/InspectorPanel.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/inspector-panel"},{"category":"layout","name":"marqueeFrame","title":"MarqueeFrame","description":"Scaled fake-browser viewport wrapper for marquee pattern pages. It keeps pattern content and overlays scoped to the active preview viewport.","variants":{"keys":["default","desktop","tablet","mobile"],"default":"default"},"styling":{"baseClasses":"w-full p-0","baseColorHint":null,"perVariant":[{"key":"default","classes":"w-full p-0","colorHint":null},{"key":"desktop","classes":"w-full p-0","colorHint":null},{"key":"tablet","classes":"w-full p-0","colorHint":null},{"key":"mobile","classes":"w-full p-0","colorHint":null}]},"slots":[],"sourceFile":"src/components/layout/MarqueeFrame.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/marquee-frame"},{"category":"layout","name":"resizable","title":"Resizable","description":"Pane group with draggable handle and optional grip indicator.","variants":{"keys":["horizontal"],"default":"horizontal"},"styling":{"baseClasses":"flex flex-col w-[520px] h-[240px]","baseColorHint":null,"perVariant":[{"key":"horizontal","classes":"flex flex-col w-[520px] h-[240px]","colorHint":null}]},"slots":["resizablePanelGroup","resizableHandle"],"sourceFile":"src/components/layout/Resizable.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/resizable"},{"category":"layout","name":"scrollArea","title":"ScrollArea","description":"Custom scrollbar container with viewport and thumb controls.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[320px] h-[240px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[320px] h-[240px]","colorHint":null}]},"slots":["scrollAreaViewport","scrollAreaScrollbar"],"sourceFile":"src/components/layout/ScrollArea.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/scroll-area"},{"category":"layout","name":"spatialCanvas","title":"Spatial Canvas","description":"Large grid-based interaction surface for node and layout editing.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[640px] h-[360px]","baseColorHint":"fill=#f9fafb","perVariant":[{"key":"default","classes":"flex flex-col w-[640px] h-[360px]","colorHint":"fill=#f9fafb"}]},"slots":["spatialCanvasHint","spatialCanvasHintDetail"],"sourceFile":"src/components/layout/SpatialCanvas.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/spatial-canvas"},{"category":"layout","name":"vStack","title":"VStack","description":"Vertical flex layout with gap, align, and justify props.","variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/layout/VStack.tsx","specSource":"design/layout.pen","docsUrl":"https://gunjo.dev/docs/components/v-stack"},{"category":"patterns","name":"authTemplate","title":"Auth Template","description":"Split authentication layout with branded panel and centered form.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":null}]},"slots":["authTemplateVisualPanel","authTemplateFormPanel"],"sourceFile":"src/components/patterns/AuthTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/auth-template"},{"category":"patterns","name":"bannalyzeTemplate","title":"Bannalyze Template","description":"Three-region analysis workspace with center canvas and side inspectors.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":"fill=#ffffff","perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":"fill=#ffffff"}]},"slots":["bannalyzeTemplateHeader","bannalyzeTemplateBody"],"sourceFile":"src/components/patterns/BannalyzeTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/bannalyze-template"},{"category":"patterns","name":"blogTemplate","title":"blogTemplate","description":null,"variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/patterns/BlogTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/blog-template"},{"category":"patterns","name":"chatTemplate","title":"Chat Template","description":"Conversation layout with channel rail, message area, and detail pane.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":"fill=#ffffff","perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":"fill=#ffffff"}]},"slots":["chatTemplateSidebarList","chatTemplateMainArea","chatTemplateSidebarDetail"],"sourceFile":"src/components/patterns/ChatTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/chat-template"},{"category":"patterns","name":"dashboardTemplate","title":"Dashboard Template","description":"Two-column dashboard shell with optional header and sidebar.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":null}]},"slots":["dashboardTemplateHeader","dashboardTemplateBody"],"sourceFile":"src/components/patterns/DashboardTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/dashboard-template"},{"category":"patterns","name":"docsTemplate","title":"docsTemplate","description":null,"variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/patterns/DocsTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/docs-template"},{"category":"patterns","name":"editorTemplate","title":"Editor Template","description":"Panel-based editing layout with top bar and side docks.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":null}]},"slots":["editorTemplateTopBar","editorTemplateBody"],"sourceFile":"src/components/patterns/EditorTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/editor-template"},{"category":"patterns","name":"kanbanTemplate","title":"Kanban Template","description":"Board workflow shell with optional sidebar and horizontal columns.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":null}]},"slots":["kanbanTemplateSidebar","kanbanTemplateMain"],"sourceFile":"src/components/patterns/KanbanTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/kanban-template"},{"category":"patterns","name":"landingTemplate","title":"Landing Template","description":"Marketing page skeleton with sticky header and section rhythm.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":null}]},"slots":["landingTemplateHeader","landingTemplateHero","landingTemplateFeatureSection"],"sourceFile":"src/components/patterns/LandingTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/landing-template"},{"category":"patterns","name":"mediaLibraryTemplate","title":"Media Library Template","description":"Asset management workspace with folders, grid area, and details pane.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col w-[1280px] h-[720px]","baseColorHint":"fill=#ffffff","perVariant":[{"key":"default","classes":"flex flex-col w-[1280px] h-[720px]","colorHint":"fill=#ffffff"}]},"slots":["mediaLibraryTemplateHeader","mediaLibraryTemplateBody"],"sourceFile":"src/components/patterns/MediaLibraryTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/media-library-template"},{"category":"patterns","name":"onboardingTemplate","title":"onboardingTemplate","description":null,"variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/patterns/OnboardingTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/onboarding-template"},{"category":"patterns","name":"pricingTemplate","title":"pricingTemplate","description":null,"variants":{"keys":[],"default":null},"styling":{"baseClasses":"","baseColorHint":null,"perVariant":[]},"slots":[],"sourceFile":"src/components/patterns/PricingTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/pricing-template"},{"category":"patterns","name":"settingsTemplate","title":"Settings Template","description":"Responsive settings layout with mobile stack and desktop split view.","variants":{"keys":["default"],"default":"default"},"styling":{"baseClasses":"flex flex-col items-center w-[1280px] h-[720px] gap-4","baseColorHint":null,"perVariant":[{"key":"default","classes":"flex flex-col items-center w-[1280px] h-[720px] gap-4","colorHint":null}]},"slots":["settingsTemplateMobileView","settingsTemplateDesktopView"],"sourceFile":"src/components/patterns/SettingsTemplate.tsx","specSource":"design/patterns.pen","docsUrl":"https://gunjo.dev/docs/components/settings-template"}]}