@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/catalog/catalog-coverage.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogManifest } from './catalog-types';
+import type { CatalogManifest } from './catalog-types.js';
 export interface CatalogCoverageExclusion {
     component: string;
     reason: string;

package/dist/catalog/catalog-manifest.d.ts

@@ -1,4 +1,4 @@
-import { type CatalogCase, type CatalogCaseFilter, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition } from './catalog-types';
+import { type CatalogCase, type CatalogCaseFilter, type CatalogManifest, type CatalogSectionDefinition, type CatalogStoryDefinition } from './catalog-types.js';
 export declare function createCatalogStory(story: CatalogStoryDefinition): CatalogStoryDefinition;
 export declare function createCatalogSection(section: CatalogSectionDefinition): CatalogSectionDefinition;
 export declare function createCatalogManifest(manifest: CatalogManifest): CatalogManifest;

package/dist/catalog/catalog-manifest.js

@@ -1,4 +1,4 @@
-import { catalogDensities, catalogThemes, catalogViewports, } from './catalog-types';
+import { catalogDensities, catalogThemes, catalogViewports, } from './catalog-types.js';
 const catalogIdPattern = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
 function assertCatalogId(id, kind) {
     if (!catalogIdPattern.test(id)) {

package/dist/catalog/catalog-types.d.ts

@@ -4,11 +4,13 @@ export declare const catalogDensities: readonly ["regular", "compact"];
 export declare const catalogViewports: readonly ["wide", "narrow"];
 export declare const catalogAccessibilityModes: readonly ["standard", "reduced-transparency", "increased-contrast", "reduced-motion"];
 export declare const catalogInteractions: readonly ["rest", "hover", "focus-visible", "pressed", "selected", "disabled", "invalid", "loading", "empty"];
+export declare const catalogLiveStates: readonly ["hover", "focus", "pressed"];
 export type CatalogTheme = (typeof catalogThemes)[number];
 export type CatalogDensity = (typeof catalogDensities)[number];
 export type CatalogViewport = (typeof catalogViewports)[number];
 export type CatalogAccessibilityMode = (typeof catalogAccessibilityModes)[number];
 export type CatalogInteraction = (typeof catalogInteractions)[number];
+export type CatalogLiveState = (typeof catalogLiveStates)[number];
 export interface CatalogCaseContext {
     caseId: string;
     sectionId: string;
@@ -33,6 +35,11 @@ export interface CatalogStoryDefinition {
     viewports?: readonly CatalogViewport[];
     accessibilityModes?: readonly CatalogAccessibilityMode[];
     interactions?: readonly CatalogInteraction[];
+    /**
+     * Browser-driven states captured from the element marked with
+     * `data-state-target="<space-separated states>"`.
+     */
+    liveStates?: readonly CatalogLiveState[];
     render: (context: CatalogCaseContext) => React.ReactNode;
 }
 export interface CatalogSectionDefinition {

package/dist/catalog/catalog-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"catalog-types.d.ts","sourceRoot":"","sources":["../../src/catalog/catalog-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,eAAO,MAAM,aAAa,4BAA6B,CAAA;AACvD,eAAO,MAAM,gBAAgB,iCAAkC,CAAA;AAC/D,eAAO,MAAM,gBAAgB,6BAA8B,CAAA;AAC3D,eAAO,MAAM,yBAAyB,uFAK5B,CAAA;AACV,eAAO,MAAM,mBAAmB,+GAUtB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5C,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,YAAY,CAAA;IACnB,OAAO,EAAE,cAAc,CAAA;IACvB,QAAQ,EAAE,eAAe,CAAA;IACzB,iBAAiB,EAAE,wBAAwB,CAAA;IAC3C,WAAW,EAAE,kBAAkB,CAAA;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B,MAAM,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACrC,SAAS,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IACtC,kBAAkB,CAAC,EAAE,SAAS,wBAAwB,EAAE,CAAA;IACxD,YAAY,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IAC5C,MAAM,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAA;CACzD;AAED,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAA;CAC3C;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,QAAQ,EAAE,SAAS,wBAAwB,EAAE,CAAA;CAC9C;AAED,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,iBAAiB,CAAC,EAAE,wBAAwB,CAAA;IAC5C,WAAW,CAAC,EAAE,kBAAkB,CAAA;CACjC"}
+{"version":3,"file":"catalog-types.d.ts","sourceRoot":"","sources":["../../src/catalog/catalog-types.ts"],"names":[],"mappings":"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"}

package/dist/catalog/catalog-types.js

@@ -18,3 +18,4 @@ export const catalogInteractions = [
     'loading',
     'empty',
 ];
+export const catalogLiveStates = ['hover', 'focus', 'pressed'];

package/dist/catalog/component-catalog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types';
+import type { CatalogCase, CatalogCaseFilter, CatalogManifest } from './catalog-types.js';
 export interface ComponentCatalogProps extends Omit<React.ComponentProps<'main'>, 'children'> {
     manifest: CatalogManifest;
     filter?: CatalogCaseFilter;

package/dist/catalog/component-catalog.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../lib/utils';
-import { buildCatalogCases } from './catalog-manifest';
+import { cn } from '../lib/utils.js';
+import { buildCatalogCases } from './catalog-manifest.js';
 function caseLabel(catalogCase) {
     const labels = [
         catalogCase.theme,

package/dist/catalog/core-catalog-exclusions.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogCoverageExclusion } from './catalog-coverage';
+import type { CatalogCoverageExclusion } from './catalog-coverage.js';
 /**
  * Intentional gaps in the deterministic core catalog. Keeping this list
  * explicit makes every new public visual module choose between authored

package/dist/catalog/core-catalog-exclusions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-catalog-exclusions.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog-exclusions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAElE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS,wBAAwB,EAiJ3D,CAAA"}
+{"version":3,"file":"core-catalog-exclusions.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog-exclusions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAElE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,SAAS,wBAAwB,EAAO,CAAA"}

package/dist/catalog/core-catalog-exclusions.js

@@ -3,149 +3,4 @@
  * explicit makes every new public visual module choose between authored
  * coverage and a reviewable, temporary reason for deferral.
  */
-export const coreCatalogExclusions = [
-    {
-        component: 'accordion',
-        reason: 'Needs an authored expanded and collapsed keyboard matrix.',
-    },
-    {
-        component: 'alert-dialog',
-        reason: 'Requires isolated portal rendering before open states are stable.',
-    },
-    {
-        component: 'aspect-ratio',
-        reason: 'Layout utility is exercised by consumer media compositions.',
-    },
-    {
-        component: 'calendar',
-        reason: 'Needs a dedicated date-grid interaction matrix.',
-    },
-    {
-        component: 'carousel',
-        reason: 'Needs stable geometry and navigation fixtures.',
-    },
-    {
-        component: 'chart',
-        reason: 'Needs deterministic chart data and resize fixtures.',
-    },
-    {
-        component: 'collapsible',
-        reason: 'Needs an authored disclosure-state matrix.',
-    },
-    {
-        component: 'combobox',
-        reason: 'Requires isolated portal and filtering coverage.',
-    },
-    {
-        component: 'command',
-        reason: 'Needs search, selection, empty, and keyboard fixtures.',
-    },
-    {
-        component: 'confirm-dialog',
-        reason: 'Requires isolated async portal-state rendering.',
-    },
-    {
-        component: 'context-menu',
-        reason: 'Requires isolated pointer-positioned portal rendering.',
-    },
-    {
-        component: 'dialog',
-        reason: 'Requires isolated portal rendering before open states are stable.',
-    },
-    {
-        component: 'drawer',
-        reason: 'Requires isolated viewport and gesture fixtures.',
-    },
-    {
-        component: 'dropdown-menu',
-        reason: 'Requires isolated portal and keyboard coverage.',
-    },
-    {
-        component: 'date-picker',
-        reason: 'Requires isolated calendar portal rendering.',
-    },
-    {
-        component: 'edge-fade',
-        reason: 'Needs deterministic overflow geometry.',
-    },
-    {
-        component: 'form',
-        reason: 'Behavioral adapter is covered through authored field stories.',
-    },
-    {
-        component: 'hover-card',
-        reason: 'Requires isolated delayed-hover portal rendering.',
-    },
-    {
-        component: 'input-group',
-        reason: 'Needs addon, button, and validation compositions.',
-    },
-    {
-        component: 'input-otp',
-        reason: 'Needs input-sequence and paste fixtures.',
-    },
-    {
-        component: 'inspector',
-        reason: 'Needs a representative property-editing composition.',
-    },
-    {
-        component: 'label',
-        reason: 'Covered indirectly by labeled control compositions.',
-    },
-    {
-        component: 'menubar',
-        reason: 'Requires isolated multi-menu portal coverage.',
-    },
-    {
-        component: 'message-scroller',
-        reason: 'Needs deterministic overflow and anchoring geometry.',
-    },
-    {
-        component: 'navigation-menu',
-        reason: 'Requires isolated viewport and portal coverage.',
-    },
-    {
-        component: 'pagination',
-        reason: 'Needs compact and large-page-count compositions.',
-    },
-    {
-        component: 'resizable',
-        reason: 'Needs stable browser geometry and drag fixtures.',
-    },
-    {
-        component: 'scroll-area',
-        reason: 'Needs deterministic overflow geometry.',
-    },
-    {
-        component: 'select',
-        reason: 'Requires isolated portal and keyboard coverage.',
-    },
-    {
-        component: 'separator',
-        reason: 'Covered indirectly by toolbar, item, and panel compositions.',
-    },
-    {
-        component: 'sheet',
-        reason: 'Requires isolated portal and viewport-edge coverage.',
-    },
-    {
-        component: 'sidebar',
-        reason: 'Needs a complete app-shell viewport fixture.',
-    },
-    {
-        component: 'slider',
-        reason: 'Needs pointer and keyboard value fixtures.',
-    },
-    {
-        component: 'split-view',
-        reason: 'Needs stable browser geometry and drag fixtures.',
-    },
-    {
-        component: 'sonner',
-        reason: 'Requires an isolated live toaster host.',
-    },
-    {
-        component: 'tooltip',
-        reason: 'Requires isolated delayed portal rendering.',
-    },
-];
+export const coreCatalogExclusions = [];

package/dist/catalog/core-catalog.d.ts

@@ -1,2 +1,2 @@
-export declare const coreComponentCatalog: import("./catalog-types").CatalogManifest;
+export declare const coreComponentCatalog: import("./catalog-types.js").CatalogManifest;
 //# sourceMappingURL=core-catalog.d.ts.map

package/dist/catalog/core-catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,2CAY/B,CAAA"}
+{"version":3,"file":"core-catalog.d.ts","sourceRoot":"","sources":["../../src/catalog/core-catalog.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,2CAc/B,CAAA"}

package/dist/catalog/core-catalog.js

@@ -1,18 +1,22 @@
-import { createCatalogManifest } from './catalog-manifest';
-import { coreCollectionsSection } from './core-collection-stories';
-import { coreControlsSection } from './core-control-stories';
-import { coreFeedbackSection } from './core-feedback-stories';
-import { coreFoundationSection } from './core-foundation-stories';
-import { coreNavigationSection } from './core-navigation-stories';
-import { coreOverlaysSection } from './core-overlay-stories';
+import { createCatalogManifest } from './catalog-manifest.js';
+import { coreCollectionsSection } from './core-collection-stories.js';
+import { coreControlsSection } from './core-control-stories.js';
+import { coreFeedbackSection } from './core-feedback-stories.js';
+import { coreFormsSection } from './core-form-stories.js';
+import { coreFoundationSection } from './core-foundation-stories.js';
+import { coreLayoutSection } from './core-layout-stories.js';
+import { coreNavigationSection } from './core-navigation-stories.js';
+import { coreOverlaysSection } from './core-overlay-stories.js';
 export const coreComponentCatalog = createCatalogManifest({
     title: 'Moldable UI component catalog',
     description: 'Deterministic component cases for review and visual regression coverage.',
     sections: [
         coreFoundationSection,
         coreControlsSection,
+        coreFormsSection,
         coreCollectionsSection,
         coreNavigationSection,
+        coreLayoutSection,
         coreOverlaysSection,
         coreFeedbackSection,
     ],

package/dist/catalog/core-collection-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreCollectionsSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-collection-stories.d.ts.map

package/dist/catalog/core-collection-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-collection-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-collection-stories.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,sBAAsB,EAAE,wBAwIpC,CAAA"}
+{"version":3,"file":"core-collection-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-collection-stories.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAgB/D,eAAO,MAAM,sBAAsB,EAAE,wBAoNpC,CAAA"}

package/dist/catalog/core-collection-stories.js

@@ -1,10 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileTextIcon, MoreHorizontalIcon } from 'lucide-react';
-import { Grid, GridItem, GridItemContent, GridItemDescription, GridItemTitle, } from '../components/ui/grid';
-import { IconButton } from '../components/ui/icon-button';
-import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from '../components/ui/item';
-import { List, ListItem, ListItemContent, ListItemDescription, ListItemTitle, } from '../components/ui/list';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../components/ui/table';
+import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, } from '../components/ui/avatar.js';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from '../components/ui/carousel.js';
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from '../components/ui/chart.js';
+import { Grid, GridItem, GridItemContent, GridItemDescription, GridItemTitle, } from '../components/ui/grid.js';
+import { IconButton } from '../components/ui/icon-button.js';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from '../components/ui/item.js';
+import { List, ListItem, ListItemContent, ListItemDescription, ListItemTitle, } from '../components/ui/list.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '../components/ui/table.js';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+const chartData = [
+    { day: 'Mon', created: 4, completed: 2 },
+    { day: 'Tue', created: 7, completed: 5 },
+    { day: 'Wed', created: 5, completed: 6 },
+    { day: 'Thu', created: 9, completed: 7 },
+    { day: 'Fri', created: 6, completed: 8 },
+];
+const chartConfig = {
+    created: { label: 'Created', color: 'var(--chart-1)' },
+    completed: { label: 'Completed', color: 'var(--chart-2)' },
+};
 export const coreCollectionsSection = {
     id: 'collections',
     title: 'Collections',
@@ -28,15 +43,32 @@ export const coreCollectionsSection = {
             id: 'data-table',
             title: 'Dense selectable table',
             components: ['table'],
-            interactions: ['rest', 'focus-visible', 'selected', 'disabled', 'empty'],
-            render: ({ density, interaction }) => (_jsxs(Table, { density: density === 'compact' ? 'compact' : 'default', children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Status" })] }) }), _jsx(TableBody, { children: interaction === 'empty' ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "text-muted-foreground", children: "No projects" }) })) : (_jsxs(_Fragment, { children: [_jsxs(TableRow, { "data-catalog-target": true, selected: interaction === 'selected', disabled: interaction === 'disabled', autoFocus: interaction === 'focus-visible', children: [_jsx(TableCell, { children: "Personal" }), _jsx(TableCell, { children: "Active" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Archive" }), _jsx(TableCell, { children: "Local" })] })] })) })] })),
+            render: () => (_jsx("div", { className: "grid gap-4", children: ['default', 'compact'].map((density) => (_jsxs("div", { children: [_jsxs("p", { className: "text-muted-foreground mb-1 text-xs capitalize", children: [density, " density"] }), _jsxs(Table, { density: density, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Status" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { selected: true, children: [_jsx(TableCell, { children: "Personal" }), _jsx(TableCell, { children: "Active" })] }), _jsxs(TableRow, { disabled: true, children: [_jsx(TableCell, { children: "Archive" }), _jsx(TableCell, { children: "Unavailable" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Work" }), _jsx(TableCell, { children: "Local" })] })] })] })] }, density))) })),
         },
         {
             id: 'item-anatomy',
             title: 'Item anatomy',
             components: ['item'],
             viewports: ['narrow'],
-            render: () => (_jsx(ItemGroup, { children: _jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileTextIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Project brief" }), _jsx(ItemDescription, { children: "Edited five minutes ago" })] }), _jsx(ItemActions, { children: _jsx(IconButton, { label: "More actions", size: "sm", variant: "ghost", children: _jsx(MoreHorizontalIcon, {}) }) })] }) })),
+            render: () => (_jsx(ItemGroup, { children: _jsxs(Item, { role: "listitem", size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(FileTextIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Project brief" }), _jsx(ItemDescription, { children: "Edited five minutes ago" })] }), _jsx(ItemActions, { children: _jsx(IconButton, { label: "More actions", size: "sm", variant: "ghost", children: _jsx(MoreHorizontalIcon, {}) }) })] }) })),
+        },
+        {
+            id: 'carousel-frame',
+            title: 'Static carousel frame',
+            components: ['carousel'],
+            render: () => (_jsxs(Carousel, { className: "mx-auto w-[min(100%-5rem,28rem)]", children: [_jsx(CarouselContent, { children: ['Today', 'Upcoming', 'Archive'].map((label, index) => (_jsx(CarouselItem, { children: _jsx("div", { className: "bg-card grid h-36 place-items-center rounded-md border", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "font-medium", children: label }), _jsxs("p", { className: "text-muted-foreground text-sm", children: ["Frame ", index + 1, " of 3"] })] }) }) }, label))) }), _jsx(CarouselPrevious, {}), _jsx(CarouselNext, {})] })),
+        },
+        {
+            id: 'seeded-chart',
+            title: 'Seeded activity chart',
+            components: ['chart'],
+            render: () => (_jsx(ChartContainer, { id: "catalog-activity", config: chartConfig, className: "h-64 w-full", children: _jsxs(BarChart, { accessibilityLayer: true, data: chartData, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "day", tickLine: false, tickMargin: 8, axisLine: false }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), _jsx(Bar, { dataKey: "created", fill: "var(--color-created)", radius: [3, 3, 0, 0] }), _jsx(Bar, { dataKey: "completed", fill: "var(--color-completed)", radius: [3, 3, 0, 0] })] }) })),
+        },
+        {
+            id: 'avatar-group-overflow',
+            title: 'Avatar group overflow',
+            components: ['avatar'],
+            render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(AvatarGroup, { "aria-label": "Workspace collaborators", children: [['RM', 'AK', 'SL'].map((initials) => (_jsx(Avatar, { children: _jsx(AvatarFallback, { children: initials }) }, initials))), _jsx(AvatarGroupCount, { "aria-label": "4 more collaborators", children: "+4" })] }), _jsx("span", { className: "text-muted-foreground text-sm", children: "7 collaborators" })] })),
         },
     ],
 };

package/dist/catalog/core-control-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreControlsSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-control-stories.d.ts.map

package/dist/catalog/core-control-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAM/D,eAAO,MAAM,mBAAmB,EAAE,wBAkPjC,CAAA"}
+{"version":3,"file":"core-control-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-control-stories.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAuC/D,eAAO,MAAM,mBAAmB,EAAE,wBAoUjC,CAAA"}

package/dist/catalog/core-control-stories.js

@@ -1,22 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BoldIcon, ItalicIcon, PlusIcon } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { ButtonGroup, ButtonGroupText } from '../components/ui/button-group';
-import { Checkbox } from '../components/ui/checkbox';
-import { ColorWell } from '../components/ui/color-well';
-import { DateField } from '../components/ui/date-field';
-import { Field, FieldContent, FieldDescription, FieldLabel, } from '../components/ui/field';
-import { IconButton } from '../components/ui/icon-button';
-import { Input } from '../components/ui/input';
-import { Kbd, KbdGroup } from '../components/ui/kbd';
-import { NumberInput } from '../components/ui/number-input';
-import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
-import { SearchField } from '../components/ui/search-field';
-import { SegmentedControl, SegmentedControlItem, } from '../components/ui/segmented-control';
-import { Switch } from '../components/ui/switch';
-import { Textarea } from '../components/ui/textarea';
-import { ToggleButton } from '../components/ui/toggle';
-import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group';
+import { AtSignIcon, BoldIcon, ItalicIcon, PlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { Button } from '../components/ui/button.js';
+import { ButtonGroup, ButtonGroupText } from '../components/ui/button-group.js';
+import { Checkbox } from '../components/ui/checkbox.js';
+import { ColorWell } from '../components/ui/color-well.js';
+import { DateField } from '../components/ui/date-field.js';
+import { Field, FieldContent, FieldDescription, FieldLabel, } from '../components/ui/field.js';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '../components/ui/form.js';
+import { IconButton } from '../components/ui/icon-button.js';
+import { Input } from '../components/ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from '../components/ui/input-group.js';
+import { Kbd, KbdGroup } from '../components/ui/kbd.js';
+import { NumberInput } from '../components/ui/number-input.js';
+import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group.js';
+import { SearchField } from '../components/ui/search-field.js';
+import { SegmentedControl, SegmentedControlItem, } from '../components/ui/segmented-control.js';
+import { Switch } from '../components/ui/switch.js';
+import { Textarea } from '../components/ui/textarea.js';
+import { ToggleButton } from '../components/ui/toggle.js';
+import { ToggleGroup, ToggleGroupItem } from '../components/ui/toggle-group.js';
+function CatalogFormFixture() {
+    const form = useForm({
+        defaultValues: { project: '' },
+        errors: {
+            project: {
+                type: 'required',
+                message: 'Project name is required.',
+            },
+        },
+    });
+    return (_jsx(Form, { ...form, children: _jsx("form", { className: "max-w-sm", children: _jsx(FormField, { control: form.control, name: "project", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Project name" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Personal dashboard", ...field }) }), _jsx(FormDescription, { children: "Shown in the app titlebar." }), _jsx(FormMessage, {})] })) }) }) }));
+}
 function controlId(caseId, suffix) {
     return `catalog-${caseId.replaceAll('/', '-')}-${suffix}`;
 }
@@ -29,7 +44,8 @@ export const coreControlsSection = {
             title: 'Button',
             components: ['button'],
             interactions: ['rest', 'focus-visible', 'disabled'],
-            render: ({ interaction }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { "data-catalog-target": true, autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: "Continue" }), _jsx(Button, { variant: "outline", disabled: interaction === 'disabled', children: "Cancel" })] })),
+            liveStates: ['hover', 'focus', 'pressed'],
+            render: ({ interaction }) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "xs", variant: "outline", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Extra small"] }), _jsxs(Button, { size: "sm", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Small"] }), _jsxs(Button, { "data-catalog-target": true, "data-state-target": "hover focus pressed", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Default"] }), _jsxs(Button, { size: "lg", disabled: interaction === 'disabled', children: [_jsx(PlusIcon, {}), "Large"] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: ['xs', 'sm', 'default', 'lg'].map((size) => (_jsx(IconButton, { label: `Add item, ${size} size`, size: size, variant: "outline", disabled: interaction === 'disabled', children: _jsx(PlusIcon, {}) }, size))) })] })),
         },
         {
             id: 'icon-button',
@@ -43,7 +59,8 @@ export const coreControlsSection = {
             title: 'Segmented control',
             components: ['segmented-control'],
             interactions: ['rest', 'focus-visible', 'disabled'],
-            render: ({ interaction }) => (_jsxs(SegmentedControl, { "aria-label": "Calendar view", defaultValue: "month", disabled: interaction === 'disabled', children: [_jsx(SegmentedControlItem, { "data-catalog-target": true, value: "week", autoFocus: interaction === 'focus-visible', children: "Week" }), _jsx(SegmentedControlItem, { value: "month", children: "Month" })] })),
+            liveStates: ['hover', 'focus', 'pressed'],
+            render: ({ interaction }) => (_jsxs(SegmentedControl, { "aria-label": "Calendar view", defaultValue: "month", disabled: interaction === 'disabled', children: [_jsx(SegmentedControlItem, { "data-catalog-target": true, "data-state-target": "hover focus pressed", value: "week", autoFocus: interaction === 'focus-visible', children: "Week" }), _jsx(SegmentedControlItem, { value: "month", children: "Month" })] })),
         },
         {
             id: 'text-field',
@@ -73,7 +90,7 @@ export const coreControlsSection = {
                 const invalid = interaction === 'invalid' || undefined;
                 const checkboxId = controlId(caseId, 'notifications');
                 const switchId = controlId(caseId, 'sync');
-                return (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", htmlFor: checkboxId, children: [_jsx(Checkbox, { "data-catalog-target": true, id: checkboxId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Notifications"] }), _jsxs("label", { className: "flex items-center gap-2", htmlFor: switchId, children: [_jsx(Switch, { id: switchId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Sync automatically"] }), _jsxs(RadioGroup, { "aria-label": "Priority", defaultValue: selected ? 'high' : 'normal', disabled: disabled, children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "normal", "aria-invalid": invalid }), "Normal priority"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "high", "aria-invalid": invalid }), "High priority"] })] })] }));
+                return (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("label", { className: "flex items-center gap-2", htmlFor: checkboxId, children: [_jsx(Checkbox, { "data-catalog-target": true, id: checkboxId, defaultChecked: interaction === 'rest' || selected, disabled: disabled, "aria-invalid": invalid }), "Notifications"] }), _jsxs("label", { className: "flex items-center gap-2", htmlFor: switchId, children: [_jsx(Switch, { id: switchId, defaultChecked: selected, disabled: disabled, "aria-invalid": invalid }), "Sync automatically"] }), _jsxs(RadioGroup, { "aria-label": "Priority", defaultValue: selected ? 'high' : 'normal', disabled: disabled, children: [_jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "normal", "aria-invalid": invalid }), "Normal priority"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { value: "high", "aria-invalid": invalid }), "High priority"] })] })] }));
             },
         },
         {
@@ -81,7 +98,8 @@ export const coreControlsSection = {
             title: 'Toggle and grouped controls',
             components: ['button-group', 'kbd', 'toggle', 'toggle-group'],
             interactions: ['rest', 'selected', 'disabled'],
-            render: ({ interaction }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(ToggleButton, { "data-catalog-target": true, iconOnly: true, "aria-label": "Bold", defaultPressed: interaction === 'selected', disabled: interaction === 'disabled', children: _jsx(BoldIcon, {}) }), _jsxs(ToggleGroup, { type: "multiple", variant: "outline", defaultValue: interaction === 'selected' ? ['italic'] : [], disabled: interaction === 'disabled', "aria-label": "Formatting", children: [_jsx(ToggleGroupItem, { value: "bold", children: "Bold" }), _jsxs(ToggleGroupItem, { value: "italic", children: [_jsx(ItalicIcon, {}), "Italic"] })] }), _jsxs(ButtonGroup, { children: [_jsx(ButtonGroupText, { children: _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] }) }), _jsx(Button, { variant: "outline", disabled: interaction === 'disabled', children: "Commands" })] })] })),
+            liveStates: ['hover', 'focus', 'pressed'],
+            render: ({ interaction }) => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(ToggleButton, { "data-catalog-target": true, "data-state-target": "hover focus pressed", iconOnly: true, "aria-label": "Bold", defaultPressed: interaction === 'selected', disabled: interaction === 'disabled', children: _jsx(BoldIcon, {}) }), _jsxs(ToggleGroup, { type: "multiple", variant: "outline", defaultValue: interaction === 'selected' ? ['italic'] : [], disabled: interaction === 'disabled', "aria-label": "Formatting", children: [_jsx(ToggleGroupItem, { value: "bold", children: "Bold" }), _jsxs(ToggleGroupItem, { value: "italic", children: [_jsx(ItalicIcon, {}), "Italic"] })] }), _jsxs(ButtonGroup, { children: [_jsx(ButtonGroupText, { children: _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] }) }), _jsx(Button, { variant: "outline", disabled: interaction === 'disabled', children: "Commands" })] })] })),
         },
         {
             id: 'value-fields',
@@ -90,5 +108,18 @@ export const coreControlsSection = {
             interactions: ['rest', 'focus-visible', 'disabled', 'invalid'],
             render: ({ interaction }) => (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsx(Textarea, { "data-catalog-target": true, "aria-label": "Notes", defaultValue: "Keep the interface quiet and direct.", autoFocus: interaction === 'focus-visible', disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(NumberInput, { "aria-label": "Duration", defaultValue: 25, unit: "min", disabled: interaction === 'disabled', "aria-invalid": interaction === 'invalid' || undefined, className: "w-32" }), _jsx(ColorWell, { "aria-label": "Accent color", value: "#ff6b4a", disabled: interaction === 'disabled' })] })] })),
         },
+        {
+            id: 'input-groups',
+            title: 'Input groups and labels',
+            components: ['input-group', 'label'],
+            liveStates: ['focus'],
+            render: () => (_jsxs("div", { className: "grid max-w-sm gap-3", children: [_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(AtSignIcon, {}) }), _jsx(InputGroupInput, { "data-state-target": "focus", "aria-label": "Username", value: "moldable", readOnly: true }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: ".sh" }) })] }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { "aria-label": "Invite address", placeholder: "person@example.com" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { children: "Invite" }) })] }), _jsx(InputGroup, { "data-disabled": "true", children: _jsx(InputGroupInput, { "aria-label": "Disabled workspace URL", value: "local-only", disabled: true, readOnly: true }) })] })),
+        },
+        {
+            id: 'validated-form',
+            title: 'Validated form adapter',
+            components: ['form'],
+            render: () => _jsx(CatalogFormFixture, {}),
+        },
     ],
 };

package/dist/catalog/core-feedback-stories.d.ts

@@ -1,3 +1,3 @@
-import type { CatalogSectionDefinition } from './catalog-types';
+import type { CatalogSectionDefinition } from './catalog-types.js';
 export declare const coreFeedbackSection: CatalogSectionDefinition;
 //# sourceMappingURL=core-feedback-stories.d.ts.map

package/dist/catalog/core-feedback-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-feedback-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-feedback-stories.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,mBAAmB,EAAE,wBAsFjC,CAAA"}
+{"version":3,"file":"core-feedback-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-feedback-stories.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAqC/D,eAAO,MAAM,mBAAmB,EAAE,wBAwMjC,CAAA"}