@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-OQPCL5XX.mjs

@@ -0,0 +1,187 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useRef, useCallback, useEffect } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { createPortal } from 'react-dom';
+import { jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full m-0 rounded-none h-full"
+};
+function Dialog({
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  isCentered = false,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  trapFocus = true,
+  lockScroll = true,
+  contentClassName,
+  overlayClassName,
+  showBackdrop = true,
+  isModal = true,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby
+}) {
+  const dialogRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      if (isModal && lockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+      const handleKeyDown = (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          handleClose();
+          return;
+        }
+        if (isModal && trapFocus && e.key === "Tab") {
+          const focusableElements = dialogRef.current?.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (!focusableElements || focusableElements.length === 0) return;
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+          if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+              lastElement.focus();
+              e.preventDefault();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              firstElement.focus();
+              e.preventDefault();
+            }
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      if (isModal) {
+        setTimeout(() => {
+          const firstFocusable = dialogRef.current?.querySelector(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (firstFocusable != null) {
+            firstFocusable.focus();
+          } else {
+            dialogRef.current?.focus();
+          }
+        }, 0);
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        if (isModal && lockScroll) {
+          document.body.style.overflow = "";
+        }
+        previousFocusRef.current?.focus();
+      };
+    }
+    return void 0;
+  }, [isOpen, closeOnEsc, handleClose, lockScroll, trapFocus, isModal]);
+  if (!isOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        className: cn(
+          "fixed inset-0 z-50 flex items-start justify-center p-4 sm:p-6 overflow-y-auto transition-opacity duration-300",
+          showBackdrop && "bg-black/60 backdrop-blur-sm",
+          !isModal && "pointer-events-none",
+          isCentered && "items-center",
+          overlayClassName
+        ),
+        onClick: (e) => {
+          if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            tabIndex: -1,
+            "aria-modal": isModal ? "true" : "false",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            className: cn(
+              "relative w-full mx-auto bg-surface rounded-xl shadow-lg border border-border transition-all duration-300 transform scale-100 opacity-100 flex flex-col",
+              size !== "full" && "max-h-[90vh]",
+              !isModal && "pointer-events-auto",
+              sizeClasses[size],
+              contentClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-6 py-5 border-b border-border/60", className), children: /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-text uppercase tracking-wider", children }) });
+}
+function DialogBody({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "px-6 py-6 overflow-y-auto flex-1 text-text-secondary leading-relaxed font-medium",
+        className
+      ),
+      children
+    }
+  );
+}
+function DialogFooter({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "px-6 py-4 bg-surface-secondary border-t border-border flex items-center justify-end gap-3 rounded-b-xl",
+        className
+      ),
+      children
+    }
+  );
+}
+function DialogCloseButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "absolute top-4 right-4 p-2 text-text-muted hover:text-text hover:bg-hover rounded-lg transition-all duration-fast",
+        className
+      ),
+      "aria-label": "Close dialog",
+      children: /* @__PURE__ */ jsx(XMarkIcon, { className: "w-5 h-5" })
+    }
+  );
+}
+
+export { Dialog, DialogBody, DialogCloseButton, DialogFooter, DialogHeader };

package/dist/chunk-PCYGJNEQ.cjs

@@ -0,0 +1,280 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var reactDom = require('react-dom');
+var outline = require('@heroicons/react/24/outline');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full w-full h-full m-0 rounded-none"
+};
+var sideSheetWidthClasses = {
+  xs: "w-64",
+  sm: "w-80",
+  md: "w-96",
+  lg: "w-[30rem]",
+  xl: "w-[36rem]",
+  "2xl": "w-[42rem]",
+  "3xl": "w-[48rem]",
+  "4xl": "w-[56rem]",
+  "5xl": "w-[64rem]",
+  "6xl": "w-[72rem]",
+  "7xl": "w-[80rem]",
+  full: "w-full"
+};
+var variantClasses = {
+  default: "bg-surface border border-border shadow-[0_20px_60px_-10px_rgba(0,0,0,0.2),0_8px_20px_-8px_rgba(0,0,0,0.1)]",
+  glass: "bg-white/10 dark:bg-black/20 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)]",
+  flat: "bg-surface shadow-[0_4px_24px_rgba(0,0,0,0.08)]"
+};
+var overlayPositionClasses = {
+  top: "items-start pt-16",
+  center: "items-center",
+  bottom: "items-end pb-0",
+  left: "items-stretch justify-start p-0",
+  right: "items-stretch justify-end p-0"
+};
+var contentPositionClasses = {
+  top: "",
+  center: "",
+  bottom: "rounded-b-none w-full max-w-full",
+  left: "rounded-l-none rounded-r-2xl h-full max-h-full my-0",
+  right: "rounded-r-none rounded-l-2xl h-full max-h-full my-0"
+};
+var Modal = function Modal2({
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  variant = "default",
+  position = "center",
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  trapFocus = true,
+  lockScroll = true,
+  contentClassName,
+  overlayClassName,
+  showBackdrop = true,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby
+}) {
+  const modalRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
+  const handleClose = react.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  react.useEffect(() => {
+    if (isOpen) {
+      previousFocusRef.current = document.activeElement;
+      if (lockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+      const handleKeyDown = (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          handleClose();
+          return;
+        }
+        if (trapFocus && e.key === "Tab") {
+          const focusableElements = modalRef.current?.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (!focusableElements || focusableElements.length === 0) return;
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+          if (e.shiftKey) {
+            if (document.activeElement === firstElement) {
+              lastElement.focus();
+              e.preventDefault();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              firstElement.focus();
+              e.preventDefault();
+            }
+          }
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      setTimeout(() => {
+        const firstFocusable = modalRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (firstFocusable != null) {
+          firstFocusable.focus();
+        } else {
+          modalRef.current?.focus();
+        }
+      }, 50);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        if (lockScroll) {
+          document.body.style.overflow = "";
+        }
+        previousFocusRef.current?.focus();
+      };
+    }
+    return void 0;
+  }, [isOpen, closeOnEsc, handleClose, lockScroll, trapFocus]);
+  if (!isOpen) return null;
+  const isBottomSheet = position === "bottom";
+  const isLeftSheet = position === "left";
+  const isRightSheet = position === "right";
+  const isSideSheet = isLeftSheet || isRightSheet;
+  let entryAnimation = "animate-[modal-zoom-in_200ms_cubic-bezier(0.34,1.56,0.64,1)_forwards]";
+  if (isBottomSheet)
+    entryAnimation = "animate-[modal-slide-up_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  if (isLeftSheet)
+    entryAnimation = "animate-[modal-slide-right_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  if (isRightSheet)
+    entryAnimation = "animate-[modal-slide-left_250ms_cubic-bezier(0.32,0.72,0,1)_forwards]";
+  const sizeClass = isSideSheet ? sideSheetWidthClasses[size] : sizeClasses[size];
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "presentation",
+        className: chunkL5VQZZVR_cjs.cn(
+          "fixed inset-0 z-[1050] flex justify-center",
+          // Side sheets don't scroll — they're full-height
+          !isSideSheet && "overflow-y-auto p-4",
+          showBackdrop && "bg-black/50 backdrop-blur-[3px]",
+          "animate-[modal-overlay-in_200ms_ease-out_forwards]",
+          overlayPositionClasses[position],
+          overlayClassName
+        ),
+        onClick: (e) => {
+          if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: modalRef,
+            role: "dialog",
+            tabIndex: -1,
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            className: chunkL5VQZZVR_cjs.cn(
+              // Base
+              "relative flex flex-col",
+              // Standard dialogs are centered with max-height
+              !isSideSheet && !isBottomSheet && size !== "full" && "w-full mx-auto max-h-[90vh] my-4 rounded-2xl",
+              // Bottom sheet
+              isBottomSheet && "rounded-2xl",
+              // Side sheets: no mx-auto, no max-height
+              isSideSheet && "mx-0",
+              // Entry animation
+              entryAnimation,
+              // Variant
+              variantClasses[variant],
+              // Size (width for side sheets, max-width otherwise)
+              sizeClass,
+              // Position-specific shape overrides
+              contentPositionClasses[position],
+              contentClassName
+            ),
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+function ModalHeader({
+  children,
+  className,
+  icon,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkL5VQZZVR_cjs.cn("relative px-6 py-5 border-b border-border/60 flex-shrink-0", className), children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-text leading-tight tracking-tight", children }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-text-muted leading-relaxed", children: description })
+  ] });
+}
+function ModalBody({
+  children,
+  className,
+  noPadding = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex-1 overflow-y-auto text-text-secondary text-sm leading-relaxed",
+        !noPadding && "px-6 py-5",
+        className
+      ),
+      children
+    }
+  );
+}
+var footerAlignClasses = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function ModalFooter({
+  children,
+  className,
+  align = "right"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkL5VQZZVR_cjs.cn(
+        "flex-shrink-0 px-6 py-4 border-t border-border/60 bg-surface-secondary/30 flex flex-wrap items-center gap-3 rounded-b-2xl",
+        footerAlignClasses[align],
+        className
+      ),
+      children
+    }
+  );
+}
+function ModalCloseButton({ onClick, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: chunkL5VQZZVR_cjs.cn(
+        "absolute top-4 right-4 z-10",
+        "w-8 h-8 flex items-center justify-center rounded-lg",
+        "text-text-muted hover:text-text",
+        "bg-transparent hover:bg-hover",
+        "transition-all duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        className
+      ),
+      "aria-label": "Close modal",
+      children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-4 h-4", strokeWidth: 2 })
+    }
+  );
+}
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+Modal.CloseButton = ModalCloseButton;
+
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;

package/dist/chunk-PJH2KEWK.mjs

@@ -0,0 +1,200 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { useState } from 'react';
+import { ChevronRightIcon, ChevronLeftIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Sidebar = ({
+  groups,
+  isCollapsed: controlledIsCollapsed,
+  onToggleCollapse,
+  logo,
+  footer,
+  className,
+  glass = false,
+  width = 288,
+  collapsedWidth = 80,
+  showToggleButton = false,
+  togglePosition = "center",
+  position = "left",
+  centerIcons = true,
+  classNames = {},
+  styles = {},
+  renderItem
+}) => {
+  const [internalIsCollapsed, setInternalIsCollapsed] = useState(false);
+  const [expandedItems, setExpandedItems] = useState({});
+  const isCollapsed = controlledIsCollapsed ?? internalIsCollapsed;
+  const handleToggle = () => {
+    const newState = !isCollapsed;
+    if (onToggleCollapse) {
+      onToggleCollapse(newState);
+    } else {
+      setInternalIsCollapsed(newState);
+    }
+  };
+  const toggleItemExpanded = (id) => {
+    setExpandedItems((prev) => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  };
+  const sidebarWidth = isCollapsed ? collapsedWidth : width;
+  const renderSidebarItem = (item, level = 0) => {
+    if (item.hidden) return null;
+    if (renderItem) {
+      return /* @__PURE__ */ jsx("div", { children: renderItem(item, isCollapsed) }, item.id);
+    }
+    const hasChildren = item.items && item.items.length > 0;
+    const isExpanded = expandedItems[item.id] ?? !!item.isExpanded;
+    const Component = item.component ?? "button";
+    const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "shrink-0 transition-colors duration-normal",
+            item.isActive ? "text-text-inverse" : "text-text-muted group-hover:text-text",
+            isCollapsed && centerIcons && "mx-auto",
+            classNames.itemIcon
+          ),
+          style: styles.itemIcon,
+          children: item.icon
+        }
+      ),
+      !isCollapsed && /* @__PURE__ */ jsx("span", { className: cn("truncate", classNames.itemLabel), style: styles.itemLabel, children: item.label }),
+      !isCollapsed && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.badge }),
+        hasChildren && /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: cn(
+              "w-4 h-4 transition-transform duration-normal",
+              isExpanded && "rotate-180"
+            )
+          }
+        )
+      ] }),
+      isCollapsed && /* @__PURE__ */ jsx("div", { className: "absolute left-full ml-2 px-2 py-1 bg-surface-secondary border border-border rounded shadow-lg text-xs opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-index-tooltip whitespace-nowrap text-text", children: item.label })
+    ] });
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsx(
+        Component,
+        {
+          type: Component === "button" ? "button" : void 0,
+          onClick: (e) => {
+            if (hasChildren && !isCollapsed) {
+              e.preventDefault();
+              toggleItemExpanded(item.id);
+            }
+            item.onClick?.();
+          },
+          className: cn(
+            "w-full flex items-center gap-4 transition-all duration-normal group relative text-base rounded-lg",
+            level === 0 ? "px-4 py-3" : "px-3 py-2 pl-10",
+            item.isActive ? "bg-black text-text-inverse shadow-md shadow-black/20 font-bold" : "text-text-secondary hover:bg-hover hover:text-text",
+            isCollapsed && "justify-center px-0",
+            item.isActive && classNames.itemActive,
+            isCollapsed && classNames.itemCollapsed,
+            classNames.item
+          ),
+          style: styles.item,
+          title: isCollapsed ? item.label : void 0,
+          ...item.componentProps ?? {},
+          children: itemContent
+        }
+      ),
+      hasChildren && isExpanded && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: item.items?.map((child) => renderSidebarItem(child, level + 1)) })
+    ] }, item.id);
+  };
+  const toggleBtn = showToggleButton && /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleToggle,
+      className: cn(
+        "absolute z-index-popover flex items-center justify-center w-8 h-8 rounded-full bg-surface border border-border shadow-sm hover:shadow-md transition-all duration-normal hover:bg-hover text-text-muted hover:text-text",
+        position === "left" ? "-right-4" : "-left-4",
+        togglePosition === "top" && "top-12",
+        togglePosition === "center" && "top-1/2 -translate-y-1/2",
+        togglePosition === "bottom" && "bottom-12",
+        classNames.toggleButton
+      ),
+      style: styles.toggleButton,
+      "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+      children: isCollapsed ? position === "left" ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" }) : position === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex flex-col h-full bg-surface transition-all duration-slow ease-in-out z-index-sticky shadow-premium relative",
+        position === "right" && "border-l border-border",
+        position === "left" && "border-r border-border",
+        glass && "glass",
+        classNames.root,
+        className
+      ),
+      style: {
+        width: sidebarWidth,
+        ...styles.root
+      },
+      children: [
+        toggleBtn,
+        logo && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center px-6 pt-10 pb-6",
+              isCollapsed && "justify-center px-0",
+              classNames.header
+            ),
+            style: styles.header,
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 overflow-y-auto overflow-x-hidden px-4 py-6 space-y-10 custom-scrollbar",
+              classNames.content
+            ),
+            style: styles.content,
+            children: groups.map((group) => {
+              if (group.hidden) return null;
+              return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", classNames.group), style: styles.group, children: [
+                group.label && !isCollapsed && /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "px-2 text-xs font-bold text-text-muted uppercase tracking-wider",
+                      classNames.groupLabel
+                    ),
+                    style: styles.groupLabel,
+                    children: group.label
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.items.map((item) => renderSidebarItem(item)) })
+              ] }, group.id);
+            })
+          }
+        ),
+        footer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "p-6 mt-auto border-t border-border/50",
+              isCollapsed && "flex justify-center px-0",
+              classNames.footer
+            ),
+            style: styles.footer,
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+};
+Sidebar.displayName = "Sidebar";
+
+export { Sidebar };