@hanzo/ui 8.27.91 → 8.28.0

package/dist/gallery/fields.js

@@ -0,0 +1,51 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "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).
+ */
+import { useState } from 'react';
+import { Plus } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Density } from '../backends/gui/density.js';
+import { Button } from '../backends/gui/button.js';
+import { Input } from '../backends/gui/input.js';
+import { Textarea } from '../backends/gui/textarea.js';
+import { Checkbox } from '../backends/gui/checkbox.js';
+import { RadioGroup, RadioGroupItem } from '../backends/gui/radio-group.js';
+import { ChoiceCard, ChoiceGroup } from '../backends/gui/choice.js';
+import { Switch } from '../backends/gui/switch.js';
+import { Stepper } from '../backends/gui/stepper.js';
+import { Picker, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '../backends/gui/select.js';
+import { Field, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSet, } from '../backends/gui/field.js';
+import { SearchInput } from '../product/Filters.js';
+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 (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "g-name", children: "Name" }), _jsx(Input, { id: "g-name", placeholder: "Ada Lovelace" }), _jsx(FieldDescription, { children: "Shown on the record." })] }), _jsxs(Field, { invalid: true, children: [_jsx(FieldLabel, { htmlFor: "g-mail", children: "Email" }), _jsx(Textarea, { id: "g-mail", placeholder: "ada@" }), _jsx(FieldError, { children: "Enter a valid address." })] }), _jsxs(Field, { invalid: false, children: [_jsx(FieldLabel, { htmlFor: "g-ok", children: "Domain" }), _jsx(Input, { id: "g-ok", placeholder: "ada.dev" }), _jsx(FieldError, { children: "Hidden: the field says it is valid." })] })] }));
+}
+export function FieldsGallery() {
+    const [n, setN] = useState(2);
+    const [q, setQ] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "field-record", children: [_jsx(Fields, {}), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Profile" }), _jsx(FieldLegend, { variant: "label", children: "Notifications" })] }), _jsx(FieldError, { errors: [{ message: 'Too short.' }, { message: 'Must include a number.' }] })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "field-compact", children: _jsx(Fields, {}) }) }), _jsxs(Section, { name: "textarea-record", children: [_jsx(Textarea, { size: "sm", placeholder: "sm" }), _jsx(Textarea, { size: "xs", placeholder: "xs" }), _jsx(Textarea, { size: "sm", maxRows: 4, placeholder: "maxRows 4", defaultValue: 'one\ntwo\nthree\nfour\nfive\nsix' }), _jsx(Textarea, { size: "sm", "aria-invalid": true, placeholder: "Invalid" })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "textarea-compact", children: _jsx(Textarea, { placeholder: "Compact" }) }) }), _jsxs(Section, { name: "select-record", children: [_jsxs(Select, { children: [_jsx(SelectTrigger, { size: "sm", children: _jsx(SelectValue, { placeholder: "sm" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsxs(Select, { children: [_jsx(SelectTrigger, { size: "xs", children: _jsx(SelectValue, { placeholder: "xs" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsxs(Select, { children: [_jsx(SelectTrigger, { size: "sm", "aria-invalid": true, children: _jsx(SelectValue, { placeholder: "Invalid" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsx(Picker, { size: "sm", "aria-label": "Picker sm", defaultValue: "a", children: _jsx("option", { value: "a", children: "Picker sm" }) }), _jsx(Picker, { size: "xs", "aria-label": "Picker xs", defaultValue: "a", children: _jsx("option", { value: "a", children: "Picker xs" }) })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "select-compact", children: [_jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Stage" }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Stages" }), _jsx(SelectItem, { value: "lead", children: "Lead" }), _jsx(SelectItem, { value: "won", children: "Won" })] }) })] }), _jsx(Picker, { "aria-label": "Compact picker", defaultValue: "a", children: _jsx("option", { value: "a", children: "Compact picker" }) })] }) }), _jsx(Section, { name: "checkbox-record", children: LOOKS.map((look, i) => STATES.map((state, j) => _jsx(Checkbox, { "aria-label": `look ${i} state ${j}`, ...look, ...state }, `${i}-${j}`))) }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "checkbox-compact", children: [_jsx(Checkbox, { "aria-label": "compact" }), _jsx(Checkbox, { "aria-label": "compact checked", checked: true })] }) }), _jsxs(Section, { name: "radio-record", children: [_jsxs(RadioGroup, { defaultValue: "b", children: [_jsx(RadioGroupItem, { size: "sm", value: "a", "aria-label": "sm a" }), _jsx(RadioGroupItem, { size: "sm", value: "b", "aria-label": "sm b" }), _jsx(RadioGroupItem, { size: "sm", value: "c", "aria-label": "sm c", disabled: true })] }), _jsxs(RadioGroup, { defaultValue: "a", orientation: "horizontal", children: [_jsx(RadioGroupItem, { size: "md", value: "a", "aria-label": "md a" }), _jsx(RadioGroupItem, { size: "md", value: "b", "aria-label": "md b" })] }), _jsxs(ChoiceGroup, { label: "Visibility", children: [_jsx(ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Everything" }), _jsx(ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Subject only" })] })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "radio-compact", children: [_jsxs(RadioGroup, { defaultValue: "a", children: [_jsx(RadioGroupItem, { value: "a", "aria-label": "compact a" }), _jsx(RadioGroupItem, { value: "b", "aria-label": "compact b" })] }), _jsxs(ChoiceGroup, { label: "Open records in", children: [_jsx(ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Side panel" }), _jsx(ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Record page" })] })] }) }), _jsxs(Section, { name: "switch-record", children: [['md', 'sm'].map((size) => (_jsx(Switch, { size: size, "aria-label": size }, size))), ['md', 'sm'].map((size) => (_jsx(Switch, { size: size, checked: true, "aria-label": `${size} on` }, `${size}-on`))), _jsx(Switch, { size: "sm", disabled: true, "aria-label": "sm disabled" })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "switch-compact", children: [_jsx(Switch, { "aria-label": "compact" }), _jsx(Switch, { checked: true, "aria-label": "compact on" })] }) }), _jsxs(Section, { name: "search-record", children: [_jsx(SearchInput, { value: q, onChange: setQ, placeholder: "Search objects" }), _jsx(SearchInput, { value: q, onChange: setQ, size: "sm", placeholder: "Search fields", actions: _jsx(Button, { size: "sm", variant: "outline", startIcon: _jsx(Plus, {}), children: "Add field" }) })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "search-compact", children: _jsx(SearchInput, { value: q, onChange: setQ, placeholder: "Search members" }) }) }), _jsxs(Section, { name: "stepper-record", children: [_jsx(Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100, editable: true }), _jsx(Stepper, { label: "Maximum values", value: 1, onChange: NOOP, min: 1, readOnly: true, editable: true })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "stepper-compact", children: [_jsx(Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100 }), _jsx(Stepper, { label: "Amount", value: 12500.5, onChange: NOOP, step: 0.5, decimals: 2 })] }) })] }));
+}
+//# sourceMappingURL=fields.js.map

package/dist/gallery/fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.js","sourceRoot":"","sources":["../../src/gallery/fields.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa,EACb,WAAW,GACZ,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACL,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,GACT,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAErB,qGAAqG;AACrG,MAAM,KAAK,GAAG;IACZ,EAAE,OAAO,EAAE,OAAO,EAAE;IACpB,EAAE,OAAO,EAAE,SAAS,EAAE;IACtB,EAAE,OAAO,EAAE,MAAM,EAAE;IACnB,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;IAChC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACpC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE;CAC9B,CAAA;AAEV,MAAM,MAAM,GAAG;IACb,EAAE,OAAO,EAAE,KAAK,EAAE;IAClB,EAAE,OAAO,EAAE,IAAI,EAAE;IACjB,EAAE,OAAO,EAAE,eAAe,EAAE;IAC5B,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;IAClC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;CACzB,CAAA;AAEV,SAAS,MAAM;IACb,OAAO,CACL,8BACE,MAAC,KAAK,eACJ,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,qBAAkB,EAC9C,KAAC,KAAK,IAAC,EAAE,EAAC,QAAQ,EAAC,WAAW,EAAC,cAAc,GAAG,EAChD,KAAC,gBAAgB,uCAAwC,IACnD,EACR,MAAC,KAAK,IAAC,OAAO,mBACZ,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,sBAAmB,EAC/C,KAAC,QAAQ,IAAC,EAAE,EAAC,QAAQ,EAAC,WAAW,EAAC,MAAM,GAAG,EAC3C,KAAC,UAAU,yCAAoC,IACzC,EACR,MAAC,KAAK,IAAC,OAAO,EAAE,KAAK,aACnB,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,uBAAoB,EAC9C,KAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,WAAW,EAAC,SAAS,GAAG,EACzC,KAAC,UAAU,sDAAiD,IACtD,IACP,CACJ,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC9B,OAAO,CACL,8BACE,MAAC,OAAO,IAAC,IAAI,EAAC,cAAc,aAC1B,KAAC,MAAM,KAAG,EACV,MAAC,QAAQ,eACP,KAAC,WAAW,0BAAsB,EAClC,KAAC,WAAW,IAAC,OAAO,EAAC,OAAO,8BAA4B,IAC/C,EACX,KAAC,UAAU,IAAC,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC,GAAI,IAClF,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,KAAC,OAAO,IAAC,IAAI,EAAC,eAAe,YAC3B,KAAC,MAAM,KAAG,GACF,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,iBAAiB,aAC7B,KAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,GAAG,EACvC,KAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,GAAG,EACvC,KAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,CAAC,EAAE,WAAW,EAAC,WAAW,EAAC,YAAY,EAAE,kCAAkC,GAAI,EAC5G,KAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,wBAAc,WAAW,EAAC,SAAS,GAAG,IACjD,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,KAAC,OAAO,IAAC,IAAI,EAAC,kBAAkB,YAC9B,KAAC,QAAQ,IAAC,WAAW,EAAC,SAAS,GAAG,GAC1B,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,eAAe,aAC3B,MAAC,MAAM,eACL,KAAC,aAAa,IAAC,IAAI,EAAC,IAAI,YACtB,KAAC,WAAW,IAAC,WAAW,EAAC,IAAI,GAAG,GAClB,EAChB,KAAC,aAAa,cACZ,KAAC,UAAU,IAAC,KAAK,EAAC,GAAG,kBAAe,GACtB,IACT,EACT,MAAC,MAAM,eACL,KAAC,aAAa,IAAC,IAAI,EAAC,IAAI,YACtB,KAAC,WAAW,IAAC,WAAW,EAAC,IAAI,GAAG,GAClB,EAChB,KAAC,aAAa,cACZ,KAAC,UAAU,IAAC,KAAK,EAAC,GAAG,kBAAe,GACtB,IACT,EACT,MAAC,MAAM,eACL,KAAC,aAAa,IAAC,IAAI,EAAC,IAAI,kCACtB,KAAC,WAAW,IAAC,WAAW,EAAC,SAAS,GAAG,GACvB,EAChB,KAAC,aAAa,cACZ,KAAC,UAAU,IAAC,KAAK,EAAC,GAAG,kBAAe,GACtB,IACT,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,gBAAY,WAAW,EAAC,YAAY,EAAC,GAAG,YACvD,iBAAQ,KAAK,EAAC,GAAG,0BAAmB,GAC7B,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,gBAAY,WAAW,EAAC,YAAY,EAAC,GAAG,YACvD,iBAAQ,KAAK,EAAC,GAAG,0BAAmB,GAC7B,IACD,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,MAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,aAC5B,MAAC,MAAM,IAAC,IAAI,mBACV,KAAC,aAAa,cACZ,KAAC,WAAW,IAAC,WAAW,EAAC,OAAO,GAAG,GACrB,EAChB,KAAC,aAAa,cACZ,MAAC,WAAW,eACV,KAAC,WAAW,yBAAqB,EACjC,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,qBAAkB,EAC1C,KAAC,UAAU,IAAC,KAAK,EAAC,KAAK,oBAAiB,IAC5B,GACA,IACT,EACT,KAAC,MAAM,kBAAY,gBAAgB,EAAC,YAAY,EAAC,GAAG,YAClD,iBAAQ,KAAK,EAAC,GAAG,+BAAwB,GAClC,IACD,GACF,EAEV,KAAC,OAAO,IAAC,IAAI,EAAC,iBAAiB,YAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CACrB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAC,QAAQ,kBAA+B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAM,IAAI,KAAM,KAAK,IAApE,GAAG,CAAC,IAAI,CAAC,EAAE,CAA6D,CAAC,CAClH,GACO,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,MAAC,OAAO,IAAC,IAAI,EAAC,kBAAkB,aAC9B,KAAC,QAAQ,kBAAY,SAAS,GAAG,EACjC,KAAC,QAAQ,kBAAY,iBAAiB,EAAC,OAAO,SAAG,IACzC,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,cAAc,aAC1B,MAAC,UAAU,IAAC,YAAY,EAAC,GAAG,aAC1B,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,gBAAY,MAAM,GAAG,EACxD,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,gBAAY,MAAM,GAAG,EACxD,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,gBAAY,MAAM,EAAC,QAAQ,SAAG,IACtD,EACb,MAAC,UAAU,IAAC,YAAY,EAAC,GAAG,EAAC,WAAW,EAAC,YAAY,aACnD,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,gBAAY,MAAM,GAAG,EACxD,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,gBAAY,MAAM,GAAG,IAC7C,EACb,MAAC,WAAW,IAAC,KAAK,EAAC,YAAY,aAC7B,KAAC,UAAU,IAAC,SAAS,QAAC,QAAQ,QAAC,QAAQ,EAAE,IAAI,2BAEhC,EACb,KAAC,UAAU,IAAC,SAAS,QAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,6BAExC,IACD,IACN,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,MAAC,OAAO,IAAC,IAAI,EAAC,eAAe,aAC3B,MAAC,UAAU,IAAC,YAAY,EAAC,GAAG,aAC1B,KAAC,cAAc,IAAC,KAAK,EAAC,GAAG,gBAAY,WAAW,GAAG,EACnD,KAAC,cAAc,IAAC,KAAK,EAAC,GAAG,gBAAY,WAAW,GAAG,IACxC,EACb,MAAC,WAAW,IAAC,KAAK,EAAC,iBAAiB,aAClC,KAAC,UAAU,IAAC,SAAS,QAAC,QAAQ,QAAC,QAAQ,EAAE,IAAI,2BAEhC,EACb,KAAC,UAAU,IAAC,SAAS,QAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,4BAExC,IACD,IACN,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,eAAe,aACzB,CAAC,IAAI,EAAE,IAAI,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAY,IAAI,EAAE,IAAI,gBAAc,IAAI,IAAlC,IAAI,CAAkC,CACpD,CAAC,EACA,CAAC,IAAI,EAAE,IAAI,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IAAoB,IAAI,EAAE,IAAI,EAAE,OAAO,sBAAa,GAAG,IAAI,KAAK,IAA1D,GAAG,IAAI,KAAK,CAAkD,CAC5E,CAAC,EACF,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,sBAAY,aAAa,GAAG,IAC9C,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,MAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,aAC5B,KAAC,MAAM,kBAAY,SAAS,GAAG,EAC/B,KAAC,MAAM,IAAC,OAAO,sBAAY,YAAY,GAAG,IAClC,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,eAAe,aAC3B,KAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAC,gBAAgB,GAAG,EACtE,KAAC,WAAW,IACV,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,IAAI,EACT,WAAW,EAAC,eAAe,EAC3B,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAE,KAAC,IAAI,KAAG,0BAE9C,GAEX,IACM,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,KAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,YAC5B,KAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAC,gBAAgB,GAAG,GAC9D,GACF,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,aAC5B,KAAC,OAAO,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,SAAG,EACjF,KAAC,OAAO,IAAC,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,QAAC,QAAQ,SAAG,IAC9E,EACV,KAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YACtB,MAAC,OAAO,IAAC,IAAI,EAAC,iBAAiB,aAC7B,KAAC,OAAO,IAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,EACxE,KAAC,OAAO,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,GAAI,IAC1E,GACF,IACT,CACJ,CAAA;AACH,CAAC"}

package/dist/gallery/frames.cjs

@@ -0,0 +1,47 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Frames = Frames;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's frames in the gallery: the side panel's record frame (bar,
+ * body, footer) at its 400px width, and the command menu as a pane page
+ * (twenty-ui's side panel and command menu frames, MIT, NOTICE).
+ *
+ * The frame is drawn from its parts rather than through an open DetailPane: a
+ * pane opens through its API, which a server render never calls, and the parts
+ * are exactly what an open docked pane draws. Every field here passes
+ * `autoFocus={false}`, as the menus do, so the page is not pulled to it on load.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+const section_1 = require("./section.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const DetailPane_1 = require("../product/DetailPane.cjs");
+const CommandMenu_1 = require("../product/CommandMenu.cjs");
+const layout_1 = require("../backends/gui/layout.cjs");
+const NOOP = () => { };
+const GROUPS = [
+    {
+        id: 'record',
+        label: 'Record',
+        icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }),
+        items: [
+            { id: 'create', label: 'Create company', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }), contextual: 'Companies', onSelect: NOOP },
+            { id: 'copy', label: 'Copy link', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 16 }), shortcut: ['Mod', 'L'], onSelect: NOOP },
+        ],
+    },
+    {
+        id: 'go',
+        label: 'Go to',
+        icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Kanban, { size: 16 }),
+        items: [
+            { id: 'people', label: 'Go to People', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Users, { size: 16 }), shortcut: [['G'], ['P']], onSelect: NOOP },
+            { id: 'settings', label: 'Settings', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }), submenu: true, onSelect: NOOP },
+            { id: 'billing', label: 'Billing', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }), disabled: true, onSelect: NOOP },
+        ],
+    },
+];
+function Frames() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.Section, { name: "pane-record", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 400, height: 320, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(DetailPane_1.PaneBar, { actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Copy link", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, {}) }), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16, color: "$aside" }), (0, jsx_runtime_1.jsx)(layout_1.Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: "Acme Corporation" })] }), (0, jsx_runtime_1.jsx)(DetailPane_1.PaneBody, { children: (0, jsx_runtime_1.jsx)(layout_1.Text, { fontSize: "$2", color: "$aside", children: "The record's fields, timeline and notes." }) }), (0, jsx_runtime_1.jsxs)(DetailPane_1.PaneFoot, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "ghost", children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "primary", children: "Save" })] })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "command-menu", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 400, height: 360, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(CommandMenu_1.CommandMenu, { groups: GROUPS, autoFocus: false }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 400, height: 160, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(CommandMenu_1.CommandMenu, { groups: GROUPS, query: "zzzz", autoFocus: false }) })] })] }));
+}

package/dist/gallery/frames.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../src/gallery/frames.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,MAAM,gCA0CrB"}

package/dist/gallery/frames.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 frames in the gallery: the side panel's record frame (bar,
+ * body, footer) at its 400px width, and the command menu as a pane page
+ * (twenty-ui's side panel and command menu frames, MIT, NOTICE).
+ *
+ * The frame is drawn from its parts rather than through an open DetailPane: a
+ * pane opens through its API, which a server render never calls, and the parts
+ * are exactly what an open docked pane draws. Every field here passes
+ * `autoFocus={false}`, as the menus do, so the page is not pulled to it on load.
+ */
+import { Building2, Copy, Kanban, Plus, Settings, Users } from '@hanzogui/lucide-icons-2';
+import { YStack } from '@hanzo/gui';
+import { Section } from './section.js';
+import { Button } from '../backends/gui/button.js';
+import { PaneBar, PaneBody, PaneFoot } from '../product/DetailPane.js';
+import { CommandMenu } from '../product/CommandMenu.js';
+import { Text } from '../backends/gui/layout.js';
+const NOOP = () => { };
+const GROUPS = [
+    {
+        id: 'record',
+        label: 'Record',
+        icon: _jsx(Building2, { size: 16 }),
+        items: [
+            { id: 'create', label: 'Create company', icon: _jsx(Plus, { size: 16 }), contextual: 'Companies', onSelect: NOOP },
+            { id: 'copy', label: 'Copy link', icon: _jsx(Copy, { size: 16 }), shortcut: ['Mod', 'L'], onSelect: NOOP },
+        ],
+    },
+    {
+        id: 'go',
+        label: 'Go to',
+        icon: _jsx(Kanban, { size: 16 }),
+        items: [
+            { id: 'people', label: 'Go to People', icon: _jsx(Users, { size: 16 }), shortcut: [['G'], ['P']], onSelect: NOOP },
+            { id: 'settings', label: 'Settings', icon: _jsx(Settings, { size: 16 }), submenu: true, onSelect: NOOP },
+            { id: 'billing', label: 'Billing', icon: _jsx(Settings, { size: 16 }), disabled: true, onSelect: NOOP },
+        ],
+    },
+];
+export function Frames() {
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { name: "pane-record", children: _jsxs(YStack, { width: 400, height: 320, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: [_jsxs(PaneBar, { actions: _jsx(Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Copy link", children: _jsx(Copy, {}) }), children: [_jsx(Building2, { size: 16, color: "$aside" }), _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: "Acme Corporation" })] }), _jsx(PaneBody, { children: _jsx(Text, { fontSize: "$2", color: "$aside", children: "The record's fields, timeline and notes." }) }), _jsxs(PaneFoot, { children: [_jsx(Button, { size: "sm", variant: "ghost", children: "Cancel" }), _jsx(Button, { size: "sm", variant: "primary", children: "Save" })] })] }) }), _jsxs(Section, { name: "command-menu", children: [_jsx(YStack, { width: 400, height: 360, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: _jsx(CommandMenu, { groups: GROUPS, autoFocus: false }) }), _jsx(YStack, { width: 400, height: 160, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: _jsx(CommandMenu, { groups: GROUPS, query: "zzzz", autoFocus: false }) })] })] }));
+}
+//# sourceMappingURL=frames.js.map

package/dist/gallery/frames.js.map

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

package/dist/gallery/menus.cjs

@@ -0,0 +1,64 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Surfaces = Surfaces;
+exports.Rows = Rows;
+exports.Picker = Picker;
+exports.Paged = Paged;
+exports.Menus = Menus;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's menus, rows and floating surfaces in the gallery: every part
+ * merged from twenty-ui's Dropdown, MenuItem, ListItem, Tooltip, Popover and
+ * ResizeHandle (MIT, NOTICE), regular and compact.
+ *
+ * The rows render in place as well as inside open menus. A portalled panel draws
+ * only once a browser mounts it, so the standalone rows are what a server render
+ * (and the stylesheet it harvests) can see; the open menus are what a browser
+ * measures. Every Search here passes `autoFocus={false}`: the gallery holds many
+ * surfaces open at once, and a field that took focus on load would pull the page
+ * to it.
+ */
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+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 grip_1 = require("../backends/gui/grip.cjs");
+const item_1 = require("../backends/gui/item.cjs");
+const tooltip_1 = require("../backends/gui/tooltip.cjs");
+const popover_1 = require("../backends/gui/popover.cjs");
+const dropdown_menu_1 = require("../backends/gui/dropdown-menu.cjs");
+const MenuRow_1 = require("../product/MenuRow.cjs");
+const tabs_1 = require("../backends/gui/tabs.cjs");
+const breadcrumb_1 = require("../backends/gui/breadcrumb.cjs");
+const card_1 = require("../backends/gui/card.cjs");
+const toggle_group_1 = require("../backends/gui/toggle-group.cjs");
+const Field_1 = require("../product/Field.cjs");
+const Section_1 = require("../settings/Section.cjs");
+const layout_1 = require("../backends/gui/layout.cjs");
+/** The record page's surfaces: line tabs, the trail, a compact card, picker tiles, a settings row. */
+function Surfaces() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.Section, { name: "tabs-line", children: (0, jsx_runtime_1.jsxs)(tabs_1.Tabs, { variant: "line", defaultValue: "timeline", width: 480, children: [(0, jsx_runtime_1.jsxs)(tabs_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(tabs_1.TabsTrigger, { value: "timeline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.LineChart, { size: 16 }), children: "Timeline" }), (0, jsx_runtime_1.jsx)(tabs_1.TabsTrigger, { value: "tasks", badge: (0, jsx_runtime_1.jsx)(layout_1.Text, { fontSize: "$1", color: "$hint", children: "3" }), children: "Tasks" }), (0, jsx_runtime_1.jsx)(tabs_1.TabsTrigger, { value: "notes", size: "sm", children: "Notes" }), (0, jsx_runtime_1.jsx)(tabs_1.TabsTrigger, { value: "files", highlighted: true, children: "Files" }), (0, jsx_runtime_1.jsx)(tabs_1.TabsTrigger, { value: "emails", disabled: true, children: "Emails" })] }), (0, jsx_runtime_1.jsx)(tabs_1.TabsContent, { value: "timeline", children: "Timeline" })] }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "breadcrumb", children: (0, jsx_runtime_1.jsx)(breadcrumb_1.Breadcrumb, { children: (0, jsx_runtime_1.jsxs)(breadcrumb_1.BreadcrumbList, { children: [(0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbItem, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbLink, { href: "#companies", children: "Companies" }) }), (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbSeparator, {}), (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbItem, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbPage, { children: "Acme Corporation" }) })] }) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "card-compact", children: [(0, jsx_runtime_1.jsxs)(card_1.Card, { density: "compact", width: 320, children: [(0, jsx_runtime_1.jsx)(card_1.CardHeader, { children: "Email" }), (0, jsx_runtime_1.jsx)(card_1.CardContent, { divider: true, children: "ada@acme.com" }), (0, jsx_runtime_1.jsx)(card_1.CardFooter, { children: "Synced 2 minutes ago" })] }), (0, jsx_runtime_1.jsx)(card_1.Card, { density: "compact", interactive: true, width: 200, onPress: NOOP, children: (0, jsx_runtime_1.jsx)(card_1.CardContent, { children: "Interactive" }) })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "toggle-tile", children: (0, jsx_runtime_1.jsxs)(toggle_group_1.ToggleGroup, { type: "single", variant: "tile", defaultValue: "table", style: { display: 'grid', gridTemplateColumns: 'repeat(3, 72px)' }, children: [(0, jsx_runtime_1.jsxs)(toggle_group_1.ToggleGroupItem, { value: "table", "aria-label": "Table", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Table, { size: 16 }), "Table"] }), (0, jsx_runtime_1.jsxs)(toggle_group_1.ToggleGroupItem, { value: "kanban", "aria-label": "Kanban", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Kanban, { size: 16 }), "Kanban"] }), (0, jsx_runtime_1.jsxs)(toggle_group_1.ToggleGroupItem, { value: "chart", "aria-label": "Chart", disabled: true, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.BarChart3, { size: 16 }), "Chart"] })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "settings-row", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 320, gap: 2, children: [(0, jsx_runtime_1.jsx)(Field_1.FieldSwitch, { label: "Compact view", description: "Fewer fields per card", checked: true, onChange: NOOP }), (0, jsx_runtime_1.jsx)(Field_1.FieldSwitch, { label: "Hide empty groups", checked: false, onChange: NOOP, disabled: true })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 360, children: (0, jsx_runtime_1.jsx)(Section_1.Heading, { title: "Members", detail: "Who can see and edit records in this workspace." }) }) }), (0, jsx_runtime_1.jsxs)(layout_1.Text, { children: ["Visible", (0, jsx_runtime_1.jsx)(layout_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(layout_1.Text, { children: "read aloud only" }) })] })] })] }));
+}
+const NOOP = () => { };
+const Edit = () => ((0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-2xs", variant: "ghost", emphasis: "subtle", "aria-label": "Edit", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, {}) }));
+/** Every row variant that carries its own style, standalone. */
+function Rows() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.Section, { name: "menu-row", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 240, gap: 2, children: [(0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "People", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 16 }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Companies", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }), iconContainer: true, contextual: "12", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Settings", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }), contextual: "\u2318,", contextualPosition: "right", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Copy link", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 16 }), shortcut: ['⌘', 'L'], onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Group by", submenu: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Sort", submenu: "open", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Delete", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, { size: 16 }), danger: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Add a field", placeholder: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Name", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 16 }), grip: "always", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Email", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 16 }), grip: "onHover", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Phones", actions: (0, jsx_runtime_1.jsx)(Edit, {}), onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Links", actions: (0, jsx_runtime_1.jsx)(Edit, {}), actionsVisibility: "always", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Ada Lovelace", variant: "suggestion", selected: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Grace Hopper", variant: "suggestion", onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Focused", focused: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Disabled", disabled: true, onPress: NOOP })] }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "item-row", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 240, gap: 2, children: [(0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", indicator: "check", selected: true, children: "Selected, check" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", indicator: "checkbox", selected: true, children: "Selected, box" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", indicator: "checkbox", children: "Unselected, box" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", selected: true, children: "Selected, tint" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", focused: true, children: "Focused" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", shortcut: ['⌘', 'K'], children: "Shortcut" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", actions: (0, jsx_runtime_1.jsx)(Edit, {}), children: "Actions on hover" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", actions: (0, jsx_runtime_1.jsx)(Edit, {}), actionsVisibility: "always", children: "Actions always" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", hasSubmenu: true, children: "Submenu" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", color: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", disabled: true, hasSubmenu: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(item_1.Item, { size: "row", render: "button", onPress: NOOP, children: "As a button" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "grip-record", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "relative", width: 160, height: 96, borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: (0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "right", span: 160, floor: 120, ceil: 240, onSpan: NOOP, label: "Resize panel", bar: "edge" }) }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "relative", width: 160, height: 96, borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: (0, jsx_runtime_1.jsx)(grip_1.Grip, { side: "left", span: 160, floor: 120, ceil: 240, onSpan: NOOP, label: "Resize pane", bar: "inline" }) })] })] }));
+}
+/** A record picker: search, a scrollable section of options, actions, an empty line. */
+function Picker({ autoFocus = false, open = true }) {
+    const [q, setQ] = (0, react_1.useState)('');
+    const all = ['Ada Lovelace', 'Grace Hopper', 'Katherine Johnson', 'Margaret Hamilton', 'Radia Perlman', 'Barbara Liskov', 'Frances Allen'];
+    const shown = all.filter((n) => n.toLowerCase().includes(q.trim().toLowerCase()));
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { ...(open ? { open: true } : null), children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", children: "Assignee" }) }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuContent, { minW: 240, ...{ 'data-gallery-menu': 'picker' }, children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search people", autoFocus: autoFocus }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSelectionGroup, { multiple: true, defaultValue: ['Ada Lovelace'], children: (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSection, { label: "People", scrollable: true, children: shown.map((n) => ((0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuOptionItem, { value: n, children: n }, n))) }) }), shown.length === 0 ? (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuEmpty, { children: "No person matches" }) : null, (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { actions: (0, jsx_runtime_1.jsx)(Edit, {}), onSelect: NOOP, children: "Add person" })] })] }));
+}
+/** View options: pages, a back row, a header with a close. */
+function Paged({ open = true }) {
+    return ((0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { ...(open ? { open: true } : null), defaultPage: "options", children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "ghost", children: "Options" }) }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuContent, { ...{ 'data-gallery-menu': 'paged' }, children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuPage, { id: "options", children: [(0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuHeader, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTitle, { children: "View options" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuClose, { "aria-label": "Close" })] }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { page: "fields", children: "Fields" }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuSelectionGroup, { defaultValue: "table", children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuLabel, { variant: "band", children: "Layout" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuOptionItem, { value: "table", children: "Table" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuOptionItem, { value: "kanban", children: "Kanban" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuOptionItem, { value: "calendar", indicator: "none", children: "Calendar" })] }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuLoading, { children: "Counting records" })] }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuPage, { id: "fields", children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuBack, { children: "Fields" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { children: "Name" })] })] })] }));
+}
+function Menus() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Rows, {}), (0, jsx_runtime_1.jsx)(Surfaces, {}), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "dropdown-record", children: [(0, jsx_runtime_1.jsx)(Picker, {}), (0, jsx_runtime_1.jsx)(Paged, {})] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "floating-record", children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { children: "Sync" }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Info, { size: 14 }), description: 'Last synced 2 minutes ago.\nNext in 3.', children: "Mailbox sync" })] }) }), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { children: "Small panel" }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { size: "sm", arrow: true, children: "Record preview" })] })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "menus-compact", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 240, gap: 2, children: (0, jsx_runtime_1.jsx)(MenuRow_1.MenuRow, { size: "row", label: "Compact row", onPress: NOOP }) }), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { children: "Compact panel" }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { children: "Compact preview" })] })] }) })] }));
+}

package/dist/gallery/menus.d.ts

@@ -0,0 +1,15 @@
+/** The record page's surfaces: line tabs, the trail, a compact card, picker tiles, a settings row. */
+export declare function Surfaces(): import("react").JSX.Element;
+/** Every row variant that carries its own style, standalone. */
+export declare function Rows(): import("react").JSX.Element;
+/** A record picker: search, a scrollable section of options, actions, an empty line. */
+export declare function Picker({ autoFocus, open }: {
+    autoFocus?: boolean;
+    open?: boolean;
+}): import("react").JSX.Element;
+/** View options: pages, a back row, a header with a close. */
+export declare function Paged({ open }: {
+    open?: boolean;
+}): import("react").JSX.Element;
+export declare function Menus(): import("react").JSX.Element;
+//# sourceMappingURL=menus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../src/gallery/menus.tsx"],"names":[],"mappings":"AAoDA,sGAAsG;AACtG,wBAAgB,QAAQ,gCAmFvB;AAUD,gEAAgE;AAChE,wBAAgB,IAAI,gCA2EnB;AAED,wFAAwF;AACxF,wBAAgB,MAAM,CAAC,EAAE,SAAiB,EAAE,IAAW,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,+BA8BjG;AAED,8DAA8D;AAC9D,wBAAgB,KAAK,CAAC,EAAE,IAAW,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,+BAgCxD;AAED,wBAAgB,KAAK,gCAsCpB"}

package/dist/gallery/menus.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 menus, rows and floating surfaces in the gallery: every part
+ * merged from twenty-ui's Dropdown, MenuItem, ListItem, Tooltip, Popover and
+ * ResizeHandle (MIT, NOTICE), regular and compact.
+ *
+ * The rows render in place as well as inside open menus. A portalled panel draws
+ * only once a browser mounts it, so the standalone rows are what a server render
+ * (and the stylesheet it harvests) can see; the open menus are what a browser
+ * measures. Every Search here passes `autoFocus={false}`: the gallery holds many
+ * surfaces open at once, and a field that took focus on load would pull the page
+ * to it.
+ */
+import { useState } from 'react';
+import { XStack, YStack } from '@hanzo/gui';
+import { BarChart3, Building2, Copy, Info, Kanban, LineChart, Pencil, Settings, Table, Trash2, User } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Density } from '../backends/gui/density.js';
+import { Button } from '../backends/gui/button.js';
+import { Grip } from '../backends/gui/grip.js';
+import { Item } from '../backends/gui/item.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../backends/gui/tooltip.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../backends/gui/popover.js';
+import { DropdownMenu, DropdownMenuBack, DropdownMenuClose, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuLoading, DropdownMenuOptionItem, DropdownMenuPage, DropdownMenuSearch, DropdownMenuSection, DropdownMenuSelectionGroup, DropdownMenuSeparator, DropdownMenuTitle, DropdownMenuTrigger, } from '../backends/gui/dropdown-menu.js';
+import { MenuRow } from '../product/MenuRow.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../backends/gui/tabs.js';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../backends/gui/breadcrumb.js';
+import { Card, CardContent, CardFooter, CardHeader } from '../backends/gui/card.js';
+import { ToggleGroup, ToggleGroupItem } from '../backends/gui/toggle-group.js';
+import { FieldSwitch } from '../product/Field.js';
+import { Heading as SettingsHeading } from '../settings/Section.js';
+import { Text, VisuallyHidden } from '../backends/gui/layout.js';
+/** The record page's surfaces: line tabs, the trail, a compact card, picker tiles, a settings row. */
+export function Surfaces() {
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { name: "tabs-line", children: _jsxs(Tabs, { variant: "line", defaultValue: "timeline", width: 480, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "timeline", startIcon: _jsx(LineChart, { size: 16 }), children: "Timeline" }), _jsx(TabsTrigger, { value: "tasks", badge: _jsx(Text, { fontSize: "$1", color: "$hint", children: "3" }), children: "Tasks" }), _jsx(TabsTrigger, { value: "notes", size: "sm", children: "Notes" }), _jsx(TabsTrigger, { value: "files", highlighted: true, children: "Files" }), _jsx(TabsTrigger, { value: "emails", disabled: true, children: "Emails" })] }), _jsx(TabsContent, { value: "timeline", children: "Timeline" })] }) }), _jsx(Section, { name: "breadcrumb", children: _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "#companies", children: "Companies" }) }), _jsx(BreadcrumbSeparator, {}), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Acme Corporation" }) })] }) }) }), _jsxs(Section, { name: "card-compact", children: [_jsxs(Card, { density: "compact", width: 320, children: [_jsx(CardHeader, { children: "Email" }), _jsx(CardContent, { divider: true, children: "ada@acme.com" }), _jsx(CardFooter, { children: "Synced 2 minutes ago" })] }), _jsx(Card, { density: "compact", interactive: true, width: 200, onPress: NOOP, children: _jsx(CardContent, { children: "Interactive" }) })] }), _jsx(Section, { name: "toggle-tile", children: _jsxs(ToggleGroup, { type: "single", variant: "tile", defaultValue: "table", style: { display: 'grid', gridTemplateColumns: 'repeat(3, 72px)' }, children: [_jsxs(ToggleGroupItem, { value: "table", "aria-label": "Table", children: [_jsx(Table, { size: 16 }), "Table"] }), _jsxs(ToggleGroupItem, { value: "kanban", "aria-label": "Kanban", children: [_jsx(Kanban, { size: 16 }), "Kanban"] }), _jsxs(ToggleGroupItem, { value: "chart", "aria-label": "Chart", disabled: true, children: [_jsx(BarChart3, { size: 16 }), "Chart"] })] }) }), _jsxs(Section, { name: "settings-row", children: [_jsxs(YStack, { width: 320, gap: 2, children: [_jsx(FieldSwitch, { label: "Compact view", description: "Fewer fields per card", checked: true, onChange: NOOP }), _jsx(FieldSwitch, { label: "Hide empty groups", checked: false, onChange: NOOP, disabled: true })] }), _jsx(Density, { value: "compact", children: _jsx(YStack, { width: 360, children: _jsx(SettingsHeading, { title: "Members", detail: "Who can see and edit records in this workspace." }) }) }), _jsxs(Text, { children: ["Visible", _jsx(VisuallyHidden, { children: _jsx(Text, { children: "read aloud only" }) })] })] })] }));
+}
+const NOOP = () => { };
+const Edit = () => (_jsx(Button, { size: "icon-2xs", variant: "ghost", emphasis: "subtle", "aria-label": "Edit", children: _jsx(Pencil, {}) }));
+/** Every row variant that carries its own style, standalone. */
+export function Rows() {
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { name: "menu-row", children: _jsxs(YStack, { width: 240, gap: 2, children: [_jsx(MenuRow, { size: "row", label: "People", icon: _jsx(User, { size: 16 }), onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Companies", icon: _jsx(Building2, { size: 16 }), iconContainer: true, contextual: "12", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Settings", icon: _jsx(Settings, { size: 16 }), contextual: "\u2318,", contextualPosition: "right", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Copy link", icon: _jsx(Copy, { size: 16 }), shortcut: ['⌘', 'L'], onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Group by", submenu: true, onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Sort", submenu: "open", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Delete", icon: _jsx(Trash2, { size: 16 }), danger: true, onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Add a field", placeholder: true, onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Name", icon: _jsx(User, { size: 16 }), grip: "always", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Email", icon: _jsx(User, { size: 16 }), grip: "onHover", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Phones", actions: _jsx(Edit, {}), onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Links", actions: _jsx(Edit, {}), actionsVisibility: "always", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Ada Lovelace", variant: "suggestion", selected: true, onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Grace Hopper", variant: "suggestion", onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Focused", focused: true, onPress: NOOP }), _jsx(MenuRow, { size: "row", label: "Disabled", disabled: true, onPress: NOOP })] }) }), _jsx(Section, { name: "item-row", children: _jsxs(YStack, { width: 240, gap: 2, children: [_jsx(Item, { size: "row", indicator: "check", selected: true, children: "Selected, check" }), _jsx(Item, { size: "row", indicator: "checkbox", selected: true, children: "Selected, box" }), _jsx(Item, { size: "row", indicator: "checkbox", children: "Unselected, box" }), _jsx(Item, { size: "row", selected: true, children: "Selected, tint" }), _jsx(Item, { size: "row", focused: true, children: "Focused" }), _jsx(Item, { size: "row", shortcut: ['⌘', 'K'], children: "Shortcut" }), _jsx(Item, { size: "row", actions: _jsx(Edit, {}), children: "Actions on hover" }), _jsx(Item, { size: "row", actions: _jsx(Edit, {}), actionsVisibility: "always", children: "Actions always" }), _jsx(Item, { size: "row", hasSubmenu: true, children: "Submenu" }), _jsx(Item, { size: "row", color: "danger", children: "Danger" }), _jsx(Item, { size: "row", disabled: true, hasSubmenu: true, children: "Disabled" }), _jsx(Item, { size: "row", render: "button", onPress: NOOP, children: "As a button" })] }) }), _jsxs(Section, { name: "grip-record", children: [_jsx(XStack, { position: "relative", width: 160, height: 96, borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: _jsx(Grip, { side: "right", span: 160, floor: 120, ceil: 240, onSpan: NOOP, label: "Resize panel", bar: "edge" }) }), _jsx(XStack, { position: "relative", width: 160, height: 96, borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: _jsx(Grip, { side: "left", span: 160, floor: 120, ceil: 240, onSpan: NOOP, label: "Resize pane", bar: "inline" }) })] })] }));
+}
+/** A record picker: search, a scrollable section of options, actions, an empty line. */
+export function Picker({ autoFocus = false, open = true }) {
+    const [q, setQ] = useState('');
+    const all = ['Ada Lovelace', 'Grace Hopper', 'Katherine Johnson', 'Margaret Hamilton', 'Radia Perlman', 'Barbara Liskov', 'Frances Allen'];
+    const shown = all.filter((n) => n.toLowerCase().includes(q.trim().toLowerCase()));
+    return (_jsxs(DropdownMenu, { ...(open ? { open: true } : null), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "outline", children: "Assignee" }) }), _jsxs(DropdownMenuContent, { minW: 240, ...{ 'data-gallery-menu': 'picker' }, children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search people", autoFocus: autoFocus }), _jsx(DropdownMenuSelectionGroup, { multiple: true, defaultValue: ['Ada Lovelace'], children: _jsx(DropdownMenuSection, { label: "People", scrollable: true, children: shown.map((n) => (_jsx(DropdownMenuOptionItem, { value: n, children: n }, n))) }) }), shown.length === 0 ? _jsx(DropdownMenuEmpty, { children: "No person matches" }) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { actions: _jsx(Edit, {}), onSelect: NOOP, children: "Add person" })] })] }));
+}
+/** View options: pages, a back row, a header with a close. */
+export function Paged({ open = true }) {
+    return (_jsxs(DropdownMenu, { ...(open ? { open: true } : null), defaultPage: "options", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", children: "Options" }) }), _jsxs(DropdownMenuContent, { ...{ 'data-gallery-menu': 'paged' }, children: [_jsxs(DropdownMenuPage, { id: "options", children: [_jsxs(DropdownMenuHeader, { children: [_jsx(DropdownMenuTitle, { children: "View options" }), _jsx(DropdownMenuClose, { "aria-label": "Close" })] }), _jsx(DropdownMenuItem, { page: "fields", children: "Fields" }), _jsxs(DropdownMenuSelectionGroup, { defaultValue: "table", children: [_jsx(DropdownMenuLabel, { variant: "band", children: "Layout" }), _jsx(DropdownMenuOptionItem, { value: "table", children: "Table" }), _jsx(DropdownMenuOptionItem, { value: "kanban", children: "Kanban" }), _jsx(DropdownMenuOptionItem, { value: "calendar", indicator: "none", children: "Calendar" })] }), _jsx(DropdownMenuLoading, { children: "Counting records" })] }), _jsxs(DropdownMenuPage, { id: "fields", children: [_jsx(DropdownMenuBack, { children: "Fields" }), _jsx(DropdownMenuItem, { children: "Name" })] })] })] }));
+}
+export function Menus() {
+    return (_jsxs(_Fragment, { children: [_jsx(Rows, {}), _jsx(Surfaces, {}), _jsxs(Section, { name: "dropdown-record", children: [_jsx(Picker, {}), _jsx(Paged, {})] }), _jsxs(Section, { name: "floating-record", children: [_jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Sync" }), _jsx(TooltipContent, { startIcon: _jsx(Info, { size: 14 }), description: 'Last synced 2 minutes ago.\nNext in 3.', children: "Mailbox sync" })] }) }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Small panel" }), _jsx(PopoverContent, { size: "sm", arrow: true, children: "Record preview" })] })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "menus-compact", children: [_jsx(YStack, { width: 240, gap: 2, children: _jsx(MenuRow, { size: "row", label: "Compact row", onPress: NOOP }) }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Compact panel" }), _jsx(PopoverContent, { children: "Compact preview" })] })] }) })] }));
+}
+//# sourceMappingURL=menus.js.map

package/dist/gallery/menus.js.map

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

package/dist/gallery/records.cjs

@@ -0,0 +1,33 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Records = Records;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit in the gallery: the parts merged from twenty-ui (MIT, NOTICE),
+ * every variant, at both densities.
+ *
+ * A module of the one gallery rather than a second list: `Gallery` renders it,
+ * so the stylesheet generator, the render test and the consumer screenshots all
+ * see these exactly as they see everything else. Each group of the merge adds
+ * its sections here, and each section is rendered twice where density changes
+ * what it draws — once regular, once inside `<Density value="compact">`.
+ */
+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 input_1 = require("../backends/gui/input.cjs");
+const input_group_1 = require("../backends/gui/input-group.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const display_1 = require("./display.cjs");
+const fields_1 = require("./fields.cjs");
+const compound_1 = require("./compound.cjs");
+const menus_1 = require("./menus.cjs");
+const feedback_1 = require("./feedback.cjs");
+const frames_1 = require("./frames.cjs");
+const NOOP = () => { };
+/** The record sizes, beside the regular ones they sit under. */
+const SIZES = ['xs', 'icon-xs', 'icon-2xs'];
+function Records() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button-record", children: [SIZES.map((size) => ((0, jsx_runtime_1.jsx)(button_1.Button, { size: size, variant: "ghost", "aria-label": size, children: size.startsWith('icon') ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}) : size }, size))), (0, jsx_runtime_1.jsx)(button_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}), children: "New record" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", endIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, {}), children: "Sort" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", emphasis: "subtle", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}), children: "Add filter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Remove", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "input-record", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { size: "sm", placeholder: "sm" }), (0, jsx_runtime_1.jsx)(input_1.Input, { size: "xs", placeholder: "xs" }), (0, jsx_runtime_1.jsx)(input_1.Input, { size: "sm", placeholder: "Invalid", "aria-invalid": true }), (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { start: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16 }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "Search any field" }) }), (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { size: "sm", start: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16 }), end: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-2xs", variant: "ghost", "aria-label": "Clear", onPress: NOOP, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}) }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "sm group" }) }), (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { size: "xs", end: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-2xs", variant: "ghost", "aria-label": "Clear", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, {}) }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "xs group", "aria-invalid": true }) }), (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { size: "sm", start: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16 }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "Disabled", disabled: true }) })] }), (0, jsx_runtime_1.jsx)(fields_1.FieldsGallery, {}), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "density-compact", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Update view" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}), children: "Add filter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "primary", children: "Save" }), (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "Compact field" }), (0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { start: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16 }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { placeholder: "Compact group" }) })] }) }), (0, jsx_runtime_1.jsx)(display_1.Display, {}), (0, jsx_runtime_1.jsx)(compound_1.Compound, {}), (0, jsx_runtime_1.jsx)(menus_1.Menus, {}), (0, jsx_runtime_1.jsx)(feedback_1.Feedback, {}), (0, jsx_runtime_1.jsx)(frames_1.Frames, {})] }));
+}

package/dist/gallery/records.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"records.d.ts","sourceRoot":"","sources":["../../src/gallery/records.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,OAAO,gCA6DtB"}

package/dist/gallery/records.js

@@ -0,0 +1,31 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit in the gallery: the parts merged from twenty-ui (MIT, NOTICE),
+ * every variant, at both densities.
+ *
+ * A module of the one gallery rather than a second list: `Gallery` renders it,
+ * so the stylesheet generator, the render test and the consumer screenshots all
+ * see these exactly as they see everything else. Each group of the merge adds
+ * its sections here, and each section is rendered twice where density changes
+ * what it draws — once regular, once inside `<Density value="compact">`.
+ */
+import { ChevronDown, Plus, Search, X } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Button } from '../backends/gui/button.js';
+import { Input } from '../backends/gui/input.js';
+import { InputGroup } from '../backends/gui/input-group.js';
+import { Density } from '../backends/gui/density.js';
+import { Display } from './display.js';
+import { FieldsGallery } from './fields.js';
+import { Compound } from './compound.js';
+import { Menus } from './menus.js';
+import { Feedback } from './feedback.js';
+import { Frames } from './frames.js';
+const NOOP = () => { };
+/** The record sizes, beside the regular ones they sit under. */
+const SIZES = ['xs', 'icon-xs', 'icon-2xs'];
+export function Records() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "button-record", children: [SIZES.map((size) => (_jsx(Button, { size: size, variant: "ghost", "aria-label": size, children: size.startsWith('icon') ? _jsx(Plus, {}) : size }, size))), _jsx(Button, { startIcon: _jsx(Plus, {}), children: "New record" }), _jsx(Button, { size: "sm", variant: "outline", endIcon: _jsx(ChevronDown, {}), children: "Sort" }), _jsx(Button, { size: "xs", variant: "ghost", emphasis: "subtle", startIcon: _jsx(Plus, {}), children: "Add filter" }), _jsx(Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Remove", children: _jsx(X, {}) })] }), _jsxs(Section, { name: "input-record", children: [_jsx(Input, { size: "sm", placeholder: "sm" }), _jsx(Input, { size: "xs", placeholder: "xs" }), _jsx(Input, { size: "sm", placeholder: "Invalid", "aria-invalid": true }), _jsx(InputGroup, { start: _jsx(Search, { size: 16 }), children: _jsx(Input, { placeholder: "Search any field" }) }), _jsx(InputGroup, { size: "sm", start: _jsx(Search, { size: 16 }), end: _jsx(Button, { size: "icon-2xs", variant: "ghost", "aria-label": "Clear", onPress: NOOP, children: _jsx(X, {}) }), children: _jsx(Input, { placeholder: "sm group" }) }), _jsx(InputGroup, { size: "xs", end: _jsx(Button, { size: "icon-2xs", variant: "ghost", "aria-label": "Clear", children: _jsx(X, {}) }), children: _jsx(Input, { placeholder: "xs group", "aria-invalid": true }) }), _jsx(InputGroup, { size: "sm", start: _jsx(Search, { size: 16 }), children: _jsx(Input, { placeholder: "Disabled", disabled: true }) })] }), _jsx(FieldsGallery, {}), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "density-compact", children: [_jsx(Button, { children: "Update view" }), _jsx(Button, { variant: "ghost", startIcon: _jsx(Plus, {}), children: "Add filter" }), _jsx(Button, { variant: "primary", children: "Save" }), _jsx(Input, { placeholder: "Compact field" }), _jsx(InputGroup, { start: _jsx(Search, { size: 16 }), children: _jsx(Input, { placeholder: "Compact group" }) })] }) }), _jsx(Display, {}), _jsx(Compound, {}), _jsx(Menus, {}), _jsx(Feedback, {}), _jsx(Frames, {})] }));
+}
+//# sourceMappingURL=records.js.map

package/dist/gallery/records.js.map

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

package/dist/gallery/section.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * One gallery section. `data-gallery` names it so a browser test can scope its
+ * assertions without depending on document order.
+ */
+const Section = ({ name, children }) => ((0, jsx_runtime_1.jsx)("section", { "data-gallery": name, style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 12,
+        alignItems: 'flex-start',
+        width: '100%',
+        maxWidth: 880,
+    }, children: children }));
+exports.Section = Section;

package/dist/gallery/section.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/**
+ * One gallery section. `data-gallery` names it so a browser test can scope its
+ * assertions without depending on document order.
+ */
+export declare const Section: ({ name, children }: {
+    name: string;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/gallery/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;GAGG;AACH,eAAO,MAAM,OAAO,uBAAwB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAchF,CAAA"}

package/dist/gallery/section.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * One gallery section. `data-gallery` names it so a browser test can scope its
+ * assertions without depending on document order.
+ */
+export const Section = ({ name, children }) => (_jsx("section", { "data-gallery": name, style: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 12,
+        alignItems: 'flex-start',
+        width: '100%',
+        maxWidth: 880,
+    }, children: children }));
+//# sourceMappingURL=section.js.map

package/dist/gallery/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../src/gallery/section.tsx"],"names":[],"mappings":";AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAyC,EAAE,EAAE,CAAC,CACpF,kCACgB,IAAI,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,EAAE;QACP,UAAU,EAAE,YAAY;QACxB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG;KACd,YAEA,QAAQ,GACD,CACX,CAAA"}