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

package/dist/components-v2/Input/TextInput.js

@@ -0,0 +1,169 @@
+"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.TextInput = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const field_1 = require("../ui/field");
+const input_1 = require("../ui/input");
+const form_field_1 = require("../ui/form-field");
+const ICON_SIZE = {
+    sm: "h-4 w-4",
+    md: "h-[18px] w-[18px]",
+    lg: "h-5 w-5",
+};
+const ICON_INSET = {
+    sm: { left: "left-2", right: "right-2" },
+    md: { left: "left-2.5", right: "right-2.5" },
+    lg: { left: "left-3", right: "right-3" },
+};
+const PADDING_FOR_ICONS = {
+    sm: { left: "pl-8", right: "pr-8" },
+    md: { left: "pl-9", right: "pr-9" },
+    lg: { left: "pl-10", right: "pr-10" },
+};
+exports.TextInput = React.forwardRef((props, ref) => {
+    const { id, label, placeholder, value, defaultValue, onChange, type = "text", isDisabled, isReadOnly, isRequired, error = false, errorMessage, helperText, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, isInformation, informationMessage, size = "md", width, maxLength, showCount = false, variant = "default", className, hideLabel = false } = props, inputProps = __rest(props, ["id", "label", "placeholder", "value", "defaultValue", "onChange", "type", "isDisabled", "isReadOnly", "isRequired", "error", "errorMessage", "helperText", "leftIcon", "rightIcon", "onLeftIconClick", "onRightIconClick", "isInformation", "informationMessage", "size", "width", "maxLength", "showCount", "variant", "className", "hideLabel"]);
+    return (React.createElement(field_1.Field, { id: id, label: hideLabel ? undefined : label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, helperText: helperText, error: error, errorMessage: errorMessage, width: width },
+        React.createElement(TextInputControl, Object.assign({ ref: ref, label: label, hideLabel: hideLabel, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, type: type, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, error: error, leftIcon: leftIcon, rightIcon: rightIcon, onLeftIconClick: onLeftIconClick, onRightIconClick: onRightIconClick, size: size, maxLength: maxLength, showCount: showCount, variant: variant, className: className }, inputProps))));
+});
+exports.TextInput.displayName = "TextInput";
+const TextInputControl = React.forwardRef((_a, ref) => {
+    var { label, hideLabel, placeholder, value, defaultValue, onChange, type = "text", isDisabled, isReadOnly, error = false, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, size = "md", maxLength, showCount = false, variant = "default", className } = _a, rest = __rest(_a, ["label", "hideLabel", "placeholder", "value", "defaultValue", "onChange", "type", "isDisabled", "isReadOnly", "error", "leftIcon", "rightIcon", "onLeftIconClick", "onRightIconClick", "size", "maxLength", "showCount", "variant", "className"]);
+    const field = (0, form_field_1.useFormField)();
+    const isFloating = variant === "floating";
+    const isPassword = type === "password";
+    const [showPassword, setShowPassword] = React.useState(false);
+    const effectiveType = isPassword && showPassword ? "text" : type;
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current =
+                node;
+    }, [ref]);
+    const focusInput = React.useCallback(() => {
+        var _a;
+        (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const [currentLength, setCurrentLength] = React.useState(() => {
+        const initial = typeof value === "string"
+            ? value
+            : typeof defaultValue === "string"
+                ? defaultValue
+                : "";
+        return initial.length;
+    });
+    React.useEffect(() => {
+        if (typeof value === "string")
+            setCurrentLength(value.length);
+    }, [value]);
+    const handleChange = (event) => {
+        setCurrentLength(event.target.value.length);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    const resolvedRightIcon = isPassword ? (React.createElement("span", { className: "contents text-muted-foreground hover:text-foreground" }, showPassword ? (React.createElement(lucide_react_1.EyeOff, { "aria-hidden": "true" })) : (React.createElement(lucide_react_1.Eye, { "aria-hidden": "true" })))) : (rightIcon);
+    const handleRightIconClick = () => {
+        if (isPassword) {
+            setShowPassword((v) => !v);
+            focusInput();
+            return;
+        }
+        if (onRightIconClick) {
+            onRightIconClick();
+        }
+        else {
+            focusInput();
+        }
+    };
+    const handleLeftIconClick = () => {
+        if (onLeftIconClick) {
+            onLeftIconClick();
+        }
+        else {
+            focusInput();
+        }
+    };
+    const hasLeftIcon = !!leftIcon;
+    const hasRightIcon = !!resolvedRightIcon;
+    const padding = PADDING_FOR_ICONS[size];
+    const iconClass = (0, utils_1.cn)("flex items-center justify-center", ICON_SIZE[size]);
+    const effectivePlaceholder = isFloating ? " " : placeholder;
+    const showCountUI = showCount || typeof maxLength === "number";
+    const countRatio = maxLength ? currentLength / maxLength : 0;
+    const countColor = countRatio >= 1
+        ? "text-destructive"
+        : countRatio >= 0.8
+            ? "text-warning"
+            : "text-muted-foreground";
+    const showFloatingLabel = isFloating && label && !hideLabel;
+    return (React.createElement("div", { className: (0, utils_1.cn)("relative", className) },
+        hasLeftIcon && (React.createElement(IconSlot, { side: "left", size: size, disabled: isDisabled || isReadOnly, clickable: true, onClick: handleLeftIconClick, className: iconClass }, leftIcon)),
+        React.createElement(input_1.Input, Object.assign({ ref: setRefs, size: size, type: effectiveType, placeholder: effectivePlaceholder, value: value, defaultValue: defaultValue, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, maxLength: maxLength, "aria-invalid": error || field.hasError || undefined, className: (0, utils_1.cn)("peer", hasLeftIcon && padding.left, hasRightIcon && padding.right, error &&
+                "border-destructive bg-destructive/5 focus-visible:ring-destructive", isReadOnly && "bg-muted cursor-default focus-visible:ring-0", showFloatingLabel && "placeholder:text-transparent") }, rest)),
+        showFloatingLabel && (React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)("pointer-events-none absolute left-3 bg-background px-1 text-muted-foreground transition-all motion-safe:duration-150", "top-1/2 -translate-y-1/2 text-sm", "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm", "peer-focus:-top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:text-foreground", "peer-[:not(:placeholder-shown)]:-top-0 peer-[:not(:placeholder-shown)]:-translate-y-1/2 peer-[:not(:placeholder-shown)]:text-xs", error &&
+                "peer-focus:text-destructive peer-[:not(:placeholder-shown)]:text-destructive", hasLeftIcon && "left-9") }, label)),
+        hasRightIcon && (React.createElement(IconSlot, { side: "right", size: size, disabled: isDisabled || isReadOnly, clickable: isPassword || !!onRightIconClick || true, ariaLabel: isPassword
+                ? showPassword
+                    ? "Hide password"
+                    : "Show password"
+                : undefined, onClick: handleRightIconClick, className: iconClass }, resolvedRightIcon)),
+        showCountUI && (React.createElement("span", { "aria-live": "polite", className: (0, utils_1.cn)("absolute -bottom-5 right-0 text-[11px] tabular-nums", countColor) },
+            currentLength,
+            typeof maxLength === "number" && `/${maxLength}`))));
+});
+TextInputControl.displayName = "TextInputControl";
+function IconSlot({ side, size, disabled, clickable, onClick, ariaLabel, className, children, }) {
+    const inset = side === "left" ? ICON_INSET[size].left : ICON_INSET[size].right;
+    const sharedClass = (0, utils_1.cn)("absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground", inset);
+    if (!clickable || disabled) {
+        return (React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)(sharedClass, className) }, children));
+    }
+    return (React.createElement("button", { type: "button", tabIndex: -1, "aria-label": ariaLabel, onClick: onClick, className: (0, utils_1.cn)(sharedClass, "rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className) }, children));
+}

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type KanbanPriority = "low" | "medium" | "high" | "urgent";
+export interface KanbanAssignee {
+    name: string;
+    initials?: string;
+    avatarUrl?: string;
+}
+export interface KanbanCard {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    tags?: string[];
+    assignee?: KanbanAssignee;
+    priority?: KanbanPriority;
+}
+export interface KanbanColumn {
+    id: string;
+    title: React.ReactNode;
+    /** Tailwind text-color class for the column accent dot. */
+    accentClassName?: string;
+    cards: KanbanCard[];
+}
+export interface KanbanBoardProps {
+    columns: KanbanColumn[];
+    onCardMove?: (move: {
+        cardId: string;
+        fromColumnId: string;
+        toColumnId: string;
+        newIndex: number;
+    }) => void;
+    onAddCard?: (columnId: string) => void;
+    onCardClick?: (card: KanbanCard, columnId: string) => void;
+    emptyColumnMessage?: React.ReactNode;
+    className?: string;
+}
+export declare function KanbanBoard({ columns, onCardMove, onAddCard, onCardClick, emptyColumnMessage, className, }: KanbanBoardProps): React.ReactElement;
+export declare namespace KanbanBoard {
+    var displayName: string;
+}

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

@@ -0,0 +1,101 @@
+"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.KanbanBoard = KanbanBoard;
+const React = __importStar(require("react"));
+const dnd_1 = require("@hello-pangea/dnd");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const avatar_1 = require("../ui/avatar");
+const badge_1 = require("../ui/badge");
+const button_1 = require("../ui/button");
+const Tag_1 = require("../Tag/Tag");
+const PRIORITY_STYLES = {
+    low: { dot: "bg-muted-foreground", label: "Low" },
+    medium: { dot: "bg-primary", label: "Medium" },
+    high: { dot: "bg-warning", label: "High" },
+    urgent: { dot: "bg-destructive", label: "Urgent" },
+};
+function KanbanBoard({ columns, onCardMove, onAddCard, onCardClick, emptyColumnMessage = "No cards yet.", className, }) {
+    const handleDragEnd = (result) => {
+        if (!result.destination)
+            return;
+        const { draggableId, source, destination } = result;
+        if (source.droppableId === destination.droppableId &&
+            source.index === destination.index) {
+            return;
+        }
+        onCardMove === null || onCardMove === void 0 ? void 0 : onCardMove({
+            cardId: draggableId,
+            fromColumnId: source.droppableId,
+            toColumnId: destination.droppableId,
+            newIndex: destination.index,
+        });
+    };
+    return (React.createElement(dnd_1.DragDropContext, { onDragEnd: handleDragEnd },
+        React.createElement("div", { className: (0, utils_1.cn)("flex h-full gap-3 overflow-x-auto pb-2", className) }, columns.map((column) => (React.createElement(KanbanColumnView, { key: column.id, column: column, onAddCard: onAddCard, onCardClick: onCardClick, emptyColumnMessage: emptyColumnMessage }))))));
+}
+KanbanBoard.displayName = "KanbanBoard";
+function KanbanColumnView({ column, onAddCard, onCardClick, emptyColumnMessage, }) {
+    return (React.createElement("section", { className: "flex w-72 shrink-0 flex-col rounded-lg border border-border bg-muted/30", "aria-label": typeof column.title === "string" ? column.title : "Kanban column" },
+        React.createElement("header", { className: "flex items-center gap-2 border-b border-border px-3 py-2" },
+            column.accentClassName && (React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)("inline-block h-2 w-2 rounded-full", column.accentClassName) })),
+            React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, column.title),
+            React.createElement(badge_1.Badge, { variant: "secondary", size: "sm", className: "ml-auto" }, column.cards.length)),
+        React.createElement(dnd_1.Droppable, { droppableId: column.id }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { className: (0, utils_1.cn)("flex-1 space-y-2 overflow-y-auto p-2 transition-colors", snapshot.isDraggingOver && "bg-accent/40") }),
+            column.cards.length === 0 && !snapshot.isDraggingOver && (React.createElement("p", { className: "px-2 py-4 text-center text-xs text-muted-foreground" }, emptyColumnMessage)),
+            column.cards.map((card, index) => (React.createElement(dnd_1.Draggable, { key: card.id, draggableId: card.id, index: index }, (draggableProvided, draggableSnapshot) => (React.createElement("div", Object.assign({ ref: draggableProvided.innerRef }, draggableProvided.draggableProps, draggableProvided.dragHandleProps, { onClick: () => onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(card, column.id), className: (0, utils_1.cn)("cursor-grab rounded-md border border-border bg-card p-3 text-card-foreground shadow-sm transition-shadow", draggableSnapshot.isDragging &&
+                    "cursor-grabbing rotate-1 shadow-lg", onCardClick && "hover:border-primary/40") }),
+                React.createElement(KanbanCardView, { card: card })))))),
+            provided.placeholder))),
+        onAddCard && (React.createElement("footer", { className: "border-t border-border p-2" },
+            React.createElement(button_1.Button, { variant: "ghost", size: "sm", leftIcon: React.createElement(lucide_react_1.Plus, null), onClick: () => onAddCard(column.id), className: "w-full justify-start text-muted-foreground" }, "Add card")))));
+}
+function KanbanCardView({ card }) {
+    var _a, _b, _c;
+    const priority = card.priority ? PRIORITY_STYLES[card.priority] : null;
+    const initials = (_b = (_a = card.assignee) === null || _a === void 0 ? void 0 : _a.initials) !== null && _b !== void 0 ? _b : (_c = card.assignee) === null || _c === void 0 ? void 0 : _c.name.split(/\s+/).map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+    return (React.createElement("div", { className: "space-y-2 text-sm" },
+        React.createElement("div", { className: "flex items-start gap-2" },
+            priority && (React.createElement("span", { "aria-label": `Priority: ${priority.label}`, title: priority.label, className: (0, utils_1.cn)("mt-1.5 h-2 w-2 shrink-0 rounded-full", priority.dot) })),
+            React.createElement("p", { className: "font-medium text-foreground" }, card.title)),
+        card.description && (React.createElement("p", { className: "text-xs text-muted-foreground" }, card.description)),
+        card.tags && card.tags.length > 0 && (React.createElement("div", { className: "flex flex-wrap gap-1" }, card.tags.map((tag) => (React.createElement(Tag_1.Tag, { key: tag, label: tag, size: "sm", variant: "secondary" }))))),
+        card.assignee && (React.createElement("div", { className: "flex items-center gap-1.5 pt-1" },
+            React.createElement(avatar_1.Avatar, { size: "xs" },
+                card.assignee.avatarUrl && (React.createElement(avatar_1.AvatarImage, { src: card.assignee.avatarUrl, alt: card.assignee.name })),
+                React.createElement(avatar_1.AvatarFallback, null, initials !== null && initials !== void 0 ? initials : "?")),
+            React.createElement("span", { className: "text-xs text-muted-foreground" }, card.assignee.name)))));
+}

package/dist/components-v2/Layout/AppLayout.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface AppLayoutProps {
+    /** Pass a `<Sidebar>` element. The sidebar manages its own width. */
+    sidebar?: React.ReactNode;
+    /** Pass a `<NavigationBar>` element. */
+    navbar?: React.ReactNode;
+    children: React.ReactNode;
+    sidebarPosition?: "left" | "right";
+    className?: string;
+    /** Class applied to the scrolling `<main>` content area. */
+    mainClassName?: string;
+}
+/**
+ * Pure CSS layout shell — no JS dimension calculations. Sidebar handles its
+ * own width via Tailwind classes; the main column uses `flex-1 min-w-0` to
+ * absorb the remaining horizontal space. The `<main>` element owns the
+ * vertical scroll so the navbar stays sticky at the top.
+ */
+export declare function AppLayout({ sidebar, navbar, children, sidebarPosition, className, mainClassName, }: AppLayoutProps): React.ReactElement;
+export declare namespace AppLayout {
+    var displayName: string;
+}

package/dist/components-v2/Layout/AppLayout.js

@@ -0,0 +1,53 @@
+"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.AppLayout = AppLayout;
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+/**
+ * Pure CSS layout shell — no JS dimension calculations. Sidebar handles its
+ * own width via Tailwind classes; the main column uses `flex-1 min-w-0` to
+ * absorb the remaining horizontal space. The `<main>` element owns the
+ * vertical scroll so the navbar stays sticky at the top.
+ */
+function AppLayout({ sidebar, navbar, children, sidebarPosition = "left", className, mainClassName, }) {
+    return (React.createElement("div", { className: (0, utils_1.cn)("flex h-screen overflow-hidden bg-background text-foreground", className) },
+        sidebar && sidebarPosition === "left" && sidebar,
+        React.createElement("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden" },
+            navbar,
+            React.createElement("main", { className: (0, utils_1.cn)("flex-1 overflow-y-auto", mainClassName) }, children)),
+        sidebar && sidebarPosition === "right" && sidebar));
+}
+AppLayout.displayName = "AppLayout";

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type SkeletonProps } from "../ui/skeleton";
+import { type SpinnerSize } from "../ui/spinner";
+export type LoadingVariant = "spinner" | "overlay" | "skeleton";
+export interface LoadingProps {
+    variant?: LoadingVariant;
+    /** When false, renders nothing — convenient for `<Loading isLoading={state} />`. */
+    isLoading?: boolean;
+    /** Optional caption shown beneath the spinner (spinner + overlay variants). */
+    text?: React.ReactNode;
+    size?: SpinnerSize;
+    className?: string;
+    /** Forwarded to Skeleton when variant === 'skeleton'. */
+    skeletonProps?: SkeletonProps;
+}
+export declare function Loading({ variant, isLoading, text, size, className, skeletonProps, }: LoadingProps): React.ReactElement | null;
+export declare namespace Loading {
+    var displayName: string;
+}

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

@@ -0,0 +1,55 @@
+"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.Loading = Loading;
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+const skeleton_1 = require("../ui/skeleton");
+const spinner_1 = require("../ui/spinner");
+function Loading({ variant = "spinner", isLoading = true, text, size = "md", className, skeletonProps, }) {
+    if (!isLoading)
+        return null;
+    if (variant === "skeleton") {
+        return React.createElement(skeleton_1.Skeleton, Object.assign({}, skeletonProps, { className: (0, utils_1.cn)(skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.className, className) }));
+    }
+    const body = (React.createElement("div", { className: "flex flex-col items-center gap-2", "aria-live": "polite" },
+        React.createElement(spinner_1.Spinner, { size: size }),
+        text && (React.createElement("span", { className: "text-sm text-muted-foreground" }, text))));
+    if (variant === "overlay") {
+        return (React.createElement("div", { role: "status", "aria-busy": "true", className: (0, utils_1.cn)("fixed inset-0 z-50 flex items-center justify-center", "bg-background/70 backdrop-blur-sm", className) }, body));
+    }
+    return (React.createElement("div", { role: "status", "aria-busy": "true", className: (0, utils_1.cn)("flex items-center justify-center p-4", className) }, body));
+}
+Loading.displayName = "Loading";

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

@@ -0,0 +1,30 @@
+/**
+ * @deprecated Use `Dialog` from `pixelize-design-library` directly. `Modal` is
+ * a thin compatibility shim that maps the old prop names (`isOpen` / `onClose`)
+ * onto Radix Dialog's `open` / `onOpenChange`. New code should import:
+ *
+ *   import { Dialog, DialogContent, ... } from "pixelize-design-library";
+ */
+import * as React from "react";
+import { DialogFooter, DialogHeader, type DialogContentProps } from "../ui/dialog";
+export interface ModalProps extends Omit<DialogContentProps, "children"> {
+    isOpen: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+}
+export declare function Modal({ isOpen, onClose, children, ...contentProps }: ModalProps): React.ReactElement;
+export declare namespace Modal {
+    var displayName: string;
+}
+/** @deprecated Use `DialogHeader`. */
+export declare const ModalHeader: typeof DialogHeader;
+/** @deprecated Use `DialogTitle`. */
+export declare const ModalTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/** @deprecated Use `DialogDescription`. */
+export declare const ModalDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/** Body is just a passthrough — Dialog has no dedicated Body. */
+export declare const ModalBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+/** @deprecated Use `DialogFooter`. */
+export declare const ModalFooter: typeof DialogFooter;
+/** @deprecated Use `DialogClose`. */
+export declare const ModalClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,82 @@
+"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.ModalClose = exports.ModalFooter = exports.ModalBody = exports.ModalDescription = exports.ModalTitle = exports.ModalHeader = void 0;
+exports.Modal = Modal;
+/**
+ * @deprecated Use `Dialog` from `pixelize-design-library` directly. `Modal` is
+ * a thin compatibility shim that maps the old prop names (`isOpen` / `onClose`)
+ * onto Radix Dialog's `open` / `onOpenChange`. New code should import:
+ *
+ *   import { Dialog, DialogContent, ... } from "pixelize-design-library";
+ */
+const React = __importStar(require("react"));
+const dialog_1 = require("../ui/dialog");
+function Modal(_a) {
+    var { isOpen, onClose, children } = _a, contentProps = __rest(_a, ["isOpen", "onClose", "children"]);
+    return (React.createElement(dialog_1.Dialog, { open: isOpen, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        } },
+        React.createElement(dialog_1.DialogContent, Object.assign({}, contentProps), children)));
+}
+Modal.displayName = "Modal";
+/** @deprecated Use `DialogHeader`. */
+exports.ModalHeader = dialog_1.DialogHeader;
+/** @deprecated Use `DialogTitle`. */
+exports.ModalTitle = dialog_1.DialogTitle;
+/** @deprecated Use `DialogDescription`. */
+exports.ModalDescription = dialog_1.DialogDescription;
+/** Body is just a passthrough — Dialog has no dedicated Body. */
+const ModalBody = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return React.createElement("div", Object.assign({ className: className }, rest));
+};
+exports.ModalBody = ModalBody;
+/** @deprecated Use `DialogFooter`. */
+exports.ModalFooter = dialog_1.DialogFooter;
+/** @deprecated Use `DialogClose`. */
+exports.ModalClose = dialog_1.DialogClose;

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { type BreadcrumbItem } from "../Breadcrumbs/Breadcrumbs";
+export interface NavigationUser {
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+    initials?: string;
+}
+export interface UserMenuItem {
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    separator?: boolean;
+    variant?: "default" | "destructive";
+}
+export interface GlobalSearchConfig {
+    placeholder?: string;
+    onSearch?: (query: string) => void;
+    /** Visual-only hint (e.g. "⌘K"). Consumers wire their own keybind. */
+    shortcut?: string;
+}
+export interface NavigationBarProps {
+    logo?: string;
+    appName?: string;
+    onSidebarToggle?: () => void;
+    sidebarOpen?: boolean;
+    breadcrumb?: BreadcrumbItem[];
+    pageTitle?: React.ReactNode;
+    backAction?: {
+        label?: string;
+        onClick: () => void;
+    };
+    actions?: React.ReactNode;
+    user?: NavigationUser;
+    userMenuItems?: UserMenuItem[];
+    onLogout?: () => void;
+    logoutLabel?: string;
+    notificationCount?: number;
+    notificationIcon?: LucideIcon;
+    onNotificationClick?: () => void;
+    globalSearch?: GlobalSearchConfig;
+    showThemeSwitcher?: boolean;
+    className?: string;
+}
+export declare function NavigationBar({ logo, appName, onSidebarToggle, sidebarOpen, breadcrumb, pageTitle, backAction, actions, user, userMenuItems, onLogout, logoutLabel, notificationCount, notificationIcon, onNotificationClick, globalSearch, showThemeSwitcher, className, }: NavigationBarProps): React.ReactElement;