@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-RAD5VJHR.mjs

@@ -0,0 +1,146 @@
+import { Tooltip } from './chunk-65UZC3FK.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "h-6 px-2.5 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-6 text-base",
+  xl: "h-12 px-8 text-lg"
+};
+var iconSizeClasses = {
+  xs: "w-3 h-3",
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4",
+  lg: "w-5 h-5",
+  xl: "w-5 h-5"
+};
+var variantClasses = {
+  primary: "bg-primary text-text-inverse hover:bg-primary-hover hover:shadow-xl hover:shadow-primary/20 active:scale-95 border border-transparent shadow-md focus-visible:ring-primary/40 transition-all duration-normal",
+  secondary: "bg-secondary text-text hover:bg-secondary-hover border border-transparent focus-visible:ring-primary/40",
+  outline: "bg-transparent text-text border border-border hover:bg-hover hover:text-text focus-visible:ring-primary/40",
+  ghost: "bg-transparent text-text border border-transparent hover:bg-hover hover:text-text focus-visible:ring-primary/40",
+  danger: "bg-error text-text-inverse hover:bg-error/90 border border-transparent shadow-sm focus-visible:ring-error/40",
+  success: "bg-success text-text-inverse hover:bg-success/90 border border-transparent shadow-sm focus-visible:ring-success/40",
+  warning: "bg-warning text-text-inverse hover:bg-warning/90 border border-transparent shadow-sm focus-visible:ring-warning/40",
+  info: "bg-info text-text-inverse hover:bg-info/90 border border-transparent shadow-sm focus-visible:ring-info/40"
+};
+var disabledClasses = "opacity-50 cursor-not-allowed shadow-none";
+var Button = forwardRef(function Button2({
+  children,
+  className,
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  isLoading = false,
+  loadingText,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  tooltip,
+  tooltipPlacement = "top",
+  type = "button",
+  ...rest
+}, ref) {
+  const isDisabled = disabled || isLoading;
+  const spinnerElement = /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center justify-center", iconSizeClasses[size]), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full border-1 border-current opacity-20 animate-ping" }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "animate-spin relative z-10 w-full h-full",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        role: "status",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ 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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  const buttonElement = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: isDisabled,
+      "aria-disabled": isDisabled,
+      "aria-busy": isLoading,
+      className: cn(
+        "relative inline-flex items-center justify-center gap-2 font-bold rounded-md transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-normal focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
+        sizeClasses[size],
+        variantClasses[variant],
+        fullWidth ? "w-full" : "",
+        isDisabled ? disabledClasses : "",
+        className
+      ),
+      ...rest,
+      children: isLoading && loadingText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        spinnerElement,
+        /* @__PURE__ */ jsx("span", { children: loadingText })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex shrink-0",
+              isLoading && "invisible opacity-0"
+              // Hide icons but keep layout width when loading without text
+            ),
+            children: leftIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "truncate flex items-center justify-center",
+              // Added flex centering for icons
+              isLoading && "invisible opacity-0"
+              // Hide content but keep layout width
+            ),
+            children
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0", isLoading && "invisible opacity-0"), children: rightIcon }),
+        isLoading && !loadingText && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: spinnerElement })
+      ] })
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: tooltip,
+        placement: tooltipPlacement,
+        wrapperClassName: fullWidth ? "w-full" : "",
+        children: buttonElement
+      }
+    );
+  }
+  return buttonElement;
+});
+Button.displayName = "Button";
+
+export { Button };

package/dist/chunk-RYWDZHKG.mjs

@@ -0,0 +1,274 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useState, useRef, useEffect } from 'react';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from '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 = 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 = useId();
+  const componentId = idProp ?? generatedId;
+  const helperId = `${componentId}-helper`;
+  const stateMessageId = `${componentId}-state`;
+  const [otpValues, setOtpValues] = useState(Array.from({ length }, () => ""));
+  const inputRefs = useRef([]);
+  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__ */ jsxs(
+    "div",
+    {
+      ref,
+      id: componentId,
+      className: cn("flex flex-col gap-2 w-fit", wrapperClassName, className),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: `${componentId}-0`,
+            className: cn(
+              "font-black leading-none text-text uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", inputGroupClassName), children: [
+          otpValues.map((digit, index) => /* @__PURE__ */ 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: cn(
+                "text-center transition-colors duration-150",
+                sizeClasses[size],
+                variantClasses[variant],
+                stateVariantClasses[state][variant],
+                disabledClasses,
+                inputClassName
+              )
+            },
+            `${componentId}-${String(index)}`
+          )),
+          isLoading && /* @__PURE__ */ jsx("div", { className: "ml-2", children: /* @__PURE__ */ jsx(ArrowPathIcon, { className: "animate-spin h-5 w-5 text-gray-400" }) })
+        ] }),
+        helperText !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: helperId,
+            className: cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMessage !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: cn(
+              "text-xs leading-tight font-medium",
+              stateMessageClasses[state],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+OtpInput.displayName = "OtpInput";
+
+export { OtpInput };

package/dist/chunk-S7VEND5Z.cjs

@@ -0,0 +1,162 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var variantClasses = {
+  default: "animate-pulse bg-skeleton",
+  wave: "skeleton-wave bg-skeleton",
+  pulse: "animate-pulse bg-skeleton-shine"
+};
+var shapeClasses = {
+  rectangle: "rounded-sm",
+  circle: "rounded-full",
+  rounded: "rounded-md"
+};
+var Skeleton = react.forwardRef(function Skeleton2({ className, variant = "wave", shape = "rectangle", width, height, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      style: {
+        width: width !== void 0 ? typeof width === "number" ? `${String(width)}px` : width : void 0,
+        height: height !== void 0 ? typeof height === "number" ? `${String(height)}px` : height : void 0,
+        ...style
+      },
+      className: chunkL5VQZZVR_cjs.cn("overflow-hidden", variantClasses[variant], shapeClasses[shape], className),
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = react.forwardRef(function SkeletonText2({ lines = 3, variant = "wave", shortLast = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunkL5VQZZVR_cjs.cn("flex flex-col gap-2", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: chunkL5VQZZVR_cjs.cn(isLast && shortLast ? "w-3/5" : "w-full")
+          },
+          i
+        );
+      })
+    }
+  );
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonAvatar = react.forwardRef(function SkeletonAvatar2({ size = 40, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton,
+    {
+      ref,
+      variant,
+      shape: "circle",
+      width: size,
+      height: size,
+      className: chunkL5VQZZVR_cjs.cn("shrink-0", className),
+      ...props
+    }
+  );
+});
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonCard = react.forwardRef(function SkeletonCard2({ showImage = true, imageHeight = 160, lines = 3, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunkL5VQZZVR_cjs.cn(
+        "rounded-lg border border-border bg-surface overflow-hidden flex flex-col",
+        className
+      ),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showImage && /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton,
+          {
+            variant,
+            shape: "rectangle",
+            height: imageHeight,
+            className: "w-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant, height: 20, className: "w-2/3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonText, { lines, variant, className: "mt-1" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+SkeletonCard.displayName = "SkeletonCard";
+var SkeletonTable = react.forwardRef(function SkeletonTable2({ rows = 5, columns = 4, variant = "wave", showHeader = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: chunkL5VQZZVR_cjs.cn("w-full rounded-lg border border-border overflow-hidden bg-surface", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 border-b border-border px-4 py-2 bg-surface-secondary", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: chunkL5VQZZVR_cjs.cn(i === 0 ? "w-1/4" : i === columns - 1 ? "w-16" : "flex-1")
+          },
+          i
+        )) }),
+        Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkL5VQZZVR_cjs.cn(
+              "flex items-center gap-4 px-4 py-2",
+              rowIdx < rows - 1 && "border-b border-border"
+            ),
+            children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton,
+              {
+                variant,
+                height: 14,
+                className: chunkL5VQZZVR_cjs.cn(colIdx === 0 ? "w-1/4" : colIdx === columns - 1 ? "w-16" : "flex-1")
+              },
+              colIdx
+            ))
+          },
+          rowIdx
+        ))
+      ]
+    }
+  );
+});
+SkeletonTable.displayName = "SkeletonTable";
+
+exports.Skeleton = Skeleton;
+exports.SkeletonAvatar = SkeletonAvatar;
+exports.SkeletonCard = SkeletonCard;
+exports.SkeletonTable = SkeletonTable;
+exports.SkeletonText = SkeletonText;

package/dist/chunk-SBNNV6FE.mjs

@@ -0,0 +1 @@
+