@appcorp/stellar-solutions-modules 0.1.44 → 0.1.46

package/components/ui/{dropzone-enhanced/index.d.ts → enhanced-dropzone.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 import type { DropzoneOptions } from "react-dropzone";
-export type DropzoneEnhancedProps = {
+export type EnhancedDropzoneProps = {
     id?: string;
     className?: string;
     label?: string;
@@ -18,5 +18,4 @@ export type DropzoneEnhancedProps = {
     /** Called when a provided remote URL preview is removed (if provided) */
     onRemoveUrl?: (url: string) => void;
 };
-export declare const DropzoneEnhanced: React.FC<DropzoneEnhancedProps>;
-export default DropzoneEnhanced;
+export declare const EnhancedDropzone: React.FC<EnhancedDropzoneProps>;

package/components/ui/{dropzone-enhanced/index.js → enhanced-dropzone.js}

@@ -54,15 +54,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropzoneEnhanced = void 0;
+exports.EnhancedDropzone = void 0;
 var react_1 = __importStar(require("react"));
 var react_dropzone_1 = require("react-dropzone");
 var utils_1 = require("@/lib/utils");
 var carousel_1 = require("@/components/ui/carousel");
 var button_1 = require("@/components/ui/button");
 var lucide_react_1 = require("lucide-react");
-var dropzone_1 = require("../shadcn-io/dropzone");
-var DropzoneEnhanced = function (_a) {
+var dropzone_1 = require("./shadcn-io/dropzone");
+var EnhancedDropzone = function (_a) {
     var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.initial, initial = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveUrl = _a.onRemoveUrl, className = _a.className;
     // Files selected locally (File objects)
     var _d = (0, react_1.useState)([]), files = _d[0], setFiles = _d[1];
@@ -222,5 +222,4 @@ var DropzoneEnhanced = function (_a) {
             react_1.default.createElement(dropzone_1.DropzoneEmptyState, null))),
         (error || info) && (react_1.default.createElement("div", { className: "mt-2" }, 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.DropzoneEnhanced = DropzoneEnhanced;
-exports.default = exports.DropzoneEnhanced;
+exports.EnhancedDropzone = EnhancedDropzone;

package/components/ui/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/ui/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/global-modules/payment-mode/form.js

@@ -12,89 +12,21 @@
  * - Accessibility-compliant form structure
  * - Real-time validation feedback
  */
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentModeForm = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var next_intl_1 = require("next-intl");
 var input_1 = require("../../components/ui/input");
 var switch_1 = require("../../components/ui/switch");
 var context_1 = require("./context");
-var dropzone_enhanced_1 = __importDefault(require("../../components/ui/dropzone-enhanced"));
-var images = [
-    "https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-    "https://cdn.pixabay.com/photo/2016/11/21/06/53/beautiful-natural-image-1844362_640.jpg",
-    "https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg",
-    "https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630",
-    "https://cdn.pixabay.com/photo/2024/05/26/10/15/bird-8788491_1280.jpg",
-    "https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/396e9/MainBefore.jpg",
-    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS92eisuWOx3tEjeW14mT9ACVgXDwIRBGtnww&s",
-    "https://img.freepik.com/free-photo/woman-beach-with-her-baby-enjoying-sunset_52683-144131.jpg?size=626&ext=jpg",
-];
 var PaymentModeForm = function (_a) {
     var isRTL = _a.isRTL, translationMap = _a.translationMap;
     var t = (0, next_intl_1.useTranslations)("paymentModePage");
     var ui = (0, next_intl_1.useTranslations)("ui");
     var _b = (0, context_1.usePaymentModeStateContext)(), enabled = _b.enabled, errors = _b.errors, handleInputChange = _b.handleInputChange, isDefault = _b.isDefault, label = _b.label;
-    var _c = (0, react_1.useState)(__spreadArray([], images, true)), previews = _c[0], setPreviews = _c[1];
-    var filesRef = (0, react_1.useRef)([]);
-    (0, react_1.useEffect)(function () {
-        return function () {
-            previews.forEach(function (p) {
-                try {
-                    URL.revokeObjectURL(p);
-                }
-                catch (_a) {
-                    // ignore
-                }
-            });
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     // Helper function to translate validation error keys
     var getTranslatedError = function (key) {
         if (!errors[key])
@@ -110,14 +42,6 @@ var PaymentModeForm = function (_a) {
             react_1.default.createElement("div", { className: "space-y-2" },
                 react_1.default.createElement(input_1.Input, { id: "label", type: "text", label: (translationMap === null || translationMap === void 0 ? void 0 : translationMap.formLabelLabel) || "Payment Mode Name", value: label || "", onChange: function (e) { return handleInputChange("label", e.target.value); }, placeholder: "Enter payment mode name", info: "Enter a descriptive name for this payment method", error: getTranslatedError("label"), required: true })),
             react_1.default.createElement("div", { className: "space-y-4" },
-                react_1.default.createElement("div", { className: "space-y-2" },
-                    react_1.default.createElement(dropzone_enhanced_1.default, { id: "", label: (translationMap === null || translationMap === void 0 ? void 0 : translationMap.formLabelIcon) || "Upload Images", accept: { "image/*": [] }, maxFiles: 1, initial: previews, onChange: function (files) {
-                            var previews = files.map(function (f) { return URL.createObjectURL(f); });
-                            setPreviews(previews);
-                            filesRef.current = files;
-                        }, onRemoveUrl: function (url) {
-                            setPreviews(function (p) { return p.filter(function (x) { return x !== url; }); });
-                        }, info: (translationMap === null || translationMap === void 0 ? void 0 : translationMap.formInfoIcon) || t("formInfoIcon") })),
                 react_1.default.createElement(switch_1.Switch, { id: "enabled", label: (translationMap === null || translationMap === void 0 ? void 0 : translationMap.enabled) || "Enabled", checked: enabled || false, onCheckedChange: function (checked) { return handleInputChange("enabled", checked); }, info: enabled ? ui("switch.infoEnabled") : ui("switch.infoDisabled"), error: getTranslatedError("enabled") }),
                 react_1.default.createElement(switch_1.Switch, { id: "isDefault", label: (translationMap === null || translationMap === void 0 ? void 0 : translationMap.setAsDefault) || "Set as Default", checked: isDefault || false, onCheckedChange: function (checked) {
                         return handleInputChange("isDefault", checked);

package/index.d.ts

@@ -3,12 +3,14 @@ export * from "./components/theme-switcher";
 export * from "./components/ui/badge";
 export * from "./components/ui/button";
 export * from "./components/ui/card";
+export * from "./components/ui/carousel";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/dialog";
 export * from "./components/ui/drawer";
 export * from "./components/ui/dropdown-menu";
+export * from "./components/ui/enhanced-dropzone";
 export * from "./components/ui/enhanced-table-footer-action";
 export * from "./components/ui/enhanced-table-footer-page";
 export * from "./components/ui/enhanced-table-footer-pagination";
@@ -21,6 +23,8 @@ export * from "./components/ui/label";
 export * from "./components/ui/popover";
 export * from "./components/ui/select";
 export * from "./components/ui/separator";
+export * from "./components/ui/shadcn-io/color-picker";
+export * from "./components/ui/shadcn-io/dropzone";
 export * from "./components/ui/sonner";
 export * from "./components/ui/switch";
 export * from "./components/ui/textarea";

package/index.js

@@ -19,12 +19,14 @@ __exportStar(require("./components/theme-switcher"), exports);
 __exportStar(require("./components/ui/badge"), exports);
 __exportStar(require("./components/ui/button"), exports);
 __exportStar(require("./components/ui/card"), exports);
+__exportStar(require("./components/ui/carousel"), exports);
 __exportStar(require("./components/ui/checkbox"), exports);
 __exportStar(require("./components/ui/combobox"), exports);
 __exportStar(require("./components/ui/command"), exports);
 __exportStar(require("./components/ui/dialog"), exports);
 __exportStar(require("./components/ui/drawer"), exports);
 __exportStar(require("./components/ui/dropdown-menu"), exports);
+__exportStar(require("./components/ui/enhanced-dropzone"), exports);
 __exportStar(require("./components/ui/enhanced-table-footer-action"), exports);
 __exportStar(require("./components/ui/enhanced-table-footer-page"), exports);
 __exportStar(require("./components/ui/enhanced-table-footer-pagination"), exports);
@@ -37,6 +39,8 @@ __exportStar(require("./components/ui/label"), exports);
 __exportStar(require("./components/ui/popover"), exports);
 __exportStar(require("./components/ui/select"), exports);
 __exportStar(require("./components/ui/separator"), exports);
+__exportStar(require("./components/ui/shadcn-io/color-picker"), exports);
+__exportStar(require("./components/ui/shadcn-io/dropzone"), exports);
 __exportStar(require("./components/ui/sonner"), exports);
 __exportStar(require("./components/ui/switch"), exports);
 __exportStar(require("./components/ui/textarea"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/stellar-solutions-modules",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "scripts": {
     "automate": "./automate.sh",
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",