@orcestr/ui 0.0.1

package/dist/example/ExampleOverlaysSection.js

@@ -0,0 +1,126 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LuChevronDown } from 'react-icons/lu';
+import { Button, Popover, Stack, Text, Tooltip, useToast, } from '..';
+import { ExampleTile } from './CodePreview';
+import { codeSamples } from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+const toastPositions = [
+    { position: 'top-left', label: 'Top left' },
+    { position: 'top-center', label: 'Top center' },
+    { position: 'top-right', label: 'Top right' },
+    { position: 'bottom-left', label: 'Bottom left' },
+    { position: 'bottom-center', label: 'Bottom center' },
+    { position: 'bottom-right', label: 'Bottom right' },
+];
+const toastPositionVariants = [
+    {
+        position: 'top-left',
+        label: 'Status synced',
+        tone: 'success',
+        message: 'Glass toast from the left edge.',
+        blur: 14,
+    },
+    {
+        position: 'top-center',
+        label: 'Command ready',
+        tone: 'info',
+        message: 'Centered toast drops from the top.',
+        background: 'rgb(18 28 42 / 88%)',
+        blur: 10,
+    },
+    {
+        position: 'top-right',
+        label: 'Needs attention',
+        tone: 'warning',
+        message: 'Right edge bubble animation.',
+        blur: 12,
+    },
+    {
+        position: 'bottom-left',
+        label: 'Import queued',
+        tone: 'info',
+        message: 'Static background, no blur.',
+        blur: false,
+    },
+    {
+        position: 'bottom-center',
+        label: 'Batch completed',
+        tone: 'success',
+        message: 'Bottom center rises into place.',
+        blur: 16,
+    },
+    {
+        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();
+    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({
+                                            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({
+                                            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({
+                                            title: 'Export failed',
+                                            message: 'The report can be retried without closing this page.',
+                                            position: 'bottom-right',
+                                            action: {
+                                                label: 'Retry',
+                                                onClick: () => toast.info('Retry queued'),
+                                            },
+                                        }), 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({
+                                            title: 'Glass background',
+                                            message: 'Custom 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({
+                                        title: item.label,
+                                        message: 'Positioned toast with directional bubble animation.',
+                                        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: () => {
+                                            toastPositionVariants.forEach((item, index) => {
+                                                window.setTimeout(() => {
+                                                    toast.push({
+                                                        title: item.label,
+                                                        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({
+                                            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." }) }) })] }));
+}

package/dist/example/ExampleSelectionSection.d.ts

@@ -0,0 +1,30 @@
+import { type OrcestrUiLocale } from '..';
+import { type CodeExample } from './codeSamples';
+import { type EntityOption } from './exampleData';
+type ToastTone = 'info' | 'success' | 'danger';
+type SelectionSectionProps = {
+    locale: OrcestrUiLocale;
+    segment: string;
+    onSegmentChange: (value: string) => void;
+    selectValue: string | null;
+    onSelectValueChange: (value: string | null) => void;
+    selectNoChevronValue: string | null;
+    onSelectNoChevronValueChange: (value: string | null) => void;
+    selectPlainValue: string | null;
+    onSelectPlainValueChange: (value: string | null) => void;
+    comboValue: string | null;
+    onComboValueChange: (value: string | null) => void;
+    entityValue: EntityOption | null;
+    onEntityValueChange: (value: EntityOption | null) => void;
+    ownerValues: string[];
+    onOwnerValuesChange: (value: string[]) => void;
+    radioValue: string;
+    onRadioValueChange: (value: string) => void;
+    tabValue: string;
+    onTabValueChange: (value: string) => void;
+    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 {};
+//# sourceMappingURL=ExampleSelectionSection.d.ts.map

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

@@ -0,0 +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"}

package/dist/example/ExampleSelectionSection.js

@@ -0,0 +1,66 @@
+'use client';
+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 { 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, }) {
+    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
+                                ? 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,
+                                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(SegmentedControl, { items: [
+                                { 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: '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: [
+                            {
+                                value: 'overview',
+                                label: 'Overview',
+                                icon: _jsx(LuListChecks, { size: 16 }),
+                                badge: '12',
+                                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." }),
+                            },
+                        ] }) }) })] }));
+}
+const selectionCopy = {
+    ru: {
+        responsibleUsers: 'Ответственные',
+        responsibleCount: (count) => `${count} ответственных`,
+        entityPicker: 'Выбор объекта',
+        createEntityFromSearch: 'Создать объект из поиска',
+        createEntityToast: (search) => `Создать объект: ${search}`,
+        addEntity: (article) => `Добавить ${article}`,
+        entityAction: (article) => `Действие: ${article}`,
+    },
+    en: {
+        responsibleUsers: 'Responsible users',
+        responsibleCount: (count) => `${count} responsible`,
+        entityPicker: 'Entity picker',
+        createEntityFromSearch: 'Create entity from search',
+        createEntityToast: (search) => `Create entity: ${search}`,
+        addEntity: (article) => `Add ${article}`,
+        entityAction: (article) => `Action: ${article}`,
+    },
+};

package/dist/example/ExampleStateSection.d.ts

@@ -0,0 +1,8 @@
+import { type CodeExample } from './codeSamples';
+export declare function StateCardSection({ onOpenCode, }: {
+    onOpenCode: (example: CodeExample) => void;
+}): import("react/jsx-runtime").JSX.Element;
+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

@@ -0,0 +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"}

package/dist/example/ExampleStateSection.js

@@ -0,0 +1,76 @@
+'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 { ExampleTile } from './CodePreview';
+import {} from './codeSamples';
+import { UiExampleSection } from './UiExampleSection';
+const validationItems = [
+    { key: 'quantity', label: 'Quantity', message: 'Required value is missing' },
+    { key: 'files', label: 'Files', message: 'Add at least one document' },
+];
+const stateCardSample = {
+    title: 'StateCard',
+    code: `import {
+    Button,
+    EmptyState,
+    ErrorState,
+    LoadingState,
+    Stack,
+    StateCard,
+    Text,
+} from '@orcestr/ui';
+
+const validationItems = [
+    {key: 'quantity', label: 'Quantity', message: 'Required value is missing'},
+    {key: 'files', label: 'Files', message: 'Add at least one document'},
+];
+
+<Stack g={2}>
+    <StateCard
+        tone='info'
+        title='General state'
+        description='One card for informational, empty, loading and error states.'
+    />
+    <StateCard tone='danger' title='Validation failed'>
+        <Stack g={1}>
+            {validationItems.map((item) => (
+                <Text key={item.key} fs='13px' lh={1.3}>
+                    <strong>{item.label}: </strong>
+                    {item.message}
+                </Text>
+            ))}
+        </Stack>
+    </StateCard>
+    <div className='oui-ui-state-grid'>
+        <EmptyState compact description='No records yet.' />
+        <LoadingState compact description='Loading the next page.' />
+        <ErrorState compact description='Request failed.' onRetry={reload} />
+    </div>
+    <StateCard
+        tone='success'
+        title='Saved'
+        description='Changes were applied.'
+        action={<Button size={1} v='surface'>Open</Button>}
+    />
+</Stack>`,
+};
+const iconTextSample = {
+    title: 'IconText',
+    code: `import {IconText, Stack} from '@orcestr/ui';
+import {LuCircleAlert, LuCircleCheck, LuCircleX, LuInfo, LuLoaderCircle} from 'react-icons/lu';
+
+<Stack g={1}>
+    <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>`,
+};
+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" }) })] }) }) }));
+}
+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" })] }) }) }));
+}