@wheelhouse/ui 0.1.6 → 0.2.1

package/dist/components/filters/filters.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Filters } from '.';
+declare const meta: Meta<typeof Filters>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithOneFilter: Story;
+//# sourceMappingURL=filters.stories.d.ts.map

package/dist/components/filters/filters.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.stories.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAqD,OAAO,EAAE,MAAM,GAAG,CAAC;AA0C/E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAOC,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/components/filters/filters.stories.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Filter as FilterIcon, Tag } from 'lucide-react';
+import { Button } from '../button';
+import { createFilter, Filters } from '.';
+const demoFields = [
+    {
+        key: 'status',
+        label: 'Status',
+        type: 'select',
+        icon: _jsx(FilterIcon, { className: "size-4" }),
+        options: [
+            { value: 'active', label: 'Active' },
+            { value: 'draft', label: 'Draft' },
+        ],
+    },
+    {
+        key: 'name',
+        label: 'Name',
+        type: 'text',
+        placeholder: 'Contains…',
+        icon: _jsx(Tag, { className: "size-4" }),
+    },
+];
+function FiltersStoryHost() {
+    const [filters, setFilters] = useState([]);
+    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: demoFields, onChange: setFilters, trigger: _jsx(Button, { variant: "outline", children: "Add filter" }), allowMultiple: true }) }));
+}
+function FiltersWithInitialState() {
+    const [filters, setFilters] = useState(() => [createFilter('status', 'is', ['active'])]);
+    return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: demoFields, onChange: setFilters, trigger: _jsx(Button, { variant: "outline", children: "Add filter" }), allowMultiple: true }) }));
+}
+const meta = {
+    title: 'UI/Filters',
+    component: Filters,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(FiltersStoryHost, {}),
+};
+export const WithOneFilter = {
+    render: () => _jsx(FiltersWithInitialState, {}),
+};

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

@@ -0,0 +1,5 @@
+export * from './filters-defaults';
+export * from './filters-types';
+export * from './filters-utils';
+export { Filters, FiltersContent } from './filters';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/filters/index.js

@@ -0,0 +1,4 @@
+export * from './filters-defaults';
+export * from './filters-types';
+export * from './filters-utils';
+export { Filters, FiltersContent } from './filters';

package/dist/components/frame/frame.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Frame layout primitives: an outer shell (`Frame`) with stacked panels
+ * (`FramePanel`), optional chrome (`FrameHeader`, `FrameFooter`), and typography
+ * slots (`FrameTitle`, `FrameDescription`).
+ *
+ * Panel surfaces inherit colors from CSS variables defined on `Frame`; see
+ * {@link frameVariants} for how theming composes.
+ */
+/**
+ * Class variance for {@link Frame}. Defines layout, spacing tokens, and
+ * `--frame-*` custom properties consumed by child panels.
+ *
+ * **CSS variable architecture**
+ *
+ * The `Frame` parent sets `--frame-panel-bg` and `--frame-panel-border-color`.
+ * `FramePanel` consumes them via `bg-(--frame-panel-bg)` and
+ * `border-(--frame-panel-border-color)`. This means:
+ *
+ * - `variant="inverse"` overrides those vars on `Frame` — all panels pick it up
+ * - `<FramePanel className="bg-blue-50">` adds a direct utility on the element
+ *   which wins over `bg-(--frame-panel-bg)` by Tailwind source order — no
+ *   `:not()` or `!important` needed
+ */
+declare const frameVariants: (props?: ({
+    variant?: "default" | "ghost" | "inverse" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "xs" | null | undefined;
+    stacked?: boolean | null | undefined;
+    dense?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant keys and props contributed by {@link frameVariants}. */
+export type FrameVariantProps = VariantProps<typeof frameVariants>;
+/** Props for {@link Frame}. */
+export type FrameProps = React.ComponentProps<'div'> & FrameVariantProps;
+/** Props for {@link FramePanel}. */
+export type FramePanelProps = React.ComponentProps<'div'>;
+/** Props for {@link FrameHeader}. */
+export type FrameHeaderProps = React.ComponentProps<'header'>;
+/** Props for {@link FrameTitle}. */
+export type FrameTitleProps = React.ComponentProps<'div'>;
+/** Props for {@link FrameDescription}. */
+export type FrameDescriptionProps = React.ComponentProps<'div'>;
+/** Props for {@link FrameFooter}. */
+export type FrameFooterProps = React.ComponentProps<'footer'>;
+/**
+ * Root container for a framed layout. Sets spacing tokens and `--frame-*`
+ * variables for nested {@link FramePanel} children.
+ */
+declare function Frame({ className, variant, spacing, stacked, dense, ...props }: FrameProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A bordered panel region inside {@link Frame}. Background and border colors
+ * come from the parent frame’s CSS variables unless overridden with `className`.
+ */
+declare function FramePanel({ className, ...props }: FramePanelProps): import("react/jsx-runtime").JSX.Element;
+/** Top chrome for a panel: padding follows the frame’s header spacing tokens. */
+declare function FrameHeader({ className, ...props }: FrameHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Primary heading slot for a panel (semantics live on the surrounding structure). */
+declare function FrameTitle({ className, ...props }: FrameTitleProps): import("react/jsx-runtime").JSX.Element;
+/** Secondary description text below the title. */
+declare function FrameDescription({ className, ...props }: FrameDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/** Bottom chrome for a panel: padding follows the frame’s footer spacing tokens. */
+declare function FrameFooter({ className, ...props }: FrameFooterProps): import("react/jsx-runtime").JSX.Element;
+export { Frame, FramePanel, FrameHeader, FrameTitle, FrameDescription, FrameFooter, frameVariants };
+//# sourceMappingURL=frame.d.ts.map

package/dist/components/frame/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/components/frame/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,aAAa;;;;;8EAkDlB,CAAC;AAEF,mEAAmE;AACnE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEnE,+BAA+B;AAC/B,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC;AAEzE,oCAAoC;AACpC,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAE9D,oCAAoC;AACpC,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,0CAA0C;AAC1C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAE9D;;;GAGG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEnF;AAED;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiB3D;AAED,iFAAiF;AACjF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,sFAAsF;AACtF,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,kDAAkD;AAClD,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,oFAAoF;AACpF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/frame/frame.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+/**
+ * Frame layout primitives: an outer shell (`Frame`) with stacked panels
+ * (`FramePanel`), optional chrome (`FrameHeader`, `FrameFooter`), and typography
+ * slots (`FrameTitle`, `FrameDescription`).
+ *
+ * Panel surfaces inherit colors from CSS variables defined on `Frame`; see
+ * {@link frameVariants} for how theming composes.
+ */
+/**
+ * Class variance for {@link Frame}. Defines layout, spacing tokens, and
+ * `--frame-*` custom properties consumed by child panels.
+ *
+ * **CSS variable architecture**
+ *
+ * The `Frame` parent sets `--frame-panel-bg` and `--frame-panel-border-color`.
+ * `FramePanel` consumes them via `bg-(--frame-panel-bg)` and
+ * `border-(--frame-panel-border-color)`. This means:
+ *
+ * - `variant="inverse"` overrides those vars on `Frame` — all panels pick it up
+ * - `<FramePanel className="bg-blue-50">` adds a direct utility on the element
+ *   which wins over `bg-(--frame-panel-bg)` by Tailwind source order — no
+ *   `:not()` or `!important` needed
+ */
+const frameVariants = cva([
+    'relative flex flex-col gap-0.75 rounded-(--frame-radius) bg-muted/50 p-0.75',
+    '[--frame-radius:var(--radius-xl)]',
+    // Default panel token values — overridden per-variant below
+    '[--frame-border-color:var(--color-border)] [--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)]',
+], {
+    variants: {
+        variant: {
+            default: 'border border-[var(--frame-border-color)] bg-clip-padding',
+            inverse: 'border border-[var(--frame-border-color)] bg-background bg-clip-padding [--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)]',
+            ghost: '',
+        },
+        spacing: {
+            xs: '[--frame-panel-footer-px:--spacing(2)] [--frame-panel-footer-py:--spacing(1)] [--frame-panel-header-px:--spacing(2)] [--frame-panel-header-py:--spacing(1)] [--frame-panel-p:--spacing(2)]',
+            sm: '[--frame-panel-footer-px:--spacing(3)] [--frame-panel-footer-py:--spacing(2)] [--frame-panel-header-px:--spacing(3)] [--frame-panel-header-py:--spacing(2)] [--frame-panel-p:--spacing(3)]',
+            default: '[--frame-panel-footer-px:--spacing(4)] [--frame-panel-footer-py:--spacing(3)] [--frame-panel-header-px:--spacing(4)] [--frame-panel-header-py:--spacing(3)] [--frame-panel-p:--spacing(4)]',
+            lg: '[--frame-panel-footer-px:--spacing(5)] [--frame-panel-footer-py:--spacing(4)] [--frame-panel-header-px:--spacing(5)] [--frame-panel-header-py:--spacing(4)] [--frame-panel-p:--spacing(5)]',
+        },
+        stacked: {
+            true: [
+                'gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none',
+                '*:has-[+[data-slot=frame-panel]]:before:hidden',
+                '*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none',
+                '*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0',
+                // No FrameHeader present: first panel sits flush against the outer frame border
+                '[&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:border-t-0',
+            ],
+            false: [
+                'data-[spacing=sm]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-0.5',
+                'data-[spacing=default]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1',
+                'data-[spacing=lg]:*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-2',
+            ],
+        },
+        dense: {
+            // Positional rules must stay as parent selectors — cannot be expressed via CSS vars
+            true: 'gap-0 border-[var(--frame-border-color)] p-0 [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        spacing: 'default',
+        stacked: false,
+        dense: false,
+    },
+});
+/**
+ * Root container for a framed layout. Sets spacing tokens and `--frame-*`
+ * variables for nested {@link FramePanel} children.
+ */
+function Frame({ className, variant, spacing, stacked, dense, ...props }) {
+    return _jsx("div", { className: cn(frameVariants({ variant, spacing, stacked, dense }), className), "data-slot": "frame", "data-spacing": spacing, ...props });
+}
+/**
+ * A bordered panel region inside {@link Frame}. Background and border colors
+ * come from the parent frame’s CSS variables unless overridden with `className`.
+ */
+function FramePanel({ className, ...props }) {
+    return (_jsx("div", { className: cn(
+        // bg-(--frame-panel-bg) and border-(--frame-panel-border-color) consume the
+        // CSS vars set by the Frame parent. Any explicit bg-* or border-* class passed
+        // via className overrides these by Tailwind source order — no ! needed.
+        'relative grow overflow-hidden rounded-(--frame-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs', 'before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:shadow-black/5', 'dark:bg-clip-border dark:before:shadow-white/5', 'p-(--frame-panel-p)', className), "data-slot": "frame-panel", ...props }));
+}
+/** Top chrome for a panel: padding follows the frame’s header spacing tokens. */
+function FrameHeader({ className, ...props }) {
+    return (_jsx("header", { className: cn('flex flex-col px-(--frame-panel-header-px) py-(--frame-panel-header-py)', className), "data-slot": "frame-panel-header", ...props }));
+}
+/** Primary heading slot for a panel (semantics live on the surrounding structure). */
+function FrameTitle({ className, ...props }) {
+    return _jsx("div", { className: cn('text-sm font-semibold', className), "data-slot": "frame-panel-title", ...props });
+}
+/** Secondary description text below the title. */
+function FrameDescription({ className, ...props }) {
+    return _jsx("div", { className: cn('text-sm text-muted-foreground', className), "data-slot": "frame-panel-description", ...props });
+}
+/** Bottom chrome for a panel: padding follows the frame’s footer spacing tokens. */
+function FrameFooter({ className, ...props }) {
+    return (_jsx("footer", { className: cn('flex flex-col gap-1 px-(--frame-panel-footer-px) py-(--frame-panel-footer-py)', className), "data-slot": "frame-panel-footer", ...props }));
+}
+export { Frame, FramePanel, FrameHeader, FrameTitle, FrameDescription, FrameFooter, frameVariants };

package/dist/components/frame/frame.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Frame } from '.';
+declare const meta: Meta<typeof Frame>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SeparatedPanels: Story;
+export declare const StackedPanels: Story;
+export declare const DensePanels: Story;
+export declare const GhostVariant: Story;
+export declare const CustomSpacing: Story;
+export declare const CustomRadius: Story;
+export declare const InverseVariant: Story;
+//# sourceMappingURL=frame.stories.d.ts.map

package/dist/components/frame/frame.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.stories.d.ts","sourceRoot":"","sources":["../../../src/components/frame/frame.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,KAAK,EAAsE,MAAM,GAAG,CAAC;AAE9F,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAcC,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAC"}

package/dist/components/frame/frame.stories.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from '.';
+const meta = {
+    title: 'UI/Frame',
+    component: Frame,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "!w-full w-[min(100%,36rem)]", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Frame, { ...args, children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Section header" }), _jsx(FrameDescription, { children: "Description for the section" })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Section title 2" }), _jsx("div", { className: "text-sm text-muted-foreground", children: "Section description" })] }), _jsx(FrameFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Footer" }) })] })),
+};
+export const SeparatedPanels = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsx("div", { className: "w-[min(100%,36rem)]", children: _jsxs(Frame, { children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Section title" }), _jsx(FrameDescription, { children: "Description for the section" })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Separated panel" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Content for the first section." })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Separated panel" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Content for the second section." })] })] }) })),
+};
+export const StackedPanels = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsx("div", { className: "w-[min(100%,36rem)]", children: _jsxs(Frame, { stacked: true, children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Stacked panel" }), _jsx(FrameDescription, { children: "Panels share borders with no gap between them." })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Upper content" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Section description." })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Lower content" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Section description." })] })] }) })),
+};
+export const DensePanels = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsx("div", { className: "w-[min(100%,36rem)]", children: _jsxs(Frame, { dense: true, stacked: true, children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Dense layout" }), _jsx(FrameDescription, { children: "Outer padding collapses; panels align to the frame edge." })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Upper content" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Section description." })] }), _jsxs(FramePanel, { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Lower content" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Section description." })] })] }) })),
+};
+export const GhostVariant = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsx("div", { className: "w-[min(100%,36rem)]", children: _jsxs(Frame, { variant: "ghost", children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "No outer border" }), _jsx(FrameDescription, { children: "The shell has no border; panels carry the visible chrome." })] }), _jsx(FramePanel, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "The outer container of this frame has no border, only the background and panels are visible." }) })] }) })),
+};
+export const CustomSpacing = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-start gap-6", children: [_jsx("div", { className: "w-72", children: _jsxs(Frame, { spacing: "sm", children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Small spacing" }), _jsx(FrameDescription, { children: "Tighter padding tokens." })] }), _jsx(FramePanel, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Content." }) })] }) }), _jsx("div", { className: "w-72", children: _jsxs(Frame, { spacing: "lg", children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Large spacing" }), _jsx(FrameDescription, { children: "More generous padding." })] }), _jsx(FramePanel, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Content." }) })] }) })] })),
+};
+export const CustomRadius = {
+    render: () => (_jsxs(Frame, { className: "[--frame-radius:var(--radius-lg)]", children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Custom radius" }), _jsxs(FrameDescription, { children: ["Override ", _jsx("code", { className: "font-mono text-xs", children: "--frame-radius" }), " on the root frame."] })] }), _jsx(FramePanel, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Panels inherit the same corner radius." }) })] })),
+};
+export const InverseVariant = {
+    parameters: { layout: 'padded' },
+    decorators: [],
+    render: () => (_jsx("div", { className: "w-[min(100%,36rem)]", children: _jsxs(Frame, { variant: "inverse", children: [_jsxs(FrameHeader, { children: [_jsx(FrameTitle, { children: "Inverse" }), _jsx(FrameDescription, { children: "Muted panel surfaces via frame-level CSS variables." })] }), _jsx(FramePanel, { children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Panels pick up the adjusted background token." }) })] }) })),
+};

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

@@ -0,0 +1,3 @@
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, frameVariants } from './frame';
+export type { FrameDescriptionProps, FrameFooterProps, FrameHeaderProps, FramePanelProps, FrameProps, FrameTitleProps, FrameVariantProps } from './frame';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/frame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/frame/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACnH,YAAY,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/frame/index.js

@@ -0,0 +1 @@
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, frameVariants } from './frame';

package/dist/components/hover-card/hover-card.d.ts

@@ -0,0 +1,16 @@
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+type HoverCardContentPositionProps = Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/**
+ * Props for `HoverCard`. Built on
+ * [Base UI Preview Card](https://base-ui.com/react/components/preview-card) (hover-to-open surface).
+ */
+export type HoverCardProps = PreviewCardPrimitive.Root.Props;
+/** Props for `HoverCardTrigger`. */
+export type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;
+/** Props for `HoverCardContent` (popup + positioner options). */
+export type HoverCardContentProps = PreviewCardPrimitive.Popup.Props & HoverCardContentPositionProps;
+declare function HoverCard({ ...props }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ...props }: HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: HoverCardContentProps): import("react/jsx-runtime").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/hover-card/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAIlF,KAAK,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC;AAElI;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7D,oCAAoC;AACpC,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvE,iEAAiE;AACjE,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAAG,6BAA6B,CAAC;AAErG,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAE9C;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAE5D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,UAAc,EAAE,KAAgB,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAe3I;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { cn } from '../../lib/utils';
+function HoverCard({ ...props }) {
+    return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({ className, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 4, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn('z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }) }) }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/hover-card/hover-card.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HoverCard } from './hover-card';
+declare const meta: Meta<typeof HoverCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=hover-card.stories.d.ts.map

package/dist/components/hover-card/hover-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/hover-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAsC,MAAM,cAAc,CAAC;AAE7E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAOC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/components/hover-card/hover-card.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+const meta = {
+    title: 'UI/HoverCard',
+    component: HoverCard,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(HoverCard, { children: [_jsx(HoverCardTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "@wheelhouse" }), _jsx(HoverCardContent, { children: _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: "Wheelhouse UI" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Components for product interfaces." })] }) })] })),
+};

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,3 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
+export type { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps } from './hover-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/hover-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/hover-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/hover-card/index.js

@@ -0,0 +1 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';

package/dist/components/index.d.ts

@@ -1,5 +1,56 @@
+export * from './accordion';
+export * from './alert';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './aspect-ratio';
 export * from './badge';
+export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
+export * from './calendar';
+export * from './card';
+export * from './checkbox';
+export * from './collapsible';
+export * from './command';
+export * from './combobox';
+export * from './context-menu';
+export * from './date-selector';
+export * from './dialog';
+export * from './direction';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './empty';
+export * from './field';
+export * from './filters';
+export * from './frame';
+export * from './hover-card';
+export * from './input';
+export * from './input-group';
+export * from './item';
+export * from './kbd';
+export * from './label';
+export * from './menubar';
+export * from './native-select';
+export * from './navigation-menu';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
 export * from './separator';
+export * from './select';
+export * from './sheet';
+export * from './slider';
+export * from './sonner';
+export * from './sortable';
+export * from './spinner';
+export * from './status-indicator';
+export * from './switch';
+export * from './tabs';
+export * from './text';
+export * from './textarea';
+export * from './tooltip';
+export * from './toggle';
+export * from './toggle-group';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,55 @@
+export * from './accordion';
+export * from './alert';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './aspect-ratio';
 export * from './badge';
+export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
+export * from './calendar';
+export * from './card';
+export * from './checkbox';
+export * from './collapsible';
+export * from './command';
+export * from './combobox';
+export * from './context-menu';
+export * from './date-selector';
+export * from './dialog';
+export * from './direction';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './empty';
+export * from './field';
+export * from './filters';
+export * from './frame';
+export * from './hover-card';
+export * from './input';
+export * from './input-group';
+export * from './item';
+export * from './kbd';
+export * from './label';
+export * from './menubar';
+export * from './native-select';
+export * from './navigation-menu';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
 export * from './separator';
+export * from './select';
+export * from './sheet';
+export * from './slider';
+export * from './sonner';
+export * from './sortable';
+export * from './spinner';
+export * from './status-indicator';
+export * from './switch';
+export * from './tabs';
+export * from './text';
+export * from './textarea';
+export * from './tooltip';
+export * from './toggle';
+export * from './toggle-group';

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

@@ -0,0 +1,2 @@
+export { Input, inputVariants, inputSizeKeys, type InputProps } from './input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { Input, inputVariants, inputSizeKeys } from './input';

package/dist/components/input/input.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { type VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const inputSizeKeys: readonly ["sm", "default"];
+/**
+ * Props for `Input`. Inherits additional behavior from
+ * [Base UI Input](https://base-ui.com/react/components/input).
+ * `size` sets the design-system height; the native HTML `size` attribute is omitted — use CSS width classes instead.
+ */
+export type InputProps = Omit<InputPrimitive.Props, 'size'> & VariantProps<typeof inputVariants>;
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAalB,CAAC;AAEF,eAAO,MAAM,aAAa,4BAA6B,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEjG,QAAA,MAAM,KAAK,kGAET,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/input/input.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const inputVariants = cva('flex w-full min-w-0 rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none group-has-disabled/field:opacity-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40', {
+    variants: {
+        size: {
+            sm: 'h-8 px-2.5 text-xs',
+            default: 'h-9 px-3 py-1 text-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+export const inputSizeKeys = ['sm', 'default'];
+const Input = React.forwardRef(function Input({ className, size = 'default', ...props }, ref) {
+    return _jsx(InputPrimitive, { ref: ref, "data-slot": "input", className: cn(inputVariants({ size }), className), ...props });
+});
+export { Input, inputVariants };