@caffeinebounce/ui 0.62.2

package/dist/chunk-N6AFNFZR.mjs

@@ -0,0 +1,565 @@
+import { Label } from './chunk-KHCC5UKW.mjs';
+import { Separator } from './chunk-ZKUIUE7W.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { EyeOffIcon, EyeIcon, MinusIcon, CheckIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
+import * as React2 from 'react';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { cva } from 'class-variance-authority';
+
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full min-w-0 max-w-full rounded-box border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm break-words [overflow-wrap:anywhere]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      "data-slot": "input-otp",
+      containerClassName: cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn("flex items-center", className),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React2.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(
+        "relative flex h-14 w-12 items-center justify-center border border-input bg-background text-xl font-semibold shadow-sm transition-all outline-none",
+        "first:rounded-l-lg last:rounded-r-lg -ml-px first:ml-0",
+        isActive && "z-10 ring-2 ring-ring ring-offset-2 ring-offset-background",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) });
+}
+function Checkbox({
+  className,
+  checked,
+  onCheckedChange,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center",
+        disabled && "opacity-50 cursor-not-allowed"
+      ),
+      children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: (e) => onCheckedChange?.(e.target.checked),
+            className: "peer sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "checkbox",
+            className: cn(
+              "border-input bg-background peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px] flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-xs transition-colors",
+              "peer-checked:bg-primary peer-checked:border-primary peer-checked:text-primary-foreground",
+              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+              className
+            ),
+            children: checked && /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 stroke-3" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-box has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, error.message)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-xs font-normal -mt-2.5", className),
+      ...props,
+      children: content
+    }
+  );
+}
+var PasswordInput = React2.forwardRef(({ className, ...props }, ref) => {
+  const [showPassword, setShowPassword] = React2.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: showPassword ? "text" : "password",
+        "data-slot": "input",
+        "data-autofill-aware": "true",
+        className: cn(
+          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-box border bg-transparent px-3 py-1 pr-10 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setShowPassword(!showPassword),
+        className: "text-muted-foreground hover:text-foreground absolute right-0 top-0 flex h-9 w-10 items-center justify-center rounded-r-box transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        tabIndex: -1,
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    )
+  ] });
+});
+PasswordInput.displayName = "PasswordInput";
+var defaultPasswordRules = [
+  {
+    id: "min-length",
+    label: "Must be at least 8 characters long",
+    validator: (password) => password.length >= 8
+  },
+  {
+    id: "uppercase",
+    label: "Must contain an uppercase letter",
+    validator: (password) => /[A-Z]/.test(password)
+  },
+  {
+    id: "special",
+    label: "Must contain a special character",
+    validator: (password) => /[!@#$%^&*(),.?":{}|<>]/.test(password)
+  }
+];
+var extendedPasswordRules = [...defaultPasswordRules];
+function PasswordRequirements({
+  password,
+  rules = defaultPasswordRules,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col gap-1.5 text-xs", className), ...props, children: rules.map((rule) => {
+    const isMet = password.length > 0 && rule.validator(password);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn(
+          "flex items-center gap-1.5 transition-colors duration-200",
+          isMet ? "text-green-600" : "text-muted-foreground"
+        ),
+        children: [
+          isMet ? /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx(InfoIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: rule.label })
+        ]
+      },
+      rule.id
+    );
+  }) });
+}
+function VerificationCodeInput({
+  length = 6,
+  value = "",
+  onChange,
+  onComplete,
+  disabled = false,
+  autoFocus = true,
+  className
+}) {
+  const [code, setCode] = useState(
+    value.split("").concat(Array(length - value.length).fill(""))
+  );
+  const inputRefs = useRef([]);
+  const hiddenInputRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus && hiddenInputRef.current) {
+      hiddenInputRef.current.focus();
+    }
+  }, [autoFocus]);
+  useEffect(() => {
+    const newCode = value.split("").concat(Array(length - value.length).fill(""));
+    setCode(newCode.slice(0, length));
+  }, [value, length]);
+  const handleHiddenInput = (e) => {
+    const inputValue = e.target.value.replace(/\D/g, "").slice(0, length);
+    const newCode = inputValue.split("").concat(Array(length - inputValue.length).fill(""));
+    setCode(newCode);
+    onChange?.(inputValue);
+    setTimeout(() => {
+      if (inputValue.length === length) {
+        onComplete?.(inputValue);
+        inputRefs.current[length - 1]?.focus();
+      } else if (inputValue.length > 0) {
+        inputRefs.current[Math.min(inputValue.length, length - 1)]?.focus();
+      }
+    }, 0);
+  };
+  const handleChange = (index, e) => {
+    const inputValue = e.target.value;
+    if (inputValue.length > 1) {
+      const pastedCode = inputValue.replace(/\D/g, "").slice(0, length);
+      const newCode2 = pastedCode.split("").concat(Array(length - pastedCode.length).fill(""));
+      setCode(newCode2);
+      onChange?.(pastedCode);
+      if (pastedCode.length === length) {
+        onComplete?.(pastedCode);
+        inputRefs.current[length - 1]?.blur();
+      } else {
+        inputRefs.current[Math.min(pastedCode.length, length - 1)]?.focus();
+      }
+      return;
+    }
+    const digit = inputValue.replace(/\D/g, "");
+    const newCode = [...code];
+    newCode[index] = digit;
+    setCode(newCode);
+    const codeString = newCode.join("");
+    onChange?.(codeString);
+    if (digit && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+    const isComplete = newCode.every((d) => d !== "");
+    if (isComplete && codeString.length === length) {
+      onComplete?.(codeString);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      if (!code[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+        const newCode = [...code];
+        newCode[index - 1] = "";
+        setCode(newCode);
+        onChange?.(newCode.join(""));
+      } else {
+        const newCode = [...code];
+        newCode[index] = "";
+        setCode(newCode);
+        onChange?.(newCode.join(""));
+      }
+    } 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();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (pastedData.length === 0) return;
+    const newCode = pastedData.split("").concat(Array(length - pastedData.length).fill(""));
+    setCode(newCode.slice(0, length));
+    onChange?.(pastedData);
+    setTimeout(() => {
+      if (pastedData.length === length) {
+        onComplete?.(pastedData);
+        inputRefs.current[length - 1]?.focus();
+      } else {
+        inputRefs.current[Math.min(pastedData.length, length - 1)]?.focus();
+      }
+    }, 0);
+  };
+  const handleHiddenFocus = () => {
+    const firstEmptyIndex = code.indexOf("");
+    const targetIndex = firstEmptyIndex === -1 ? 0 : firstEmptyIndex;
+    inputRefs.current[targetIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), onPaste: handlePaste, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: hiddenInputRef,
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        autoComplete: "one-time-code",
+        name: "otp",
+        id: "otp-input",
+        value: code.join(""),
+        onChange: handleHiddenInput,
+        onFocus: handleHiddenFocus,
+        disabled,
+        className: "absolute inset-0 w-full h-full opacity-0 cursor-text z-10",
+        style: { caretColor: "transparent" },
+        "aria-label": "One-time code"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2 justify-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputRefs.current[index] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        autoComplete: "one-time-code",
+        maxLength: length,
+        value: code[index] || "",
+        onChange: (e) => handleChange(index, e),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        disabled,
+        className: cn(
+          "w-12 h-14 text-center text-xl font-semibold rounded-lg border border-input bg-background",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "transition-colors"
+        ),
+        "aria-label": `Digit ${index + 1}`
+      },
+      index
+    )) })
+  ] });
+}
+
+export { Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, PasswordRequirements, Textarea, VerificationCodeInput, defaultPasswordRules, extendedPasswordRules };