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

package/dist/components-v2/ui/button.js

@@ -0,0 +1,97 @@
+"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.buttonVariants = exports.Button = void 0;
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../lib/utils");
+const spinner_1 = require("./spinner");
+const buttonVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium", "transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0"), {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            sm: "h-8 px-3 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
+            md: "h-9 px-4 text-sm [&_svg]:h-4 [&_svg]:w-4",
+            lg: "h-10 px-5 text-base [&_svg]:h-5 [&_svg]:w-5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+    },
+});
+exports.buttonVariants = buttonVariants;
+exports.Button = React.forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false, isLoading = false, loadingText, leftIcon, rightIcon, disabled, type = "button", children } = _a, rest = __rest(_a, ["className", "variant", "size", "asChild", "isLoading", "loadingText", "leftIcon", "rightIcon", "disabled", "type", "children"]);
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    const isDisabled = disabled || isLoading;
+    const spinnerSize = size === "lg" ? "md" : "sm";
+    const content = isLoading ? (loadingText ? (React.createElement(React.Fragment, null,
+        React.createElement(spinner_1.Spinner, { size: spinnerSize, "aria-hidden": "true" }),
+        React.createElement("span", null, loadingText))) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "invisible inline-flex items-center gap-2" },
+            leftIcon,
+            children,
+            rightIcon),
+        React.createElement("span", { className: "absolute inset-0 inline-flex items-center justify-center" },
+            React.createElement(spinner_1.Spinner, { size: spinnerSize }))))) : (React.createElement(React.Fragment, null,
+        leftIcon,
+        children,
+        rightIcon));
+    if (asChild) {
+        return (React.createElement(Comp, Object.assign({ ref: ref, className: (0, utils_1.cn)(buttonVariants({ variant, size }), className), "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined }, rest), children));
+    }
+    return (React.createElement("button", Object.assign({ ref: ref, type: type, disabled: isDisabled, "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "data-loading": isLoading || undefined, className: (0, utils_1.cn)(buttonVariants({ variant, size }), className) }, rest), content));
+});
+exports.Button.displayName = "Button";

package/dist/components-v2/ui/checkbox.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { type VariantProps } from "class-variance-authority";
+declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "size">, VariantProps<typeof checkboxVariants> {
+    /** Visual variant — 'card' renders the checkbox inside a clickable card. */
+    variant?: "default" | "card";
+    /** Renders next to the checkbox; only used by the 'card' variant. */
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { checkboxVariants };

package/dist/components-v2/ui/checkbox.js

@@ -0,0 +1,86 @@
+"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.checkboxVariants = exports.Checkbox = void 0;
+const React = __importStar(require("react"));
+const CheckboxPrimitive = __importStar(require("@radix-ui/react-checkbox"));
+const lucide_react_1 = require("lucide-react");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../lib/utils");
+const form_field_1 = require("./form-field");
+const checkboxVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("peer shrink-0 rounded border border-input bg-background transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary", "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary", "aria-[invalid=true]:border-destructive"), {
+    variants: {
+        size: {
+            sm: "h-3.5 w-3.5",
+            md: "h-4 w-4",
+            lg: "h-5 w-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+exports.checkboxVariants = checkboxVariants;
+const indicatorIconSize = {
+    sm: "h-2.5 w-2.5",
+    md: "h-3 w-3",
+    lg: "h-3.5 w-3.5",
+};
+exports.Checkbox = React.forwardRef((_a, ref) => {
+    var { className, size, variant = "default", id: idProp, label, description } = _a, rest = __rest(_a, ["className", "size", "variant", "id", "label", "description"]);
+    const field = (0, form_field_1.useFormField)();
+    const id = idProp !== null && idProp !== void 0 ? idProp : (field.id || undefined);
+    const indicator = (React.createElement(CheckboxPrimitive.Indicator, { className: (0, utils_1.cn)("flex items-center justify-center text-current") }, rest.checked === "indeterminate" ? (React.createElement(lucide_react_1.Minus, { "aria-hidden": "true", className: (0, utils_1.cn)(indicatorIconSize[size !== null && size !== void 0 ? size : "md"]) })) : (React.createElement(lucide_react_1.Check, { "aria-hidden": "true", className: (0, utils_1.cn)(indicatorIconSize[size !== null && size !== void 0 ? size : "md"], "transition-transform data-[state=checked]:scale-100 motion-safe:scale-90") }))));
+    const root = (React.createElement(CheckboxPrimitive.Root, Object.assign({ ref: ref, id: id, "aria-invalid": field.hasError || undefined, className: (0, utils_1.cn)(checkboxVariants({ size }), className) }, rest), indicator));
+    if (variant === "default")
+        return root;
+    return (React.createElement("label", { htmlFor: id, className: (0, utils_1.cn)("group flex cursor-pointer items-start gap-3 rounded-md border border-input bg-background p-3 text-sm transition-colors", "hover:bg-accent/40", "has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1") },
+        root,
+        (label || description) && (React.createElement("span", { className: "flex flex-col gap-0.5" },
+            label && (React.createElement("span", { className: "font-medium text-foreground" }, label)),
+            description && (React.createElement("span", { className: "text-xs text-muted-foreground" }, description))))));
+});
+exports.Checkbox.displayName = "Checkbox";

package/dist/components-v2/ui/dialog.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+export declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const contentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    scrollBehavior?: "inside" | "outside" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof contentVariants> {
+    /** Hides children behind a centered spinner while truthy. */
+    isLoading?: boolean;
+    /** Hide the built-in close (X) button. */
+    hideCloseButton?: boolean;
+}
+export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogHeader({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace DialogHeader {
+    var displayName: string;
+}
+export declare function DialogFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace DialogFooter {
+    var displayName: string;
+}
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/dist/components-v2/ui/dialog.js

@@ -0,0 +1,115 @@
+"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.DialogDescription = exports.DialogTitle = exports.DialogContent = exports.DialogOverlay = exports.DialogClose = exports.DialogPortal = exports.DialogTrigger = exports.Dialog = void 0;
+exports.DialogHeader = DialogHeader;
+exports.DialogFooter = DialogFooter;
+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");
+const spinner_1 = require("./spinner");
+exports.Dialog = DialogPrimitive.Root;
+exports.DialogTrigger = DialogPrimitive.Trigger;
+exports.DialogPortal = DialogPrimitive.Portal;
+exports.DialogClose = DialogPrimitive.Close;
+exports.DialogOverlay = 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.DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const contentVariants = (0, class_variance_authority_1.cva)((0, utils_1.cn)("fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-card p-6 shadow-lg text-card-foreground rounded-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2"), {
+    variants: {
+        size: {
+            sm: "max-w-sm",
+            md: "max-w-md",
+            lg: "max-w-lg",
+            xl: "max-w-xl",
+            full: "max-w-full mx-4",
+        },
+        scrollBehavior: {
+            inside: "max-h-[85vh] overflow-hidden",
+            outside: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        scrollBehavior: "outside",
+    },
+});
+exports.DialogContent = React.forwardRef((_a, ref) => {
+    var { className, size, scrollBehavior, isLoading = false, hideCloseButton = false, children } = _a, rest = __rest(_a, ["className", "size", "scrollBehavior", "isLoading", "hideCloseButton", "children"]);
+    return (React.createElement(exports.DialogPortal, null,
+        React.createElement(exports.DialogOverlay, null),
+        React.createElement(DialogPrimitive.Content, Object.assign({ ref: ref, className: (0, utils_1.cn)(contentVariants({ size, scrollBehavior }), className) }, rest), isLoading ? (React.createElement("div", { className: "flex min-h-[8rem] items-center justify-center", "aria-live": "polite" },
+            React.createElement(spinner_1.Spinner, { size: "lg" }))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: (0, utils_1.cn)("flex flex-col gap-4", scrollBehavior === "inside" && "overflow-y-auto") }, 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", "disabled:pointer-events-none") },
+                React.createElement(lucide_react_1.X, { "aria-hidden": "true", className: "h-4 w-4" }),
+                React.createElement("span", { className: "sr-only" }, "Close"))))))));
+});
+exports.DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader(_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)));
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogFooter(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, rest)));
+}
+DialogFooter.displayName = "DialogFooter";
+exports.DialogTitle = 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.DialogTitle.displayName = DialogPrimitive.Title.displayName;
+exports.DialogDescription = 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.DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/components-v2/ui/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DropdownMenuShortcut({ className, ...rest }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export declare namespace DropdownMenuShortcut {
+    var displayName: string;
+}

package/dist/components-v2/ui/dropdown-menu.js

@@ -0,0 +1,121 @@
+"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.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+const React = __importStar(require("react"));
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+exports.DropdownMenu = DropdownMenuPrimitive.Root;
+exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+exports.DropdownMenuGroup = DropdownMenuPrimitive.Group;
+exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+exports.DropdownMenuSub = DropdownMenuPrimitive.Sub;
+exports.DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const contentBaseClasses = (0, utils_1.cn)("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2");
+const itemBaseClasses = (0, utils_1.cn)("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", "focus:bg-accent focus:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0");
+exports.DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
+    var { className, inset, children } = _a, rest = __rest(_a, ["className", "inset", "children"]);
+    return (React.createElement(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: (0, utils_1.cn)(itemBaseClasses, "data-[state=open]:bg-accent", inset && "pl-8", className) }, rest),
+        children,
+        React.createElement(lucide_react_1.ChevronRight, { "aria-hidden": "true", className: "ml-auto h-4 w-4" })));
+});
+exports.DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+exports.DropdownMenuSubContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: (0, utils_1.cn)(contentBaseClasses, className) }, rest)));
+});
+exports.DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+exports.DropdownMenuContent = React.forwardRef((_a, ref) => {
+    var { className, sideOffset = 4 } = _a, rest = __rest(_a, ["className", "sideOffset"]);
+    return (React.createElement(DropdownMenuPrimitive.Portal, null,
+        React.createElement(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)(contentBaseClasses, className) }, rest))));
+});
+exports.DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+exports.DropdownMenuItem = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, rest = __rest(_a, ["className", "inset"]);
+    return (React.createElement(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: (0, utils_1.cn)(itemBaseClasses, inset && "pl-8", className) }, rest)));
+});
+exports.DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+exports.DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
+    var { className, children, checked } = _a, rest = __rest(_a, ["className", "children", "checked"]);
+    return (React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, checked: checked, className: (0, utils_1.cn)(itemBaseClasses, "pl-8", className) }, rest),
+        React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(lucide_react_1.Check, { "aria-hidden": "true", className: "h-4 w-4" }))),
+        children));
+});
+exports.DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+exports.DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: (0, utils_1.cn)(itemBaseClasses, "pl-8", className) }, rest),
+        React.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" },
+            React.createElement(DropdownMenuPrimitive.ItemIndicator, null,
+                React.createElement(lucide_react_1.Circle, { "aria-hidden": "true", className: "h-2 w-2 fill-current" }))),
+        children));
+});
+exports.DropdownMenuRadioItem.displayName =
+    DropdownMenuPrimitive.RadioItem.displayName;
+exports.DropdownMenuLabel = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, rest = __rest(_a, ["className", "inset"]);
+    return (React.createElement(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-xs font-semibold text-muted-foreground", inset && "pl-8", className) }, rest)));
+});
+exports.DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+exports.DropdownMenuSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-border", className) }, rest)));
+});
+exports.DropdownMenuSeparator.displayName =
+    DropdownMenuPrimitive.Separator.displayName;
+function DropdownMenuShortcut(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("span", Object.assign({ className: (0, utils_1.cn)("ml-auto text-xs tracking-widest text-muted-foreground", className) }, rest)));
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

package/dist/components-v2/ui/field.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface FieldProps {
+    /** Label text. Pass JSX to compose richer labels. */
+    label?: React.ReactNode;
+    /** Marks the field as required — adds a "*" to the Label. */
+    isRequired?: boolean;
+    /** When true, shows an info-icon trigger next to the label. */
+    isInformation?: boolean;
+    /** Tooltip body for the info trigger. */
+    informationMessage?: React.ReactNode;
+    /** Helper copy shown below the field when there is no error. */
+    helperText?: React.ReactNode;
+    /** When true, applies invalid styling + announces the errorMessage. */
+    error?: boolean;
+    /** Replaces helperText when `error` is true. */
+    errorMessage?: React.ReactNode;
+    /** Override the auto-generated FormField id. */
+    id?: string;
+    /** Tailwind / CSS width applied to the wrapper. */
+    width?: string;
+    className?: string;
+    /** Renders the trailing slot used by char counters. */
+    rightAdornment?: React.ReactNode;
+    /** The control (Input, Select trigger, etc). */
+    children: React.ReactNode;
+}
+/**
+ * Composes Label + control + helper/error in a single block, wiring the
+ * FormField context so the child control picks up id + aria-describedby +
+ * aria-invalid automatically.
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components-v2/ui/field.js

@@ -0,0 +1,62 @@
+"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.Field = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+const form_field_1 = require("./form-field");
+const label_1 = require("./label");
+/**
+ * Composes Label + control + helper/error in a single block, wiring the
+ * FormField context so the child control picks up id + aria-describedby +
+ * aria-invalid automatically.
+ */
+exports.Field = React.forwardRef(({ label, isRequired, isInformation, informationMessage, helperText, error = false, errorMessage, id, width, className, rightAdornment, children, }, ref) => {
+    return (React.createElement(form_field_1.FormField, { ref: ref, id: id, hasError: error, className: (0, utils_1.cn)("flex flex-col gap-1.5", className), style: width ? { width } : undefined },
+        label && (React.createElement(label_1.Label, { required: isRequired, informationMessage: isInformation ? informationMessage : undefined }, label)),
+        children,
+        React.createElement(FieldFooter, { error: error, errorMessage: errorMessage, helperText: helperText, rightAdornment: rightAdornment })));
+});
+exports.Field.displayName = "Field";
+function FieldFooter({ error, errorMessage, helperText, rightAdornment, }) {
+    const { descriptionId, errorId } = (0, form_field_1.useFormField)();
+    const showError = error && errorMessage;
+    const showHelper = !showError && helperText;
+    if (!showError && !showHelper && !rightAdornment)
+        return null;
+    return (React.createElement("div", { className: "flex min-h-[1rem] items-start justify-between gap-2" },
+        React.createElement("div", { className: "flex-1" }, showError ? (React.createElement("p", { id: errorId || undefined, className: "text-xs text-destructive" }, errorMessage)) : showHelper ? (React.createElement("p", { id: descriptionId || undefined, className: "text-xs text-muted-foreground" }, helperText)) : null),
+        rightAdornment && (React.createElement("div", { className: "shrink-0 text-xs text-muted-foreground tabular-nums" }, rightAdornment))));
+}

package/dist/components-v2/ui/form-field.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface FormFieldContextValue {
+    id: string;
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    hasError: boolean;
+}
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Override the auto-generated id (rare; useful for label-for from outside). */
+    id?: string;
+    /** Marks the field as invalid; child input picks this up via aria-invalid. */
+    hasError?: boolean;
+}
+export declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Returns the surrounding FormField's ids + error state, or safe defaults when
+ * used outside a FormField (so primitives can be used standalone too).
+ */
+export declare function useFormField(): FormFieldContextValue;
+/**
+ * Helper for inputs to compose aria-describedby from description + error ids
+ * only when the FormField actually provides them.
+ */
+export declare function buildAriaDescribedBy(field: FormFieldContextValue, extra?: string): string | undefined;