@dev-dga/react 0.8.0 → 0.8.2

package/dist/chunk-3VOOMW6O.js

@@ -0,0 +1,215 @@
+import {
+  Check,
+  ChevronRight
+} from "./chunk-CDS4SYEQ.js";
+import {
+  DgaContext
+} from "./chunk-TMXABSFE.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Menubar/Menubar.tsx
+import { useContext } from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var menubarContentVariants = cva("ddga-menubar-menu", {
+  variants: {
+    size: {
+      sm: "ddga-menubar-menu--sm",
+      md: "ddga-menubar-menu--md"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var menubarTriggerVariants = cva("ddga-menubar__trigger", {
+  variants: {
+    variant: {
+      default: "ddga-menubar__trigger--default",
+      outline: "ddga-menubar__trigger--outline"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Menubar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.Root,
+    {
+      "data-slot": "menubar",
+      className: cn("ddga-menubar", className),
+      ...props
+    }
+  );
+}
+function MenubarMenu(props) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Menu, { ...props });
+}
+function MenubarTrigger({ variant, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.Trigger,
+    {
+      "data-slot": "menubar-trigger",
+      "data-variant": variant ?? "default",
+      className: cn(menubarTriggerVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function MenubarContent({ size, className, sideOffset = 6, ...props }) {
+  const ctx = useContext(DgaContext);
+  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+    MenubarPrimitive.Content,
+    {
+      "data-slot": "menubar-content",
+      sideOffset,
+      className: cn(menubarContentVariants({ size }), className),
+      ...props
+    }
+  ) });
+}
+function MenubarItem({
+  className,
+  destructive,
+  startIcon,
+  shortcut,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenubarPrimitive.Item,
+    {
+      "data-slot": "menubar-item",
+      "data-destructive": destructive ? "" : void 0,
+      className: cn("ddga-menubar-menu__item", className),
+      ...props,
+      children: [
+        startIcon ? /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__label", children }),
+        shortcut ? /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
+      ]
+    }
+  );
+}
+function MenubarCheckboxItem({
+  className,
+  children,
+  onSelect,
+  ...props
+}) {
+  const handleSelect = onSelect ?? ((event) => {
+    event.preventDefault();
+  });
+  return /* @__PURE__ */ jsxs(
+    MenubarPrimitive.CheckboxItem,
+    {
+      "data-slot": "menubar-checkbox-item",
+      className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
+      onSelect: handleSelect,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__label", children })
+      ]
+    }
+  );
+}
+function MenubarRadioGroup(props) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+}
+function MenubarRadioItem({ className, children, onSelect, ...props }) {
+  const handleSelect = onSelect ?? ((event) => {
+    event.preventDefault();
+  });
+  return /* @__PURE__ */ jsxs(
+    MenubarPrimitive.RadioItem,
+    {
+      "data-slot": "menubar-radio-item",
+      className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--checkable", className),
+      onSelect: handleSelect,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__label", children })
+      ]
+    }
+  );
+}
+function MenubarLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.Label,
+    {
+      "data-slot": "menubar-label",
+      className: cn("ddga-menubar-menu__group-label", className),
+      ...props
+    }
+  );
+}
+function MenubarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MenubarPrimitive.Separator,
+    {
+      "data-slot": "menubar-separator",
+      className: cn("ddga-menubar-menu__separator", className),
+      ...props
+    }
+  );
+}
+function MenubarGroup(props) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
+}
+function MenubarSub(props) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Sub, { ...props });
+}
+function MenubarSubTrigger({ className, startIcon, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    MenubarPrimitive.SubTrigger,
+    {
+      "data-slot": "menubar-sub-trigger",
+      className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--sub", className),
+      ...props,
+      children: [
+        startIcon ? /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "ddga-menubar-menu__label", children }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function MenubarSubContent({ size, className, ...props }) {
+  const ctx = useContext(DgaContext);
+  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+    MenubarPrimitive.SubContent,
+    {
+      "data-slot": "menubar-sub-content",
+      className: cn(menubarContentVariants({ size }), className),
+      ...props
+    }
+  ) });
+}
+
+export {
+  menubarContentVariants,
+  menubarTriggerVariants,
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarGroup,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent
+};
+//# sourceMappingURL=chunk-3VOOMW6O.js.map

package/dist/chunk-3VOOMW6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menubar/Menubar.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, type ReactNode } from 'react';\nimport { Menubar as MenubarPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Check, ChevronRight } from '../../internal/icons';\nimport { DgaContext } from '../../providers/DgaContext';\n\n// ─── 1. Variants ─── //\n\n// Size lives on the dropdown panel (Content / SubContent), mirroring\n// DropdownMenu. The bar itself is a single size, so it carries no cva.\nconst menubarContentVariants = cva('ddga-menubar-menu', {\n  variants: {\n    size: {\n      sm: 'ddga-menubar-menu--sm',\n      md: 'ddga-menubar-menu--md',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// Trigger look. `default` = flat menu-bar idiom (text + SA-green open underline);\n// `outline` = bordered button-style chip. Apply the same variant to every\n// trigger in a bar for a consistent look.\nconst menubarTriggerVariants = cva('ddga-menubar__trigger', {\n  variants: {\n    variant: {\n      default: 'ddga-menubar__trigger--default',\n      outline: 'ddga-menubar__trigger--outline',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\n// ─── 2. Bar (Root + Menu + Trigger) ─── //\n\ntype MenubarProps = React.ComponentProps<typeof MenubarPrimitive.Root>;\n\nfunction Menubar({ className, ...props }: MenubarProps) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn('ddga-menubar', className)}\n      {...props}\n    />\n  );\n}\n\ntype MenubarMenuProps = React.ComponentProps<typeof MenubarPrimitive.Menu>;\n\nfunction MenubarMenu(props: MenubarMenuProps) {\n  return <MenubarPrimitive.Menu {...props} />;\n}\n\ntype MenubarTriggerProps = React.ComponentProps<typeof MenubarPrimitive.Trigger> &\n  VariantProps<typeof menubarTriggerVariants>;\n\nfunction MenubarTrigger({ variant, className, ...props }: MenubarTriggerProps) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      data-variant={variant ?? 'default'}\n      className={cn(menubarTriggerVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n// ─── 3. Content (portal-anchored) ─── //\n\ntype MenubarContentProps = React.ComponentProps<typeof MenubarPrimitive.Content> &\n  VariantProps<typeof menubarContentVariants>;\n\nfunction MenubarContent({ size, className, sideOffset = 6, ...props }: MenubarContentProps) {\n  // Radix Portal defaults to <body>, which doesn't inherit DgaProvider's\n  // data-theme / CSS vars. Re-anchor at the provider's body-level portal\n  // container (mirrors data-theme + dir + theme vars) so the menu inherits\n  // theme AND escapes any clipping or transform ancestor. Falls back to\n  // <body> when used outside a provider. (Same pattern as DropdownMenu.)\n  const ctx = useContext(DgaContext);\n  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n\n  return (\n    <MenubarPrimitive.Portal container={portalContainer}>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        sideOffset={sideOffset}\n        className={cn(menubarContentVariants({ size }), className)}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\n// ─── 4. Item + variants ─── //\n\ntype MenubarItemProps = React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Style as a destructive action (red text, red hover). */\n  destructive?: boolean;\n  /** Icon rendered before the label. Sized to 1em. */\n  startIcon?: ReactNode;\n  /** Trailing text shown muted, e.g. a keyboard shortcut hint (\"⌘K\"). */\n  shortcut?: ReactNode;\n};\n\nfunction MenubarItem({\n  className,\n  destructive,\n  startIcon,\n  shortcut,\n  children,\n  ...props\n}: MenubarItemProps) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-destructive={destructive ? '' : undefined}\n      className={cn('ddga-menubar-menu__item', className)}\n      {...props}\n    >\n      {startIcon ? (\n        <span className=\"ddga-menubar-menu__icon\" aria-hidden=\"true\">\n          {startIcon}\n        </span>\n      ) : null}\n      <span className=\"ddga-menubar-menu__label\">{children}</span>\n      {shortcut ? (\n        <span className=\"ddga-menubar-menu__shortcut\" aria-hidden=\"true\">\n          {shortcut}\n        </span>\n      ) : null}\n    </MenubarPrimitive.Item>\n  );\n}\n\n// ─── 5. CheckboxItem + RadioItem ─── //\n\ntype MenubarCheckboxItemProps = React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>;\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  onSelect,\n  ...props\n}: MenubarCheckboxItemProps) {\n  // Default UX: keep the menu open across toggles so consumers can flip\n  // multiple checkboxes in one pass. If a consumer passes their own onSelect,\n  // they own the behavior (call `event.preventDefault()` to keep this default).\n  const handleSelect =\n    onSelect ??\n    ((event: Event) => {\n      event.preventDefault();\n    });\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn('ddga-menubar-menu__item', 'ddga-menubar-menu__item--checkable', className)}\n      onSelect={handleSelect}\n      {...props}\n    >\n      <span className=\"ddga-menubar-menu__indicator\" aria-hidden=\"true\">\n        <MenubarPrimitive.ItemIndicator>\n          <Check className=\"ddga-menubar-menu__indicator-icon\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      <span className=\"ddga-menubar-menu__label\">{children}</span>\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\ntype MenubarRadioGroupProps = React.ComponentProps<typeof MenubarPrimitive.RadioGroup>;\n\nfunction MenubarRadioGroup(props: MenubarRadioGroupProps) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\ntype MenubarRadioItemProps = React.ComponentProps<typeof MenubarPrimitive.RadioItem>;\n\nfunction MenubarRadioItem({ className, children, onSelect, ...props }: MenubarRadioItemProps) {\n  // Same default-open behavior as CheckboxItem — selecting a radio without\n  // the menu visually confirming the new state is a frustrating dead-feel.\n  const handleSelect =\n    onSelect ??\n    ((event: Event) => {\n      event.preventDefault();\n    });\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn('ddga-menubar-menu__item', 'ddga-menubar-menu__item--checkable', className)}\n      onSelect={handleSelect}\n      {...props}\n    >\n      <span className=\"ddga-menubar-menu__indicator\" aria-hidden=\"true\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"ddga-menubar-menu__radio-dot\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      <span className=\"ddga-menubar-menu__label\">{children}</span>\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n// ─── 6. Label + Separator + Group ─── //\n\ntype MenubarLabelProps = React.ComponentProps<typeof MenubarPrimitive.Label>;\n\nfunction MenubarLabel({ className, ...props }: MenubarLabelProps) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      className={cn('ddga-menubar-menu__group-label', className)}\n      {...props}\n    />\n  );\n}\n\ntype MenubarSeparatorProps = React.ComponentProps<typeof MenubarPrimitive.Separator>;\n\nfunction MenubarSeparator({ className, ...props }: MenubarSeparatorProps) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn('ddga-menubar-menu__separator', className)}\n      {...props}\n    />\n  );\n}\n\ntype MenubarGroupProps = React.ComponentProps<typeof MenubarPrimitive.Group>;\n\nfunction MenubarGroup(props: MenubarGroupProps) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n// ─── 7. Submenu (Sub + SubTrigger + SubContent) ─── //\n\ntype MenubarSubProps = React.ComponentProps<typeof MenubarPrimitive.Sub>;\n\nfunction MenubarSub(props: MenubarSubProps) {\n  return <MenubarPrimitive.Sub {...props} />;\n}\n\ntype MenubarSubTriggerProps = React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  startIcon?: ReactNode;\n};\n\nfunction MenubarSubTrigger({ className, startIcon, children, ...props }: MenubarSubTriggerProps) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      className={cn('ddga-menubar-menu__item', 'ddga-menubar-menu__item--sub', className)}\n      {...props}\n    >\n      {startIcon ? (\n        <span className=\"ddga-menubar-menu__icon\" aria-hidden=\"true\">\n          {startIcon}\n        </span>\n      ) : null}\n      <span className=\"ddga-menubar-menu__label\">{children}</span>\n      <ChevronRight className=\"ddga-menubar-menu__sub-chevron\" aria-hidden=\"true\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\ntype MenubarSubContentProps = React.ComponentProps<typeof MenubarPrimitive.SubContent> &\n  VariantProps<typeof menubarContentVariants>;\n\nfunction MenubarSubContent({ size, className, ...props }: MenubarSubContentProps) {\n  const ctx = useContext(DgaContext);\n  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n\n  return (\n    <MenubarPrimitive.Portal container={portalContainer}>\n      <MenubarPrimitive.SubContent\n        data-slot=\"menubar-sub-content\"\n        className={cn(menubarContentVariants({ size }), className)}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\n// ─── 8. Exports ─── //\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarLabel,\n  MenubarSeparator,\n  MenubarGroup,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n  menubarContentVariants,\n  menubarTriggerVariants,\n};\nexport type {\n  MenubarProps,\n  MenubarMenuProps,\n  MenubarTriggerProps,\n  MenubarContentProps,\n  MenubarItemProps,\n  MenubarCheckboxItemProps,\n  MenubarRadioGroupProps,\n  MenubarRadioItemProps,\n  MenubarLabelProps,\n  MenubarSeparatorProps,\n  MenubarGroupProps,\n  MenubarSubProps,\n  MenubarSubTriggerProps,\n  MenubarSubContentProps,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-3VZ56VNQ.cjs

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-3VZ56VNQ.cjs.map

package/dist/chunk-3VZ56VNQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3VZ56VNQ.cjs"],"names":[],"mappings":"AAAA","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3VZ56VNQ.cjs"}

package/dist/chunk-3X7ORLG5.cjs

@@ -0,0 +1,216 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkN4FHLSNVcjs = require('./chunk-N4FHLSNV.cjs');
+
+
+var _chunkNH3KGR65cjs = require('./chunk-NH3KGR65.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/InputOTP/InputOTP.tsx
+var _react = require('react');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var DEFAULT_PATTERN = "^[0-9]*$";
+var inputOTPVariants = _classvarianceauthority.cva.call(void 0, "ddga-input-otp", {
+  variants: {
+    size: {
+      sm: "ddga-input-otp--sm",
+      md: "ddga-input-otp--md",
+      lg: "ddga-input-otp--lg"
+    },
+    error: {
+      true: "ddga-input-otp--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function resolveGroups(length, groupSizes) {
+  if (!groupSizes || groupSizes.length === 0) return [length];
+  const sum = groupSizes.reduce((total, n) => total + n, 0);
+  if (sum !== length) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `[@dev-dga/react] InputOTP: groupSizes must sum to length (${length}); got ${sum}. Falling back to a single group.`
+      );
+    }
+    return [length];
+  }
+  return groupSizes;
+}
+function Slot({
+  char,
+  active,
+  caret,
+  mask
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": active || void 0,
+      "data-filled": char != null || void 0,
+      className: "ddga-input-otp__slot",
+      children: [
+        char != null ? mask ? "\u2022" : char : null,
+        caret && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "aria-hidden": "true", "data-slot": "input-otp-caret", className: "ddga-input-otp__caret" })
+      ]
+    }
+  );
+}
+function InputOTP({
+  id: externalId,
+  length = 6,
+  groupSizes,
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  pattern = DEFAULT_PATTERN,
+  mask = false,
+  separator,
+  size,
+  disabled,
+  autoFocus,
+  name,
+  required,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const inputRef = _react.useRef.call(void 0, null);
+  const [focused, setFocused] = _react.useState.call(void 0, false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = _react.useState.call(void 0, _nullishCoalesce(defaultValue, () => ( "")));
+  const current = isControlled ? value : internal;
+  const compiledPattern = _react.useMemo.call(void 0, () => {
+    try {
+      return new RegExp(pattern);
+    } catch (e) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn(
+          `[@dev-dga/react] InputOTP: invalid \`pattern\` regex "${pattern}". Falling back to digits-only.`
+        );
+      }
+      return new RegExp(DEFAULT_PATTERN);
+    }
+  }, [pattern]);
+  const completedRef = _react.useRef.call(void 0, null);
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = _chunkNH3KGR65cjs.useFieldA11y.call(void 0, {
+    name: "InputOTP",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  });
+  function handleChange(event) {
+    const next = event.target.value.replace(/[\s-]/g, "").slice(0, length);
+    if (!compiledPattern.test(next)) return;
+    if (!isControlled) setInternal(next);
+    _optionalChain([onChange, 'optionalCall', _2 => _2(next)]);
+    if (next.length === length) {
+      if (completedRef.current !== next) {
+        completedRef.current = next;
+        _optionalChain([onComplete, 'optionalCall', _3 => _3(next)]);
+      }
+    } else {
+      completedRef.current = null;
+    }
+  }
+  function moveCaretToEnd() {
+    const el = inputRef.current;
+    if (el) el.setSelectionRange(el.value.length, el.value.length);
+  }
+  const groups = resolveGroups(length, groupSizes);
+  const lastGroup = groups.length - 1;
+  const activeIndex = focused ? Math.min(current.length, length - 1) : -1;
+  const inputMode = pattern === DEFAULT_PATTERN ? "numeric" : "text";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "input-otp-field", className: "ddga-field", ...props, children: [
+    label && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: fieldId, className: "ddga-input-otp__label", children: [
+      label,
+      required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: "ddga-input-otp__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, inputOTPVariants({ size, error: hasError }), className),
+        "data-slot": "input-otp",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ...controlProps,
+              ref: inputRef,
+              type: "text",
+              inputMode,
+              autoComplete: "one-time-code",
+              value: current,
+              maxLength: length,
+              disabled,
+              autoFocus,
+              name,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              onChange: handleChange,
+              onFocus: () => {
+                setFocused(true);
+                moveCaretToEnd();
+              },
+              onBlur: () => setFocused(false),
+              onPointerUp: moveCaretToEnd,
+              className: "ddga-input-otp__input",
+              "data-slot": "input-otp-input"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { dir: "ltr", "aria-hidden": "true", "data-slot": "input-otp-row", className: "ddga-input-otp__row", children: groups.map((count, groupIndex) => {
+            const start = groups.slice(0, groupIndex).reduce((total, n) => total + n, 0);
+            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "input-otp-group", className: "ddga-input-otp__group", children: Array.from({ length: count }, (_, offset) => {
+                const index = start + offset;
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  Slot,
+                  {
+                    char: current[index],
+                    active: index === activeIndex,
+                    caret: index === activeIndex && current.length < length,
+                    mask
+                  },
+                  index
+                );
+              }) }),
+              groupIndex < lastGroup && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-slot": "input-otp-separator",
+                  className: "ddga-input-otp__separator",
+                  children: _nullishCoalesce(separator, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-input-otp__separator-dash" })))
+                }
+              )
+            ] }, groupIndex);
+          }) })
+        ]
+      }
+    ),
+    hasErrorMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4FHLSNVcjs.FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+
+
+
+
+exports.inputOTPVariants = inputOTPVariants; exports.InputOTP = InputOTP;
+//# sourceMappingURL=chunk-3X7ORLG5.cjs.map

package/dist/chunk-3X7ORLG5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3X7ORLG5.cjs","../src/components/InputOTP/InputOTP.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3X7ORLG5.cjs","sourcesContent":[null,"'use client';\n\nimport { useMemo, useRef, useState, Fragment, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFieldA11y, FieldMessage } from '../../field';\n\n// Default: digits-only, allows the empty string so clearing works. Consumers\n// can pass any full-string regex (e.g. '^[a-zA-Z0-9]+$' for alphanumeric).\nconst DEFAULT_PATTERN = '^[0-9]*$';\n\n// ─── 1. Variants (cva) ─── //\n\n// Applied to the container that overlays the (visually-hidden) input on top of\n// the decorative slot row, mirroring NumberInput's control box.\nconst inputOTPVariants = cva('ddga-input-otp', {\n  variants: {\n    size: {\n      sm: 'ddga-input-otp--sm',\n      md: 'ddga-input-otp--md',\n      lg: 'ddga-input-otp--lg',\n    },\n    error: {\n      true: 'ddga-input-otp--error',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ─── 2. Types ─── //\n\ninterface InputOTPProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'onChange' | 'defaultValue' | 'children'>,\n    VariantProps<typeof inputOTPVariants> {\n  /** Number of slots. Defaults to 6 (Saudi SMS OTP length). */\n  length?: number;\n  /** Optional visual grouping; must sum to `length`. Default: one group. */\n  groupSizes?: number[];\n  /** Controlled value (the entered characters). */\n  value?: string;\n  /** Uncontrolled initial value. */\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Fires when all `length` slots are filled. */\n  onComplete?: (value: string) => void;\n  /** Full-string regex the entered value must match. Defaults to digits-only. */\n  pattern?: string;\n  /** Render dots instead of characters (PIN entry). */\n  mask?: boolean;\n  /** Override the divider rendered between groups. */\n  separator?: ReactNode;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  name?: string;\n  required?: boolean;\n  /** Visible field label, auto-associated to the input via `htmlFor`/`id`. */\n  label?: ReactNode;\n  /** Hint shown below the field. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the field when invalid. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid: sets `aria-invalid` and error styling. */\n  error?: boolean;\n}\n\n// ─── 3. Helpers ─── //\n\n// Resolve the per-group slot counts. An absent/empty `groupSizes` is one group;\n// a mismatched sum is a caller bug, so dev-warn and fall back rather than render\n// a code whose layout doesn't match its length.\nfunction resolveGroups(length: number, groupSizes: number[] | undefined): number[] {\n  if (!groupSizes || groupSizes.length === 0) return [length];\n  const sum = groupSizes.reduce((total, n) => total + n, 0);\n  if (sum !== length) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(\n        `[@dev-dga/react] InputOTP: groupSizes must sum to length (${length}); ` +\n          `got ${sum}. Falling back to a single group.`,\n      );\n    }\n    return [length];\n  }\n  return groupSizes;\n}\n\nfunction Slot({\n  char,\n  active,\n  caret,\n  mask,\n}: {\n  char: string | undefined;\n  active: boolean;\n  caret: boolean;\n  mask: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={active || undefined}\n      data-filled={char != null || undefined}\n      className=\"ddga-input-otp__slot\"\n    >\n      {char != null ? (mask ? '•' : char) : null}\n      {caret && (\n        <div aria-hidden=\"true\" data-slot=\"input-otp-caret\" className=\"ddga-input-otp__caret\" />\n      )}\n    </div>\n  );\n}\n\n// ─── 4. Component ─── //\n\nfunction InputOTP({\n  id: externalId,\n  length = 6,\n  groupSizes,\n  value,\n  defaultValue,\n  onChange,\n  onComplete,\n  pattern = DEFAULT_PATTERN,\n  mask = false,\n  separator,\n  size,\n  disabled,\n  autoFocus,\n  name,\n  required,\n  label,\n  helperText,\n  errorMessage,\n  error,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: InputOTPProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [focused, setFocused] = useState(false);\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState(defaultValue ?? '');\n  const current = isControlled ? value : internal;\n\n  // Compile the pattern once per change to `pattern`. A malformed regex is a\n  // caller bug — dev-warn and fall back to digits-only rather than throw on\n  // every keystroke (mirrors the groupSizes-mismatch handling).\n  const compiledPattern = useMemo(() => {\n    try {\n      return new RegExp(pattern);\n    } catch {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn(\n          `[@dev-dga/react] InputOTP: invalid \\`pattern\\` regex \"${pattern}\". ` +\n            'Falling back to digits-only.',\n        );\n      }\n      return new RegExp(DEFAULT_PATTERN);\n    }\n  }, [pattern]);\n\n  // Guards onComplete against firing more than once for the same full value\n  // (IME / autofill can deliver the same value across repeated change events).\n  const completedRef = useRef<string | null>(null);\n\n  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =\n    useFieldA11y({\n      name: 'InputOTP',\n      id: externalId,\n      label,\n      error,\n      errorMessage,\n      helperText,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n    });\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    // Strip whitespace + hyphens first, so a code pasted with display\n    // separators (\"123 456\", \"123-456\") still fills — neither is ever a valid\n    // OTP/PIN character. Then cap to `length`.\n    const next = event.target.value.replace(/[\\s-]/g, '').slice(0, length);\n    // Reject the whole (cleaned) candidate if it still doesn't match — the\n    // keystroke/paste never lands (mirrors NumberInput). The default pattern\n    // allows the empty string, so clearing always works.\n    if (!compiledPattern.test(next)) return;\n    if (!isControlled) setInternal(next);\n    onChange?.(next);\n    if (next.length === length) {\n      if (completedRef.current !== next) {\n        completedRef.current = next;\n        onComplete?.(next);\n      }\n    } else {\n      completedRef.current = null;\n    }\n  }\n\n  // Keep the caret at the end so Backspace always removes the last entered char;\n  // the visible caret is the fake one we draw on the active slot.\n  function moveCaretToEnd() {\n    const el = inputRef.current;\n    if (el) el.setSelectionRange(el.value.length, el.value.length);\n  }\n\n  const groups = resolveGroups(length, groupSizes);\n  const lastGroup = groups.length - 1;\n  // The active slot is where the next character lands (clamped to the last slot\n  // when the code is full). Only shown while focused.\n  const activeIndex = focused ? Math.min(current.length, length - 1) : -1;\n  const inputMode = pattern === DEFAULT_PATTERN ? 'numeric' : 'text';\n\n  return (\n    <div data-slot=\"input-otp-field\" className=\"ddga-field\" {...props}>\n      {label && (\n        <label htmlFor={fieldId} className=\"ddga-input-otp__label\">\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"ddga-input-otp__required\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        className={cn(inputOTPVariants({ size, error: hasError }), className)}\n        data-slot=\"input-otp\"\n      >\n        {/* The real control — overlays the row, visually transparent. Paste,\n            SMS autofill, typing, and Backspace all flow through its onChange. */}\n        <input\n          {...controlProps}\n          ref={inputRef}\n          type=\"text\"\n          inputMode={inputMode}\n          autoComplete=\"one-time-code\"\n          // The slots are the visible UI, but the value itself never renders\n          // here (the input is transparent), so masking is purely the slots'\n          // concern — even password managers can't read a visually-empty field.\n          value={current}\n          maxLength={length}\n          disabled={disabled}\n          autoFocus={autoFocus}\n          name={name}\n          required={required}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          onChange={handleChange}\n          onFocus={() => {\n            setFocused(true);\n            moveCaretToEnd();\n          }}\n          onBlur={() => setFocused(false)}\n          onPointerUp={moveCaretToEnd}\n          className=\"ddga-input-otp__input\"\n          data-slot=\"input-otp-input\"\n        />\n        {/* Decorative slot row. Forced LTR so the code is always read/entered\n            left-to-right even in an RTL form (DGA convention). */}\n        <div dir=\"ltr\" aria-hidden=\"true\" data-slot=\"input-otp-row\" className=\"ddga-input-otp__row\">\n          {groups.map((count, groupIndex) => {\n            const start = groups.slice(0, groupIndex).reduce((total, n) => total + n, 0);\n            return (\n              <Fragment key={groupIndex}>\n                <div data-slot=\"input-otp-group\" className=\"ddga-input-otp__group\">\n                  {Array.from({ length: count }, (_, offset) => {\n                    const index = start + offset;\n                    return (\n                      <Slot\n                        key={index}\n                        char={current[index]}\n                        active={index === activeIndex}\n                        caret={index === activeIndex && current.length < length}\n                        mask={mask}\n                      />\n                    );\n                  })}\n                </div>\n                {groupIndex < lastGroup && (\n                  <span\n                    aria-hidden=\"true\"\n                    data-slot=\"input-otp-separator\"\n                    className=\"ddga-input-otp__separator\"\n                  >\n                    {separator ?? <span className=\"ddga-input-otp__separator-dash\" />}\n                  </span>\n                )}\n              </Fragment>\n            );\n          })}\n        </div>\n      </div>\n      {hasErrorMessage && (\n        <FieldMessage id={errorId} variant=\"error\">\n          {errorMessage}\n        </FieldMessage>\n      )}\n      {hasHelper && (\n        <FieldMessage id={helperId} variant=\"helper\">\n          {helperText}\n        </FieldMessage>\n      )}\n    </div>\n  );\n}\n\n// ─── 5. Exports ─── //\n\nexport { InputOTP, inputOTPVariants };\nexport type { InputOTPProps };\n"]}