@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-SFUOCZJY.mjs

@@ -0,0 +1,187 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useRef, useEffect } from 'react';
+import { CheckIcon, MinusIcon } from '@heroicons/react/16/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "w-3.5 h-3.5",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var descriptionSizeClasses = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var stateClasses = {
+  default: "border-border text-accent focus:ring-accent/40",
+  error: "border-error text-error focus:ring-error/20",
+  success: "border-success text-success focus:ring-success/20",
+  warning: "border-warning text-warning focus:ring-warning/20"
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error font-medium",
+  success: "text-success font-medium",
+  warning: "text-warning font-medium"
+};
+var disabledClasses = "disabled:opacity-50 disabled:bg-surface-secondary disabled:cursor-not-allowed disabled:border-border";
+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 Checkbox = forwardRef(function Checkbox2({
+  id: idProp,
+  label,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  size = "md",
+  state = "default",
+  indeterminate = false,
+  className,
+  containerClassName,
+  wrapperClassName,
+  inputClassName,
+  labelClassName,
+  messageClassName,
+  disabled = false,
+  required = false,
+  ...rest
+}, forwardedRef) {
+  const autoId = useId();
+  const inputId = idProp ?? `checkbox-${autoId.replace(/:/g, "")}`;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const internalRef = useRef(null);
+  const handleRef = (node) => {
+    internalRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  useEffect(() => {
+    if (internalRef.current) {
+      internalRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const hasDescription = helperText ?? stateMessage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex items-start", containerClassName, wrapperClassName, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-6 w-auto items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: handleRef,
+              id: inputId,
+              type: "checkbox",
+              disabled,
+              required,
+              "aria-invalid": state === "error" ? true : void 0,
+              "aria-describedby": describedBy,
+              className: cn(
+                "peer appearance-none rounded-sm border bg-surface transition-all duration-normal",
+                "checked:bg-current checked:border-transparent",
+                "indeterminate:bg-current indeterminate:border-transparent",
+                "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
+                sizeClasses[size],
+                stateClasses[state],
+                disabledClasses,
+                inputClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CheckIcon,
+            {
+              className: cn(
+                "pointer-events-none absolute inset-0 m-auto text-text-inverse opacity-0 transition-opacity peer-checked:opacity-100",
+                size === "xs" ? "w-2.5 h-2.5" : size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-5 h-5"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MinusIcon,
+            {
+              className: cn(
+                "pointer-events-none absolute inset-0 m-auto text-text-inverse opacity-0 transition-opacity peer-indeterminate:opacity-100",
+                size === "xs" ? "w-2.5 h-2.5" : size === "sm" ? "w-3 h-3" : size === "md" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-5 h-5"
+              )
+            }
+          )
+        ] }),
+        (!!label || !!hasDescription) && /* @__PURE__ */ jsxs("div", { className: "ml-3 flex flex-col pt-0.5", children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: inputId,
+              className: cn(
+                "font-bold leading-none text-text uppercase tracking-widest select-none",
+                disabled && "opacity-50 cursor-not-allowed",
+                labelSizeClasses[size],
+                labelClassName
+              ),
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+              ]
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: helperId,
+              className: cn(
+                "text-text-muted mt-1 font-medium",
+                disabled && "opacity-50",
+                descriptionSizeClasses[size],
+                messageClassName
+              ),
+              children: helperText
+            }
+          ),
+          stateMessage && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: stateMessageId,
+              role: state === "error" ? "alert" : void 0,
+              className: cn(
+                "mt-1",
+                disabled && "opacity-50",
+                stateMessageClasses[state],
+                descriptionSizeClasses[size],
+                messageClassName
+              ),
+              children: stateMessage
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/chunk-SHQ2MPBE.mjs

@@ -0,0 +1,73 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl"
+};
+var variantClasses = {
+  primary: "text-primary hover:text-primary-hover active:text-primary-active",
+  secondary: "text-text-secondary hover:text-text active:text-text",
+  danger: "text-error hover:text-error/80 active:text-error/90",
+  ghost: "text-text-muted hover:text-text active:text-text hover:bg-hover px-2 py-0.5 rounded-sm transition-all duration-normal"
+};
+var underlineClasses = {
+  always: "underline underline-offset-4",
+  hover: "hover:underline hover:underline-offset-4",
+  none: "no-underline"
+};
+var disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
+var Link = forwardRef(function Link2({
+  children,
+  className,
+  variant = "primary",
+  size = "md",
+  underline = "hover",
+  isExternal = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  href,
+  rel,
+  target,
+  ...rest
+}, ref) {
+  const generatedTarget = isExternal ? "_blank" : target;
+  const generatedRel = isExternal ? cn("noopener noreferrer", rel) : rel;
+  const activeHref = disabled ? void 0 : href;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      href: activeHref,
+      target: generatedTarget,
+      rel: generatedRel,
+      "aria-disabled": disabled ? "true" : void 0,
+      role: disabled && !activeHref ? "link" : void 0,
+      tabIndex: disabled ? -1 : void 0,
+      className: cn(
+        "inline-flex items-center gap-1.5 transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
+        sizeClasses[size],
+        variantClasses[variant],
+        // Ghost variant traditionally doesn't mix with text-based underline properties well visually
+        variant === "ghost" ? "no-underline" : underlineClasses[underline],
+        disabled ? disabledClasses : "",
+        className
+      ),
+      ...rest,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: leftIcon }),
+        /* @__PURE__ */ jsx("span", { children }),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: rightIcon })
+      ]
+    }
+  );
+});
+Link.displayName = "Link";
+
+export { Link };

package/dist/chunk-TIVSMCXZ.mjs

@@ -0,0 +1,253 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId } from 'react';
+import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "h-6 py-0 pl-2 pr-8 text-xs",
+  sm: "h-8 py-0 pl-3 pr-8 text-sm",
+  md: "h-10 py-0 pl-3 pr-10 text-sm",
+  lg: "h-11 py-0 pl-4 pr-10 text-base",
+  xl: "h-12 py-0 pl-4 pr-12 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 appearance-none 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 appearance-none transition-all duration-normal",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus:outline-none focus:ring-0 appearance-none transition-all duration-normal",
+  unstyled: "border-0 bg-transparent p-0 focus:outline-none focus:ring-0 appearance-none"
+};
+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",
+  success: "text-success",
+  warning: "text-warning"
+};
+var disabledClasses = "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-surface-secondary";
+function getAddonPadding(hasLeft, size) {
+  if (!hasLeft) return "";
+  const leftPad = {
+    xs: "pl-6",
+    sm: "pl-8",
+    md: "pl-9",
+    lg: "pl-10",
+    xl: "pl-11"
+  };
+  return leftPad[size];
+}
+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__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: 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
+    }
+  );
+}
+var DefaultChevron = () => /* @__PURE__ */ jsx(ChevronUpDownIcon, { className: "w-full h-full", "aria-hidden": "true" });
+var Select = forwardRef(function Select2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  className,
+  isLoading,
+  options = [],
+  placeholder,
+  children,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const selectId = idProp ?? generatedId;
+  const helperId = `${selectId}-helper`;
+  const stateMessageId = `${selectId}-state`;
+  const hasLeftElement = leftElement !== void 0;
+  const stateMessage = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const renderRightIcon = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ 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__ */ 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 (rightElement !== void 0) {
+      return rightElement;
+    }
+    return /* @__PURE__ */ jsx(DefaultChevron, {});
+  };
+  const selectElement = /* @__PURE__ */ jsxs(
+    "select",
+    {
+      ...rest,
+      ref,
+      id: selectId,
+      disabled: Boolean(disabled) || Boolean(isLoading),
+      "aria-invalid": state === "error" ? true : void 0,
+      "aria-describedby": describedBy,
+      "aria-required": required,
+      className: cn(
+        "w-full transition-colors duration-150",
+        sizeClasses[size],
+        variantClasses[variant],
+        stateVariantClasses[state][variant],
+        disabledClasses,
+        getAddonPadding(hasLeftElement, size),
+        inputClassName
+      ),
+      children: [
+        placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+        options.length > 0 ? options.map((opt, i) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, i)) : children
+      ]
+    }
+  );
+  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: selectId,
+            className: cn(
+              "font-black leading-none text-text mt-1 uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+            children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
+              hasLeftElement && /* @__PURE__ */ jsx(AddonIcon, { side: "left", size, children: leftElement }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: selectElement }),
+              /* @__PURE__ */ jsx(AddonIcon, { side: "right", size, pointerEvents: !rightElement, children: renderRightIcon() })
+            ] })
+          }
+        ),
+        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
+          }
+        )
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+
+export { Select };

package/dist/chunk-TNGW5YHA.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var chunk6CC5KIA5_cjs = require('./chunk-6CC5KIA5.cjs');
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-11 h-11",
+  xl: "w-12 h-12"
+};
+var IconButton = react.forwardRef(
+  ({ icon, "aria-label": ariaLabel, isRound, className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6CC5KIA5_cjs.Button,
+      {
+        ref,
+        size,
+        className: chunkL5VQZZVR_cjs.cn(
+          "p-0 flex-shrink-0 min-w-0",
+          sizeClasses[size],
+          isRound && "rounded-full",
+          className
+        ),
+        "aria-label": ariaLabel,
+        ...props,
+        children: icon
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+exports.IconButton = IconButton;