@bricks-toolkit/toolkit 0.1.0 → 0.1.2

package/dist/chunk-4DR57X7U.mjs

@@ -0,0 +1,182 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { jsxs, jsx } from '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__ */ jsxs("div", { className: cn("relative flex items-center justify-center", containerSize[size]), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 rounded-full border-2 border-current opacity-20 animate-ping",
+          colorClass[color]
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: 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__ */ jsx(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "3"
+            }
+          ),
+          /* @__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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Dots({ size, color }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: { animationDelay: `${String(i * 160)}ms` },
+      className: cn("rounded-full animate-bounce", dotSize[size], bgColorClass[color])
+    },
+    i
+  )) });
+}
+function Pulse({ size, color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "rounded-full animate-ping",
+        pulseSize[size],
+        bgColorClass[color],
+        "opacity-75"
+      )
+    }
+  );
+}
+function Bar({ size, color }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("rounded-full overflow-hidden bg-divider", barHeight[size]),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: 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__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn(
+        "inline-flex flex-col items-center justify-center gap-2",
+        !fullscreen && className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(VariantComponent, { size, color }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-50 flex items-center justify-center bg-surface/80 backdrop-blur-md",
+          className
+        ),
+        children: inner
+      }
+    );
+  }
+  return inner;
+}
+
+export { Loader };

package/dist/chunk-4QSDPHPI.mjs

@@ -0,0 +1,285 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId } from 'react';
+import { XMarkIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-11 px-4 text-base",
+  xl: "h-12 px-4 text-lg"
+};
+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",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus:bg-surface focus:outline-none",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none",
+  unstyled: "border-0 bg-transparent p-0 focus:outline-none"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus:border-primary",
+    filled: "focus:border-primary",
+    flushed: "border-border focus:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus:border-error",
+    filled: "bg-error/5 focus:border-error",
+    flushed: "border-error focus:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus:border-success",
+    filled: "bg-success/5 focus:border-success",
+    flushed: "border-success focus:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus:border-warning",
+    filled: "bg-warning/5 border-warning focus:border-warning",
+    flushed: "border-warning focus:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning"
+};
+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;
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center border border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none",
+        side === "left" ? "rounded-l-md border-r-0" : "rounded-r-md border-l-0"
+      ),
+      children
+    }
+  );
+}
+var Email = forwardRef(function Email2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  className,
+  clearable,
+  isLoading,
+  multiple = false,
+  autoCapitalize = "none",
+  autoComplete = "email",
+  spellCheck = false,
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const isValueString = typeof value === "string" || typeof value === "number";
+  const showClear = clearable && isValueString && String(value).length > 0;
+  const hasLeftElement = leftElement !== void 0;
+  const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading);
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const handleClear = () => {
+    if (ref && typeof ref !== "function" && ref.current) {
+      Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(
+        ref.current,
+        ""
+      );
+      const event = new Event("input", { bubbles: true });
+      ref.current.dispatchEvent(event);
+    } else if (onChange) {
+      const e = {
+        target: { value: "" },
+        currentTarget: { value: "" },
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
+        }
+      };
+      onChange(e);
+    }
+  };
+  const renderRightIcon = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "animate-spin h-5 w-5 text-text-muted",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          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"
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-interaction-hover p-0.5 transition w-6 h-6 border-0 bg-transparent cursor-pointer",
+          "aria-label": "Clear input",
+          children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-5 h-5" })
+        }
+      );
+    }
+    return rightElement;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "font-black leading-none text-text mb-2 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-stretch transition-all duration-150 overflow-hidden",
+              variantClasses[variant],
+              stateVariantClasses[state][variant],
+              fullWidth ? "w-full" : "w-fit",
+              "focus-within:ring-4 focus-within:ring-primary/20 focus-within:border-primary",
+              disabled && "opacity-50 cursor-not-allowed bg-surface-secondary",
+              inputGroupClassName
+            ),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "left", children: prefix }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center min-w-0", children: [
+                hasLeftElement && /* @__PURE__ */ jsx("div", { className: "pl-3 shrink-0 flex items-center justify-center", children: leftElement }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 h-full", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    ...rest,
+                    id: inputId,
+                    disabled: Boolean(disabled) || Boolean(isLoading),
+                    type: "email",
+                    multiple,
+                    autoCapitalize,
+                    autoComplete,
+                    spellCheck,
+                    value,
+                    onChange,
+                    "aria-invalid": state === "error" ? true : void 0,
+                    "aria-describedby": describedBy,
+                    "aria-required": required,
+                    className: cn(
+                      "w-full bg-transparent border-0 focus:outline-none focus:ring-0 outline-none h-full",
+                      sizeClasses[size],
+                      inputClassName
+                    ),
+                    style: {
+                      paddingLeft: hasLeftElement ? "0.5rem" : void 0,
+                      paddingRight: hasRightElement || showClear ? "0.5rem" : void 0
+                    }
+                  }
+                ) }),
+                hasRightElement && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "pr-3 shrink-0 flex items-center justify-center text-text-secondary",
+                    style: { width: "2.5rem" },
+                    children: renderRightIcon()
+                  }
+                )
+              ] }),
+              suffix !== void 0 && /* @__PURE__ */ jsx(Addon, { side: "right", children: suffix })
+            ]
+          }
+        ),
+        helperText !== void 0 && /* @__PURE__ */ jsx("p", { id: helperId, className: cn("text-xs leading-tight text-text-muted", helperClassName), children: helperText }),
+        stateMessage !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: cn("text-xs leading-tight mt-1 ", stateMessageClasses[state], helperClassName),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+Email.displayName = "Email";
+
+export { Email };