@orcestr/ui 0.0.1 → 0.1.0

package/dist/example/ExampleFieldsSection.js

@@ -1,10 +1,58 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { LuSearch } from 'react-icons/lu';
-import { Button, DatePicker, DateRangePicker, DateRangePresetPicker, Flex, Field, Grid, NumberField, Section, Stack, StepperInput, Text, TextArea, TextField, } from '..';
+import { useMemo, useState } from 'react';
+import { LuCheck, LuPencil, LuSearch } from 'react-icons/lu';
+import { Badge, Button, DatePicker, DateRangePicker, DateRangePresetPicker, Flex, Field, Grid, IconButton, InlineEditField, InlineEditMultiField, Listbox, NumberField, Popover, Section, Stack, StepperInput, Text, TextArea, TextField, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
+const inlineSupplierOptions = [
+    { key: 'northwind', label: 'Northwind Trading LLC' },
+    { key: 'aqua', label: 'Aqua Industrial Co.' },
+    { key: 'comfort', label: 'Comfort Sanitary Ware' },
+];
+const inlineOwnerOptions = [
+    { key: 'michael', label: 'Michael Sokolov' },
+    { key: 'anna', label: 'Anna Petrova' },
+    { key: 'team', label: 'Purchasing team' },
+    { key: 'ops', label: 'Operations team' },
+];
+const inlinePaymentTermOptions = [
+    { key: 'prepay', label: 'Prepayment' },
+    { key: 'net15', label: 'Net 15' },
+    { key: 'net30', label: 'Net 30' },
+];
 export function FieldsSection({ stepperValue, onStepperValueChange, dateValue, onDateValueChange, dateRange, onDateRangeChange, onOpenCode, }) {
-    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: '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." })] }) })] }));
+    const [supplierOpen, setSupplierOpen] = useState(false);
+    const [paymentOpen, setPaymentOpen] = useState(false);
+    const [ownerOpen, setOwnerOpen] = useState(false);
+    const [supplierKey, setSupplierKey] = useState('northwind');
+    const [paymentTermKey, setPaymentTermKey] = useState('net30');
+    const [ownerKeys, setOwnerKeys] = useState(['michael', 'team']);
+    const selectedSupplier = inlineSupplierOptions.find((item) => item.key === supplierKey);
+    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]);
+    };
+    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) => ({
+                                                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) => {
+                                                    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." })] }) })] }));
 }

package/dist/example/ExampleFoundationsSection.js

@@ -21,5 +21,5 @@ export function FoundationsSection({ onOpenCode, }) {
                         ['Публичный 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: 'brand', 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":"AAIA,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;AAEvC,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":"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"}

package/dist/example/ExampleOverlays.js

@@ -1,11 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, CommandPalette, Flex, Field, Modal, Stack, Text, TextField } from '..';
+import {} from 'react';
+import { LuX } from 'react-icons/lu';
+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] }));
+}
 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(Modal, { 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(Modal, { 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(Modal, { 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-brand) 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(Modal, { 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-brand) 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(Modal, { 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-brand) 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(Modal, { 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(Modal, { 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-brand) 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(Modal, { 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(Modal, { 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) 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') })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleOverlaysSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleOverlaysSection.tsx"],"names":[],"mappings":"AAeA,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,2CA+OtB"}
+{"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"}

package/dist/example/ExampleOverlaysSection.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { LuChevronDown } from 'react-icons/lu';
-import { Button, Popover, Stack, Text, Tooltip, useToast, } from '..';
+import { Button, Dialog, Drawer, Flex, Popover, Stack, Text, Tooltip, useToast, } from '..';
 import { ExampleTile } from './CodePreview';
 import { codeSamples } from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
@@ -60,7 +61,9 @@ const toastPositionVariants = [
 ];
 export function OverlaysSection({ setModalOpen, setBlurModalOpen, setFastModalOpen, setRiseModalOpen, setSlowModalOpen, setDangerModalOpen, onOpenCode, }) {
     const toast = useToast();
-    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" }) })] }), _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(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({
+    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({
                                             title: 'Saved successfully',
                                             message: 'The settings are synced with the current theme.',
                                             position: 'bottom-right',

package/dist/example/ExampleSelectionSection.d.ts

@@ -16,6 +16,8 @@ type SelectionSectionProps = {
     onComboValueChange: (value: string | null) => void;
     entityValue: EntityOption | null;
     onEntityValueChange: (value: EntityOption | null) => void;
+    paginatedValue: EntityOption | null;
+    onPaginatedValueChange: (value: EntityOption | null) => void;
     ownerValues: string[];
     onOwnerValuesChange: (value: string[]) => void;
     radioValue: string;
@@ -25,6 +27,6 @@ type SelectionSectionProps = {
     onOpenCode: (example: CodeExample) => void;
     onToast: (title: string, tone?: ToastTone) => void;
 };
-export declare function SelectionSection({ locale, segment, onSegmentChange, selectValue, onSelectValueChange, selectNoChevronValue, onSelectNoChevronValueChange, selectPlainValue, onSelectPlainValueChange, comboValue, onComboValueChange, entityValue, onEntityValueChange, ownerValues, onOwnerValuesChange, radioValue, onRadioValueChange, tabValue, onTabValueChange, onOpenCode, onToast, }: SelectionSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare 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, }: SelectionSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ExampleSelectionSection.d.ts.map

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,EAWH,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,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,WAAW,EACX,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,OAAO,GACV,EAAE,qBAAqB,2CAuKvB"}
+{"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"}

package/dist/example/ExampleSelectionSection.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { LuHistory, LuListChecks, LuPlus } from 'react-icons/lu';
-import { Checkbox, Combobox, EntityPicker, MultiSelect, RadioGroup, SegmentedControl, Select, Switch, Tabs, Text, } from '..';
+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 { UiExampleSection } from './UiExampleSection';
-export function SelectionSection({ locale, segment, onSegmentChange, selectValue, onSelectValueChange, selectNoChevronValue, onSelectNoChevronValueChange, selectPlainValue, onSelectPlainValueChange, comboValue, onComboValueChange, entityValue, onEntityValueChange, ownerValues, onOwnerValuesChange, radioValue, onRadioValueChange, tabValue, onTabValueChange, onOpenCode, onToast, }) {
+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 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: {
                                 label: copy.createEntityFromSearch,
@@ -21,6 +21,13 @@ export function SelectionSection({ locale, segment, onSegmentChange, selectValue
                                 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: {
+                                label: copy.createEntityFromSearch,
+                                onClick: (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(SegmentedControl, { items: [
                                 { value: 'active', label: 'Active' },
                                 { value: 'drafts', label: 'Drafts' },

package/dist/example/ExampleStateSection.d.ts

@@ -1,4 +1,7 @@
 import { type CodeExample } from './codeSamples';
+export declare function BadgeSection({ onOpenCode, }: {
+    onOpenCode: (example: CodeExample) => void;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function StateCardSection({ onOpenCode, }: {
     onOpenCode: (example: CodeExample) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleStateSection.d.ts","sourceRoot":"","sources":["../../src/example/ExampleStateSection.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,eAAe,CAAC;AAqE/C,wBAAgB,gBAAgB,CAAC,EAC7B,UAAU,GACb,EAAE;IACC,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C,2CAgDA;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":"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"}

package/dist/example/ExampleStateSection.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LuCircleAlert, LuCircleCheck, LuCircleX, LuInfo, LuLoaderCircle, } from 'react-icons/lu';
-import { Button, EmptyState, ErrorState, IconText, LoadingState, Stack, StateCard, Text, } from '..';
+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 { ExampleTile } from './CodePreview';
 import {} from './codeSamples';
 import { UiExampleSection } from './UiExampleSection';
@@ -32,6 +33,28 @@ const validationItems = [
         title='General state'
         description='One card for informational, empty, loading and error states.'
     />
+    <div className='oui-ui-state-grid'>
+        <StateCard
+            v='surface'
+            tone='primary'
+            title='Surface'
+            titleTone='primary'
+            description='Uses the regular surface with a toned title.'
+            descriptionTone='muted'
+        />
+        <StateCard
+            v='outline'
+            tone='warning'
+            title='Outline'
+            description='Useful when the card should stay quiet.'
+        />
+        <StateCard
+            v='ghost'
+            tone='success'
+            title='Ghost'
+            description='No extra background.'
+        />
+    </div>
     <StateCard tone='danger' title='Validation failed'>
         <Stack g={1}>
             {validationItems.map((item) => (
@@ -55,6 +78,29 @@ const validationItems = [
     />
 </Stack>`,
 };
+const badgeSample = {
+    title: 'Badge',
+    code: `import {useState} from 'react';
+import {Badge, BadgeSelectMenu, Flex} from '@orcestr/ui';
+import {LuClock3, LuPackageCheck, LuShieldCheck} from 'react-icons/lu';
+
+const [status, setStatus] = useState('review');
+const statusItems = [
+    {value: 'draft', label: 'Draft'},
+    {value: 'review', label: 'Review'},
+    {value: 'accepted', label: 'Accepted'},
+];
+
+<Flex g={2} wrap>
+    <Badge tone='neutral'>Requested <strong>43</strong></Badge>
+    <Badge tone='info' icon={<LuClock3 />}>Ordered <strong>12</strong></Badge>
+    <Badge tone='success' icon={<LuPackageCheck />}>Accepted <strong>8</strong></Badge>
+    <Badge tone='warning' v='surface' icon={<LuShieldCheck />}>Review</Badge>
+    <Badge tone='danger' v='outline'>Blocked</Badge>
+    <Badge tone='primary' v='solid'>Primary</Badge>
+    <BadgeSelectMenu value={status} items={statusItems} onValueChange={setStatus} tone='warning' />
+</Flex>`,
+};
 const iconTextSample = {
     title: 'IconText',
     code: `import {IconText, Stack} from '@orcestr/ui';
@@ -68,8 +114,17 @@ import {LuCircleAlert, LuCircleCheck, LuCircleX, LuInfo, LuLoaderCircle} from 'r
     <IconText icon={<LuInfo />} iconTone='info' fs='13px'>Sync scheduled</IconText>
 </Stack>`,
 };
+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' })] }) }) }));
+}
 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.' }), _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" }) })] }) }) }));
+    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 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" })] }) }) }));