@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Misc/DragHandle/DragHandle.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { DragHandle } from './DragHandle';
+const meta = {
+    component: DragHandle,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Six-dot drag handle rendered as a real `<button>` — owns focus, keyboard reorder (arrow keys), and `aria-label`. Pair with a DnD library (e.g. `@dnd-kit`) by attaching listeners via the forwarded ref.',
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Misc/DragHandle',
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DragHandle, {}),
+};
+export const InListRow = {
+    render: () => (_jsx(Stack, { spacing: spacing.xs, style: {
+            border: `1px solid ${neutral[50]}`,
+            borderRadius: 8,
+            padding: spacing.sm,
+            width: 320,
+        }, children: ['Nike ad', 'Spotify ad', 'Apple ad'].map((name) => (_jsxs(Group, { spacing: spacing.sm, style: {
+                border: `1px solid ${neutral[50]}`,
+                borderRadius: 6,
+                padding: spacing.xs,
+            }, children: [_jsx(DragHandle, { ariaLabel: `Reorder ${name}` }), _jsx(Text, { variant: 'body', children: name })] }, name))) })),
+};
+export const KeyboardReorder = {
+    render: () => {
+        const [items, setItems] = useState(['A', 'B', 'C', 'D']);
+        const reorder = (i, dir) => {
+            const next = [...items];
+            const target = i + dir;
+            if (target < 0 || target >= next.length)
+                return;
+            [next[i], next[target]] = [next[target], next[i]];
+            setItems(next);
+        };
+        return (_jsxs(Stack, { spacing: spacing.xs, style: { width: 280 }, children: [_jsx(Text, { variant: 'subtle', children: "Focus a handle and press \u2191/\u2193 to reorder." }), items.map((name, i) => (_jsxs(Group, { spacing: spacing.sm, style: {
+                        border: `1px solid ${neutral[50]}`,
+                        borderRadius: 6,
+                        padding: spacing.xs,
+                    }, children: [_jsx(DragHandle, { ariaLabel: `Reorder ${name}`, onReorder: (dir) => reorder(i, dir) }), _jsx(Text, { variant: 'body', children: name })] }, name)))] }));
+    },
+};

package/dist/components/Misc/FAB/FAB.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { IconButtonProps } from '../../Inputs/Buttons/IconButton/IconButton';
+export type FABPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface FABProps {
+    /**
+     * Icon rendered inside the button. Sized automatically by IconButton.
+     */
+    icon: ReactElement<{
+        size?: number;
+    }>;
+    onClick: () => void;
+    /**
+     * Required for accessibility — the FAB has no visible label.
+     */
+    ariaLabel: string;
+    variant?: IconButtonProps['variant'];
+    size?: IconButtonProps['size'];
+    /**
+     * Corner of the viewport to anchor to. Default `'bottom-right'`.
+     */
+    position?: FABPosition;
+    /**
+     * Distance from the anchored edges. Accepts any CSS length. Default `spacing.lg` (16px).
+     */
+    offset?: number | string;
+    /**
+     * When true, only renders on tablet/mobile viewports (≤ 768px). Default `true` —
+     * the FAB is intended as a mobile/tablet pattern. Set `false` to always render.
+     */
+    mobileOnly?: boolean;
+    /**
+     * Explicit override to suppress rendering regardless of viewport.
+     */
+    hidden?: boolean;
+    zIndex?: number;
+    'data-testid'?: string;
+}
+/**
+ * Floating Action Button. A `position: fixed` IconButton with shadow, used for the
+ * primary action on a page when screen real estate is tight (typically mobile).
+ *
+ * Defaults to mobile-only (≤ 768px). On desktop, prefer an inline `<Button>` for the
+ * same action and let the FAB take over on smaller viewports — the two should trigger
+ * the same handler.
+ *
+ * @example
+ * <FAB
+ *   icon={<IconPlus />}
+ *   onClick={openAddDeviceModal}
+ *   ariaLabel="Add device"
+ * />
+ */
+export declare const FAB: ({ icon, onClick, ariaLabel, variant, size, position, offset, mobileOnly, hidden, zIndex, "data-testid": dataTestId, }: FABProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FAB.d.ts.map

package/dist/components/Misc/FAB/FAB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FAB/FAB.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAc,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAGzF,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAEpF,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA8BD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,GAAG,GAAI,uHAYjB,QAAQ,mDA2BV,CAAC"}

package/dist/components/Misc/FAB/FAB.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { spacing } from '../../../constants/spacing';
+import { useTablet } from '../../../hooks/useMediaQuery';
+import { IconButton } from '../../Inputs/Buttons/IconButton/IconButton';
+import { Box } from '../../Layout/Box/Box';
+// Bottom-anchored FABs additively read `--app-bottom-inset` from the
+// document so apps with a fixed bottom chrome (e.g. mobile nav) can lift
+// every FAB clear of the bar without each consumer threading an explicit
+// offset. Defaults to `0px` when the variable isn't set, so apps without
+// bottom chrome see no behavior change.
+const APP_BOTTOM_INSET_VAR = 'var(--app-bottom-inset, 0px)';
+const toCssLength = (offset) => typeof offset === 'number' ? `${offset}px` : offset;
+const positionStyle = (position, offset) => {
+    const o = toCssLength(offset);
+    const bottomWithInset = `calc(${o} + ${APP_BOTTOM_INSET_VAR})`;
+    switch (position) {
+        case 'bottom-right':
+            return { bottom: bottomWithInset, right: o };
+        case 'bottom-left':
+            return { bottom: bottomWithInset, left: o };
+        case 'top-right':
+            return { top: o, right: o };
+        case 'top-left':
+            return { top: o, left: o };
+    }
+};
+/**
+ * Floating Action Button. A `position: fixed` IconButton with shadow, used for the
+ * primary action on a page when screen real estate is tight (typically mobile).
+ *
+ * Defaults to mobile-only (≤ 768px). On desktop, prefer an inline `<Button>` for the
+ * same action and let the FAB take over on smaller viewports — the two should trigger
+ * the same handler.
+ *
+ * @example
+ * <FAB
+ *   icon={<IconPlus />}
+ *   onClick={openAddDeviceModal}
+ *   ariaLabel="Add device"
+ * />
+ */
+export const FAB = ({ icon, onClick, ariaLabel, variant = 'primary', size = '2xl', position = 'bottom-right', offset = spacing.lg, mobileOnly = true, hidden = false, zIndex = 10, 'data-testid': dataTestId, }) => {
+    const isTablet = useTablet();
+    if (hidden)
+        return null;
+    if (mobileOnly && !isTablet)
+        return null;
+    return (_jsx(Box, { style: {
+            position: 'fixed',
+            zIndex,
+            ...positionStyle(position, offset),
+        }, children: _jsx(IconButton, { "aria-label": ariaLabel, "data-testid": dataTestId, onClick: onClick, radius: '50%', shadow: true, size: size, variant: variant, children: icon }) }));
+};

package/dist/components/Misc/FAB/FAB.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FAB } from './FAB';
+declare const meta: Meta<typeof FAB>;
+export default meta;
+type Story = StoryObj<typeof FAB>;
+export declare const Default: Story;
+export declare const Positions: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+//# sourceMappingURL=FAB.stories.d.ts.map

package/dist/components/Misc/FAB/FAB.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FAB/FAB.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAqD1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAsBlC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoCnB,CAAC"}

package/dist/components/Misc/FAB/FAB.stories.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCheck, IconPencil, IconPlus, IconTrash } from '@tabler/icons-react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { FAB } from './FAB';
+const meta = {
+    argTypes: {
+        ariaLabel: {
+            control: { type: 'text' },
+            description: 'Accessible label — required since the FAB has no visible text',
+        },
+        hidden: {
+            control: { type: 'boolean' },
+            description: 'Force-hide the FAB regardless of viewport',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        mobileOnly: {
+            control: { type: 'boolean' },
+            description: 'Only render on tablet/mobile viewports (≤ 768px)',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        offset: {
+            control: { type: 'text' },
+            description: 'Distance from the anchored edges',
+            table: { defaultValue: { summary: 'spacing.lg (16px)' } },
+        },
+        onClick: { action: 'clicked' },
+        position: {
+            control: { type: 'select' },
+            options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
+            table: { defaultValue: { summary: "'bottom-right'" } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg', 'xl', '2xl'],
+            table: { defaultValue: { summary: "'2xl'" } },
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'tertiary', 'cancel', 'success', 'warning'],
+            table: { defaultValue: { summary: "'primary'" } },
+        },
+        zIndex: {
+            control: { type: 'number' },
+            table: { defaultValue: { summary: '10' } },
+        },
+    },
+    component: FAB,
+    parameters: {
+        docs: {
+            description: {
+                component: "Floating Action Button. A `position: fixed` IconButton anchored to a viewport corner, used for the page's primary action when screen real estate is tight. Defaults to mobile-only (≤ 768px) — on desktop, prefer an inline `<Button>` for the same action.",
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Misc/FAB',
+};
+export default meta;
+const StageBackdrop = ({ children }) => (_jsxs(Stack, { gap: spacing.md, style: {
+        background: neutral[25],
+        height: '100vh',
+        padding: spacing.xl,
+        position: 'relative',
+    }, children: [_jsx(Title, { variant: 'sectionHeader', children: "Page content" }), _jsxs(Text, { variant: 'subtle', children: ["The FAB anchors to the viewport \u2014 scroll, resize, or move other content; it stays put. Defaults to mobile-only; toggle ", _jsx("code", { children: "mobileOnly" }), " in controls to preview it on desktop."] }), children] }));
+export const Default = {
+    args: {
+        ariaLabel: 'Add item',
+        icon: _jsx(IconPlus, {}),
+        mobileOnly: false,
+        onClick: () => { },
+    },
+    render: (args) => (_jsx(StageBackdrop, { children: _jsx(FAB, { ...args }) })),
+};
+export const Positions = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Each of the four corner anchors. `mobileOnly` disabled for the demo.',
+            },
+        },
+    },
+    render: () => (_jsxs(StageBackdrop, { children: [_jsx(FAB, { ariaLabel: 'Top-left', icon: _jsx(IconPencil, {}), mobileOnly: false, onClick: () => { }, position: 'top-left', variant: 'secondary' }), _jsx(FAB, { ariaLabel: 'Top-right', icon: _jsx(IconCheck, {}), mobileOnly: false, onClick: () => { }, position: 'top-right', variant: 'success' }), _jsx(FAB, { ariaLabel: 'Bottom-left', icon: _jsx(IconTrash, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-left', variant: 'cancel' }), _jsx(FAB, { ariaLabel: 'Bottom-right', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-right' })] })),
+};
+export const Variants = {
+    parameters: {
+        docs: {
+            description: {
+                story: "All IconButton variants are supported. `tertiary` (white bg, primary outline) is the recommended FAB style — softer than `primary` while still reading as a brand-colored CTA.",
+            },
+        },
+    },
+    render: () => (_jsxs(StageBackdrop, { children: [_jsx(FAB, { ariaLabel: 'Primary', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-right' }), _jsx(FAB, { ariaLabel: 'Tertiary', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-left', variant: 'tertiary' })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs(StageBackdrop, { children: [_jsx(FAB, { ariaLabel: '2XL (default, recommended for mobile FABs)', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-right' }), _jsx(FAB, { ariaLabel: 'XL', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'bottom-left', size: 'xl' }), _jsx(FAB, { ariaLabel: 'Large', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'top-left', size: 'lg' }), _jsx(FAB, { ariaLabel: 'Medium', icon: _jsx(IconPlus, {}), mobileOnly: false, onClick: () => { }, position: 'top-right', size: 'md' })] })),
+};

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface FloatingToolbarProps {
+    children: React.ReactNode;
+    /**
+     * How `children` are separated. Default `spacing.xs`.
+     */
+    gap?: string | number;
+    /**
+     * When children overflow horizontally, scroll instead of wrapping. Default `true`.
+     */
+    scrollOverflow?: boolean;
+    /**
+     * Override the pill's inner padding. Accepts a CSS `padding` value.
+     * Default `'4px 8px'`.
+     */
+    padding?: string | number;
+    /**
+     * Additional inline styles forwarded to the pill container. Consumers use
+     * this to position the toolbar over a canvas — the component itself is
+     * position-agnostic (see `SelectableObject` + consumer selection state
+     * for the anchor/flipping behavior).
+     */
+    style?: React.CSSProperties;
+    className?: string;
+    /**
+     * Accessible label for the toolbar. Default `'Formatting options'`.
+     */
+    ariaLabel?: string;
+}
+/**
+ * Chrome for a Canva-style floating action toolbar. Renders a white pill with
+ * shadow + border + horizontal overflow scrolling and a flex-row gap between
+ * children. **Positioning is the consumer's responsibility** — wrap this in
+ * your own portal / absolute-positioned shell, or use it inline.
+ *
+ * The *composition* inside (font select, size stepper, B/I/U, color pickers,
+ * delete) stays in the consuming app since it depends on the canvas object's
+ * shape. This component only ships the shell.
+ *
+ * @example
+ * <div style={{ position: 'absolute', top: y, left: x, transform: 'translate(-50%, -100%)' }}>
+ *   <FloatingToolbar>
+ *     <Select ... />
+ *     <Divider orientation="vertical" />
+ *     <IconButton>...</IconButton>
+ *   </FloatingToolbar>
+ * </div>
+ */
+export declare const FloatingToolbar: ({ children, gap, scrollOverflow, padding, style, className, ariaLabel, }: FloatingToolbarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FloatingToolbar.d.ts.map

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FloatingToolbar/FloatingToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe,GAAI,0EAQ7B,oBAAoB,4CA6BtB,CAAC"}

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { neutral, white } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+/**
+ * Chrome for a Canva-style floating action toolbar. Renders a white pill with
+ * shadow + border + horizontal overflow scrolling and a flex-row gap between
+ * children. **Positioning is the consumer's responsibility** — wrap this in
+ * your own portal / absolute-positioned shell, or use it inline.
+ *
+ * The *composition* inside (font select, size stepper, B/I/U, color pickers,
+ * delete) stays in the consuming app since it depends on the canvas object's
+ * shape. This component only ships the shell.
+ *
+ * @example
+ * <div style={{ position: 'absolute', top: y, left: x, transform: 'translate(-50%, -100%)' }}>
+ *   <FloatingToolbar>
+ *     <Select ... />
+ *     <Divider orientation="vertical" />
+ *     <IconButton>...</IconButton>
+ *   </FloatingToolbar>
+ * </div>
+ */
+export const FloatingToolbar = ({ children, gap = spacing.xs, scrollOverflow = true, padding = `${spacing.xxs} ${spacing.sm}`, style, className, ariaLabel = 'Formatting options', }) => {
+    return (_jsx("div", { "aria-label": ariaLabel, className: className, role: 'toolbar', style: {
+            alignItems: 'center',
+            backgroundColor: white,
+            border: `1px solid ${neutral[50]}`,
+            borderRadius: '999px',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
+            display: 'inline-flex',
+            gap,
+            maxWidth: '100%',
+            overflowX: scrollOverflow ? 'auto' : 'visible',
+            overflowY: 'visible',
+            padding,
+            whiteSpace: 'nowrap',
+            ...style,
+        }, children: React.Children.map(children, (child, i) => (_jsx("div", { style: { flexShrink: 0, display: 'inline-flex', alignItems: 'center' }, children: child }, i))) }));
+};

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FloatingToolbar } from './FloatingToolbar';
+declare const meta: Meta<typeof FloatingToolbar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextToolbar: Story;
+export declare const OverflowScroll: Story;
+export declare const OverCanvas: Story;
+//# sourceMappingURL=FloatingToolbar.stories.d.ts.map

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingToolbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/FloatingToolbar/FloatingToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAc5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAYtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KA8CzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAY5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmCxB,CAAC"}

package/dist/components/Misc/FloatingToolbar/FloatingToolbar.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBold, IconItalic, IconTrash, IconUnderline, } from '@tabler/icons-react';
+import { useState } from 'react';
+import { neutral } from '../../../constants/colors';
+import { spacing } from '../../../constants/spacing';
+import { IconButton } from '../../Inputs/Buttons/IconButton/IconButton';
+import { ColorPickerTrigger } from '../../Inputs/ColorPickerTrigger/ColorPickerTrigger';
+import { Select } from '../../Inputs/Dropdowns/Select/Select';
+import { Divider } from '../../Layout/Divider/Divider';
+import { FloatingToolbar } from './FloatingToolbar';
+const meta = {
+    component: FloatingToolbar,
+    parameters: {
+        docs: {
+            description: {
+                component: "White pill used as the chrome for Canva-style floating action toolbars. Positioning is the consumer's responsibility — wrap this in a portal / absolute-positioned shell, or use it inline.",
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Misc/FloatingToolbar',
+};
+export default meta;
+export const TextToolbar = {
+    render: () => {
+        const [font, setFont] = useState('poppins');
+        const [color, setColor] = useState('#1E293B');
+        const [fill, setFill] = useState('transparent');
+        return (_jsxs(FloatingToolbar, { children: [_jsx(Select, { data: [
+                        { label: 'Poppins', value: 'poppins' },
+                        { label: 'Inter', value: 'inter' },
+                        { label: 'Georgia', value: 'georgia' },
+                    ], onChange: setFont, size: 'sm', style: { width: 140 }, value: font }), _jsx(Divider, { orientation: 'vertical' }), _jsx(IconButton, { "aria-label": 'Bold', variant: 'text', children: _jsx(IconBold, { size: 16 }) }), _jsx(IconButton, { "aria-label": 'Italic', variant: 'text', children: _jsx(IconItalic, { size: 16 }) }), _jsx(IconButton, { "aria-label": 'Underline', variant: 'text', children: _jsx(IconUnderline, { size: 16 }) }), _jsx(Divider, { orientation: 'vertical' }), _jsx(ColorPickerTrigger, { onChange: setColor, value: color, variant: 'fontColor' }), _jsx(ColorPickerTrigger, { onChange: setFill, value: fill, variant: 'fillColor' }), _jsx(Divider, { orientation: 'vertical' }), _jsx(IconButton, { "aria-label": 'Delete', variant: 'text', children: _jsx(IconTrash, { size: 16 }) })] }));
+    },
+};
+export const OverflowScroll = {
+    render: () => (_jsx("div", { style: { maxWidth: 320 }, children: _jsx(FloatingToolbar, { children: Array.from({ length: 12 }, (_, i) => `tool-${i + 1}`).map((key, i) => (_jsx(IconButton, { "aria-label": `Tool ${i + 1}`, variant: 'text', children: _jsx(IconBold, { size: 16 }) }, key))) }) })),
+};
+export const OverCanvas = {
+    render: () => (_jsx("div", { style: {
+            background: neutral[25],
+            border: `1px solid ${neutral[50]}`,
+            borderRadius: 8,
+            height: 320,
+            position: 'relative',
+            width: 480,
+        }, children: _jsx("div", { style: {
+                left: '50%',
+                position: 'absolute',
+                top: spacing.md,
+                transform: 'translateX(-50%)',
+            }, children: _jsxs(FloatingToolbar, { children: [_jsx(IconButton, { "aria-label": 'Bold', variant: 'text', children: _jsx(IconBold, { size: 16 }) }), _jsx(IconButton, { "aria-label": 'Italic', variant: 'text', children: _jsx(IconItalic, { size: 16 }) }), _jsx(Divider, { orientation: 'vertical' }), _jsx(IconButton, { "aria-label": 'Delete', variant: 'text', children: _jsx(IconTrash, { size: 16 }) })] }) }) })),
+};

package/dist/components/Misc/HoverAction/HoverAction.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+declare const componentVariants: {
+    readonly close: {
+        readonly Icon: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "#6D6D6D";
+        readonly hoverColor: "#C10007";
+    };
+    readonly trash: {
+        readonly Icon: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "#6D6D6D";
+        readonly hoverColor: "#C10007";
+    };
+    readonly edit: {
+        readonly Icon: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+        readonly color: "#6D6D6D";
+        readonly hoverColor: "#6F3FEE";
+    };
+};
+declare const componentSizes: {
+    readonly sm: {
+        readonly borderLength: 24;
+        readonly iconSize: 14;
+    };
+    readonly md: {
+        readonly borderLength: 32;
+        readonly iconSize: 18;
+    };
+    readonly lg: {
+        readonly borderLength: 44;
+        readonly iconSize: 24;
+    };
+    readonly xl: {
+        readonly borderLength: 56;
+        readonly iconSize: 30;
+    };
+};
+export interface HoverActionProps {
+    variant: keyof typeof componentVariants;
+    onClick: () => void;
+    children: ReactNode;
+    showBackground?: boolean;
+    offset?: number;
+    visible?: boolean;
+    iconSize?: number;
+    size?: keyof typeof componentSizes;
+    fullWidth?: boolean;
+}
+declare const HoverAction: ({ variant, onClick, children, showBackground, offset, visible, iconSize, size, fullWidth, }: HoverActionProps) => import("react/jsx-runtime").JSX.Element;
+export { HoverAction };
+//# sourceMappingURL=HoverAction.d.ts.map

package/dist/components/Misc/HoverAction/HoverAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverAction.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/HoverAction/HoverAction.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAM9C,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;CAgBb,CAAC;AAEX,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;CAKV,CAAC;AAEX,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,GAAI,6FAUlB,gBAAgB,4CA4ClB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Misc/HoverAction/HoverAction.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionIcon, Box } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { IconX, IconTrash, IconPencil } from '@tabler/icons-react';
+import { neutral, error, primary, white } from '../../../constants/colors';
+const componentVariants = {
+    close: {
+        Icon: IconX,
+        color: neutral[200],
+        hoverColor: error[200],
+    },
+    trash: {
+        Icon: IconTrash,
+        color: neutral[200],
+        hoverColor: error[200],
+    },
+    edit: {
+        Icon: IconPencil,
+        color: neutral[200],
+        hoverColor: primary[200],
+    },
+};
+const componentSizes = {
+    sm: { borderLength: 24, iconSize: 14 },
+    md: { borderLength: 32, iconSize: 18 },
+    lg: { borderLength: 44, iconSize: 24 },
+    xl: { borderLength: 56, iconSize: 30 },
+};
+const HoverAction = ({ variant, onClick, children, showBackground = false, offset = 10, visible, iconSize, size = 'md', fullWidth = false, }) => {
+    const { ref, hovered } = useHover();
+    const { Icon, color, hoverColor } = componentVariants[variant];
+    const selectedSize = componentSizes[size];
+    const resolvedIconSize = iconSize !== null && iconSize !== void 0 ? iconSize : selectedSize.iconSize;
+    const isVisible = visible !== undefined ? visible : hovered;
+    const handleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+    };
+    return (_jsxs(Box, { ref: ref, sx: { position: 'relative', width: fullWidth ? '100%' : 'fit-content' }, children: [children, _jsx(ActionIcon, { onClick: handleClick, radius: 'xl', sx: {
+                    position: 'absolute',
+                    top: -offset,
+                    right: -offset,
+                    height: `${selectedSize.borderLength}px`,
+                    width: `${selectedSize.borderLength}px`,
+                    minHeight: `${selectedSize.borderLength}px`,
+                    minWidth: `${selectedSize.borderLength}px`,
+                    opacity: isVisible ? 1 : 0,
+                    pointerEvents: isVisible ? 'auto' : 'none',
+                    transition: 'opacity 0.15s ease-in-out, color 0.1s ease-in-out',
+                    backgroundColor: showBackground ? white : 'transparent',
+                    boxShadow: showBackground ? '0 2px 6px rgba(0, 0, 0, 0.12)' : 'none',
+                    color,
+                    '&:hover': {
+                        backgroundColor: white,
+                        color: hoverColor,
+                        boxShadow: '0 2px 6px rgba(0, 0, 0, 0.12)',
+                    },
+                }, children: _jsx(Icon, { size: resolvedIconSize }) })] }));
+};
+export { HoverAction };

package/dist/components/Misc/HoverAction/HoverAction.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HoverAction } from './HoverAction';
+declare const meta: Meta<typeof HoverAction>;
+export default meta;
+type Story = StoryObj<typeof HoverAction>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const HiddenUntilHover: Story;
+export declare const AlwaysVisible: Story;
+export declare const WrappingACard: Story;
+export declare const CustomOffset: Story;
+//# sourceMappingURL=HoverAction.stories.d.ts.map

package/dist/components/Misc/HoverAction/HoverAction.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverAction.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/HoverAction/HoverAction.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA8B5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAiClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}