linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

package/dist/src/components/Switch/Switch.stories.jsx

@@ -1,66 +0,0 @@
-import { size, Switch, variant } from "./switch";
-export default {
-    title: "Components/Switch",
-    component: Switch,
-    tags: ["autodocs"],
-};
-var Template = function (args) { return <Switch {...args}></Switch>; };
-export var _Switch = Template.bind({});
-_Switch.args = {
-    size: "md",
-    variant: "default",
-    defaultChecked: false,
-    onCheckedChange: function (checked) {
-        return console.log("Switch is ".concat(checked ? "on" : "off"));
-    },
-};
-_Switch.argTypes = {
-    variant: {
-        control: { type: "select" },
-        options: Object.keys(variant),
-        description: "Switch variant",
-        table: {
-            defaultValue: { summary: "default" },
-            type: { summary: "string" },
-        },
-    },
-    size: {
-        control: { type: "select" },
-        options: Object.keys(size),
-        description: "Switch size",
-        table: {
-            defaultValue: { summary: "md" },
-            type: { summary: "string" },
-        },
-    },
-    defaultChecked: {
-        control: { type: "boolean" },
-        description: "Initial checked state for uncontrolled switch",
-        table: {
-            defaultValue: { summary: "false" },
-            type: { summary: "boolean" },
-        },
-    },
-    checked: {
-        control: { type: "boolean" },
-        description: "Controlled checked state (e.g., checked={field.value} for form libraries)",
-        table: {
-            type: { summary: "boolean" },
-        },
-    },
-    onCheckedChange: {
-        action: "checked changed",
-        description: "Callback function when switch state changes",
-        table: {
-            type: { summary: "(checked: boolean) => void" },
-        },
-    },
-    disabled: {
-        control: { type: "boolean" },
-        description: "Disables the switch",
-        table: {
-            defaultValue: { summary: "false" },
-            type: { summary: "boolean" },
-        },
-    },
-};

package/dist/src/components/Switch/switch.jsx

@@ -1,61 +0,0 @@
-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 * as React from "react";
-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 (<SwitchPrimitive.Root data-slot="switch" className={cn(switchVariants({ size: size, variant: variant }), className)} {...props}>
-      <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")}/>
-    </SwitchPrimitive.Root>);
-}
-export { Switch };

package/dist/src/components/Table/Table.jsx

@@ -1,221 +0,0 @@
-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 __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));
-};
-import * as React from "react";
-import { cn } from "../../lib/utils";
-import { tableSize, tableBodySize, tableFooterSize, collapsibleIconSize, } from "./index";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible";
-import LUIcon from "../Icons/LUIcon";
-var TableSizeContext = React.createContext("sm");
-var TableSectionContext = React.createContext("body");
-var TableResponsiveContext = React.createContext({
-    visibleCount: 0,
-    totalColumns: 0,
-    columnMinWidth: 160,
-    isResponsive: false,
-    columns: [],
-    hasActionColumn: false,
-});
-var Table = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.columnMinWidth, columnMinWidth = _c === void 0 ? 160 : _c, _d = _a.columns, columns = _d === void 0 ? [] : _d, _e = _a.hasActionColumn, hasActionColumn = _e === void 0 ? false : _e, props = __rest(_a, ["className", "size", "columnMinWidth", "columns", "hasActionColumn"]);
-    var totalColumns = columns.length + (hasActionColumn ? 1 : 0);
-    var isResponsive = totalColumns > 0;
-    // Calculate initial visible count based on responsive settings
-    var getInitialVisibleCount = function () {
-        if (!isResponsive || totalColumns === 0) {
-            return totalColumns;
-        }
-        // For SSR compatibility, assume a default width if window is not available
-        var windowWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
-        var calculated = Math.floor(windowWidth / columnMinWidth);
-        // Ensure at least 1 data column is visible (account for trigger column)
-        return Math.max(1, Math.min(totalColumns, calculated - 1));
-    };
-    var _f = React.useState(getInitialVisibleCount), visibleCount = _f[0], setVisibleCount = _f[1];
-    React.useEffect(function () {
-        if (!isResponsive || totalColumns === 0) {
-            setVisibleCount(totalColumns);
-            return;
-        }
-        var calculate = function () {
-            var count = Math.floor(window.innerWidth / columnMinWidth);
-            // Ensure at least 1 data column is visible (plus the trigger column)
-            setVisibleCount(Math.max(1, Math.min(totalColumns, count - 1)));
-        };
-        calculate();
-        window.addEventListener("resize", calculate);
-        return function () { return window.removeEventListener("resize", calculate); };
-    }, [isResponsive, totalColumns, columnMinWidth]);
-    return (<TableSizeContext.Provider value={size}>
-        <TableResponsiveContext.Provider value={{
-            visibleCount: visibleCount,
-            totalColumns: totalColumns,
-            columnMinWidth: columnMinWidth,
-            isResponsive: isResponsive,
-            columns: columns,
-            hasActionColumn: hasActionColumn,
-        }}>
-          <div className="relative w-full overflow-auto">
-            <table ref={ref} className={cn("w-full caption-bottom", className)} {...props}/>
-          </div>
-        </TableResponsiveContext.Provider>
-      </TableSizeContext.Provider>);
-});
-Table.displayName = "Table";
-var TableHeader = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var headerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (<TableSectionContext.Provider value="header">
-      <thead ref={ref} className={cn("[&_tr]:border-b bg-gray-100 overflow-hidden", className)} data-table-size={headerSize} {...props}/>
-    </TableSectionContext.Provider>);
-});
-TableHeader.displayName = "TableHeader";
-var TableBody = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var contextSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (<TableSectionContext.Provider value="body">
-      <tbody ref={ref} className={cn(tableBodySize[contextSize], "[&_tr:last-child]:border-0 text-black", className)} data-table-body-size={contextSize} {...props}/>
-    </TableSectionContext.Provider>);
-});
-TableBody.displayName = "TableBody";
-var TableFooter = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, props = __rest(_a, ["className"]);
-    var footerSize = (_b = React.useContext(TableSizeContext)) !== null && _b !== void 0 ? _b : "sm";
-    return (<TableSectionContext.Provider value="footer">
-      <tfoot ref={ref} className={cn(tableFooterSize[footerSize], "border-t bg-gray-100 font-medium [&>tr]:last:border-b-0", className)} data-table-footer-size={footerSize} {...props}/>
-    </TableSectionContext.Provider>);
-});
-TableFooter.displayName = "TableFooter";
-var TableRow = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, collapsibleContent = _a.collapsibleContent, showTrigger = _a.showTrigger, data = _a.data, props = __rest(_a, ["className", "children", "collapsibleContent", "showTrigger", "data"]);
-    var bodySize = React.useContext(TableSizeContext);
-    var _b = useTableResponsive(), visibleCount = _b.visibleCount, isResponsive = _b.isResponsive, columns = _b.columns, hasActionColumn = _b.hasActionColumn;
-    var section = React.useContext(TableSectionContext);
-    var childrenArray = React.useMemo(function () { return React.Children.toArray(children); }, [children]);
-    var hasDefinedColumns = Array.isArray(columns) && columns.length > 0;
-    var hasHiddenColumns = hasDefinedColumns && visibleCount < columns.length;
-    var slicedChildren = React.useMemo(function () {
-        if (!isResponsive || !hasHiddenColumns)
-            return childrenArray;
-        if (hasActionColumn) {
-            // Show first (visibleCount - 1) columns + the last column (actions)
-            var firstColumns = childrenArray.slice(0, visibleCount - 1);
-            var lastColumn = childrenArray[childrenArray.length - 1];
-            return __spreadArray(__spreadArray([], firstColumns, true), [lastColumn], false);
-        }
-        return childrenArray.slice(0, visibleCount);
-    }, [
-        childrenArray,
-        isResponsive,
-        hasHiddenColumns,
-        visibleCount,
-        hasActionColumn,
-    ]);
-    // Auto-generate collapsible content for responsive tables
-    var autoCollapsibleContent = React.useMemo(function () {
-        if (!isResponsive || !data || !columns || columns.length === 0) {
-            return null;
-        }
-        var hiddenColumns;
-        if (hasActionColumn) {
-            // Hide columns from (visibleCount - 1) to (columns.length - 2), excluding the last action column
-            hiddenColumns = columns.slice(visibleCount - 1, columns.length - 1);
-        }
-        else {
-            hiddenColumns = columns.slice(visibleCount);
-        }
-        if (hiddenColumns.length === 0)
-            return null;
-        return (<Table className="w-full">
-          <TableBody>
-            {hiddenColumns.map(function (col) { return (<TableRow key={col.key}>
-                <TableCell className="font-medium w-1/3 border-r border-gray-200">
-                  {col.header}
-                </TableCell>
-                <TableCell className="w-2/3">{String(data[col.key])}</TableCell>
-              </TableRow>); })}
-          </TableBody>
-        </Table>);
-    }, [isResponsive, data, columns, visibleCount, hasActionColumn]);
-    var finalCollapsibleContent = collapsibleContent || autoCollapsibleContent;
-    var finalShowTrigger = showTrigger !== null && showTrigger !== void 0 ? showTrigger : autoCollapsibleContent !== null;
-    // State to track if collapsible is open
-    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    if (section === "header") {
-        return (<tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200", className)} {...props}>
-          {isResponsive && hasHiddenColumns && (<th className="p-2 align-middle w-[52px] bg-gray-100"></th>)}
-          {slicedChildren}
-        </tr>);
-    }
-    if (finalCollapsibleContent) {
-        return (<Collapsible asChild onOpenChange={setIsOpen}>
-          <>
-            <tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className)} {...props}>
-              {isResponsive && (<td className="p-2 align-middle w-[52px]">
-                  {finalShowTrigger && (<CollapsibleTrigger asChild>
-                      <LUIcon icon={isOpen ? "angle-up" : "angle-right"} size={collapsibleIconSize[bodySize]} color="blue"/>
-                    </CollapsibleTrigger>)}
-                </td>)}
-              {slicedChildren}
-            </tr>
-
-            <CollapsibleContent asChild>
-              <tr className="bg-gray-50">
-                <td colSpan={visibleCount + (isResponsive ? 1 : 0)} className="p-0">
-                  {finalCollapsibleContent}
-                </td>
-              </tr>
-            </CollapsibleContent>
-          </>
-        </Collapsible>);
-    }
-    return (<tr ref={ref} className={cn(tableBodySize[bodySize !== null && bodySize !== void 0 ? bodySize : "sm"], "border-b border-gray-200 cursor-pointer transition-colors hover:bg-gray-50 data-[state=selected]:bg-gray-50 odd:bg-white even:bg-gray-50 group", className)} {...props}>
-        {slicedChildren}
-      </tr>);
-});
-TableRow.displayName = "TableRow";
-var TableHead = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
-    var contextSize = React.useContext(TableSizeContext);
-    var headSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "sm";
-    return (<th ref={ref} className={cn(tableSize[headSize], "py-0 px-3 text-left align-middle font-semibold text-gray-950 bg-gray-100 first:rounded-tl-lg last:rounded-tr-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)} {...props}>
-        <div className="flex items-center gap-2">{children}</div>
-      </th>);
-});
-TableHead.displayName = "TableHead";
-var TableCell = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<td ref={ref} className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] first-of-type:border-l-2 first-of-type:border-l-transparent group-hover:first-of-type:border-l-blue-600 group-data-[state=selected]:first-of-type:border-l-blue-600", className)} {...props}/>);
-});
-TableCell.displayName = "TableCell";
-var TableCaption = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props}/>);
-});
-TableCaption.displayName = "TableCaption";
-var useTableResponsive = function () {
-    var context = React.useContext(TableResponsiveContext);
-    return context;
-};
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };