pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/Table/settings/ManageColumns.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageColumns = ManageColumns;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../ui/button");
+const checkbox_1 = require("../../ui/checkbox");
+const popover_1 = require("../../ui/popover");
+/**
+ * Toolbar dropdown for toggling column visibility. Columns with
+ * `enableHiding === false` are non-toggleable.
+ */
+function ManageColumns({ columns, columnVisibility, onChange, }) {
+    return (React.createElement(popover_1.Popover, null,
+        React.createElement(popover_1.PopoverTrigger, { asChild: true },
+            React.createElement(button_1.Button, { variant: "outline", size: "sm", leftIcon: React.createElement(lucide_react_1.Columns3, null), "aria-label": "Manage columns" }, "Columns")),
+        React.createElement(popover_1.PopoverContent, { align: "end", className: "w-56 p-2" },
+            React.createElement("div", { className: "px-1 py-1 text-xs font-medium text-muted-foreground" }, "Toggle columns"),
+            React.createElement("div", { className: "max-h-64 overflow-y-auto" }, columns.map((column) => {
+                const visible = columnVisibility[column.id] !== false;
+                const disabled = column.enableHiding === false;
+                return (React.createElement("label", { key: column.id, className: "flex cursor-pointer items-center gap-2 rounded-sm px-1.5 py-1.5 hover:bg-accent" },
+                    React.createElement(checkbox_1.Checkbox, { size: "sm", checked: visible, disabled: disabled, onCheckedChange: (checked) => onChange(column.id, checked !== true), "aria-label": `Toggle ${column.header} column` }),
+                    React.createElement("span", { className: "flex-1 truncate text-sm" }, column.header)));
+            })))));
+}

package/dist/components-v2/Table/settings/TableSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { Density } from "../TableProps";
+export interface TableSettingsProps {
+    density: Density;
+    onDensityChange: (density: Density) => void;
+}
+/**
+ * Density / row-height controls. Lives in the toolbar next to the columns
+ * dropdown; consumers can hide it by passing `showDensityToggle={false}` on
+ * the parent (handled at the Table level).
+ */
+export declare function TableSettings({ density, onDensityChange, }: TableSettingsProps): React.ReactElement;

package/dist/components-v2/Table/settings/TableSettings.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSettings = TableSettings;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../ui/button");
+const dropdown_menu_1 = require("../../ui/dropdown-menu");
+/**
+ * Density / row-height controls. Lives in the toolbar next to the columns
+ * dropdown; consumers can hide it by passing `showDensityToggle={false}` on
+ * the parent (handled at the Table level).
+ */
+function TableSettings({ density, onDensityChange, }) {
+    return (React.createElement(dropdown_menu_1.DropdownMenu, null,
+        React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+            React.createElement(button_1.Button, { variant: "outline", size: "sm", leftIcon: React.createElement(lucide_react_1.Settings2, null), "aria-label": "Table settings" }, "Density")),
+        React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end", className: "w-48" },
+            React.createElement(dropdown_menu_1.DropdownMenuLabel, null, "Row density"),
+            React.createElement(dropdown_menu_1.DropdownMenuSeparator, null),
+            React.createElement(dropdown_menu_1.DropdownMenuRadioGroup, { value: density, onValueChange: (value) => onDensityChange(value) },
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "compact" }, "Compact"),
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "default" }, "Default"),
+                React.createElement(dropdown_menu_1.DropdownMenuRadioItem, { value: "comfortable" }, "Comfortable")))));
+}

package/dist/components-v2/Table/utils/filterUtils.d.ts

@@ -0,0 +1,7 @@
+import type { ActiveFilter, ColumnDef, FilterOperator } from "../TableProps";
+export declare function filterData<T>(data: T[], filters: ActiveFilter[], columns: ColumnDef<T>[]): T[];
+export declare function searchData<T>(data: T[], query: string, columns: ColumnDef<T>[]): T[];
+export declare function defaultOperatorFor(type: ColumnDef["type"] | undefined): FilterOperator;
+export declare const FILTER_OPERATORS_BY_TYPE: Record<NonNullable<ColumnDef["type"]>, FilterOperator[]>;
+export declare const OPERATOR_LABELS: Record<FilterOperator, string>;
+export declare function operatorNeedsValue(op: FilterOperator): boolean;

package/dist/components-v2/Table/utils/filterUtils.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPERATOR_LABELS = exports.FILTER_OPERATORS_BY_TYPE = void 0;
+exports.filterData = filterData;
+exports.searchData = searchData;
+exports.defaultOperatorFor = defaultOperatorFor;
+exports.operatorNeedsValue = operatorNeedsValue;
+const sortUtils_1 = require("./sortUtils");
+function asString(value) {
+    if (value === null || value === undefined)
+        return "";
+    return String(value).toLowerCase();
+}
+function asNumber(value) {
+    if (typeof value === "number")
+        return value;
+    const n = parseFloat(String(value));
+    return Number.isNaN(n) ? NaN : n;
+}
+function applyOperator(cellValue, operator, filterValue) {
+    const isEmpty = cellValue === null || cellValue === undefined || cellValue === "";
+    switch (operator) {
+        case "is_empty":
+            return isEmpty;
+        case "is_not_empty":
+            return !isEmpty;
+        case "equals":
+            return cellValue === filterValue;
+        case "not_equals":
+            return cellValue !== filterValue;
+        case "contains":
+            return asString(cellValue).includes(asString(filterValue));
+        case "not_contains":
+            return !asString(cellValue).includes(asString(filterValue));
+        case "starts_with":
+            return asString(cellValue).startsWith(asString(filterValue));
+        case "ends_with":
+            return asString(cellValue).endsWith(asString(filterValue));
+        case "greater_than": {
+            const a = asNumber(cellValue);
+            const b = asNumber(filterValue);
+            return !Number.isNaN(a) && !Number.isNaN(b) && a > b;
+        }
+        case "less_than": {
+            const a = asNumber(cellValue);
+            const b = asNumber(filterValue);
+            return !Number.isNaN(a) && !Number.isNaN(b) && a < b;
+        }
+        case "between": {
+            if (!Array.isArray(filterValue) || filterValue.length !== 2)
+                return true;
+            const a = asNumber(cellValue);
+            const lo = asNumber(filterValue[0]);
+            const hi = asNumber(filterValue[1]);
+            return !Number.isNaN(a) && a >= lo && a <= hi;
+        }
+        case "in":
+            return Array.isArray(filterValue) && filterValue.includes(cellValue);
+        case "not_in":
+            return Array.isArray(filterValue) && !filterValue.includes(cellValue);
+        default:
+            return true;
+    }
+}
+function filterData(data, filters, columns) {
+    if (filters.length === 0)
+        return data;
+    return data.filter((row) => filters.every((filter) => {
+        const column = columns.find((c) => c.id === filter.columnId);
+        if (!column)
+            return true;
+        const cellValue = (0, sortUtils_1.getRowValue)(row, column);
+        return applyOperator(cellValue, filter.operator, filter.value);
+    }));
+}
+function searchData(data, query, columns) {
+    if (!query.trim())
+        return data;
+    const q = query.toLowerCase();
+    return data.filter((row) => columns.some((column) => {
+        const value = (0, sortUtils_1.getRowValue)(row, column);
+        return asString(value).includes(q);
+    }));
+}
+function defaultOperatorFor(type) {
+    switch (type) {
+        case "number":
+            return "equals";
+        case "date":
+            return "equals";
+        case "boolean":
+            return "equals";
+        case "select":
+            return "in";
+        default:
+            return "contains";
+    }
+}
+exports.FILTER_OPERATORS_BY_TYPE = {
+    text: [
+        "contains",
+        "not_contains",
+        "equals",
+        "not_equals",
+        "starts_with",
+        "ends_with",
+        "is_empty",
+        "is_not_empty",
+    ],
+    number: [
+        "equals",
+        "not_equals",
+        "greater_than",
+        "less_than",
+        "between",
+        "is_empty",
+        "is_not_empty",
+    ],
+    date: [
+        "equals",
+        "not_equals",
+        "greater_than",
+        "less_than",
+        "between",
+        "is_empty",
+        "is_not_empty",
+    ],
+    boolean: ["equals", "not_equals"],
+    select: ["in", "not_in", "is_empty", "is_not_empty"],
+    custom: ["contains", "equals", "is_empty", "is_not_empty"],
+};
+exports.OPERATOR_LABELS = {
+    equals: "Equals",
+    not_equals: "Does not equal",
+    contains: "Contains",
+    not_contains: "Does not contain",
+    starts_with: "Starts with",
+    ends_with: "Ends with",
+    greater_than: "Greater than",
+    less_than: "Less than",
+    between: "Between",
+    is_empty: "Is empty",
+    is_not_empty: "Is not empty",
+    in: "In",
+    not_in: "Not in",
+};
+function operatorNeedsValue(op) {
+    return op !== "is_empty" && op !== "is_not_empty";
+}

package/dist/components-v2/Table/utils/sortUtils.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnDef, RowKey, SortDirection, SortState } from "../TableProps";
+export declare function getRowValue<T>(row: T, column: Pick<ColumnDef<T>, "accessorKey" | "accessorFn">): unknown;
+export declare function resolveRowKey<T>(row: T, rowKey: RowKey<T>): string | number;
+export declare function sortData<T>(data: T[], sort: SortState | null, columns: ColumnDef<T>[]): T[];
+/** Cycle: null → asc → desc → null */
+export declare function nextSortDirection(current: SortDirection): SortDirection;

package/dist/components-v2/Table/utils/sortUtils.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRowValue = getRowValue;
+exports.resolveRowKey = resolveRowKey;
+exports.sortData = sortData;
+exports.nextSortDirection = nextSortDirection;
+function getRowValue(row, column) {
+    if (column.accessorFn)
+        return column.accessorFn(row);
+    if (column.accessorKey !== undefined) {
+        return row[column.accessorKey];
+    }
+    return undefined;
+}
+function resolveRowKey(row, rowKey) {
+    if (typeof rowKey === "function")
+        return rowKey(row);
+    const value = row[rowKey];
+    if (typeof value === "string" || typeof value === "number")
+        return value;
+    return String(value);
+}
+function compareValues(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return 1;
+    if (b === null || b === undefined)
+        return -1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    if (typeof a === "boolean" && typeof b === "boolean") {
+        return a === b ? 0 : a ? 1 : -1;
+    }
+    return String(a).localeCompare(String(b), undefined, {
+        numeric: true,
+        sensitivity: "base",
+    });
+}
+function sortData(data, sort, columns) {
+    if (!sort || sort.direction === null)
+        return data;
+    const column = columns.find((c) => c.id === sort.id);
+    if (!column)
+        return data;
+    const direction = sort.direction === "asc" ? 1 : -1;
+    const indexed = data.map((row, index) => ({ row, index }));
+    indexed.sort((a, b) => {
+        const valueA = getRowValue(a.row, column);
+        const valueB = getRowValue(b.row, column);
+        const result = compareValues(valueA, valueB);
+        return result === 0 ? a.index - b.index : result * direction;
+    });
+    return indexed.map((entry) => entry.row);
+}
+/** Cycle: null → asc → desc → null */
+function nextSortDirection(current) {
+    if (current === null)
+        return "asc";
+    if (current === "asc")
+        return "desc";
+    return null;
+}

package/dist/components-v2/Tag/Tag.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const tagVariants: (props?: ({
+    variant?: "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof tagVariants> {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    /** If provided, renders a × button that calls this. */
+    onRemove?: () => void;
+    removeLabel?: string;
+}
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export { tagVariants };

package/dist/components-v2/Tag/Tag.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagVariants = exports.Tag = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../lib/utils");
+const tagVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("inline-flex items-center gap-1 rounded-full font-medium transition-colors", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 focus-within:ring-offset-background"), {
+    variants: {
+        variant: {
+            default: "bg-primary/10 text-primary",
+            secondary: "bg-secondary text-secondary-foreground",
+            outline: "border border-border bg-transparent text-foreground",
+            success: "bg-success/15 text-success",
+            warning: "bg-warning/15 text-warning",
+            destructive: "bg-destructive/15 text-destructive",
+        },
+        size: {
+            sm: "px-2 py-0.5 text-[11px]",
+            md: "px-2.5 py-1 text-xs",
+            lg: "px-3 py-1 text-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+    },
+});
+exports.tagVariants = tagVariants;
+exports.Tag = React.forwardRef((_a, ref) => {
+    var { className, variant, size, label, icon, onRemove, removeLabel } = _a, rest = __rest(_a, ["className", "variant", "size", "label", "icon", "onRemove", "removeLabel"]);
+    return (React.createElement("span", Object.assign({ ref: ref, className: (0, utils_1.cn)(tagVariants({ variant, size }), className) }, rest),
+        icon,
+        React.createElement("span", null, label),
+        onRemove && (React.createElement("button", { type: "button", "aria-label": removeLabel !== null && removeLabel !== void 0 ? removeLabel : (typeof label === "string"
+                ? `Remove ${label}`
+                : "Remove tag"), onClick: (event) => {
+                event.stopPropagation();
+                onRemove();
+            }, className: "ml-0.5 rounded-sm hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current" },
+            React.createElement(lucide_react_1.X, { "aria-hidden": "true", className: "h-3 w-3" })))));
+});
+exports.Tag.displayName = "Tag";

package/dist/components-v2/Timeline/Timeline.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+export type TimelineVariant = "default" | "success" | "warning" | "destructive";
+export type TimelineItemState = "past" | "current" | "future";
+export interface TimelineItem {
+    id: string | number;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    icon?: LucideIcon;
+    variant?: TimelineVariant;
+    /** Controls connector style (dashed for future/pending). */
+    state?: TimelineItemState;
+}
+export interface TimelineProps extends React.HTMLAttributes<HTMLOListElement> {
+    items: TimelineItem[];
+}
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components-v2/Timeline/Timeline.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const DOT_STYLES = {
+    default: "border-primary text-primary",
+    success: "border-success text-success",
+    warning: "border-warning text-warning",
+    destructive: "border-destructive text-destructive",
+};
+exports.Timeline = React.forwardRef((_a, ref) => {
+    var { items, className } = _a, rest = __rest(_a, ["items", "className"]);
+    return (React.createElement("ol", Object.assign({ ref: ref, className: (0, utils_1.cn)("relative space-y-6 pl-6", className) }, rest), items.map((item, index) => {
+        var _a, _b;
+        const isLast = index === items.length - 1;
+        const variant = (_a = item.variant) !== null && _a !== void 0 ? _a : "default";
+        const IconComponent = (_b = item.icon) !== null && _b !== void 0 ? _b : lucide_react_1.CircleDot;
+        return (React.createElement("li", { key: item.id, className: "relative" },
+            !isLast && (React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)("absolute left-[-1.4rem] top-5 h-[calc(100%+1rem)] w-px", item.state === "future"
+                    ? "border-l border-dashed border-border bg-transparent"
+                    : "bg-border") })),
+            React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)("absolute left-[-1.875rem] top-1 grid h-5 w-5 place-items-center rounded-full border-2 bg-background", DOT_STYLES[variant], item.state === "future" && "opacity-60") },
+                React.createElement(IconComponent, { className: "h-2.5 w-2.5" })),
+            React.createElement("div", { className: "space-y-0.5" },
+                React.createElement("p", { className: "text-sm font-medium text-foreground" }, item.title),
+                item.timestamp && (React.createElement("p", { className: "text-xs text-muted-foreground" }, item.timestamp)),
+                item.description && (React.createElement("p", { className: "text-sm text-muted-foreground" }, item.description)))));
+    })));
+});
+exports.Timeline.displayName = "Timeline";

package/dist/components-v2/Toaster/Toaster.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { Toaster as SonnerToaster } from "sonner";
+export type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface ToasterProps extends Omit<React.ComponentProps<typeof SonnerToaster>, "theme" | "position"> {
+    position?: ToasterPosition;
+}
+/**
+ * Mount point for toast notifications. Place once in the app root (inside the
+ * ThemeProvider). Themed via CSS variables so it tracks the active preset and
+ * dark-mode state automatically.
+ */
+export declare function Toaster({ position, toastOptions, ...rest }: ToasterProps): React.ReactElement;
+export declare namespace Toaster {
+    var displayName: string;
+}
+export declare const toast: ((message: React.ReactNode | (() => React.ReactNode), data?: import("sonner").ExternalToast) => string | number) & {
+    success: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+    info: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+    warning: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+    error: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+    custom: (jsx: (id: number | string) => React.ReactElement, data?: import("sonner").ExternalToast) => string | number;
+    message: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+    promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: {
+        style?: React.CSSProperties | undefined;
+        id?: number | string | undefined;
+        className?: string | undefined;
+        action?: React.ReactNode | import("sonner").Action;
+        onDismiss?: ((toast: import("sonner").ToastT) => void) | undefined;
+        position?: ("top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right") | undefined;
+        icon?: React.ReactNode;
+        duration?: number | undefined;
+        cancel?: React.ReactNode | import("sonner").Action;
+        invert?: boolean | undefined;
+        richColors?: boolean | undefined;
+        closeButton?: boolean | undefined;
+        dismissible?: boolean | undefined;
+        onAutoClose?: ((toast: import("sonner").ToastT) => void) | undefined;
+        cancelButtonStyle?: React.CSSProperties | undefined;
+        actionButtonStyle?: React.CSSProperties | undefined;
+        unstyled?: boolean | undefined;
+        classNames?: import("sonner").ToastClassnames | undefined;
+        descriptionClassName?: string | undefined;
+    } & {
+        loading?: string | React.ReactNode;
+        success?: React.ReactNode | ((data: ToastData) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        error?: React.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        description?: React.ReactNode | ((data: any) => React.ReactNode | string | Promise<React.ReactNode | string>);
+        finally?: () => void | Promise<void>;
+    }) => (string & {
+        unwrap: () => Promise<ToastData>;
+    }) | (number & {
+        unwrap: () => Promise<ToastData>;
+    }) | {
+        unwrap: () => Promise<ToastData>;
+    };
+    dismiss: (id?: number | string) => string | number;
+    loading: (message: (React.ReactNode | (() => React.ReactNode)) | React.ReactNode, data?: import("sonner").ExternalToast) => string | number;
+} & {
+    getHistory: () => (import("sonner").ToastT | import("sonner").ToastToDismiss)[];
+    getToasts: () => (import("sonner").ToastT | import("sonner").ToastToDismiss)[];
+};