linkedunion-design-kit 1.6.0 → 1.6.2

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorT
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
 export { Typography } from "./src/components/ui/typography";
+export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";

package/dist/index.js

@@ -12,4 +12,5 @@ export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorT
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
 export { default as ImageUploader } from "./src/components/ui/imageUploader";
 export { Typography } from "./src/components/ui/typography";
+export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";

package/dist/src/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from "./type";
-declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/src/components/Button/Button.js

@@ -1,7 +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 { jsxs as _jsxs } from "react/jsx-runtime";
 import { buttonShapes, buttonSizes, buttonColors } from "./index";
 var Button = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children;
-    return (_jsxs("button", { className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(buttonSizes[size]), onClick: onClick, children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] }));
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children, rest = __rest(_a, ["color", "startIcon", "endIcon", "onClick", "shape", "size", "className", "children"]);
+    return (_jsxs("button", __assign({ className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className || "", " ").concat(buttonSizes[size]), onClick: onClick }, rest, { children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] })));
 };
 export default Button;

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

@@ -21,6 +21,9 @@ var Template = function (args) { return _jsx(Button, __assign({}, args)); };
 export var _Button = Template.bind({});
 _Button.args = {
     children: "Button Text",
+    onClick: function () {
+        alert("Button clicked!");
+    },
 };
 _Button.argTypes = {
     color: {
@@ -53,4 +56,8 @@ _Button.argTypes = {
         options: Object.keys(buttonSizes),
         description: "Select the size of the button",
     },
+    onClick: {
+        action: "clicked",
+        description: "Function to call when button is clicked",
+    },
 };

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

@@ -4,9 +4,8 @@ type colors = keyof typeof buttonColors;
 type buttonShapes = keyof typeof buttonShapes;
 type buttonSizes = keyof typeof buttonSizes;
 type iconButtonSize = keyof typeof iconButtonSize;
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color?: colors;
-    onClick?: () => void;
     size?: buttonSizes;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;

package/dist/src/components/Checkbox/checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "../ui/checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Form: Story;

package/dist/src/components/Checkbox/checkbox.stories.js

@@ -0,0 +1,61 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "../ui/checkbox";
+import { Label } from "../ui/label";
+import Button from "../Button/Button";
+var meta = {
+    title: "components/Checkbox",
+    component: Checkbox,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        checked: { control: "boolean" },
+        defaultChecked: { control: "boolean" },
+        disabled: { control: "boolean" },
+        onCheckedChange: { action: "checked changed" },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        id: "default",
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "default", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] })); },
+};
+export var Checked = {
+    args: {
+        id: "checked",
+        defaultChecked: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "checked", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Checked option" })] })); },
+};
+export var Disabled = {
+    args: {
+        id: "disabled",
+        disabled: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "disabled", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Disabled option" })] })); },
+};
+export var DisabledChecked = {
+    args: {
+        id: "disabled-checked",
+        disabled: true,
+        defaultChecked: true,
+    },
+    render: function (args) { return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({}, args)), _jsx(Label, { htmlFor: "disabled-checked", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Disabled checked option" })] })); },
+};
+export var Form = {
+    render: function () { return (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-medium", children: "Terms of Service" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Please read and accept our terms of service to continue." }), _jsxs("form", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "I accept the terms and conditions" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2" }), _jsx(Label, { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "I agree to receive marketing emails" })] }), _jsx(Button, { type: "submit", className: "mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", children: "Submit" })] })] })); },
+};

package/dist/src/components/ColorPicker/ColorPicker.d.ts

@@ -1,3 +1,3 @@
-import { ColorPickerInterface } from "./type";
-declare const ColorPicker: ({ onChange, value }: ColorPickerInterface) => import("react/jsx-runtime").JSX.Element;
+import { ColorPickerProps } from "./type";
+declare const ColorPicker: ({ onChange, value, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -1,27 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+"use client";
+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 { useState, useEffect } from "react";
 import { Input } from "../ui/input";
+var useDebounce = function (value, delay) {
+    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        var handler = setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
 var ColorPicker = function (_a) {
-    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b;
+    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b, props = __rest(_a, ["onChange", "value"]);
     var _c = useState(value), hexColor = _c[0], setHexColor = _c[1];
+    var debouncedHexColor = useDebounce(hexColor, 200); // Use prop or default
     // Handle input changes (color picker or text field)
     var handleColorChange = function (newColor) {
-        setHexColor(newColor);
-        onChange(newColor);
+        var formattedColor = newColor.startsWith("#") ? newColor : "#".concat(newColor);
+        setHexColor(formattedColor); // Set the local state immediately
     };
+    // Trigger onChange callback only when debounced value updates
+    useEffect(function () {
+        onChange(debouncedHexColor); // Trigger onChange with debounced value
+    }, [debouncedHexColor, onChange]);
     // Handle hex input change
     var handleHexChange = function (e) {
         var inputValue = e.target.value;
         // Ensure it starts with #
-        var formattedValue = inputValue.startsWith("#")
-            ? inputValue
-            : "#".concat(inputValue);
-        handleColorChange(formattedValue);
+        if (inputValue.length > 7) {
+            inputValue = inputValue.slice(0, 7); // Limit the input to 7 characters
+        }
+        handleColorChange(inputValue);
     };
     // Handle color input change (from native color picker)
     var handleColorInputChange = function (e) {
         handleColorChange(e.target.value);
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "size-9 shrink-0 rounded-l-sm", style: { backgroundColor: hexColor } }), _jsx(Input, { type: "color", value: hexColor, onChange: handleColorInputChange, className: "absolute inset-0 opacity-0 cursor-pointer rounded-r-sm", "aria-label": "Select color" })] }), _jsx(Input, { id: "color-picker", type: "text", value: hexColor, onChange: handleHexChange, className: "rounded-r-sm border min-w-25" })] }) }));
+    return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "size-9 left-1 top-1/2 -translate-y-1/2 absolute border rounded", style: { backgroundColor: hexColor }, children: _jsx(Input, { type: "color", value: hexColor, onChange: handleColorInputChange, className: "h-full w-full opacity-0 cursor-pointer", "aria-label": "Select color" }) }), _jsx(Input, __assign({ type: "text", value: hexColor, onChange: handleHexChange, maxLength: 7, "aria-label": "Hex color input" }, props, { className: "rounded border min-w-25 !ps-12 ".concat(props.className) }))] }));
 };
 export default ColorPicker;

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

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import { ColorPickerInterface } from "./type";
+import { ColorPickerProps } from "./type";
 declare const _default: Meta;
 export default _default;
-export declare const _ColorPicker: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerInterface>;
+export declare const _ColorPicker: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorPickerProps>;

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

@@ -16,9 +16,11 @@ export default {
     component: ColorPicker,
     tags: ["autodocs"],
 };
-var Template = function (args) { return (_jsx(ColorPicker, __assign({}, args))); };
+var Template = function (args) { return _jsx(ColorPicker, __assign({}, args)); };
 export var _ColorPicker = Template.bind({});
 _ColorPicker.args = {
     value: "#000000", // Default color
-    onChange: function () { },
+    onChange: function (e) {
+        console.log("color -->", e);
+    },
 };

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

@@ -1,4 +1,4 @@
-export interface ColorPickerInterface {
+export interface ColorPickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
     onChange: (color: string) => void;
-    value: string;
+    value?: string;
 }

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.d.ts

@@ -1,2 +1,3 @@
-declare const VerticalCard: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+import { CardInterface } from "../type";
+declare const VerticalCard: ({ item, footer_logo, href, btnLabel, editor, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
 export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.js

@@ -4,7 +4,10 @@ import LUIcon from "../../../components/Icons/LUIcon";
 import LuImage from "../../../components/Images/LuImage";
 import Typography from "../../../components/Typography/Typography";
 import Link from "next/link";
+import { getCardImageSrc } from "..";
 var VerticalCard = function (_a) {
-    return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col items-center w-full shadow-xl", children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: "/images/demo-image.jpg", width: 240, height: 240, className: "w-full h-full object-cover", alt: "Image" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx(Typography, { variant: "h4", children: " Heading Text " }), _jsx(Typography, { variant: "b3", className: "font-extralight line-clamp-2 max-xs:line-clamp-1", children: "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The The quick brown fox jumps over the lazy dog." })] }), _jsx(Link, { href: "google.com", passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full bg-gray-50 text-gray-950 hover:bg-gray-50 hover:text-gray-950", children: "View" }) })] }));
+    var item = _a.item, footer_logo = _a.footer_logo, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor;
+    var imageSrc = getCardImageSrc(item === null || item === void 0 ? void 0 : item.image, footer_logo);
+    return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col items-center w-full shadow-xl ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardBg), children: [_jsx("div", { className: "w-full max-w-[240px] overflow-hidden aspect-square ".concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: _jsx(LuImage, { src: imageSrc, width: 240, height: 240, className: "w-full h-full object-cover", alt: "Image" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx(Typography, { variant: "h4", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Typography, { variant: "b3", className: "font-extralight line-clamp-2 max-xs:line-clamp-1 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }), _jsx(Link, { href: href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full bg-gray-50 text-gray-950 hover:bg-gray-50 hover:text-gray-950 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) })] }));
 };
 export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { CardInterface } from "../type";
 declare const _default: Meta;
 export default _default;
-export declare const _Card: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
+export declare const _VerticalCard: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.js

@@ -16,4 +16,18 @@ export default {
     component: VerticalCard,
 };
 var Template = function (args) { return _jsx(VerticalCard, __assign({}, args)); };
-export var _Card = Template.bind({});
+export var _VerticalCard = Template.bind({});
+_VerticalCard.args = {
+    // image: "/images/demo-image.jpg",
+    // title: "Heading Text",
+    // short_description: "The quick brown fox jumps over the lazy dog.",
+    item: {
+        image: "/images/demo-image.jpg",
+        title: "Heading Text",
+        description: "The quick brown fox jumps over the lazy dog.",
+    },
+    footer_logo: "/images/demo-image.jpg",
+    href: "https://www.google.com/",
+    btnLabel: "View More",
+    editor: {},
+};

package/dist/src/components/Title/Title.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
 .main-title {
   position: relative;
   z-index: 10;

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/styles/global.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -209,18 +209,21 @@
   .relative {
     position: relative;
   }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -380,10 +383,18 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -596,6 +607,10 @@
   .origin-\(--radix-tooltip-content-transform-origin\) {
     transform-origin: var(--radix-tooltip-content-transform-origin);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -655,18 +670,42 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
   .gap-x-\[20px\] {
     column-gap: 20px;
   }
+  .space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .overflow-hidden {
     overflow: hidden;
   }
   .\!rounded-\[2px\] {
     border-radius: 2px !important;
   }
+  .\!rounded-\[4px\] {
+    border-radius: 4px !important;
+  }
   .\!rounded-full {
     border-radius: calc(infinity * 1px) !important;
   }
@@ -706,14 +745,6 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-l-sm {
-    border-top-left-radius: calc(var(--radius) - 4px);
-    border-bottom-left-radius: calc(var(--radius) - 4px);
-  }
-  .rounded-r-sm {
-    border-top-right-radius: calc(var(--radius) - 4px);
-    border-bottom-right-radius: calc(var(--radius) - 4px);
-  }
   .\!border {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -1091,6 +1122,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .\!ps-12 {
+    padding-inline-start: calc(var(--spacing) * 12) !important;
+  }
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
@@ -1257,6 +1291,9 @@
   .text-blue-950 {
     color: #03080d;
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-gray-50 {
     color: #fafafa;
   }
@@ -1502,15 +1539,27 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-none {
+    transition-property: none;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .fade-in-0 {
+    --tw-enter-opacity: calc(0/100);
+    --tw-enter-opacity: 0;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1522,9 +1571,6 @@
   .\!zoom-in-95 {
     --tw-enter-scale: .95 !important;
   }
-  .fade-in-0 {
-    --tw-enter-opacity: 0;
-  }
   .running {
     animation-play-state: running;
   }
@@ -1556,6 +1602,11 @@
       opacity: 50%;
     }
   }
+  .peer-disabled\:opacity-70 {
+    &:is(:where(.peer):disabled ~ *) {
+      opacity: 70%;
+    }
+  }
   .selection\:bg-primary {
     & *::selection {
       background-color: var(--primary);
@@ -3079,11 +3130,21 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=checked\]\:border-blue-600 {
+    &[data-state="checked"] {
+      border-color: #276ab3;
+    }
+  }
   .data-\[state\=checked\]\:bg-blue-500 {
     &[data-state="checked"] {
       background-color: #3a84d4;
     }
   }
+  .data-\[state\=checked\]\:bg-blue-600 {
+    &[data-state="checked"] {
+      background-color: #276ab3;
+    }
+  }
   .data-\[state\=checked\]\:bg-green-500 {
     &[data-state="checked"] {
       background-color: #479f76;
@@ -3094,6 +3155,11 @@
       background-color: #fa4f5f;
     }
   }
+  .data-\[state\=checked\]\:text-primary-foreground {
+    &[data-state="checked"] {
+      color: var(--primary-foreground);
+    }
+  }
   .data-\[state\=closed\]\:animate-accordion-up {
     &[data-state="closed"] {
       animation: accordion-up var(--tw-duration,.2s)ease-out;
@@ -3106,6 +3172,7 @@
   }
   .data-\[state\=closed\]\:fade-out-0 {
     &[data-state="closed"] {
+      --tw-exit-opacity: calc(0/100);
       --tw-exit-opacity: 0;
     }
   }
@@ -3446,6 +3513,13 @@
       }
     }
   }
+  .dark\:data-\[state\=checked\]\:bg-primary {
+    &:is(.dark *) {
+      &[data-state="checked"] {
+        background-color: var(--primary);
+      }
+    }
+  }
   .dark\:data-\[state\=checked\]\:bg-primary-foreground {
     &:is(.dark *) {
       &[data-state="checked"] {
@@ -3528,19 +3602,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 }
-@layer base {
-  * {
-    border-color: var(--border);
-    outline-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-  }
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -3556,6 +3617,16 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3796,12 +3867,12 @@
     height: 0;
   }
   to {
-    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height));
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,auto)));
   }
 }
 @keyframes accordion-up {
   from {
-    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height));
+    height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,auto)));
   }
   to {
     height: 0;
@@ -3813,6 +3884,8 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "private": false,
   "files": [
     "dist",
@@ -42,6 +42,7 @@
   ],
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-switch": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.3",