@wheelhouse/ui 0.1.6 → 0.2.0

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

@@ -0,0 +1,3 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './tabs';
+export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from './tabs';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACpF,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './tabs';

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,35 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { type VariantProps } from 'class-variance-authority';
+/** Props for the tabs root. See [Base UI Tabs](https://base-ui.com/react/components/tabs). */
+export type TabsProps = TabsPrimitive.Root.Props & {
+    className?: string;
+};
+/**
+ * Tabbed interface: a list of triggers and matching panels. Use `defaultValue` / `value` and `onValueChange` for state.
+ */
+declare function Tabs({ className, orientation, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare const tabsListVariantStyles: {
+    readonly default: "bg-muted";
+    readonly line: "gap-1 bg-transparent";
+};
+export declare const tabsListVariantKeys: (keyof typeof tabsListVariantStyles)[];
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Props for the tab list; includes `variant` for pill vs underline styles. */
+export type TabsListProps = TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants> & {
+    className?: string;
+};
+declare function TabsList({ className, variant, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+/** Props for an individual tab button (`value` matches the active `TabsContent`). */
+export type TabsTriggerProps = TabsPrimitive.Tab.Props & {
+    className?: string;
+};
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the panel shown when the tab with the same `value` is active. */
+export type TabsContentProps = TabsPrimitive.Panel.Props & {
+    className?: string;
+};
+declare function TabsContent({ className, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,8FAA8F;AAC9F,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E;;GAEG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAS3E;AAED,QAAA,MAAM,qBAAqB;;;CAGjB,CAAC;AAEX,eAAO,MAAM,mBAAmB,EAAyC,CAAC,MAAM,OAAO,qBAAqB,CAAC,EAAE,CAAC;AAEhH,QAAA,MAAM,gBAAgB;;8EAUrB,CAAC;AAEF,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAE5E;AAED,qFAAqF;AACrF,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAc7D;AAED,8EAA8E;AAC9E,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAElF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+/**
+ * Tabbed interface: a list of triggers and matching panels. Use `defaultValue` / `value` and `onValueChange` for state.
+ */
+function Tabs({ className, orientation = 'horizontal', ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn('group/tabs flex gap-2 data-horizontal:flex-col', className), ...props }));
+}
+const tabsListVariantStyles = {
+    default: 'bg-muted',
+    line: 'gap-1 bg-transparent',
+};
+export const tabsListVariantKeys = Object.keys(tabsListVariantStyles);
+const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none', {
+    variants: {
+        variant: tabsListVariantStyles,
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function TabsList({ className, variant = 'default', ...props }) {
+    return _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props });
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent', 'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground', 'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100', className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return _jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn('flex-1 text-sm outline-none', className), ...props });
+}
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LineVariant: Story;
+export declare const Vertical: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=tabs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,IAAI,EAA2D,MAAM,QAAQ,CAAC;AAEvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAU3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC"}

package/dist/components/tabs/tabs.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, tabsListVariantKeys, TabsTrigger } from './tabs';
+const meta = {
+    title: 'UI/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+    },
+};
+export default meta;
+export const Default = {
+    args: { defaultValue: 'account', orientation: 'horizontal' },
+    render: (args) => (_jsxs(Tabs, { ...args, className: "w-full max-w-md", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "account", children: "Account" }), _jsx(TabsTrigger, { value: "password", children: "Password" })] }), _jsx(TabsContent, { value: "account", children: "Manage your account settings and email." }), _jsx(TabsContent, { value: "password", children: "Change your password and security options." })] })),
+};
+export const LineVariant = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs(Tabs, { defaultValue: "one", className: "w-full max-w-lg", children: [_jsxs(TabsList, { variant: "line", children: [_jsx(TabsTrigger, { value: "one", children: "Overview" }), _jsx(TabsTrigger, { value: "two", children: "Details" }), _jsx(TabsTrigger, { value: "three", disabled: true, children: "Disabled" })] }), _jsx(TabsContent, { value: "one", children: "First panel content." }), _jsx(TabsContent, { value: "two", children: "Second panel content." }), _jsx(TabsContent, { value: "three", children: "Hidden when disabled tab is selected." })] })),
+};
+export const Vertical = {
+    render: () => (_jsxs(Tabs, { defaultValue: "a", orientation: "vertical", className: "w-full max-w-md", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "a", children: "General" }), _jsx(TabsTrigger, { value: "b", children: "Billing" })] }), _jsx(TabsContent, { value: "a", children: "General preferences." }), _jsx(TabsContent, { value: "b", children: "Billing and invoices." })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded', controls: { disable: true } },
+    render: () => (_jsx("div", { className: "flex flex-col gap-12", children: tabsListVariantKeys.map((variant) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: variant }), _jsxs(Tabs, { defaultValue: "1", className: "max-w-md", children: [_jsxs(TabsList, { variant: variant, children: [_jsx(TabsTrigger, { value: "1", children: "Tab one" }), _jsx(TabsTrigger, { value: "2", children: "Tab two" })] }), _jsx(TabsContent, { value: "1", children: "Content for tab one." }), _jsx(TabsContent, { value: "2", children: "Content for tab two." })] })] }, variant))) })),
+};

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

@@ -0,0 +1,3 @@
+export { Text, textVariants, textLineClampKeys, textSizeKeys, textToneKeys, textWeightKeys } from './text';
+export type { TextLines, TextProps } from './text';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/text/index.js

@@ -0,0 +1 @@
+export { Text, textVariants, textLineClampKeys, textSizeKeys, textToneKeys, textWeightKeys } from './text';

package/dist/components/text/text.d.ts

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+declare const textSizeStyles: {
+    readonly xs: "text-xs";
+    readonly sm: "text-sm";
+    readonly default: "text-base";
+    readonly lg: "text-lg";
+    readonly xl: "text-xl";
+    readonly '2xl': "text-2xl";
+    readonly '3xl': "text-3xl";
+    readonly '4xl': "text-4xl";
+};
+declare const textToneStyles: {
+    readonly default: "text-foreground";
+    readonly muted: "text-muted-foreground";
+};
+declare const textWeightStyles: {
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+    readonly bold: "font-bold";
+};
+export declare const textSizeKeys: (keyof typeof textSizeStyles)[];
+export declare const textToneKeys: (keyof typeof textToneStyles)[];
+export declare const textWeightKeys: (keyof typeof textWeightStyles)[];
+export declare const textLineClampKeys: readonly [1, 2, 3, 4, 5, 6];
+export type TextLines = (typeof textLineClampKeys)[number];
+declare const textVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
+    tone?: "default" | "muted" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextVariantProps = VariantProps<typeof textVariants>;
+type TextSize = TextVariantProps['size'];
+type TextTone = TextVariantProps['tone'];
+type TextWeight = TextVariantProps['weight'];
+/** Props for `Text`. */
+export interface TextProps extends useRender.ComponentProps<'span'> {
+    size?: TextSize;
+    tone?: TextTone;
+    weight?: TextWeight;
+    truncate?: boolean;
+    lines?: TextLines;
+}
+declare function Text({ className, size, tone, weight, truncate, lines, render, ...props }: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Text, textVariants };
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;;;;;;;CASV,CAAC;AAEX,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,YAAY,EAAkC,CAAC,MAAM,OAAO,cAAc,CAAC,EAAE,CAAC;AAC3F,eAAO,MAAM,YAAY,EAAkC,CAAC,MAAM,OAAO,cAAc,CAAC,EAAE,CAAC;AAC3F,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAC7D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,QAAA,MAAM,YAAY;;;;8EAWhB,CAAC;AAEH,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC1D,KAAK,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzC,KAAK,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACzC,KAAK,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAE7C,wBAAwB;AACxB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC;IAC/D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,IAAgB,EAAE,MAAiB,EAAE,QAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,8FAcvI;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/text/text.js

@@ -0,0 +1,53 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const textSizeStyles = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    default: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+};
+const textToneStyles = {
+    default: 'text-foreground',
+    muted: 'text-muted-foreground',
+};
+const textWeightStyles = {
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+export const textSizeKeys = Object.keys(textSizeStyles);
+export const textToneKeys = Object.keys(textToneStyles);
+export const textWeightKeys = Object.keys(textWeightStyles);
+export const textLineClampKeys = [1, 2, 3, 4, 5, 6];
+const textVariants = cva('text-start', {
+    variants: {
+        size: textSizeStyles,
+        tone: textToneStyles,
+        weight: textWeightStyles,
+    },
+    defaultVariants: {
+        size: 'default',
+        tone: 'default',
+        weight: 'normal',
+    },
+});
+function Text({ className, size = 'default', tone = 'default', weight = 'normal', truncate = false, lines, render, ...props }) {
+    const layoutClass = lines !== undefined ? cn(`line-clamp-${lines}`, 'inline-block max-w-full min-w-0') : truncate ? 'inline-block min-w-0 max-w-full truncate' : 'inline';
+    const defaultProps = {
+        'data-slot': 'text',
+        className: cn(layoutClass, textVariants({ size, tone, weight, className })),
+    };
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
+export { Text, textVariants };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './text';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const Truncate: Story;
+export declare const Lines: Story;
+export declare const PolymorphicLink: Story;
+//# sourceMappingURL=text.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.stories.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,IAAI,EAAiE,MAAM,QAAQ,CAAC;AAE7F,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAuC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkCnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAYnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAsB7B,CAAC"}

package/dist/components/text/text.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Text, textLineClampKeys, textSizeKeys, textToneKeys, textWeightKeys } from './text';
+const meta = {
+    title: 'UI/Text',
+    component: Text,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            storiesFilter: (story) => story.name !== 'Default',
+        },
+    },
+    tags: ['autodocs'],
+    args: {
+        children: 'The quick brown fox jumps over the lazy dog.',
+        size: 'default',
+        tone: 'default',
+        weight: 'normal',
+        truncate: false,
+    },
+    argTypes: {
+        children: { control: 'text' },
+        className: { control: false },
+        render: { control: false },
+        size: {
+            control: 'select',
+            options: textSizeKeys,
+        },
+        tone: {
+            control: 'select',
+            options: textToneKeys,
+        },
+        weight: {
+            control: 'select',
+            options: textWeightKeys,
+        },
+        truncate: { control: 'boolean' },
+        lines: {
+            control: 'select',
+            options: [undefined, ...textLineClampKeys],
+        },
+    },
+};
+export default meta;
+const longCopy = 'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.';
+function SizeRows({ tone }) {
+    return (_jsx("div", { className: "flex flex-col gap-4", children: textSizeKeys.map((size) => (_jsxs("div", { className: "flex min-w-0 items-baseline gap-4 sm:gap-8", children: [_jsx("span", { className: "w-12 shrink-0 font-mono text-xs text-muted-foreground tabular-nums sm:w-14", children: size }), _jsx(Text, { size: size, tone: tone, children: "The quick brown fox jumps over the lazy dog." })] }, size))) }));
+}
+function WeightRows() {
+    return (_jsx("div", { className: "flex flex-col gap-4", children: textWeightKeys.map((weight) => (_jsxs("div", { className: "flex min-w-0 items-baseline gap-4 sm:gap-8", children: [_jsx("span", { className: "w-24 shrink-0 font-mono text-xs text-muted-foreground tabular-nums sm:w-28", children: weight }), _jsx(Text, { size: "default", tone: "default", weight: weight, children: "The quick brown fox jumps over the lazy dog." })] }, weight))) }));
+}
+export const Default = {};
+export const Gallery = {
+    parameters: {
+        layout: 'padded',
+        controls: { disable: true },
+    },
+    render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,72rem)] flex-col gap-12", children: [_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsx(SizeRows, { tone: "default" })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Muted" }), _jsx(SizeRows, { tone: "muted" })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Weight" }), _jsx(WeightRows, {})] })] })),
+};
+export const Truncate = {
+    parameters: { layout: 'padded' },
+    args: {
+        children: longCopy,
+        truncate: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-48 max-w-full border border-border bg-background p-3", children: _jsx(Text, { ...args }) })),
+};
+export const Lines = {
+    parameters: { layout: 'padded' },
+    args: {
+        children: longCopy,
+        lines: 3,
+        truncate: false,
+    },
+    render: (args) => (_jsx("div", { className: "w-72 max-w-full border border-border bg-background p-3", children: _jsx(Text, { ...args }) })),
+};
+export const PolymorphicLink = {
+    name: 'As link (using render prop)',
+    args: {
+        children: 'Opens in same tab',
+        tone: 'default',
+    },
+    render: (args) => (_jsx(Text, { ...args, render: ({ children, className, ...props }) => (_jsx("a", { ...props, href: "https://example.com", target: "_blank", rel: "noreferrer", className: cn('text-primary underline-offset-4 hover:underline', className), children: children })) })),
+};

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

@@ -0,0 +1,2 @@
+export { Textarea, type TextareaProps } from './textarea';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from './textarea';

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * Props for `Textarea`. Standard HTML textarea attributes apply.
+ */
+export type TextareaProps = React.ComponentProps<'textarea'>;
+/**
+ * Multi-line text input with design-system borders, focus rings, and invalid states.
+ */
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAE7D;;GAEG;AACH,QAAA,MAAM,QAAQ,0LAYZ,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea/textarea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+/**
+ * Multi-line text input with design-system borders, focus rings, and invalid states.
+ */
+const Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
+    return (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn('flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40', className), ...props }));
+});
+export { Textarea };

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

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        placeholder: string;
+        rows: number;
+    };
+    argTypes: {
+        className: {
+            control: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const WithField: Story;
+//# sourceMappingURL=textarea.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAcuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC"}

package/dist/components/textarea/textarea.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '../field';
+import { Label } from '../label';
+import { Textarea } from '.';
+const meta = {
+    title: 'UI/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        placeholder: 'Write something…',
+        rows: 4,
+    },
+    argTypes: {
+        className: { control: false },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsx("div", { className: "w-72", children: _jsx(Textarea, { ...args }) })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex max-w-md flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsx(Textarea, { placeholder: "Message", rows: 3 })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "States" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Textarea, { placeholder: "Disabled", disabled: true, rows: 2 }), _jsx(Textarea, { placeholder: "Invalid (aria-invalid)", "aria-invalid": true, rows: 2 })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With label" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "textarea-gallery", children: "Notes" }), _jsx(Textarea, { id: "textarea-gallery", placeholder: "Optional details\u2026", rows: 3 })] })] })] })),
+};
+export const WithField = {
+    name: 'With Field (validation)',
+    parameters: { layout: 'padded' },
+    render: () => (_jsxs("div", { className: "flex w-full max-w-sm flex-col gap-6", children: [_jsxs(Field.Root, { name: "bio", invalid: true, children: [_jsx(Field.Label, { children: "Bio" }), _jsx(Textarea, { placeholder: "Tell us about yourself", rows: 3 }), _jsx(Field.Error, { children: "Bio must be at least 10 characters." })] }), _jsxs(Field.Root, { name: "comments", disabled: true, children: [_jsx(Field.Label, { children: "Comments" }), _jsx(Textarea, { placeholder: "Disabled field", rows: 2 })] })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Toggle, toggleVariants } from './toggle';
+export type { ToggleProps } from './toggle';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/toggle/index.js

@@ -0,0 +1 @@
+export { Toggle, toggleVariants } from './toggle';

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,31 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { type VariantProps } from 'class-variance-authority';
+declare const toggleVariantStyles: {
+    readonly default: "bg-transparent";
+    readonly outline: "border border-input bg-transparent hover:bg-muted";
+};
+declare const toggleSizeStyles: {
+    readonly default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+    readonly sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
+    readonly lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+};
+export declare const toggleVariantKeys: (keyof typeof toggleVariantStyles)[];
+export declare const toggleSizeKeys: (keyof typeof toggleSizeStyles)[];
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props for `Toggle`. Inherits additional behavior from
+ * [Base UI Toggle](https://base-ui.com/react/components/toggle).
+ */
+export type ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants> & {
+    className?: string;
+};
+/**
+ * A two-state button (pressed / not pressed) for toolbar actions and binary choices.
+ * Renders a native `<button>` with `aria-pressed`. For settings-style on/off in forms, consider `Switch` instead.
+ */
+declare function Toggle({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;;CAGf,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;CAIZ,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAuC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAAE,CAAC;AAE1G,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,QAAA,MAAM,cAAc;;;8EAYnB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/G;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAE1F;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle/toggle.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const toggleVariantStyles = {
+    default: 'bg-transparent',
+    outline: 'border border-input bg-transparent hover:bg-muted',
+};
+const toggleSizeStyles = {
+    default: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+    sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+    lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+};
+export const toggleVariantKeys = Object.keys(toggleVariantStyles);
+export const toggleSizeKeys = Object.keys(toggleSizeStyles);
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: toggleVariantStyles,
+        size: toggleSizeStyles,
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+/**
+ * A two-state button (pressed / not pressed) for toolbar actions and binary choices.
+ * Renders a native `<button>` with `aria-pressed`. For settings-style on/off in forms, consider `Switch` instead.
+ */
+function Toggle({ className, variant = 'default', size = 'default', ...props }) {
+    return _jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props });
+}
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Gallery: Story;
+export declare const Outline: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+//# sourceMappingURL=toggle.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAqC,MAAM,UAAU,CAAC;AAmCrE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KA2CrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC"}