linkedunion-design-kit 1.8.6 → 1.8.8

package/dist/src/components/Accordion/accordion.js

@@ -31,7 +31,7 @@ function Accordion(_a) {
 }
 function AccordionItem(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!py-4 !border-b last:!border-b !border-gray-100", className) }, props)));
+    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!py-5 !border-b last:!border-b !border-gray-100", className) }, props)));
 }
 function AccordionTrigger(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -55,7 +55,7 @@ function AccordionTrigger(_a) {
         }
         return function () { return observer.disconnect(); };
     }, []);
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow", className) }, props, { children: [_jsx(LUIcon, { color: "dark-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className) }, props, { children: [_jsx(LUIcon, { color: "dark-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
 }
 function AccordionContent(_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);

package/dist/src/components/ImageUploader/ImageUploader.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof ImageUploader>;
 export default meta;
 type Story = StoryObj<typeof ImageUploader>;
 export declare const Default: Story;
+export declare const WithRequired: Story;
+export declare const WithPreloadedImage: Story;

package/dist/src/components/ImageUploader/ImageUploader.stories.js

@@ -1,10 +1,12 @@
 import ImageUploader from "./imageUploader";
+import { Dummy_Image } from "../../utils/constants";
 var meta = {
     title: "Components/ImageUploader",
     component: ImageUploader,
     tags: ["autodocs"],
     argTypes: {
         onChange: { action: "changed" }, // For logging in the Storybook actions panel
+        onRemove: { action: "removed" }, // For logging removal actions
     },
 };
 export default meta;
@@ -14,5 +16,31 @@ export var Default = {
         onChange: function (previewUrl, file) {
             console.log("Selected file:", file);
         },
+        onRemove: function () {
+            console.log("Image removed");
+        },
+    },
+};
+export var WithRequired = {
+    args: {
+        value: null,
+        required: true,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+        onRemove: function () {
+            console.log("Image removed from required uploader");
+        },
+    },
+};
+export var WithPreloadedImage = {
+    args: {
+        value: Dummy_Image,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+        onRemove: function () {
+            console.log("Preloaded image removed");
+        },
     },
 };

package/dist/src/components/ImageUploader/imageUploader.d.ts

@@ -1,3 +1,3 @@
 import { ImageUploaderProps } from "../ImageUploader/type";
-declare const ImageUploader: ({ value, onChange, required, className, maxFileSizeMB, acceptedTypes, }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageUploader: ({ value, onChange, onRemove, required, className, maxFileSizeMB, acceptedTypes, }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageUploader;

package/dist/src/components/ImageUploader/imageUploader.js

@@ -19,7 +19,7 @@ import LuImage from "../Images/LuImage";
 import { Body } from "../Typography/Body/body";
 import { Button } from "../Button/Button";
 var ImageUploader = function (_a) {
-    var value = _a.value, onChange = _a.onChange, required = _a.required, className = _a.className, _b = _a.maxFileSizeMB, maxFileSizeMB = _b === void 0 ? 6 : _b, _c = _a.acceptedTypes, acceptedTypes = _c === void 0 ? ["image/png", "image/jpeg", "image/jpg", "image/svg+xml"] : _c;
+    var value = _a.value, onChange = _a.onChange, onRemove = _a.onRemove, required = _a.required, className = _a.className, _b = _a.maxFileSizeMB, maxFileSizeMB = _b === void 0 ? 6 : _b, _c = _a.acceptedTypes, acceptedTypes = _c === void 0 ? ["image/png", "image/jpeg", "image/jpg", "image/svg+xml"] : _c;
     var _d = useState(null), preview = _d[0], setPreview = _d[1];
     var _e = useState(""), fileError = _e[0], setFileError = _e[1];
     useEffect(function () {
@@ -55,6 +55,10 @@ var ImageUploader = function (_a) {
         setPreview(null);
         setFileError("");
         onChange(null, null);
+        // If onRemove prop is provided, call it after internal cleanup
+        if (onRemove) {
+            onRemove();
+        }
     };
     var _f = useDropzone({
         onDrop: onDrop,

package/dist/src/components/ImageUploader/type.d.ts

@@ -1,6 +1,7 @@
 export interface ImageUploaderProps {
     value: string | File | null;
     onChange: (previewUrl: string | null, file: File | null) => void;
+    onRemove?: () => void;
     required?: boolean;
     className?: string;
     maxFileSizeMB?: number;

package/dist/src/components/Tabs/tabs.js

@@ -26,7 +26,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "../../lib/utils";
 function Tabs(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(TabsPrimitive.Root, __assign({ "data-slot": "tabs", className: cn("flex flex-col gap-2", className) }, props)));
+    return (_jsx(TabsPrimitive.Root, __assign({ "data-slot": "tabs", className: cn("flex flex-col gap-6", className) }, props)));
 }
 function TabsList(_a) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/dist/src/components/ui/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/components/ui/accordion.js

@@ -0,0 +1,64 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+function Accordion(_a) {
+    var props = __rest(_a, []);
+    return _jsx(AccordionPrimitive.Root, __assign({ "data-slot": "accordion" }, props));
+}
+function AccordionItem(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(AccordionPrimitive.Item, __assign({ "data-slot": "accordion-item", className: cn("!py-5 !border-b last:!border-b !border-gray-100", className) }, props)));
+}
+function AccordionTrigger(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var ref = React.useRef(null);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    React.useEffect(function () {
+        var updateOpenState = function () {
+            if (ref.current) {
+                var state = ref.current.getAttribute("data-state");
+                setIsOpen(state === "open");
+            }
+        };
+        updateOpenState();
+        // Create a mutation observer to watch for attribute changes
+        var observer = new MutationObserver(updateOpenState);
+        if (ref.current) {
+            observer.observe(ref.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+            });
+        }
+        return function () { return observer.disconnect(); };
+    }, []);
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, __assign({ ref: ref, "data-slot": "accordion-trigger", className: cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className) }, props, { children: [_jsx(LUIcon, { color: "dark-gray", icon: isOpen ? "minus" : "plus", size: "md", className: "pointer-events-none shrink-0" }), children] })) }));
+}
+function AccordionContent(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsx(AccordionPrimitive.Content, __assign({ "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down !overflow-visible !text-sm !py-2" }, props, { children: _jsx("div", { className: cn(className), children: children }) })));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/components/ui/caption.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type CaptionVariant = "sm" | "md" | "lg";
+type CaptionProps = React.HTMLAttributes<HTMLTableCaptionElement> & {
+    variant?: CaptionVariant;
+};
+export declare const variantClasses: Record<CaptionVariant, string>;
+declare function Caption({ className, children, variant, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export { Caption };

package/dist/src/components/ui/caption.js

@@ -0,0 +1,34 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+export var variantClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+};
+function Caption(_a) {
+    var className = _a.className, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "variant"]);
+    return (_jsx("p", __assign({ className: cn("!font-normal !leading-normal m-0 inline", variantClasses[variant], className) }, props, { children: children })));
+}
+export { Caption };

package/dist/src/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/src/components/ui/checkbox.js

@@ -0,0 +1,31 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+function Checkbox(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(CheckboxPrimitive.Root, __assign({ "data-slot": "checkbox", className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-blue-600 data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-blue-600 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4.5 shrink-0 !rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) })));
+}
+export { Checkbox };

package/dist/src/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/src/components/ui/input.js

@@ -0,0 +1,29 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function Input(_a) {
+    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
+    return (_jsx("input", __assign({ type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground rounded selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 border bg-transparent !px-3 !py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:shadow-outline-primary focus-visible:outline-none", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
+}
+export { Input };

package/dist/src/components/ui/switch.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { type VariantProps } from "class-variance-authority";
+export declare const size: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const variant: {
+    default: string;
+    primary: string;
+    success: string;
+    danger: string;
+};
+declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "default" | "primary" | "success" | "danger" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
+}
+declare function Switch({ className, size, variant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/src/components/ui/switch.js

@@ -0,0 +1,70 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+export var size = {
+    sm: "h-4 w-6",
+    md: "w-12 h-6", // default
+    lg: "h-6 w-14",
+};
+export var variant = {
+    default: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    primary: "data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
+    success: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-input focus-visible:ring-green-500",
+    danger: "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-input focus-visible:ring-red-500",
+};
+var switchVariants = cva("peer inline-flex shrink-0 items-center !rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        size: size,
+        variant: variant,
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "default",
+    },
+});
+var thumbVariants = cva("pointer-events-none block !rounded-full ring-0 transition-transform", {
+    variants: {
+        size: {
+            sm: "size-3",
+            md: "size-4", // default
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+// Define translate distance for each size
+var thumbTranslateVariants = {
+    sm: "data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-2",
+    md: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-7",
+    lg: "data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-8",
+};
+function Switch(_a) {
+    var className = _a.className, size = _a.size, variant = _a.variant, props = __rest(_a, ["className", "size", "variant"]);
+    return (_jsx(SwitchPrimitive.Root, __assign({ "data-slot": "switch", className: cn(switchVariants({ size: size, variant: variant }), className) }, props, { children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(thumbVariants({ size: size }), size ? thumbTranslateVariants[size] : "", "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground") }) })));
+}
+export { Switch };

package/dist/styles/global.css

@@ -1168,8 +1168,8 @@
   .\!py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5) !important;
   }
-  .\!py-4 {
-    padding-block: calc(var(--spacing) * 4) !important;
+  .\!py-5 {
+    padding-block: calc(var(--spacing) * 5) !important;
   }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "private": false,
   "files": [
     "dist",