@sunggang/ui-lib 0.4.30 → 0.4.31

package/Carousel.esm.js

@@ -0,0 +1,153 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { C as Carousel, a as CarouselContent, b as CarouselItem, c as CarouselPrevious, d as CarouselNext } from './carousel.esm2.js';
+import { c as cn } from './utils.esm.js';
+import 'embla-carousel-react';
+import 'lucide-react';
+import './button.esm.js';
+import '@radix-ui/react-slot';
+import 'class-variance-authority';
+import 'clsx';
+import 'tailwind-merge';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var BaseCarousel = function(param) {
+    var items = param.items, _param_showNavigation = param.showNavigation, showNavigation = _param_showNavigation === void 0 ? true : _param_showNavigation, _param_showIndicators = param.showIndicators, showIndicators = _param_showIndicators === void 0 ? true : _param_showIndicators, autoPlay = param.autoPlay, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? "horizontal" : _param_orientation, _param_itemsPerView = param.itemsPerView, itemsPerView = _param_itemsPerView === void 0 ? 1 : _param_itemsPerView, _param_gap = param.gap, gap = _param_gap === void 0 ? "1rem" : _param_gap, className = param.className, itemClassName = param.itemClassName, navigationClassName = param.navigationClassName, indicatorClassName = param.indicatorClassName, onSlideChange = param.onSlideChange, onReady = param.onReady;
+    var _React_useState = _sliced_to_array(React.useState(), 2), api = _React_useState[0], setApi = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(React.useState(0), 2), current = _React_useState1[0], setCurrent = _React_useState1[1];
+    var _React_useState2 = _sliced_to_array(React.useState(0), 2), count = _React_useState2[0], setCount = _React_useState2[1];
+    React.useEffect(function() {
+        if (!api) return;
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+        api.on("select", function() {
+            var selectedIndex = api.selectedScrollSnap();
+            setCurrent(selectedIndex + 1);
+            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(selectedIndex);
+        });
+        onReady === null || onReady === void 0 ? void 0 : onReady(api);
+    }, [
+        api,
+        onSlideChange,
+        onReady
+    ]);
+    React.useEffect(function() {
+        if (!api || !autoPlay) return;
+        var interval = setInterval(function() {
+            if (api.canScrollNext()) {
+                api.scrollNext();
+            } else {
+                api.scrollTo(0);
+            }
+        }, autoPlay);
+        return function() {
+            return clearInterval(interval);
+        };
+    }, [
+        api,
+        autoPlay
+    ]);
+    var basisClass = itemsPerView === 1 ? "basis-full" : itemsPerView === 2 ? "basis-1/2" : itemsPerView === 3 ? "basis-1/3" : itemsPerView === 4 ? "basis-1/4" : "basis-1/".concat(itemsPerView);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("relative w-full", className),
+        children: [
+            /*#__PURE__*/ jsxs(Carousel, {
+                setApi: setApi,
+                orientation: orientation,
+                opts: {
+                    align: "start",
+                    loop: true
+                },
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsx(CarouselContent, {
+                        className: cn("-ml-1", orientation === "vertical" && "-mt-1 flex-col"),
+                        style: {
+                            gap: gap
+                        },
+                        children: items.map(function(item, index) {
+                            return /*#__PURE__*/ jsx(CarouselItem, {
+                                className: cn("pl-1", basisClass, orientation === "vertical" && "pt-1", itemClassName),
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "p-1",
+                                    children: item.content
+                                })
+                            }, item.id);
+                        })
+                    }),
+                    showNavigation && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(CarouselPrevious, {
+                                className: cn(navigationClassName)
+                            }),
+                            /*#__PURE__*/ jsx(CarouselNext, {
+                                className: cn(navigationClassName)
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showIndicators && /*#__PURE__*/ jsx("div", {
+                className: "flex justify-center mt-4 space-x-2",
+                children: Array.from({
+                    length: count
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsx("button", {
+                        className: cn("h-2 w-2 rounded-full transition-all", current === index + 1 ? "bg-primary scale-125" : "bg-primary/30 hover:bg-primary/60", indicatorClassName),
+                        onClick: function() {
+                            return api === null || api === void 0 ? void 0 : api.scrollTo(index);
+                        },
+                        "aria-label": "前往第 ".concat(index + 1, " 張投影片")
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+
+export { BaseCarousel };

package/DataTable.cjs.js

@@ -6,10 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var lucideReact = require('lucide-react');
-var input = require('./input.cjs.js');
+var button = require('./button.cjs.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var reactIcons = require('@radix-ui/react-icons');
 var utils = require('./utils.cjs.js');
+var input = require('./input.cjs.js');
 require('@radix-ui/react-slot');
 require('class-variance-authority');
 require('clsx');
@@ -579,7 +580,7 @@ var DataTable = function(param) {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(DropdownMenuTrigger, {
                                 asChild: true,
-                                children: /*#__PURE__*/ jsxRuntime.jsxs(input.Button, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(button.Button, {
                                     variant: "outline",
                                     className: "ml-auto",
                                     children: [
@@ -883,7 +884,7 @@ var BaseTable = function(param) {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(DropdownMenuTrigger, {
                                 asChild: true,
-                                children: /*#__PURE__*/ jsxRuntime.jsxs(input.Button, {
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(button.Button, {
                                     variant: "outline",
                                     className: "ml-auto",
                                     children: [

package/DataTable.esm.js

@@ -3,10 +3,11 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 import { ChevronDown } from 'lucide-react';
-import { I as Input, B as Button } from './input.esm.js';
+import { B as Button } from './button.esm.js';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ChevronRightIcon, CheckIcon, DotFilledIcon } from '@radix-ui/react-icons';
 import { c as cn } from './utils.esm.js';
+import { I as Input } from './input.esm.js';
 import '@radix-ui/react-slot';
 import 'class-variance-authority';
 import 'clsx';

package/Skeleton.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/Skeleton";

package/Skeleton.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./Skeleton.cjs.js').default;

package/Skeleton.cjs.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var skeleton = require('./skeleton.cjs2.js');
+var utils = require('./utils.cjs.js');
+require('clsx');
+require('tailwind-merge');
+
+var BaseSkeleton = function(param) {
+    var _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, width = param.width, height = param.height, _param_animate = param.animate, animate = _param_animate === void 0 ? true : _param_animate, className = param.className, _param_count = param.count, count = _param_count === void 0 ? 1 : _param_count, _param_spacing = param.spacing, spacing = _param_spacing === void 0 ? "0.5rem" : _param_spacing;
+    var getVariantStyles = function() {
+        switch(variant){
+            case "text":
+                return "h-4 w-full rounded-sm";
+            case "circular":
+                return "rounded-full aspect-square";
+            case "rectangular":
+                return "rounded-sm";
+            default:
+                return "rounded-md";
+        }
+    };
+    var skeletonStyle = {
+        width: typeof width === "number" ? "".concat(width, "px") : width,
+        height: typeof height === "number" ? "".concat(height, "px") : height
+    };
+    var skeletonClasses = utils.cn(getVariantStyles(), !animate && "animate-none", className);
+    if (count === 1) {
+        return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+            className: skeletonClasses,
+            style: skeletonStyle
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "space-y-2",
+        style: {
+            gap: spacing
+        },
+        children: Array.from({
+            length: count
+        }, function(_, index) {
+            return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                className: skeletonClasses,
+                style: skeletonStyle
+            }, index);
+        })
+    });
+};
+var AvatarSkeleton = function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? "md" : _param_size, _param_showText = param.showText, showText = _param_showText === void 0 ? true : _param_showText, _param_textLines = param.textLines, textLines = _param_textLines === void 0 ? 2 : _param_textLines, className = param.className;
+    var sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-12 w-12",
+        lg: "h-16 w-16",
+        xl: "h-20 w-20"
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: utils.cn("flex items-center space-x-4", className),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                className: utils.cn("rounded-full", sizeClasses[size])
+            }),
+            showText && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "space-y-2 flex-1",
+                children: Array.from({
+                    length: textLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: utils.cn("h-4 rounded", index === textLines - 1 ? "w-3/4" : "w-full")
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+var CardSkeleton = function(param) {
+    var _param_showImage = param.showImage, showImage = _param_showImage === void 0 ? true : _param_showImage, _param_imageHeight = param.imageHeight, imageHeight = _param_imageHeight === void 0 ? "200px" : _param_imageHeight, _param_titleLines = param.titleLines, titleLines = _param_titleLines === void 0 ? 1 : _param_titleLines, _param_contentLines = param.contentLines, contentLines = _param_contentLines === void 0 ? 3 : _param_contentLines, _param_showActions = param.showActions, showActions = _param_showActions === void 0 ? true : _param_showActions, className = param.className;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: utils.cn("border rounded-lg p-4 space-y-4", className),
+        children: [
+            showImage && /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                className: "w-full rounded-md",
+                style: {
+                    height: imageHeight
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "space-y-2",
+                children: Array.from({
+                    length: titleLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: "h-6 w-3/4 rounded"
+                    }, "title-".concat(index));
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "space-y-2",
+                children: Array.from({
+                    length: contentLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: utils.cn("h-4 rounded", index === contentLines - 1 ? "w-2/3" : "w-full")
+                    }, "content-".concat(index));
+                })
+            }),
+            showActions && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex space-x-2 pt-2",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: "h-9 w-20 rounded"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: "h-9 w-16 rounded"
+                    })
+                ]
+            })
+        ]
+    });
+};
+var TableSkeleton = function(param) {
+    var _param_rows = param.rows, rows = _param_rows === void 0 ? 5 : _param_rows, _param_columns = param.columns, columns = _param_columns === void 0 ? 4 : _param_columns, _param_showHeader = param.showHeader, showHeader = _param_showHeader === void 0 ? true : _param_showHeader, className = param.className;
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: utils.cn("w-full", className),
+        children: [
+            showHeader && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "grid gap-4 pb-4 border-b",
+                style: {
+                    gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+                },
+                children: Array.from({
+                    length: columns
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                        className: "h-6 rounded"
+                    }, "header-".concat(index));
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "space-y-3 pt-4",
+                children: Array.from({
+                    length: rows
+                }, function(_, rowIndex) {
+                    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "grid gap-4",
+                        style: {
+                            gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+                        },
+                        children: Array.from({
+                            length: columns
+                        }, function(_, colIndex) {
+                            return /*#__PURE__*/ jsxRuntime.jsx(skeleton.Skeleton, {
+                                className: "h-4 rounded"
+                            }, "cell-".concat(rowIndex, "-").concat(colIndex));
+                        })
+                    }, "row-".concat(rowIndex));
+                })
+            })
+        ]
+    });
+};
+
+exports.AvatarSkeleton = AvatarSkeleton;
+exports.BaseSkeleton = BaseSkeleton;
+exports.CardSkeleton = CardSkeleton;
+exports.TableSkeleton = TableSkeleton;

package/Skeleton.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './Skeleton.cjs.js';
+export { _default as default } from './Skeleton.cjs.default.js';

package/Skeleton.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/Skeleton";

package/Skeleton.esm.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { S as Skeleton } from './skeleton.esm2.js';
+import { c as cn } from './utils.esm.js';
+import 'clsx';
+import 'tailwind-merge';
+
+var BaseSkeleton = function(param) {
+    var _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, width = param.width, height = param.height, _param_animate = param.animate, animate = _param_animate === void 0 ? true : _param_animate, className = param.className, _param_count = param.count, count = _param_count === void 0 ? 1 : _param_count, _param_spacing = param.spacing, spacing = _param_spacing === void 0 ? "0.5rem" : _param_spacing;
+    var getVariantStyles = function() {
+        switch(variant){
+            case "text":
+                return "h-4 w-full rounded-sm";
+            case "circular":
+                return "rounded-full aspect-square";
+            case "rectangular":
+                return "rounded-sm";
+            default:
+                return "rounded-md";
+        }
+    };
+    var skeletonStyle = {
+        width: typeof width === "number" ? "".concat(width, "px") : width,
+        height: typeof height === "number" ? "".concat(height, "px") : height
+    };
+    var skeletonClasses = cn(getVariantStyles(), !animate && "animate-none", className);
+    if (count === 1) {
+        return /*#__PURE__*/ jsx(Skeleton, {
+            className: skeletonClasses,
+            style: skeletonStyle
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: "space-y-2",
+        style: {
+            gap: spacing
+        },
+        children: Array.from({
+            length: count
+        }, function(_, index) {
+            return /*#__PURE__*/ jsx(Skeleton, {
+                className: skeletonClasses,
+                style: skeletonStyle
+            }, index);
+        })
+    });
+};
+var AvatarSkeleton = function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? "md" : _param_size, _param_showText = param.showText, showText = _param_showText === void 0 ? true : _param_showText, _param_textLines = param.textLines, textLines = _param_textLines === void 0 ? 2 : _param_textLines, className = param.className;
+    var sizeClasses = {
+        sm: "h-8 w-8",
+        md: "h-12 w-12",
+        lg: "h-16 w-16",
+        xl: "h-20 w-20"
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("flex items-center space-x-4", className),
+        children: [
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: cn("rounded-full", sizeClasses[size])
+            }),
+            showText && /*#__PURE__*/ jsx("div", {
+                className: "space-y-2 flex-1",
+                children: Array.from({
+                    length: textLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsx(Skeleton, {
+                        className: cn("h-4 rounded", index === textLines - 1 ? "w-3/4" : "w-full")
+                    }, index);
+                })
+            })
+        ]
+    });
+};
+var CardSkeleton = function(param) {
+    var _param_showImage = param.showImage, showImage = _param_showImage === void 0 ? true : _param_showImage, _param_imageHeight = param.imageHeight, imageHeight = _param_imageHeight === void 0 ? "200px" : _param_imageHeight, _param_titleLines = param.titleLines, titleLines = _param_titleLines === void 0 ? 1 : _param_titleLines, _param_contentLines = param.contentLines, contentLines = _param_contentLines === void 0 ? 3 : _param_contentLines, _param_showActions = param.showActions, showActions = _param_showActions === void 0 ? true : _param_showActions, className = param.className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("border rounded-lg p-4 space-y-4", className),
+        children: [
+            showImage && /*#__PURE__*/ jsx(Skeleton, {
+                className: "w-full rounded-md",
+                style: {
+                    height: imageHeight
+                }
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "space-y-2",
+                children: Array.from({
+                    length: titleLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-6 w-3/4 rounded"
+                    }, "title-".concat(index));
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "space-y-2",
+                children: Array.from({
+                    length: contentLines
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsx(Skeleton, {
+                        className: cn("h-4 rounded", index === contentLines - 1 ? "w-2/3" : "w-full")
+                    }, "content-".concat(index));
+                })
+            }),
+            showActions && /*#__PURE__*/ jsxs("div", {
+                className: "flex space-x-2 pt-2",
+                children: [
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-9 w-20 rounded"
+                    }),
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-9 w-16 rounded"
+                    })
+                ]
+            })
+        ]
+    });
+};
+var TableSkeleton = function(param) {
+    var _param_rows = param.rows, rows = _param_rows === void 0 ? 5 : _param_rows, _param_columns = param.columns, columns = _param_columns === void 0 ? 4 : _param_columns, _param_showHeader = param.showHeader, showHeader = _param_showHeader === void 0 ? true : _param_showHeader, className = param.className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("w-full", className),
+        children: [
+            showHeader && /*#__PURE__*/ jsx("div", {
+                className: "grid gap-4 pb-4 border-b",
+                style: {
+                    gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+                },
+                children: Array.from({
+                    length: columns
+                }, function(_, index) {
+                    return /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-6 rounded"
+                    }, "header-".concat(index));
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "space-y-3 pt-4",
+                children: Array.from({
+                    length: rows
+                }, function(_, rowIndex) {
+                    return /*#__PURE__*/ jsx("div", {
+                        className: "grid gap-4",
+                        style: {
+                            gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+                        },
+                        children: Array.from({
+                            length: columns
+                        }, function(_, colIndex) {
+                            return /*#__PURE__*/ jsx(Skeleton, {
+                                className: "h-4 rounded"
+                            }, "cell-".concat(rowIndex, "-").concat(colIndex));
+                        })
+                    }, "row-".concat(rowIndex));
+                })
+            })
+        ]
+    });
+};
+
+export { AvatarSkeleton, BaseSkeleton, CardSkeleton, TableSkeleton };