@bricks-toolkit/toolkit 0.1.1 → 0.1.3

package/dist/chunk-KA35BV7V.mjs

@@ -0,0 +1,207 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useRef, useState } from 'react';
+import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  sm: "p-4 text-sm",
+  md: "p-8 text-sm",
+  lg: "p-12 text-base"
+};
+var labelSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm"
+};
+var stateClasses = {
+  default: "border-border hover:border-primary-hover bg-surface focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary",
+  error: "border-error bg-error/5 focus-within:ring-2 focus-within:ring-error/20",
+  success: "border-success bg-success/5 focus-within:ring-2 focus-within:ring-success/20",
+  warning: "border-warning bg-warning/5 focus-within:ring-2 focus-within: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 FileUpload = forwardRef(function FileUpload2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  wrapperClassName,
+  labelClassName,
+  helperClassName,
+  dropzoneClassName,
+  icon,
+  maxSize,
+  maxFiles,
+  onFilesSelected,
+  accept,
+  multiple,
+  disabled,
+  id: idProp,
+  className,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = idProp ?? generatedId;
+  const internalRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    handleFiles(droppedFiles);
+  };
+  const handleChange = (e) => {
+    if (e.target.files) {
+      handleFiles(Array.from(e.target.files));
+    }
+  };
+  const handleFiles = (files) => {
+    let filteredFiles = files;
+    if (maxFiles && files.length > maxFiles) {
+      filteredFiles = files.slice(0, maxFiles);
+    }
+    if (maxSize) {
+      filteredFiles = filteredFiles.filter((file) => file.size <= maxSize);
+    }
+    if (onFilesSelected) {
+      onFilesSelected(filteredFiles);
+    }
+  };
+  const handleClick = () => {
+    if (internalRef.current) {
+      internalRef.current.click();
+    }
+  };
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const stateMsg = state === "error" ? errorMessage : state === "success" ? successMessage : state === "warning" ? warningMessage : void 0;
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1.5",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            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",
+          {
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-disabled": disabled,
+            className: cn(
+              "relative flex flex-col items-center justify-center border-2 border-dashed rounded-lg transition-all cursor-pointer group",
+              sizeClasses[size],
+              stateClasses[state],
+              isDragging && "border-primary bg-primary/5 scale-[1.01] shadow-md",
+              disabled && "opacity-50 cursor-not-allowed bg-surface-secondary border-border",
+              dropzoneClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...rest,
+                  ref: (node) => {
+                    internalRef.current = node;
+                    if (typeof ref === "function") ref(node);
+                    else if (ref) ref.current = node;
+                  },
+                  id: inputId,
+                  type: "file",
+                  accept,
+                  multiple,
+                  disabled,
+                  onChange: handleChange,
+                  className: "sr-only"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center pointer-events-none", children: [
+                icon ?? /* @__PURE__ */ jsx(
+                  CloudArrowUpIcon,
+                  {
+                    className: cn(
+                      "w-10 h-10 mb-2 transition-all duration-normal group-hover:scale-110",
+                      state === "default" ? "text-text-muted" : stateMessageClasses[state]
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-bold text-text transition-colors group-hover:text-primary", children: "Click to upload or drag and drop" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-muted font-medium", children: [
+                  accept ? `Available formats: ${accept}` : "Any file type",
+                  maxSize && ` (Max ${String(Math.round(maxSize / 1024 / 1024))}MB)`
+                ] })
+              ] })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: helperId,
+            className: cn("text-xs text-text-muted font-medium mt-1", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMsg && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: state === "error" ? "alert" : void 0,
+            className: cn("text-xs font-bold mt-1", stateMessageClasses[state], helperClassName),
+            children: stateMsg
+          }
+        )
+      ]
+    }
+  );
+});
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };

package/dist/chunk-KH6LV7IS.mjs

@@ -0,0 +1,36 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Header = ({
+  logo,
+  children,
+  actions,
+  userSection,
+  isSticky = true,
+  className,
+  glass = false,
+  onMenuToggle
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "h-16 flex items-center justify-between px-6 bg-surface border-b border-border transition-all duration-normal",
+        isSticky && "sticky top-0 z-index-sticky",
+        glass && "glass",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: logo }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-xl px-8", children }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions }),
+          userSection && /* @__PURE__ */ jsx("div", { className: "flex items-center pl-2 ml-2 border-l border-border h-8", children: userSection })
+        ] })
+      ]
+    }
+  );
+};
+Header.displayName = "Header";
+
+export { Header };

package/dist/chunk-KLBABQEJ.cjs

@@ -0,0 +1,378 @@
+'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 triggerSizeClasses = {
+  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 optionSizeClasses = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base",
+  xl: "px-4 py-3 text-lg"
+};
+var stateRingClasses = {
+  default: "border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/40",
+  error: "border-error focus-within:ring-2 focus-within:ring-error/20",
+  success: "border-success focus-within:ring-2 focus-within:ring-success/20",
+  warning: "border-warning focus-within:ring-2 focus-within:ring-warning/20"
+};
+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 ComboBox = react.forwardRef(function ComboBox2({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  searchable = true,
+  clearable = false,
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  state = "default",
+  size = "md",
+  fullWidth = true,
+  placeholder = "Select\u2026",
+  noOptionsMessage = "No options",
+  wrapperClassName,
+  inputClassName,
+  listClassName,
+  labelClassName,
+  helperClassName,
+  disabled,
+  id: idProp,
+  className,
+  ...rest
+}, ref) {
+  const generatedId = react.useId();
+  const inputId = idProp ?? generatedId;
+  const listboxId = `${inputId}-listbox`;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [query, setQuery] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const selectedValues = react.useMemo(
+    () => value == null ? [] : Array.isArray(value) ? value : [value],
+    [value]
+  );
+  const displayValue = isOpen && searchable ? query : selectedValues.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", ");
+  const filteredOptions = isOpen && searchable && query.length > 0 ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())) : options;
+  react.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setQuery("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const open = react.useCallback(() => {
+    if (!disabled) {
+      setIsOpen(true);
+      setQuery("");
+      setActiveIndex(-1);
+    }
+  }, [disabled]);
+  const close = react.useCallback(() => {
+    setIsOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  }, []);
+  const selectOption = react.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      if (multiple) {
+        const next = selectedValues.includes(option.value) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+        onChange?.(next);
+      } else {
+        onChange?.(option.value);
+        close();
+      }
+    },
+    [multiple, selectedValues, onChange, close]
+  );
+  const handleClear = react.useCallback(() => {
+    onChange?.(multiple ? [] : "");
+    setQuery("");
+    inputRef.current?.focus();
+  }, [multiple, onChange]);
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+    setActiveIndex(-1);
+    if (!isOpen) setIsOpen(true);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          open();
+        } else {
+          setActiveIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => prev > 0 ? prev - 1 : 0);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (!isOpen) {
+          open();
+        } else if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+          const opt = filteredOptions[activeIndex];
+          if (opt != null) selectOption(opt);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  };
+  const stateMsg = getStateMessage(state, errorMessage, successMessage, warningMessage);
+  const describedBy = [helperText ? helperId : null, stateMsg ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const showClear = clearable && selectedValues.length > 0 && !disabled;
+  const isSelected = (val) => selectedValues.includes(val);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        isOpen && "z-[60]",
+        // Ensure the whole component stays above siblings when open
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label != null && /* @__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", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkL5VQZZVR_cjs.cn(
+                "flex items-center w-full rounded-md border bg-surface shadow-sm transition-all duration-normal",
+                triggerSizeClasses[size],
+                stateRingClasses[state],
+                disabled && "cursor-not-allowed opacity-50 bg-surface-secondary"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ...rest,
+                    ref: (node) => {
+                      inputRef.current = node;
+                      if (typeof ref === "function") ref(node);
+                      else if (ref != null) ref.current = node;
+                    },
+                    id: inputId,
+                    role: "combobox",
+                    type: "text",
+                    autoComplete: "off",
+                    "aria-expanded": isOpen,
+                    "aria-haspopup": "listbox",
+                    "aria-controls": listboxId,
+                    "aria-autocomplete": searchable ? "list" : "none",
+                    "aria-activedescendant": activeIndex >= 0 ? `${listboxId}-opt-${String(activeIndex)}` : void 0,
+                    "aria-invalid": state === "error" ? true : void 0,
+                    "aria-required": required,
+                    "aria-describedby": describedBy,
+                    disabled,
+                    readOnly: !searchable,
+                    placeholder: selectedValues.length === 0 ? placeholder : void 0,
+                    value: displayValue,
+                    onChange: searchable ? handleInputChange : void 0,
+                    onFocus: open,
+                    onClick: open,
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "flex-1 min-w-0 bg-transparent outline-none placeholder:text-text-muted transition-all duration-normal",
+                      !searchable && "cursor-pointer select-none",
+                      inputClassName
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 ml-1 shrink-0", children: [
+                  showClear && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Clear selection",
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      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",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: chunkL5VQZZVR_cjs.cn(
+                        "text-text-muted transition-transform duration-200",
+                        isOpen && "rotate-180"
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(solid.ChevronDownIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-multiselectable": multiple,
+              "aria-label": label ?? "Options",
+              className: chunkL5VQZZVR_cjs.cn(
+                "absolute z-dropdown mt-1 w-full bg-surface border border-border rounded-lg shadow-lg overflow-y-auto max-h-60 py-1.5 animate-in fade-in zoom-in-95 duration-normal",
+                listClassName
+              ),
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: chunkL5VQZZVR_cjs.cn(
+                    "text-text-muted italic select-none font-medium",
+                    optionSizeClasses[size]
+                  ),
+                  children: noOptionsMessage
+                }
+              ) : filteredOptions.map((option, idx) => {
+                const selected = isSelected(option.value);
+                const active = idx === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "li",
+                  {
+                    id: `${listboxId}-opt-${String(idx)}`,
+                    role: "option",
+                    "aria-selected": selected,
+                    "aria-disabled": option.disabled,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                    },
+                    onClick: () => {
+                      selectOption(option);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        selectOption(option);
+                      }
+                    },
+                    onMouseEnter: () => {
+                      setActiveIndex(idx);
+                    },
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "flex items-center gap-2 cursor-pointer select-none transition-all duration-fast font-medium",
+                      optionSizeClasses[size],
+                      active && !option.disabled && "bg-hover",
+                      selected && "text-primary font-bold",
+                      option.disabled && "cursor-not-allowed opacity-40"
+                    ),
+                    children: [
+                      multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: chunkL5VQZZVR_cjs.cn(
+                            "shrink-0 w-4 h-4 rounded-sm border flex items-center justify-center transition-all duration-normal",
+                            selected ? "bg-primary border-primary" : "border-border"
+                          ),
+                          "aria-hidden": "true",
+                          children: selected && /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "w-2.5 h-2.5 text-text-inverse" })
+                        }
+                      ),
+                      !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 shrink-0", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "w-4 h-4 text-primary" }) }),
+                      option.label
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        ] }),
+        helperText != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: helperId,
+            className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted font-medium", helperClassName),
+            children: helperText
+          }
+        ),
+        stateMsg != null && /* @__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: stateMsg
+          }
+        )
+      ]
+    }
+  );
+});
+ComboBox.displayName = "ComboBox";
+
+exports.ComboBox = ComboBox;