pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/components-v2/DatePicker/utils.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.endOfMonth = exports.startOfMonth = exports.startOfDay = exports.isSameMonth = exports.isSameDay = exports.isBefore = exports.isAfter = exports.addYears = exports.addMonths = exports.addDays = exports.DEFAULT_TIME_FORMAT = exports.DEFAULT_DATETIME_FORMAT = exports.DEFAULT_DATE_FORMAT = void 0;
+exports.formatDate = formatDate;
+exports.tryParseDate = tryParseDate;
+exports.buildMonthGrid = buildMonthGrid;
+exports.getWeekdayHeaders = getWeekdayHeaders;
+exports.isDateDisabled = isDateDisabled;
+exports.inferTypeFromFormat = inferTypeFromFormat;
+const date_fns_1 = require("date-fns");
+Object.defineProperty(exports, "addDays", { enumerable: true, get: function () { return date_fns_1.addDays; } });
+Object.defineProperty(exports, "addMonths", { enumerable: true, get: function () { return date_fns_1.addMonths; } });
+Object.defineProperty(exports, "addYears", { enumerable: true, get: function () { return date_fns_1.addYears; } });
+Object.defineProperty(exports, "endOfMonth", { enumerable: true, get: function () { return date_fns_1.endOfMonth; } });
+Object.defineProperty(exports, "isAfter", { enumerable: true, get: function () { return date_fns_1.isAfter; } });
+Object.defineProperty(exports, "isBefore", { enumerable: true, get: function () { return date_fns_1.isBefore; } });
+Object.defineProperty(exports, "isSameDay", { enumerable: true, get: function () { return date_fns_1.isSameDay; } });
+Object.defineProperty(exports, "isSameMonth", { enumerable: true, get: function () { return date_fns_1.isSameMonth; } });
+Object.defineProperty(exports, "startOfDay", { enumerable: true, get: function () { return date_fns_1.startOfDay; } });
+Object.defineProperty(exports, "startOfMonth", { enumerable: true, get: function () { return date_fns_1.startOfMonth; } });
+exports.DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
+exports.DEFAULT_DATETIME_FORMAT = "dd/MM/yyyy HH:mm";
+exports.DEFAULT_TIME_FORMAT = "HH:mm";
+function formatDate(date, pattern) {
+    if (!date)
+        return "";
+    try {
+        return (0, date_fns_1.format)(date, pattern);
+    }
+    catch (_a) {
+        return "";
+    }
+}
+function tryParseDate(text, pattern, referenceDate = new Date()) {
+    if (!text)
+        return null;
+    try {
+        const parsed = (0, date_fns_1.parse)(text, pattern, referenceDate);
+        if (Number.isNaN(parsed.getTime()))
+            return null;
+        return parsed;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * Returns the 6×7 grid for a given month, filled with leading/trailing days
+ * from the adjacent months so the grid is always rectangular.
+ */
+function buildMonthGrid(referenceDate, weekStartsOn) {
+    const firstOfMonth = (0, date_fns_1.startOfMonth)(referenceDate);
+    const lastOfMonth = (0, date_fns_1.endOfMonth)(referenceDate);
+    const gridStart = (0, date_fns_1.startOfWeek)(firstOfMonth, { weekStartsOn });
+    const gridEnd = (0, date_fns_1.endOfWeek)(lastOfMonth, { weekStartsOn });
+    const today = (0, date_fns_1.startOfDay)(new Date());
+    const cells = [];
+    let cursor = gridStart;
+    while (!(0, date_fns_1.isAfter)(cursor, gridEnd)) {
+        cells.push({
+            date: cursor,
+            inCurrentMonth: (0, date_fns_1.isSameMonth)(cursor, referenceDate),
+            isToday: (0, date_fns_1.isSameDay)(cursor, today),
+        });
+        cursor = (0, date_fns_1.addDays)(cursor, 1);
+    }
+    while (cells.length < 42) {
+        cells.push({
+            date: cursor,
+            inCurrentMonth: false,
+            isToday: (0, date_fns_1.isSameDay)(cursor, today),
+        });
+        cursor = (0, date_fns_1.addDays)(cursor, 1);
+    }
+    return cells;
+}
+function getWeekdayHeaders(weekStartsOn, locale = undefined) {
+    const SUNDAY = new Date(Date.UTC(1970, 0, 4));
+    const labels = [];
+    for (let i = 0; i < 7; i++) {
+        const day = (0, date_fns_1.addDays)(SUNDAY, (i + weekStartsOn) % 7);
+        labels.push(new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day));
+    }
+    return labels;
+}
+function isDateDisabled(date, constraints) {
+    const { minDate, maxDate, disabledDates, disabledDaysOfWeek } = constraints;
+    if (minDate && (0, date_fns_1.isBefore)(date, (0, date_fns_1.startOfDay)(minDate)))
+        return true;
+    if (maxDate && (0, date_fns_1.isAfter)(date, (0, date_fns_1.startOfDay)(maxDate)))
+        return true;
+    if (disabledDaysOfWeek &&
+        disabledDaysOfWeek.includes(date.getDay())) {
+        return true;
+    }
+    if (disabledDates && disabledDates.some((d) => (0, date_fns_1.isSameDay)(d, date))) {
+        return true;
+    }
+    return false;
+}
+function inferTypeFromFormat(pattern) {
+    const hasTime = /[hHm]/.test(pattern);
+    const hasDate = /[yMdD]/.test(pattern);
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+}

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+export declare const Drawer: React.FC<DialogPrimitive.DialogProps>;
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const contentVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof contentVariants> {
+    hideCloseButton?: boolean;
+}
+export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare function DrawerHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace DrawerHeader {
+    var displayName: string;
+}
+export declare function DrawerFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace DrawerFooter {
+    var displayName: string;
+}
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export {};

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

@@ -0,0 +1,132 @@
+"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.DrawerDescription = exports.DrawerTitle = exports.DrawerContent = exports.DrawerOverlay = exports.DrawerClose = exports.DrawerPortal = exports.DrawerTrigger = exports.Drawer = void 0;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerFooter = DrawerFooter;
+const React = __importStar(require("react"));
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const lucide_react_1 = require("lucide-react");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../lib/utils");
+exports.Drawer = DialogPrimitive.Root;
+exports.DrawerTrigger = DialogPrimitive.Trigger;
+exports.DrawerPortal = DialogPrimitive.Portal;
+exports.DrawerClose = DialogPrimitive.Close;
+exports.DrawerOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, rest)));
+});
+exports.DrawerOverlay.displayName = "DrawerOverlay";
+const contentVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("fixed z-50 flex flex-col gap-4 border border-border bg-card text-card-foreground p-6 shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out"), {
+    variants: {
+        side: {
+            left: (0, utils_1.cn)("inset-y-0 left-0 h-full border-l-0 border-y-0", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"),
+            right: (0, utils_1.cn)("inset-y-0 right-0 h-full border-r-0 border-y-0", "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"),
+            top: (0, utils_1.cn)("inset-x-0 top-0 w-full border-t-0 border-x-0", "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"),
+            bottom: (0, utils_1.cn)("inset-x-0 bottom-0 w-full border-b-0 border-x-0", "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"),
+        },
+        size: {
+            sm: "",
+            md: "",
+            lg: "",
+            full: "",
+        },
+    },
+    compoundVariants: [
+        { side: "left", size: "sm", className: "w-[20rem] max-w-[90vw]" },
+        { side: "left", size: "md", className: "w-[30rem] max-w-[90vw]" },
+        { side: "left", size: "lg", className: "w-[40rem] max-w-[90vw]" },
+        { side: "left", size: "full", className: "w-screen" },
+        { side: "right", size: "sm", className: "w-[20rem] max-w-[90vw]" },
+        { side: "right", size: "md", className: "w-[30rem] max-w-[90vw]" },
+        { side: "right", size: "lg", className: "w-[40rem] max-w-[90vw]" },
+        { side: "right", size: "full", className: "w-screen" },
+        { side: "top", size: "sm", className: "h-[20vh]" },
+        { side: "top", size: "md", className: "h-[40vh]" },
+        { side: "top", size: "lg", className: "h-[60vh]" },
+        { side: "top", size: "full", className: "h-screen" },
+        { side: "bottom", size: "sm", className: "h-[20vh]" },
+        { side: "bottom", size: "md", className: "h-[40vh]" },
+        { side: "bottom", size: "lg", className: "h-[60vh]" },
+        { side: "bottom", size: "full", className: "h-screen" },
+    ],
+    defaultVariants: {
+        side: "right",
+        size: "md",
+    },
+});
+exports.DrawerContent = React.forwardRef((_a, ref) => {
+    var { className, side, size, hideCloseButton, children } = _a, rest = __rest(_a, ["className", "side", "size", "hideCloseButton", "children"]);
+    return (React.createElement(exports.DrawerPortal, null,
+        React.createElement(exports.DrawerOverlay, null),
+        React.createElement(DialogPrimitive.Content, Object.assign({ ref: ref, className: (0, utils_1.cn)(contentVariants({ side, size }), className) }, rest),
+            children,
+            !hideCloseButton && (React.createElement(DialogPrimitive.Close, { className: (0, utils_1.cn)("absolute right-4 top-4 rounded-sm text-muted-foreground opacity-70 transition-opacity hover:opacity-100", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1") },
+                React.createElement(lucide_react_1.X, { "aria-hidden": "true", className: "h-4 w-4" }),
+                React.createElement("span", { className: "sr-only" }, "Close"))))));
+});
+exports.DrawerContent.displayName = "DrawerContent";
+function DrawerHeader(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)("flex flex-col gap-1.5 text-left", className) }, rest)));
+}
+DrawerHeader.displayName = "DrawerHeader";
+function DrawerFooter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, rest)));
+}
+DrawerFooter.displayName = "DrawerFooter";
+exports.DrawerTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Title, Object.assign({ ref: ref, className: (0, utils_1.cn)("text-lg font-semibold leading-none tracking-tight text-foreground", className) }, rest)));
+});
+exports.DrawerTitle.displayName = "DrawerTitle";
+exports.DrawerDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Description, Object.assign({ ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className) }, rest)));
+});
+exports.DrawerDescription.displayName = "DrawerDescription";

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface FeedbackFormValues {
+    rating: number;
+    comment: string;
+}
+export interface FeedbackFormLabels {
+    title?: React.ReactNode;
+    ratingLabel?: React.ReactNode;
+    commentLabel?: React.ReactNode;
+    commentPlaceholder?: string;
+    submitLabel?: string;
+    /** Per-star descriptive labels (length 5). */
+    ratingDescriptors?: [string, string, string, string, string];
+}
+export interface FeedbackFormProps {
+    onSubmit: (values: FeedbackFormValues) => void | Promise<void>;
+    isLoading?: boolean;
+    isCommentRequired?: boolean;
+    minRating?: number;
+    labels?: FeedbackFormLabels;
+    className?: string;
+}
+export declare function FeedbackForm({ onSubmit, isLoading, isCommentRequired, minRating, labels, className, }: FeedbackFormProps): React.ReactElement;
+export declare namespace FeedbackForm {
+    var displayName: string;
+}

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

@@ -0,0 +1,112 @@
+"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.FeedbackForm = FeedbackForm;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("../ui/button");
+const field_1 = require("../ui/field");
+const textarea_1 = require("../ui/textarea");
+const DEFAULT_DESCRIPTORS = [
+    "Terrible",
+    "Poor",
+    "Okay",
+    "Good",
+    "Great",
+];
+function FeedbackForm({ onSubmit, isLoading = false, isCommentRequired = false, minRating = 1, labels, className, }) {
+    var _a, _b, _c, _d, _e;
+    const ratingLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.ratingLabel) !== null && _a !== void 0 ? _a : "Your rating";
+    const commentLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.commentLabel) !== null && _b !== void 0 ? _b : "Comments";
+    const commentPlaceholder = (_c = labels === null || labels === void 0 ? void 0 : labels.commentPlaceholder) !== null && _c !== void 0 ? _c : "Tell us more (optional)";
+    const submitLabel = (_d = labels === null || labels === void 0 ? void 0 : labels.submitLabel) !== null && _d !== void 0 ? _d : "Submit feedback";
+    const descriptors = (_e = labels === null || labels === void 0 ? void 0 : labels.ratingDescriptors) !== null && _e !== void 0 ? _e : DEFAULT_DESCRIPTORS;
+    const [rating, setRating] = React.useState(0);
+    const [hover, setHover] = React.useState(null);
+    const [comment, setComment] = React.useState("");
+    const [ratingError, setRatingError] = React.useState(null);
+    const [commentError, setCommentError] = React.useState(null);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        let hasError = false;
+        if (rating < minRating) {
+            setRatingError(minRating === 1
+                ? "Please pick a rating."
+                : `Please give at least ${minRating} stars.`);
+            hasError = true;
+        }
+        else {
+            setRatingError(null);
+        }
+        if (isCommentRequired && !comment.trim()) {
+            setCommentError("Please leave a comment.");
+            hasError = true;
+        }
+        else {
+            setCommentError(null);
+        }
+        if (hasError)
+            return;
+        await onSubmit({ rating, comment });
+    };
+    const displayRating = hover !== null && hover !== void 0 ? hover : rating;
+    const descriptor = displayRating > 0 ? descriptors[displayRating - 1] : null;
+    return (React.createElement("form", { onSubmit: handleSubmit, noValidate: true, className: (0, utils_1.cn)("space-y-4", className) },
+        (labels === null || labels === void 0 ? void 0 : labels.title) && (React.createElement("h2", { className: "text-base font-semibold text-foreground" }, labels.title)),
+        React.createElement(field_1.Field, { label: ratingLabel, isRequired: true, error: !!ratingError, errorMessage: ratingError !== null && ratingError !== void 0 ? ratingError : undefined },
+            React.createElement("div", { role: "radiogroup", "aria-label": typeof ratingLabel === "string" ? ratingLabel : "Rating", className: "flex items-center gap-1", onMouseLeave: () => setHover(null) },
+                Array.from({ length: 5 }).map((_, index) => {
+                    const value = index + 1;
+                    const active = displayRating >= value;
+                    return (React.createElement("button", { key: value, type: "button", role: "radio", "aria-checked": rating === value, "aria-label": `${value} star${value === 1 ? "" : "s"} (${descriptors[index]})`, onMouseEnter: () => setHover(value), onFocus: () => setHover(value), onBlur: () => setHover(null), onClick: () => {
+                            setRating(value);
+                            setRatingError(null);
+                        }, className: "rounded-md p-1 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                        React.createElement(lucide_react_1.Star, { "aria-hidden": "true", className: (0, utils_1.cn)("h-6 w-6 transition-colors", active
+                                ? "fill-warning text-warning"
+                                : "text-muted-foreground") })));
+                }),
+                descriptor && (React.createElement("span", { className: "ml-2 text-sm text-muted-foreground" }, descriptor)))),
+        React.createElement(field_1.Field, { label: commentLabel, isRequired: isCommentRequired, error: !!commentError, errorMessage: commentError !== null && commentError !== void 0 ? commentError : undefined },
+            React.createElement(textarea_1.Textarea, { value: comment, onChange: (event) => {
+                    setComment(event.target.value);
+                    if (commentError)
+                        setCommentError(null);
+                }, placeholder: commentPlaceholder, autoResize: true, minRows: 3, maxRows: 8 })),
+        React.createElement("div", { className: "flex justify-end" },
+            React.createElement(button_1.Button, { type: "submit", isLoading: isLoading, loadingText: "Sending\u2026" }, submitLabel))));
+}
+FeedbackForm.displayName = "FeedbackForm";

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type Accept } from "react-dropzone";
+export interface FileUploaderFile {
+    file: File;
+    id: string;
+    /** Percent (0–100). When undefined the per-file bar is hidden. */
+    progress?: number;
+    error?: string;
+}
+export interface FileUploaderProps {
+    accept?: Accept;
+    multiple?: boolean;
+    maxFiles?: number;
+    /** Bytes. */
+    maxSize?: number;
+    isDisabled?: boolean;
+    /** Controlled file list (mirrors what `useFileUploader` returns). */
+    files?: FileUploaderFile[];
+    onFilesChange?: (files: FileUploaderFile[]) => void;
+    /** Pre-filled label shown above the dropzone. */
+    label?: React.ReactNode;
+    /** Pre-filled hint shown below the icon. */
+    hint?: React.ReactNode;
+    /** Forces error styling and shows this message under the zone. */
+    errorMessage?: string;
+    className?: string;
+}
+export declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,127 @@
+"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.FileUploader = void 0;
+const React = __importStar(require("react"));
+const react_dropzone_1 = require("react-dropzone");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("../ui/button");
+const progress_1 = require("../ui/progress");
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function makeId(file) {
+    return `${file.name}-${file.size}-${file.lastModified}`;
+}
+exports.FileUploader = React.forwardRef((props, ref) => {
+    const { accept, multiple = true, maxFiles, maxSize, isDisabled = false, files: controlledFiles, onFilesChange, label, hint, errorMessage, className, } = props;
+    const isControlled = controlledFiles !== undefined;
+    const [internalFiles, setInternalFiles] = React.useState([]);
+    const files = isControlled ? controlledFiles : internalFiles;
+    const setFiles = (next) => {
+        if (!isControlled)
+            setInternalFiles(next);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(next);
+    };
+    const removeFile = (id) => {
+        setFiles(files.filter((entry) => entry.id !== id));
+    };
+    const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections, } = (0, react_dropzone_1.useDropzone)({
+        accept,
+        multiple,
+        maxFiles,
+        maxSize,
+        disabled: isDisabled,
+        onDrop: (accepted) => {
+            const additions = accepted.map((file) => ({
+                id: makeId(file),
+                file,
+            }));
+            const merged = multiple
+                ? [
+                    ...files,
+                    ...additions.filter((entry) => !files.some((existing) => existing.id === entry.id)),
+                ]
+                : additions.slice(0, 1);
+            if (maxFiles) {
+                setFiles(merged.slice(0, maxFiles));
+            }
+            else {
+                setFiles(merged);
+            }
+        },
+    });
+    const hasRejections = fileRejections.length > 0;
+    const showError = !!errorMessage || hasRejections;
+    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("space-y-3", className) },
+        label && (React.createElement("div", { className: "text-sm font-medium text-foreground" }, label)),
+        React.createElement("div", Object.assign({}, getRootProps({
+            className: (0, utils_1.cn)("flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border bg-muted/30 px-4 py-8 text-center transition-colors", "hover:border-primary/60 hover:bg-accent/40", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isDragActive && "border-primary bg-primary/10", (isDragReject || showError) &&
+                "border-destructive bg-destructive/5", isDisabled && "cursor-not-allowed opacity-50"),
+        }), { role: "button", tabIndex: isDisabled ? -1 : 0, "aria-label": "Drop files or click to browse", "aria-disabled": isDisabled || undefined }),
+            React.createElement("input", Object.assign({}, getInputProps())),
+            React.createElement(lucide_react_1.UploadCloud, { "aria-hidden": "true", className: (0, utils_1.cn)("h-8 w-8 text-muted-foreground", isDragActive && "text-primary") }),
+            React.createElement("div", { className: "text-sm text-foreground" },
+                React.createElement("span", { className: "font-medium text-primary" }, "Click to upload"),
+                " ",
+                "or drag and drop"),
+            React.createElement("p", { className: "text-xs text-muted-foreground" }, hint !== null && hint !== void 0 ? hint : (maxSize
+                ? `Up to ${formatBytes(maxSize)}${maxFiles ? `, max ${maxFiles} files` : ""}`
+                : "Any file type"))),
+        showError && (React.createElement("div", { className: "flex items-start gap-1.5 text-xs text-destructive" },
+            React.createElement(lucide_react_1.AlertCircle, { "aria-hidden": "true", className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+            React.createElement("div", null,
+                errorMessage,
+                fileRejections.map(({ file, errors }) => (React.createElement("div", { key: file.name },
+                    file.name,
+                    ": ",
+                    errors.map((e) => e.message).join(", "))))))),
+        files.length > 0 && (React.createElement("ul", { role: "list", className: "space-y-2" }, files.map((entry) => (React.createElement("li", { key: entry.id, className: "flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-sm" },
+            React.createElement(lucide_react_1.File, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            React.createElement("div", { className: "min-w-0 flex-1" },
+                React.createElement("p", { className: "truncate font-medium text-foreground" }, entry.file.name),
+                React.createElement("p", { className: "text-xs text-muted-foreground" },
+                    formatBytes(entry.file.size),
+                    entry.error && (React.createElement("span", { className: "ml-2 text-destructive" }, entry.error))),
+                typeof entry.progress === "number" && (React.createElement(progress_1.Progress, { size: "sm", value: entry.progress, className: "mt-1" }))),
+            React.createElement(button_1.Button, { variant: "ghost", size: "sm", "aria-label": `Remove ${entry.file.name}`, onClick: () => removeFile(entry.id), className: "h-7 w-7 p-0" },
+                React.createElement(lucide_react_1.X, { "aria-hidden": "true" })))))))));
+});
+exports.FileUploader.displayName = "FileUploader";

package/dist/components-v2/Input/TextInput.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type InputProps } from "../ui/input";
+export type TextInputType = "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+export type TextInputSize = "sm" | "md" | "lg";
+export type TextInputVariant = "default" | "floating";
+export interface TextInputProps {
+    id?: string;
+    name?: string;
+    label?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    type?: TextInputType;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    helperText?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    isInformation?: boolean;
+    informationMessage?: React.ReactNode;
+    size?: TextInputSize;
+    width?: string;
+    maxLength?: number;
+    showCount?: boolean;
+    variant?: TextInputVariant;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    className?: string;
+    /** Hide the visual label but keep it for screen readers. */
+    hideLabel?: boolean;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export type { InputProps };