@taiv/ui 1.14.1 → 2.0.0

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Popover } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { neutral, white } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+const CHECKER_BG = `
+  linear-gradient(45deg, ${neutral[100]} 25%, transparent 25%),
+  linear-gradient(-45deg, ${neutral[100]} 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, ${neutral[100]} 75%),
+  linear-gradient(-45deg, transparent 75%, ${neutral[100]} 75%)
+`;
+const isTransparent = (v) => {
+    if (v == null || v === 'transparent')
+        return true;
+    const match = v.match(/^#([0-9a-f]{8}|[0-9a-f]{4})$/i);
+    if (!match)
+        return false;
+    const alpha = match[1].length === 8 ? match[1].slice(6) : match[1].slice(3).repeat(2);
+    return alpha.toLowerCase() === '00';
+};
+/**
+ * Trigger + popover pair that opens a Mantine `ColorPicker`. Four visual
+ * variants:
+ *   - `fontColor`: stacked "A" with a colored underline bar (the bar reflects
+ *      the current text color).
+ *   - `borderColor`: hollow "A" whose stroke reflects the current text-border
+ *      color, paired with a colored underline bar.
+ *   - `shadowColor`: solid "A" with a soft drop shadow tinted by the current
+ *      shadow color, paired with a colored underline bar.
+ *   - `fillColor`: 16×16 swatch, with a checkerboard pattern when the fill is
+ *      transparent / null.
+ *
+ * All variants drive the same popover — used in the slide-editor text
+ * toolbar and reusable anywhere a color needs to be picked inline.
+ */
+export const ColorPickerTrigger = ({ variant, value, onChange, swatches, format = 'hex', ariaLabel, dark = false, disabled = false, opened: openedProp, onOpenChange, swatchSize = 16, }) => {
+    const [internalOpened, { toggle: toggleInternal, close: closeInternal }] = useDisclosure(false);
+    const isControlled = openedProp !== undefined;
+    const opened = isControlled ? openedProp : internalOpened;
+    const toggle = () => {
+        if (isControlled)
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!opened);
+        else
+            toggleInternal();
+    };
+    const close = () => {
+        if (isControlled)
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+        else
+            closeInternal();
+    };
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (variant === 'fontColor'
+        ? 'Text color'
+        : variant === 'borderColor'
+            ? 'Text border color'
+            : variant === 'shadowColor'
+                ? 'Text shadow color'
+                : 'Fill color');
+    const transparent = isTransparent(value);
+    const baseButton = {
+        alignItems: 'center',
+        background: 'transparent',
+        border: 'none',
+        borderRadius: 6,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        display: 'inline-flex',
+        height: 28,
+        justifyContent: 'center',
+        opacity: disabled ? 0.5 : 1,
+        padding: `0 ${spacing.xs}`,
+    };
+    const trigger = variant === 'fontColor' ? (_jsx("button", { "aria-label": label, disabled: disabled, onClick: toggle, style: baseButton, type: 'button', children: _jsxs("span", { style: {
+                alignItems: 'center',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                gap: 2,
+            }, children: [_jsx("span", { style: {
+                        ...fontBase,
+                        ...fontSize.md,
+                        color: dark ? white : neutral[300],
+                        fontWeight: 600,
+                        lineHeight: 1,
+                    }, children: "A" }), _jsx("span", { style: {
+                        backgroundColor: value !== null && value !== void 0 ? value : neutral[300],
+                        borderRadius: 1,
+                        height: 3,
+                        width: 14,
+                    } })] }) })) : variant === 'shadowColor' ? (_jsx("button", { "aria-label": label, disabled: disabled, onClick: toggle, style: baseButton, type: 'button', children: _jsxs("span", { style: {
+                alignItems: 'center',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                gap: 2,
+            }, children: [_jsx("span", { style: {
+                        ...fontBase,
+                        ...fontSize.md,
+                        color: dark ? white : neutral[300],
+                        fontWeight: 600,
+                        lineHeight: 1,
+                        // Soft drop shadow on the glyph telegraphs "shadow color".
+                        textShadow: `1px 1px 1px ${value !== null && value !== void 0 ? value : neutral[200]}`,
+                    }, children: "A" }), _jsx("span", { style: {
+                        backgroundColor: value !== null && value !== void 0 ? value : neutral[300],
+                        borderRadius: 1,
+                        height: 3,
+                        width: 14,
+                    } })] }) })) : variant === 'borderColor' ? (_jsx("button", { "aria-label": label, disabled: disabled, onClick: toggle, style: baseButton, type: 'button', children: _jsxs("span", { style: {
+                alignItems: 'center',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                gap: 2,
+            }, children: [_jsx("span", { style: {
+                        ...fontBase,
+                        ...fontSize.md,
+                        // Hollow letter — fill is the surface color so only the
+                        // stroke is visible, mirroring the chosen border color.
+                        color: dark ? 'transparent' : white,
+                        fontWeight: 700,
+                        lineHeight: 1,
+                        WebkitTextStroke: `1px ${value !== null && value !== void 0 ? value : (dark ? white : neutral[300])}`,
+                    }, children: "A" }), _jsx("span", { style: {
+                        backgroundColor: value !== null && value !== void 0 ? value : neutral[300],
+                        borderRadius: 1,
+                        height: 3,
+                        width: 14,
+                    } })] }) })) : (_jsx("button", { "aria-label": label, disabled: disabled, onClick: toggle, style: { ...baseButton, padding: `0 ${spacing.xxs}` }, type: 'button', children: _jsx("span", { style: {
+                background: transparent ? CHECKER_BG : (value !== null && value !== void 0 ? value : white),
+                backgroundPosition: transparent
+                    ? '0 0, 0 4px, 4px -4px, -4px 0'
+                    : undefined,
+                backgroundSize: transparent ? '8px 8px' : undefined,
+                border: `1px solid ${dark ? 'rgba(255,255,255,0.2)' : neutral[100]}`,
+                borderRadius: 4,
+                display: 'inline-block',
+                height: swatchSize,
+                width: swatchSize,
+            } }) }));
+    return (_jsxs(Popover, { onClose: close, opened: opened, position: 'bottom', shadow: 'md', withinPortal: true, children: [_jsx(Popover.Target, { children: trigger }), _jsx(Popover.Dropdown, { p: spacing.sm, children: _jsx(ColorPicker, { format: format, onChange: onChange, swatches: swatches, value: value !== null && value !== void 0 ? value : '#000000' }) })] }));
+};

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColorPickerTrigger } from './ColorPickerTrigger';
+declare const meta: Meta<typeof ColorPickerTrigger>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FontColor: Story;
+export declare const BorderColor: Story;
+export declare const ShadowColor: Story;
+export declare const FillColor: Story;
+export declare const TransparentFill: Story;
+export declare const DarkSurface: Story;
+export declare const Disabled: Story;
+//# sourceMappingURL=ColorPickerTrigger.stories.d.ts.map

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerTrigger.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAa1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAYzC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC"}

package/dist/components/Inputs/ColorPickerTrigger/ColorPickerTrigger.stories.js

@@ -0,0 +1,75 @@
+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 { ColorPickerTrigger } from './ColorPickerTrigger';
+const SWATCHES = [
+    '#0F172A',
+    '#1E293B',
+    '#334155',
+    '#64748B',
+    '#0081CE',
+    '#22C55E',
+    '#F59E0B',
+    '#EF4444',
+];
+const meta = {
+    component: ColorPickerTrigger,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Compact trigger that opens a Mantine `ColorPicker` in a popover. Four visual variants — `fontColor` (stacked "A" over a colored bar), `borderColor` (hollow "A" whose stroke reflects the chosen color), `shadowColor` (solid "A" with a soft drop shadow), and `fillColor` (16×16 swatch with a checkerboard when transparent).',
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Inputs/ColorPickerTrigger',
+};
+export default meta;
+export const FontColor = {
+    render: () => {
+        const [color, setColor] = useState('#0F172A');
+        return (_jsxs(Group, { spacing: spacing.md, children: [_jsx(ColorPickerTrigger, { onChange: setColor, swatches: SWATCHES, value: color, variant: 'fontColor' }), _jsxs(Text, { variant: 'subtle', children: ["Current: ", color] })] }));
+    },
+};
+export const BorderColor = {
+    render: () => {
+        const [color, setColor] = useState('#EF4444');
+        return (_jsxs(Group, { spacing: spacing.md, children: [_jsx(ColorPickerTrigger, { onChange: setColor, swatches: SWATCHES, value: color, variant: 'borderColor' }), _jsxs(Text, { variant: 'subtle', children: ["Current: ", color] })] }));
+    },
+};
+export const ShadowColor = {
+    render: () => {
+        const [color, setColor] = useState('#64748B');
+        return (_jsxs(Group, { spacing: spacing.md, children: [_jsx(ColorPickerTrigger, { onChange: setColor, swatches: SWATCHES, value: color, variant: 'shadowColor' }), _jsxs(Text, { variant: 'subtle', children: ["Current: ", color] })] }));
+    },
+};
+export const FillColor = {
+    render: () => {
+        const [color, setColor] = useState('#0081CE');
+        return (_jsxs(Group, { spacing: spacing.md, children: [_jsx(ColorPickerTrigger, { format: 'hexa', onChange: setColor, swatches: SWATCHES, value: color, variant: 'fillColor' }), _jsxs(Text, { variant: 'subtle', children: ["Current: ", color !== null && color !== void 0 ? color : 'transparent'] })] }));
+    },
+};
+export const TransparentFill = {
+    render: () => {
+        const [color, setColor] = useState('transparent');
+        return (_jsxs(Group, { spacing: spacing.md, children: [_jsx(ColorPickerTrigger, { format: 'hexa', onChange: setColor, value: color, variant: 'fillColor' }), _jsx(Text, { variant: 'subtle', children: "Renders a checkerboard when `null` or `'transparent'`." })] }));
+    },
+};
+export const DarkSurface = {
+    render: () => {
+        const [fontColor, setFontColor] = useState('#FFFFFF');
+        const [fillColor, setFillColor] = useState('#0081CE');
+        return (_jsxs(Stack, { spacing: spacing.sm, style: {
+                background: neutral[300],
+                borderRadius: 12,
+                padding: spacing.lg,
+            }, children: [_jsx(Text, { style: { color: 'white' }, variant: 'label', children: "Dark chrome variant" }), _jsxs(Group, { spacing: spacing.sm, children: [_jsx(ColorPickerTrigger, { dark: true, onChange: setFontColor, value: fontColor, variant: 'fontColor' }), _jsx(ColorPickerTrigger, { dark: true, format: 'hexa', onChange: setFillColor, value: fillColor, variant: 'fillColor' })] })] }));
+    },
+};
+export const Disabled = {
+    render: () => (_jsxs(Group, { spacing: spacing.sm, children: [_jsx(ColorPickerTrigger, { disabled: true, onChange: () => { }, value: '#0F172A', variant: 'fontColor' }), _jsx(ColorPickerTrigger, { disabled: true, onChange: () => { }, value: '#0081CE', variant: 'fillColor' })] })),
+};

package/dist/components/Inputs/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+export interface ColorSwatchProps {
+    /** CSS color string — hex, rgb(a), or `linear-gradient(...)` / `radial-gradient(...)`. */
+    color: string;
+    /** Width and height in px (square). Default `32`. */
+    size?: number;
+    /** Highlights the swatch with a primary-colored ring. */
+    selected?: boolean;
+    /** Click handler. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessibility label — required when no children. */
+    ariaLabel?: string;
+    /** Disable the swatch. */
+    disabled?: boolean;
+    /** Inner shadow on the swatch (Mantine prop). */
+    withShadow?: boolean;
+    /** Border radius. Default `'xl'` (circular). */
+    radius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+}
+/**
+ * Clickable color swatch — a Mantine `ColorSwatch` rendered as a `<button>`
+ * with a focus ring and an optional `selected` highlight. Use for quick-pick
+ * palettes, gradient stop selection, or anywhere the user is choosing among a
+ * fixed set of colors.
+ */
+export declare const ColorSwatch: ({ ariaLabel, color, disabled, onClick, radius, selected, size, withShadow, }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/components/Inputs/ColorSwatch/ColorSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/ColorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CACpD;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,8EASzB,gBAAgB,4CAiDlB,CAAC"}

package/dist/components/Inputs/ColorSwatch/ColorSwatch.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorSwatch as MantineColorSwatch } from '@mantine/core';
+import { neutral, primary } from '../../../constants/colors';
+/**
+ * Clickable color swatch — a Mantine `ColorSwatch` rendered as a `<button>`
+ * with a focus ring and an optional `selected` highlight. Use for quick-pick
+ * palettes, gradient stop selection, or anywhere the user is choosing among a
+ * fixed set of colors.
+ */
+export const ColorSwatch = ({ ariaLabel, color, disabled = false, onClick, radius = 'xl', selected = false, size = 32, withShadow = true, }) => {
+    return (_jsx(MantineColorSwatch, { "aria-label": ariaLabel, "aria-pressed": selected, color: color, component: 'button', disabled: disabled, onClick: onClick, radius: radius, size: size, styles: {
+            // Mantine paints the color via an inner overlay using inline
+            // `style={{ backgroundColor: color }}`. That's invalid CSS for gradient
+            // strings, so the transparency-checker overlay underneath shows through
+            // and the swatch looks gray. Hide the checker — the root's
+            // `background: color` shorthand below paints both solids and gradients
+            // correctly.
+            alphaOverlay: {
+                display: 'none',
+            },
+            root: {
+                background: color,
+                border: `1px solid ${neutral[100]}`,
+                boxShadow: selected
+                    ? `0 0 0 2px ${primary[200]}`
+                    : undefined,
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                // Mantine's `size` prop runs through `rem()`, which is rescaled in
+                // host apps that use `html { font-size: 62.5% }`. Pin width/height
+                // here so the swatch always paints at the px size we asked for.
+                height: size,
+                minWidth: size,
+                opacity: disabled ? 0.5 : 1,
+                padding: 0,
+                transition: 'box-shadow 0.15s, transform 0.15s',
+                width: size,
+                '&:focus-visible': {
+                    boxShadow: `0 0 0 2px ${primary[200]}`,
+                    outline: 'none',
+                },
+                '&:hover:not(:disabled)': {
+                    transform: 'scale(1.08)',
+                },
+            },
+        }, withShadow: withShadow }));
+};

package/dist/components/Inputs/Controls/DaysOfWeek/DaysOfWeek.d.ts

@@ -0,0 +1,32 @@
+export type DayKey = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+declare const sizes: {
+    readonly md: {
+        readonly dim: 36;
+        readonly fontSize: 14;
+        readonly gap: 6;
+    };
+    readonly sm: {
+        readonly dim: 24;
+        readonly fontSize: 11;
+        readonly gap: 4;
+    };
+};
+export interface DaysOfWeekProps {
+    /** Days currently active. Order in this array doesn't matter — the component renders week order. */
+    value: DayKey[];
+    /** Omit to render as read-only display chips (used in EventCard meta). */
+    onChange?: (next: DayKey[]) => void;
+    /**
+     * When true, the strip is non-interactive and styled as disabled (dimmed, no hover).
+     * `onChange` is ignored — callers do not need to unset it.
+     * Per-day {@link disabledDays} styling still applies.
+     */
+    disabled?: boolean;
+    size?: keyof typeof sizes;
+    /** Days that cannot be toggled — rendered grayed out with not-allowed cursor. */
+    disabledDays?: DayKey[];
+    className?: string;
+}
+declare const DaysOfWeek: ({ value, onChange, disabled: stripDisabled, size, disabledDays, className, }: DaysOfWeekProps) => import("react/jsx-runtime").JSX.Element;
+export { DaysOfWeek };
+//# sourceMappingURL=DaysOfWeek.d.ts.map

package/dist/components/Inputs/Controls/DaysOfWeek/DaysOfWeek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DaysOfWeek.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/DaysOfWeek/DaysOfWeek.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAsB3E,QAAA,MAAM,KAAK;;;;;;;;;;;CAGD,CAAC;AAEX,MAAM,WAAW,eAAe;IAC9B,oGAAoG;IACpG,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,8EAOjB,eAAe,4CAqFjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Inputs/Controls/DaysOfWeek/DaysOfWeek.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UnstyledButton } from '@mantine/core';
+import { neutral, primary, white } from '../../../../constants/colors';
+import { fontBase, fontWeight } from '../../../../constants/font';
+import { spacing } from '../../../../constants/spacing';
+const ALL_DAYS = [
+    'sun',
+    'mon',
+    'tue',
+    'wed',
+    'thu',
+    'fri',
+    'sat',
+];
+const SHORT_LABELS = {
+    fri: 'F',
+    mon: 'M',
+    sat: 'S',
+    sun: 'S',
+    thu: 'T',
+    tue: 'T',
+    wed: 'W',
+};
+const sizes = {
+    md: { dim: 36, fontSize: 14, gap: 6 },
+    sm: { dim: 24, fontSize: 11, gap: 4 },
+};
+const DaysOfWeek = ({ value, onChange, disabled: stripDisabled = false, size = 'md', disabledDays, className, }) => {
+    const order = ALL_DAYS;
+    const selected = new Set(value);
+    const disabledDaySet = new Set(disabledDays !== null && disabledDays !== void 0 ? disabledDays : []);
+    const { dim, fontSize, gap } = sizes[size];
+    const allowChange = Boolean(onChange) && !stripDisabled;
+    const toggle = (day) => {
+        if (!onChange || stripDisabled || disabledDaySet.has(day))
+            return;
+        if (selected.has(day)) {
+            onChange(value.filter((d) => d !== day));
+        }
+        else {
+            onChange([...value, day]);
+        }
+    };
+    return (_jsx("fieldset", { className: className, disabled: stripDisabled, style: {
+            alignItems: 'center',
+            border: 'none',
+            display: 'inline-flex',
+            gap: `${gap}px`,
+            margin: 0,
+            minWidth: 0,
+            padding: 0,
+            ...(stripDisabled ? { opacity: 0.5 } : {}),
+        }, children: order.map((day) => {
+            const isActive = selected.has(day);
+            const isDayDisabled = disabledDaySet.has(day);
+            // Hover / click only when the strip allows changes and this day isn't disabled.
+            const interactive = allowChange && !isDayDisabled;
+            const nonInteractive = !interactive;
+            return (_jsx(UnstyledButton, { "aria-label": day, "aria-pressed": isActive, component: interactive ? 'button' : 'span', "data-active": isActive || undefined, "data-disabled": isDayDisabled || undefined, disabled: nonInteractive, onClick: interactive ? () => toggle(day) : undefined, sx: {
+                    ...fontBase,
+                    alignItems: 'center',
+                    backgroundColor: isActive ? primary[200] : neutral[25],
+                    borderRadius: `${spacing.xs}`,
+                    color: isActive
+                        ? white
+                        : isDayDisabled
+                            ? neutral[100]
+                            : neutral[300],
+                    cursor: interactive
+                        ? 'pointer'
+                        : isDayDisabled
+                            ? 'not-allowed'
+                            : 'default',
+                    display: 'inline-flex',
+                    flexShrink: 0,
+                    fontSize: `${fontSize}px`,
+                    fontWeight: fontWeight.semibold,
+                    height: `${dim}px`,
+                    justifyContent: 'center',
+                    lineHeight: 1,
+                    transition: 'background-color 120ms ease, color 120ms ease',
+                    userSelect: 'none',
+                    width: `${dim}px`,
+                    ...(interactive && {
+                        '&:hover': {
+                            backgroundColor: isActive ? primary[200] : neutral[50],
+                        },
+                    }),
+                }, children: SHORT_LABELS[day] }, day));
+        }) }));
+};
+export { DaysOfWeek };

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.d.ts

@@ -1,20 +1,23 @@
-import { SegmentedControlProps as MantineSegmentedControlProps } from '@mantine/core';
-import { CSSObject } from '@mantine/styles';
+import { type SegmentedControlProps as MantineSegmentedControlProps } from '@mantine/core';
+import type { CSSObject } from '@mantine/styles';
 declare const componentSizes: {
     readonly sm: {
-        readonly fontSize: string;
-        readonly lineHeight: string;
         readonly mantineSize: "md";
+        readonly height: 28;
+        readonly paddingX: 12;
+        readonly fontSize: 12;
     };
     readonly md: {
-        readonly fontSize: string;
-        readonly lineHeight: string;
         readonly mantineSize: "lg";
+        readonly height: 36;
+        readonly paddingX: 16;
+        readonly fontSize: 14;
     };
     readonly lg: {
-        readonly fontSize: string;
-        readonly lineHeight: string;
         readonly mantineSize: "xl";
+        readonly height: 44;
+        readonly paddingX: 20;
+        readonly fontSize: 16;
     };
 };
 interface SegmentedControlProps extends Omit<MantineSegmentedControlProps, 'size'> {

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,qBAAqB,IAAI,4BAA4B,EACtD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,UAAU,qBAAsB,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,CAAC;IAChF,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAA0C,qBAAqB,4CA+BxF,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,IAAI,4BAA4B,EAC3D,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAKjD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,UAAU,qBACR,SAAQ,IAAI,CAAC,4BAA4B,EAAE,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAKvB,qBAAqB,4CAiDvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/Inputs/Controls/SegmentedControl/SegmentedControl.js

@@ -1,24 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SegmentedControl as MantineSegmentedControl, } from '@mantine/core';
-import { primary, neutral, white } from '../../../../constants/colors';
-import { fontBase, fontSize, fontWeight } from '../../../../constants/font';
+import { neutral, primary, white } from '../../../../constants/colors';
+import { fontBase, fontWeight } from '../../../../constants/font';
 const componentSizes = {
-    sm: { mantineSize: 'md', ...fontSize['xs'] },
-    md: { mantineSize: 'lg', ...fontSize['sm'] },
-    lg: { mantineSize: 'xl', ...fontSize['md'] },
+    sm: { mantineSize: 'md', height: 28, paddingX: 12, fontSize: 12 },
+    md: { mantineSize: 'lg', height: 36, paddingX: 16, fontSize: 14 },
+    lg: { mantineSize: 'xl', height: 44, paddingX: 20, fontSize: 16 },
 };
 const SegmentedControl = ({ styles, size = 'md', color, ...props }) => {
     const selectedSize = componentSizes[size];
     const style = {
         root: {
             backgroundColor: neutral[50],
+            minHeight: `${selectedSize.height}px`,
+        },
+        control: {
+            height: `${selectedSize.height}px`,
+            '&:not(:first-of-type)': {
+                borderColor: neutral[100],
+            },
         },
         controlActive: {
             backgroundColor: white,
         },
         label: {
             ...fontBase,
-            fontSize: selectedSize.fontSize,
+            height: `${selectedSize.height}px`,
+            padding: `0 ${selectedSize.paddingX}px`,
+            fontSize: `${selectedSize.fontSize}px`,
+            lineHeight: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             '&:not([data-active])': {
                 color: neutral[200],
             },
@@ -29,13 +42,8 @@ const SegmentedControl = ({ styles, size = 'md', color, ...props }) => {
                 },
             },
         },
-        control: {
-            '&:not(:first-of-type)': {
-                borderColor: neutral[100],
-            },
-        },
         ...styles,
     };
-    return _jsx(MantineSegmentedControl, { radius: 'md', color: color, size: selectedSize.mantineSize, styles: style, transitionTimingFunction: 'linear', transitionDuration: 300, ...props });
+    return (_jsx(MantineSegmentedControl, { color: color, radius: 'md', size: selectedSize.mantineSize, styles: style, transitionDuration: 300, transitionTimingFunction: 'linear', ...props }));
 };
 export { SegmentedControl };

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts

@@ -1,29 +1,43 @@
-import { CSSObject, SwitchProps as MantineToggleProps } from '@mantine/core';
+import { type CSSObject, type SwitchProps as MantineToggleProps } from '@mantine/core';
+import type React from 'react';
 declare const componentSizes: {
+    readonly md: {
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly height: 28;
+        readonly iconSize: 12;
+        readonly mantineSize: "xl";
+        readonly thumbScale: 1.3;
+        readonly thumbTranslate: 10;
+        readonly width: 48;
+    };
     readonly sm: {
         readonly fontSize: string;
         readonly lineHeight: string;
-        readonly width: 24;
         readonly height: 18;
+        readonly iconSize: 8;
         readonly mantineSize: "md";
         readonly thumbScale: 1.3;
         readonly thumbTranslate: 2;
+        readonly width: 24;
     };
-    readonly md: {
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly width: 48;
-        readonly height: 28;
-        readonly mantineSize: "xl";
-        readonly thumbScale: 1.3;
-        readonly thumbTranslate: 10;
+};
+declare const componentVariants: {
+    readonly error: {
+        readonly activeColor: "#FF3B30";
+        readonly getThumbIcon: (_iconSize: number) => React.ReactNode;
+    };
+    readonly primary: {
+        readonly activeColor: "#6F3FEE";
+        readonly getThumbIcon: (_iconSize: number) => React.ReactNode;
     };
 };
 interface ToggleProps extends MantineToggleProps {
     size?: keyof typeof componentSizes;
     label?: string;
+    variant?: keyof typeof componentVariants;
     styles?: Record<string, CSSObject>;
 }
-declare const Toggle: ({ checked, onChange, styles, size, label, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toggle: ({ checked, onChange, styles, size, variant, label, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export { Toggle };
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Inputs/Controls/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAKtG,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;CAGV,CAAC;AAEX,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,sDAA6D,WAAW,4CAmCvF,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Inputs/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,WAAW,IAAI,kBAAkB,EACvC,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAmBV,CAAC;AAIX,QAAA,MAAM,iBAAiB;;;2CAGO,MAAM,KAAa,KAAK,CAAC,SAAS;;;;2CAIlC,MAAM,KAAa,KAAK,CAAC,SAAS;;CAEtD,CAAC;AAEX,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,MAAM,GAAI,+DAQb,WAAW,4CA+Db,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}