@appcorp/shadcn 1.0.10

package/components/shadcn-io/color-picker/index.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import Color from "color";
+import { Slider } from "radix-ui";
+import { type ComponentProps, type HTMLAttributes } from "react";
+import { Button } from "../../button";
+import { SelectTrigger } from "../../select";
+interface ColorPickerContextValue {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    alpha: number;
+    mode: string;
+    setHue: (hue: number) => void;
+    setSaturation: (saturation: number) => void;
+    setLightness: (lightness: number) => void;
+    setAlpha: (alpha: number) => void;
+    setMode: (mode: string) => void;
+}
+export declare const useColorPicker: () => ColorPickerContextValue;
+export type ColorPickerProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value?: Parameters<typeof Color>[0];
+    defaultValue?: Parameters<typeof Color>[0];
+    onChange?: (value: [number, number, number, number]) => void;
+    error?: string;
+    info?: string;
+    label?: string;
+    required?: boolean;
+    id?: string;
+};
+export declare const ColorPicker: ({ value, defaultValue, onChange, className, error, info, label, required, id, ...props }: ColorPickerProps) => React.JSX.Element;
+export type ColorPickerSelectionProps = HTMLAttributes<HTMLDivElement>;
+export declare const ColorPickerSelection: React.MemoExoticComponent<({ className, ...props }: ColorPickerSelectionProps) => React.JSX.Element>;
+export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => React.JSX.Element;
+export type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;
+export declare const ColorPickerAlpha: ({ className, ...props }: ColorPickerAlphaProps) => React.JSX.Element;
+export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
+export declare const ColorPickerEyeDropper: ({ className, ...props }: ColorPickerEyeDropperProps) => React.JSX.Element;
+export type ColorPickerOutputProps = ComponentProps<typeof SelectTrigger>;
+export declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => React.JSX.Element;
+export type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+export declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => React.JSX.Element | null;
+export {};

package/components/shadcn-io/color-picker/index.js

@@ -0,0 +1,304 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerFormat = exports.ColorPickerOutput = exports.ColorPickerEyeDropper = exports.ColorPickerAlpha = exports.ColorPickerHue = exports.ColorPickerSelection = exports.ColorPicker = exports.useColorPicker = void 0;
+var react_1 = __importDefault(require("react"));
+var color_1 = __importDefault(require("color"));
+var lucide_react_1 = require("lucide-react");
+var radix_ui_1 = require("radix-ui");
+var react_2 = require("react");
+var button_1 = require("../../button");
+var input_1 = require("../../input");
+var label_1 = require("../../label");
+var select_1 = require("../../select");
+var utils_1 = require("../../../lib/utils");
+var ColorPickerContext = (0, react_2.createContext)(undefined);
+var useColorPicker = function () {
+    var context = (0, react_2.useContext)(ColorPickerContext);
+    if (!context) {
+        throw new Error("useColorPicker must be used within a ColorPickerProvider");
+    }
+    return context;
+};
+exports.useColorPicker = useColorPicker;
+var ColorPicker = function (_a) {
+    var value = _a.value, _b = _a.defaultValue, defaultValue = _b === void 0 ? "#000000" : _b, onChange = _a.onChange, className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, props = __rest(_a, ["value", "defaultValue", "onChange", "className", "error", "info", "label", "required", "id"]);
+    var selectedColor = (0, color_1.default)(value);
+    var defaultColor = (0, color_1.default)(defaultValue);
+    var _c = (0, react_2.useState)(selectedColor.hue() || defaultColor.hue() || 0), hue = _c[0], setHue = _c[1];
+    var _d = (0, react_2.useState)(selectedColor.saturationl() || defaultColor.saturationl() || 100), saturation = _d[0], setSaturation = _d[1];
+    var _e = (0, react_2.useState)(selectedColor.lightness() || defaultColor.lightness() || 50), lightness = _e[0], setLightness = _e[1];
+    var _f = (0, react_2.useState)(selectedColor.alpha() * 100 || defaultColor.alpha() * 100), alpha = _f[0], setAlpha = _f[1];
+    var _g = (0, react_2.useState)("hex"), mode = _g[0], setMode = _g[1];
+    // Determine if there's an error (for styling)
+    var hasError = Boolean(error);
+    // Update color when controlled value changes
+    (0, react_2.useEffect)(function () {
+        if (value) {
+            var color = color_1.default.rgb(value).rgb().object();
+            setHue(color.r);
+            setSaturation(color.g);
+            setLightness(color.b);
+            setAlpha(color.a);
+        }
+    }, [value]);
+    // Notify parent of changes
+    (0, react_2.useEffect)(function () {
+        if (onChange) {
+            var color = color_1.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
+            var rgba = color.rgb().array();
+            onChange([rgba[0], rgba[1], rgba[2], alpha / 100]);
+        }
+    }, [hue, saturation, lightness, alpha, onChange]);
+    var colorPickerElement = (react_1.default.createElement(ColorPickerContext.Provider, { value: {
+            hue: hue,
+            saturation: saturation,
+            lightness: lightness,
+            alpha: alpha,
+            mode: mode,
+            setHue: setHue,
+            setSaturation: setSaturation,
+            setLightness: setLightness,
+            setAlpha: setAlpha,
+            setMode: setMode,
+        } },
+        react_1.default.createElement("div", __assign({ id: id, className: (0, utils_1.cn)("flex size-full flex-col gap-4", 
+            // Error state styling
+            hasError && "border-destructive", className), "aria-invalid": hasError }, props))));
+    // If label is provided, render the complete color picker with label structure
+    if (label) {
+        return (react_1.default.createElement("div", { className: "w-full space-y-2" },
+            react_1.default.createElement(label_1.Label, { htmlFor: id, required: required }, label),
+            colorPickerElement,
+            (error || info) && (react_1.default.createElement("div", null, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+    }
+    // If no label, render just the color picker with messages (backward compatibility)
+    return (react_1.default.createElement("div", { className: "w-full" },
+        colorPickerElement,
+        (error || info) && (react_1.default.createElement("div", null, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null))));
+};
+exports.ColorPicker = ColorPicker;
+exports.ColorPickerSelection = (0, react_2.memo)(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var containerRef = (0, react_2.useRef)(null);
+    var _b = (0, react_2.useState)(false), isDragging = _b[0], setIsDragging = _b[1];
+    var _c = (0, react_2.useState)(0), positionX = _c[0], setPositionX = _c[1];
+    var _d = (0, react_2.useState)(0), positionY = _d[0], setPositionY = _d[1];
+    var _e = (0, exports.useColorPicker)(), hue = _e.hue, setSaturation = _e.setSaturation, setLightness = _e.setLightness;
+    var backgroundGradient = (0, react_2.useMemo)(function () {
+        return "linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)),\n            linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)),\n            hsl(".concat(hue, ", 100%, 50%)");
+    }, [hue]);
+    var handlePointerMove = (0, react_2.useCallback)(function (event) {
+        if (!(isDragging && containerRef.current)) {
+            return;
+        }
+        var rect = containerRef.current.getBoundingClientRect();
+        var x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        var y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        setPositionX(x);
+        setPositionY(y);
+        setSaturation(x * 100);
+        var topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x);
+        var lightness = topLightness * (1 - y);
+        setLightness(lightness);
+    }, [isDragging, setSaturation, setLightness]);
+    (0, react_2.useEffect)(function () {
+        var handlePointerUp = function () { return setIsDragging(false); };
+        if (isDragging) {
+            window.addEventListener("pointermove", handlePointerMove);
+            window.addEventListener("pointerup", handlePointerUp);
+        }
+        return function () {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+        };
+    }, [isDragging, handlePointerMove]);
+    return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("relative size-full cursor-crosshair rounded", className), onPointerDown: function (e) {
+            e.preventDefault();
+            setIsDragging(true);
+            handlePointerMove(e.nativeEvent);
+        }, ref: containerRef, style: {
+            background: backgroundGradient,
+        } }, props),
+        react_1.default.createElement("div", { className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white", style: {
+                left: "".concat(positionX * 100, "%"),
+                top: "".concat(positionY * 100, "%"),
+                boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+            } })));
+});
+exports.ColorPickerSelection.displayName = "ColorPickerSelection";
+var ColorPickerHue = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = (0, exports.useColorPicker)(), hue = _b.hue, setHue = _b.setHue;
+    return (react_1.default.createElement(radix_ui_1.Slider.Root, __assign({ className: (0, utils_1.cn)("relative flex h-4 w-full touch-none", className), max: 360, onValueChange: function (_a) {
+            var hue = _a[0];
+            return setHue(hue);
+        }, step: 1, value: [hue] }, props),
+        react_1.default.createElement(radix_ui_1.Slider.Track, { className: "relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]" },
+            react_1.default.createElement(radix_ui_1.Slider.Range, { className: "absolute h-full" })),
+        react_1.default.createElement(radix_ui_1.Slider.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })));
+};
+exports.ColorPickerHue = ColorPickerHue;
+var ColorPickerAlpha = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = (0, exports.useColorPicker)(), alpha = _b.alpha, setAlpha = _b.setAlpha;
+    return (react_1.default.createElement(radix_ui_1.Slider.Root, __assign({ className: (0, utils_1.cn)("relative flex h-4 w-full touch-none", className), max: 100, onValueChange: function (_a) {
+            var alpha = _a[0];
+            return setAlpha(alpha);
+        }, step: 1, value: [alpha] }, props),
+        react_1.default.createElement(radix_ui_1.Slider.Track, { className: "relative my-0.5 h-3 w-full grow rounded-full", style: {
+                background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
+            } },
+            react_1.default.createElement("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent to-black/50" }),
+            react_1.default.createElement(radix_ui_1.Slider.Range, { className: "absolute h-full rounded-full bg-transparent" })),
+        react_1.default.createElement(radix_ui_1.Slider.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })));
+};
+exports.ColorPickerAlpha = ColorPickerAlpha;
+var ColorPickerEyeDropper = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = (0, exports.useColorPicker)(), setHue = _b.setHue, setSaturation = _b.setSaturation, setLightness = _b.setLightness, setAlpha = _b.setAlpha;
+    var handleEyeDropper = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var eyeDropper, result, color, _a, h, s, l, error_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    eyeDropper = new EyeDropper();
+                    return [4 /*yield*/, eyeDropper.open()];
+                case 1:
+                    result = _b.sent();
+                    color = (0, color_1.default)(result.sRGBHex);
+                    _a = color.hsl().array(), h = _a[0], s = _a[1], l = _a[2];
+                    setHue(h);
+                    setSaturation(s);
+                    setLightness(l);
+                    setAlpha(100);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _b.sent();
+                    console.error("EyeDropper failed:", error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(button_1.Button, __assign({ className: (0, utils_1.cn)("shrink-0 text-muted-foreground", className), onClick: handleEyeDropper, size: "icon", variant: "outline", type: "button" }, props),
+        react_1.default.createElement(lucide_react_1.PipetteIcon, { size: 16 })));
+};
+exports.ColorPickerEyeDropper = ColorPickerEyeDropper;
+var formats = ["hex", "rgb", "css", "hsl"];
+var ColorPickerOutput = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = (0, exports.useColorPicker)(), mode = _b.mode, setMode = _b.setMode;
+    return (react_1.default.createElement(select_1.Select, { onValueChange: setMode, value: mode },
+        react_1.default.createElement(select_1.SelectTrigger, __assign({ className: (0, utils_1.cn)("h-8 w-20 shrink-0 text-xs", className) }, props),
+            react_1.default.createElement(select_1.SelectValue, { placeholder: "Mode" })),
+        react_1.default.createElement(select_1.SelectContent, null, formats.map(function (format) { return (react_1.default.createElement(select_1.SelectItem, { className: "text-xs", key: format, value: format }, format.toUpperCase())); }))));
+};
+exports.ColorPickerOutput = ColorPickerOutput;
+var PercentageInput = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement(input_1.Input, __assign({ readOnly: true, type: "text" }, props, { className: (0, utils_1.cn)("h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none", className) })),
+        react_1.default.createElement("span", { className: "-translate-y-1/2 absolute top-1/2 right-2 text-muted-foreground text-xs" }, "%")));
+};
+var ColorPickerFormat = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = (0, exports.useColorPicker)(), hue = _b.hue, saturation = _b.saturation, lightness = _b.lightness, alpha = _b.alpha, mode = _b.mode;
+    var color = color_1.default.hsl(hue, saturation, lightness, alpha / 100);
+    if (mode === "hex") {
+        var hex = color.hex();
+        return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("-space-x-px relative flex w-full items-center rounded-md shadow-sm", className) }, props),
+            react_1.default.createElement(input_1.Input, { className: "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none", readOnly: true, type: "text", value: hex }),
+            react_1.default.createElement(PercentageInput, { value: alpha })));
+    }
+    if (mode === "rgb") {
+        var rgb = color
+            .rgb()
+            .array()
+            .map(function (value) { return Math.round(value); });
+        return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("-space-x-px flex items-center rounded-md shadow-sm", className) }, props),
+            rgb.map(function (value, index) { return (react_1.default.createElement(input_1.Input, { className: (0, utils_1.cn)("h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none", index && "rounded-l-none", className), key: index, readOnly: true, type: "text", value: value })); }),
+            react_1.default.createElement(PercentageInput, { value: alpha })));
+    }
+    if (mode === "css") {
+        var rgb = color
+            .rgb()
+            .array()
+            .map(function (value) { return Math.round(value); });
+        return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("w-full rounded-md shadow-sm", className) }, props),
+            react_1.default.createElement(input_1.Input, __assign({ className: "h-8 w-full bg-secondary px-2 text-xs shadow-none", readOnly: true, type: "text", value: "rgba(".concat(rgb.join(", "), ", ").concat(alpha, "%)") }, props))));
+    }
+    if (mode === "hsl") {
+        var hsl = color
+            .hsl()
+            .array()
+            .map(function (value) { return Math.round(value); });
+        return (react_1.default.createElement("div", __assign({ className: (0, utils_1.cn)("-space-x-px flex items-center rounded-md shadow-sm", className) }, props),
+            hsl.map(function (value, index) { return (react_1.default.createElement(input_1.Input, { className: (0, utils_1.cn)("h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none", index && "rounded-l-none", className), key: index, readOnly: true, type: "text", value: value })); }),
+            react_1.default.createElement(PercentageInput, { value: alpha })));
+    }
+    return null;
+};
+exports.ColorPickerFormat = ColorPickerFormat;

package/components/shadcn-io/copy-button/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { HTMLMotionProps } from "motion/react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "muted" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type CopyButtonProps = Omit<HTMLMotionProps<"button">, "children" | "onCopy"> & VariantProps<typeof buttonVariants> & {
+    content?: string;
+    delay?: number;
+    onCopy?: (content: string) => void;
+    isCopied?: boolean;
+    onCopyChange?: (isCopied: boolean) => void;
+};
+declare function CopyButton({ content, className, size, variant, delay, onClick, onCopy, isCopied, onCopyChange, ...props }: CopyButtonProps): React.JSX.Element;
+export { CopyButton, buttonVariants, type CopyButtonProps };

package/components/shadcn-io/copy-button/index.js

@@ -0,0 +1,121 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 = void 0;
+exports.CopyButton = CopyButton;
+var React = __importStar(require("react"));
+var react_1 = require("motion/react");
+var lucide_react_1 = require("lucide-react");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("../../../lib/utils");
+var buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center cursor-pointer rounded-md transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            muted: "bg-muted text-muted-foreground",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        },
+        size: {
+            default: "size-8 rounded-lg [&_svg]:size-4",
+            sm: "size-6 [&_svg]:size-3",
+            md: "size-10 rounded-lg [&_svg]:size-5",
+            lg: "size-12 rounded-xl [&_svg]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.buttonVariants = buttonVariants;
+function CopyButton(_a) {
+    var content = _a.content, className = _a.className, size = _a.size, variant = _a.variant, _b = _a.delay, delay = _b === void 0 ? 3000 : _b, onClick = _a.onClick, onCopy = _a.onCopy, isCopied = _a.isCopied, onCopyChange = _a.onCopyChange, props = __rest(_a, ["content", "className", "size", "variant", "delay", "onClick", "onCopy", "isCopied", "onCopyChange"]);
+    var _c = React.useState(isCopied !== null && isCopied !== void 0 ? isCopied : false), localIsCopied = _c[0], setLocalIsCopied = _c[1];
+    var Icon = localIsCopied ? lucide_react_1.CheckIcon : lucide_react_1.CopyIcon;
+    React.useEffect(function () {
+        setLocalIsCopied(isCopied !== null && isCopied !== void 0 ? isCopied : false);
+    }, [isCopied]);
+    var handleIsCopied = React.useCallback(function (isCopied) {
+        setLocalIsCopied(isCopied);
+        onCopyChange === null || onCopyChange === void 0 ? void 0 : onCopyChange(isCopied);
+    }, [onCopyChange]);
+    var handleCopy = React.useCallback(function (e) {
+        if (isCopied)
+            return;
+        if (content) {
+            navigator.clipboard
+                .writeText(content)
+                .then(function () {
+                handleIsCopied(true);
+                setTimeout(function () { return handleIsCopied(false); }, delay);
+                onCopy === null || onCopy === void 0 ? void 0 : onCopy(content);
+            })
+                .catch(function (error) {
+                console.error("Error copying command", error);
+            });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [isCopied, content, delay, onClick, onCopy, handleIsCopied]);
+    return (React.createElement(react_1.motion.button, __assign({ "data-slot": "copy-button", whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, className: (0, utils_1.cn)(buttonVariants({ variant: variant, size: size }), className), onClick: handleCopy }, props),
+        React.createElement(react_1.AnimatePresence, { mode: "wait" },
+            React.createElement(react_1.motion.span, { key: localIsCopied ? "check" : "copy", "data-slot": "copy-button-icon", initial: { scale: 0 }, animate: { scale: 1 }, exit: { scale: 0 }, transition: { duration: 0.15 } },
+                React.createElement(Icon, null)))));
+}

package/components/shadcn-io/dropzone/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
+export type DropzoneProps = Omit<DropzoneOptions, "onDrop"> & {
+    src?: File[];
+    className?: string;
+    onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;
+    children?: ReactNode;
+};
+export declare const Dropzone: ({ accept, maxFiles, maxSize, minSize, onDrop, onError, disabled, src, className, children, ...props }: DropzoneProps) => React.JSX.Element;
+export type DropzoneContentProps = {
+    children?: ReactNode;
+    className?: string;
+};
+export declare const DropzoneContent: ({ children, className, }: DropzoneContentProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null;
+export type DropzoneEmptyStateProps = {
+    children?: ReactNode;
+    className?: string;
+};
+export declare const DropzoneEmptyState: ({ children, className, }: DropzoneEmptyStateProps) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null;

package/components/shadcn-io/dropzone/index.js

@@ -0,0 +1,131 @@
+"use client";
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropzoneEmptyState = exports.DropzoneContent = exports.Dropzone = void 0;
+var lucide_react_1 = require("lucide-react");
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
+var react_dropzone_1 = require("react-dropzone");
+var button_1 = require("../../button");
+var utils_1 = require("../../../lib/utils");
+var renderBytes = function (bytes) {
+    var units = ["B", "KB", "MB", "GB", "TB", "PB"];
+    var size = bytes;
+    var unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    return "".concat(size.toFixed(2)).concat(units[unitIndex]);
+};
+var DropzoneContext = (0, react_2.createContext)(undefined);
+var Dropzone = function (_a) {
+    var accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 1 : _b, maxSize = _a.maxSize, minSize = _a.minSize, onDrop = _a.onDrop, onError = _a.onError, disabled = _a.disabled, src = _a.src, className = _a.className, children = _a.children, props = __rest(_a, ["accept", "maxFiles", "maxSize", "minSize", "onDrop", "onError", "disabled", "src", "className", "children"]);
+    var _c = (0, react_dropzone_1.useDropzone)(__assign({ accept: accept, maxFiles: maxFiles, maxSize: maxSize, minSize: minSize, onError: onError, disabled: disabled, onDrop: function (acceptedFiles, fileRejections, event) {
+            var _a, _b;
+            if (fileRejections.length > 0) {
+                var message = (_b = (_a = fileRejections.at(0)) === null || _a === void 0 ? void 0 : _a.errors.at(0)) === null || _b === void 0 ? void 0 : _b.message;
+                onError === null || onError === void 0 ? void 0 : onError(new Error(message));
+                return;
+            }
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(acceptedFiles, fileRejections, event);
+        } }, props)), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, isDragActive = _c.isDragActive;
+    return (react_1.default.createElement(DropzoneContext.Provider, { key: JSON.stringify(src), value: { src: src, accept: accept, maxSize: maxSize, minSize: minSize, maxFiles: maxFiles } },
+        react_1.default.createElement(button_1.Button, __assign({ className: (0, utils_1.cn)("relative h-auto w-full flex-col overflow-hidden p-8", isDragActive && "outline-none ring-1 ring-ring", className), disabled: disabled, type: "button", variant: "outline" }, getRootProps()),
+            react_1.default.createElement("input", __assign({}, getInputProps(), { disabled: disabled })),
+            children)));
+};
+exports.Dropzone = Dropzone;
+var maxLabelItems = 3;
+var DropzoneContent = function (_a) {
+    var children = _a.children, className = _a.className;
+    // Use useContext directly here so the component is safe to render even when
+    // there is no surrounding <Dropzone /> provider (avoids an exception during
+    // SSR or when a consumer imports DropzoneContent standalone).
+    var context = (0, react_2.useContext)(DropzoneContext);
+    if (!context) {
+        return null;
+    }
+    var src = context.src;
+    if (!src) {
+        return null;
+    }
+    if (children) {
+        return children;
+    }
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("flex flex-col items-center justify-center", className) },
+        react_1.default.createElement("div", { className: "flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground" },
+            react_1.default.createElement(lucide_react_1.UploadIcon, { size: 16 })),
+        react_1.default.createElement("p", { className: "my-2 w-full truncate font-medium text-sm" }, src.length > maxLabelItems
+            ? "".concat(new Intl.ListFormat("en").format(src.slice(0, maxLabelItems).map(function (file) { return file.name; })), " and ").concat(src.length - maxLabelItems, " more")
+            : new Intl.ListFormat("en").format(src.map(function (file) { return file.name; }))),
+        react_1.default.createElement("p", { className: "w-full text-wrap text-muted-foreground text-xs" }, "Drag and drop or click to replace")));
+};
+exports.DropzoneContent = DropzoneContent;
+var DropzoneEmptyState = function (_a) {
+    var children = _a.children, className = _a.className;
+    // Read context directly and return null when a Dropzone provider isn't
+    // present. This keeps the empty state component safe to import and render
+    // without requiring the wrapping Dropzone component.
+    var context = (0, react_2.useContext)(DropzoneContext);
+    if (!context) {
+        return null;
+    }
+    var src = context.src, accept = context.accept, maxSize = context.maxSize, minSize = context.minSize, maxFiles = context.maxFiles;
+    if (src) {
+        return null;
+    }
+    if (children) {
+        return children;
+    }
+    var caption = "";
+    if (accept) {
+        caption += "Accepts ";
+        caption += new Intl.ListFormat("en").format(Object.keys(accept));
+    }
+    if (minSize && maxSize) {
+        caption += " between ".concat(renderBytes(minSize), " and ").concat(renderBytes(maxSize));
+    }
+    else if (minSize) {
+        caption += " at least ".concat(renderBytes(minSize));
+    }
+    else if (maxSize) {
+        caption += " less than ".concat(renderBytes(maxSize));
+    }
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("flex flex-col items-center justify-center", className) },
+        react_1.default.createElement("div", { className: "flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground" },
+            react_1.default.createElement(lucide_react_1.UploadIcon, { size: 16 })),
+        react_1.default.createElement("p", { className: "my-2 w-full truncate text-wrap font-medium text-sm" },
+            "Upload ",
+            maxFiles === 1 ? "a file" : "files"),
+        react_1.default.createElement("p", { className: "w-full truncate text-wrap text-muted-foreground text-xs" }, "Drag and drop or click to upload"),
+        caption && (react_1.default.createElement("p", { className: "text-wrap text-muted-foreground text-xs" },
+            caption,
+            "."))));
+};
+exports.DropzoneEmptyState = DropzoneEmptyState;