@taiv/ui 1.14.1 → 2.0.0

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { neutral, primary, white } 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 { SelectableObject } from './SelectableObject';
+const meta = {
+    component: SelectableObject,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Selection chrome for canvas-like editors — animated marching-ants border + 4 corner resize handles wrapped around arbitrary children. Drag / resize math stays in the consumer; this component only renders the chrome.',
+            },
+        },
+        layout: 'centered',
+    },
+    title: 'Components/Misc/SelectableObject',
+};
+export default meta;
+const CANVAS = {
+    background: neutral[25],
+    border: `1px solid ${neutral[50]}`,
+    borderRadius: 8,
+    height: 260,
+    padding: spacing.xl,
+    position: 'relative',
+    width: 420,
+};
+export const TextObject = {
+    render: () => (_jsx("div", { style: CANVAS, children: _jsx(SelectableObject, { children: _jsx("div", { style: {
+                    background: white,
+                    border: `1px solid ${neutral[50]}`,
+                    borderRadius: 6,
+                    color: neutral[300],
+                    fontSize: 28,
+                    fontWeight: 600,
+                    padding: `${spacing.sm} ${spacing.md}`,
+                }, children: "Heading text" }) }) })),
+};
+export const ImageObject = {
+    render: () => (_jsx("div", { style: CANVAS, children: _jsx(SelectableObject, { children: _jsx("div", { style: {
+                    background: `linear-gradient(135deg, ${primary[100]}, ${primary[200]})`,
+                    borderRadius: 6,
+                    color: white,
+                    display: 'flex',
+                    fontSize: 12,
+                    fontWeight: 500,
+                    height: 140,
+                    letterSpacing: 0.5,
+                    placeContent: 'center',
+                    placeItems: 'center',
+                    textTransform: 'uppercase',
+                    width: 200,
+                }, children: "Image" }) }) })),
+};
+export const ToggleSelection = {
+    render: () => {
+        const [selected, setSelected] = useState('one');
+        return (_jsxs(Stack, { spacing: spacing.sm, children: [_jsx(Text, { variant: 'subtle', children: "Click an object to select it." }), _jsx("div", { style: { ...CANVAS, width: 520 }, children: _jsx(Group, { spacing: spacing.xl, children: ['one', 'two'].map((id) => (_jsx(SelectableObject, { onSelect: () => setSelected(id), selected: selected === id, children: _jsxs("div", { style: {
+                                    background: white,
+                                    border: `1px solid ${neutral[50]}`,
+                                    borderRadius: 6,
+                                    padding: `${spacing.md} ${spacing.lg}`,
+                                }, children: ["Object ", id] }) }, id))) }) })] }));
+    },
+};
+export const NoHandles = {
+    render: () => (_jsx("div", { style: CANVAS, children: _jsx(SelectableObject, { showHandles: false, children: _jsx("div", { style: {
+                    background: white,
+                    border: `1px solid ${neutral[50]}`,
+                    borderRadius: 6,
+                    padding: `${spacing.md} ${spacing.lg}`,
+                }, children: "Lightweight hover / focus chrome" }) }) })),
+};
+export const StaticBorder = {
+    render: () => (_jsx("div", { style: CANVAS, children: _jsx(SelectableObject, { animated: false, children: _jsx("div", { style: {
+                    background: white,
+                    border: `1px solid ${neutral[50]}`,
+                    borderRadius: 6,
+                    padding: `${spacing.md} ${spacing.lg}`,
+                }, children: "Dashed border, no animation" }) }) })),
+};

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

@@ -0,0 +1,26 @@
+import type React from 'react';
+export interface SelectionToolbarProps {
+    /** Whether the toolbar is visible. Drives the transition. */
+    opened: boolean;
+    /** Number of currently-selected items. Rendered as `{count} selected`. */
+    count: number;
+    /** Right-aligned action buttons — typically `<Button />`s. */
+    actions: React.ReactNode;
+    /** Optional slot between count and actions (e.g. a `<Select />`). */
+    dropdownSlot?: React.ReactNode;
+    /** Fired when the dismiss (×) button is clicked. */
+    onDismiss: () => void;
+    /** Override the default `{count} selected` label. */
+    label?: (count: number) => React.ReactNode;
+    /** Fine-tune the bottom offset. Default `16px`. */
+    bottomOffset?: number;
+    /** Max-width cap on large viewports. Default `768px`. */
+    maxWidth?: number;
+}
+/**
+ * Floating bottom action bar shown while items are selected across Library /
+ * Playlists / Slides. Pinned above content, below modals. Single row that
+ * never wraps.
+ */
+export declare const SelectionToolbar: ({ opened, count, actions, dropdownSlot, onDismiss, label, bottomOffset, maxWidth, }: SelectionToolbarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectionToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/SelectionToolbar/SelectionToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,qBAAqB;IACpC,6DAA6D;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qEAAqE;IACrE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,oDAAoD;IACpD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3C,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,qFAS9B,qBAAqB,4CAmEvB,CAAC"}

package/dist/components/Misc/SelectionToolbar/SelectionToolbar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconX } from '@tabler/icons-react';
+import { neutral, white } from '../../../constants/colors';
+import { fontBase, fontSize } from '../../../constants/font';
+import { spacing } from '../../../constants/spacing';
+import { IconButton } from '../../Inputs/Buttons/IconButton/IconButton';
+import { Group } from '../../Layout/Group/Group';
+import { Transition } from '../Transition/Transition';
+/**
+ * Floating bottom action bar shown while items are selected across Library /
+ * Playlists / Slides. Pinned above content, below modals. Single row that
+ * never wraps.
+ */
+export const SelectionToolbar = ({ opened, count, actions, dropdownSlot, onDismiss, label = (n) => `${n} selected`, bottomOffset = 16, maxWidth = 768, }) => {
+    return (_jsx(Transition, { duration: 200, mounted: opened, timingFunction: 'ease-out', transition: 'slide-up', children: (transitionStyles) => (_jsx("div", { style: {
+                bottom: bottomOffset,
+                left: '50%',
+                maxWidth: `min(${maxWidth}px, calc(100% - 2rem))`,
+                position: 'fixed',
+                transform: 'translateX(-50%)',
+                width: 'max-content',
+                zIndex: 30,
+                ...transitionStyles,
+            }, children: _jsxs(Group, { noWrap: true, position: 'apart', spacing: spacing.md, style: {
+                    backgroundColor: white,
+                    border: `1px solid ${neutral[50]}`,
+                    borderRadius: '12px',
+                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
+                    flexWrap: 'nowrap',
+                    maxWidth: '100%',
+                    padding: `${spacing.xs} ${spacing.sm}`,
+                    whiteSpace: 'nowrap',
+                    width: '100%',
+                }, children: [_jsxs(Group, { noWrap: true, spacing: spacing.sm, style: { flexShrink: 0 }, children: [_jsx(IconButton, { onClick: onDismiss, size: 'sm', styles: { root: { height: 28, width: 28 } }, variant: 'secondary', children: _jsx(IconX, {}) }), _jsx("span", { style: {
+                                    ...fontBase,
+                                    ...fontSize.sm,
+                                    color: neutral[300],
+                                    flexShrink: 0,
+                                    fontWeight: 600,
+                                }, children: label(count) })] }), _jsxs(Group, { noWrap: true, spacing: spacing.xs, style: { flexShrink: 0 }, children: [dropdownSlot, actions] })] }) })) }));
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectionToolbar } from './SelectionToolbar';
+declare const meta: Meta<typeof SelectionToolbar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const OneSelected: Story;
+export declare const ThreeSelected: Story;
+export declare const TwelveWithDropdown: Story;
+export declare const Playground: Story;
+//# sourceMappingURL=SelectionToolbar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionToolbar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/SelectionToolbar/SelectionToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAYvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../Inputs/Buttons/Button/Button';
+import { Select } from '../../Inputs/Dropdowns/Select/Select';
+import { Stack } from '../../Layout/Stack/Stack';
+import { Text } from '../../Typography/Text/Text';
+import { SelectionToolbar } from './SelectionToolbar';
+const meta = {
+    component: SelectionToolbar,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Floating bottom toolbar that surfaces while items are selected. Pinned above page content and below modals (`z-index: 30`). Never wraps — all children should be shrink-0.',
+            },
+        },
+        layout: 'fullscreen',
+    },
+    title: 'Components/Misc/SelectionToolbar',
+};
+export default meta;
+export const OneSelected = {
+    render: () => {
+        const [opened, setOpened] = useState(true);
+        return (_jsx(SelectionToolbar, { actions: _jsx(Button, { size: 'sm', children: "Append to playlist" }), count: 1, onDismiss: () => setOpened(false), opened: opened }));
+    },
+};
+export const ThreeSelected = {
+    render: () => {
+        const [opened, setOpened] = useState(true);
+        return (_jsx(SelectionToolbar, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { size: 'sm', variant: 'cancel', children: "Delete" }), _jsx(Button, { size: 'sm', children: "Append to playlist" })] }), count: 3, onDismiss: () => setOpened(false), opened: opened }));
+    },
+};
+export const TwelveWithDropdown = {
+    render: () => {
+        const [opened, setOpened] = useState(true);
+        const [target, setTarget] = useState('main');
+        return (_jsx(SelectionToolbar, { actions: _jsx(Button, { size: 'sm', children: "Append" }), count: 12, dropdownSlot: _jsx(Select, { data: [
+                    { label: 'Main playlist', value: 'main' },
+                    { label: 'Holiday playlist', value: 'holiday' },
+                ], onChange: setTarget, size: 'sm', value: target }), onDismiss: () => setOpened(false), opened: opened }));
+    },
+};
+export const Playground = {
+    render: () => {
+        const [opened, setOpened] = useState(true);
+        return (_jsxs(Stack, { children: [_jsx(Text, { children: "Scroll content \u2014 toolbar stays pinned to the viewport bottom." }), Array.from({ length: 40 }, (_, i) => `row-${i + 1}`).map((key, i) => (_jsxs(Text, { variant: 'subtle', children: ["Row ", i + 1] }, key))), _jsx(SelectionToolbar, { actions: _jsx(Button, { size: 'sm', children: "Append to playlist" }), count: 4, onDismiss: () => setOpened(false), opened: opened })] }));
+    },
+};

package/dist/components/Misc/Stepper/Step.stories.d.ts

@@ -20,81 +20,83 @@ declare const meta: {
         loading?: boolean | undefined;
         allowStepSelect?: boolean | undefined;
         completed?: boolean | undefined;
-        ref?: import("react").Ref<HTMLButtonElement> | undefined;
         form?: string | undefined | undefined;
         p?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
         slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
         td?: import("@mantine/styles").SystemProp<import("csstype").Property.TextDecoration<string | number> | undefined>;
         title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
-        disabled?: boolean | undefined | undefined;
-        formAction?: string | undefined | undefined;
-        formEncType?: string | undefined | undefined;
-        formMethod?: string | undefined | undefined;
-        formNoValidate?: boolean | undefined | undefined;
-        formTarget?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        tt?: import("@mantine/styles").SystemProp<import("csstype").Property.TextTransform | undefined>;
+        hidden?: boolean | undefined | undefined;
+        color?: import("@mantine/styles").MantineColor | undefined;
+        content?: string | undefined | undefined;
         name?: string | undefined | undefined;
-        placeholder?: string | undefined | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         size?: import("@mantine/styles").MantineSize | undefined;
-        step?: number | undefined;
+        variant?: string | undefined;
+        styles?: import("@mantine/styles").Styles<"step" | "stepLoader" | "stepWrapper" | "verticalSeparator" | "verticalSeparatorActive" | "stepIcon" | "stepCompletedIcon" | "stepBody" | "stepLabel" | "stepDescription", Record<string, any>> | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
-        value?: string | number | readonly string[] | undefined;
-        onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
+        radius?: import("@mantine/styles").MantineNumberSize | undefined;
+        children?: import("react").ReactNode;
+        disabled?: boolean | undefined | undefined;
         className?: string | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
-        contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
+        sx?: (import("@mantine/styles").Sx | (import("@mantine/styles").Sx | undefined)[]) | undefined;
+        classNames?: Partial<Record<"step" | "stepLoader" | "stepWrapper" | "verticalSeparator" | "verticalSeparatorActive" | "stepIcon" | "stepCompletedIcon" | "stepBody" | "stepLabel" | "stepDescription", string>> | undefined;
+        unstyled?: boolean | undefined;
+        m?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        my?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        mx?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        mt?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        mb?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        ml?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        mr?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        py?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        px?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        pt?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        pb?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        pl?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        pr?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        bg?: import("@mantine/styles").SystemProp<import("@mantine/styles").MantineColor> | undefined;
+        c?: import("@mantine/styles").SystemProp<import("@mantine/styles").MantineColor> | undefined;
+        opacity?: import("@mantine/styles").SystemProp<import("csstype").Property.Opacity | undefined>;
+        ff?: import("@mantine/styles").SystemProp<import("csstype").Property.FontFamily | undefined>;
+        fz?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
+        fw?: import("@mantine/styles").SystemProp<import("csstype").Property.FontWeight | undefined>;
+        lts?: import("@mantine/styles").SystemProp<import("csstype").Property.LetterSpacing<string | number> | undefined>;
+        ta?: import("@mantine/styles").SystemProp<import("csstype").Property.TextAlign | undefined>;
+        lh?: import("@mantine/styles").SystemProp<import("csstype").Property.LineHeight<string | number> | undefined>;
+        fs?: import("@mantine/styles").SystemProp<import("csstype").Property.FontStyle | undefined>;
+        w?: import("@mantine/styles").SystemProp<import("csstype").Property.Width<string | number> | undefined>;
+        miw?: import("@mantine/styles").SystemProp<import("csstype").Property.MinWidth<string | number> | undefined>;
+        maw?: import("@mantine/styles").SystemProp<import("csstype").Property.MaxWidth<string | number> | undefined>;
+        h?: import("@mantine/styles").SystemProp<import("csstype").Property.Height<string | number> | undefined>;
+        mih?: import("@mantine/styles").SystemProp<import("csstype").Property.MinHeight<string | number> | undefined>;
+        mah?: import("@mantine/styles").SystemProp<import("csstype").Property.MaxHeight<string | number> | undefined>;
+        bgsz?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundSize<string | number> | undefined>;
+        bgp?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundPosition<string | number> | undefined>;
+        bgr?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundRepeat | undefined>;
+        bga?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundAttachment | undefined>;
+        pos?: import("@mantine/styles").SystemProp<import("csstype").Property.Position | undefined>;
+        top?: import("@mantine/styles").SystemProp<import("csstype").Property.Top<string | number> | undefined>;
+        left?: import("@mantine/styles").SystemProp<import("csstype").Property.Left<string | number> | undefined>;
+        bottom?: import("@mantine/styles").SystemProp<import("csstype").Property.Bottom<string | number> | undefined>;
+        right?: import("@mantine/styles").SystemProp<import("csstype").Property.Right<string | number> | undefined>;
+        inset?: import("@mantine/styles").SystemProp<import("csstype").Property.Inset<string | number> | undefined>;
+        display?: import("@mantine/styles").SystemProp<import("csstype").Property.Display | undefined>;
+        ref?: import("react").Ref<HTMLButtonElement> | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
-        tabIndex?: number | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
-        about?: string | undefined | undefined;
-        content?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        prefix?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        color?: import("@mantine/styles").MantineColor | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        exportparts?: string | undefined | undefined;
-        part?: string | undefined | undefined;
+        tabIndex?: number | undefined | undefined;
+        orientation?: "vertical" | "horizontal" | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
         "aria-braillelabel"?: string | undefined | undefined;
         "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
@@ -105,44 +107,43 @@ declare const meta: {
         "aria-describedby"?: string | undefined | undefined;
         "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
         "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
         "aria-keyshortcuts"?: string | undefined | undefined;
         "aria-label"?: string | undefined | undefined;
         "aria-labelledby"?: string | undefined | undefined;
         "aria-level"?: number | undefined | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
         "aria-owns"?: string | undefined | undefined;
         "aria-placeholder"?: string | undefined | undefined;
         "aria-posinset"?: number | undefined | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
         "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
         "aria-valuemax"?: number | undefined | undefined;
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        children?: import("react").ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -162,6 +163,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
@@ -229,7 +231,6 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
@@ -305,55 +306,54 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        styles?: import("@mantine/styles").Styles<"step" | "stepLoader" | "stepWrapper" | "verticalSeparator" | "verticalSeparatorActive" | "stepIcon" | "stepCompletedIcon" | "stepBody" | "stepLabel" | "stepDescription", Record<string, any>> | undefined;
-        variant?: string | undefined;
-        radius?: import("@mantine/styles").MantineNumberSize | undefined;
-        sx?: (import("@mantine/styles").Sx | (import("@mantine/styles").Sx | undefined)[]) | undefined;
-        classNames?: Partial<Record<"step" | "stepLoader" | "stepWrapper" | "verticalSeparator" | "verticalSeparatorActive" | "stepIcon" | "stepCompletedIcon" | "stepBody" | "stepLabel" | "stepDescription", string>> | undefined;
-        unstyled?: boolean | undefined;
-        m?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        my?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        mx?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        mt?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        mb?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        ml?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        mr?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        py?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        px?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        pt?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        pb?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        pl?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        pr?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        bg?: import("@mantine/styles").SystemProp<import("@mantine/styles").MantineColor> | undefined;
-        c?: import("@mantine/styles").SystemProp<import("@mantine/styles").MantineColor> | undefined;
-        opacity?: import("@mantine/styles").SystemProp<import("csstype").Property.Opacity | undefined>;
-        ff?: import("@mantine/styles").SystemProp<import("csstype").Property.FontFamily | undefined>;
-        fz?: import("@mantine/styles").SystemProp<import("@mantine/styles").SpacingValue> | undefined;
-        fw?: import("@mantine/styles").SystemProp<import("csstype").Property.FontWeight | undefined>;
-        lts?: import("@mantine/styles").SystemProp<import("csstype").Property.LetterSpacing<string | number> | undefined>;
-        ta?: import("@mantine/styles").SystemProp<import("csstype").Property.TextAlign | undefined>;
-        lh?: import("@mantine/styles").SystemProp<import("csstype").Property.LineHeight<string | number> | undefined>;
-        fs?: import("@mantine/styles").SystemProp<import("csstype").Property.FontStyle | undefined>;
-        tt?: import("@mantine/styles").SystemProp<import("csstype").Property.TextTransform | undefined>;
-        w?: import("@mantine/styles").SystemProp<import("csstype").Property.Width<string | number> | undefined>;
-        miw?: import("@mantine/styles").SystemProp<import("csstype").Property.MinWidth<string | number> | undefined>;
-        maw?: import("@mantine/styles").SystemProp<import("csstype").Property.MaxWidth<string | number> | undefined>;
-        h?: import("@mantine/styles").SystemProp<import("csstype").Property.Height<string | number> | undefined>;
-        mih?: import("@mantine/styles").SystemProp<import("csstype").Property.MinHeight<string | number> | undefined>;
-        mah?: import("@mantine/styles").SystemProp<import("csstype").Property.MaxHeight<string | number> | undefined>;
-        bgsz?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundSize<string | number> | undefined>;
-        bgp?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundPosition<string | number> | undefined>;
-        bgr?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundRepeat | undefined>;
-        bga?: import("@mantine/styles").SystemProp<import("csstype").Property.BackgroundAttachment | undefined>;
-        pos?: import("@mantine/styles").SystemProp<import("csstype").Property.Position | undefined>;
-        top?: import("@mantine/styles").SystemProp<import("csstype").Property.Top<string | number> | undefined>;
-        left?: import("@mantine/styles").SystemProp<import("csstype").Property.Left<string | number> | undefined>;
-        bottom?: import("@mantine/styles").SystemProp<import("csstype").Property.Bottom<string | number> | undefined>;
-        right?: import("@mantine/styles").SystemProp<import("csstype").Property.Right<string | number> | undefined>;
-        inset?: import("@mantine/styles").SystemProp<import("csstype").Property.Inset<string | number> | undefined>;
-        display?: import("@mantine/styles").SystemProp<import("csstype").Property.Display | undefined>;
+        key?: import("react").Key | null | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contextMenu?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        placeholder?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        formAction?: string | undefined | undefined;
+        formEncType?: string | undefined | undefined;
+        formMethod?: string | undefined | undefined;
+        formNoValidate?: boolean | undefined | undefined;
+        formTarget?: string | undefined | undefined;
+        value?: string | number | readonly string[] | undefined;
+        step?: number | undefined;
         __staticSelector?: string | undefined;
-        orientation?: "vertical" | "horizontal" | undefined;
         iconSize?: number | undefined;
         state?: "stepInactive" | "stepProgress" | "stepCompleted" | undefined;
         withIcon?: boolean | undefined;

package/dist/components/Misc/Stepper/variants.d.ts

@@ -1,6 +1,6 @@
 export declare const componentVariants: {
     primary: {
-        color: "#00A6F4";
+        color: "#6F3FEE";
     };
 };
 export type StepperVariant = keyof typeof componentVariants;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TimelineProps as MantineTimelineProps, TimelineItemProps as MantineTimelineItemProps } from '@mantine/core';
+export interface TimelineProps extends Omit<MantineTimelineProps, 'radius'> {
+    /** Index of the active item (controls bullet/line highlight up to this index) */
+    active?: number;
+    /** Diameter of the bullet in px */
+    bulletSize?: number;
+    /** Width of the connecting line in px */
+    lineWidth?: number;
+    /** Children must be `Timeline.Item` elements */
+    children: React.ReactNode;
+}
+export interface TimelineItemProps extends MantineTimelineItemProps {
+}
+export declare const Timeline: (({ active, bulletSize, lineWidth, styles, children, ...props }: TimelineProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ children, ...props }: TimelineItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=Timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/Misc/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,aAAa,IAAI,oBAAoB,EACrC,iBAAiB,IAAI,wBAAwB,EAC9C,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IACzE,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAmDD,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;CAAG;AAMtE,eAAO,MAAM,QAAQ,mEAhDlB,aAAa;mCA4CsB,iBAAiB;CAMrD,CAAC"}