@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/generative/registry.js

@@ -1,38 +1,130 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Accordion } from '../core/Accordion/Accordion.js';
 import { Alert } from '../core/Alert/Alert.js';
+import { AspectRatio } from '../core/AspectRatio/AspectRatio.js';
 import { Avatar } from '../core/Avatar/Avatar.js';
 import { AvatarGroup } from '../core/AvatarGroup/AvatarGroup.js';
 import { Badge } from '../core/Badge/Badge.js';
 import { Breadcrumbs } from '../core/Breadcrumbs/Breadcrumbs.js';
 import '../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
+import { ButtonGroup } from '../core/ButtonGroup/ButtonGroup.js';
+import '../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../core/ButtonGroup/ButtonGroupText.js';
+import { Calendar } from '../core/Calendar/Calendar.js';
+import '../core/Calendar/CalendarMini/CalendarMini.js';
 import { Card } from '../core/Card/Card.js';
+import { CommandPalette } from '../core/CommandPalette/CommandPalette.js';
+import { DotSeparator } from '../core/DotSeparator/DotSeparator.js';
 import { Empty } from '../core/Empty/Empty.js';
+import { FormShell } from './FormShell.js';
+import { HeroCard } from '../core/HeroCard/HeroCard.js';
+import { Icon } from '../core/Icon/Icon.js';
+import { Kbd } from '../core/Kbd/Kbd.js';
+import { Link } from '../core/Link/Link.js';
+import { Masonry } from '../core/Masonry/Masonry.js';
+import { Message } from '../core/Message/Message.js';
+import '../core/Message/TypeWriter.js';
+import '../core/Message/MessageBody.js';
+import { cn } from '../../utils/cn.js';
+import 'react';
+import '@phosphor-icons/react';
+import { MenuItem } from '../core/MenuItem/MenuItem.js';
 import { PageHeading } from '../core/PageHeading/PageHeading.js';
+import { Pagination } from '../core/Pagination/Pagination.js';
 import { Pill } from '../core/Pill/Pill.js';
 import { Progress } from '../core/Progress/Progress.js';
 import { Rating } from '../core/Rating/Rating.js';
+import { ScrollArea } from '../core/ScrollArea/ScrollArea.js';
+import '../core/ScrollArea/smooth/SmoothScrollEngine.js';
 import { Separator } from '../core/Separator/Separator.js';
+import { Skeleton } from '../core/Skeleton/Skeleton.js';
+import { Spinner } from '../core/Spinner/Spinner.js';
 import { Tag } from '../core/Tag/Tag.js';
+import { Tree } from '../core/Tree/Tree.js';
 import { Table } from '../data-display/Table/index.js';
 import { KPI } from '../data-display/KPI/KPI.js';
 import { Metric } from '../data-display/Metric/Metric.js';
 import { DescriptionList } from '../data-display/DescriptionList/DescriptionList.js';
 import { Timeline } from '../data-display/Timeline/Timeline.js';
 import { Feed } from '../data-display/Feed/Feed.js';
-import '../data-display/GanttChart/GanttChart.js';
+import { GanttChart as GanttChartComponent } from '../data-display/GanttChart/GanttChart.js';
 import { Grid } from '../layout/Grid/Grid.js';
 import { Stack } from '../layout/Stack/Stack.js';
 import { Section } from '../layout/Section/Section.js';
-import { cn } from '../../utils/cn.js';
+import { Input } from '../forms/Input/Input.js';
+import '../forms/Input/Input.theme.js';
+import { Select } from '../forms/Select/Select.js';
+import '../forms/Select/Select.theme.js';
+import { Textarea } from '../forms/Textarea/Textarea.js';
+import '../forms/Textarea/Textarea.theme.js';
+import '../forms/FormLabel/FormLabel.js';
+import '../forms/Radio/Radio.js';
+import { Checkbox } from '../forms/Checkbox/Checkbox.js';
+import { Switch } from '../forms/Switch/Switch.js';
+import '../forms/DatePicker/DatePicker.js';
+import '../forms/DatePicker/DatePicker.theme.js';
+import '../forms/DateRangePicker/DateRangePicker.js';
+import '../forms/DateRangePicker/DateRangePicker.theme.js';
+import '../forms/FileUpload/FileUpload.js';
+import '../forms/FileUpload/FileUploadProgress.js';
+import { TimePicker } from '../forms/TimePicker/TimePicker.js';
+import '../forms/TimePicker/TimePickerContext.js';
+import 'motion/react';
+import 'react-dom';
+import '../forms/Select/Select.animations.js';
+import '../../theme/SurfaceContext.js';
+import '../forms/TimePicker/WheelColumn.js';
+import '../forms/TimePicker/TimePicker.theme.js';
+import { Slider } from '../forms/Slider/Slider.js';
+import '../forms/Slider/Slider.theme.js';
+import '../forms/Signature/Signature.js';
+import '../forms/Signature/Signature.theme.js';
+import '../forms/RichTextEditor/RichTextEditor.js';
+import '../forms/RichTextEditor/RichTextToolbar.js';
+import '../forms/RichTextEditor/RichTextEditor.theme.js';
+import { InputOTP } from '../forms/InputOTP/InputOTP.js';
+import '../forms/InputOTP/InputOTP.theme.js';
+import '../forms/InputCreditCard/InputCreditCard.js';
+import '../forms/InputCreditCard/InputCreditCard.theme.js';
+import '../forms/InputAddress/InputAddress.js';
+import '../forms/InputAddress/InputAddress.theme.js';
+import { InputDate } from '../forms/InputDate/InputDate.js';
+import { InputCounter } from '../forms/InputCounter/InputCounter.js';
+import { InputTag } from '../forms/InputTag/InputTag.js';
+import '../forms/InputTag/InputTag.theme.js';
+import { Combobox } from '../forms/Combobox/Combobox.js';
+import '../forms/Combobox/Combobox.theme.js';
+import '../forms/ColorPicker/ColorPicker.js';
+import '../forms/ColorPicker/ColorPickerContext.js';
+import '../forms/ColorPicker/ColorPickerTrigger.js';
+import '../forms/ColorPicker/ColorPickerBody.js';
+import '../forms/ColorPicker/ColorPicker2DCanvas.js';
+import '../forms/ColorPicker/ColorPickerSwatch.js';
+import '../forms/ColorPicker/ColorPickerSliders.js';
+import '../forms/ColorPicker/ColorPickerInput.js';
+import '../forms/ColorPicker/ColorPickerFormatSelector.js';
+import '../forms/ColorPicker/ColorPickerEyeDropper.js';
+import '../forms/ColorPicker/ColorPickerPresets.js';
+import '../forms/ColorPicker/ColorPickerSavedColors.js';
+import '../forms/ColorPicker/ColorPickerHeader.js';
+import '../forms/ColorPicker/ColorPickerGradient.js';
+import '../forms/ColorPicker/ColorPickerImage.js';
+import '../forms/SelectableCard/SelectableCard.js';
+import '../forms/Mention/Mention.js';
+import '../forms/Mention/Mention.theme.js';
 import { defaultResolvers, DEFAULT_ICONS } from './resolvers.js';
+import { Heatmap } from '../charts/Heatmap/Heatmap.js';
+import '../charts/Heatmap/HeatmapCell.js';
+import { ActivityRings } from '../charts/ActivityRings/ActivityRings.js';
+import { RadarChart } from '../charts/RadarChart/RadarChart.js';
 import { DonutChart } from '../charts/DonutChart/DonutChart.js';
 import { ChartContainer } from '../charts/ChartContainer.js';
 import { ComboChart } from '../charts/ComboChart/ComboChart.js';
 import { StackedBarChart } from '../charts/StackedBarChart/StackedBarChart.js';
 import { LineChart } from '../charts/LineChart/LineChart.js';
+import { HorizontalBarChart } from '../charts/HorizontalBarChart/HorizontalBarChart.js';
 import { BarChart } from '../charts/BarChart/BarChart.js';
 import { AreaChart } from '../charts/AreaChart/AreaChart.js';
 
@@ -43,6 +135,9 @@ const loose = (component) => component;
 const LooseTable = loose(Table);
 const LooseDonutChart = loose(DonutChart);
 const LooseCard = loose(Card);
+const LooseCommandPalette = loose(CommandPalette);
+const LooseInputDate = loose(InputDate);
+const LooseCalendar = loose(Calendar);
 /**
  * Card shell used by the automatic `needsShell` wrap (KPI, charts).
  * Card now carries `title`/`subtitle` natively (slot-props), so this is a thin
@@ -62,6 +157,12 @@ const DEFAULT_COMPONENTS = {
     Grid: { component: Grid, kind: "container" },
     Stack: { component: Stack, kind: "container" },
     Section: { component: Section, kind: "container" },
+    Form: {
+        component: FormShell,
+        kind: "container",
+        isForm: true,
+        actionProps: { submit: "onSubmit" },
+    },
     Card: {
         component: Card,
         kind: "container",
@@ -80,12 +181,94 @@ const DEFAULT_COMPONENTS = {
     Progress: { component: Progress },
     Separator: { component: Separator },
     Empty: { component: Empty },
-    Rating: { component: Rating },
+    Rating: { component: Rating, actionProps: { change: "onChange" } },
     Pill: { component: Pill },
     Tag: { component: Tag },
     PageHeading: { component: PageHeading },
     Breadcrumbs: { component: Breadcrumbs },
     Accordion: { component: Accordion },
+    Tree: {
+        component: Tree,
+        actionProps: { selectionChange: "onSelectionChange", expand: "onExpand" },
+    },
+    CommandPalette: {
+        component: CommandPalette,
+        actionProps: { close: "onClose", select: "onCommandSelect" },
+        render: (props) => {
+            var _a;
+            const rawCommands = (_a = props.commands) !== null && _a !== void 0 ? _a : [];
+            const commands = rawCommands.map((c) => ({ ...c, onSelect: () => { } }));
+            return jsx(LooseCommandPalette, { ...props, isOpen: true, commands: commands });
+        },
+    },
+    // Forms (Wave 1)
+    Input: { component: Input, actionProps: { change: "onValueChange" } },
+    Select: { component: Select, actionProps: { change: "onChange" } },
+    Combobox: { component: Combobox, actionProps: { change: "onChange" } },
+    Textarea: { component: Textarea, actionProps: { change: "onValueChange" } },
+    Checkbox: { component: Checkbox, actionProps: { change: "onChange" } },
+    Switch: { component: Switch, actionProps: { change: "onChange" } },
+    Slider: {
+        component: Slider,
+        actionProps: { change: "onChange", changeCommitted: "onChangeCommitted" },
+    },
+    InputOTP: {
+        component: InputOTP,
+        actionProps: { complete: "onComplete", change: "onChange" },
+    },
+    TimePicker: { component: TimePicker, actionProps: { change: "onChange" } },
+    InputDate: {
+        component: InputDate,
+        actionProps: { change: "onChange" },
+        // minDate/maxDate are real Date objects at runtime; the generative schema
+        // only carries ISO strings for them (see generativeManifest.ts) — coerce
+        // here before handing off to the real component.
+        render: (props) => {
+            const { minDate, maxDate, ...rest } = props;
+            return (jsx(LooseInputDate, { ...rest, minDate: typeof minDate === "string" ? new Date(minDate) : undefined, maxDate: typeof maxDate === "string" ? new Date(maxDate) : undefined }));
+        },
+    },
+    InputCounter: { component: InputCounter, actionProps: { change: "onChange" } },
+    InputTag: { component: InputTag, actionProps: { change: "onChange" } },
+    // Core + Data Display (Wave 2)
+    Spinner: { component: Spinner },
+    Skeleton: { component: Skeleton },
+    Link: { component: Link, actionProps: { click: "onClick" } },
+    Kbd: { component: Kbd },
+    DotSeparator: { component: DotSeparator },
+    Icon: { component: Icon },
+    Pagination: { component: Pagination, actionProps: { pageChange: "onPageChange" } },
+    Message: { component: Message },
+    MenuItem: { component: MenuItem, actionProps: { activate: "onActivate" } },
+    Calendar: {
+        component: Calendar,
+        actionProps: { change: "onChange" },
+        // value/minDate/maxDate are real Date objects at runtime; the schema only
+        // carries ISO strings for them (mode is constrained to "single" in the
+        // generative surface, per the manifest's exclude list). onChange fires
+        // with a Date — convert back to an ISO string before it reaches the
+        // actionProps-bound dispatcher so context.data stays JSON-safe.
+        render: (props) => {
+            const { value, minDate, maxDate, onChange, ...rest } = props;
+            const toDate = (v) => (typeof v === "string" ? new Date(v) : undefined);
+            return (jsx(LooseCalendar, { ...rest, value: toDate(value), minDate: toDate(minDate), maxDate: toDate(maxDate), onChange: (next) => {
+                    if (next instanceof Date) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(next.toISOString().slice(0, 10));
+                    }
+                } }));
+        },
+    },
+    GanttChart: {
+        component: GanttChartComponent,
+        needsShell: true,
+        actionProps: { taskClick: "onTaskClick" },
+    },
+    // New containers (Wave 2)
+    AspectRatio: { component: AspectRatio, kind: "container" },
+    ButtonGroup: { component: ButtonGroup, kind: "container" },
+    Masonry: { component: Masonry, kind: "container" },
+    ScrollArea: { component: ScrollArea, kind: "container" },
+    HeroCard: { component: HeroCard, kind: "container" },
     // Panel-less leaves — auto Card shell (lifted from the PoC's NEEDS_SHELL)
     KPI: { component: KPI, needsShell: true },
     // Collections (dual-API data path — items/data arrays are serializable)
@@ -102,6 +285,7 @@ const DEFAULT_COMPONENTS = {
     // Charts — ChartContainer wrap + auto shell
     AreaChart: chartEntry(AreaChart),
     BarChart: chartEntry(BarChart),
+    HorizontalBarChart: chartEntry(HorizontalBarChart),
     LineChart: chartEntry(LineChart),
     StackedBarChart: chartEntry(StackedBarChart),
     ComboChart: chartEntry(ComboChart),
@@ -110,6 +294,15 @@ const DEFAULT_COMPONENTS = {
         needsShell: true,
         render: (props) => (jsx("div", { className: "flex justify-center py-2", children: jsx(LooseDonutChart, { ...props }) })),
     },
+    // Charts (Wave 3) — bespoke prop systems, not BaseChartProps-shaped, so no
+    // ChartContainer wrap via chartEntry() (that helper is data/config-specific).
+    RadarChart: { component: RadarChart, needsShell: true },
+    ActivityRings: { component: ActivityRings, needsShell: true },
+    Heatmap: {
+        component: Heatmap,
+        needsShell: true,
+        actionProps: { cellClick: "onCellClick" },
+    },
 };
 function createRegistry(options = {}) {
     var _a, _b;

package/dist/components/generative/resolvers.js

@@ -1,24 +1,24 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChatBubbleLeftRightIcon, PencilSquareIcon, RocketLaunchIcon, UserPlusIcon, BriefcaseIcon, ExclamationTriangleIcon, CheckCircleIcon, GlobeAltIcon, BoltIcon, ChartBarIcon, ShoppingCartIcon, ArrowTrendingUpIcon, UsersIcon, CurrencyDollarIcon } from '@heroicons/react/24/outline';
+import { ChatsCircle, NotePencil, RocketLaunch, UserPlus, Briefcase, Warning, CheckCircle, Globe, Lightning, ChartBar, ShoppingCart, TrendUp, Users, CurrencyDollar } from '@phosphor-icons/react';
 import { Badge } from '../core/Badge/Badge.js';
 
 /** Closed default icon set (P2's schema generation emits these as the enum). */
 const DEFAULT_ICONS = {
-    CurrencyDollar: CurrencyDollarIcon,
-    Users: UsersIcon,
-    ArrowTrendingUp: ArrowTrendingUpIcon,
-    ShoppingCart: ShoppingCartIcon,
-    ChartBar: ChartBarIcon,
-    Bolt: BoltIcon,
-    Globe: GlobeAltIcon,
-    CheckCircle: CheckCircleIcon,
-    ExclamationTriangle: ExclamationTriangleIcon,
-    Briefcase: BriefcaseIcon,
-    UserPlus: UserPlusIcon,
-    RocketLaunch: RocketLaunchIcon,
-    PencilSquare: PencilSquareIcon,
-    ChatBubbleLeftRight: ChatBubbleLeftRightIcon,
+    CurrencyDollar: CurrencyDollar,
+    Users: Users,
+    ArrowTrendingUp: TrendUp,
+    ShoppingCart: ShoppingCart,
+    ChartBar: ChartBar,
+    Bolt: Lightning,
+    Globe: Globe,
+    CheckCircle: CheckCircle,
+    ExclamationTriangle: Warning,
+    Briefcase: Briefcase,
+    UserPlus: UserPlus,
+    RocketLaunch: RocketLaunch,
+    PencilSquare: NotePencil,
+    ChatBubbleLeftRight: ChatsCircle,
 };
 /** Resolve an icon NAME to an element (undefined when unknown — never throws). */
 function resolveIcon(icons, name, className = "size-5") {
@@ -78,7 +78,7 @@ const tableColumnsResolver = (props) => {
             cell: (row) => {
                 var _a, _b;
                 const value = String((_a = row[accessor]) !== null && _a !== void 0 ? _a : "");
-                return (jsx(Badge, { color: ((_b = map[value]) !== null && _b !== void 0 ? _b : "neutral"), variant: "soft", children: value }));
+                return (jsx(Badge, { color: ((_b = map[value]) !== null && _b !== void 0 ? _b : "mono"), variant: "soft", children: value }));
             },
         };
     });