@sehgaltech/psui 1.0.0

package/dist/index.js

@@ -0,0 +1,365 @@
+import React, { forwardRef, useState, useEffect, useRef, useId } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as LucideIcons from 'lucide-react';
+
+// src/components/Button/Button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+var variantClasses = {
+  solid: {
+    primary: "bg-primary text-primary-content hover:opacity-90",
+    secondary: "bg-secondary text-secondary-content hover:opacity-90",
+    success: "bg-success text-success-content hover:opacity-90",
+    danger: "bg-error text-error-content hover:opacity-90",
+    warning: "bg-warning text-warning-content hover:opacity-90",
+    info: "bg-info text-info-content hover:opacity-90",
+    ghost: "bg-base-200 text-base-content hover:bg-base-300"
+  },
+  outlined: {
+    primary: "border border-primary text-primary bg-transparent hover:bg-primary/10",
+    secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10",
+    success: "border border-success text-success bg-transparent hover:bg-success/10",
+    danger: "border border-error text-error bg-transparent hover:bg-error/10",
+    warning: "border border-warning text-warning bg-transparent hover:bg-warning/10",
+    info: "border border-info text-info bg-transparent hover:bg-info/10",
+    ghost: "border border-base-200 text-base-content bg-transparent hover:bg-base-200/10"
+  },
+  dashed: {
+    primary: "border border-dashed border-primary text-primary bg-transparent hover:bg-primary/10",
+    secondary: "border border-dashed border-secondary text-secondary bg-transparent hover:bg-secondary/10",
+    success: "border border-dashed border-success text-success bg-transparent hover:bg-success/10",
+    danger: "border border-dashed border-error text-error bg-transparent hover:bg-error/10",
+    warning: "border border-dashed border-warning text-warning bg-transparent hover:bg-warning/10",
+    info: "border border-dashed border-info text-info bg-transparent hover:bg-info/10",
+    ghost: "border border-dashed border-base-200 text-base-content bg-transparent hover:bg-base-200/10"
+  },
+  text: {
+    primary: "text-primary bg-transparent hover:bg-primary/10",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10",
+    success: "text-success bg-transparent hover:bg-success/10",
+    danger: "text-error bg-transparent hover:bg-error/10",
+    warning: "text-warning bg-transparent hover:bg-warning/10",
+    info: "text-info bg-transparent hover:bg-info/10",
+    ghost: "text-base-content bg-transparent hover:bg-base-200/10"
+  },
+  link: {
+    primary: "text-primary underline bg-transparent hover:text-primary/80",
+    secondary: "text-secondary underline bg-transparent hover:text-secondary/80",
+    success: "text-success underline bg-transparent hover:text-success/80",
+    danger: "text-error underline bg-transparent hover:text-error/80",
+    warning: "text-warning underline bg-transparent hover:text-warning/80",
+    info: "text-info underline bg-transparent hover:text-info/80",
+    ghost: "text-base-content underline bg-transparent hover:text-base-content/80"
+  }
+};
+var getButtonClasses = (variant, type) => {
+  return variantClasses[variant][type] || variantClasses.solid.primary;
+};
+var SuccessIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2.5",
+        d: "M5 12.5l4.5 4.5L19 7.5"
+      }
+    )
+  }
+);
+var Button = forwardRef(
+  ({
+    variant = "solid",
+    type = "primary",
+    size = "md",
+    fullWidth = false,
+    loading = false,
+    loadingText,
+    success = false,
+    successText,
+    successIcon,
+    successDuration = 1500,
+    disabled = false,
+    startIcon,
+    endIcon,
+    color,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const [isShowingSuccess, setIsShowingSuccess] = useState(false);
+    useEffect(() => {
+      if (!success || loading) {
+        return;
+      }
+      setIsShowingSuccess(true);
+      const timer = window.setTimeout(() => {
+        setIsShowingSuccess(false);
+      }, successDuration);
+      return () => window.clearTimeout(timer);
+    }, [success, loading, successDuration]);
+    const baseClasses = "inline-flex items-center justify-center font-medium rounded-[var(--radius-selector)] transition-all duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 gap-2";
+    const variantClass = getButtonClasses(variant, type);
+    const sizeClass = sizeClasses[size];
+    const widthClass = fullWidth ? "w-full" : "";
+    const loadingClass = loading ? "cursor-wait" : "";
+    const combinedClasses = cn(
+      baseClasses,
+      variantClass,
+      sizeClass,
+      widthClass,
+      loadingClass,
+      className
+    );
+    const customStyle = { ...props.style };
+    if (color) {
+      if (variant === "solid") {
+        customStyle.backgroundColor = color;
+        customStyle.borderColor = color;
+      } else if (variant === "outlined" || variant === "dashed") {
+        customStyle.borderColor = color;
+        customStyle.color = color;
+      } else if (variant === "text" || variant === "link") {
+        customStyle.color = color;
+      }
+    }
+    const content = loading ? loadingText ?? children : isShowingSuccess ? successText ?? children : children;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: combinedClasses,
+        style: customStyle,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin -ml-1 h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          !loading && isShowingSuccess && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: successIcon ?? /* @__PURE__ */ jsx(SuccessIcon, {}) }),
+          !loading && !isShowingSuccess && startIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: startIcon }),
+          content,
+          !loading && !isShowingSuccess && endIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: endIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var SplitButton = forwardRef(
+  ({
+    label,
+    onClick,
+    items,
+    menuLabel = "More actions",
+    align = "right",
+    variant = "solid",
+    type = "primary",
+    size = "md",
+    color,
+    disabled = false,
+    loading = false,
+    className,
+    menuClassName,
+    ...buttonProps
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const menuId = useId();
+    useEffect(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, []);
+    const handleItemSelect = (item) => {
+      if (item.disabled) {
+        return;
+      }
+      item.onClick?.();
+      setOpen(false);
+    };
+    const hasItems = items.length > 0;
+    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative inline-flex", className), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          variant,
+          type,
+          size,
+          color,
+          disabled,
+          loading,
+          onClick,
+          className: cn("rounded-r-none", variant !== "link" && "border-r-0"),
+          ...buttonProps,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant,
+          type,
+          size,
+          color,
+          disabled: disabled || loading || !hasItems,
+          "aria-label": menuLabel,
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": menuId,
+          onClick: () => setOpen((prev) => !prev),
+          className: cn("rounded-l-none px-3", variant !== "link" && "border-l"),
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              className: cn("h-4 w-4 transition-transform duration-150", open && "rotate-180"),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        }
+      ),
+      open && hasItems && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: menuId,
+          role: "menu",
+          className: cn(
+            "absolute z-20 top-full mt-2 min-w-44 overflow-hidden rounded-lg border border-base-300 bg-base-100 p-1 shadow-lg",
+            align === "right" ? "right-0" : "left-0",
+            menuClassName
+          ),
+          children: items.map((item, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              onClick: () => handleItemSelect(item),
+              className: cn(
+                "w-full rounded-md px-3 py-2 text-left text-sm transition-colors",
+                item.disabled ? "cursor-not-allowed opacity-50" : item.destructive ? "text-error hover:bg-error/10" : "text-base-content hover:bg-base-200"
+              ),
+              children: item.label
+            },
+            item.key ?? `split-item-${index}`
+          ))
+        }
+      )
+    ] });
+  }
+);
+SplitButton.displayName = "SplitButton";
+var sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48,
+  "2xl": 64
+};
+var colorMap = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  accent: "text-accent",
+  neutral: "text-neutral",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  current: "text-current"
+};
+var Icon = React.forwardRef(
+  ({ icon: ExplicitIcon, name, size = "md", color = "current", className, ...props }, ref) => {
+    const sizeValue = sizeMap[size];
+    const isThemeColor = color && Object.keys(colorMap).includes(color);
+    const colorClass = isThemeColor ? colorMap[color] : "";
+    const customColor = !isThemeColor ? color : void 0;
+    const IconComponent = ExplicitIcon || (name ? LucideIcons[name] : null);
+    if (!IconComponent) {
+      console.warn(`Icon: No icon provided. Pass either 'icon' component or 'name' string.`);
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      IconComponent,
+      {
+        ref,
+        width: sizeValue,
+        height: sizeValue,
+        size: sizeValue,
+        color: customColor,
+        style: { color: customColor, ...props.style },
+        className: `${colorClass} ${className || ""}`,
+        ...props
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+
+export { Button, Icon };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/components/Button/Button.tsx","../src/components/Icon/Icon.tsx"],"names":["jsx"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AACxC,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC/B;ACuHA,IAAM,WAAA,GAAc;AAAA,EAClB,EAAA,EAAI,qBAAA;AAAA,EACJ,EAAA,EAAI,qBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,cAAA,GAAoE;AAAA,EACxE,KAAA,EAAO;AAAA,IACL,OAAA,EAAS,kDAAA;AAAA,IACT,SAAA,EAAW,sDAAA;AAAA,IACX,OAAA,EAAS,kDAAA;AAAA,IACT,MAAA,EAAQ,8CAAA;AAAA,IACR,OAAA,EAAS,kDAAA;AAAA,IACT,IAAA,EAAM,4CAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,uEAAA;AAAA,IACT,SAAA,EAAW,6EAAA;AAAA,IACX,OAAA,EAAS,uEAAA;AAAA,IACT,MAAA,EAAQ,iEAAA;AAAA,IACR,OAAA,EAAS,uEAAA;AAAA,IACT,IAAA,EAAM,8DAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS,qFAAA;AAAA,IACT,SAAA,EAAW,2FAAA;AAAA,IACX,OAAA,EAAS,qFAAA;AAAA,IACT,MAAA,EAAQ,+EAAA;AAAA,IACR,OAAA,EAAS,qFAAA;AAAA,IACT,IAAA,EAAM,4EAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,iDAAA;AAAA,IACT,SAAA,EAAW,qDAAA;AAAA,IACX,OAAA,EAAS,iDAAA;AAAA,IACT,MAAA,EAAQ,6CAAA;AAAA,IACR,OAAA,EAAS,iDAAA;AAAA,IACT,IAAA,EAAM,2CAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,6DAAA;AAAA,IACT,SAAA,EAAW,iEAAA;AAAA,IACX,OAAA,EAAS,6DAAA;AAAA,IACT,MAAA,EAAQ,yDAAA;AAAA,IACR,OAAA,EAAS,6DAAA;AAAA,IACT,IAAA,EAAM,uDAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAA;AAEA,IAAM,gBAAA,GAAmB,CAAC,OAAA,EAAwB,IAAA,KAAqB;AACrE,EAAA,OAAO,eAAe,OAAO,CAAA,CAAE,IAAI,CAAA,IAAK,eAAe,KAAA,CAAM,OAAA;AAC/D,CAAA;AAEA,IAAM,cAAc,sBAClB,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAU,SAAA;AAAA,IACV,KAAA,EAAM,4BAAA;AAAA,IACN,IAAA,EAAK,MAAA;AAAA,IACL,OAAA,EAAQ,WAAA;AAAA,IACR,aAAA,EAAY,MAAA;AAAA,IAEZ,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAO,cAAA;AAAA,QACP,aAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAe,OAAA;AAAA,QACf,WAAA,EAAY,KAAA;AAAA,QACZ,CAAA,EAAE;AAAA;AAAA;AACJ;AACF,CAAA;AAWK,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,OAAA,GAAU,OAAA;AAAA,IACV,IAAA,GAAO,SAAA;AAAA,IACP,IAAA,GAAO,IAAA;AAAA,IACP,SAAA,GAAY,KAAA;AAAA,IACZ,OAAA,GAAU,KAAA;AAAA,IACV,WAAA;AAAA,IACA,OAAA,GAAU,KAAA;AAAA,IACV,WAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,GAAY,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9D,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,WAAW,OAAA,EAAS;AACvB,QAAA;AAAA,MACF;AAEA,MAAA,mBAAA,CAAoB,IAAI,CAAA;AACxB,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,UAAA,CAAW,MAAM;AACpC,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B,GAAG,eAAe,CAAA;AAElB,MAAA,OAAO,MAAM,MAAA,CAAO,YAAA,CAAa,KAAK,CAAA;AAAA,IACxC,CAAA,EAAG,CAAC,OAAA,EAAS,OAAA,EAAS,eAAe,CAAC,CAAA;AAEtC,IAAA,MAAM,WAAA,GAAc,2MAAA;AACpB,IAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,OAAA,EAAS,IAAI,CAAA;AACnD,IAAA,MAAM,SAAA,GAAY,YAAY,IAAI,CAAA;AAClC,IAAA,MAAM,UAAA,GAAa,YAAY,QAAA,GAAW,EAAA;AAC1C,IAAA,MAAM,YAAA,GAAe,UAAU,aAAA,GAAgB,EAAA;AAE/C,IAAA,MAAM,eAAA,GAAkB,EAAA;AAAA,MACtB,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,MAAM,WAAA,GAAmC,EAAE,GAAG,KAAA,CAAM,KAAA,EAAM;AAC1D,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,IAAI,YAAY,OAAA,EAAS;AACvB,QAAA,WAAA,CAAY,eAAA,GAAkB,KAAA;AAC9B,QAAA,WAAA,CAAY,WAAA,GAAc,KAAA;AAAA,MAC5B,CAAA,MAAA,IAAW,OAAA,KAAY,UAAA,IAAc,OAAA,KAAY,QAAA,EAAU;AACzD,QAAA,WAAA,CAAY,WAAA,GAAc,KAAA;AAC1B,QAAA,WAAA,CAAY,KAAA,GAAQ,KAAA;AAAA,MACtB,CAAA,MAAA,IAAW,OAAA,KAAY,MAAA,IAAU,OAAA,KAAY,MAAA,EAAQ;AACnD,QAAA,WAAA,CAAY,KAAA,GAAQ,KAAA;AAAA,MACtB;AAAA,IACF;AAEA,IAAA,MAAM,UAAU,OAAA,GACZ,WAAA,IAAe,QAAA,GACf,gBAAA,GACE,eAAe,QAAA,GACf,QAAA;AAEN,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,SAAA,EAAW,eAAA;AAAA,QACX,KAAA,EAAO,WAAA;AAAA,QACP,UAAU,QAAA,IAAY,OAAA;AAAA,QACtB,aAAW,OAAA,IAAW,MAAA;AAAA,QACrB,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,4BAAA;AAAA,cACV,KAAA,EAAM,4BAAA;AAAA,cACN,IAAA,EAAK,MAAA;AAAA,cACL,OAAA,EAAQ,WAAA;AAAA,cACR,aAAA,EAAY,MAAA;AAAA,cAEZ,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,YAAA;AAAA,oBACV,EAAA,EAAG,IAAA;AAAA,oBACH,EAAA,EAAG,IAAA;AAAA,oBACH,CAAA,EAAE,IAAA;AAAA,oBACF,MAAA,EAAO,cAAA;AAAA,oBACP,WAAA,EAAY;AAAA;AAAA,iBACd;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,YAAA;AAAA,oBACV,IAAA,EAAK,cAAA;AAAA,oBACL,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,WACF;AAAA,UAED,CAAC,OAAA,IAAW,gBAAA,oBAAoB,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,sBAAA,EAAwB,QAAA,EAAA,WAAA,oBAAe,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA,EAAG,CAAA;AAAA,UACvG,CAAC,WAAW,CAAC,gBAAA,IAAoB,6BAAa,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EAAwB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,UAChG,OAAA;AAAA,UACA,CAAC,WAAW,CAAC,gBAAA,IAAoB,2BAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAC/F;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AAEd,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE;AAAA,IACE,KAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,GAAY,cAAA;AAAA,IACZ,KAAA,GAAQ,OAAA;AAAA,IACR,OAAA,GAAU,OAAA;AAAA,IACV,IAAA,GAAO,SAAA;AAAA,IACP,IAAA,GAAO,IAAA;AAAA,IACP,KAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,OAAA,GAAU,KAAA;AAAA,IACV,SAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,IAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,IAAA,MAAM,SAAS,KAAA,EAAM;AAErB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyB;AAC7C,QAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,UAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,QACf;AAAA,MACF,CAAA;AAEA,MAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,YAAY,CAAA;AAEjD,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,YAAY,CAAA;AAAA,MACtD,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,gBAAA,GAAmB,CAAC,IAAA,KAA0B;AAClD,MAAA,IAAI,KAAK,QAAA,EAAU;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,IAAA,CAAK,OAAA,IAAU;AACf,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,MAAM,QAAA,GAAW,MAAM,MAAA,GAAS,CAAA;AAEhC,IAAA,uBACE,IAAA,CAAC,SAAI,GAAA,EAAK,OAAA,EAAS,WAAW,EAAA,CAAG,sBAAA,EAAwB,SAAS,CAAA,EAChE,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,OAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA;AAAA,UACA,OAAA;AAAA,UACA,OAAA;AAAA,UACA,SAAA,EAAW,EAAA,CAAG,gBAAA,EAAkB,OAAA,KAAY,UAAU,YAAY,CAAA;AAAA,UACjE,GAAG,WAAA;AAAA,UAEH,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,IAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA,EAAU,QAAA,IAAY,OAAA,IAAW,CAAC,QAAA;AAAA,UAClC,YAAA,EAAY,SAAA;AAAA,UACZ,eAAA,EAAc,MAAA;AAAA,UACd,eAAA,EAAe,IAAA;AAAA,UACf,eAAA,EAAe,MAAA;AAAA,UACf,SAAS,MAAM,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,UACtC,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,OAAA,KAAY,UAAU,UAAU,CAAA;AAAA,UAErE,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,4BAAA;AAAA,cACN,OAAA,EAAQ,WAAA;AAAA,cACR,IAAA,EAAK,cAAA;AAAA,cACL,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,IAAA,IAAQ,YAAY,CAAA;AAAA,cAC/E,aAAA,EAAY,MAAA;AAAA,cAEZ,QAAA,kBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAS,SAAA;AAAA,kBACT,CAAA,EAAE,qIAAA;AAAA,kBACF,QAAA,EAAS;AAAA;AAAA;AACX;AAAA;AACF;AAAA,OACF;AAAA,MAEC,QAAQ,QAAA,oBACP,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,MAAA;AAAA,UACJ,IAAA,EAAK,MAAA;AAAA,UACL,SAAA,EAAW,EAAA;AAAA,YACT,kHAAA;AAAA,YACA,KAAA,KAAU,UAAU,SAAA,GAAY,QAAA;AAAA,YAChC;AAAA,WACF;AAAA,UAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAChB,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAEC,IAAA,EAAK,QAAA;AAAA,cACL,IAAA,EAAK,UAAA;AAAA,cACL,UAAU,IAAA,CAAK,QAAA;AAAA,cACf,OAAA,EAAS,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,cACpC,SAAA,EAAW,EAAA;AAAA,gBACT,iEAAA;AAAA,gBACA,IAAA,CAAK,QAAA,GACD,+BAAA,GACA,IAAA,CAAK,cACH,8BAAA,GACA;AAAA,eACR;AAAA,cAEC,QAAA,EAAA,IAAA,CAAK;AAAA,aAAA;AAAA,YAdD,IAAA,CAAK,GAAA,IAAO,CAAA,WAAA,EAAc,KAAK,CAAA;AAAA,WAgBvC;AAAA;AAAA;AACH,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;ACza1B,IAAM,OAAA,GAAoC;AAAA,EACtC,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,KAAA,EAAO;AACX,CAAA;AAEA,IAAM,QAAA,GAAsC;AAAA,EACxC,OAAA,EAAS,cAAA;AAAA,EACT,SAAA,EAAW,gBAAA;AAAA,EACX,MAAA,EAAQ,aAAA;AAAA,EACR,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,WAAA;AAAA,EACN,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,KAAA,EAAO,YAAA;AAAA,EACP,OAAA,EAAS;AACb,CAAA;AAEO,IAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACtB,CAAC,EAAE,IAAA,EAAM,YAAA,EAAc,IAAA,EAAM,IAAA,GAAO,IAAA,EAAM,KAAA,GAAQ,SAAA,EAAW,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACxF,IAAA,MAAM,SAAA,GAAY,QAAQ,IAAI,CAAA;AAE9B,IAAA,MAAM,eAAe,KAAA,IAAS,MAAA,CAAO,KAAK,QAAQ,CAAA,CAAE,SAAS,KAAe,CAAA;AAC5E,IAAA,MAAM,UAAA,GAAa,YAAA,GAAe,QAAA,CAAS,KAAkB,CAAA,GAAI,EAAA;AACjE,IAAA,MAAM,WAAA,GAAc,CAAC,YAAA,GAAe,KAAA,GAAQ,MAAA;AAG5C,IAAA,MAAM,aAAA,GAAgB,YAAA,KAAiB,IAAA,GAAQ,WAAA,CAAY,IAAI,CAAA,GAA0B,IAAA,CAAA;AAEzF,IAAA,IAAI,CAAC,aAAA,EAAe;AAChB,MAAA,OAAA,CAAQ,KAAK,CAAA,sEAAA,CAAwE,CAAA;AACrF,MAAA,OAAO,IAAA;AAAA,IACX;AAKA,IAAA,uBACIA,GAAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACG,GAAA;AAAA,QACA,KAAA,EAAO,SAAA;AAAA,QACP,MAAA,EAAQ,SAAA;AAAA,QAER,IAAA,EAAM,SAAA;AAAA,QAEN,KAAA,EAAO,WAAA;AAAA,QACP,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,GAAG,MAAM,KAAA,EAAM;AAAA,QAC5C,SAAA,EAAW,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,aAAa,EAAE,CAAA,CAAA;AAAA,QAC1C,GAAG;AAAA;AAAA,KACR;AAAA,EAER;AACJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import { forwardRef, useEffect, useId, useRef, useState } from 'react';\nimport type { ComponentProps } from '../../types';\nimport { cn } from '../../utils/cn';\n\nexport type ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'text' | 'link';\nexport type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';\n\nexport interface ButtonProps extends Omit<ComponentProps<'button'>, 'type'> {\n  /**\n   * The visual style variant of the button\n   * @default 'solid'\n   */\n  variant?: ButtonVariant;\n  /**\n   * The type theme of the button\n   * @default 'primary'\n   */\n  type?: ButtonType;\n  /**\n   * Custom hex, rgb, or css color string that overrides the type colors\n   */\n  color?: string;\n  /**\n   * The size of the button\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Whether the button should take full width of its container\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Optional text shown while loading.\n   */\n  loadingText?: React.ReactNode;\n  /**\n   * Whether the button should show temporary success feedback.\n   */\n  success?: boolean;\n  /**\n   * Optional text shown in success state.\n   */\n  successText?: React.ReactNode;\n  /**\n   * Optional icon shown in success state.\n   */\n  successIcon?: React.ReactNode;\n  /**\n   * Duration in milliseconds before success state resets.\n   * @default 1500\n   */\n  successDuration?: number;\n  /**\n   * Element to place before the children.\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Element to place after the children.\n   */\n  endIcon?: React.ReactNode;\n}\n\nexport interface SplitButtonItem {\n  /**\n   * Stable key for rendering list items\n   */\n  key?: string;\n  /**\n   * Rendered menu item label\n   */\n  label: React.ReactNode;\n  /**\n   * Item click handler\n   */\n  onClick?: () => void;\n  /**\n   * Whether the item is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Marks a destructive menu item with error color\n   */\n  destructive?: boolean;\n}\n\nexport interface SplitButtonProps extends Omit<ButtonProps, 'children' | 'onClick' | 'fullWidth'> {\n  /**\n   * Main action label/content\n   */\n  label: React.ReactNode;\n  /**\n   * Main action handler\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Dropdown menu items\n   */\n  items: SplitButtonItem[];\n  /**\n   * Accessible label for toggle button\n   * @default 'More actions'\n   */\n  menuLabel?: string;\n  /**\n   * Menu alignment relative to trigger\n   * @default 'right'\n   */\n  align?: 'left' | 'right';\n  /**\n   * Optional wrapper classes for split group container\n   */\n  className?: string;\n  /**\n   * Optional menu panel classes\n   */\n  menuClassName?: string;\n}\n\nconst sizeClasses = {\n  sm: 'px-3 py-1.5 text-sm',\n  md: 'px-4 py-2 text-base',\n  lg: 'px-6 py-3 text-lg',\n};\n\nconst variantClasses: Record<ButtonVariant, Record<ButtonType, string>> = {\n  solid: {\n    primary: 'bg-primary text-primary-content hover:opacity-90',\n    secondary: 'bg-secondary text-secondary-content hover:opacity-90',\n    success: 'bg-success text-success-content hover:opacity-90',\n    danger: 'bg-error text-error-content hover:opacity-90',\n    warning: 'bg-warning text-warning-content hover:opacity-90',\n    info: 'bg-info text-info-content hover:opacity-90',\n    ghost: 'bg-base-200 text-base-content hover:bg-base-300',\n  },\n  outlined: {\n    primary: 'border border-primary text-primary bg-transparent hover:bg-primary/10',\n    secondary: 'border border-secondary text-secondary bg-transparent hover:bg-secondary/10',\n    success: 'border border-success text-success bg-transparent hover:bg-success/10',\n    danger: 'border border-error text-error bg-transparent hover:bg-error/10',\n    warning: 'border border-warning text-warning bg-transparent hover:bg-warning/10',\n    info: 'border border-info text-info bg-transparent hover:bg-info/10',\n    ghost: 'border border-base-200 text-base-content bg-transparent hover:bg-base-200/10',\n  },\n  dashed: {\n    primary: 'border border-dashed border-primary text-primary bg-transparent hover:bg-primary/10',\n    secondary: 'border border-dashed border-secondary text-secondary bg-transparent hover:bg-secondary/10',\n    success: 'border border-dashed border-success text-success bg-transparent hover:bg-success/10',\n    danger: 'border border-dashed border-error text-error bg-transparent hover:bg-error/10',\n    warning: 'border border-dashed border-warning text-warning bg-transparent hover:bg-warning/10',\n    info: 'border border-dashed border-info text-info bg-transparent hover:bg-info/10',\n    ghost: 'border border-dashed border-base-200 text-base-content bg-transparent hover:bg-base-200/10',\n  },\n  text: {\n    primary: 'text-primary bg-transparent hover:bg-primary/10',\n    secondary: 'text-secondary bg-transparent hover:bg-secondary/10',\n    success: 'text-success bg-transparent hover:bg-success/10',\n    danger: 'text-error bg-transparent hover:bg-error/10',\n    warning: 'text-warning bg-transparent hover:bg-warning/10',\n    info: 'text-info bg-transparent hover:bg-info/10',\n    ghost: 'text-base-content bg-transparent hover:bg-base-200/10',\n  },\n  link: {\n    primary: 'text-primary underline bg-transparent hover:text-primary/80',\n    secondary: 'text-secondary underline bg-transparent hover:text-secondary/80',\n    success: 'text-success underline bg-transparent hover:text-success/80',\n    danger: 'text-error underline bg-transparent hover:text-error/80',\n    warning: 'text-warning underline bg-transparent hover:text-warning/80',\n    info: 'text-info underline bg-transparent hover:text-info/80',\n    ghost: 'text-base-content underline bg-transparent hover:text-base-content/80',\n  },\n};\n\nconst getButtonClasses = (variant: ButtonVariant, type: ButtonType) => {\n  return variantClasses[variant][type] || variantClasses.solid.primary;\n};\n\nconst SuccessIcon = () => (\n  <svg\n    className=\"h-4 w-4\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    aria-hidden=\"true\"\n  >\n    <path\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2.5\"\n      d=\"M5 12.5l4.5 4.5L19 7.5\"\n    />\n  </svg>\n);\n\n/**\n * Primary UI component for user interaction\n *\n * Supports all standard HTML button attributes including `style` and `className`.\n * - Use `type` and `variant` for standard theming.\n * - Use `className` with Tailwind classes for one-off overrides (merged intelligently).\n * - Use `style` for inline dynamic styles.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'solid',\n      type = 'primary',\n      size = 'md',\n      fullWidth = false,\n      loading = false,\n      loadingText,\n      success = false,\n      successText,\n      successIcon,\n      successDuration = 1500,\n      disabled = false,\n      startIcon,\n      endIcon,\n      color,\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [isShowingSuccess, setIsShowingSuccess] = useState(false);\n\n    useEffect(() => {\n      if (!success || loading) {\n        return;\n      }\n\n      setIsShowingSuccess(true);\n      const timer = window.setTimeout(() => {\n        setIsShowingSuccess(false);\n      }, successDuration);\n\n      return () => window.clearTimeout(timer);\n    }, [success, loading, successDuration]);\n\n    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-[var(--radius-selector)] transition-all duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 gap-2';\n    const variantClass = getButtonClasses(variant, type);\n    const sizeClass = sizeClasses[size];\n    const widthClass = fullWidth ? 'w-full' : '';\n    const loadingClass = loading ? 'cursor-wait' : '';\n\n    const combinedClasses = cn(\n      baseClasses,\n      variantClass,\n      sizeClass,\n      widthClass,\n      loadingClass,\n      className\n    );\n\n    const customStyle: React.CSSProperties = { ...props.style };\n    if (color) {\n      if (variant === 'solid') {\n        customStyle.backgroundColor = color;\n        customStyle.borderColor = color;\n      } else if (variant === 'outlined' || variant === 'dashed') {\n        customStyle.borderColor = color;\n        customStyle.color = color;\n      } else if (variant === 'text' || variant === 'link') {\n        customStyle.color = color;\n      }\n    }\n\n    const content = loading\n      ? loadingText ?? children\n      : isShowingSuccess\n        ? successText ?? children\n        : children;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={combinedClasses}\n        style={customStyle}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading && (\n          <svg\n            className=\"animate-spin -ml-1 h-4 w-4\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              className=\"opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n            />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        )}\n        {!loading && isShowingSuccess && <span className=\"inline-flex shrink-0\">{successIcon ?? <SuccessIcon />}</span>}\n        {!loading && !isShowingSuccess && startIcon && <span className=\"inline-flex shrink-0\">{startIcon}</span>}\n        {content}\n        {!loading && !isShowingSuccess && endIcon && <span className=\"inline-flex shrink-0\">{endIcon}</span>}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>(\n  (\n    {\n      label,\n      onClick,\n      items,\n      menuLabel = 'More actions',\n      align = 'right',\n      variant = 'solid',\n      type = 'primary',\n      size = 'md',\n      color,\n      disabled = false,\n      loading = false,\n      className,\n      menuClassName,\n      ...buttonProps\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const menuId = useId();\n\n    useEffect(() => {\n      const handleEscape = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          setOpen(false);\n        }\n      };\n\n      document.addEventListener('keydown', handleEscape);\n\n      return () => {\n        document.removeEventListener('keydown', handleEscape);\n      };\n    }, []);\n\n    const handleItemSelect = (item: SplitButtonItem) => {\n      if (item.disabled) {\n        return;\n      }\n\n      item.onClick?.();\n      setOpen(false);\n    };\n\n    const hasItems = items.length > 0;\n\n    return (\n      <div ref={rootRef} className={cn('relative inline-flex', className)}>\n        <Button\n          ref={ref}\n          variant={variant}\n          type={type}\n          size={size}\n          color={color}\n          disabled={disabled}\n          loading={loading}\n          onClick={onClick}\n          className={cn('rounded-r-none', variant !== 'link' && 'border-r-0')}\n          {...buttonProps}\n        >\n          {label}\n        </Button>\n\n        <Button\n          variant={variant}\n          type={type}\n          size={size}\n          color={color}\n          disabled={disabled || loading || !hasItems}\n          aria-label={menuLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          aria-controls={menuId}\n          onClick={() => setOpen((prev) => !prev)}\n          className={cn('rounded-l-none px-3', variant !== 'link' && 'border-l')}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            className={cn('h-4 w-4 transition-transform duration-150', open && 'rotate-180')}\n            aria-hidden=\"true\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </Button>\n\n        {open && hasItems && (\n          <div\n            id={menuId}\n            role=\"menu\"\n            className={cn(\n              'absolute z-20 top-full mt-2 min-w-44 overflow-hidden rounded-lg border border-base-300 bg-base-100 p-1 shadow-lg',\n              align === 'right' ? 'right-0' : 'left-0',\n              menuClassName\n            )}\n          >\n            {items.map((item, index) => (\n              <button\n                key={item.key ?? `split-item-${index}`}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={item.disabled}\n                onClick={() => handleItemSelect(item)}\n                className={cn(\n                  'w-full rounded-md px-3 py-2 text-left text-sm transition-colors',\n                  item.disabled\n                    ? 'cursor-not-allowed opacity-50'\n                    : item.destructive\n                      ? 'text-error hover:bg-error/10'\n                      : 'text-base-content hover:bg-base-200'\n                )}\n              >\n                {item.label}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSplitButton.displayName = 'SplitButton';\n","import * as LucideIcons from 'lucide-react';\nimport React from 'react';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport type IconColor =\n    | 'primary'\n    | 'secondary'\n    | 'accent'\n    | 'neutral'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'current';\n\nexport type IconName = keyof typeof LucideIcons;\n\nexport interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'color'> {\n    /** The icon component to render (e.g., from Phosphor, Heroicons, Radix, etc.) */\n    icon?: React.ElementType;\n    /** The name of the Lucide icon to render (backward compatibility) */\n    name?: IconName;\n    /** Size of the icon */\n    size?: IconSize;\n    /** Color of the icon. Can be a theme color (e.g., 'primary') or any valid CSS color string. */\n    color?: IconColor | string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n    xs: 12,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 48,\n    '2xl': 64,\n};\n\nconst colorMap: Record<IconColor, string> = {\n    primary: 'text-primary',\n    secondary: 'text-secondary',\n    accent: 'text-accent',\n    neutral: 'text-neutral',\n    info: 'text-info',\n    success: 'text-success',\n    warning: 'text-warning',\n    error: 'text-error',\n    current: 'text-current',\n};\n\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n    ({ icon: ExplicitIcon, name, size = 'md', color = 'current', className, ...props }, ref) => {\n        const sizeValue = sizeMap[size];\n\n        const isThemeColor = color && Object.keys(colorMap).includes(color as string);\n        const colorClass = isThemeColor ? colorMap[color as IconColor] : '';\n        const customColor = !isThemeColor ? color : undefined;\n\n        // Resolve the component to render: explicitly passed icon takes precedence over named lucide icon.\n        const IconComponent = ExplicitIcon || (name ? (LucideIcons[name] as React.ElementType) : null);\n\n        if (!IconComponent) {\n            console.warn(`Icon: No icon provided. Pass either 'icon' component or 'name' string.`);\n            return null;\n        }\n\n        // We pass standard SVG width/height and color styles. \n        // This makes it compatible with almost ALL external icon libraries out of the box\n        // because components generally forward standard SVG props to their root <svg>.\n        return (\n            <IconComponent\n                ref={ref}\n                width={sizeValue}\n                height={sizeValue}\n                // Fallback for libraries like Lucide or Phosphor that use a custom `size` prop\n                size={sizeValue}\n                // Fallback for libraries like Lucide or Phosphor that use a custom `color` prop\n                color={customColor}\n                style={{ color: customColor, ...props.style }}\n                className={`${colorClass} ${className || ''}`}\n                {...props}\n            />\n        );\n    }\n);\n\nIcon.displayName = 'Icon';\n"]}

package/dist/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./theme.css";

package/dist/theme.css

@@ -0,0 +1,145 @@
+/* Theme tokens: Tailwind utilities use these; values come from theme selectors below */
+@theme {
+  /* Colors (semantic) */
+  --color-base-100: var(--theme-base-100);
+  --color-base-200: var(--theme-base-200);
+  --color-base-300: var(--theme-base-300);
+  --color-base-content: var(--theme-base-content);
+  --color-primary: var(--theme-primary);
+  --color-primary-content: var(--theme-primary-content);
+  --color-secondary: var(--theme-secondary);
+  --color-secondary-content: var(--theme-secondary-content);
+  --color-accent: var(--theme-accent);
+  --color-accent-content: var(--theme-accent-content);
+  --color-neutral: var(--theme-neutral);
+  --color-neutral-content: var(--theme-neutral-content);
+  --color-info: var(--theme-info);
+  --color-info-content: var(--theme-info-content);
+  --color-success: var(--theme-success);
+  --color-success-content: var(--theme-success-content);
+  --color-warning: var(--theme-warning);
+  --color-warning-content: var(--theme-warning-content);
+  --color-error: var(--theme-error);
+  --color-error-content: var(--theme-error-content);
+
+  /* Radius */
+  --radius-selector: var(--theme-radius-selector);
+  --radius-field: var(--theme-radius-field);
+  --radius-box: var(--theme-radius-box);
+
+  /* Size */
+  --size-selector: var(--theme-size-selector);
+  --size-field: var(--theme-size-field);
+
+  /* Border */
+  --border-width: var(--theme-border);
+
+  /* Typography (unchanged) */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 200ms ease-in-out;
+  --transition-slow: 300ms ease-in-out;
+}
+
+/* ========== Winter (light) – default ========== */
+:root,
+[data-theme="winter"] {
+  color-scheme: light;
+
+  --theme-base-100: oklch(97% 0.013 236.62);
+  --theme-base-200: oklch(95% 0.026 236.824);
+  --theme-base-300: oklch(90% 0.058 230.902);
+  --theme-base-content: oklch(39% 0.09 240.876);
+  --theme-primary: oklch(80% 0.105 251.813);
+  --theme-primary-content: oklch(28% 0.091 267.935);
+  --theme-secondary: oklch(82% 0.111 230.318);
+  --theme-secondary-content: oklch(29% 0.066 243.157);
+  --theme-accent: oklch(0% 0 0);
+  --theme-accent-content: oklch(100% 0 0);
+  --theme-neutral: oklch(44% 0.11 240.79);
+  --theme-neutral-content: oklch(97% 0.013 236.62);
+  --theme-info: oklch(58% 0.158 241.966);
+  --theme-info-content: oklch(97% 0.013 236.62);
+  --theme-success: oklch(60% 0.118 184.704);
+  --theme-success-content: oklch(98% 0.014 180.72);
+  --theme-warning: oklch(66% 0.179 58.318);
+  --theme-warning-content: oklch(98% 0.022 95.277);
+  --theme-error: oklch(58% 0.253 17.585);
+  --theme-error-content: oklch(96% 0.015 12.422);
+
+  --theme-radius-selector: 0.5rem;
+  --theme-radius-field: 0rem;
+  --theme-radius-box: 1rem;
+  --theme-size-selector: 0.25rem;
+  --theme-size-field: 0.25rem;
+  --theme-border: 1px;
+  --theme-depth: 1;
+  --theme-noise: 0;
+}
+
+/* ========== Starlight (dark) ========== */
+[data-theme="starlight"] {
+  color-scheme: dark;
+
+  --theme-base-100: oklch(27% 0.041 260.031);
+  --theme-base-200: oklch(20% 0.042 265.755);
+  --theme-base-300: oklch(35% 0.041 260.031);
+  --theme-base-content: oklch(96% 0.007 247.896);
+  --theme-primary: oklch(80% 0.105 251.813);
+  --theme-primary-content: oklch(28% 0.091 267.935);
+  --theme-secondary: oklch(82% 0.111 230.318);
+  --theme-secondary-content: oklch(29% 0.066 243.157);
+  --theme-accent: oklch(89% 0.057 293.283);
+  --theme-accent-content: oklch(28% 0.091 267.935);
+  --theme-neutral: oklch(70% 0.041 260.031);
+  --theme-neutral-content: oklch(98% 0.003 247.858);
+  --theme-info: oklch(70% 0.165 254.624);
+  --theme-info-content: oklch(28% 0.091 267.935);
+  --theme-success: oklch(84% 0.238 128.85);
+  --theme-success-content: oklch(27% 0.072 132.109);
+  --theme-warning: oklch(85% 0.199 91.936);
+  --theme-warning-content: oklch(28% 0.066 53.813);
+  --theme-error: oklch(70% 0.191 22.216);
+  --theme-error-content: oklch(25% 0.092 26.042);
+
+  --theme-radius-selector: 0.5rem;
+  --theme-radius-field: 2rem;
+  --theme-radius-box: 0.5rem;
+  --theme-size-selector: 0.25rem;
+  --theme-size-field: 0.25rem;
+  --theme-border: 1px;
+  --theme-depth: 0;
+  --theme-noise: 0;
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@sehgaltech/psui",
+  "version": "1.0.0",
+  "description": "A scalable and customizable UI library built with Tailwind CSS v4, TypeScript, and React",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "ui-library",
+    "react",
+    "typescript",
+    "tailwindcss",
+    "components",
+    "design-system"
+  ],
+  "author": "purvisehgal",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "jsdom": "^23.0.1",
+    "tailwindcss": "^4.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.18"
+  },
+  "overrides": {
+    "minimatch": "^10.2.1"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@remixicon/react": "^4.9.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "@types/react-window": "^1.8.8",
+    "clsx": "^2.1.1",
+    "iconoir-react": "^7.11.0",
+    "lucide-react": "^0.574.0",
+    "react-virtualized-auto-sizer": "^2.0.3",
+    "react-window": "^2.2.7",
+    "tailwind-merge": "^3.5.0"
+  }
+}