@wheelhouse/ui 0.1.6 → 0.2.0

package/dist/components/toggle/toggle.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle, toggleSizeKeys, toggleVariantKeys } from './toggle';
+function IconBold(props) {
+    return (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 256 256", className: "size-4", ...props, children: _jsx("path", { fill: "currentColor", d: "M162.22 56.34A8 8 0 0 0 152.06 48H72a8 8 0 0 0-8 8v144a8 8 0 0 0 8 8h80.06a8 8 0 0 0 7.16-4.42c14.65-29.39 20.09-63.51 15.16-97.95a104.09 104.09 0 0 0-25.16-49.29ZM80 64h71.37a88.13 88.13 0 0 1 17.2 36.45c3.65 27.11-.22 54.71-10.32 79.55H80Z" }) }));
+}
+function IconItalic(props) {
+    return (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 256 256", className: "size-4", ...props, children: _jsx("path", { fill: "currentColor", d: "M200 56a8 8 0 0 1-8 8h-27.12l-32 128H168a8 8 0 0 1 0 16H88a8 8 0 0 1 0-16h27.12l32-128H104a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8Z" }) }));
+}
+function IconUnderline(props) {
+    return (_jsx("svg", { "aria-hidden": true, viewBox: "0 0 256 256", className: "size-4", ...props, children: _jsx("path", { fill: "currentColor", d: "M200 224a8 8 0 0 1-8 8H64a8 8 0 0 1 0-16h128a8 8 0 0 1 8 8Zm-72-24a64.07 64.07 0 0 0 64-64V56a8 8 0 0 0-16 0v80a48 48 0 0 1-96 0V56a8 8 0 0 0-16 0v80a64.07 64.07 0 0 0 64 64Z" }) }));
+}
+const meta = {
+    title: 'UI/Toggle',
+    component: Toggle,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            storiesFilter: (story) => story.name !== 'Default',
+        },
+    },
+    tags: ['autodocs'],
+    args: {
+        children: 'Toggle',
+        variant: 'default',
+        size: 'default',
+    },
+    argTypes: {
+        children: { control: 'text' },
+        className: { control: false },
+        variant: {
+            control: 'select',
+            options: toggleVariantKeys,
+        },
+        size: {
+            control: 'select',
+            options: toggleSizeKeys,
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const Gallery = {
+    parameters: {
+        layout: 'padded',
+        controls: { disable: true },
+    },
+    render: () => (_jsxs("div", { className: "flex max-w-[min(100vw-2rem,48rem)] flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Toolbar" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Toggle, { defaultPressed: true, "aria-label": "Bold", children: _jsx(IconBold, {}) }), _jsx(Toggle, { "aria-label": "Italic", children: _jsx(IconItalic, {}) }), _jsx(Toggle, { "aria-label": "Underline", children: _jsx(IconUnderline, {}) })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx("div", { className: "flex flex-wrap gap-2", children: toggleVariantKeys.map((variant) => (_jsx(Toggle, { variant: variant, children: variant }, variant))) })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: toggleSizeKeys.map((size) => (_jsx(Toggle, { size: size, children: size }, size))) })] })] })),
+};
+export const Outline = {
+    tags: ['!autodocs'],
+    args: { variant: 'outline', children: 'Outline' },
+};
+export const Small = {
+    tags: ['!autodocs'],
+    args: { size: 'sm', children: 'Small' },
+};
+export const Large = {
+    tags: ['!autodocs'],
+    args: { size: 'lg', children: 'Large' },
+};

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

@@ -0,0 +1,3 @@
+export { ToggleGroup, ToggleGroupItem } from './toggle-group';
+export type { ToggleGroupItemProps, ToggleGroupProps } from './toggle-group';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/toggle-group/index.js

@@ -0,0 +1 @@
+export { ToggleGroup, ToggleGroupItem } from './toggle-group';

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

@@ -0,0 +1,32 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import { toggleVariants } from '../toggle/toggle';
+/**
+ * Props for `ToggleGroup`. Inherits selection and orientation behavior from
+ * [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group),
+ * plus `Toggle`-aligned `variant` / `size` and layout `spacing`.
+ */
+export type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+    /** Gap between items, in design-system spacing steps (`0` = segmented control). */
+    spacing?: number;
+    orientation?: 'horizontal' | 'vertical';
+};
+/**
+ * Props for `ToggleGroupItem`. Inherits from
+ * [Base UI Toggle](https://base-ui.com/react/components/toggle). Use a unique
+ * `value` so the parent group can track selection.
+ */
+export type ToggleGroupItemProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
+/**
+ * A set of related toggle buttons sharing one selection state (or multi-select
+ * when `multiple` is set). Styles match `Toggle`; use `spacing={0}` for a fused
+ * segmented control.
+ */
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A single toggle inside `ToggleGroup`. Inherits variant and size from the group unless overridden.
+ */
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAclD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,KAAK,GACrD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAClC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CAC3C,CAAC;AAEN;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE/F;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAW,EAAE,WAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAkB/H;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAsBtH;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import {} from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { toggleVariants } from '../toggle/toggle';
+const ToggleGroupContext = React.createContext({
+    size: 'default',
+    variant: 'default',
+    spacing: 0,
+    orientation: 'horizontal',
+});
+/**
+ * A set of related toggle buttons sharing one selection state (or multi-select
+ * when `multiple` is set). Styles match `Toggle`; use `spacing={0}` for a fused
+ * segmented control.
+ */
+function ToggleGroup({ className, variant, size, spacing = 0, orientation = 'horizontal', children, ...props }) {
+    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { '--gap': spacing }, className: cn('group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]', className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+}
+/**
+ * A single toggle inside `ToggleGroup`. Inherits variant and size from the group unless overridden.
+ */
+function ToggleGroupItem({ className, children, variant = 'default', size = 'default', ...props }) {
+    const context = React.useContext(ToggleGroupContext);
+    return (_jsx(TogglePrimitive, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn('shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t', toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), className), ...props, children: children }));
+}
+export { ToggleGroup, ToggleGroupItem };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAWlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/dist/components/toggle-group/toggle-group.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+const meta = {
+    title: 'UI/Toggle Group',
+    component: ToggleGroup,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+        spacing: { control: { type: 'number', min: 0, max: 4, step: 1 } },
+    },
+};
+export default meta;
+export const Default = {
+    args: { defaultValue: ['left'], spacing: 1, orientation: 'horizontal' },
+    render: (args) => (_jsxs(ToggleGroup, { ...args, children: [_jsx(ToggleGroupItem, { value: "left", "aria-label": "Align left", children: "Left" }), _jsx(ToggleGroupItem, { value: "center", "aria-label": "Align center", children: "Center" }), _jsx(ToggleGroupItem, { value: "right", "aria-label": "Align right", children: "Right" })] })),
+};
+export const SegmentedOutline = {
+    render: () => (_jsxs(ToggleGroup, { defaultValue: ['day'], spacing: 0, variant: "outline", size: "sm", children: [_jsx(ToggleGroupItem, { value: "day", children: "Day" }), _jsx(ToggleGroupItem, { value: "week", children: "Week" }), _jsx(ToggleGroupItem, { value: "month", children: "Month" })] })),
+};
+export const Multiple = {
+    render: () => (_jsxs(ToggleGroup, { defaultValue: ['bold', 'italic'], multiple: true, spacing: 1, variant: "outline", size: "sm", children: [_jsx(ToggleGroupItem, { value: "bold", "aria-label": "Bold", children: _jsx("span", { className: "font-bold", children: "B" }) }), _jsx(ToggleGroupItem, { value: "italic", "aria-label": "Italic", children: _jsx("span", { className: "italic", children: "I" }) }), _jsx(ToggleGroupItem, { value: "underline", "aria-label": "Underline", children: _jsx("span", { className: "underline", children: "U" }) })] })),
+};
+export const Vertical = {
+    render: () => (_jsxs(ToggleGroup, { defaultValue: ['a'], orientation: "vertical", spacing: 1, variant: "outline", children: [_jsx(ToggleGroupItem, { value: "a", children: "Option A" }), _jsx(ToggleGroupItem, { value: "b", children: "Option B" })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+export type { TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps } from './tooltip';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,22 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+/** Props for `TooltipProvider`. See [Base UI Tooltip](https://base-ui.com/react/components/tooltip). */
+export type TooltipProviderProps = TooltipPrimitive.Provider.Props;
+/**
+ * Optional root for tooltips: shared open delay, close delay, and “instant adjacent” behavior.
+ * Wrap your app (or a subtree) when you want consistent timing across many tooltips.
+ */
+declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the tooltip root (open state, hoverable popup, cursor tracking). */
+export type TooltipProps = TooltipPrimitive.Root.Props;
+declare function Tooltip({ ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the anchor element (default `button`); use `render` to attach to a `Button` or other control. */
+export type TooltipTriggerProps = TooltipPrimitive.Trigger.Props;
+declare function TooltipTrigger({ ...props }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Popup surface plus positioning props forwarded to the internal `Positioner`. */
+export type TooltipContentProps = TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+    /** When `true`, renders a small caret aligned to the anchor side. Default `false`. */
+    showArrow?: boolean;
+};
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, showArrow, children, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,wGAAwG;AACxG,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEnE;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAErE;AAED,iFAAiF;AACjF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAE1C;AAED,8GAA8G;AAC9G,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC;AAEjE,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,mFAAmF;AACnF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC1D,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IACvF,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEN,iBAAS,cAAc,CAAC,EACpB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,SAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,mBAAmB,2CAoBrB;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { cn } from '../../lib/utils';
+/**
+ * Optional root for tooltips: shared open delay, close delay, and “instant adjacent” behavior.
+ * Wrap your app (or a subtree) when you want consistent timing across many tooltips.
+ */
+function TooltipProvider({ delay = 0, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, showArrow = false, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn('z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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, children: [children, showArrow && (_jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" }))] }) }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithKbd: Story;
+export declare const WithArrow: Story;
+export declare const Placement: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=tooltip.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,OAAO,EAAmD,MAAM,WAAW,CAAC;AAErF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAc9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC"}

package/dist/components/tooltip/tooltip.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Kbd } from '../kbd';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
+const meta = {
+    title: 'UI/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx(TooltipProvider, { delay: 0, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Hover me" }), _jsx(TooltipContent, { children: "Add to library" })] })),
+};
+export const WithKbd = {
+    render: () => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Save" }), _jsxs(TooltipContent, { className: "flex items-center gap-2", children: ["Save file ", _jsx(Kbd, { children: "\u2318S" })] })] })),
+};
+export const WithArrow = {
+    render: () => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "With caret" }), _jsx(TooltipContent, { showArrow: true, children: "Points at the trigger" })] })),
+};
+export const Placement = {
+    parameters: { layout: 'padded' },
+    render: () => (_jsx("div", { className: "grid grid-cols-2 gap-16 p-16 sm:grid-cols-3", children: ['top', 'bottom', 'left', 'right'].map((side) => (_jsx("div", { className: "flex justify-center", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: side }), _jsxs(TooltipContent, { side: side, children: ["Tooltip on ", side] })] }) }, side))) })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded', controls: { disable: true } },
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-8", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "secondary", size: "sm" }), children: "Default" }), _jsx(TooltipContent, { children: "Short hint" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm" }), children: "Long text" }), _jsx(TooltipContent, { children: "This tooltip wraps when the message is longer than one line in narrow layouts." })] })] })),
+};