@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-VRZFAKSV.cjs

@@ -0,0 +1,177 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+var labelSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm"
+};
+var stateClasses = {
+  default: "border-border text-accent focus:ring-accent/40 checked:border-accent checked:bg-accent",
+  error: "border-error text-error focus:ring-error/20 checked:border-error checked:bg-error",
+  success: "border-success text-success focus:ring-success/20 checked:border-success checked:bg-success",
+  warning: "border-warning text-warning focus:ring-warning/20 checked:border-warning checked:bg-warning"
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+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 RadioButton = react.forwardRef(function RadioButton2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  size = "md",
+  state = "default",
+  className,
+  wrapperClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  onClick,
+  onPointerDown,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const wasChecked = react.useRef(false);
+  const handlePointerDown = (e) => {
+    wasChecked.current = e.currentTarget.checked;
+    if (onPointerDown) onPointerDown(e);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      wasChecked.current = e.currentTarget.checked;
+    }
+    if (onKeyDown) onKeyDown(e);
+  };
+  const handleClick = (e) => {
+    if (wasChecked.current) {
+      e.currentTarget.checked = false;
+      const descriptor = Reflect.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "checked"
+      );
+      const nativeInputValueSetter = descriptor?.set;
+      if (nativeInputValueSetter) {
+        Reflect.apply(nativeInputValueSetter, e.currentTarget, [false]);
+      }
+      const event = new Event("change", { bubbles: true });
+      e.currentTarget.dispatchEvent(event);
+    }
+    if (onClick) onClick(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("flex flex-col gap-1", wrapperClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: chunkL5VQZZVR_cjs.cn("flex items-center justify-center shrink-0 relative", sizeClasses[size]),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                ...rest,
+                id: inputId,
+                type: "radio",
+                disabled,
+                "aria-invalid": state === "error" ? true : void 0,
+                "aria-describedby": describedBy,
+                required,
+                onClick: handleClick,
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                className: chunkL5VQZZVR_cjs.cn(
+                  "peer m-0 appearance-none rounded-full border bg-surface transition-all overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:cursor-not-allowed disabled:bg-surface-secondary disabled:border-border disabled:checked:bg-border",
+                  sizeClasses[size],
+                  stateClasses[state],
+                  inputClassName
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute h-[1em] w-[1em] rounded-full text-[0.4em] text-text-inverse opacity-0 transition-opacity peer-checked:bg-current peer-checked:opacity-100 peer-disabled:peer-checked:bg-text-muted/40" })
+          ]
+        }
+      ),
+      label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: chunkL5VQZZVR_cjs.cn(
+            "font-bold leading-none text-text mt-[0.125rem] select-none uppercase tracking-widest",
+            disabled && "opacity-50 cursor-not-allowed",
+            labelSizeClasses[size],
+            labelClassName
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    (helperText !== void 0 || stateMessage !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "ml-6",
+          size === "sm" && "ml-6",
+          size === "md" && "ml-7",
+          size === "lg" && "ml-8"
+        ),
+        children: [
+          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 mt-1 font-medium",
+                stateMessageClasses[state],
+                helperClassName
+              ),
+              children: stateMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+RadioButton.displayName = "RadioButton";
+
+exports.RadioButton = RadioButton;

package/dist/chunk-W2ZAPLQH.cjs

@@ -0,0 +1,337 @@
+'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: "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 focus:ring-2 focus:ring-primary/40 focus:ring-offset-0 transition-all duration-normal",
+  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 transition-all duration-normal",
+  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 getAddonPadding(hasLeft, hasRight, size) {
+  const leftPad = {
+    xs: "pl-6",
+    sm: "pl-8",
+    md: "pl-9",
+    lg: "pl-10",
+    xl: "pl-11"
+  };
+  const rightPad = {
+    xs: "pr-6",
+    sm: "pr-8",
+    md: "pr-9",
+    lg: "pr-10",
+    xl: "pr-11"
+  };
+  const parts = [];
+  if (hasLeft) parts.push(leftPad[size]);
+  if (hasRight) parts.push(rightPad[size]);
+  return parts.join(" ");
+}
+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 AddonIcon({
+  children,
+  side,
+  size,
+  pointerEvents = false
+}) {
+  const iconSizeClasses = {
+    xs: "w-3.5 h-3.5",
+    sm: "w-4 h-4",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+    xl: "w-5 h-5"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.cn(
+        "absolute top-1/2 -translate-y-1/2 text-text-secondary flex items-center justify-center",
+        !pointerEvents && "pointer-events-none",
+        side === "left" ? "left-3" : "right-3",
+        iconSizeClasses[size]
+      ),
+      children
+    }
+  );
+}
+function Addon({ children, side }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: chunkL5VQZZVR_cjs.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 DatePicker = react.forwardRef(function DatePicker2({
+  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,
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const isValueString = typeof value === "string";
+  const showClear = clearable && isValueString && 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) {
+      const descriptor = Reflect.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      );
+      const nativeInputValueSetter = descriptor?.set;
+      if (nativeInputValueSetter) {
+        Reflect.apply(nativeInputValueSetter, 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__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "animate-spin h-full w-full text-text-muted",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-hover p-0.5 transition-all duration-fast",
+          "aria-label": "Clear input",
+          children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-full h-full", strokeWidth: 2.5 })
+        }
+      );
+    }
+    return rightElement;
+  };
+  const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      id: inputId,
+      disabled: Boolean(disabled) || Boolean(isLoading),
+      type: "date",
+      value,
+      onChange,
+      "aria-invalid": state === "error" ? true : void 0,
+      "aria-describedby": describedBy,
+      "aria-required": required,
+      className: chunkL5VQZZVR_cjs.cn(
+        "w-full transition-colors duration-150",
+        sizeClasses[size],
+        variantClasses[variant],
+        stateVariantClasses[state][variant],
+        disabledClasses,
+        getAddonPadding(hasLeftElement, hasRightElement, size),
+        inputClassName
+      ),
+      ...rest
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            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-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "left", children: prefix }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 items-center", children: [
+                hasLeftElement && /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "left", size, children: leftElement }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "flex-1",
+                      prefix !== void 0 && suffix !== void 0 ? "[&>input]:rounded-none" : prefix !== void 0 ? "[&>input]:rounded-l-none" : suffix !== void 0 ? "[&>input]:rounded-r-none" : ""
+                    ),
+                    children: inputElement
+                  }
+                ),
+                hasRightElement && /* @__PURE__ */ jsxRuntime.jsx(AddonIcon, { side: "right", size, pointerEvents: !rightElement && Boolean(showClear), children: renderRightIcon() })
+              ] }),
+              suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Addon, { side: "right", children: suffix })
+            ]
+          }
+        ),
+        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 mt-1 font-medium",
+              stateMessageClasses[state],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+DatePicker.displayName = "DatePicker";
+
+exports.DatePicker = DatePicker;