@taiv/ui 1.15.0 → 2.1.0

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) => React.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,sBA6BtB,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.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,gCA4ClB,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"}

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HoverAction } from './HoverAction';
+import { Card } from '../../Layout/Card/Card';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { Title } from '../../Typography/Title/Title';
+import { spacing } from '../../../constants/spacing';
+import { neutral } from '../../../constants/colors';
+const SlidePreview = ({ label = 'Calamari' }) => (_jsxs(Stack, { gap: spacing.xs, children: [_jsx("div", { style: {
+                width: 160,
+                height: 110,
+                borderRadius: 8,
+                background: `linear-gradient(135deg, ${neutral[50]}, ${neutral[100]})`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: _jsx(Text, { variant: 'label', style: { color: neutral[300] }, children: label }) }), _jsx(Text, { variant: 'label', children: label })] }));
+const meta = {
+    title: 'Components/Misc/HoverAction',
+    component: HoverAction,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Wraps any content with a floating icon button pinned to the top-right corner. The button fades in when the wrapped content is hovered. Variants: close, trash, edit. Click handler is called with propagation stopped, so wrapping interactive cards is safe.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['close', 'trash', 'edit'],
+            table: { defaultValue: { summary: "'close'" } },
+        },
+        showBackground: {
+            control: { type: 'boolean' },
+            description: 'Always show white circle background (vs transparent until hover)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        offset: {
+            control: { type: 'number' },
+            description: 'Pixels the button pokes out of the top-right corner',
+            table: { defaultValue: { summary: '10' } },
+        },
+        visible: {
+            control: { type: 'boolean' },
+            description: 'Manual override for visibility. When unset, button shows on hover.',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: 'close',
+        showBackground: true,
+        offset: 10,
+    },
+    render: (args) => (_jsx(HoverAction, { ...args, onClick: () => console.log('clicked'), children: _jsx(SlidePreview, {}) })),
+};
+export const Variants = {
+    render: () => (_jsxs(Group, { gap: spacing.xl, children: [_jsx(HoverAction, { variant: 'close', showBackground: true, onClick: () => console.log('close'), children: _jsx(SlidePreview, { label: 'Close' }) }), _jsx(HoverAction, { variant: 'trash', showBackground: true, onClick: () => console.log('trash'), children: _jsx(SlidePreview, { label: 'Trash' }) }), _jsx(HoverAction, { variant: 'edit', showBackground: true, onClick: () => console.log('edit'), children: _jsx(SlidePreview, { label: 'Edit' }) })] })),
+};
+export const HiddenUntilHover = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'With `showBackground={false}` (default), the button is fully hidden until the wrapper is hovered. Matches the Taiv app slide-preview pattern.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'close', onClick: () => console.log('close'), children: _jsx(SlidePreview, { label: 'Hover me' }) })),
+};
+export const AlwaysVisible = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pass `visible` explicitly to bypass the internal hover state.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'trash', showBackground: true, visible: true, onClick: () => console.log('delete'), children: _jsx(SlidePreview, { label: 'Always shown' }) })),
+};
+export const WrappingACard = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Wrapping an interactive Card. Clicking the close button stops propagation — the card onClick does not fire.',
+            },
+        },
+    },
+    render: () => (_jsx(HoverAction, { variant: 'close', showBackground: true, onClick: () => alert('Removed!'), children: _jsx("div", { onClick: () => alert('Card clicked'), style: { cursor: 'pointer', width: 240 }, children: _jsx(Card, { children: _jsxs(Stack, { gap: spacing.xs, children: [_jsx(Title, { variant: 'cardHeader', children: "Calamari" }), _jsx(Text, { variant: 'subtle', children: "Crispy. Hot. Delicious." })] }) }) }) })),
+};
+export const CustomOffset = {
+    render: () => (_jsxs(Group, { gap: spacing.xl, children: [_jsx(HoverAction, { variant: 'close', showBackground: true, offset: 0, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=0' }) }), _jsx(HoverAction, { variant: 'close', showBackground: true, offset: 10, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=10' }) }), _jsx(HoverAction, { variant: 'close', showBackground: true, offset: 20, onClick: () => { }, children: _jsx(SlidePreview, { label: 'offset=20' }) })] })),
+};

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

@@ -4,5 +4,5 @@ export interface IconBadgeProps {
     icon: React.ReactNode;
     color: keyof typeof primitives;
 }
-export declare const IconBadge: ({ icon, color }: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconBadge: ({ icon, color }: IconBadgeProps) => React.JSX.Element;
 //# sourceMappingURL=IconBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/IconBadge/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,4CAgCxD,CAAC"}
+{"version":3,"file":"IconBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/IconBadge/IconBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,iBAAiB,cAAc,sBAoCxD,CAAC"}

package/dist/components/Misc/IconBadge/IconBadge.js

@@ -4,25 +4,27 @@ import { primitives } from '../../../constants/colors';
 export const IconBadge = ({ icon, color }) => {
     const getIconColors = () => {
         return {
-            background: primitives[color][50],
+            background: primitives[color][25],
             icon: primitives[color][200],
         };
     };
     const getIconSize = () => {
-        if (React.isValidElement(icon) && icon.props && typeof icon.props.size === 'number') {
+        if (React.isValidElement(icon) &&
+            icon.props &&
+            typeof icon.props.size === 'number') {
             const iconSize = icon.props.size;
             const badgeSize = iconSize + 12;
             return `${badgeSize}px`;
         }
     };
     return (_jsx("div", { style: {
-            width: getIconSize(),
-            height: getIconSize(),
-            borderRadius: '50%',
+            alignItems: 'center',
             backgroundColor: getIconColors().background,
+            borderRadius: '50%',
             color: getIconColors().icon,
             display: 'flex',
-            alignItems: 'center',
+            height: getIconSize(),
             justifyContent: 'center',
+            width: getIconSize(),
         }, children: icon }));
 };

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

@@ -0,0 +1,3 @@
+export { Image } from '@mantine/core';
+export type { ImageProps } from '@mantine/core';
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Misc/Image/Image.js

@@ -0,0 +1 @@
+export { Image } from '@mantine/core';

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Image } from './Image';
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;
+export declare const Fits: Story;
+export declare const Radii: Story;
+export declare const WithPlaceholder: Story;
+export declare const WithCaption: Story;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CA0B5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from './Image';
+import { Group } from '../../Layout/Group/Group';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { spacing } from '../../../constants/spacing';
+const SAMPLE_SRC = 'https://images.unsplash.com/photo-1511216335778-7cb8f49fa7a3?w=600';
+const meta = {
+    title: 'Components/Misc/Image',
+    component: Image,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Re-export of Mantine Image. Handles object-fit, placeholders, captions, and loading/error states. Use this instead of raw <img> so placeholder and caption behavior stays consistent.',
+            },
+        },
+    },
+    argTypes: {
+        fit: {
+            control: { type: 'select' },
+            options: ['cover', 'contain', 'fill', 'none', 'scale-down'],
+            table: { defaultValue: { summary: "'cover'" } },
+        },
+        radius: {
+            control: { type: 'select' },
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+        },
+        withPlaceholder: {
+            control: { type: 'boolean' },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        src: SAMPLE_SRC,
+        alt: 'Sample',
+        width: 320,
+        height: 200,
+        fit: 'cover',
+        radius: 'md',
+    },
+};
+export const Fits = {
+    render: () => (_jsx(Group, { gap: spacing.lg, align: 'flex-start', children: ['cover', 'contain', 'fill'].map((fit) => (_jsxs(Stack, { gap: spacing.xs, align: 'center', children: [_jsx(Image, { src: SAMPLE_SRC, alt: fit, width: 180, height: 120, fit: fit, radius: 'md' }), _jsx(Text, { variant: 'label', children: fit })] }, fit))) })),
+};
+export const Radii = {
+    render: () => (_jsx(Group, { gap: spacing.lg, children: ['xs', 'md', 'xl'].map((radius) => (_jsxs(Stack, { gap: spacing.xs, align: 'center', children: [_jsx(Image, { src: SAMPLE_SRC, alt: radius, width: 140, height: 140, fit: 'cover', radius: radius }), _jsxs(Text, { variant: 'label', children: ["radius=", radius] })] }, radius))) })),
+};
+export const WithPlaceholder = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'When the src fails or is missing, `withPlaceholder` renders a fallback.',
+            },
+        },
+    },
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Image, { src: 'https://invalid.example.com/does-not-exist.jpg', alt: 'broken', width: 200, height: 140, radius: 'md', withPlaceholder: true }), _jsx(Image, { src: null, alt: 'none', width: 200, height: 140, radius: 'md', withPlaceholder: true, placeholder: _jsx(Text, { variant: 'label', children: "No image" }) })] })),
+};
+export const WithCaption = {
+    render: () => (_jsx(Image, { src: SAMPLE_SRC, alt: 'Ocean sunset', width: 320, height: 200, fit: 'cover', radius: 'md', caption: 'Pacific ocean, golden hour' })),
+};