@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Data/Calendar/Calendar.stories.d.ts

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

package/dist/components/Data/Calendar/Calendar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Calendar/Calendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EACL,QAAQ,EAMT,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAI/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AA0DvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyB3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC"}

package/dist/components/Data/Calendar/Calendar.stories.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { Calendar, TAIV_CALENDAR_PALETTE, } from './Calendar';
+const meta = {
+    title: 'Components/Data/Calendar',
+    component: Calendar,
+    parameters: { layout: 'fullscreen' },
+};
+export default meta;
+// Helper — produce ISO datetime strings Schedule-X expects.
+const dt = (offsetDays, hour) => dayjs()
+    .startOf('day')
+    .add(offsetDays, 'day')
+    .add(hour, 'hour')
+    .format('YYYY-MM-DD HH:mm');
+const sampleEvents = [
+    {
+        id: '1',
+        title: 'Daily standup',
+        start: dt(0, 9),
+        end: dt(0, 10),
+        calendarId: 'primary',
+    },
+    {
+        id: '2',
+        title: 'Lunch with client',
+        start: dt(1, 12),
+        end: dt(1, 13),
+        calendarId: 'success',
+    },
+    {
+        id: '3',
+        title: 'Review PR',
+        start: dt(0, 14),
+        end: dt(0, 15),
+        calendarId: 'warning',
+    },
+    {
+        id: '4',
+        title: 'Off-site',
+        start: dt(2, 10),
+        end: dt(2, 16),
+        calendarId: 'neutral',
+    },
+];
+const ControlledCalendar = (args) => {
+    var _a;
+    const [view, setView] = useState('week');
+    const [date, setDate] = useState(new Date());
+    return (_jsx(Calendar, { ...args, events: (_a = args.events) !== null && _a !== void 0 ? _a : sampleEvents, view: view, onViewChange: setView, currentDate: date, onDateChange: setDate }));
+};
+export const Default = {
+    render: () => _jsx(ControlledCalendar, {}),
+};
+export const ReadOnly = {
+    render: () => _jsx(ControlledCalendar, { readOnly: true }),
+};
+export const CustomPalette = {
+    render: () => {
+        const customCalendars = {
+            ...TAIV_CALENDAR_PALETTE,
+            vip: {
+                colorName: 'vip',
+                lightColors: {
+                    main: '#7D63C8',
+                    container: '#EFEAFF',
+                    onContainer: '#7D63C8',
+                },
+            },
+        };
+        const events = [
+            ...sampleEvents,
+            {
+                id: '5',
+                title: 'VIP dinner',
+                start: dt(3, 19),
+                end: dt(3, 21),
+                calendarId: 'vip',
+            },
+        ];
+        return _jsx(ControlledCalendar, { calendars: customCalendars, events: events });
+    },
+};
+export const ClickHandlers = {
+    render: () => (_jsx(ControlledCalendar, { onEventClick: (e) => alert(`Clicked event: ${e.title}`), onClickDateTime: (iso) => alert(`Clicked slot: ${iso}`), onEventUpdate: (e) => console.log('Event updated:', e.id, e.start, e.end) })),
+};

package/dist/components/Data/MediaPill/MediaPill.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+export type MediaPillType = 'video' | 'image';
+export type MediaPillSize = 'xs' | 'sm';
+export interface MediaPillProps {
+    type: MediaPillType;
+    /** Formatted duration label (e.g. `'0:15'`). Required for videos; ignored for images. */
+    duration?: string;
+    size?: MediaPillSize;
+    /** Override the default label shown on image pills. */
+    imageLabel?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * Small pill that sits on top of a thumbnail to tag media type + duration.
+ * Parent thumbnail container handles positioning — MediaPill is slot-agnostic.
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <img src={thumbnailUrl} alt="" />
+ *   <div style={{ position: 'absolute', top: 8, left: 8 }}>
+ *     <MediaPill type="video" duration="0:15" />
+ *   </div>
+ * </div>
+ */
+export declare const MediaPill: ({ type, duration, size, imageLabel, style, className, }: MediaPillProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaPill.d.ts.map

package/dist/components/Data/MediaPill/MediaPill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPill.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/MediaPill/MediaPill.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,yDAOvB,cAAc,4CA8BhB,CAAC"}

package/dist/components/Data/MediaPill/MediaPill.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPhotoFilled, IconPlayerPlayFilled } from '@tabler/icons-react';
+import { neutral, white } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const SIZE_CONFIG = {
+    sm: {
+        ...{ fontSize: fontSize.sm.fontSize },
+        gap: spacing.xs,
+        iconSize: 12,
+        padding: `${spacing.xxs} ${spacing.sm}`,
+    },
+    xs: {
+        ...{ fontSize: fontSize.xs.fontSize },
+        gap: spacing.xxs,
+        iconSize: 10,
+        padding: `${spacing.xxs} ${spacing.xs}`,
+    },
+};
+/**
+ * Small pill that sits on top of a thumbnail to tag media type + duration.
+ * Parent thumbnail container handles positioning — MediaPill is slot-agnostic.
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <img src={thumbnailUrl} alt="" />
+ *   <div style={{ position: 'absolute', top: 8, left: 8 }}>
+ *     <MediaPill type="video" duration="0:15" />
+ *   </div>
+ * </div>
+ */
+export const MediaPill = ({ type, duration, size = 'sm', imageLabel = 'IMG', style, className, }) => {
+    const cfg = SIZE_CONFIG[size];
+    const Icon = type === 'video' ? IconPlayerPlayFilled : IconPhotoFilled;
+    const label = type === 'video' ? (duration !== null && duration !== void 0 ? duration : '') : imageLabel;
+    return (_jsxs("span", { className: className, style: {
+            ...fontBase,
+            alignItems: 'center',
+            backdropFilter: 'blur(4px)',
+            backgroundColor: `${neutral[500]}B3`,
+            borderRadius: '999px',
+            color: white,
+            display: 'inline-flex',
+            fontSize: cfg.fontSize,
+            fontWeight: 600,
+            gap: cfg.gap,
+            lineHeight: 1,
+            padding: cfg.padding,
+            WebkitBackdropFilter: 'blur(4px)',
+            whiteSpace: 'nowrap',
+            ...style,
+        }, children: [_jsx(Icon, { size: cfg.iconSize }), label] }));
+};

package/dist/components/Data/MediaPill/MediaPill.stories.d.ts

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

package/dist/components/Data/MediaPill/MediaPill.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPill.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/MediaPill/MediaPill.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAkBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4BnC,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAiBnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiBpB,CAAC"}

package/dist/components/Data/MediaPill/MediaPill.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { MediaPill } from './MediaPill';
+const meta = {
+    argTypes: {
+        duration: { control: { type: 'text' } },
+        imageLabel: { control: { type: 'text' } },
+        size: { control: { type: 'inline-radio' }, options: ['xs', 'sm'] },
+        type: { control: { type: 'inline-radio' }, options: ['video', 'image'] },
+    },
+    component: MediaPill,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Small pill overlay for thumbnails that tags media type (video / image) plus a duration or `IMG` label. Parent container must handle absolute positioning.',
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Data/MediaPill',
+};
+export default meta;
+const Thumbnail = ({ children, size = 160, }) => (_jsx("div", { style: {
+        alignItems: 'center',
+        background: `linear-gradient(135deg, ${neutral[100]}, ${neutral[200]})`,
+        borderRadius: 8,
+        display: 'flex',
+        height: size,
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+        width: size,
+    }, children: _jsx("div", { style: { left: spacing.sm, position: 'absolute', top: spacing.sm }, children: children }) }));
+export const Video = {
+    args: { duration: '0:15', type: 'video' },
+    render: (args) => (_jsx(Thumbnail, { children: _jsx(MediaPill, { ...args }) })),
+};
+export const Image = {
+    args: { type: 'image' },
+    render: (args) => (_jsx(Thumbnail, { children: _jsx(MediaPill, { ...args }) })),
+};
+export const Sizes = {
+    render: () => (_jsxs(Group, { spacing: spacing.xl, children: [_jsxs(Stack, { align: 'center', spacing: spacing.xs, children: [_jsx(Thumbnail, { size: 120, children: _jsx(MediaPill, { duration: '0:15', size: 'xs', type: 'video' }) }), _jsx(Text, { variant: 'label', children: "xs" })] }), _jsxs(Stack, { align: 'center', spacing: spacing.xs, children: [_jsx(Thumbnail, { size: 160, children: _jsx(MediaPill, { duration: '0:30', size: 'sm', type: 'video' }) }), _jsx(Text, { variant: 'label', children: "sm" })] })] })),
+};
+export const Matrix = {
+    render: () => (_jsxs(Group, { spacing: spacing.lg, children: [_jsx(Thumbnail, { children: _jsx(MediaPill, { duration: '0:06', type: 'video' }) }), _jsx(Thumbnail, { children: _jsx(MediaPill, { duration: '1:24', type: 'video' }) }), _jsx(Thumbnail, { children: _jsx(MediaPill, { type: 'image' }) }), _jsx(Thumbnail, { children: _jsx(MediaPill, { imageLabel: 'GIF', type: 'image' }) })] })),
+};

package/dist/components/Info/Avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { Avatar as MantineAvatar, type AvatarProps as MantineAvatarProps } from '@mantine/core';
+import { primitives } from '../../../constants/colors';
+export type AvatarPrimitiveColor = keyof typeof primitives;
+interface AvatarProps extends Omit<MantineAvatarProps, 'color'> {
+    color?: AvatarPrimitiveColor;
+}
+declare const Avatar: typeof MantineAvatar;
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Info/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,IAAI,aAAa,EACvB,KAAK,WAAW,IAAI,kBAAkB,EACvC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,UAAU,CAAC;AAE3D,UAAU,WAAY,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B;AAkCD,QAAA,MAAM,MAAM,EAEN,OAAO,aAAa,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/Info/Avatar/Avatar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+//TODO clean this file up
+import { Avatar as MantineAvatar, } from '@mantine/core';
+import React from 'react';
+import { primitives } from '../../../constants/colors';
+const AvatarRoot = React.forwardRef(({ color: primitiveColor = 'purple', styles, ...props }, ref) => {
+    var _a;
+    const mergedStyles = primitiveColor && typeof styles !== 'function'
+        ? {
+            ...(styles !== null && styles !== void 0 ? styles : {}),
+            placeholder: {
+                ...((_a = styles === null || styles === void 0 ? void 0 : styles.placeholder) !== null && _a !== void 0 ? _a : {}),
+                backgroundColor: primitives[primitiveColor][25],
+                color: primitives[primitiveColor][200],
+            },
+        }
+        : primitiveColor && typeof styles === 'function'
+            ? (...args) => {
+                const resolved = styles(...args);
+                return {
+                    ...resolved,
+                    placeholder: {
+                        ...resolved === null || resolved === void 0 ? void 0 : resolved.placeholder,
+                        backgroundColor: primitives[primitiveColor][25],
+                        color: primitives[primitiveColor][200],
+                    },
+                };
+            }
+            : styles;
+    return _jsx(MantineAvatar, { ref: ref, styles: mergedStyles, ...props });
+});
+AvatarRoot.displayName = 'Avatar';
+const Avatar = Object.assign(AvatarRoot, {
+    Group: MantineAvatar.Group,
+});
+export { Avatar };

package/dist/components/Info/Avatar/Avatar.stories.d.ts

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

package/dist/components/Info/Avatar/Avatar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAkD7B,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,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC"}

package/dist/components/Info/Avatar/Avatar.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { primitives } from '../../../constants/colors';
+import { Avatar } from './Avatar';
+const meta = {
+    argTypes: {
+        alt: {
+            control: { type: 'text' },
+            description: 'Alt text for the image, or title for placeholder',
+            table: { type: { summary: 'string' } },
+        },
+        children: {
+            control: { type: 'text' },
+            description: 'Fallback content when there is no image (e.g. initials)',
+            table: { type: { summary: 'ReactNode' } },
+        },
+        color: {
+            control: { type: 'select' },
+            description: 'Taiv primitives palette key (applied via Mantine styles API)',
+            options: Object.keys(primitives),
+            table: { type: { summary: 'AvatarPrimitiveColor' } },
+        },
+        radius: {
+            control: { type: 'select' },
+            description: 'Border radius',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            table: { type: { summary: 'MantineNumberSize' } },
+        },
+        size: {
+            control: { type: 'select' },
+            description: 'Width and height',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            table: { type: { summary: 'MantineNumberSize' } },
+        },
+        src: {
+            control: { type: 'text' },
+            description: 'Image URL',
+            table: { type: { summary: 'string | null' } },
+        },
+        variant: {
+            control: { type: 'select' },
+            description: 'Visual style',
+            options: ['filled', 'light', 'gradient', 'outline'],
+            table: {
+                type: { summary: "'filled' | 'light' | 'gradient' | 'outline'" },
+            },
+        },
+    },
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+    },
+    title: 'Components/Info/Avatar',
+};
+export default meta;
+export const Default = {
+    args: {
+        alt: 'Profile photo',
+        radius: 'xl',
+        size: 'lg',
+        src: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop',
+    },
+};
+export const Initials = {
+    args: {
+        alt: 'User initials',
+        children: 'AB',
+        color: 'blue',
+        radius: 'xl',
+        size: 'lg',
+        variant: 'filled',
+    },
+};
+export const Grouped = {
+    parameters: {
+        docs: { source: { code: false } },
+    },
+    render: () => (_jsxs(Avatar.Group, { spacing: 'sm', children: [_jsx(Avatar, { radius: 'xl', src: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop' }), _jsx(Avatar, { radius: 'xl', src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop' }), _jsx(Avatar, { color: 'gray', radius: 'xl', variant: 'light', children: "+3" })] })),
+};

package/dist/components/Info/Badge/Badge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwD9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,KAAK,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEhE,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAwE9B,CAAC;AAQF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAsC1B,CAAC"}

package/dist/components/Info/Badge/Badge.stories.js

@@ -18,10 +18,10 @@ const meta = {
     argTypes: {
         variant: {
             control: { type: 'select' },
-            options: ['outline', 'filled', 'gradient'],
+            options: ['outline', 'filled', 'gradient', 'dark'],
             description: 'Visual style of the badge',
             table: {
-                type: { summary: "'outline' | 'filled' | 'gradient'" },
+                type: { summary: "'outline' | 'filled' | 'gradient' | 'dark'" },
                 defaultValue: { summary: "'outline'" },
             },
         },
@@ -36,10 +36,25 @@ const meta = {
         },
         color: {
             control: { type: 'select' },
-            options: ['primary', 'success', 'warning', 'error', 'neutral', 'white'],
-            description: 'Design system color',
+            options: [
+                'primary',
+                'success',
+                'warning',
+                'error',
+                'neutral',
+                'white',
+                'blue',
+                'gray',
+                'green',
+                'purple',
+                'red',
+                'salmon',
+                'teal',
+                'yellow',
+            ],
+            description: 'Color token key — semantic (theme-following) or primitive (fixed hue)',
             table: {
-                type: { summary: 'keyof typeof colors' },
+                type: { summary: 'keyof typeof colors | keyof typeof primitives' },
                 defaultValue: { summary: "'primary'" },
             },
         },
@@ -80,7 +95,7 @@ export const Default = {
     },
 };
 export const Variants = {
-    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" })] })),
+    render: () => (_jsxs(Group, { gap: spacing.lg, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Outline" }), _jsx(Badge, { variant: "filled", color: "primary", children: "Filled" }), _jsx(Badge, { variant: "gradient", color: "primary", children: "Gradient" }), _jsx(Badge, { variant: "dark", color: "primary", children: "Dark" })] })),
 };
 export const Colors = {
     render: () => (_jsxs(Group, { gap: spacing.lg, style: { flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "outline", color: "primary", children: "Primary" }), _jsx(Badge, { variant: "outline", color: "success", children: "Success" }), _jsx(Badge, { variant: "outline", color: "warning", children: "Warning" }), _jsx(Badge, { variant: "outline", color: "error", children: "Error" }), _jsx(Badge, { variant: "outline", color: "neutral", children: "Neutral" })] })),

package/dist/components/Info/Badge/sizes.d.ts

@@ -1,33 +1,33 @@
 export declare const badgeSizes: {
-    sm: {
-        mantineSize: string;
-        padding: string;
-        height: string;
+    lg: {
         fontSize: {
             fontSize: string;
             lineHeight: string;
         };
+        height: string;
         iconSize: number;
-    };
-    md: {
         mantineSize: string;
         padding: string;
-        height: string;
+    };
+    md: {
         fontSize: {
             fontSize: string;
             lineHeight: string;
         };
+        height: string;
         iconSize: number;
-    };
-    lg: {
         mantineSize: string;
         padding: string;
-        height: string;
+    };
+    sm: {
         fontSize: {
             fontSize: string;
             lineHeight: string;
         };
+        height: string;
         iconSize: number;
+        mantineSize: string;
+        padding: string;
     };
 };
 export type BadgeSize = keyof typeof badgeSizes;

package/dist/components/Info/Badge/sizes.js

@@ -1,25 +1,25 @@
-import { inputFontSize } from '../../../constants/font';
-import { spacing } from '../../../constants/spacing';
+import { inputFontSize } from "../../../constants/font";
+import { spacing } from "../../../constants/spacing";
 export const badgeSizes = {
-    sm: {
-        mantineSize: 'md',
+    lg: {
+        fontSize: inputFontSize["lg"],
+        height: "32px",
+        iconSize: 16,
+        mantineSize: "xl",
         padding: `${spacing.xs} ${spacing.sm}`,
-        height: '15px',
-        fontSize: inputFontSize['sm'],
-        iconSize: 10,
     },
     md: {
-        mantineSize: 'lg',
-        padding: `${spacing.xs} ${spacing.sm}`,
-        height: '25px',
-        fontSize: inputFontSize['md'],
+        fontSize: inputFontSize["md"],
+        height: "24px",
         iconSize: 14,
+        mantineSize: "lg",
+        padding: `${spacing.xs} ${spacing.sm}`,
     },
-    lg: {
-        mantineSize: 'xl',
+    sm: {
+        fontSize: inputFontSize["sm"],
+        height: "20px",
+        iconSize: 10,
+        mantineSize: "md",
         padding: `${spacing.xs} ${spacing.sm}`,
-        height: '30px',
-        fontSize: inputFontSize['lg'],
-        iconSize: 16,
     },
 };

package/dist/components/Info/Badge/variants.d.ts

@@ -1,6 +1,6 @@
-import type { CSSObject } from '@mantine/styles';
-import { colors } from '../../../constants/colors';
-export type BadgeVariant = 'outline' | 'filled' | 'gradient';
-export type BadgeColor = keyof typeof colors;
+import type { CSSObject } from "@mantine/styles";
+import { colors, primitives } from "../../../constants/colors";
+export type BadgeVariant = "outline" | "filled" | "gradient" | "dark";
+export type BadgeColor = keyof typeof colors | keyof typeof primitives;
 export declare function getVariantStyles(color: BadgeColor): Record<BadgeVariant, CSSObject>;
 //# sourceMappingURL=variants.d.ts.map

package/dist/components/Info/Badge/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAoBnF"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAW,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGxE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAMtE,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,GAAG,MAAM,OAAO,UAAU,CAAC;AASvE,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,UAAU,GAChB,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CA2BjC"}

package/dist/components/Info/Badge/variants.js

@@ -1,22 +1,35 @@
-import { colors } from '../../../constants/colors';
-import { spacing } from '../../../constants/spacing';
+import { colors, neutral, primitives } from "../../../constants/colors";
+import { spacing } from "../../../constants/spacing";
+// Combined token lookup so either kind of key resolves by index. Semantic and
+// primitive scales live in separate objects; merging once (no overlapping
+// keys) avoids branching per lookup. NOTE: `colors.white` is a flat string
+// rather than a scale — indexing it by a shade yields a character, harmless
+// since `white` is only ever a decorative, non-scale Badge color.
+const palette = { ...colors, ...primitives };
 export function getVariantStyles(color) {
+    const scale = palette[color];
     return {
-        outline: {
-            border: `1.5px solid ${colors[color][200]}`,
-            color: colors[color][200],
-            backgroundColor: 'transparent',
-            borderRadius: '8px',
-            padding: `${spacing.xs} ${spacing.sm}`,
+        dark: {
+            backgroundColor: `${neutral[300]}b3`,
+            border: "none",
+            borderRadius: "6px",
+            color: "white",
         },
         filled: {
-            backgroundColor: colors[color][50],
-            color: colors[color][200],
+            backgroundColor: scale[25],
+            color: scale[200],
         },
         gradient: {
-            background: `linear-gradient(to right, ${colors[color][50]}, ${colors[color][200]})`,
-            color: 'white',
-            borderRadius: '16px',
+            background: `linear-gradient(to right, ${scale[50]}, ${scale[200]})`,
+            borderRadius: "16px",
+            color: "white",
+            padding: `${spacing.xs} ${spacing.sm}`,
+        },
+        outline: {
+            backgroundColor: "transparent",
+            border: `1.5px solid ${scale[200]}`,
+            borderRadius: "8px",
+            color: scale[200],
             padding: `${spacing.xs} ${spacing.sm}`,
         },
     };

package/dist/components/Info/Drawer/Drawer.d.ts

@@ -0,0 +1,24 @@
+import { type DrawerProps as MantineDrawerProps } from '@mantine/core';
+import type React from 'react';
+export type DrawerPosition = 'right' | 'left' | 'top' | 'bottom';
+export interface DrawerProps extends Omit<MantineDrawerProps, 'title' | 'children'> {
+    /** Body content. Scrolls independently of header + pinned footer. */
+    children: React.ReactNode;
+    /** Title shown in the header slot. If omitted, no header renders. */
+    title?: React.ReactNode;
+    /** Optional subtitle / metadata underneath the title. */
+    subtitle?: React.ReactNode;
+    /** Pinned footer. Stays visible while the body scrolls. */
+    footer?: React.ReactNode;
+    /** Show the built-in close button in the header. Default `true`. */
+    showClose?: boolean;
+    /** Swap the header for a fully custom node. Bypasses title/subtitle/close. */
+    header?: React.ReactNode;
+}
+/**
+ * Side drawer built on Mantine v6 with pinned header + footer slots.
+ * Right-anchored by default — use `MobileDrawer` for bottom-anchored mobile
+ * sheets, or `ResponsiveDrawer` for automatic right/bottom switching.
+ */
+export declare const Drawer: ({ children, title, subtitle, footer, header, showClose, position, size, onClose, styles, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Info/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,IAAI,kBAAkB,EACvC,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEjE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC;IACtD,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,qGAYpB,WAAW,4CAwEb,CAAC"}