@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-LTG6YP5I.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+var ThemeProviderContext = react.createContext(void 0);
+var ThemeProvider = ({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  themeConfig,
+  ...props
+}) => {
+  const [theme, setTheme] = react.useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = localStorage.getItem(storageKey);
+    return stored ? stored : defaultTheme;
+  });
+  react.useEffect(() => {
+    const root = window.document.documentElement;
+    const applyTheme = () => {
+      root.classList.remove("light", "dark");
+      const currentTheme = theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+      root.classList.add(currentTheme);
+      if (themeConfig) {
+        const config = themeConfig[currentTheme] ?? {};
+        Object.entries(config).forEach(([key, value2]) => {
+          if (value2) {
+            const variableName = `--${key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`;
+            root.style.setProperty(variableName, value2);
+          }
+        });
+      }
+    };
+    applyTheme();
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const listener = () => {
+        applyTheme();
+      };
+      mediaQuery.addEventListener("change", listener);
+      return () => {
+        mediaQuery.removeEventListener("change", listener);
+      };
+    }
+    return void 0;
+  }, [theme, themeConfig]);
+  const value = {
+    theme,
+    setTheme: (newTheme) => {
+      localStorage.setItem(storageKey, newTheme);
+      setTheme(newTheme);
+    }
+  };
+  if (themeConfig !== void 0) {
+    value.themeConfig = themeConfig;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProviderContext.Provider, { ...props, value, children });
+};
+var useTheme = () => {
+  const context = react.useContext(ThemeProviderContext);
+  if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/chunk-MVUNJPGH.cjs

@@ -0,0 +1,184 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var containerSize = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-9 h-9",
+  xl: "w-12 h-12"
+};
+var dotSize = {
+  xs: "w-1 h-1",
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-3 h-3",
+  xl: "w-4 h-4"
+};
+var barHeight = {
+  xs: "h-0.5 w-16",
+  sm: "h-1 w-24",
+  md: "h-1.5 w-32",
+  lg: "h-2 w-48",
+  xl: "h-2.5 w-64"
+};
+var pulseSize = {
+  xs: "w-5 h-5",
+  sm: "w-7 h-7",
+  md: "w-10 h-10",
+  lg: "w-14 h-14",
+  xl: "w-20 h-20"
+};
+var colorClass = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  white: "text-text-inverse",
+  current: "text-current"
+};
+var bgColorClass = {
+  primary: "bg-primary",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  error: "bg-error",
+  warning: "bg-warning",
+  white: "bg-text-inverse",
+  current: "bg-current"
+};
+function Spinner({ size, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("relative flex items-center justify-center", containerSize[size]), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "absolute inset-0 rounded-full border-2 border-current opacity-20 animate-ping",
+          colorClass[color]
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: chunkL5VQZZVR_cjs.cn("animate-spin relative z-10", containerSize[size], colorClass[color]),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "3"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              className: "opacity-90",
+              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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Dots({ size, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: { animationDelay: `${String(i * 160)}ms` },
+      className: chunkL5VQZZVR_cjs.cn("rounded-full animate-bounce", dotSize[size], bgColorClass[color])
+    },
+    i
+  )) });
+}
+function Pulse({ size, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.cn(
+        "rounded-full animate-ping",
+        pulseSize[size],
+        bgColorClass[color],
+        "opacity-75"
+      )
+    }
+  );
+}
+function Bar({ size, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.cn("rounded-full overflow-hidden bg-divider", barHeight[size]),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunkL5VQZZVR_cjs.cn(
+            "h-full rounded-full animate-[bar-slide_1.4s_ease-in-out_infinite]",
+            bgColorClass[color]
+          ),
+          style: { width: "40%", animation: "bar-slide 1.4s ease-in-out infinite" }
+        }
+      )
+    }
+  );
+}
+var VARIANTS = {
+  spinner: Spinner,
+  dots: Dots,
+  pulse: Pulse,
+  bar: Bar
+};
+function Loader({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  label = "Loading\u2026",
+  fullscreen = false,
+  className
+}) {
+  const VariantComponent = VARIANTS[variant];
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: chunkL5VQZZVR_cjs.cn(
+        "inline-flex flex-col items-center justify-center gap-2",
+        !fullscreen && className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(VariantComponent, { size, color }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "fixed inset-0 z-50 flex items-center justify-center bg-surface/80 backdrop-blur-md",
+          className
+        ),
+        children: inner
+      }
+    );
+  }
+  return inner;
+}
+
+exports.Loader = Loader;

package/dist/chunk-NMJ5CVZH.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/chunk-NRCNRHXL.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/20/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var SEPARATORS = {
+  slash: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "select-none text-text-muted/60", children: "/" }),
+  chevron: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronRightIcon, { "aria-hidden": "true", className: "w-4 h-4 text-text-muted/60 shrink-0" }),
+  dot: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "select-none text-text-muted/60", children: "\xB7" })
+};
+function resolveSeparator(sep) {
+  if (typeof sep === "string" && sep in SEPARATORS) return SEPARATORS[sep];
+  return sep;
+}
+function Crumb({ item, isCurrent, size }) {
+  const baseClass = chunkL5VQZZVR_cjs.cn(
+    "inline-flex items-center gap-1 transition-colors leading-none",
+    sizeClasses[size],
+    isCurrent ? "font-bold text-text cursor-default" : item.disabled ? "text-text-muted cursor-not-allowed" : "text-primary hover:text-primary-hover hover:underline underline-offset-4 cursor-pointer"
+  );
+  if (isCurrent) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: baseClass, "aria-current": "page", children: item.label });
+  }
+  if (item.disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: baseClass, children: item.label });
+  }
+  if (item.onClick != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: baseClass, children: item.label });
+  }
+  if (item.href != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, className: baseClass, children: item.label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: baseClass, children: item.label });
+}
+function Breadcrumbs({
+  items,
+  separator = "chevron",
+  size = "sm",
+  collapsible = false,
+  maxItems = 4,
+  className
+}) {
+  const [expanded, setExpanded] = react.useState(false);
+  if (items.length === 0) return null;
+  const sep = resolveSeparator(separator);
+  let visibleItems;
+  let showEllipsis = false;
+  if (collapsible && !expanded && items.length > maxItems) {
+    const keep = Math.max(1, maxItems - 1);
+    visibleItems = items.slice(0, keep);
+    showEllipsis = true;
+  } else {
+    visibleItems = items;
+  }
+  const segments = [];
+  visibleItems.forEach((item, idx) => {
+    const isCurrent = !showEllipsis && idx === items.length - 1;
+    if (idx > 0) {
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "flex items-center", children: sep }, `sep-${String(idx)}`)
+      );
+    }
+    segments.push(
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Crumb, { item, isCurrent, size }) }, `item-${String(idx)}`)
+    );
+  });
+  if (showEllipsis) {
+    segments.push(
+      /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "flex items-center", children: sep }, "sep-ellipsis")
+    );
+    segments.push(
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show full path",
+          onClick: () => {
+            setExpanded(true);
+          },
+          className: chunkL5VQZZVR_cjs.cn(
+            "text-text-muted hover:text-text-secondary transition-colors leading-none px-1",
+            sizeClasses[size]
+          ),
+          children: "\xB7\xB7\xB7"
+        }
+      ) }, "ellipsis")
+    );
+    const last = items[items.length - 1];
+    if (last != null) {
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", className: "flex items-center", children: sep }, "sep-last")
+      );
+      segments.push(
+        /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Crumb, { item: last, isCurrent: true, size }) }, "item-last")
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className: chunkL5VQZZVR_cjs.cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: chunkL5VQZZVR_cjs.cn("flex flex-wrap items-center gap-1", sizeClasses[size]), children: segments }) });
+}
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/chunk-NRZIXK35.cjs

@@ -0,0 +1,276 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "w-8 h-8 text-sm",
+  sm: "w-10 h-10 text-base",
+  md: "w-12 h-12 text-lg",
+  lg: "w-14 h-14 text-xl",
+  xl: "w-16 h-16 text-2xl"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-0",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0",
+  unstyled: "border-0 bg-transparent p-0 focus:outline-none focus:ring-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus:border-primary focus:ring-primary/40",
+    filled: "focus:border-primary focus:ring-primary/40",
+    flushed: "border-border focus:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus:border-error focus:ring-error/20",
+    filled: "bg-error/5 focus:border-error focus:ring-error/20",
+    flushed: "border-error focus:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus:border-success focus:ring-success/20",
+    filled: "bg-success/5 focus:border-success focus:ring-success/20",
+    flushed: "border-success focus:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus:border-warning focus:ring-warning/20",
+    filled: "bg-warning/5 focus:border-warning focus:ring-warning/20",
+    flushed: "border-warning focus:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+var OtpInput = react.forwardRef(function OtpInput2({
+  length = 4,
+  value = "",
+  onChange,
+  onComplete,
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  className,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled = false,
+  isLoading = false,
+  mask = false,
+  alphanumeric = false
+}, ref) {
+  const generatedId = react.useId();
+  const componentId = idProp ?? generatedId;
+  const helperId = `${componentId}-helper`;
+  const stateMessageId = `${componentId}-state`;
+  const [otpValues, setOtpValues] = react.useState(Array.from({ length }, () => ""));
+  const inputRefs = react.useRef([]);
+  react.useEffect(() => {
+    const charArray = value.split("").slice(0, length);
+    const newOtpValues = Array.from({ length }, () => "");
+    for (let i = 0; i < charArray.length; i++) {
+      newOtpValues[i] = charArray[i] ?? "";
+    }
+    requestAnimationFrame(() => {
+      setOtpValues((prev) => {
+        const isDifferent = newOtpValues.some((v, idx) => v !== prev[idx]);
+        return isDifferent ? newOtpValues : prev;
+      });
+    });
+  }, [value, length]);
+  const triggerChange = (newValues) => {
+    const stringValue = newValues.join("");
+    if (onChange) {
+      onChange(stringValue);
+    }
+    if (onComplete && stringValue.length === length && !newValues.includes("")) {
+      onComplete(stringValue);
+    }
+  };
+  const focusInput = (index) => {
+    if (index >= 0 && index < length) {
+      inputRefs.current[index]?.focus();
+      setTimeout(() => {
+        inputRefs.current[index]?.setSelectionRange(1, 1);
+      }, 0);
+    }
+  };
+  const handleInputChange = (e, index) => {
+    let safeChar = e.target.value;
+    if (safeChar.length > 1) {
+      safeChar = safeChar.slice(-1);
+    }
+    if (!alphanumeric && safeChar && !/^\d+$/.test(safeChar)) {
+      return;
+    }
+    if (alphanumeric && safeChar && !/^[a-zA-Z0-9]+$/.test(safeChar)) {
+      return;
+    }
+    const newValues = [...otpValues];
+    newValues[index] = safeChar;
+    setOtpValues(newValues);
+    triggerChange(newValues);
+    if (safeChar && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace") {
+      if (!otpValues[index] && index > 0) {
+        e.preventDefault();
+        const newValues = [...otpValues];
+        newValues[index - 1] = "";
+        setOtpValues(newValues);
+        triggerChange(newValues);
+        focusInput(index - 1);
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      focusInput(index - 1);
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault();
+      focusInput(index + 1);
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    let pastedData = e.clipboardData.getData("text/plain").trim();
+    if (!alphanumeric) {
+      pastedData = pastedData.replace(/[^\d]/g, "");
+    } else {
+      pastedData = pastedData.replace(/[^a-zA-Z0-9]/g, "");
+    }
+    if (!pastedData) return;
+    const newValues = [...otpValues];
+    let focusIndex = -1;
+    for (let i = 0; i < length; i++) {
+      if (i < pastedData.length) {
+        newValues[i] = pastedData[i] ?? "";
+        focusIndex = i;
+      }
+    }
+    setOtpValues(newValues);
+    triggerChange(newValues);
+    if (focusIndex > -1) {
+      focusInput(Math.min(focusIndex + 1, length - 1));
+    }
+  };
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const isComponentDisabled = disabled || isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      id: componentId,
+      className: chunkL5VQZZVR_cjs.cn("flex flex-col gap-2 w-fit", wrapperClassName, className),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: `${componentId}-0`,
+            className: chunkL5VQZZVR_cjs.cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("flex items-center gap-2", inputGroupClassName), children: [
+          otpValues.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: `${componentId}-${String(index)}`,
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              type: mask ? "password" : "text",
+              inputMode: !alphanumeric ? "numeric" : "text",
+              autoComplete: "one-time-code",
+              maxLength: 1,
+              disabled: isComponentDisabled,
+              value: digit,
+              onChange: (e) => {
+                handleInputChange(e, index);
+              },
+              onKeyDown: (e) => {
+                handleKeyDown(e, index);
+              },
+              onPaste: handlePaste,
+              "aria-invalid": state === "error" ? true : void 0,
+              "aria-describedby": [helperId, stateMessageId].filter(Boolean).join(" ") || void 0,
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-center transition-colors duration-150",
+                sizeClasses[size],
+                variantClasses[variant],
+                stateVariantClasses[state][variant],
+                disabledClasses,
+                inputClassName
+              )
+            },
+            `${componentId}-${String(index)}`
+          )),
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowPathIcon, { className: "animate-spin h-5 w-5 text-gray-400" }) })
+        ] }),
+        helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: helperId,
+            className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: chunkL5VQZZVR_cjs.cn(
+              "text-xs leading-tight font-medium",
+              stateMessageClasses[state],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+OtpInput.displayName = "OtpInput";
+
+exports.OtpInput = OtpInput;