@hanzo/ui 8.27.90 → 8.28.0

package/dist/gallery/compound.cjs

@@ -0,0 +1,60 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Compound = Compound;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's compound controls in the gallery: grouped buttons and the
+ * Button axes they hand down, every tone on every variant that takes one, the
+ * loading positions — regular and compact. A module of the one gallery
+ * (`gallery/records.tsx` renders it), so the stylesheet generator, the render
+ * test and the consumer screenshots see these as they see everything else.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const button_group_1 = require("../backends/gui/button-group.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const number_field_1 = require("../backends/gui/number-field.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const input_group_1 = require("../backends/gui/input-group.cjs");
+const currency_picker_1 = require("../backends/gui/currency-picker.cjs");
+const phone_country_picker_1 = require("../backends/gui/phone-country-picker.cjs");
+const country_select_1 = require("../backends/gui/country-select.cjs");
+const PrimaryButton_1 = require("../product/PrimaryButton.cjs");
+const Filters_1 = require("../product/Filters.cjs");
+const image_input_1 = require("../backends/gui/image-input.cjs");
+const ComboBox_1 = require("../product/ComboBox.cjs");
+const NOOP = () => { };
+/** Sample data: the pickers are data-free, so the gallery brings its own. */
+const CURRENCIES = [
+    { code: 'USD', name: 'US Dollar', symbol: '$' },
+    { code: 'EUR', name: 'Euro', symbol: '€' },
+    { code: 'GBP', name: 'British Pound', symbol: '£' },
+    { code: 'JPY', name: 'Japanese Yen', symbol: '¥', disabled: true },
+];
+const PHONES = [
+    { value: 'US', label: 'United States', callingCode: '1' },
+    { value: 'FR', label: 'France', callingCode: '33' },
+    { value: 'DE', label: 'Germany', callingCode: '49' },
+];
+const COUNTRIES = [
+    { value: 'FR', label: 'France' },
+    { value: 'DE', label: 'Germany' },
+    { value: 'GB', label: 'United Kingdom of Great Britain and Northern Ireland' },
+];
+const TONES = ['accent', 'danger', 'success'];
+/** The variants a tone restates: outline-shaped, ghost, soft and solid. */
+const TONED = ['default', 'outline', 'ghost', 'secondary', 'primary'];
+function Compound() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-group", children: [(0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { "aria-label": "Update view", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon", "aria-label": "More update options", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }) })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { attached: false, "aria-label": "Unattached", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Day" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Week" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", children: "Month" })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { framed: true, attached: false, size: "icon-2xs", variant: "ghost", "aria-label": "Zoom", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": "Zoom out", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": "Zoom in", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}) })] }), (0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { framed: true, size: "xs", variant: "ghost", "aria-label": "Cell actions", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Open" }), (0, jsx_runtime_1.jsx)(button_1.Button, { children: "Copy" })] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-tone", children: [TONES.flatMap((tone) => TONED.map((variant) => ((0, jsx_runtime_1.jsx)(button_1.Button, { tone: tone, variant: variant, size: "sm", children: `${tone} ${variant}` }, `${tone}-${variant}`)))), (0, jsx_runtime_1.jsx)(button_1.Button, { tone: "danger", variant: "ghost", size: "icon-xs", "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, {}) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-state", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", shortcut: ['Mod', 'Enter'], children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "ghost", shortcut: [['G'], ['P']], children: "Go to people" }), (0, jsx_runtime_1.jsx)(button_1.Button, { isLoading: true, loadingPosition: "center", children: "Saving" }), (0, jsx_runtime_1.jsx)(button_1.Button, { isLoading: true, loadingPosition: "end", variant: "outline", children: "Saving" }), (0, jsx_runtime_1.jsx)(button_1.Button, { elevated: true, children: "Continue" }), (0, jsx_runtime_1.jsx)(button_1.Button, { elevated: true, variant: "primary", children: "Continue" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", shape: "round", "aria-label": "Add", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, focusableWhenDisabled: true, onPress: NOOP, children: "Merge" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", variant: "ghost", tooltip: "Close side panel", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { fullWidth: true, variant: "outline", children: "Full width" }), (0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { children: "Get started" }), (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "number-field", children: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Amount", defaultValue: 1234.5, locale: "en-US" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Seats", defaultValue: 2, min: 1, max: 150, buttons: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Decimals", size: "sm", defaultValue: 2, min: 0, max: 100, buttons: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Limit", size: "xs", defaultValue: 10, buttons: true, readOnly: true }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Rate", size: "sm", defaultValue: 0.25, format: { style: 'percent' } }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Invalid", size: "sm", defaultValue: 3, "aria-invalid": true })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "pickers", children: [(0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "USD" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Amount", defaultValue: 1200 })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Amount, no currency", placeholder: "0.00" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(phone_country_picker_1.PhoneCountryPicker, { countries: PHONES, defaultValue: "FR" }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Phone number", placeholder: "6 12 34 56 78" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "xs", children: [(0, jsx_runtime_1.jsx)(phone_country_picker_1.PhoneCountryPicker, { countries: PHONES }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Phone number, no country", placeholder: "Number" })] }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "EUR", disabled: true }), (0, jsx_runtime_1.jsx)(input_1.Input, { "aria-label": "Disabled amount", disabled: true, placeholder: "0.00" })] }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, defaultValue: "GB", label: "Country" }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, size: "sm", "aria-label": "Country, none" }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: [], size: "xs", "aria-label": "Country, empty" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "segmented", children: [(0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", "aria-label": "When", options: [
+                            { label: 'Send now', value: 'now' },
+                            { label: 'Schedule', value: 'later' },
+                        ], value: "now", onChange: NOOP }), (0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", trackSize: "sm", itemWidth: "content", "aria-label": "Layout", options: [
+                            { label: '', value: 'table', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Rows3, { size: 16 }), 'aria-label': 'Table' },
+                            { label: '', value: 'kanban', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Columns3, { size: 16 }), 'aria-label': 'Kanban' },
+                        ], value: "kanban", onChange: NOOP }), (0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", disabled: true, "aria-label": "Disabled choice", options: [
+                            { label: 'Left', value: 'l' },
+                            { label: 'Right', value: 'r' },
+                        ], value: "l", onChange: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "image-input", children: [(0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Logo", helperText: "PNG or JPG, up to 2MB" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Photo", src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", alt: "" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Uploading", isUploading: true }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Broken", errorMessage: "That file is too large" }), (0, jsx_runtime_1.jsx)(image_input_1.ImageInput, { title: "Off", disabled: true })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-group-compact", children: [(0, jsx_runtime_1.jsxs)(button_group_1.ButtonGroup, { "aria-label": "Update view, compact", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-sm", "aria-label": "More update options", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14 }) })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { tone: "danger", variant: "outline", children: "Delete" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Compact amount", defaultValue: 42, buttons: true }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(currency_picker_1.CurrencyPicker, { currencies: CURRENCIES, defaultValue: "GBP" }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField, { "aria-label": "Compact grouped amount", defaultValue: 99 })] }), (0, jsx_runtime_1.jsx)(country_select_1.CountrySelect, { countries: COUNTRIES, defaultValue: "DE", "aria-label": "Compact country" }), (0, jsx_runtime_1.jsx)(PrimaryButton_1.PrimaryButton, { children: "Continue" }), (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }) })] }));
+}

package/dist/gallery/compound.d.ts

@@ -0,0 +1,2 @@
+export declare function Compound(): import("react").JSX.Element;
+//# sourceMappingURL=compound.d.ts.map

package/dist/gallery/compound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.d.ts","sourceRoot":"","sources":["../../src/gallery/compound.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,QAAQ,gCAiLvB"}

package/dist/gallery/compound.js

@@ -0,0 +1,58 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's compound controls in the gallery: grouped buttons and the
+ * Button axes they hand down, every tone on every variant that takes one, the
+ * loading positions — regular and compact. A module of the one gallery
+ * (`gallery/records.tsx` renders it), so the stylesheet generator, the render
+ * test and the consumer screenshots see these as they see everything else.
+ */
+import { ChevronDown, Columns3, Minus, Plus, Rows3, Trash2 } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Button } from '../backends/gui/button.js';
+import { ButtonGroup } from '../backends/gui/button-group.js';
+import { Density } from '../backends/gui/density.js';
+import { NumberField } from '../backends/gui/number-field.js';
+import { Input } from '../backends/gui/input.js';
+import { InputGroup } from '../backends/gui/input-group.js';
+import { CurrencyPicker } from '../backends/gui/currency-picker.js';
+import { PhoneCountryPicker } from '../backends/gui/phone-country-picker.js';
+import { CountrySelect } from '../backends/gui/country-select.js';
+import { PrimaryButton } from '../product/PrimaryButton.js';
+import { Segmented } from '../product/Filters.js';
+import { ImageInput } from '../backends/gui/image-input.js';
+import { ComboBox } from '../product/ComboBox.js';
+const NOOP = () => { };
+/** Sample data: the pickers are data-free, so the gallery brings its own. */
+const CURRENCIES = [
+    { code: 'USD', name: 'US Dollar', symbol: '$' },
+    { code: 'EUR', name: 'Euro', symbol: '€' },
+    { code: 'GBP', name: 'British Pound', symbol: '£' },
+    { code: 'JPY', name: 'Japanese Yen', symbol: '¥', disabled: true },
+];
+const PHONES = [
+    { value: 'US', label: 'United States', callingCode: '1' },
+    { value: 'FR', label: 'France', callingCode: '33' },
+    { value: 'DE', label: 'Germany', callingCode: '49' },
+];
+const COUNTRIES = [
+    { value: 'FR', label: 'France' },
+    { value: 'DE', label: 'Germany' },
+    { value: 'GB', label: 'United Kingdom of Great Britain and Northern Ireland' },
+];
+const TONES = ['accent', 'danger', 'success'];
+/** The variants a tone restates: outline-shaped, ghost, soft and solid. */
+const TONED = ['default', 'outline', 'ghost', 'secondary', 'primary'];
+export function Compound() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "button-group", children: [_jsxs(ButtonGroup, { "aria-label": "Update view", children: [_jsx(Button, { children: "Update view" }), _jsx(Button, { size: "icon", "aria-label": "More update options", children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(ButtonGroup, { attached: false, "aria-label": "Unattached", children: [_jsx(Button, { size: "sm", children: "Day" }), _jsx(Button, { size: "sm", children: "Week" }), _jsx(Button, { size: "sm", children: "Month" })] }), _jsxs(ButtonGroup, { framed: true, attached: false, size: "icon-2xs", variant: "ghost", "aria-label": "Zoom", children: [_jsx(Button, { "aria-label": "Zoom out", children: _jsx(Minus, {}) }), _jsx(Button, { "aria-label": "Zoom in", children: _jsx(Plus, {}) })] }), _jsxs(ButtonGroup, { framed: true, size: "xs", variant: "ghost", "aria-label": "Cell actions", children: [_jsx(Button, { children: "Open" }), _jsx(Button, { children: "Copy" })] })] }), _jsxs(Section, { name: "button-tone", children: [TONES.flatMap((tone) => TONED.map((variant) => (_jsx(Button, { tone: tone, variant: variant, size: "sm", children: `${tone} ${variant}` }, `${tone}-${variant}`)))), _jsx(Button, { tone: "danger", variant: "ghost", size: "icon-xs", "aria-label": "Delete", children: _jsx(Trash2, {}) })] }), _jsxs(Section, { name: "button-state", children: [_jsx(Button, { size: "sm", shortcut: ['Mod', 'Enter'], children: "Update view" }), _jsx(Button, { size: "sm", variant: "ghost", shortcut: [['G'], ['P']], children: "Go to people" }), _jsx(Button, { isLoading: true, loadingPosition: "center", children: "Saving" }), _jsx(Button, { isLoading: true, loadingPosition: "end", variant: "outline", children: "Saving" }), _jsx(Button, { elevated: true, children: "Continue" }), _jsx(Button, { elevated: true, variant: "primary", children: "Continue" }), _jsx(Button, { size: "icon-sm", shape: "round", "aria-label": "Add", children: _jsx(Plus, { size: 16 }) }), _jsx(Button, { disabled: true, focusableWhenDisabled: true, onPress: NOOP, children: "Merge" }), _jsx(Button, { size: "icon-sm", variant: "ghost", tooltip: "Close side panel", children: _jsx(Minus, { size: 16 }) }), _jsx(Button, { fullWidth: true, variant: "outline", children: "Full width" }), _jsx(PrimaryButton, { children: "Get started" }), _jsx(ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }), _jsxs(Section, { name: "number-field", children: [_jsx(NumberField, { "aria-label": "Amount", defaultValue: 1234.5, locale: "en-US" }), _jsx(NumberField, { "aria-label": "Seats", defaultValue: 2, min: 1, max: 150, buttons: true }), _jsx(NumberField, { "aria-label": "Decimals", size: "sm", defaultValue: 2, min: 0, max: 100, buttons: true }), _jsx(NumberField, { "aria-label": "Limit", size: "xs", defaultValue: 10, buttons: true, readOnly: true }), _jsx(NumberField, { "aria-label": "Rate", size: "sm", defaultValue: 0.25, format: { style: 'percent' } }), _jsx(NumberField, { "aria-label": "Invalid", size: "sm", defaultValue: 3, "aria-invalid": true })] }), _jsxs(Section, { name: "pickers", children: [_jsxs(InputGroup, { children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "USD" }), _jsx(NumberField, { "aria-label": "Amount", defaultValue: 1200 })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(CurrencyPicker, { currencies: CURRENCIES }), _jsx(Input, { "aria-label": "Amount, no currency", placeholder: "0.00" })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(PhoneCountryPicker, { countries: PHONES, defaultValue: "FR" }), _jsx(Input, { "aria-label": "Phone number", placeholder: "6 12 34 56 78" })] }), _jsxs(InputGroup, { size: "xs", children: [_jsx(PhoneCountryPicker, { countries: PHONES }), _jsx(Input, { "aria-label": "Phone number, no country", placeholder: "Number" })] }), _jsxs(InputGroup, { size: "sm", children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "EUR", disabled: true }), _jsx(Input, { "aria-label": "Disabled amount", disabled: true, placeholder: "0.00" })] }), _jsx(CountrySelect, { countries: COUNTRIES, defaultValue: "GB", label: "Country" }), _jsx(CountrySelect, { countries: COUNTRIES, size: "sm", "aria-label": "Country, none" }), _jsx(CountrySelect, { countries: [], size: "xs", "aria-label": "Country, empty" })] }), _jsxs(Section, { name: "segmented", children: [_jsx(Segmented, { variant: "track", "aria-label": "When", options: [
+                            { label: 'Send now', value: 'now' },
+                            { label: 'Schedule', value: 'later' },
+                        ], value: "now", onChange: NOOP }), _jsx(Segmented, { variant: "track", trackSize: "sm", itemWidth: "content", "aria-label": "Layout", options: [
+                            { label: '', value: 'table', icon: _jsx(Rows3, { size: 16 }), 'aria-label': 'Table' },
+                            { label: '', value: 'kanban', icon: _jsx(Columns3, { size: 16 }), 'aria-label': 'Kanban' },
+                        ], value: "kanban", onChange: NOOP }), _jsx(Segmented, { variant: "track", disabled: true, "aria-label": "Disabled choice", options: [
+                            { label: 'Left', value: 'l' },
+                            { label: 'Right', value: 'r' },
+                        ], value: "l", onChange: NOOP })] }), _jsxs(Section, { name: "image-input", children: [_jsx(ImageInput, { title: "Logo", helperText: "PNG or JPG, up to 2MB" }), _jsx(ImageInput, { title: "Photo", src: "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", alt: "" }), _jsx(ImageInput, { title: "Uploading", isUploading: true }), _jsx(ImageInput, { title: "Broken", errorMessage: "That file is too large" }), _jsx(ImageInput, { title: "Off", disabled: true })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "button-group-compact", children: [_jsxs(ButtonGroup, { "aria-label": "Update view, compact", children: [_jsx(Button, { children: "Update view" }), _jsx(Button, { size: "icon-sm", "aria-label": "More update options", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx(Button, { tone: "danger", variant: "outline", children: "Delete" }), _jsx(NumberField, { "aria-label": "Compact amount", defaultValue: 42, buttons: true }), _jsxs(InputGroup, { children: [_jsx(CurrencyPicker, { currencies: CURRENCIES, defaultValue: "GBP" }), _jsx(NumberField, { "aria-label": "Compact grouped amount", defaultValue: 99 })] }), _jsx(CountrySelect, { countries: COUNTRIES, defaultValue: "DE", "aria-label": "Compact country" }), _jsx(PrimaryButton, { children: "Continue" }), _jsx(ComboBox, { value: "", onChange: NOOP, options: [{ value: 'kai-1' }, { value: 'enso-flash' }], placeholder: "Model" })] }) })] }));
+}
+//# sourceMappingURL=compound.js.map

package/dist/gallery/compound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.js","sourceRoot":"","sources":["../../src/gallery/compound.tsx"],"names":[],"mappings":"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"}

package/dist/gallery/display.cjs

@@ -0,0 +1,47 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Display = Display;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's display parts in the gallery — tags in every hue, chips,
+ * avatars, keycaps, counts, statuses, tiles and swatches — so the sheet holds
+ * every rule they render, and the browser suites see them in both themes.
+ * twenty-ui's data-display parts (MIT, NOTICE), regular and compact.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const data_1 = require("@hanzo/tokens/data");
+const section_1 = require("./section.cjs");
+const tag_1 = require("../backends/gui/tag.cjs");
+const tags_1 = require("../backends/gui/tags.cjs");
+const chip_1 = require("../backends/gui/chip.cjs");
+const truncated_text_1 = require("../backends/gui/truncated-text.cjs");
+const avatar_1 = require("../backends/gui/avatar.cjs");
+const avatar_group_1 = require("../backends/gui/avatar-group.cjs");
+const shortcut_1 = require("../backends/gui/shortcut.cjs");
+const kbd_1 = require("../backends/gui/kbd.cjs");
+const overflowing_list_1 = require("../backends/gui/overflowing-list.cjs");
+const badge_1 = require("../backends/gui/badge.cjs");
+const status_1 = require("../backends/gui/status.cjs");
+const icon_tile_1 = require("../backends/gui/icon-tile.cjs");
+const color_sample_1 = require("../backends/gui/color-sample.cjs");
+const stack_icon_1 = require("../backends/gui/stack-icon.cjs");
+const heading_1 = require("../backends/gui/heading.cjs");
+const label_1 = require("../backends/gui/label.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const motion_1 = require("../motion.cjs");
+const NOOP = () => { };
+const ALL = [...data_1.hues, ...data_1.neutrals];
+const TAG_VARIANTS = ['soft', 'solid', 'outline', 'ghost'];
+const CHIP_VARIANTS = ['ghost', 'soft', 'solid'];
+const AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
+const BADGE_SIZES = ['xs', 'sm', 'md'];
+const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
+function Parts() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "tag", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", variant: variant, weight: "medium", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}), children: variant }, variant))), (0, jsx_runtime_1.jsx)(tag_1.Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "transparent", children: "transparent" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "green", onPress: NOOP, children: "pressable" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "red", disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "purple", maxW: 96, children: "A tag whose label is far too long for it" }), (0, jsx_runtime_1.jsx)(tags_1.Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), (0, jsx_runtime_1.jsx)(chip_1.Chip, { size: "md", label: "Acme", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { weight: "medium", label: "Medium" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Not shared", startElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Lock, { size: 14 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "With end", endElementDivider: true, endElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Disabled", disabled: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "truncated-text", children: [(0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: shape, name: shape }, shape))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Ring", ring: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Pulsing", pulsing: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), data_1.hues.map((hue) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-group", children: [(0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "shortcut", children: [(0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "other" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: [['G'], ['P']] }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Escape'], visibility: "desktop" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { variant: "cap", children: "\u2318" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "overflowing-list", children: [(0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: data_1.hues[i * 3], children: t }, t))) }), (0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { label: e, variant: "soft" }, e))) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(badge_1.Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "secondary", children: "Soon" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "md", variant: "accent", children: "New" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "inherit", children: "4" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "teal", loading: true, children: "Importing" }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "icon-tile", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { color: hue, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}) }, hue))), (0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(stack_icon_1.StackIcon, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }), stackedIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 10 }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "color-sample", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: hue }, hue))), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: "blue", variant: "circle" }), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { color: "#3e63dd", variant: "circle" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "heading-label", children: [(0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$2", tone: "primary", children: "Section title" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$1", tone: "secondary", children: "Group header" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section", children: "Favorites" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section-sm", children: "Workspace" }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: true, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size: 14 }) }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: false, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }) })] })] }));
+}
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+function Display() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Parts, {}), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "display-compact", children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "amber", children: "compact tag" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "compact chip", variant: "soft", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", name: "Compact" }) }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", children: "compact status" })] }) })] }));
+}

package/dist/gallery/display.d.ts

@@ -0,0 +1,3 @@
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+export declare function Display(): import("react").JSX.Element;
+//# sourceMappingURL=display.d.ts.map

package/dist/gallery/display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/gallery/display.tsx"],"names":[],"mappings":"AAmOA,sFAAsF;AACtF,wBAAgB,OAAO,gCAatB"}

package/dist/gallery/display.js

@@ -0,0 +1,45 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's display parts in the gallery — tags in every hue, chips,
+ * avatars, keycaps, counts, statuses, tiles and swatches — so the sheet holds
+ * every rule they render, and the browser suites see them in both themes.
+ * twenty-ui's data-display parts (MIT, NOTICE), regular and compact.
+ */
+import { Building2, Heart, Lock, Pencil, Plus, User, X } from '@hanzogui/lucide-icons-2';
+import { hues, neutrals } from '@hanzo/tokens/data';
+import { Section } from './section.js';
+import { Tag } from '../backends/gui/tag.js';
+import { Tags } from '../backends/gui/tags.js';
+import { Chip } from '../backends/gui/chip.js';
+import { TruncatedText } from '../backends/gui/truncated-text.js';
+import { Avatar } from '../backends/gui/avatar.js';
+import { AvatarGroup } from '../backends/gui/avatar-group.js';
+import { Shortcut } from '../backends/gui/shortcut.js';
+import { Kbd } from '../backends/gui/kbd.js';
+import { OverflowingList } from '../backends/gui/overflowing-list.js';
+import { Badge } from '../backends/gui/badge.js';
+import { Status } from '../backends/gui/status.js';
+import { IconTile } from '../backends/gui/icon-tile.js';
+import { ColorSample } from '../backends/gui/color-sample.js';
+import { StackIcon } from '../backends/gui/stack-icon.js';
+import { Heading } from '../backends/gui/heading.js';
+import { Label } from '../backends/gui/label.js';
+import { Density } from '../backends/gui/density.js';
+import { Crossfade } from '../motion.js';
+const NOOP = () => { };
+const ALL = [...hues, ...neutrals];
+const TAG_VARIANTS = ['soft', 'solid', 'outline', 'ghost'];
+const CHIP_VARIANTS = ['ghost', 'soft', 'solid'];
+const AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
+const BADGE_SIZES = ['xs', 'sm', 'md'];
+const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
+function Parts() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "tag", children: [ALL.map((hue) => (_jsx(Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => (_jsx(Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => (_jsx(Tag, { color: "blue", variant: variant, weight: "medium", startIcon: _jsx(Building2, {}), children: variant }, variant))), _jsx(Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), _jsx(Tag, { color: "transparent", children: "transparent" }), _jsx(Tag, { color: "green", onPress: NOOP, children: "pressable" }), _jsx(Tag, { color: "red", disabled: true, children: "disabled" }), _jsx(Tag, { color: "purple", maxW: 96, children: "A tag whose label is far too long for it" }), _jsx(Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), _jsxs(Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), _jsx(Chip, { size: "md", label: "Acme", startElement: _jsx(Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), _jsx(Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), _jsx(Chip, { weight: "medium", label: "Medium" }), _jsx(Chip, { label: "Not shared", startElement: _jsx(Lock, { size: 14 }), variant: "soft" }), _jsx(Chip, { label: "With end", endElementDivider: true, endElement: _jsx(X, { size: 12 }), variant: "soft" }), _jsx(Chip, { label: "Disabled", disabled: true, onPress: NOOP }), _jsx(Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), _jsx(Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), _jsxs(Section, { name: "truncated-text", children: [_jsx(TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), _jsxs(Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => (_jsx(Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => (_jsx(Avatar, { size: "lg", shape: shape, name: shape }, shape))), _jsx(Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), _jsx(Avatar, { size: "lg", icon: _jsx(User, {}) }), _jsx(Avatar, { size: "lg", name: "" }), _jsx(Avatar, { size: "lg", name: "Ring", ring: true }), _jsx(Avatar, { size: "lg", name: "Pulsing", pulsing: true }), _jsx(Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), hues.map((hue) => (_jsx(Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), _jsxs(Section, { name: "avatar-group", children: [_jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), _jsx(AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => _jsx(Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), _jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), _jsxs(Section, { name: "shortcut", children: [_jsx(Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'K'], platform: "other" }), _jsx(Shortcut, { keys: [['G'], ['P']] }), _jsx(Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), _jsx(Shortcut, { keys: ['Escape'], visibility: "desktop" }), _jsx(Kbd, { variant: "cap", children: "\u2318" })] }), _jsxs(Section, { name: "overflowing-list", children: [_jsx(OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => (_jsx(Tag, { color: hues[i * 3], children: t }, t))) }), _jsx(OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => (_jsx(Chip, { label: e, variant: "soft" }, e))) })] }), _jsxs(Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => (_jsx(Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), _jsx(Badge, { size: "sm", variant: "secondary", children: "Soon" }), _jsx(Badge, { size: "md", variant: "accent", children: "New" }), _jsx(Badge, { size: "sm", variant: "inherit", children: "4" }), _jsx(Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), _jsxs(Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => (_jsx(Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => (_jsx(Status, { color: c, children: c }, c))), _jsx(Status, { color: "teal", loading: true, children: "Importing" }), _jsx(Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), _jsxs(Section, { name: "icon-tile", children: [ALL.map((hue) => (_jsx(IconTile, { color: hue, icon: _jsx(Building2, {}) }, hue))), _jsx(IconTile, { icon: _jsx(User, {}) }), _jsx(StackIcon, { icon: _jsx(Building2, { size: 16 }), stackedIcon: _jsx(Plus, { size: 10 }) })] }), _jsxs(Section, { name: "color-sample", children: [ALL.map((hue) => (_jsx(ColorSample, { colorName: hue }, hue))), _jsx(ColorSample, { colorName: "blue", variant: "circle" }), _jsx(ColorSample, { color: "#3e63dd", variant: "circle" })] }), _jsxs(Section, { name: "heading-label", children: [_jsx(Heading, { size: "$2", tone: "primary", children: "Section title" }), _jsx(Heading, { size: "$1", tone: "secondary", children: "Group header" }), _jsx(Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), _jsx(Label, { variant: "section", children: "Favorites" }), _jsx(Label, { variant: "section-sm", children: "Workspace" }), _jsx(Crossfade, { isActive: true, activeIcon: _jsx(X, { size: 14 }), inactiveIcon: _jsx(Pencil, { size: 14 }) }), _jsx(Crossfade, { isActive: false, activeIcon: _jsx(Heart, { size: 14 }), inactiveIcon: _jsx(Heart, { size: 14 }) })] })] }));
+}
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+export function Display() {
+    return (_jsxs(_Fragment, { children: [_jsx(Parts, {}), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "display-compact", children: [_jsx(Tag, { color: "amber", children: "compact tag" }), _jsx(Chip, { label: "compact chip", variant: "soft", startElement: _jsx(Avatar, { size: "sm", name: "Compact" }) }), _jsx(Status, { color: "green", children: "compact status" })] }) })] }));
+}
+//# sourceMappingURL=display.js.map

package/dist/gallery/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../src/gallery/display.tsx"],"names":[],"mappings":"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"}

package/dist/gallery/feedback.cjs

@@ -0,0 +1,38 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = Feedback;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's feedback in the gallery: skeletons, the dot loader, both
+ * progress shapes and the ring, toasts at rest in every status, banners and
+ * callouts in every colour and layout, the boxed JSON tree, the metric row,
+ * the command block and the headed code editor (twenty-ui, MIT — NOTICE).
+ * Every variant that carries a style of its own is rendered, so its rules ship.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const skeleton_1 = require("../backends/gui/skeleton.cjs");
+const spinner_1 = require("../backends/gui/spinner.cjs");
+const progress_1 = require("../backends/gui/progress.cjs");
+const progress_ring_1 = require("../backends/gui/progress-ring.cjs");
+const toaster_1 = require("../backends/gui/toaster.cjs");
+const banner_1 = require("../backends/gui/banner.cjs");
+const alert_1 = require("../backends/gui/alert.cjs");
+const json_tree_1 = require("../backends/gui/json-tree.cjs");
+const snippet_1 = require("../backends/gui/snippet.cjs");
+const code_editor_1 = require("../backends/gui/code-editor.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const Fact_1 = require("../product/Fact.cjs");
+const NOOP = () => { };
+const RUN = {
+    trigger: { type: 'DATABASE_EVENT', object: 'person', fields: ['email', 'name'] },
+    output: { id: 'p_42', name: 'Ada Lovelace', score: 0.97, active: true, owner: null, tags: [] },
+};
+const MARK = (path) => (path === 'output.name' ? 'blue' : path === 'output.owner' ? 'red' : path === 'output' ? 'partial-blue' : null);
+function Feedback() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "skeleton-record", children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: 240, fontSize: 13 }, children: ["Loading ", (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 80 }), " records"] }), ['xs', 's', 'm', 'l', 'xl'].map((size) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { layout: "block", size: size, width: 120 }, size))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { layout: "block", width: 120, animated: false })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "loader", children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot" }), (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot", color: "var(--state-error)" }), (0, jsx_runtime_1.jsx)("div", { style: { color: 'var(--state-success)' }, children: (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot" }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "progress-record", children: [(0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 40 }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 40, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 1, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 60, variant: "line", ends: "round", track: true, size: "sm" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: null }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: null, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 40, children: "40%" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 0, size: "sm", "aria-label": "Not started" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 100, "aria-label": "Done" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: null, "aria-label": "Working" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "toast-record", children: [(0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Record created', type: 'default' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Link copied', type: 'info' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Merged 3 records', description: 'Acme, Acme Inc. and ACME', type: 'success' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: '3 of 5 files imported', type: 'warning', cancel: { label: 'Cancel', onClick: NOOP } }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Delete failed', type: 'error', action: { label: 'Retry', onClick: NOOP } }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Importing people', type: 'info', data: { progress: 60 } } }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'On a phone', type: 'success' }, phone: true })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "banner-record", children: [(0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "info", action: (0, jsx_runtime_1.jsx)(banner_1.BannerAction, { children: "Reconnect" }), children: "Your mailbox needs reconnecting." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "error", onClose: NOOP, children: "Sync failed for 2 accounts." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "neutral", children: "This is a sandbox workspace." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "success", emphasis: "soft", children: "Everything is synced." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "warning", layout: "inline", children: "This field is used by 3 workflows." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { color: "blue", layout: "inline", embedded: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Sparkles, { size: 16 }), children: "Fields can be renamed later." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "error", layout: "compact", action: (0, jsx_runtime_1.jsx)(banner_1.BannerAction, { children: "Restore" }), children: "This record was deleted." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { variant: "warning", children: "The legacy strip, unchanged." })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "callout", children: [(0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "info", title: "Code steps run in a sandbox", description: "They can read the trigger's output and the steps before them.", action: (0, jsx_runtime_1.jsx)(alert_1.CalloutAction, { children: "Learn more" }), onDismiss: NOOP }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "error", title: "This object cannot be deleted", description: "Two relations point at it." }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "success", title: "Webhook verified" }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "warning", title: "Rate limited", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Bot, { size: 16 }), fullWidth: true }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { color: "gray", title: "No description", icon: null }), (0, jsx_runtime_1.jsxs)(alert_1.Alert, { children: [(0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "The legacy alert" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: "Unchanged when no record prop is given." })] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "json-record", children: [(0, jsx_runtime_1.jsx)(json_tree_1.JsonTree, { data: RUN, variant: "boxed", depth: 3, title: "Run", getNodeHighlighting: MARK, onNodeValueClick: NOOP }), (0, jsx_runtime_1.jsx)(json_tree_1.JsonTree, { variant: "boxed", search: false, showCopyButton: false, entries: [
+                            { id: 'trigger', label: 'Trigger', value: RUN.trigger },
+                            { id: 'step1', label: 'Find person', value: '' },
+                        ] })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "metric", children: (0, jsx_runtime_1.jsxs)("div", { style: { width: 260 }, children: [(0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Context window", value: "12k / 200k", progress: 6, startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Bot, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Usage", value: "$4.20" }), (0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Indexing", value: "", progress: null })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "command-block", children: [(0, jsx_runtime_1.jsx)(snippet_1.Snippet, { variant: "command", code: 'npx hanzo mcp add\nhanzo login' }), (0, jsx_runtime_1.jsx)(snippet_1.Snippet, { variant: "command", code: "curl https://api.hanzo.ai/v1/models", actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", children: "Run" }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "code-editor-record", children: [(0, jsx_runtime_1.jsx)(code_editor_1.CodeEditor, { title: "Code step", language: "json", defaultValue: '{\n  "a": 1\n}', actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", children: "Test" }) }), (0, jsx_runtime_1.jsx)(code_editor_1.CodeEditor, { variant: "borderless", language: "javascript", defaultValue: "return input", showLanguageSelector: false, autoHeight: true })] })] }));
+}

package/dist/gallery/feedback.d.ts

@@ -0,0 +1,2 @@
+export declare function Feedback(): import("react").JSX.Element;
+//# sourceMappingURL=feedback.d.ts.map

package/dist/gallery/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../src/gallery/feedback.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,QAAQ,gCAqHvB"}

package/dist/gallery/feedback.js

@@ -0,0 +1,36 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's feedback in the gallery: skeletons, the dot loader, both
+ * progress shapes and the ring, toasts at rest in every status, banners and
+ * callouts in every colour and layout, the boxed JSON tree, the metric row,
+ * the command block and the headed code editor (twenty-ui, MIT — NOTICE).
+ * Every variant that carries a style of its own is rendered, so its rules ship.
+ */
+import { Bot, Sparkles } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Skeleton } from '../backends/gui/skeleton.js';
+import { Spinner } from '../backends/gui/spinner.js';
+import { Progress } from '../backends/gui/progress.js';
+import { ProgressRing } from '../backends/gui/progress-ring.js';
+import { ToastCard } from '../backends/gui/toaster.js';
+import { Banner, BannerAction } from '../backends/gui/banner.js';
+import { Alert, AlertDescription, AlertTitle, CalloutAction } from '../backends/gui/alert.js';
+import { JsonTree } from '../backends/gui/json-tree.js';
+import { Snippet } from '../backends/gui/snippet.js';
+import { CodeEditor } from '../backends/gui/code-editor.js';
+import { Button } from '../backends/gui/button.js';
+import { Fact } from '../product/Fact.js';
+const NOOP = () => { };
+const RUN = {
+    trigger: { type: 'DATABASE_EVENT', object: 'person', fields: ['email', 'name'] },
+    output: { id: 'p_42', name: 'Ada Lovelace', score: 0.97, active: true, owner: null, tags: [] },
+};
+const MARK = (path) => (path === 'output.name' ? 'blue' : path === 'output.owner' ? 'red' : path === 'output' ? 'partial-blue' : null);
+export function Feedback() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "skeleton-record", children: [_jsxs("div", { style: { width: 240, fontSize: 13 }, children: ["Loading ", _jsx(Skeleton, { width: 80 }), " records"] }), ['xs', 's', 'm', 'l', 'xl'].map((size) => (_jsx(Skeleton, { layout: "block", size: size, width: 120 }, size))), _jsx(Skeleton, { layout: "block", width: 120, animated: false })] }), _jsxs(Section, { name: "loader", children: [_jsx(Spinner, { variant: "dot" }), _jsx(Spinner, { variant: "dot", color: "var(--state-error)" }), _jsx("div", { style: { color: 'var(--state-success)' }, children: _jsx(Spinner, { variant: "dot" }) })] }), _jsxs(Section, { name: "progress-record", children: [_jsx(Progress, { value: 40 }), _jsx(Progress, { value: 40, variant: "line" }), _jsx(Progress, { value: 1, variant: "line" }), _jsx(Progress, { value: 60, variant: "line", ends: "round", track: true, size: "sm" }), _jsx(Progress, { value: null }), _jsx(Progress, { value: null, variant: "line" }), _jsx(ProgressRing, { value: 40, children: "40%" }), _jsx(ProgressRing, { value: 0, size: "sm", "aria-label": "Not started" }), _jsx(ProgressRing, { value: 100, "aria-label": "Done" }), _jsx(ProgressRing, { value: null, "aria-label": "Working" })] }), _jsxs(Section, { name: "toast-record", children: [_jsx(ToastCard, { t: { title: 'Record created', type: 'default' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Link copied', type: 'info' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Merged 3 records', description: 'Acme, Acme Inc. and ACME', type: 'success' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: '3 of 5 files imported', type: 'warning', cancel: { label: 'Cancel', onClick: NOOP } }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Delete failed', type: 'error', action: { label: 'Retry', onClick: NOOP } }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Importing people', type: 'info', data: { progress: 60 } } }), _jsx(ToastCard, { t: { title: 'On a phone', type: 'success' }, phone: true })] }), _jsxs(Section, { name: "banner-record", children: [_jsx(Banner, { status: "info", action: _jsx(BannerAction, { children: "Reconnect" }), children: "Your mailbox needs reconnecting." }), _jsx(Banner, { status: "error", onClose: NOOP, children: "Sync failed for 2 accounts." }), _jsx(Banner, { status: "neutral", children: "This is a sandbox workspace." }), _jsx(Banner, { status: "success", emphasis: "soft", children: "Everything is synced." }), _jsx(Banner, { status: "warning", layout: "inline", children: "This field is used by 3 workflows." }), _jsx(Banner, { color: "blue", layout: "inline", embedded: true, icon: _jsx(Sparkles, { size: 16 }), children: "Fields can be renamed later." }), _jsx(Banner, { status: "error", layout: "compact", action: _jsx(BannerAction, { children: "Restore" }), children: "This record was deleted." }), _jsx(Banner, { variant: "warning", children: "The legacy strip, unchanged." })] }), _jsxs(Section, { name: "callout", children: [_jsx(Alert, { status: "info", title: "Code steps run in a sandbox", description: "They can read the trigger's output and the steps before them.", action: _jsx(CalloutAction, { children: "Learn more" }), onDismiss: NOOP }), _jsx(Alert, { status: "error", title: "This object cannot be deleted", description: "Two relations point at it." }), _jsx(Alert, { status: "success", title: "Webhook verified" }), _jsx(Alert, { status: "warning", title: "Rate limited", icon: _jsx(Bot, { size: 16 }), fullWidth: true }), _jsx(Alert, { color: "gray", title: "No description", icon: null }), _jsxs(Alert, { children: [_jsx(AlertTitle, { children: "The legacy alert" }), _jsx(AlertDescription, { children: "Unchanged when no record prop is given." })] })] }), _jsxs(Section, { name: "json-record", children: [_jsx(JsonTree, { data: RUN, variant: "boxed", depth: 3, title: "Run", getNodeHighlighting: MARK, onNodeValueClick: NOOP }), _jsx(JsonTree, { variant: "boxed", search: false, showCopyButton: false, entries: [
+                            { id: 'trigger', label: 'Trigger', value: RUN.trigger },
+                            { id: 'step1', label: 'Find person', value: '' },
+                        ] })] }), _jsx(Section, { name: "metric", children: _jsxs("div", { style: { width: 260 }, children: [_jsx(Fact, { variant: "metric", label: "Context window", value: "12k / 200k", progress: 6, startIcon: _jsx(Bot, { size: 14 }) }), _jsx(Fact, { variant: "metric", label: "Usage", value: "$4.20" }), _jsx(Fact, { variant: "metric", label: "Indexing", value: "", progress: null })] }) }), _jsxs(Section, { name: "command-block", children: [_jsx(Snippet, { variant: "command", code: 'npx hanzo mcp add\nhanzo login' }), _jsx(Snippet, { variant: "command", code: "curl https://api.hanzo.ai/v1/models", actions: _jsx(Button, { size: "xs", variant: "ghost", children: "Run" }) })] }), _jsxs(Section, { name: "code-editor-record", children: [_jsx(CodeEditor, { title: "Code step", language: "json", defaultValue: '{\n  "a": 1\n}', actions: _jsx(Button, { size: "xs", variant: "ghost", children: "Test" }) }), _jsx(CodeEditor, { variant: "borderless", language: "javascript", defaultValue: "return input", showLanguageSelector: false, autoHeight: true })] })] }));
+}
+//# sourceMappingURL=feedback.js.map

package/dist/gallery/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../../src/gallery/feedback.tsx"],"names":[],"mappings":"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"}

package/dist/gallery/fields.cjs

@@ -0,0 +1,53 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldsGallery = FieldsGallery;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The field controls of the record kit — Field, Textarea, Select, Picker,
+ * Checkbox, Radio, ChoiceCard, Switch, SearchInput and Stepper — in every look,
+ * size and state that carries its own style, regular and compact. Part of the
+ * one gallery (records.tsx renders it).
+ */
+const react_1 = require("react");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const textarea_1 = require("../backends/gui/textarea.cjs");
+const checkbox_1 = require("../backends/gui/checkbox.cjs");
+const radio_group_1 = require("../backends/gui/radio-group.cjs");
+const choice_1 = require("../backends/gui/choice.cjs");
+const switch_1 = require("../backends/gui/switch.cjs");
+const stepper_1 = require("../backends/gui/stepper.cjs");
+const select_1 = require("../backends/gui/select.cjs");
+const field_1 = require("../backends/gui/field.cjs");
+const Filters_1 = require("../product/Filters.cjs");
+const NOOP = () => { };
+/** Every record checkbox look, unchecked / checked / indeterminate / disabled / disabled-checked. */
+const LOOKS = [
+    { variant: 'solid' },
+    { variant: 'outline' },
+    { variant: 'soft' },
+    { variant: 'solid', size: 'md' },
+    { variant: 'solid', shape: 'round' },
+    { variant: 'solid', color: 'success' },
+    { variant: 'solid', color: 'warning' },
+    { variant: 'solid', hoverable: false },
+];
+const STATES = [
+    { checked: false },
+    { checked: true },
+    { checked: 'indeterminate' },
+    { checked: false, disabled: true },
+    { checked: true, disabled: true },
+];
+function Fields() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-name", children: "Name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "g-name", placeholder: "Ada Lovelace" }), (0, jsx_runtime_1.jsx)(field_1.FieldDescription, { children: "Shown on the record." })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { invalid: true, children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-mail", children: "Email" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { id: "g-mail", placeholder: "ada@" }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: "Enter a valid address." })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { invalid: false, children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-ok", children: "Domain" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "g-ok", placeholder: "ada.dev" }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: "Hidden: the field says it is valid." })] })] }));
+}
+function FieldsGallery() {
+    const [n, setN] = (0, react_1.useState)(2);
+    const [q, setQ] = (0, react_1.useState)('');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "field-record", children: [(0, jsx_runtime_1.jsx)(Fields, {}), (0, jsx_runtime_1.jsxs)(field_1.FieldSet, { children: [(0, jsx_runtime_1.jsx)(field_1.FieldLegend, { children: "Profile" }), (0, jsx_runtime_1.jsx)(field_1.FieldLegend, { variant: "label", children: "Notifications" })] }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { errors: [{ message: 'Too short.' }, { message: 'Must include a number.' }] })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "field-compact", children: (0, jsx_runtime_1.jsx)(Fields, {}) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "textarea-record", children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", placeholder: "sm" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "xs", placeholder: "xs" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", maxRows: 4, placeholder: "maxRows 4", defaultValue: 'one\ntwo\nthree\nfour\nfive\nsix' }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", "aria-invalid": true, placeholder: "Invalid" })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "textarea-compact", children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: "Compact" }) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "select-record", children: [(0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "sm", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "sm" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "xs", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "xs" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "sm", "aria-invalid": true, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Invalid" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsx)(select_1.Picker, { size: "sm", "aria-label": "Picker sm", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Picker sm" }) }), (0, jsx_runtime_1.jsx)(select_1.Picker, { size: "xs", "aria-label": "Picker xs", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Picker xs" }) })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "select-compact", children: [(0, jsx_runtime_1.jsxs)(select_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Stage" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsxs)(select_1.SelectGroup, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectLabel, { children: "Stages" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "lead", children: "Lead" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "won", children: "Won" })] }) })] }), (0, jsx_runtime_1.jsx)(select_1.Picker, { "aria-label": "Compact picker", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Compact picker" }) })] }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "checkbox-record", children: LOOKS.map((look, i) => STATES.map((state, j) => (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": `look ${i} state ${j}`, ...look, ...state }, `${i}-${j}`))) }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "checkbox-compact", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "compact" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "compact checked", checked: true })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "radio-record", children: [(0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "b", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "a", "aria-label": "sm a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "b", "aria-label": "sm b" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "c", "aria-label": "sm c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "a", orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "md", value: "a", "aria-label": "md a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "md", value: "b", "aria-label": "md b" })] }), (0, jsx_runtime_1.jsxs)(choice_1.ChoiceGroup, { label: "Visibility", children: [(0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Everything" }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Subject only" })] })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "radio-compact", children: [(0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { value: "a", "aria-label": "compact a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { value: "b", "aria-label": "compact b" })] }), (0, jsx_runtime_1.jsxs)(choice_1.ChoiceGroup, { label: "Open records in", children: [(0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Side panel" }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Record page" })] })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "switch-record", children: [['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(switch_1.Switch, { size: size, "aria-label": size }, size))), ['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(switch_1.Switch, { size: size, checked: true, "aria-label": `${size} on` }, `${size}-on`))), (0, jsx_runtime_1.jsx)(switch_1.Switch, { size: "sm", disabled: true, "aria-label": "sm disabled" })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "switch-compact", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": "compact" }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: true, "aria-label": "compact on" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "search-record", children: [(0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, placeholder: "Search objects" }), (0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, size: "sm", placeholder: "Search fields", actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}), children: "Add field" }) })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "search-compact", children: (0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, placeholder: "Search members" }) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "stepper-record", children: [(0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100, editable: true }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Maximum values", value: 1, onChange: NOOP, min: 1, readOnly: true, editable: true })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "stepper-compact", children: [(0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100 }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Amount", value: 12500.5, onChange: NOOP, step: 0.5, decimals: 2 })] }) })] }));
+}

package/dist/gallery/fields.d.ts

@@ -0,0 +1,2 @@
+export declare function FieldsGallery(): import("react").JSX.Element;
+//# sourceMappingURL=fields.d.ts.map

package/dist/gallery/fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../src/gallery/fields.tsx"],"names":[],"mappings":"AAoFA,wBAAgB,aAAa,gCAmL5B"}