@orcestr/ui 0.1.0 → 0.2.0

package/dist/example/ExampleFieldsSection.js

@@ -33,26 +33,24 @@ export function FieldsSection({ stepperValue, onStepperValueChange, dateValue, o
     const selectedPaymentTerm = inlinePaymentTermOptions.find((item) => item.key === paymentTermKey);
     const selectedOwners = useMemo(() => inlineOwnerOptions.filter((item) => ownerKeys.includes(item.key)), [ownerKeys]);
     const toggleOwner = (key) => {
-        setOwnerKeys((current) => current.includes(key)
-            ? current.filter((item) => item !== key)
-            : [...current, key]);
+        setOwnerKeys((current) => current.includes(key) ? current.filter((item) => item !== key) : [...current, key]);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'text-fields-example', title: 'Text fields', description: 'TextField and TextArea inside Field.', children: _jsxs(ExampleTile, { title: 'Text fields', code: codeSamples.textFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Search', helperText: 'Clearable field with left slot.', children: _jsxs(Flex, { g: 2, a: 'c', children: [_jsx(TextField, { size: 2, placeholder: 'Search item', clearable: true, leftSlot: _jsx(LuSearch, { size: 16 }) }), _jsx(Button, { size: 2, v: 'surface', children: "Search" })] }) }), _jsx(Field, { label: 'Comment', children: _jsx(TextArea, { rows: 4, placeholder: 'Internal note' }) })] }) }), _jsx(UiExampleSection, { id: 'grouped-fields-example', title: 'Grouped fields', description: 'Layout primitives group fields without owning form state.', children: _jsx(ExampleTile, { title: 'Grouped fields', code: codeSamples.groupedFields, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Request details" }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Layout primitives group fields without owning state." })] }), _jsxs(Stack, { g: 3, children: [_jsxs(Grid, { columns: 'repeat(auto-fit, minmax(min(100%, 180px), 1fr))', g: 3, children: [_jsx(Field, { label: 'Source', required: true, error: 'Choose a source', children: _jsx(TextField, { placeholder: 'Search source', invalid: true }) }), _jsx(Field, { label: 'Contact', children: _jsx(TextField, { placeholder: 'Name or email' }) })] }), _jsx(Field, { label: 'Review note', helperText: 'Visible to operators.', children: _jsx(TextArea, { rows: 3, placeholder: 'Internal instructions' }) }), _jsxs(Flex, { g: 2, j: 'e', wrap: true, children: [_jsx(Button, { type: 'button', v: 'surface', children: "Cancel" }), _jsx(Button, { type: 'button', children: "Save request" })] })] })] }) }) }), _jsx(UiExampleSection, { id: 'inline-edit-example', title: 'Inline edit', description: 'Compact value displays for editable entity fields.', children: _jsx(ExampleTile, { title: 'Inline edit', code: codeSamples.inlineEdit, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsx(Field, { label: 'Single value', children: _jsx(InlineEditField, { label: selectedSupplier?.label ?? 'Choose supplier', meta: 'Supplier', onOpen: () => setSupplierOpen(true), action: (_jsx(Popover, { open: supplierOpen, onOpenChange: setSupplierOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit supplier' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Listbox, { className: 'oui-combobox-options', items: inlineSupplierOptions.map((item) => ({
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "text-fields-example", title: "Text fields", description: "TextField and TextArea inside Field.", children: _jsxs(ExampleTile, { title: "Text fields", code: codeSamples.textFields, onOpen: onOpenCode, children: [_jsx(Field, { label: "Search", helperText: "Clearable field with left slot.", children: _jsxs(Flex, { g: 2, a: "c", children: [_jsx(TextField, { size: 2, placeholder: "Search item", clearable: true, leftSlot: _jsx(LuSearch, { size: 16 }) }), _jsx(Button, { size: 2, v: "surface", children: "Search" })] }) }), _jsx(Field, { label: "Comment", children: _jsx(TextArea, { rows: 4, placeholder: "Internal note" }) })] }) }), _jsx(UiExampleSection, { id: "grouped-fields-example", title: "Grouped fields", description: "Layout primitives group fields without owning form state.", children: _jsx(ExampleTile, { title: "Grouped fields", code: codeSamples.groupedFields, onOpen: onOpenCode, children: _jsxs(Section, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Text, { fw: 760, children: "Request details" }), _jsx(Text, { fs: "12px", tone: "muted", children: "Layout primitives group fields without owning state." })] }), _jsxs(Stack, { g: 3, children: [_jsxs(Grid, { columns: "repeat(auto-fit, minmax(min(100%, 180px), 1fr))", g: 3, children: [_jsx(Field, { label: "Source", required: true, error: "Choose a source", children: _jsx(TextField, { placeholder: "Search source", invalid: true }) }), _jsx(Field, { label: "Contact", children: _jsx(TextField, { placeholder: "Name or email" }) })] }), _jsx(Field, { label: "Review note", helperText: "Visible to operators.", children: _jsx(TextArea, { rows: 3, placeholder: "Internal instructions" }) }), _jsxs(Flex, { g: 2, j: "e", wrap: true, children: [_jsx(Button, { type: "button", v: "surface", children: "Cancel" }), _jsx(Button, { type: "button", children: "Save request" })] })] })] }) }) }), _jsx(UiExampleSection, { id: "inline-edit-example", title: "Inline edit", description: "Compact value displays for editable entity fields.", children: _jsx(ExampleTile, { title: "Inline edit", code: codeSamples.inlineEdit, onOpen: onOpenCode, children: _jsxs(Stack, { g: 3, children: [_jsx(Field, { label: "Single value", children: _jsx(InlineEditField, { label: selectedSupplier?.label ?? 'Choose supplier', meta: "Supplier", onOpen: () => setSupplierOpen(true), action: _jsx(Popover, { open: supplierOpen, onOpenChange: setSupplierOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit supplier" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Listbox, { className: "oui-combobox-options", items: inlineSupplierOptions.map((item) => ({
                                                 value: item.key,
                                                 label: item.label,
                                             })), value: supplierKey, onValueChange: (nextKey) => {
                                                 setSupplierKey(nextKey);
                                                 setSupplierOpen(false);
-                                            } }) })), clearable: Boolean(selectedSupplier), onClear: () => setSupplierKey(null) }) }), _jsx(Field, { label: 'Single value without meta', children: _jsx(InlineEditField, { label: selectedPaymentTerm?.label ?? 'Choose payment terms', onOpen: () => setPaymentOpen(true), action: (_jsx(Popover, { open: paymentOpen, onOpenChange: setPaymentOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit payment terms' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Listbox, { className: 'oui-combobox-options', items: inlinePaymentTermOptions.map((item) => ({
+                                            } }) }), clearable: Boolean(selectedSupplier), onClear: () => setSupplierKey(null) }) }), _jsx(Field, { label: "Single value without meta", children: _jsx(InlineEditField, { label: selectedPaymentTerm?.label ?? 'Choose payment terms', onOpen: () => setPaymentOpen(true), action: _jsx(Popover, { open: paymentOpen, onOpenChange: setPaymentOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit payment terms" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Listbox, { className: "oui-combobox-options", items: inlinePaymentTermOptions.map((item) => ({
                                                 value: item.key,
                                                 label: item.label,
                                             })), value: paymentTermKey, onValueChange: (nextKey) => {
                                                 setPaymentTermKey(nextKey);
                                                 setPaymentOpen(false);
-                                            } }) })), clearable: Boolean(selectedPaymentTerm), onClear: () => setPaymentTermKey(null) }) }), _jsx(Field, { label: 'Multiple values', children: _jsx(InlineEditMultiField, { onOpen: () => setOwnerOpen(true), action: (_jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(Popover, { open: ownerOpen, onOpenChange: setOwnerOpen, trigger: (_jsx(IconButton, { size: 1, v: 'ghost', icon: _jsx(LuPencil, { size: 13 }), "aria-label": 'Edit owners' })), className: 'oui-combobox-content oui-ui-inline-edit-popover', sideOffset: 4, children: _jsx(Stack, { g: 1, p: 1, children: inlineOwnerOptions.map((item) => {
+                                            } }) }), clearable: Boolean(selectedPaymentTerm), onClear: () => setPaymentTermKey(null) }) }), _jsx(Field, { label: "Multiple values", children: _jsx(InlineEditMultiField, { onOpen: () => setOwnerOpen(true), action: _jsx("span", { onClick: (event) => event.stopPropagation(), children: _jsx(Popover, { open: ownerOpen, onOpenChange: setOwnerOpen, trigger: _jsx(IconButton, { size: 1, v: "ghost", icon: _jsx(LuPencil, { size: 13 }), "aria-label": "Edit owners" }), className: "oui-combobox-content oui-ui-inline-edit-popover", sideOffset: 4, children: _jsx(Stack, { g: 1, p: 1, children: inlineOwnerOptions.map((item) => {
                                                     const selected = ownerKeys.includes(item.key);
-                                                    return (_jsxs("button", { type: 'button', className: 'oui-combobox-option oui-ui-inline-edit-option', "data-selected": selected ? 'true' : 'false', onClick: () => toggleOwner(item.key), children: [_jsx("span", { className: 'oui-multi-select-check', children: selected ? _jsx(LuCheck, { size: 13 }) : null }), _jsx("span", { className: 'oui-combobox-option-main', children: item.label })] }, item.key));
-                                                }) }) }) })), col: true, empty: 'No owners selected', children: selectedOwners.length
-                                        ? selectedOwners.map((item, index) => (_jsx(Badge, { tone: index === 0 ? 'info' : 'neutral', v: 'soft', children: item.label }, item.key)))
-                                        : null }) }), _jsx(Field, { label: 'Pending update', children: _jsx(InlineEditField, { label: 'Payment terms', meta: 'Saving', busy: true }) })] }) }) }), _jsx(UiExampleSection, { id: 'number-date-fields-example', title: 'Number and date fields', description: 'StepperInput, NumberField and DatePicker.', children: _jsxs(ExampleTile, { title: 'Number and date fields', code: codeSamples.numberAndDateFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Quantity', children: _jsx(StepperInput, { value: stepperValue, onChange: onStepperValueChange, min: 0, max: 200 }) }), _jsx(Field, { label: 'Price', children: _jsx(NumberField, { defaultValue: 1250, min: 0 }) }), _jsx(Field, { label: 'Date', children: _jsx(DatePicker, { value: dateValue, onValueChange: onDateValueChange }) })] }) }), _jsx(UiExampleSection, { id: 'date-range-example', title: 'Date range', description: 'DateRangePicker and preset helper.', children: _jsxs(ExampleTile, { title: 'Date range', code: codeSamples.dateRangeFields, onOpen: onOpenCode, children: [_jsx(Field, { label: 'Range', children: _jsx(DateRangePicker, { value: dateRange, onValueChange: onDateRangeChange }) }), _jsx(DateRangePresetPicker, { today: '2026-06-26', onValueChange: onDateRangeChange }), _jsx(Text, { fs: '12px', tone: 'muted', children: "Date inputs stay as controls. Form ownership belongs to the application." })] }) })] }));
+                                                    return (_jsxs("button", { type: "button", className: "oui-combobox-option oui-ui-inline-edit-option", "data-selected": selected ? 'true' : 'false', onClick: () => toggleOwner(item.key), children: [_jsx("span", { className: "oui-multi-select-check", children: selected ? (_jsx(LuCheck, { size: 13 })) : null }), _jsx("span", { className: "oui-combobox-option-main", children: item.label })] }, item.key));
+                                                }) }) }) }), col: true, empty: "No owners selected", children: selectedOwners.length
+                                        ? selectedOwners.map((item, index) => (_jsx(Badge, { tone: index === 0 ? 'info' : 'neutral', v: "soft", children: item.label }, item.key)))
+                                        : null }) }), _jsx(Field, { label: "Pending update", children: _jsx(InlineEditField, { label: "Payment terms", meta: "Saving", busy: true }) })] }) }) }), _jsx(UiExampleSection, { id: "number-date-fields-example", title: "Number and date fields", description: "StepperInput, NumberField and DatePicker.", children: _jsxs(ExampleTile, { title: "Number and date fields", code: codeSamples.numberAndDateFields, onOpen: onOpenCode, children: [_jsx(Field, { label: "Quantity", children: _jsx(StepperInput, { value: stepperValue, onChange: onStepperValueChange, min: 0, max: 200 }) }), _jsx(Field, { label: "Price", children: _jsx(NumberField, { defaultValue: 1250, min: 0 }) }), _jsx(Field, { label: "Date", children: _jsx(DatePicker, { value: dateValue, onValueChange: onDateValueChange }) })] }) }), _jsx(UiExampleSection, { id: "date-range-example", title: "Date range", description: "DateRangePicker and preset helper.", children: _jsxs(ExampleTile, { title: "Date range", code: codeSamples.dateRangeFields, onOpen: onOpenCode, children: [_jsx(Field, { label: "Range", children: _jsx(DateRangePicker, { value: dateRange, onValueChange: onDateRangeChange }) }), _jsx(DateRangePresetPicker, { today: "2026-06-26", onValueChange: onDateRangeChange }), _jsx(Text, { fs: "12px", tone: "muted", children: "Date inputs stay as controls. Form ownership belongs to the application." })] }) })] }));
 }

package/dist/example/ExampleFoundationsSection.d.ts

@@ -1,5 +1,5 @@
 import { type CodeExample } from './codeSamples';
-export declare function FoundationsSection({ onOpenCode, }: {
+export declare function FoundationsSection({ onOpenCode }: {
     onOpenCode: (example: CodeExample) => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExampleFoundationsSection.d.ts.map

package/dist/example/ExampleFoundationsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFoundationsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFoundationsSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAe/C,wBAAgB,kBAAkB,CAAC,EAC/B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAiCA"}
+{"version":3,"file":"ExampleFoundationsSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleFoundationsSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAejD,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CAiChG"}

package/dist/example/ExampleFoundationsSection.js

@@ -9,17 +9,17 @@ const providerSample = {
     code: `import {OrcestrUiProvider} from '@orcestr/ui';
 
 <OrcestrUiProvider
-    surface='operations'
+    surface='deliveries'
     locale='ru'
 >
     <App />
 </OrcestrUiProvider>`,
 };
-export function FoundationsSection({ onOpenCode, }) {
-    return (_jsx(UiExampleSection, { id: 'foundations', title: '\u041A\u043E\u043D\u0442\u0440\u0430\u043A\u0442\u044B \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438', description: '\u0411\u0430\u0437\u043E\u0432\u044B\u0435 \u043F\u0440\u0430\u0432\u0438\u043B\u0430 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F Orcestr UI: provider, \u043F\u0443\u0431\u043B\u0438\u0447\u043D\u044B\u0439 API, \u0442\u043E\u043A\u0435\u043D\u044B \u0438 \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438.', children: _jsx(Stack, { g: 3, children: _jsx(ExampleTile, { id: 'provider-contract-example', title: 'OrcestrUiProvider', code: providerSample.code, onOpen: onOpenCode, children: _jsx("div", { className: 'oui-ui-contract-grid', children: [
+export function FoundationsSection({ onOpenCode }) {
+    return (_jsx(UiExampleSection, { id: "foundations", title: "\u041A\u043E\u043D\u0442\u0440\u0430\u043A\u0442\u044B \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438", description: "\u0411\u0430\u0437\u043E\u0432\u044B\u0435 \u043F\u0440\u0430\u0432\u0438\u043B\u0430 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F Orcestr UI: provider, \u043F\u0443\u0431\u043B\u0438\u0447\u043D\u044B\u0439 API, \u0442\u043E\u043A\u0435\u043D\u044B \u0438 \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438.", children: _jsx(Stack, { g: 3, children: _jsx(ExampleTile, { id: "provider-contract-example", title: "OrcestrUiProvider", code: providerSample.code, onOpen: onOpenCode, children: _jsx("div", { className: "oui-ui-contract-grid", children: [
                         ['Provider', 'theme, locale, portal, overlays, toast'],
                         ['Публичный API', 'size, tone, v, disabled, loading, invalid, testId'],
                         ['Стили', 'только oui-* классы внутри @orcestr/ui/styles.css'],
                         ['Проверки', 'tsc, contract tests, diff check, /ui smoke'],
-                    ].map(([title, description]) => (_jsxs("div", { className: 'oui-ui-contract-item', children: [_jsx(Badge, { tone: 'primary', children: title }), _jsx(Text, { fs: '12px', tone: 'muted', children: description })] }, title))) }) }) }) }));
+                    ].map(([title, description]) => (_jsxs("div", { className: "oui-ui-contract-item", children: [_jsx(Badge, { tone: "primary", children: title }), _jsx(Text, { fs: "12px", tone: "muted", children: description })] }, title))) }) }) }) }));
 }

package/dist/example/ExampleOverlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleOverlays.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlays.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,IAAI,CAAC;AAExC,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAuCvC,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,OAAO,GACV,EAAE,oBAAoB,2CAgOtB"}
+{"version":3,"file":"ExampleOverlays.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlays.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,IAAI,CAAC;AAE1C,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAqCvC,KAAK,oBAAoB,GAAG;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,OAAO,GACV,EAAE,oBAAoB,2CA+OtB"}

package/dist/example/ExampleOverlays.js

@@ -2,16 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import {} from 'react';
 import { LuX } from 'react-icons/lu';
-import { Button, CommandPalette, Flex, Field, IconButton, Modal, Stack, Text, TextField } from '..';
+import { Button, CommandPalette, Flex, Field, IconButton, Modal, Stack, Text, TextField, } from '..';
 import { getCommandItems } from './exampleData';
 import {} from '..';
 function ExampleModal({ title, description, footer, children, onOpenChange, ...props }) {
-    return (_jsxs(Modal, { ...props, onOpenChange: onOpenChange, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [_jsx("h2", { className: 'oui-modal-title', children: title }), description ? (_jsx("p", { className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": 'Close', onClick: () => onOpenChange(false) })] }), _jsx(Modal.Body, { children: children }), footer ? _jsx(Modal.Footer, { children: footer }) : null] }));
+    return (_jsxs(Modal, { ...props, onOpenChange: onOpenChange, children: [_jsxs(Modal.Header, { children: [_jsxs("div", { className: "oui-modal-title-wrap", children: [_jsx("h2", { className: "oui-modal-title", children: title }), description ? _jsx("p", { className: "oui-modal-description", children: description }) : null] }), _jsx(IconButton, { v: "ghost", icon: _jsx(LuX, { size: 18 }), "aria-label": "Close", onClick: () => onOpenChange(false) })] }), _jsx(Modal.Body, { children: children }), footer ? _jsx(Modal.Footer, { children: footer }) : null] }));
 }
 export function ExampleOverlays({ locale, modalOpen, setModalOpen, nestedOpen, setNestedOpen, blurModalOpen, setBlurModalOpen, blurNestedOpen, setBlurNestedOpen, blurFinalOpen, setBlurFinalOpen, fastModalOpen, setFastModalOpen, slowModalOpen, setSlowModalOpen, riseModalOpen, setRiseModalOpen, dangerModalOpen, setDangerModalOpen, paletteOpen, setPaletteOpen, onToast, }) {
     const commandItems = getCommandItems(locale);
-    return (_jsxs(_Fragment, { children: [_jsx(ExampleModal, { open: modalOpen, onOpenChange: setModalOpen, title: 'Custom modal', description: 'First modal layer with the default theme blur backdrop.', footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setNestedOpen(true), children: "Open nested" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "Nested modals stack above the previous layer and keep independent smooth open and close animations." }), _jsx(Field, { label: 'Modal field', children: _jsx(TextField, { placeholder: 'Focus stays inside modal' }) })] }) }), _jsx(ExampleModal, { open: nestedOpen, onOpenChange: setNestedOpen, title: 'Nested modal', description: 'Second layer with the same default modal animation.', maxWidth: 440, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This checks layer indexes, focus trap and escape handling." }), _jsx(Button, { onClick: () => onToast('Nested modal action completed', 'success'), children: "Show toast" })] }) }), _jsx(ExampleModal, { open: blurModalOpen, onOpenChange: setBlurModalOpen, title: 'Blur modal', description: 'Default modal surface with pure backdrop blur and no overlay tint.', maxWidth: 560, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 10, borderColor: 'color-mix(in srgb, var(--oui-primary-base) 34%, var(--oui-border))', radius: 10, shadow: '0 24px 90px rgb(0 0 0 / 44%)', footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setBlurModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurNestedOpen(true), children: "Open nested blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant checks a strong backdrop blur while the overlay tint stays fully transparent." }), _jsx(Field, { label: 'Reference', children: _jsx(TextField, { placeholder: 'ORD-2048' }) })] }) }), _jsx(ExampleModal, { open: blurNestedOpen, onOpenChange: setBlurNestedOpen, title: 'Nested blur modal', description: 'Second blur layer without overlay tint.', maxWidth: 500, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 8, borderColor: 'color-mix(in srgb, var(--oui-primary-base) 38%, var(--oui-border))', radius: 10, footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setBlurNestedOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurFinalOpen(true), children: "Open final blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This layer keeps the backdrop blur transparent while stacking above the first blur modal." }), _jsx(TextField, { placeholder: 'Nested value' })] }) }), _jsx(ExampleModal, { open: blurFinalOpen, onOpenChange: setBlurFinalOpen, title: 'Final blur modal', description: 'Top blur layer. Toast must appear above this modal.', maxWidth: 440, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 6, borderColor: 'color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))', radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "Use this modal to verify blur stacking and toast z-index." }), _jsx(Button, { onClick: () => onToast('Toast above nested blur modals', 'success'), children: "Show toast" })] }) }), _jsx(ExampleModal, { open: fastModalOpen, onOpenChange: setFastModalOpen, title: 'Fast modal', description: 'Short animationDuration passed directly to the modal.', maxWidth: 460, overlayColor: '#0b1020', overlayOpacity: 0.28, overlayBlur: 4, animationDuration: '160ms', children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant opens and closes quickly while still animating the backdrop blur." }), _jsx(Button, { onClick: () => setFastModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: slowModalOpen, onOpenChange: setSlowModalOpen, title: 'Very slow modal', description: 'Long animationDuration for checking smooth blur ramp.', maxWidth: 520, overlayColor: 'transparent', overlayOpacity: 0, overlayBlur: 14, animationDuration: '1200ms', borderColor: 'color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))', radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "The backdrop blur should build up and fade out gradually during the whole animation." }), _jsx(Button, { onClick: () => setSlowModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: riseModalOpen, onOpenChange: setRiseModalOpen, title: 'Rise modal', description: 'Legacy rise animation kept as an explicit modal animation variant.', maxWidth: 480, overlayColor: '#0b1020', overlayOpacity: 0.28, overlayBlur: 4, animation: 'rise', children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This keeps the previous small scale and vertical movement without content blur." }), _jsx(Button, { onClick: () => setRiseModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: dangerModalOpen, onOpenChange: setDangerModalOpen, title: 'Danger modal', description: 'Strong colored overlay, danger border and compact radius.', maxWidth: 500, overlayColor: '#3b0712', overlayOpacity: 0.48, overlayBlur: 3, borderColor: 'color-mix(in srgb, var(--oui-danger-base) 46%, var(--oui-border))', radius: 8, footer: _jsxs(Flex, { g: 2, j: 'e', w: '100%', children: [_jsx(Button, { v: 'surface', onClick: () => setDangerModalOpen(false), children: "Cancel" }), _jsx(Button, { tone: 'danger', onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ExampleModal, { open: modalOpen, onOpenChange: setModalOpen, title: "Custom modal", description: "First modal layer with the default theme blur backdrop.", footer: _jsxs(Flex, { g: 2, j: "e", w: "100%", children: [_jsx(Button, { v: "surface", onClick: () => setModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setNestedOpen(true), children: "Open nested" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "Nested modals stack above the previous layer and keep independent smooth open and close animations." }), _jsx(Field, { label: "Modal field", children: _jsx(TextField, { placeholder: "Focus stays inside modal" }) })] }) }), _jsx(ExampleModal, { open: nestedOpen, onOpenChange: setNestedOpen, title: "Nested modal", description: "Second layer with the same default modal animation.", maxWidth: 440, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This checks layer indexes, focus trap and escape handling." }), _jsx(Button, { onClick: () => onToast('Nested modal action completed', 'success'), children: "Show toast" })] }) }), _jsx(ExampleModal, { open: blurModalOpen, onOpenChange: setBlurModalOpen, title: "Blur modal", description: "Default modal surface with pure backdrop blur and no overlay tint.", maxWidth: 560, overlayColor: "transparent", overlayOpacity: 0, overlayBlur: 10, borderColor: "color-mix(in srgb, var(--oui-primary-base) 34%, var(--oui-border))", radius: 10, shadow: "0 24px 90px rgb(0 0 0 / 44%)", footer: _jsxs(Flex, { g: 2, j: "e", w: "100%", children: [_jsx(Button, { v: "surface", onClick: () => setBlurModalOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurNestedOpen(true), children: "Open nested blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This variant checks a strong backdrop blur while the overlay tint stays fully transparent." }), _jsx(Field, { label: "Reference", children: _jsx(TextField, { placeholder: "ORD-2048" }) })] }) }), _jsx(ExampleModal, { open: blurNestedOpen, onOpenChange: setBlurNestedOpen, title: "Nested blur modal", description: "Second blur layer without overlay tint.", maxWidth: 500, overlayColor: "transparent", overlayOpacity: 0, overlayBlur: 8, borderColor: "color-mix(in srgb, var(--oui-primary-base) 38%, var(--oui-border))", radius: 10, footer: _jsxs(Flex, { g: 2, j: "e", w: "100%", children: [_jsx(Button, { v: "surface", onClick: () => setBlurNestedOpen(false), children: "Close" }), _jsx(Button, { onClick: () => setBlurFinalOpen(true), children: "Open final blur" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This layer keeps the backdrop blur transparent while stacking above the first blur modal." }), _jsx(TextField, { placeholder: "Nested value" })] }) }), _jsx(ExampleModal, { open: blurFinalOpen, onOpenChange: setBlurFinalOpen, title: "Final blur modal", description: "Top blur layer. Toast must appear above this modal.", maxWidth: 440, overlayColor: "transparent", overlayOpacity: 0, overlayBlur: 6, borderColor: "color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))", radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "Use this modal to verify blur stacking and toast z-index." }), _jsx(Button, { onClick: () => onToast('Toast above nested blur modals', 'success'), children: "Show toast" })] }) }), _jsx(ExampleModal, { open: fastModalOpen, onOpenChange: setFastModalOpen, title: "Fast modal", description: "Short animationDuration passed directly to the modal.", maxWidth: 460, overlayColor: "#0b1020", overlayOpacity: 0.28, overlayBlur: 4, animationDuration: "160ms", children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This variant opens and closes quickly while still animating the backdrop blur." }), _jsx(Button, { onClick: () => setFastModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: slowModalOpen, onOpenChange: setSlowModalOpen, title: "Very slow modal", description: "Long animationDuration for checking smooth blur ramp.", maxWidth: 520, overlayColor: "transparent", overlayOpacity: 0, overlayBlur: 14, animationDuration: "1200ms", borderColor: "color-mix(in srgb, var(--oui-primary-base) 42%, var(--oui-border))", radius: 10, children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "The backdrop blur should build up and fade out gradually during the whole animation." }), _jsx(Button, { onClick: () => setSlowModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: riseModalOpen, onOpenChange: setRiseModalOpen, title: "Rise modal", description: "Legacy rise animation kept as an explicit modal animation variant.", maxWidth: 480, overlayColor: "#0b1020", overlayOpacity: 0.28, overlayBlur: 4, animation: "rise", children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This keeps the previous small scale and vertical movement without content blur." }), _jsx(Button, { onClick: () => setRiseModalOpen(false), children: "Close" })] }) }), _jsx(ExampleModal, { open: dangerModalOpen, onOpenChange: setDangerModalOpen, title: "Danger modal", description: "Strong colored overlay, danger border and compact radius.", maxWidth: 500, overlayColor: "#3b0712", overlayOpacity: 0.48, overlayBlur: 3, borderColor: "color-mix(in srgb, var(--oui-danger-base) 46%, var(--oui-border))", radius: 8, footer: _jsxs(Flex, { g: 2, j: "e", w: "100%", children: [_jsx(Button, { v: "surface", onClick: () => setDangerModalOpen(false), children: "Cancel" }), _jsx(Button, { tone: "danger", onClick: () => {
                                 setDangerModalOpen(false);
                                 onToast('Danger action confirmed', 'danger');
-                            }, children: "Confirm" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "This variant checks a colored backdrop without a hard flash on open or close." }), _jsx(TextField, { value: 'Archive selected record', readOnly: true })] }) }), _jsx(CommandPalette, { open: paletteOpen, onOpenChange: setPaletteOpen, items: commandItems, recentItems: commandItems.slice(1, 3), globalOpenEvents: ['orcestr:open-command-palette'], onSelect: (value) => onToast(`Command selected: ${value}`, 'info') })] }));
+                            }, children: "Confirm" })] }), children: _jsxs(Stack, { g: 3, children: [_jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "This variant checks a colored backdrop without a hard flash on open or close." }), _jsx(TextField, { value: "Archive selected record", readOnly: true })] }) }), _jsx(CommandPalette, { open: paletteOpen, onOpenChange: setPaletteOpen, items: commandItems, recentItems: commandItems.slice(1, 3), globalOpenEvents: ['orcestr:open-command-palette'], onSelect: (value) => onToast(`Command selected: ${value}`, 'info') })] }));
 }

package/dist/example/ExampleOverlaysSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAG5D,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAEvC,KAAK,oBAAoB,GAAG;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAgEF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CA8RtB"}
+{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,KAAK,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAEvC,KAAK,oBAAoB,GAAG;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,CAAC;AAuDF,wBAAgB,eAAe,CAAC,EAC5B,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,GACb,EAAE,oBAAoB,2CAyRtB"}

package/dist/example/ExampleOverlaysSection.js

@@ -19,60 +19,59 @@ const toastPositionVariants = [
         position: 'top-left',
         label: 'Status synced',
         tone: 'success',
-        message: 'Glass toast from the left edge.',
-        blur: 14,
+        message: 'Default glass toast from the left edge.',
     },
     {
         position: 'top-center',
         label: 'Command ready',
         tone: 'info',
-        message: 'Centered toast drops from the top.',
-        background: 'rgb(18 28 42 / 88%)',
-        blur: 10,
+        message: 'Centered toast uses the same glass surface.',
     },
     {
         position: 'top-right',
         label: 'Needs attention',
         tone: 'warning',
-        message: 'Right edge bubble animation.',
-        blur: 12,
+        message: 'Right edge toast keeps the same translucent surface.',
     },
     {
         position: 'bottom-left',
         label: 'Import queued',
         tone: 'info',
-        message: 'Static background, no blur.',
-        blur: false,
+        message: 'Bottom left toast keeps the same theme blur.',
     },
     {
         position: 'bottom-center',
         label: 'Batch completed',
         tone: 'success',
-        message: 'Bottom center rises into place.',
-        blur: 16,
+        message: 'Bottom center toast uses the theme defaults.',
     },
     {
         position: 'bottom-right',
         label: 'Export failed',
         tone: 'danger',
         message: 'Actionable toast from the right edge.',
-        blur: 12,
     },
 ];
 export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOpen, setRiseModalOpen, setSlowModalOpen, setDangerModalOpen, onOpenCode, }) {
     const toast = useToast();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'overlay-primitives-example', title: 'Overlay primitives', description: 'Popover, Tooltip and Modal entry points.', children: _jsxs(ExampleTile, { title: 'Popover, tooltip and modal', code: codeSamples.overlays, onOpen: onOpenCode, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Popover, { trigger: _jsx(Button, { v: 'surface', rightIcon: _jsx(LuChevronDown, { size: 16 }), children: "Open popover" }), children: _jsxs(Stack, { g: 2, p: 1, children: [_jsx(Text, { fw: 700, children: "Popover content" }), _jsx(Text, { color: 'var(--oui-muted)', fs: '13px', children: "Shared positioning and presence." })] }) }), _jsx(Tooltip, { content: 'Tooltip uses the same floating layer', children: _jsx(Button, { v: 'outline', children: "Hover me" }) }), _jsx(Button, { v: 'surface', onClick: () => setDialogOpen(true), children: "Dialog" }), _jsx(Button, { v: 'surface', onClick: () => setDrawerOpen(true), children: "Drawer" })] }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { onClick: () => setModalOpen(true), children: "Default modal" }), _jsx(Button, { v: 'surface', onClick: () => setBlurModalOpen(true), children: "Blur modal" }), _jsx(Button, { v: 'outline', onClick: () => setFastModalOpen(true), children: "Fast modal" }), _jsx(Button, { v: 'outline', onClick: () => setRiseModalOpen(true), children: "Rise modal" }), _jsx(Button, { v: 'outline', onClick: () => setSlowModalOpen(true), children: "Very slow modal" }), _jsx(Button, { v: 'soft', tone: 'danger', onClick: () => setDangerModalOpen(true), children: "Danger modal" })] })] }) }), _jsx(Dialog.Root, { open: dialogOpen, onOpenChange: setDialogOpen, children: _jsx(Dialog.Content, { maxWidth: 460, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Dialog.Title, { children: "Dialog title" }), _jsx(Dialog.Description, { children: "Dialog keeps the Modal layer but owns accessible title and description." })] }), _jsxs(Flex, { g: 2, j: 'e', children: [_jsx(Dialog.Close, { children: _jsx(Button, { v: 'surface', children: "Cancel" }) }), _jsx(Button, { onClick: () => setDialogOpen(false), children: "Confirm" })] })] }) }) }), _jsx(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, title: 'Drawer title', description: 'Drawer uses the same overlay stack and focus behavior.', footer: (_jsxs(Flex, { g: 2, j: 'e', children: [_jsx(Button, { v: 'surface', onClick: () => setDrawerOpen(false), children: "Close" }), _jsx(Button, { children: "Apply" })] })), children: _jsxs(Stack, { g: 2, children: [_jsx(Text, { tone: 'muted', fs: '13px', children: "Use Drawer for side panels and contextual forms." }), _jsx(Button, { v: 'soft', children: "Panel action" })] }) }), _jsx(UiExampleSection, { id: 'toast-example', title: 'Toast', description: 'Toast positions, actions, progress, dedupe and glass background.', children: _jsx(ExampleTile, { title: 'Toast', code: codeSamples.toast, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { v: 'soft', tone: 'success', onClick: () => toast.success({
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "overlay-primitives-example", title: "Overlay primitives", description: "Popover, Tooltip and Modal entry points.", children: _jsxs(ExampleTile, { title: "Popover, tooltip and modal", code: codeSamples.overlays, onOpen: onOpenCode, children: [_jsxs("div", { className: "oui-ui-row", children: [_jsx(Popover, { trigger: _jsx(Button, { v: "surface", rightIcon: _jsx(LuChevronDown, { size: 16 }), children: "Open popover" }), children: _jsxs(Stack, { g: 2, p: 1, children: [_jsx(Text, { fw: 700, children: "Popover content" }), _jsx(Text, { color: "var(--oui-muted)", fs: "13px", children: "Shared positioning and presence." })] }) }), _jsx(Tooltip, { content: "Tooltip uses the same floating layer", children: _jsx(Button, { v: "outline", children: "Hover me" }) }), _jsx(Button, { v: "surface", onClick: () => setDialogOpen(true), children: "Dialog" }), _jsx(Button, { v: "surface", onClick: () => setDrawerOpen(true), children: "Drawer" })] }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { onClick: () => setModalOpen(true), children: "Default modal" }), _jsx(Button, { v: "surface", onClick: () => setBlurModalOpen(true), children: "Blur modal" }), _jsx(Button, { v: "outline", onClick: () => setFastModalOpen(true), children: "Fast modal" }), _jsx(Button, { v: "outline", onClick: () => setRiseModalOpen(true), children: "Rise modal" }), _jsx(Button, { v: "outline", onClick: () => setSlowModalOpen(true), children: "Very slow modal" }), _jsx(Button, { v: "soft", tone: "danger", onClick: () => setDangerModalOpen(true), children: "Danger modal" })] })] }) }), _jsx(Dialog.Root, { open: dialogOpen, onOpenChange: setDialogOpen, children: _jsx(Dialog.Content, { maxWidth: 460, children: _jsxs(Stack, { g: 3, children: [_jsxs(Stack, { g: 1, children: [_jsx(Dialog.Title, { children: "Dialog title" }), _jsx(Dialog.Description, { children: "Dialog keeps the Modal layer but owns accessible title and description." })] }), _jsxs(Flex, { g: 2, j: "e", children: [_jsx(Dialog.Close, { children: _jsx(Button, { v: "surface", children: "Cancel" }) }), _jsx(Button, { onClick: () => setDialogOpen(false), children: "Confirm" })] })] }) }) }), _jsx(Drawer, { open: drawerOpen, onOpenChange: setDrawerOpen, title: "Drawer title", description: "Drawer uses the same overlay stack and focus behavior.", footer: _jsxs(Flex, { g: 2, j: "e", children: [_jsx(Button, { v: "surface", onClick: () => setDrawerOpen(false), children: "Close" }), _jsx(Button, { children: "Apply" })] }), children: _jsxs(Stack, { g: 2, children: [_jsx(Text, { tone: "muted", fs: "13px", children: "Use Drawer for side panels and contextual forms." }), _jsx(Button, { v: "soft", children: "Panel action" })] }) }), _jsx(UiExampleSection, { id: "toast-example", title: "Toast", description: "Toast positions, actions, progress, dedupe and glass background.", children: _jsx(ExampleTile, { title: "Toast", code: codeSamples.toast, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { v: "soft", tone: "success", onClick: () => toast.success({
                                             title: 'Saved successfully',
                                             message: 'The settings are synced with the current theme.',
                                             position: 'bottom-right',
-                                        }), children: "Success" }), _jsx(Button, { v: 'soft', tone: 'warning', onClick: () => toast.warning({
+                                        }), children: "Success" }), _jsx(Button, { v: "soft", tone: "success", onClick: () => toast.success({
+                                            title: 'Endless',
+                                            message: 'This success toast stays until you click it.',
+                                            position: 'bottom-right',
+                                            duration: null,
+                                            dedupeKey: 'endless-success-toast',
+                                        }), children: "Endless" }), _jsx(Button, { v: "soft", tone: "warning", onClick: () => toast.warning({
                                             title: 'Needs attention',
                                             message: 'Only 4 items need attention in this view.',
                                             dedupeKey: 'needs-attention',
                                             position: 'top-right',
-                                        }), children: "Warning dedupe" }), _jsx(Button, { v: 'soft', tone: 'danger', onClick: () => toast.error({
+                                        }), children: "Warning dedupe" }), _jsx(Button, { v: "soft", tone: "danger", onClick: () => toast.error({
                                             title: 'Export failed',
                                             message: 'The report can be retried without closing this page.',
                                             position: 'bottom-right',
@@ -80,33 +79,23 @@ export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOp
                                                 label: 'Retry',
                                                 onClick: () => toast.info('Retry queued'),
                                             },
-                                        }), children: "Error action" }), _jsx(Button, { v: 'surface', onClick: () => toast.info({
+                                        }), children: "Error action" }), _jsx(Button, { v: "surface", onClick: () => toast.info({
                                             title: 'Pinned note',
                                             message: 'duration: null keeps this toast visible.',
                                             position: 'top-center',
                                             duration: null,
                                             closeButton: true,
-                                        }), children: "Pinned" }), _jsx(Button, { v: 'surface', onClick: () => toast.info({
+                                        }), children: "Pinned" }), _jsx(Button, { v: "surface", onClick: () => toast.info({
                                             title: 'Glass background',
-                                            message: 'Custom blur and translucent background.',
+                                            message: 'Theme blur and translucent background.',
                                             position: 'bottom-right',
-                                            background: 'rgb(18 24 34 / 72%)',
-                                            blur: 18,
-                                            borderColor: 'rgb(255 255 255 / 18%)',
-                                            duration: 5200,
-                                        }), children: "Glass" }), _jsx(Button, { v: 'surface', onClick: () => toast.info({
-                                            title: 'Static background',
-                                            message: 'Blur can be disabled per toast.',
-                                            position: 'bottom-left',
-                                            background: 'var(--oui-floating-bg)',
-                                            blur: false,
                                             duration: 5200,
-                                        }), children: "Static" })] }), _jsx(Text, { color: 'var(--oui-muted)', fs: '13px', lh: 1.45, children: "Toasts support typed helpers, controlled position, progress line, dedupe keys, actions and fixed viewport above modals." }), _jsx("div", { className: 'oui-ui-row', children: toastPositions.map((item) => (_jsx(Button, { size: 1, v: 'surface', onClick: () => toast.info({
+                                        }), children: "Glass" })] }), _jsx(Text, { color: "var(--oui-muted)", fs: "13px", lh: 1.45, children: "Toasts support typed helpers, controlled position, progress line, dedupe keys, actions and fixed viewport above modals." }), _jsx("div", { className: "oui-ui-row", children: toastPositions.map((item) => (_jsx(Button, { size: 1, v: "surface", onClick: () => toast.info({
                                         title: item.label,
-                                        message: 'Positioned toast with directional bubble animation.',
+                                        message: 'Positioned toast with the default glass surface.',
                                         position: item.position,
                                         duration: 3600,
-                                    }), children: item.label }, item.position))) }), _jsxs("div", { className: 'oui-ui-row', children: [_jsx(Button, { size: 1, tone: 'success', v: 'soft', onClick: () => {
+                                    }), children: item.label }, item.position))) }), _jsxs("div", { className: "oui-ui-row", children: [_jsx(Button, { size: 1, tone: "success", v: "soft", onClick: () => {
                                             toastPositionVariants.forEach((item, index) => {
                                                 window.setTimeout(() => {
                                                     toast.push({
@@ -114,16 +103,14 @@ export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOp
                                                         message: item.message,
                                                         position: item.position,
                                                         tone: item.tone,
-                                                        background: item.background,
-                                                        blur: item.blur,
                                                         duration: 4200 + index * 220,
                                                     });
                                                 }, index * 120);
                                             });
-                                        }, children: "Show all positions" }), _jsx(Button, { size: 1, tone: 'warning', v: 'soft', onClick: () => toast.warning({
+                                        }, children: "Show all positions" }), _jsx(Button, { size: 1, tone: "warning", v: "soft", onClick: () => toast.warning({
                                             title: 'Long task queued',
                                             message: 'A longer duration shows the progress strip clearly.',
                                             position: 'bottom-center',
                                             duration: 9000,
-                                        }), children: "Long progress" })] })] }) }) }), _jsx(UiExampleSection, { id: 'overlay-settings-example', title: 'Overlay settings', description: 'Modal overlay color, opacity, blur and animation settings.', children: _jsx(ExampleTile, { title: 'Overlay settings', code: codeSamples.overlaySettings, onOpen: onOpenCode, children: _jsx(Text, { color: 'var(--oui-muted)', lh: 1.5, children: "The modal accepts overlay color, opacity, blur, animation and animationDuration props. Default animation and duration come from the theme." }) }) })] }));
+                                        }), children: "Long progress" })] })] }) }) }), _jsx(UiExampleSection, { id: "overlay-settings-example", title: "Overlay settings", description: "Modal overlay color, opacity, blur and animation settings.", children: _jsx(ExampleTile, { title: "Overlay settings", code: codeSamples.overlaySettings, onOpen: onOpenCode, children: _jsx(Text, { color: "var(--oui-muted)", lh: 1.5, children: "The modal accepts overlay color, opacity, blur, animation and animationDuration props. Default animation and duration come from the theme." }) }) })] }));
 }

package/dist/example/ExampleSelectionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleSelectionSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleSelectionSection.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAIH,KAAK,YAAY,EACpB,MAAM,eAAe,CAAC;AAGvB,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,YAAY,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,4BAA4B,EAC5B,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,OAAO,GACV,EAAE,qBAAqB,2CAqMvB"}
+{"version":3,"file":"ExampleSelectionSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleSelectionSection.tsx"],"names":[],"mappings":"AAKA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAiD,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGjG,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACpD,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4BAA4B,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,YAAY,GAAG,IAAI,CAAC;IACjC,mBAAmB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,4BAA4B,EAC5B,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,OAAO,GACV,EAAE,qBAAqB,2CAmLvB"}

package/dist/example/ExampleSelectionSection.js

@@ -5,23 +5,23 @@ import { LuHistory, LuListChecks, LuPlus } from 'react-icons/lu';
 import { Checkbox, Combobox, EntityPicker, MultiSelect, PaginatedCombobox, RadioGroup, SegmentedControl, Select, Switch, Tabs, Text, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
-import { getOptionItems, getOwnerItems, loadEntityPage, } from './exampleData';
+import { getOptionItems, getOwnerItems, loadEntityPage } from './exampleData';
 import { UiExampleSection } from './UiExampleSection';
 export function SelectionSection({ locale, segment, onSegmentChange, selectValue, onSelectValueChange, selectNoChevronValue, onSelectNoChevronValueChange, selectPlainValue, onSelectPlainValueChange, comboValue, onComboValueChange, entityValue, onEntityValueChange, paginatedValue, onPaginatedValueChange, ownerValues, onOwnerValuesChange, radioValue, onRadioValueChange, tabValue, onTabValueChange, onOpenCode, onToast, }) {
     const optionItems = getOptionItems(locale);
     const ownerItems = getOwnerItems(locale);
     const copy = selectionCopy[locale];
     const loadLocalizedEntityPage = useCallback((page, search) => loadEntityPage(locale, page, search), [locale]);
-    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: 'selects-example', title: 'Selects', description: 'Select, Combobox, MultiSelect, EntityPicker wrapper, lower-level PaginatedCombobox and SegmentedControl.', children: _jsxs(ExampleTile, { title: 'Selects and comboboxes', code: codeSamples.selection, onOpen: onOpenCode, children: [_jsx(Select, { items: optionItems, value: selectValue, onValueChange: onSelectValueChange, clearable: true }), _jsx(Select, { items: optionItems, value: selectNoChevronValue, onValueChange: onSelectNoChevronValueChange, clearable: true, showChevron: false, placeholder: 'Clearable without chevron' }), _jsx(Select, { items: optionItems, value: selectPlainValue, onValueChange: onSelectPlainValueChange, clearable: false, showChevron: false, placeholder: 'Plain select' }), _jsx(Combobox, { items: optionItems, value: comboValue, onValueChange: onComboValueChange, placeholder: 'Find status' }), _jsx(MultiSelect, { items: ownerItems, value: ownerValues, onValueChange: onOwnerValuesChange, placeholder: copy.responsibleUsers, clearable: true, renderValue: (items) => items.length === 1
+    return (_jsxs(_Fragment, { children: [_jsx(UiExampleSection, { id: "selects-example", title: "Selects", description: "Select, Combobox, MultiSelect, EntityPicker wrapper, lower-level PaginatedCombobox and SegmentedControl.", children: _jsxs(ExampleTile, { title: "Selects and comboboxes", code: codeSamples.selection, onOpen: onOpenCode, children: [_jsx(Select, { items: optionItems, value: selectValue, onValueChange: onSelectValueChange, clearable: true }), _jsx(Select, { items: optionItems, value: selectNoChevronValue, onValueChange: onSelectNoChevronValueChange, clearable: true, showChevron: false, placeholder: "Clearable without chevron" }), _jsx(Select, { items: optionItems, value: selectPlainValue, onValueChange: onSelectPlainValueChange, clearable: false, showChevron: false, placeholder: "Plain select" }), _jsx(Combobox, { items: optionItems, value: comboValue, onValueChange: onComboValueChange, placeholder: "Find status" }), _jsx(MultiSelect, { items: ownerItems, value: ownerValues, onValueChange: onOwnerValuesChange, placeholder: copy.responsibleUsers, clearable: true, renderValue: (items) => items.length === 1
                                 ? items[0]?.label
-                                : copy.responsibleCount(items.length) }), _jsx(EntityPicker, { value: entityValue, onValueChange: onEntityValueChange, loadPage: loadLocalizedEntityPage, getEntityId: (item) => item.id, renderValue: (item) => item.article, renderEntity: (item) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'oui-entity-option-main', children: [_jsx("span", { className: 'oui-entity-option-code', children: item.article }), _jsx("span", { className: 'oui-entity-option-meta', children: item.name })] }), _jsx("span", { className: 'oui-entity-option-badge', children: item.status })] })), placeholder: copy.entityPicker, clearable: true, createAction: {
+                                : copy.responsibleCount(items.length) }), _jsx(EntityPicker, { value: entityValue, onValueChange: onEntityValueChange, loadPage: loadLocalizedEntityPage, getEntityId: (item) => item.id, renderValue: (item) => item.article, renderEntity: (item) => (_jsxs(_Fragment, { children: [_jsxs("span", { className: "oui-entity-option-main", children: [_jsx("span", { className: "oui-entity-option-code", children: item.article }), _jsx("span", { className: "oui-entity-option-meta", children: item.name })] }), _jsx("span", { className: "oui-entity-option-badge", children: item.status })] })), placeholder: copy.entityPicker, clearable: true, createAction: {
                                 label: copy.createEntityFromSearch,
                                 onCreate: (search) => onToast(copy.createEntityToast(search), 'info'),
                             }, optionAction: {
                                 icon: _jsx(LuPlus, { size: 14 }),
                                 label: (item) => copy.addEntity(item.article),
                                 onClick: (item) => onToast(copy.entityAction(item.article), 'success'),
-                            } }), _jsx(PaginatedCombobox, { value: paginatedValue, onChange: onPaginatedValueChange, loadPage: loadLocalizedEntityPage, getItemId: (item) => item.id, renderSelectedLabel: (item) => item.article, renderOption: (item) => (_jsxs("span", { className: 'oui-entity-option-main', children: [_jsx("span", { className: 'oui-entity-option-code', children: item.article }), _jsx("span", { className: 'oui-entity-option-meta', children: item.name })] })), placeholder: 'Paginated combobox', clearable: true, searchAction: {
+                            } }), _jsx(PaginatedCombobox, { value: paginatedValue, onChange: onPaginatedValueChange, loadPage: loadLocalizedEntityPage, getItemId: (item) => item.id, renderSelectedLabel: (item) => item.article, renderOption: (item) => (_jsxs("span", { className: "oui-entity-option-main", children: [_jsx("span", { className: "oui-entity-option-code", children: item.article }), _jsx("span", { className: "oui-entity-option-meta", children: item.name })] })), placeholder: "Paginated combobox", clearable: true, searchAction: {
                                 label: copy.createEntityFromSearch,
                                 onClick: (search) => onToast(copy.createEntityToast(search), 'info'),
                             }, optionAction: {
@@ -32,22 +32,22 @@ export function SelectionSection({ locale, segment, onSegmentChange, selectValue
                                 { value: 'active', label: 'Active' },
                                 { value: 'drafts', label: 'Drafts' },
                                 { value: 'archive', label: 'Archive' },
-                            ], value: segment, onValueChange: onSegmentChange })] }) }), _jsx(UiExampleSection, { id: 'choice-controls-example', title: 'Checkbox, switch and radio', description: 'Binary and single-choice controls.', children: _jsxs(ExampleTile, { title: 'Checkbox, switch and radio', code: codeSamples.selectionGroup, onOpen: onOpenCode, children: [_jsx(Checkbox, { defaultChecked: true, children: "Confirmed" }), _jsx(Checkbox, { children: "Needs review" }), _jsx(Checkbox, { disabled: true, children: "Locked option" }), _jsx(Switch, { defaultChecked: true, children: "Auto updates" }), _jsx(Switch, { children: "Manual mode" }), _jsx(Switch, { disabled: true, children: "Disabled switch" }), _jsx(RadioGroup, { value: radioValue, onValueChange: onRadioValueChange, name: 'oui-example-mode', items: [
+                            ], value: segment, onValueChange: onSegmentChange })] }) }), _jsx(UiExampleSection, { id: "choice-controls-example", title: "Checkbox, switch and radio", description: "Binary and single-choice controls.", children: _jsxs(ExampleTile, { title: "Checkbox, switch and radio", code: codeSamples.selectionGroup, onOpen: onOpenCode, children: [_jsx(Checkbox, { defaultChecked: true, children: "Confirmed" }), _jsx(Checkbox, { children: "Needs review" }), _jsx(Checkbox, { disabled: true, children: "Locked option" }), _jsx(Switch, { defaultChecked: true, children: "Auto updates" }), _jsx(Switch, { children: "Manual mode" }), _jsx(Switch, { disabled: true, children: "Disabled switch" }), _jsx(RadioGroup, { value: radioValue, onValueChange: onRadioValueChange, name: "oui-example-mode", items: [
                                 { value: 'manual', label: 'Manual' },
                                 { value: 'auto', label: 'Automatic' },
-                            ] })] }) }), _jsx(UiExampleSection, { id: 'tabs-example', title: 'Tabs', description: 'Segmented content navigation with icons, badges and controlled value.', children: _jsx(ExampleTile, { title: 'Tabs', code: codeSamples.tabs, onOpen: onOpenCode, children: _jsx(Tabs, { value: tabValue, onValueChange: onTabValueChange, items: [
+                            ] })] }) }), _jsx(UiExampleSection, { id: "tabs-example", title: "Tabs", description: "Segmented content navigation with icons, badges and controlled value.", children: _jsx(ExampleTile, { title: "Tabs", code: codeSamples.tabs, onOpen: onOpenCode, children: _jsx(Tabs, { value: tabValue, onValueChange: onTabValueChange, items: [
                             {
                                 value: 'overview',
                                 label: 'Overview',
                                 icon: _jsx(LuListChecks, { size: 16 }),
                                 badge: '12',
-                                content: _jsx(Text, { color: 'var(--oui-muted)', children: "Main summary tab." }),
+                                content: _jsx(Text, { color: "var(--oui-muted)", children: "Main summary tab." }),
                             },
                             {
                                 value: 'history',
                                 label: 'History',
                                 icon: _jsx(LuHistory, { size: 16 }),
-                                content: _jsx(Text, { color: 'var(--oui-muted)', children: "History and changes." }),
+                                content: _jsx(Text, { color: "var(--oui-muted)", children: "History and changes." }),
                             },
                         ] }) }) })] }));
 }

package/dist/example/ExampleStateSection.d.ts

@@ -1,11 +1,11 @@
 import { type CodeExample } from './codeSamples';
-export declare function BadgeSection({ onOpenCode, }: {
+export declare function BadgeSection({ onOpenCode }: {
     onOpenCode: (example: CodeExample) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function StateCardSection({ onOpenCode, }: {
+export declare function StateCardSection({ onOpenCode }: {
     onOpenCode: (example: CodeExample) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function IconTextSection({ onOpenCode, }: {
+export declare function IconTextSection({ onOpenCode }: {
     onOpenCode: (example: CodeExample) => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExampleStateSection.d.ts.map

package/dist/example/ExampleStateSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleStateSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleStateSection.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAmH/C,wBAAgB,YAAY,CAAC,EACzB,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAoCA;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAsEA;AAED,wBAAgB,eAAe,CAAC,EAC5B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAgCA"}
+{"version":3,"file":"ExampleStateSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleStateSection.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAoHjD,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CA4C1F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CAqE9F;AAED,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAA;CAAE,2CA4B7F"}

package/dist/example/ExampleStateSection.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { LuCircleAlert, LuCircleCheck, LuCircleX, LuClock3, LuInfo, LuLoaderCircle, LuPackageCheck, LuShieldCheck, } from 'react-icons/lu';
-import { Badge, BadgeSelectMenu, Button, EmptyState, ErrorState, IconText, LoadingState, Stack, StateCard, Text, } from '..';
+import { Badge, BadgeSelectMenu, Button, EmptyState, ErrorState, Flex, Grid, IconText, LoadingState, Stack, StateCard, Text, } from '..';
 import { ExampleTile } from './CodePreview';
 import {} from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
@@ -16,6 +16,7 @@ const stateCardSample = {
     Button,
     EmptyState,
     ErrorState,
+    Grid,
     LoadingState,
     Stack,
     StateCard,
@@ -33,7 +34,7 @@ const validationItems = [
         title='General state'
         description='One card for informational, empty, loading and error states.'
     />
-    <div className='oui-ui-state-grid'>
+    <Grid columns='repeat(auto-fit, minmax(min(100%, 260px), 1fr))' g={2}>
         <StateCard
             v='surface'
             tone='primary'
@@ -54,7 +55,7 @@ const validationItems = [
             title='Ghost'
             description='No extra background.'
         />
-    </div>
+    </Grid>
     <StateCard tone='danger' title='Validation failed'>
         <Stack g={1}>
             {validationItems.map((item) => (
@@ -65,11 +66,11 @@ const validationItems = [
             ))}
         </Stack>
     </StateCard>
-    <div className='oui-ui-state-grid'>
+    <Grid columns='repeat(auto-fit, minmax(min(100%, 260px), 1fr))' g={2}>
         <EmptyState compact description='No records yet.' />
         <LoadingState compact description='Loading the next page.' />
         <ErrorState compact description='Request failed.' onRetry={reload} />
-    </div>
+    </Grid>
     <StateCard
         tone='success'
         title='Saved'
@@ -103,29 +104,29 @@ const statusItems = [
 };
 const iconTextSample = {
     title: 'IconText',
-    code: `import {IconText, Stack} from '@orcestr/ui';
+    code: `import {Flex, IconText} from '@orcestr/ui';
 import {LuCircleAlert, LuCircleCheck, LuCircleX, LuInfo, LuLoaderCircle} from 'react-icons/lu';
 
-<Stack g={1}>
+<Flex g={2} wrap>
     <IconText icon={<LuLoaderCircle />} iconTone='info' iconSpin>Saving changes</IconText>
     <IconText icon={<LuCircleCheck />} iconTone='success'>Saved</IconText>
     <IconText icon={<LuCircleX />} iconTone='danger'>Save failed</IconText>
     <IconText icon={<LuCircleAlert />} iconTone='warning' fw={760}>Review required</IconText>
     <IconText icon={<LuInfo />} iconTone='info' fs='13px'>Sync scheduled</IconText>
-</Stack>`,
+</Flex>`,
 };
-export function BadgeSection({ onOpenCode, }) {
+export function BadgeSection({ onOpenCode }) {
     const [status, setStatus] = useState('review');
     const statusItems = [
         { value: 'draft', label: 'Draft' },
         { value: 'review', label: 'Review' },
         { value: 'accepted', label: 'Accepted' },
     ];
-    return (_jsx(UiExampleSection, { id: 'badges-example', title: 'Badge', description: 'Compact counters and statuses without a special wrapper.', children: _jsx(ExampleTile, { title: 'Badge', code: badgeSample.code, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-ui-badge-demo', children: [_jsxs(Badge, { tone: 'neutral', children: ["Requested ", _jsx("strong", { children: "43" })] }), _jsxs(Badge, { tone: 'info', icon: _jsx(LuClock3, {}), children: ["Ordered ", _jsx("strong", { children: "12" })] }), _jsxs(Badge, { tone: 'success', icon: _jsx(LuPackageCheck, {}), children: ["Accepted ", _jsx("strong", { children: "8" })] }), _jsx(Badge, { tone: 'warning', v: 'surface', icon: _jsx(LuShieldCheck, {}), children: "Review" }), _jsx(Badge, { tone: 'danger', v: 'outline', children: "Blocked" }), _jsx(Badge, { tone: 'primary', v: 'solid', children: "Primary" }), _jsx(BadgeSelectMenu, { value: status, items: statusItems, onValueChange: setStatus, tone: 'warning' })] }) }) }));
+    return (_jsx(UiExampleSection, { id: "badges-example", title: "Badge", description: "Compact counters and statuses without a special wrapper.", children: _jsx(ExampleTile, { title: "Badge", code: badgeSample.code, onOpen: onOpenCode, children: _jsxs(Flex, { g: 2, wrap: true, children: [_jsxs(Badge, { tone: "neutral", children: ["Requested ", _jsx("strong", { children: "43" })] }), _jsxs(Badge, { tone: "info", icon: _jsx(LuClock3, {}), children: ["Ordered ", _jsx("strong", { children: "12" })] }), _jsxs(Badge, { tone: "success", icon: _jsx(LuPackageCheck, {}), children: ["Accepted ", _jsx("strong", { children: "8" })] }), _jsx(Badge, { tone: "warning", v: "surface", icon: _jsx(LuShieldCheck, {}), children: "Review" }), _jsx(Badge, { tone: "danger", v: "outline", children: "Blocked" }), _jsx(Badge, { tone: "primary", v: "solid", children: "Primary" }), _jsx(BadgeSelectMenu, { value: status, items: statusItems, onValueChange: setStatus, tone: "warning" })] }) }) }));
 }
-export function StateCardSection({ onOpenCode, }) {
-    return (_jsx(UiExampleSection, { id: 'state-card-example', title: 'StateCard', description: 'Block-level state for empty, loading, error, access and status surfaces.', children: _jsx(ExampleTile, { title: 'StateCard', code: stateCardSample.code, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(StateCard, { tone: 'info', title: 'General state', description: 'One card for informational, empty, loading and error states.' }), _jsxs("div", { className: 'oui-ui-state-grid', children: [_jsx(StateCard, { v: 'surface', tone: 'primary', title: 'Surface', titleTone: 'primary', description: 'Uses the regular surface with a toned title.', descriptionTone: 'muted' }), _jsx(StateCard, { v: 'outline', tone: 'warning', title: 'Outline', description: 'Useful when the card should stay quiet.' }), _jsx(StateCard, { v: 'ghost', tone: 'success', title: 'Ghost', description: 'No extra background.' })] }), _jsx(StateCard, { tone: 'danger', title: 'Validation failed', children: _jsx(Stack, { g: 1, children: validationItems.map((item) => (_jsxs(Text, { fs: '13px', lh: 1.3, children: [_jsxs("strong", { children: [item.label, ": "] }), item.message] }, item.key))) }) }), _jsxs("div", { className: 'oui-ui-state-grid', children: [_jsx(EmptyState, { compact: true, description: 'No records yet.' }), _jsx(LoadingState, { compact: true, description: 'Loading the next page.' }), _jsx(ErrorState, { compact: true, description: 'Request failed.', onRetry: () => undefined })] }), _jsx(StateCard, { tone: 'success', title: 'Saved', description: 'Changes were applied.', action: _jsx(Button, { size: 1, v: 'surface', children: "Open" }) })] }) }) }));
+export function StateCardSection({ onOpenCode }) {
+    return (_jsx(UiExampleSection, { id: "state-card-example", title: "StateCard", description: "Block-level state for empty, loading, error, access and status surfaces.", children: _jsx(ExampleTile, { title: "StateCard", code: stateCardSample.code, onOpen: onOpenCode, children: _jsxs(Stack, { g: 2, children: [_jsx(StateCard, { tone: "info", title: "General state", description: "One card for informational, empty, loading and error states." }), _jsxs(Grid, { columns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", g: 2, children: [_jsx(StateCard, { v: "surface", tone: "primary", title: "Surface", titleTone: "primary", description: "Uses the regular surface with a toned title.", descriptionTone: "muted" }), _jsx(StateCard, { v: "outline", tone: "warning", title: "Outline", description: "Useful when the card should stay quiet." }), _jsx(StateCard, { v: "ghost", tone: "success", title: "Ghost", description: "No extra background." })] }), _jsx(StateCard, { tone: "danger", title: "Validation failed", children: _jsx(Stack, { g: 1, children: validationItems.map((item) => (_jsxs(Text, { fs: "13px", lh: 1.3, children: [_jsxs("strong", { children: [item.label, ": "] }), item.message] }, item.key))) }) }), _jsxs(Grid, { columns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", g: 2, children: [_jsx(EmptyState, { compact: true, description: "No records yet." }), _jsx(LoadingState, { compact: true, description: "Loading the next page." }), _jsx(ErrorState, { compact: true, description: "Request failed.", onRetry: () => undefined })] }), _jsx(StateCard, { tone: "success", title: "Saved", description: "Changes were applied.", action: _jsx(Button, { size: 1, v: "surface", children: "Open" }) })] }) }) }));
 }
-export function IconTextSection({ onOpenCode, }) {
-    return (_jsx(UiExampleSection, { id: 'icon-text-example', title: 'IconText', description: 'Inline text primitive with an icon, text props and independent icon tone.', children: _jsx(ExampleTile, { title: 'IconText', code: iconTextSample.code, onOpen: onOpenCode, children: _jsxs("div", { className: 'oui-ui-icon-text-list', children: [_jsx(IconText, { icon: _jsx(LuLoaderCircle, {}), iconTone: 'info', iconSpin: true, children: "Saving changes" }), _jsx(IconText, { icon: _jsx(LuCircleCheck, {}), iconTone: 'success', children: "Saved" }), _jsx(IconText, { icon: _jsx(LuCircleX, {}), iconTone: 'danger', children: "Save failed" }), _jsx(IconText, { icon: _jsx(LuCircleAlert, {}), iconTone: 'warning', fw: 760, children: "Review required" }), _jsx(IconText, { icon: _jsx(LuInfo, {}), iconTone: 'info', fs: '13px', children: "Sync scheduled" })] }) }) }));
+export function IconTextSection({ onOpenCode }) {
+    return (_jsx(UiExampleSection, { id: "icon-text-example", title: "IconText", description: "Inline text primitive with an icon, text props and independent icon tone.", children: _jsx(ExampleTile, { title: "IconText", code: iconTextSample.code, onOpen: onOpenCode, children: _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(IconText, { icon: _jsx(LuLoaderCircle, {}), iconTone: "info", iconSpin: true, children: "Saving changes" }), _jsx(IconText, { icon: _jsx(LuCircleCheck, {}), iconTone: "success", children: "Saved" }), _jsx(IconText, { icon: _jsx(LuCircleX, {}), iconTone: "danger", children: "Save failed" }), _jsx(IconText, { icon: _jsx(LuCircleAlert, {}), iconTone: "warning", fw: 760, children: "Review required" }), _jsx(IconText, { icon: _jsx(LuInfo, {}), iconTone: "info", fs: "13px", children: "Sync scheduled" })] }) }) }));
 }