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

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

@@ -10,7 +10,7 @@ const formsBaseTheme = {
     // Common input group style with focus, hover, and state variations
     inputGroupBaseStyle: "relative flex rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
         "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
-        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--color-surface)] transition-all " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-[var(--field-fill)] transition-all " +
         // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
         // not-focus-within so focus (primary border) always wins; the token flips for dark mode.
         "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
@@ -56,11 +56,19 @@ const formsBaseTheme = {
             "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
             "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed",
         // (--color-background-disabled already flips for dark mode)
-        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
+        // Invalid = danger border + faint danger ring, NO surface fill. Matches the
+        // grouped-control perimeter overlay (groupInvalidOverlayStyle) 1:1, so single
+        // fields, OTP slots, and composite groups (Address/CreditCard) all read identically.
+        // The error is still unmistakable via border + ring + red message + aria-invalid —
+        // a fill is redundant signal that goes muddy in dark mode. The focus-within ring is
+        // re-asserted in danger so it overrides inputGroupBaseStyle's primary focus ring.
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+            "focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] focus-within:ring-[var(--color-danger)]/10 " +
             // Keep the danger border on hover (don't let the hover edge override it)
             "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
             // Dark mode
-            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
+            "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20 " +
+            "dark:focus-within:ring-[var(--color-danger-500)]/20 " +
             "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Common focus state variants
@@ -77,6 +85,17 @@ const formsBaseTheme = {
         disabled: "",
         invalid: "",
     },
+    // Grouped-control invalid perimeter overlay.
+    // Composite controls (InputAddress, InputCreditCard) stitch a single box out of several
+    // per-field inset borders. Reddening each field reads as "every field is individually wrong"
+    // (the same trap the Radio/Checkbox-group message-led pattern avoids). Instead, the group is
+    // wrapped in a `relative` container and this overlay paints ONE red perimeter ABOVE the fields'
+    // own borders (z over their focus-within:z-10) — interior seams stay the neutral hairline, and a
+    // focused field still shows its own ring glow outside the box. `pointer-events-none` so it never
+    // blocks the inputs. Children are NOT given state="invalid"; this overlay is the only red.
+    groupInvalidOverlayStyle: "pointer-events-none absolute inset-0 z-20 rounded-[var(--form-radius)] " +
+        "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+        "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)]",
@@ -93,33 +112,51 @@ const formsBaseTheme = {
     },
     // Dropdown/listbox styles for Select, Combobox, and similar components
     dropdownStyles: {
-        // Container for dropdown panel
+        // Container for dropdown panel — STRUCTURAL ONLY (radius/blur/border/ring).
+        // 🔴 This carries NO background or shadow. A panel styled with ONLY `container` renders
+        // TRANSPARENT — every consumer MUST paint its surface via the relative-elevation engine:
+        // prepend `surfaceClasses(level, {translucent:true})` (level from `useSurfaceElevation`) so
+        // the listbox lifts relative to its host (e.g. inside a Popover/Modal). All form dropdowns
+        // (Select/Combobox/DatePicker/DateRangePicker/TimePicker/Mention/InputTag) now do this.
         container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
-            "rounded-[var(--form-radius)] bg-[var(--color-surface-overlay)]/80 backdrop-blur-md text-sm border border-[var(--color-border)] " +
-            "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none",
-        // Base option style
+            // Flex column so the option rows can carry a small inter-item gap (a plain block parent
+            // ignores `gap`). Rows keep their intrinsic height (min-content floor), so this doesn't
+            // squish them — overflow still scrolls.
+            "flex flex-col gap-0.5 " +
+            // Hide the scrollbar for a clean, modern listbox. The GLOBAL `*::-webkit-scrollbar { width }`
+            // rule (global.scss) forces an always-visible *classic* scrollbar on every scroll container
+            // (defining a webkit-scrollbar width opts out of the OS auto-hiding overlay). These utilities
+            // (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 " +
+            "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.
         option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
-            "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
-            "dark:hover:text-[var(--color-primary-400)] " +
-            "dark:hover:bg-[var(--color-primary-400)]/10",
+            "hover:bg-[var(--color-surface-hover)] hover:shadow-[inset_0_0_0_1px_var(--color-border)]",
         // Selected option modifier
-        optionSelected: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
-        // Highlighted option (keyboard navigation)
-        optionHighlighted: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
-            "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
+        optionSelected: "text-[var(--color-text-primary)] bg-[var(--color-surface-hover)] shadow-[inset_0_0_0_1px_var(--color-border)]",
+        // Highlighted option (keyboard navigation / active descendant). Uses the same neutral
+        // `--color-surface-hover` tint as the base option hover so the keyboard-active row and the
+        // moused row read identically, and the label text stays bright (`text-primary`) instead of
+        // dimming to a muted primary. Only `optionSelected` carries any accent.
+        optionHighlighted: "bg-[var(--color-surface-hover)]",
         // Disabled option modifier
         optionDisabled: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-text-primary)]",
         // Create new option style
-        optionCreate: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
+        optionCreate: "font-medium text-[var(--color-primary)] ",
         // Empty state message
-        emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+        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)]",
     // Helper text state variants (beyond base helperText)
     helperTextStates: {
-        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
-        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        default: "text-[var(--color-text-muted)] ",
+        disabled: "text-[var(--color-text-disabled)] ",
     },
 };
 

package/dist/components/forms/index.d.ts

@@ -49,6 +49,7 @@ export { inputOTPTheme } from "./InputOTP";
 export { InputCreditCard } from "./InputCreditCard";
 export type { InputCreditCardProps, InputCreditCardThemeOverrides, } from "./InputCreditCard";
 export { inputCreditCardTheme } from "./InputCreditCard";
+export { isValidExpiryDate } from "./InputCreditCard";
 export { InputAddress } from "./InputAddress";
 export type { InputAddressProps, InputAddressThemeOverrides, } from "./InputAddress";
 export { inputAddressTheme } from "./InputAddress";

package/dist/components/forms/index.js

@@ -1,5 +1,6 @@
 export { Input } from './Input/Input.js';
 export { inputTheme } from './Input/Input.theme.js';
+export { isValidExpiryDate } from './Input/inputMasks.js';
 export { Select, SelectButton, SelectOption, SelectOptions } from './Select/Select.js';
 export { selectTheme } from './Select/Select.theme.js';
 export { Textarea } from './Textarea/Textarea.js';
@@ -25,10 +26,13 @@ export { TimePicker } from './TimePicker/TimePicker.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@heroicons/react/24/outline';
-import 'clsx';
-import 'tailwind-merge';
+import '../../utils/cn.js';
+import './TimePicker/TimePickerContext.js';
 import 'motion/react';
 import 'react-dom';
+import './Select/Select.animations.js';
+import '../core/Button/Button.js';
+import '../../theme/SurfaceContext.js';
 import './TimePicker/WheelColumn.js';
 export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
 export { Slider } from './Slider/Slider.js';

package/dist/components/generative/GenerativeView.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Skeleton } from '../core/Skeleton/Skeleton.js';

package/dist/components/generative/actions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/generative/registry.js

@@ -1,24 +1,34 @@
 import { jsx } from 'react/jsx-runtime';
+import { Accordion } from '../core/Accordion/Accordion.js';
 import { Alert } from '../core/Alert/Alert.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 { Card } from '../core/Card/Card.js';
+import { Empty } from '../core/Empty/Empty.js';
+import { PageHeading } from '../core/PageHeading/PageHeading.js';
+import { Pill } from '../core/Pill/Pill.js';
 import { Progress } from '../core/Progress/Progress.js';
+import { Rating } from '../core/Rating/Rating.js';
 import { Separator } from '../core/Separator/Separator.js';
+import { Tag } from '../core/Tag/Tag.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 { 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 { defaultResolvers, DEFAULT_ICONS } from './resolvers.js';
 import { DonutChart } from '../charts/DonutChart/DonutChart.js';
-import { Feed } from '../data-display/Feed/Feed.js';
-import { DescriptionList } from '../data-display/DescriptionList/DescriptionList.js';
-import { Timeline } from '../data-display/Timeline/Timeline.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 { ChartContainer } from '../charts/ChartContainer.js';
 import { ComboChart } from '../charts/ComboChart/ComboChart.js';
 import { StackedBarChart } from '../charts/StackedBarChart/StackedBarChart.js';
@@ -66,8 +76,16 @@ const DEFAULT_COMPONENTS = {
     Alert: { component: Alert },
     Badge: { component: Badge },
     Avatar: { component: Avatar },
+    AvatarGroup: { component: AvatarGroup },
     Progress: { component: Progress },
     Separator: { component: Separator },
+    Empty: { component: Empty },
+    Rating: { component: Rating },
+    Pill: { component: Pill },
+    Tag: { component: Tag },
+    PageHeading: { component: PageHeading },
+    Breadcrumbs: { component: Breadcrumbs },
+    Accordion: { component: Accordion },
     // 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)