@bloomkit/react 0.2.11 → 0.2.13

package/dist/index.js

@@ -1499,16 +1499,345 @@ var SelectSeparator = forwardRef14(
 );
 SelectSeparator.displayName = "SelectSeparator";
 
+// src/components/otp-input/otp-input.tsx
+import { forwardRef as forwardRef15, useRef, useCallback as useCallback2, useState as useState5, useEffect as useEffect3 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var OTPInput = forwardRef15(
+  ({ length = 6, value = "", onChange, onComplete, disabled = false, className, autoFocus = false }, ref) => {
+    const [digits, setDigits] = useState5(() => {
+      const arr = new Array(length).fill("");
+      value.split("").forEach((char, i) => {
+        if (i < length) arr[i] = char;
+      });
+      return arr;
+    });
+    const inputRefs = useRef([]);
+    useEffect3(() => {
+      const arr = new Array(length).fill("");
+      value.split("").forEach((char, i) => {
+        if (i < length) arr[i] = char;
+      });
+      setDigits(arr);
+    }, [value, length]);
+    const updateDigits = useCallback2(
+      (newDigits) => {
+        setDigits(newDigits);
+        const joined = newDigits.join("");
+        onChange?.(joined);
+        if (joined.length === length && newDigits.every((d) => d !== "")) {
+          onComplete?.(joined);
+        }
+      },
+      [length, onChange, onComplete]
+    );
+    const handleInput = useCallback2(
+      (index, char) => {
+        if (!/^\d$/.test(char)) return;
+        const newDigits = [...digits];
+        newDigits[index] = char;
+        updateDigits(newDigits);
+        if (index < length - 1) {
+          inputRefs.current[index + 1]?.focus();
+        }
+      },
+      [digits, length, updateDigits]
+    );
+    const handleKeyDown = useCallback2(
+      (index, e) => {
+        if (e.key === "Backspace") {
+          e.preventDefault();
+          const newDigits = [...digits];
+          if (digits[index]) {
+            newDigits[index] = "";
+            updateDigits(newDigits);
+          } else if (index > 0) {
+            newDigits[index - 1] = "";
+            updateDigits(newDigits);
+            inputRefs.current[index - 1]?.focus();
+          }
+        } else if (e.key === "ArrowLeft" && index > 0) {
+          inputRefs.current[index - 1]?.focus();
+        } else if (e.key === "ArrowRight" && index < length - 1) {
+          inputRefs.current[index + 1]?.focus();
+        }
+      },
+      [digits, length, updateDigits]
+    );
+    const handlePaste = useCallback2(
+      (e) => {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+        if (!pasted) return;
+        const newDigits = new Array(length).fill("");
+        pasted.split("").forEach((char, i) => {
+          newDigits[i] = char;
+        });
+        updateDigits(newDigits);
+        const focusIndex = Math.min(pasted.length, length - 1);
+        inputRefs.current[focusIndex]?.focus();
+      },
+      [length, updateDigits]
+    );
+    return /* @__PURE__ */ jsx20("div", { ref, className: cn("flex items-center gap-[var(--space-sm)]", className), children: digits.map((digit, index) => /* @__PURE__ */ jsx20(
+      "input",
+      {
+        ref: (el) => {
+          inputRefs.current[index] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        maxLength: 1,
+        value: digit,
+        disabled,
+        autoFocus: autoFocus && index === 0,
+        onChange: (e) => {
+          const char = e.target.value.slice(-1);
+          handleInput(index, char);
+        },
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        onFocus: (e) => e.target.select(),
+        className: cn(
+          inputVariants(),
+          "h-[52px] w-[44px] text-center",
+          "text-[length:var(--bloom-text-heading)]",
+          "px-0"
+        )
+      },
+      index
+    )) });
+  }
+);
+OTPInput.displayName = "OTPInput";
+
+// src/components/drawer/drawer.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var slideIn = {
+  right: "data-[state=open]:slide-in-from-right",
+  left: "data-[state=open]:slide-in-from-left",
+  top: "data-[state=open]:slide-in-from-top",
+  bottom: "data-[state=open]:slide-in-from-bottom"
+};
+var slideOut = {
+  right: "data-[state=closed]:slide-out-to-right",
+  left: "data-[state=closed]:slide-out-to-left",
+  top: "data-[state=closed]:slide-out-to-top",
+  bottom: "data-[state=closed]:slide-out-to-bottom"
+};
+var sidePosition = {
+  right: "inset-y-0 right-0",
+  left: "inset-y-0 left-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+var sideSize = {
+  right: "h-full w-full max-w-[400px]",
+  left: "h-full w-full max-w-[400px]",
+  top: "w-full",
+  bottom: "w-full"
+};
+function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  side = "right",
+  className
+}) {
+  return /* @__PURE__ */ jsx21(DialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs15(DialogPrimitive2.Portal, { children: [
+    /* @__PURE__ */ jsx21(
+      DialogPrimitive2.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs15(
+      DialogPrimitive2.Content,
+      {
+        className: cn(
+          "bloom fixed z-50",
+          sidePosition[side],
+          sideSize[side],
+          "bg-[var(--bloom-surface)] p-[var(--space-xl)]",
+          "shadow-[var(--bloom-shadow-hover)]",
+          "border-[var(--bloom-surface2)]",
+          side === "right" && "border-l",
+          side === "left" && "border-r",
+          side === "top" && "border-b",
+          side === "bottom" && "border-t",
+          "data-[state=open]:animate-in data-[state=open]:duration-300",
+          "data-[state=closed]:animate-out data-[state=closed]:duration-200",
+          slideIn[side],
+          slideOut[side],
+          "focus:outline-none",
+          className
+        ),
+        children: [
+          title && /* @__PURE__ */ jsx21(DialogPrimitive2.Title, { className: "font-[family-name:var(--bloom-font-display)] text-[length:var(--bloom-text-heading)] font-medium color-[var(--bloom-text)] mb-[var(--space-sm)]", children: title }),
+          description && /* @__PURE__ */ jsx21(DialogPrimitive2.Description, { className: "text-[length:var(--bloom-text-body)] color-[var(--bloom-text-secondary)] mb-[var(--space-lg)]", children: description }),
+          children,
+          /* @__PURE__ */ jsx21(
+            DialogPrimitive2.Close,
+            {
+              className: cn(
+                "absolute top-[var(--space-lg)] right-[var(--space-lg)]",
+                "inline-flex items-center justify-center",
+                "h-[32px] w-[32px] rounded-full",
+                "color-[var(--bloom-text-secondary)] hover:color-[var(--bloom-text)]",
+                "hover:bg-[var(--bloom-surface2)]",
+                "transition-colors duration-[var(--bloom-duration-fast)]",
+                "focus-visible:outline-none focus-visible:ring-[4px] focus-visible:ring-[var(--bloom-accent1)]/30"
+              ),
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx21("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/popover/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function Popover2({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  className,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs16(PopoverPrimitive.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx22(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx22(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
+      PopoverPrimitive.Content,
+      {
+        side,
+        align,
+        sideOffset: 8,
+        className: cn(
+          "bloom z-50 w-[320px] overflow-hidden",
+          "rounded-[var(--bloom-radius)]",
+          "bg-[var(--bloom-surface)] p-[var(--space-lg)]",
+          "shadow-[var(--bloom-shadow-hover)]",
+          "border border-[var(--bloom-surface2)]",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "focus:outline-none",
+          className
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+
+// src/components/accordion/accordion.tsx
+import { forwardRef as forwardRef16 } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var Accordion = forwardRef16(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+    AccordionPrimitive.Root,
+    {
+      ref,
+      className: cn("w-full", className),
+      ...props
+    }
+  )
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = forwardRef16(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--bloom-surface2)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = forwardRef16(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx23(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs17(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex flex-1 items-center justify-between",
+        "py-[var(--space-lg)]",
+        "text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] font-medium color-[var(--bloom-text)]",
+        "cursor-pointer",
+        "transition-all duration-[var(--bloom-duration-fast)]",
+        "hover:color-[var(--bloom-accent1-deep)]",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx23(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "shrink-0 transition-transform duration-[var(--bloom-duration-fast)]",
+            children: /* @__PURE__ */ jsx23("path", { d: "M4 6l4 4 4-4" })
+          }
+        )
+      ]
+    }
+  ) })
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = forwardRef16(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx23(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden",
+        "text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] color-[var(--bloom-text-secondary)]",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx23("div", { className: "pb-[var(--space-lg)]", children })
+    }
+  )
+);
+AccordionContent.displayName = "AccordionContent";
+
 // src/components/theme/theme.tsx
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useState as useState5,
-  useEffect as useEffect3,
-  useCallback as useCallback2,
-  useRef
+  useState as useState6,
+  useEffect as useEffect4,
+  useCallback as useCallback3,
+  useRef as useRef2
 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ThemeContext = createContext2(null);
 function useTheme() {
   const ctx = useContext2(ThemeContext);
@@ -1530,35 +1859,35 @@ function ThemeProvider({
   palettes = [],
   storageKey = "bloom-theme"
 }) {
-  const paletteMap = useRef(
+  const paletteMap = useRef2(
     new Map([
       ["bloom", { name: "bloom" }],
       ...palettes.map((p) => [p.name, p])
     ])
   );
-  const [colorMode, setColorModeState] = useState5(() => {
+  const [colorMode, setColorModeState] = useState6(() => {
     if (typeof window === "undefined") return defaultColorMode;
     const stored = localStorage.getItem(`${storageKey}-mode`);
     if (stored === "light" || stored === "dark" || stored === "system") return stored;
     return defaultColorMode;
   });
-  const [palette, setPaletteState] = useState5(() => {
+  const [palette, setPaletteState] = useState6(() => {
     if (typeof window === "undefined") return defaultPalette;
     const stored = localStorage.getItem(`${storageKey}-palette`);
     if (stored && paletteMap.current.has(stored)) return stored;
     return defaultPalette;
   });
-  const [resolvedMode, setResolvedMode] = useState5(
+  const [resolvedMode, setResolvedMode] = useState6(
     () => resolveMode(colorMode)
   );
-  const setColorMode = useCallback2(
+  const setColorMode = useCallback3(
     (mode) => {
       setColorModeState(mode);
       localStorage.setItem(`${storageKey}-mode`, mode);
     },
     [storageKey]
   );
-  const setPalette = useCallback2(
+  const setPalette = useCallback3(
     (name) => {
       if (!paletteMap.current.has(name)) return;
       setPaletteState(name);
@@ -1566,10 +1895,10 @@ function ThemeProvider({
     },
     [storageKey]
   );
-  const toggleColorMode = useCallback2(() => {
+  const toggleColorMode = useCallback3(() => {
     setColorMode(resolvedMode === "light" ? "dark" : "light");
   }, [resolvedMode, setColorMode]);
-  useEffect3(() => {
+  useEffect4(() => {
     const root = document.documentElement;
     const resolved = resolveMode(colorMode);
     setResolvedMode(resolved);
@@ -1591,7 +1920,7 @@ function ThemeProvider({
       }
     }
   }, [colorMode, palette]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (colorMode !== "system") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = () => {
@@ -1620,7 +1949,7 @@ function ThemeProvider({
     return () => mq.removeEventListener("change", handler);
   }, [colorMode, palette]);
   const paletteNames = Array.from(paletteMap.current.keys());
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx24(
     ThemeContext.Provider,
     {
       value: {
@@ -1787,6 +2116,10 @@ var oceanMist = {
 };
 var builtInPalettes = [midnightGarden, desertRose, oceanMist];
 export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   Alert,
   AlertDescription,
   AlertTitle,
@@ -1802,11 +2135,14 @@ export {
   CardTitle,
   Checkbox,
   DatePicker,
+  Drawer,
   Dropdown,
   DropdownItem,
   DropdownSeparator,
   Input,
   Modal,
+  OTPInput,
+  Popover2 as Popover,
   Progress,
   ProgressCircular,
   RadioGroup,