@bloomkit/react 0.2.11 → 0.2.12

package/dist/index.cjs

@@ -792,7 +792,7 @@ var Slider = _react.forwardRef.call(void 0,
 Slider.displayName = "Slider";
 
 // src/components/modal/modal.tsx
-var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
+var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog); var DialogPrimitive2 = _interopRequireWildcard(_reactdialog);
 
 function Modal({ open, onOpenChange, title, description, children, className }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive.Portal, { children: [
@@ -992,7 +992,7 @@ TabsContent.displayName = "TabsContent";
 
 // src/components/date-picker/date-picker.tsx
 
-var _reactpopover = require('@radix-ui/react-popover'); var Popover = _interopRequireWildcard(_reactpopover);
+var _reactpopover = require('@radix-ui/react-popover'); var Popover = _interopRequireWildcard(_reactpopover); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
 
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
@@ -1499,6 +1499,335 @@ var SelectSeparator = _react.forwardRef.call(void 0,
 );
 SelectSeparator.displayName = "SelectSeparator";
 
+// src/components/otp-input/otp-input.tsx
+
+
+var OTPInput = _react.forwardRef.call(void 0, 
+  ({ length = 6, value = "", onChange, onComplete, disabled = false, className, autoFocus = false }, ref) => {
+    const [digits, setDigits] = _react.useState.call(void 0, () => {
+      const arr = new Array(length).fill("");
+      value.split("").forEach((char, i) => {
+        if (i < length) arr[i] = char;
+      });
+      return arr;
+    });
+    const inputRefs = _react.useRef.call(void 0, []);
+    _react.useEffect.call(void 0, () => {
+      const arr = new Array(length).fill("");
+      value.split("").forEach((char, i) => {
+        if (i < length) arr[i] = char;
+      });
+      setDigits(arr);
+    }, [value, length]);
+    const updateDigits = _react.useCallback.call(void 0, 
+      (newDigits) => {
+        setDigits(newDigits);
+        const joined = newDigits.join("");
+        _optionalChain([onChange, 'optionalCall', _2 => _2(joined)]);
+        if (joined.length === length && newDigits.every((d) => d !== "")) {
+          _optionalChain([onComplete, 'optionalCall', _3 => _3(joined)]);
+        }
+      },
+      [length, onChange, onComplete]
+    );
+    const handleInput = _react.useCallback.call(void 0, 
+      (index, char) => {
+        if (!/^\d$/.test(char)) return;
+        const newDigits = [...digits];
+        newDigits[index] = char;
+        updateDigits(newDigits);
+        if (index < length - 1) {
+          _optionalChain([inputRefs, 'access', _4 => _4.current, 'access', _5 => _5[index + 1], 'optionalAccess', _6 => _6.focus, 'call', _7 => _7()]);
+        }
+      },
+      [digits, length, updateDigits]
+    );
+    const handleKeyDown = _react.useCallback.call(void 0, 
+      (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);
+            _optionalChain([inputRefs, 'access', _8 => _8.current, 'access', _9 => _9[index - 1], 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]);
+          }
+        } else if (e.key === "ArrowLeft" && index > 0) {
+          _optionalChain([inputRefs, 'access', _12 => _12.current, 'access', _13 => _13[index - 1], 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
+        } else if (e.key === "ArrowRight" && index < length - 1) {
+          _optionalChain([inputRefs, 'access', _16 => _16.current, 'access', _17 => _17[index + 1], 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]);
+        }
+      },
+      [digits, length, updateDigits]
+    );
+    const handlePaste = _react.useCallback.call(void 0, 
+      (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);
+        _optionalChain([inputRefs, 'access', _20 => _20.current, 'access', _21 => _21[focusIndex], 'optionalAccess', _22 => _22.focus, 'call', _23 => _23()]);
+      },
+      [length, updateDigits]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: cn("flex items-center gap-[var(--space-sm)]", className), children: digits.map((digit, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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
+
+
+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__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, DialogPrimitive2.Portal, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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__ */ _jsxruntime.jsxs.call(void 0, 
+      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__ */ _jsxruntime.jsx.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive2.Description, { className: "text-[length:var(--bloom-text-body)] color-[var(--bloom-text-secondary)] mb-[var(--space-lg)]", children: description }),
+          children,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            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__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/popover/popover.tsx
+
+
+function Popover2({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  className,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PopoverPrimitive.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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
+
+var _reactaccordion = require('@radix-ui/react-accordion'); var AccordionPrimitive = _interopRequireWildcard(_reactaccordion);
+
+var Accordion = _react.forwardRef.call(void 0, 
+  ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AccordionPrimitive.Root,
+    {
+      ref,
+      className: cn("w-full", className),
+      ...props
+    }
+  )
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = _react.forwardRef.call(void 0, 
+  ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AccordionPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--bloom-surface2)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = _react.forwardRef.call(void 0, 
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4 6l4 4 4-4" })
+          }
+        )
+      ]
+    }
+  ) })
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = _react.forwardRef.call(void 0, 
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pb-[var(--space-lg)]", children })
+    }
+  )
+);
+AccordionContent.displayName = "AccordionContent";
+
 // src/components/theme/theme.tsx
 
 
@@ -1857,5 +2186,12 @@ var builtInPalettes = [midnightGarden, desertRose, oceanMist];
 
 
 
-exports.Alert = Alert; exports.AlertDescription = AlertDescription; exports.AlertTitle = AlertTitle; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Badge = Badge; exports.Button = Button; exports.Card = Card; exports.CardContent = CardContent; exports.CardDescription = CardDescription; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.Checkbox = Checkbox; exports.DatePicker = DatePicker; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; exports.RadioGroup = RadioGroup; exports.RadioGroupItem = RadioGroupItem; exports.Select = Select; exports.SelectContent = SelectContent; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.SelectTrigger = SelectTrigger; exports.SelectValue = SelectValue; exports.Skeleton = Skeleton; exports.Slider = Slider; exports.Tabs = Tabs; exports.TabsContent = TabsContent; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.Textarea = Textarea; exports.ThemeProvider = ThemeProvider; exports.ToastProvider = ToastProvider; exports.Toggle = Toggle; exports.Tooltip = Tooltip; exports.TooltipProvider = TooltipProvider; exports.alertVariants = alertVariants; exports.avatarVariants = avatarVariants; exports.badgeVariants = badgeVariants; exports.bloomSpring = bloomSpring; exports.bloomTransition = bloomTransition; exports.bloomTransitionFast = bloomTransitionFast; exports.bloomTransitionSlow = bloomTransitionSlow; exports.builtInPalettes = builtInPalettes; exports.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.desertRose = desertRose; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; exports.midnightGarden = midnightGarden; exports.oceanMist = oceanMist; exports.progressFillVariants = progressFillVariants; exports.progressTrackVariants = progressTrackVariants; exports.skeletonVariants = skeletonVariants; exports.slideUp = slideUp; exports.tabsListVariants = tabsListVariants; exports.toastVariants = toastVariants; exports.useBreathing = useBreathing; exports.useReducedMotion = useReducedMotion; exports.useTheme = useTheme; exports.useToast = useToast;
+
+
+
+
+
+
+
+exports.Accordion = Accordion; exports.AccordionContent = AccordionContent; exports.AccordionItem = AccordionItem; exports.AccordionTrigger = AccordionTrigger; exports.Alert = Alert; exports.AlertDescription = AlertDescription; exports.AlertTitle = AlertTitle; exports.Avatar = Avatar; exports.AvatarGroup = AvatarGroup; exports.Badge = Badge; exports.Button = Button; exports.Card = Card; exports.CardContent = CardContent; exports.CardDescription = CardDescription; exports.CardFooter = CardFooter; exports.CardHeader = CardHeader; exports.CardTitle = CardTitle; exports.Checkbox = Checkbox; exports.DatePicker = DatePicker; exports.Drawer = Drawer; exports.Dropdown = Dropdown; exports.DropdownItem = DropdownItem; exports.DropdownSeparator = DropdownSeparator; exports.Input = Input; exports.Modal = Modal; exports.OTPInput = OTPInput; exports.Popover = Popover2; exports.Progress = Progress; exports.ProgressCircular = ProgressCircular; exports.RadioGroup = RadioGroup; exports.RadioGroupItem = RadioGroupItem; exports.Select = Select; exports.SelectContent = SelectContent; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.SelectTrigger = SelectTrigger; exports.SelectValue = SelectValue; exports.Skeleton = Skeleton; exports.Slider = Slider; exports.Tabs = Tabs; exports.TabsContent = TabsContent; exports.TabsList = TabsList; exports.TabsTrigger = TabsTrigger; exports.Textarea = Textarea; exports.ThemeProvider = ThemeProvider; exports.ToastProvider = ToastProvider; exports.Toggle = Toggle; exports.Tooltip = Tooltip; exports.TooltipProvider = TooltipProvider; exports.alertVariants = alertVariants; exports.avatarVariants = avatarVariants; exports.badgeVariants = badgeVariants; exports.bloomSpring = bloomSpring; exports.bloomTransition = bloomTransition; exports.bloomTransitionFast = bloomTransitionFast; exports.bloomTransitionSlow = bloomTransitionSlow; exports.builtInPalettes = builtInPalettes; exports.buttonVariants = buttonVariants; exports.cardHoverLift = cardHoverLift; exports.cardVariants = cardVariants; exports.cn = cn; exports.desertRose = desertRose; exports.fadeIn = fadeIn; exports.hoverLift = hoverLift; exports.inputVariants = inputVariants; exports.midnightGarden = midnightGarden; exports.oceanMist = oceanMist; exports.progressFillVariants = progressFillVariants; exports.progressTrackVariants = progressTrackVariants; exports.skeletonVariants = skeletonVariants; exports.slideUp = slideUp; exports.tabsListVariants = tabsListVariants; exports.toastVariants = toastVariants; exports.useBreathing = useBreathing; exports.useReducedMotion = useReducedMotion; exports.useTheme = useTheme; exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map