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

package/dist/components/forms/forms.theme.js

@@ -18,26 +18,29 @@ const formsBaseTheme = {
         "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
     controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
-        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
-        // Dark mode
-        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none",
     // Size variants - atomic design tokens for composability
     // These tokens can be composed together or used individually for maximum flexibility
+    //
+    // `text` reads --form-text-size-* rather than a Tailwind literal so a theme can
+    // retune control type the same way it already retunes control height/padding.
+    // Note the `length:` hint — bare text-[var(--x)] resolves to the COLOUR branch of
+    // Tailwind's ambiguous arbitrary-text syntax and silently sizes nothing.
     sizes: {
         sm: {
-            text: "text-sm",
+            text: "text-[length:var(--form-text-size-sm)]/[var(--form-line-height-sm)]",
             padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
             height: "h-[var(--form-min-h-sm)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
         },
         md: {
-            text: "text-sm",
+            text: "text-[length:var(--form-text-size-md)]/[var(--form-line-height-md)]",
             padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
             height: "h-[var(--form-min-h-md)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
         },
         lg: {
-            text: "text-base",
+            text: "text-[length:var(--form-text-size-lg)]/[var(--form-line-height-lg)]",
             padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
             height: "h-[var(--form-min-h-lg)]",
             textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
@@ -98,13 +101,11 @@ const formsBaseTheme = {
         "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
     // Common helper text style with state variations
     helperText: "text-xs text-[var(--color-text-muted)] mt-1.5 [.state-disabled_&]:text-[var(--color-text-disabled)] [.state-invalid_&]:text-[var(--color-danger-500)] " +
-        "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
+        "dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
-        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)] " +
-            "dark:text-[var(--color-neutral-500)]",
-        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] " +
-            "dark:text-[var(--color-neutral-500)]",
+        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)]",
+        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)]",
         padding: {
             left: "pl-10",
             right: "pr-10",
@@ -129,13 +130,23 @@ const formsBaseTheme = {
             // (utilities layer ⟶ win over that base-layer rule) suppress it here; scroll still works via
             // wheel/trackpad/keyboard. Scoped to the dropdown panel only — app scrollbars are untouched.
             "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden " +
+            // p-1 (never py-1): the rows are rounded (see `option`), so they must inset evenly on
+            // ALL sides — with vertical-only padding a row's rounded corners and its hover ring run
+            // flush into the panel's own edge and the radius reads as a rendering glitch. This lives
+            // here rather than at each call site because every consumer needs it and, when it was a
+            // call-site decision, two of four got it wrong.
+            "p-1 " +
             "rounded-[var(--form-radius)] backdrop-blur-md text-sm border border-[var(--color-border)] " +
             "ring-1 ring-[var(--color-border)] focus:outline-none",
         // Base option style — hover uses the shared `--color-surface-hover` interaction tint
         // (§3): a translucent shade that composites over the dropdown's surface, darkening in
         // light and lightening in dark relative to the background (same model as the surface
         // ladder). One mode-aware token, so no separate `dark:` variant is needed.
+        // The radius belongs here, not per-consumer: `container`'s gap-0.5 and this row's inset
+        // hover ring only read correctly on a rounded, inset row, so the base already assumes
+        // this treatment — withholding the radius just let call sites drift out of it.
         option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
+            "rounded-[var(--radius-base)] " +
             "hover:bg-[var(--color-surface-hover)] hover:shadow-[inset_0_0_0_1px_var(--color-border)]",
         // Selected option modifier
         optionSelected: "text-[var(--color-text-primary)] bg-[var(--color-surface-hover)] shadow-[inset_0_0_0_1px_var(--color-border)]",
@@ -152,7 +163,7 @@ const formsBaseTheme = {
         emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)]",
     },
     // Placeholder text style (shared across input-like components)
-    placeholderStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
+    placeholderStyle: "text-[var(--color-text-placeholder)]",
     // Helper text state variants (beyond base helperText)
     helperTextStates: {
         default: "text-[var(--color-text-muted)] ",

package/dist/components/forms/index.js

@@ -25,7 +25,7 @@ export { fileUploadProgressTheme } from './FileUpload/FileUploadProgress.theme.j
 export { TimePicker } from './TimePicker/TimePicker.js';
 import 'react/jsx-runtime';
 import 'react';
-import '@heroicons/react/24/outline';
+import '@phosphor-icons/react';
 import '../../utils/cn.js';
 import './TimePicker/TimePickerContext.js';
 import 'motion/react';

package/dist/components/generative/registry.js

@@ -1,6 +1,8 @@
+"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';
@@ -8,31 +10,121 @@ 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 { 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 '@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/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 { FunnelChart } from '../charts/FunnelChart/FunnelChart.js';
+import { ScatterPlot } from '../charts/ScatterPlot/ScatterPlot.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
@@ -86,6 +181,88 @@ const DEFAULT_COMPONENTS = {
     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 +279,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 +288,21 @@ 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 },
+    ScatterPlot: { component: ScatterPlot, needsShell: true },
+    FunnelChart: {
+        component: FunnelChart,
+        needsShell: true,
+        actionProps: { stageClick: "onStageClick" },
+    },
+    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 }));
             },
         };
     });