@utopia-studio-design/design-system-cli 0.4.0 → 0.5.0

package/data/manifests/components.json

@@ -671,7 +671,7 @@
       "sourcePath": "packages/design-system/src/components/Button.tsx",
       "shadcnFoundation": [
         "button",
-        "Slot",
+        "single-element asChild composition",
         "cva"
       ],
       "fallbackToShadcn": "button",
@@ -709,6 +709,7 @@
         "New button colors",
         "Gradient states",
         "Unlabeled icon-only buttons",
+        "Fragments or multiple root children inside Button asChild",
         "Left/right-only layout rules",
         "Utopia brand primitives inside reusable component logic",
         "Motion that bypasses MotionProvider or prefers-reduced-motion"
@@ -718,7 +719,10 @@
           "motion": "Optional boolean. Defaults to the MotionProvider policy and disables this component pattern when false.",
           "contentAlign": "Use 'start' for leading-aligned labels, 'center' for the default action layout, or 'between' to pin endContent to the logical inline end.",
           "startContent": "Optional leading icon or content slot with package-owned alignment.",
-          "endContent": "Optional trailing content slot. With contentAlign='between', it remains pinned while the label truncates."
+          "endContent": "Optional trailing content slot. With contentAlign='between', it remains pinned while the label truncates.",
+          "asChild": "Use with exactly one non-Fragment anchor or framework Link that forwards ref, className, events, children, and accessibility props to one interactive element. Button preserves the child href, target, aria attributes, className, and ref while composing its internal slots inside that element.",
+          "disabled": "Native buttons receive disabled. With asChild, disabled links keep href, receive aria-disabled=true and tabIndex=-1, and block click activation without receiving a disabled attribute.",
+          "loading": "Shows the spinner/loadingText and sets aria-busy. Native buttons are disabled; asChild links use the same aria-disabled, tabIndex, and activation-blocking contract as disabled."
         }
       }
     },
@@ -776,8 +780,9 @@
           "label",
           "children",
           "ButtonGroupSeparator.orientation",
-          "ButtonGroupText.asChild"
+        "ButtonGroupText.asChild"
         ],
+        "composition": "ButtonGroupText.asChild accepts exactly one text-compatible consumer element and preserves it as the semantic root while applying the group text class and props.",
         "shadcnReferencePatterns": [
           "button group",
           "button group with dropdown menu",
@@ -848,6 +853,8 @@
           "defaultSelectedDate": "Initial selected date for uncontrolled usage.",
           "onSelect": "Called with a Date when an enabled day is selected.",
           "onMonthChange": "Called when previous/next or month/year controls change the visible month.",
+          "locale": "BCP 47 locale used for month/day labels, direction, and default numeral selection.",
+          "numberingSystem": "Optional react-day-picker numeral system override. Defaults to the locale-resolved numbering system.",
           "weekStartsOn": "Use product locale requirements. 0 is Sunday, 1 Monday, 6 Saturday.",
           "disabledDates": "Product-owned predicate for disabled days."
         },
@@ -1015,6 +1022,62 @@
         "Utopia brand primitives inside reusable component logic"
       ]
     },
+    {
+      "name": "Chart Root",
+      "category": "Data Display",
+      "status": "available",
+      "packageImport": "import { ChartRoot, ChartDataTable, ChartLegendList, ChartResponsiveContainer, ChartTooltipPanel, RechartsChartRenderer } from '@utopia-studio-design/design-system/Charts';",
+      "sourcePath": "packages/design-system/src/components/Charts.tsx",
+      "shadcnFoundation": [
+        "shadcn/ui chart composition",
+        "Recharts adapter boundary",
+        "Ceramic interaction foundation",
+        "semantic visualization token contract"
+      ],
+      "fallbackToShadcn": "chart",
+      "requiredTokens": [
+        "--visualization-series-1",
+        "--visualization-series-2",
+        "--visualization-positive",
+        "--visualization-negative",
+        "--visualization-neutral",
+        "--visualization-forecast",
+        "--visualization-benchmark",
+        "--visualization-grid",
+        "--interaction-selection-surface",
+        "--interaction-selection-border"
+      ],
+      "useWhen": [
+        "Application analytics need Line, Bar, Area, Stacked, Scatter, or Donut families",
+        "Charts need controlled series visibility and keyboard point exploration",
+        "Loading, empty, error, partial, and ready data states must remain explicit",
+        "A semantic data table is required as the exact-value alternative"
+      ],
+      "avoidWhen": [
+        "A small decorative bar scaffold is sufficient",
+        "The chart lacks an accessible summary or stable series IDs",
+        "Renderer-specific styling must bypass Ceramic tokens"
+      ],
+      "neverInvent": [
+        "Raw series colors",
+        "Color-only series identity",
+        "Missing values represented as zero",
+        "SVG-only interaction without a keyboard and table alternative",
+        "Left/right-only keyboard behavior",
+        "Utopia brand primitives inside reusable component logic"
+      ],
+      "ai": {
+        "props": {
+          "type": "'line' | 'bar' | 'area' | 'stacked' | 'scatter' | 'donut'",
+          "state": "'loading' | 'empty' | 'error' | 'partial' | 'ready'",
+          "renderer": "Optional tree-shakeable adapter implementing ChartRendererProps.",
+          "direction": "'ltr' | 'rtl'. Changes chronological rendering and logical Arrow key exploration.",
+          "showDataTable": "boolean. Renders the exact-value semantic table alternative."
+        },
+        "arabicFriendly": "Chart Root inherits localized labels and formatters from the consumer, mirrors chronological start and logical keyboard exploration under RTL, and keeps numbers formatted by the supplied locale.",
+        "cli": "npm run ds -- component \"Chart Root\" --dense"
+      }
+    },
     {
       "name": "Assistant Panel",
       "category": "Chat",
@@ -2290,6 +2353,127 @@
         "Utopia brand primitives inside reusable component logic"
       ]
     },
+    {
+      "name": "Scheduler Root",
+      "category": "Data Display",
+      "status": "available",
+      "packageImport": "import { SchedulerRoot, MonthView, WeekView, DayView, AgendaView, TimeGrid, AllDayLane, EventCard, DateNavigator } from '@utopia-studio-design/design-system/Calendar';",
+      "sourcePath": "packages/design-system/src/components/Calendar.tsx",
+      "shadcnFoundation": [
+        "shadcn/ui Calendar through the Ceramic react-day-picker Calendar",
+        "Ceramic Button, IconButton, and ButtonGroup composition",
+        "Radix Select through the Ceramic Select family",
+        "Ceramic interaction foundation",
+        "application scheduler",
+        "controlled persistence adapter"
+      ],
+      "fallbackToShadcn": "calendar, button group, select, sheet",
+      "requiredTokens": [
+        "--background",
+        "--surface",
+        "--popover-surface",
+        "--foreground",
+        "--muted-foreground",
+        "--border",
+        "--ring",
+        "--interaction-selection-surface",
+        "--interaction-selection-border",
+        "--success",
+        "--warning",
+        "--destructive"
+      ],
+      "useWhen": [
+        "A product needs event or resource scheduling rather than date selection",
+        "Month, Week, Day, and Agenda views share controlled events",
+        "Recurrence, overlap, conflict, permissions, and timezone display need one contract"
+      ],
+      "avoidWhen": [
+        "A date picker or single-date Calendar is sufficient",
+        "Product persistence or authorization would be owned by the component package",
+        "Pointer drag would be the only way to move or resize an event"
+      ],
+      "neverInvent": [
+        "Raw event colors",
+        "Persistence or authorization inside SchedulerRoot",
+        "Mouse-only move or resize behavior",
+        "Hidden timezone conversion",
+        "Left/right-only layout rules",
+        "Utopia brand primitives inside reusable component logic"
+      ],
+      "ai": {
+        "props": {
+          "events": "Controlled SchedulerEvent records with stable IDs and ISO instants.",
+          "timezone": "IANA timezone used for displayed date and time; stored instants remain unchanged.",
+          "view": "Controlled month, week, day, or agenda view.",
+          "adapter": "Optional controlled mutation adapter. Ceramic provides optimistic UI and rollback but never owns persistence.",
+          "permissions": "Explicit create, edit, move, resize, duplicate, and delete capabilities.",
+          "direction": "Optional ltr or rtl override. When omitted, direction is derived from locale.",
+          "locale": "BCP 47 locale used for labels, dates, numerals, week information, and automatic direction.",
+          "weekStartsOn": "Optional JS weekday override. Defaults to Intl.Locale week information.",
+          "weekendDays": "Optional JS weekday list. Defaults to Intl.Locale weekend information.",
+          "calendarSystem": "Primary display calendar. Event placement remains based on Gregorian instants.",
+          "secondaryCalendar": "Optional secondary display calendar such as islamic-umalqura.",
+          "labels": "Product-localized visible and accessibility copy. Use labels.monthGrid for the ARIA month grid, labels.compactView for shorter mobile view names, labels.compactMore for narrow month-cell overflow counts, and labels.selectDate for date actions."
+        },
+        "arabicFriendly": "Event titles and accessibility copy are product-localized; logical placement and navigation mirror in RTL, while dates, times, and numerals use the supplied locale and timezone."
+      }
+    },
+    {
+      "name": "Database Root",
+      "category": "Data Display",
+      "status": "available",
+      "packageImport": "import { DatabaseRoot, DataGrid, DatabasePropertyCell } from '@utopia-studio-design/design-system/Database';",
+      "sourcePath": "packages/design-system/src/components/Database.tsx",
+      "shadcnFoundation": [
+        "data table and form composition",
+        "Ceramic interaction foundation",
+        "schema-driven record grid",
+        "controlled persistence adapter"
+      ],
+      "fallbackToShadcn": "data-table",
+      "requiredTokens": [
+        "--background",
+        "--surface",
+        "--surface-elevated",
+        "--foreground",
+        "--muted-foreground",
+        "--border",
+        "--input",
+        "--ring",
+        "--interaction-selection-surface",
+        "--interaction-selection-border"
+      ],
+      "useWhen": [
+        "A product needs schema-driven editable records and saved views",
+        "Large datasets need virtualized grid navigation and controlled persistence",
+        "A dense desktop grid must transform into mobile record details"
+      ],
+      "avoidWhen": [
+        "A read-only Table or lightweight DataTable is sufficient",
+        "Product persistence or authorization would be owned by the component package",
+        "Arbitrary cell CSS is required instead of registered property types"
+      ],
+      "neverInvent": [
+        "Raw property colors",
+        "Persistence or authorization inside DatabaseRoot",
+        "Mouse-only resize, reorder, or editing behavior",
+        "Page-level horizontal overflow",
+        "Left/right-only layout rules",
+        "Utopia brand primitives inside reusable component logic"
+      ],
+      "ai": {
+        "props": {
+          "schema": "DatabaseSchema with stable property IDs and text, number, select, multi-select, date, person, checkbox, or URL property types.",
+          "records": "Controlled records with stable IDs and property values.",
+          "density": "compact, default, or comfortable. Density changes desktop row height without changing mobile record semantics.",
+          "query": "Semantic filters, sorts, and grouping; saved view state stays product-controlled.",
+          "adapter": "Optional controlled mutation adapter. Ceramic applies optimistic UI and rollback but never owns persistence.",
+          "permissions": "Explicit edit, resize, reorder, and bulk-action capabilities.",
+          "direction": "ltr or rtl. Logical grid navigation and inline placement follow direction."
+        },
+        "arabicFriendly": "Property labels and values are supplied by the product; grid arrows follow logical inline direction, dates and numbers use the supplied locale, and the mobile record-detail transformation preserves property order."
+      }
+    },
     {
       "name": "Data Table",
       "category": "Data Display",
@@ -4671,6 +4855,7 @@
       "shadcnFoundation": [
         "toggle",
         "Radix Toggle",
+        "Slottable single-button asChild composition",
         "cva"
       ],
       "fallbackToShadcn": "shadcn/ui toggle",
@@ -4697,6 +4882,7 @@
       "neverInvent": [
         "New pressed colors",
         "Checkbox behavior",
+        "Fragments, multiple roots, anchors, or navigation links inside ToggleButton asChild",
         "Left/right-only state names",
         "Utopia brand primitives inside reusable component logic"
       ],
@@ -4711,9 +4897,11 @@
           "isIconOnly",
           "isDisabled",
           "isLoading",
+          "asChild",
           "variant",
           "size"
         ],
+        "composition": "ToggleButton.asChild requires exactly one non-Fragment button-compatible component that forwards ref, className, events, children, disabled, and accessibility props to one button. Ceramic keeps spinner, icon, pressed icon, and label slots inside that root.",
         "arabicFriendly": [
           "Use logical start/end language for labels and adjacent content.",
           "In RTL, keep persistent pressed state behavior identical; only directional layout and directional icons may mirror.",