@bricks-toolkit/toolkit 0.1.0 → 0.1.2

package/dist/card/index.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+
+type CardVariant = 'default' | 'outlined' | 'elevated' | 'filled';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** The overall visual style of the card */
+    variant?: CardVariant;
+    /** Internal padding scale to apply strictly to the overall wrapper */
+    padding?: CardPadding;
+}
+type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+type CardContentProps = HTMLAttributes<HTMLDivElement>;
+type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Root Card wrapper containing styles, border radiuses, and shadow mappings.
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Card Header segment, ideal for stacking Titles, actions, and meta data.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Semantically native Header 3 representation ensuring text harmony generically.
+ */
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Muted paragraph utility explicitly meant for text trailing a Title internally.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Physical payload payload explicitly anchoring generic HTML spacing between a header and a footer correctly.
+ */
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Spaced flex container automatically injecting actions aligned horizontally below content natively.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, CardTitle, type CardTitleProps, type CardVariant };

package/dist/card/index.mjs

@@ -0,0 +1,2 @@
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../chunk-6ZCY4O5M.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/checkbox/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunk7PDGAIC3_cjs = require('../chunk-7PDGAIC3.cjs');
+require('../chunk-L5VQZZVR.cjs');
+
+
+
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunk7PDGAIC3_cjs.Checkbox; }
+});

package/dist/{components/Checkbox/Checkbox.types.d.ts → checkbox/index.d.mts}

@@ -1,7 +1,8 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type CheckboxState = 'default' | 'error' | 'success' | 'warning';
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type CheckboxState = 'default' | 'error' | 'success' | 'warning';
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** The primary label to display next to the checkbox */
     label?: ReactNode;
     /** Additional helper text displayed beneath the checkbox */
@@ -29,3 +30,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     /** Custom class for the helper/message text element */
     messageClassName?: string;
 }
+
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxState };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type CheckboxState = 'default' | 'error' | 'success' | 'warning';
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** The primary label to display next to the checkbox */
+    label?: ReactNode;
+    /** Additional helper text displayed beneath the checkbox */
+    helperText?: ReactNode;
+    /** Error message displayed beneath the checkbox when state is 'error' */
+    errorMessage?: ReactNode;
+    /** Success message displayed beneath the checkbox when state is 'success' */
+    successMessage?: ReactNode;
+    /** Warning message displayed beneath the checkbox when state is 'warning' */
+    warningMessage?: ReactNode;
+    /** The size of the checkbox and its associated text */
+    size?: CheckboxSize;
+    /** The validation state of the checkbox */
+    state?: CheckboxState;
+    /** Whether the checkbox represents a mixed or indeterminate state */
+    indeterminate?: boolean;
+    /** Custom class for the outermost container */
+    containerClassName?: string;
+    /** Alias for containerClassName to match other components */
+    wrapperClassName?: string;
+    /** Custom class for the underlying input element */
+    inputClassName?: string;
+    /** Custom class for the label element */
+    labelClassName?: string;
+    /** Custom class for the helper/message text element */
+    messageClassName?: string;
+}
+
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxState };

package/dist/checkbox/index.mjs

@@ -0,0 +1,2 @@
+export { Checkbox } from '../chunk-SFUOCZJY.mjs';
+import '../chunk-OCPFOFJ4.mjs';

package/dist/chunk-2POU3NX4.mjs

@@ -0,0 +1,192 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import * as React from 'react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DropdownMenuContext = React.createContext(null);
+function useDropdownMenu() {
+  const context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error("DropdownMenu components must be used within a DropdownMenu");
+  }
+  return context;
+}
+var DropdownMenu = ({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  className
+}) => {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [triggerElement, setTriggerElement] = React.useState(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      if (triggerElement && !triggerElement.contains(event.target) && !event.target.closest("[data-dropdown-content]")) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, setOpen, triggerElement]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerElement?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen, triggerElement]);
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: { open, setOpen, triggerElement, setTriggerElement }, children: /* @__PURE__ */ jsx("div", { className: cn("relative inline-block", className), children }) });
+};
+var triggerSizeClasses = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-base"
+};
+var triggerVariantClasses = {
+  default: "bg-surface border border-border text-text shadow-sm hover:bg-hover focus:ring-2 focus:ring-primary/40",
+  subtle: "bg-surface-secondary text-text hover:bg-active",
+  ghost: "bg-transparent text-text-secondary hover:bg-hover"
+};
+var DropdownMenuTrigger = React.forwardRef(
+  ({ children, className, size = "md", variant = "default", onClick, ...props }, ref) => {
+    const { open, setOpen, setTriggerElement } = useDropdownMenu();
+    const setRefs = React.useCallback(
+      (node) => {
+        setTriggerElement(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref, setTriggerElement]
+    );
+    const handleClick = (e) => {
+      setOpen(!open);
+      onClick?.(e);
+    };
+    const baseClasses = "inline-flex items-center justify-center rounded-md font-bold uppercase tracking-widest transition-all duration-normal focus:outline-none disabled:opacity-50 disabled:pointer-events-none";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: setRefs,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        className: cn(
+          baseClasses,
+          triggerSizeClasses[size],
+          triggerVariantClasses[variant],
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn("ml-2 h-4 w-4 transition-transform duration-200", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var DropdownMenuContent = React.forwardRef(
+  ({ children, className, align = "left", width = 220, ...props }, ref) => {
+    const { open } = useDropdownMenu();
+    if (!open) return null;
+    const alignClasses = {
+      left: "left-0",
+      right: "right-0",
+      center: "left-1/2 -translate-x-1/2"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-dropdown-content": true,
+        role: "menu",
+        style: { width },
+        className: cn(
+          "absolute top-full z-dropdown mt-2 min-w-32 overflow-hidden rounded-lg border border-border bg-surface p-1.5 text-text shadow-lg ring-1 ring-border/5 animate-in fade-in zoom-in-95 duration-normal",
+          alignClasses[align],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var DropdownMenuItem = React.forwardRef(
+  ({ children, className, disabled, destructive, icon, shortcut, onClick, ...props }, ref) => {
+    const { setOpen } = useDropdownMenu();
+    const handleClick = (e) => {
+      if (disabled) return;
+      onClick?.(e);
+      setOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick?.(e);
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        className: cn(
+          "relative flex cursor-default select-none items-center rounded-sm px-3 py-2 text-sm outline-none transition-all duration-fast focus:bg-hover data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-hover font-medium",
+          destructive && "text-error hover:bg-error/10 hover:text-error",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex h-4 w-4 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+          shortcut && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs tracking-widest text-text-muted font-bold", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+var DropdownMenuSeparator = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("-mx-1.5 my-1 h-px bg-divider", className), ...props });
+DropdownMenu.displayName = "DropdownMenu";
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+DropdownMenuContent.displayName = "DropdownMenuContent";
+DropdownMenuItem.displayName = "DropdownMenuItem";
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger };

package/dist/chunk-32SKYPQW.mjs

@@ -0,0 +1,156 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var variantClasses = {
+  default: "animate-pulse bg-skeleton",
+  wave: "skeleton-wave bg-skeleton",
+  pulse: "animate-pulse bg-skeleton-shine"
+};
+var shapeClasses = {
+  rectangle: "rounded-sm",
+  circle: "rounded-full",
+  rounded: "rounded-md"
+};
+var Skeleton = forwardRef(function Skeleton2({ className, variant = "wave", shape = "rectangle", width, height, style, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      style: {
+        width: width !== void 0 ? typeof width === "number" ? `${String(width)}px` : width : void 0,
+        height: height !== void 0 ? typeof height === "number" ? `${String(height)}px` : height : void 0,
+        ...style
+      },
+      className: cn("overflow-hidden", variantClasses[variant], shapeClasses[shape], className),
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, variant = "wave", shortLast = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-2", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: cn(isLast && shortLast ? "w-3/5" : "w-full")
+          },
+          i
+        );
+      })
+    }
+  );
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonAvatar = forwardRef(function SkeletonAvatar2({ size = 40, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      ref,
+      variant,
+      shape: "circle",
+      width: size,
+      height: size,
+      className: cn("shrink-0", className),
+      ...props
+    }
+  );
+});
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonCard = forwardRef(function SkeletonCard2({ showImage = true, imageHeight = 160, lines = 3, variant = "wave", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-surface overflow-hidden flex flex-col",
+        className
+      ),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showImage && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            shape: "rectangle",
+            height: imageHeight,
+            className: "w-full rounded-none"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant, height: 20, className: "w-2/3" }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines, variant, className: "mt-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" }),
+            /* @__PURE__ */ jsx(Skeleton, { variant, width: 80, height: 32, shape: "rounded" })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+SkeletonCard.displayName = "SkeletonCard";
+var SkeletonTable = forwardRef(function SkeletonTable2({ rows = 5, columns = 4, variant = "wave", showHeader = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("w-full rounded-lg border border-border overflow-hidden bg-surface", className),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 border-b border-border px-4 py-2 bg-surface-secondary", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant,
+            height: 14,
+            className: cn(i === 0 ? "w-1/4" : i === columns - 1 ? "w-16" : "flex-1")
+          },
+          i
+        )) }),
+        Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-4 px-4 py-2",
+              rowIdx < rows - 1 && "border-b border-border"
+            ),
+            children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant,
+                height: 14,
+                className: cn(colIdx === 0 ? "w-1/4" : colIdx === columns - 1 ? "w-16" : "flex-1")
+              },
+              colIdx
+            ))
+          },
+          rowIdx
+        ))
+      ]
+    }
+  );
+});
+SkeletonTable.displayName = "SkeletonTable";
+
+export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText };