@dev-dga/react 0.8.0 → 0.8.2

package/dist/chunk-EFKAKU2X.js

@@ -0,0 +1,177 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-DBB47IAX.js";
+import {
+  useSidebar
+} from "./chunk-F7NPGAKU.js";
+import {
+  Skeleton
+} from "./chunk-RZEJPDIW.js";
+import {
+  useDir
+} from "./chunk-XFVRBYPC.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Sidebar/SidebarMenu.tsx
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      className: cn("ddga-sidebar__menu-item", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva("ddga-sidebar__menu-button", {
+  variants: {
+    size: {
+      sm: "ddga-sidebar__menu-button--sm",
+      md: "ddga-sidebar__menu-button--md",
+      lg: "ddga-sidebar__menu-button--lg"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function SidebarMenuButton({
+  asChild,
+  isActive,
+  size,
+  tooltip,
+  className,
+  ...props
+}) {
+  const { state, isMobile } = useSidebar();
+  const dir = useDir();
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "data-slot": "sidebar-menu-button",
+      "data-active": isActive || void 0,
+      "data-size": size ?? "md",
+      "aria-current": isActive ? "page" : void 0,
+      className: cn(sidebarMenuButtonVariants({ size }), className),
+      ...props
+    }
+  );
+  if (!tooltip || state !== "collapsed" || isMobile) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
+  ] });
+}
+function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: asChild ? void 0 : "button",
+      "data-slot": "sidebar-menu-action",
+      "data-show-on-hover": showOnHover || void 0,
+      className: cn("ddga-sidebar__menu-action", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "sidebar-menu-badge",
+      className: cn("ddga-sidebar__menu-badge", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSkeleton({ showIcon, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      className: cn("ddga-sidebar__menu-skeleton", className),
+      ...props,
+      children: [
+        showIcon ? /* @__PURE__ */ jsx(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
+        /* @__PURE__ */ jsx(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu-sub",
+      className: cn("ddga-sidebar__menu-sub", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-sub-item",
+      className: cn("ddga-sidebar__menu-sub-item", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuSubButtonVariants = cva("ddga-sidebar__menu-sub-button", {
+  variants: {
+    size: {
+      sm: "ddga-sidebar__menu-sub-button--sm",
+      md: "ddga-sidebar__menu-sub-button--md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function SidebarMenuSubButton({
+  asChild,
+  isActive,
+  size,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? SlotPrimitive.Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-active": isActive || void 0,
+      "data-size": size ?? "md",
+      "aria-current": isActive ? "page" : void 0,
+      className: cn(sidebarMenuSubButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+
+export {
+  SidebarMenu,
+  SidebarMenuItem,
+  sidebarMenuButtonVariants,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  sidebarMenuSubButtonVariants,
+  SidebarMenuSubButton
+};
+//# sourceMappingURL=chunk-EFKAKU2X.js.map

package/dist/chunk-EFKAKU2X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Sidebar/SidebarMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useDir } from '../../hooks/useDir';\nimport { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';\nimport { Skeleton } from '../Skeleton';\nimport { useSidebar } from './SidebarContext';\n\n// ─── Menu / MenuItem ─── //\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n  return <ul data-slot=\"sidebar-menu\" className={cn('ddga-sidebar__menu', className)} {...props} />;\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      className={cn('ddga-sidebar__menu-item', className)}\n      {...props}\n    />\n  );\n}\n\n// ─── MenuButton ─── //\n\nconst sidebarMenuButtonVariants = cva('ddga-sidebar__menu-button', {\n  variants: {\n    size: {\n      sm: 'ddga-sidebar__menu-button--sm',\n      md: 'ddga-sidebar__menu-button--md',\n      lg: 'ddga-sidebar__menu-button--lg',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\ninterface SidebarMenuButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof sidebarMenuButtonVariants> {\n  asChild?: boolean;\n  isActive?: boolean;\n  /** Tooltip content shown only when the rail is collapsed (desktop). */\n  tooltip?: React.ReactNode;\n}\n\nfunction SidebarMenuButton({\n  asChild,\n  isActive,\n  size,\n  tooltip,\n  className,\n  ...props\n}: SidebarMenuButtonProps) {\n  const { state, isMobile } = useSidebar();\n  const dir = useDir();\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  const button = (\n    <Comp\n      type={asChild ? undefined : 'button'}\n      data-slot=\"sidebar-menu-button\"\n      data-active={isActive || undefined}\n      data-size={size ?? 'md'}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(sidebarMenuButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n\n  if (!tooltip || state !== 'collapsed' || isMobile) {\n    return button;\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <span data-slot=\"tooltip-trigger\" style={{ display: 'contents' }}>\n          {button}\n        </span>\n      </TooltipTrigger>\n      <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>{tooltip}</TooltipContent>\n    </Tooltip>\n  );\n}\n\n// ─── MenuAction ─── //\n\ninterface SidebarMenuActionProps extends React.ComponentProps<'button'> {\n  asChild?: boolean;\n  /** Reveal the action only on row hover/focus (CSS-driven). */\n  showOnHover?: boolean;\n}\n\nfunction SidebarMenuAction({ asChild, showOnHover, className, ...props }: SidebarMenuActionProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n  return (\n    <Comp\n      type={asChild ? undefined : 'button'}\n      data-slot=\"sidebar-menu-action\"\n      data-show-on-hover={showOnHover || undefined}\n      className={cn('ddga-sidebar__menu-action', className)}\n      {...props}\n    />\n  );\n}\n\n// ─── MenuBadge ─── //\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"sidebar-menu-badge\"\n      className={cn('ddga-sidebar__menu-badge', className)}\n      {...props}\n    />\n  );\n}\n\n// ─── MenuSkeleton ─── //\n\ninterface SidebarMenuSkeletonProps extends React.ComponentProps<'div'> {\n  showIcon?: boolean;\n}\n\nfunction SidebarMenuSkeleton({ showIcon, className, ...props }: SidebarMenuSkeletonProps) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      className={cn('ddga-sidebar__menu-skeleton', className)}\n      {...props}\n    >\n      {showIcon ? <Skeleton shape=\"circle\" width=\"1rem\" height=\"1rem\" /> : null}\n      <Skeleton shape=\"text\" className=\"ddga-sidebar__menu-skeleton-text\" />\n    </div>\n  );\n}\n\n// ─── MenuSub / MenuSubItem / MenuSubButton ─── //\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      className={cn('ddga-sidebar__menu-sub', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      className={cn('ddga-sidebar__menu-sub-item', className)}\n      {...props}\n    />\n  );\n}\n\nconst sidebarMenuSubButtonVariants = cva('ddga-sidebar__menu-sub-button', {\n  variants: {\n    size: {\n      sm: 'ddga-sidebar__menu-sub-button--sm',\n      md: 'ddga-sidebar__menu-sub-button--md',\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\ninterface SidebarMenuSubButtonProps\n  extends React.ComponentProps<'a'>, VariantProps<typeof sidebarMenuSubButtonVariants> {\n  asChild?: boolean;\n  isActive?: boolean;\n}\n\nfunction SidebarMenuSubButton({\n  asChild,\n  isActive,\n  size,\n  className,\n  ...props\n}: SidebarMenuSubButtonProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'a';\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-active={isActive || undefined}\n      data-size={size ?? 'md'}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(sidebarMenuSubButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\n// ─── Exports ─── //\n\nexport {\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  sidebarMenuButtonVariants,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  sidebarMenuSubButtonVariants,\n};\nexport type {\n  SidebarMenuButtonProps,\n  SidebarMenuActionProps,\n  SidebarMenuSkeletonProps,\n  SidebarMenuSubButtonProps,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-EJHBW4AK.js

@@ -0,0 +1,100 @@
+import {
+  Check
+} from "./chunk-CDS4SYEQ.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Steps/Steps.tsx
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var stepsVariants = cva("ddga-steps", {
+  variants: {
+    size: {
+      sm: "ddga-steps--sm",
+      md: "ddga-steps--md"
+    },
+    orientation: {
+      horizontal: "ddga-steps--horizontal",
+      vertical: "ddga-steps--vertical"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "horizontal"
+  }
+});
+var stepVariants = cva("ddga-steps__step", {
+  variants: {
+    state: {
+      completed: "ddga-steps__step--completed",
+      current: "ddga-steps__step--current",
+      upcoming: "ddga-steps__step--upcoming"
+    }
+  },
+  defaultVariants: {
+    state: "upcoming"
+  }
+});
+function Steps({ size, orientation, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "steps",
+      "data-orientation": orientation ?? "horizontal",
+      className: cn(stepsVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+function Step({ state, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-current": state === "current" ? "step" : void 0,
+      "data-slot": "step",
+      "data-state": state ?? "upcoming",
+      className: cn(stepVariants({ state }), className),
+      ...props
+    }
+  );
+}
+function StepIndicator({ step, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "step-indicator",
+      className: cn("ddga-steps__indicator", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Check, { className: "ddga-steps__indicator-check" }),
+        /* @__PURE__ */ jsx("span", { className: "ddga-steps__indicator-number", children: step })
+      ]
+    }
+  );
+}
+function StepTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "step-title", className: cn("ddga-steps__title", className), ...props });
+}
+function StepDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "step-description",
+      className: cn("ddga-steps__description", className),
+      ...props
+    }
+  );
+}
+
+export {
+  stepsVariants,
+  stepVariants,
+  Steps,
+  Step,
+  StepIndicator,
+  StepTitle,
+  StepDescription
+};
+//# sourceMappingURL=chunk-EJHBW4AK.js.map

package/dist/chunk-EJHBW4AK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Steps/Steps.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Check } from '../../internal/icons';\n\n// ─── 1. Variants (cva) ─── //\n//\n// Visual-only stepper. Each `Step` carries a `state` (completed / current /\n// upcoming) which drives the indicator color + ARIA marks. Separators are\n// CSS-drawn via pseudo-elements between siblings — no `StepSeparator`\n// component needed (and one fewer thing for consumers to get wrong).\n\nconst stepsVariants = cva('ddga-steps', {\n  variants: {\n    size: {\n      sm: 'ddga-steps--sm',\n      md: 'ddga-steps--md',\n    },\n    orientation: {\n      horizontal: 'ddga-steps--horizontal',\n      vertical: 'ddga-steps--vertical',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    orientation: 'horizontal',\n  },\n});\n\ntype StepState = 'completed' | 'current' | 'upcoming';\n\nconst stepVariants = cva('ddga-steps__step', {\n  variants: {\n    state: {\n      completed: 'ddga-steps__step--completed',\n      current: 'ddga-steps__step--current',\n      upcoming: 'ddga-steps__step--upcoming',\n    },\n  },\n  defaultVariants: {\n    state: 'upcoming',\n  },\n});\n\n// ─── 2. Types ─── //\n\ninterface StepsProps extends React.ComponentProps<'ol'>, VariantProps<typeof stepsVariants> {}\n\ninterface StepProps\n  extends Omit<React.ComponentProps<'li'>, 'aria-current'>, VariantProps<typeof stepVariants> {}\n\ninterface StepIndicatorProps extends React.ComponentProps<'span'> {\n  /**\n   * The 1-based step number to render when the step is `current` or\n   * `upcoming`. Ignored when the step is `completed` — the indicator shows\n   * a check icon instead.\n   */\n  step?: number | string;\n}\n\ntype StepTitleProps = React.ComponentProps<'span'>;\ntype StepDescriptionProps = React.ComponentProps<'span'>;\n\n// ─── 3. Components ─── //\n\nfunction Steps({ size, orientation, className, ...props }: StepsProps) {\n  // `<ol>` is the right semantic for an ordered list of steps; the implicit\n  // listitem role on children makes the count assistive-tech-readable.\n  return (\n    <ol\n      data-slot=\"steps\"\n      data-orientation={orientation ?? 'horizontal'}\n      className={cn(stepsVariants({ size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction Step({ state, className, ...props }: StepProps) {\n  // `aria-current=\"step\"` on the current step. State drives both the ARIA\n  // mark and the visual class so they can't drift apart. Step always\n  // renders an `<li>` because the parent `<ol>` is only allowed to contain\n  // `<li>` children — consumers who need clickable steps put an `<a>` (or\n  // a router primitive) inside Step's children, not as the step element\n  // itself.\n  return (\n    <li\n      aria-current={state === 'current' ? 'step' : undefined}\n      data-slot=\"step\"\n      data-state={state ?? 'upcoming'}\n      className={cn(stepVariants({ state }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction StepIndicator({ step, className, ...props }: StepIndicatorProps) {\n  // Decorative — assistive tech reads the step title/description, not the\n  // number-in-a-circle. The check icon for completed steps is purely\n  // visual; the parent's `data-state=\"completed\"` is what conveys meaning.\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"step-indicator\"\n      className={cn('ddga-steps__indicator', className)}\n      {...props}\n    >\n      <Check className=\"ddga-steps__indicator-check\" />\n      <span className=\"ddga-steps__indicator-number\">{step}</span>\n    </span>\n  );\n}\n\nfunction StepTitle({ className, ...props }: StepTitleProps) {\n  return <span data-slot=\"step-title\" className={cn('ddga-steps__title', className)} {...props} />;\n}\n\nfunction StepDescription({ className, ...props }: StepDescriptionProps) {\n  return (\n    <span\n      data-slot=\"step-description\"\n      className={cn('ddga-steps__description', className)}\n      {...props}\n    />\n  );\n}\n\n// ─── 4. Exports ─── //\n\nexport { Steps, Step, StepIndicator, StepTitle, StepDescription, stepsVariants, stepVariants };\nexport type {\n  StepsProps,\n  StepProps,\n  StepIndicatorProps,\n  StepTitleProps,\n  StepDescriptionProps,\n  StepState,\n};\n"],"mappings":";;;;;;;;AAEA,SAAS,WAA8B;AAoEnC,cAgCA,YAhCA;AAzDJ,IAAM,gBAAgB,IAAI,cAAc;AAAA,EACtC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,aAAa;AAAA,EACf;AACF,CAAC;AAID,IAAM,eAAe,IAAI,oBAAoB;AAAA,EAC3C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,EACT;AACF,CAAC;AAuBD,SAAS,MAAM,EAAE,MAAM,aAAa,WAAW,GAAG,MAAM,GAAe;AAGrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAkB,eAAe;AAAA,MACjC,WAAW,GAAG,cAAc,EAAE,MAAM,YAAY,CAAC,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,KAAK,EAAE,OAAO,WAAW,GAAG,MAAM,GAAc;AAOvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,UAAU,YAAY,SAAS;AAAA,MAC7C,aAAU;AAAA,MACV,cAAY,SAAS;AAAA,MACrB,WAAW,GAAG,aAAa,EAAE,MAAM,CAAC,GAAG,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc,EAAE,MAAM,WAAW,GAAG,MAAM,GAAuB;AAIxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAM,WAAU,+BAA8B;AAAA,QAC/C,oBAAC,UAAK,WAAU,gCAAgC,gBAAK;AAAA;AAAA;AAAA,EACvD;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AAC1D,SAAO,oBAAC,UAAK,aAAU,cAAa,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAChG;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAyB;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-ELDHIKFD.cjs

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

package/dist/chunk-ELDHIKFD.cjs.map

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

package/dist/chunk-EM55NWUF.js

@@ -0,0 +1,293 @@
+import {
+  CalendarNavHeader,
+  CalendarSystemToggle,
+  calendarDateToDate,
+  dateToCalendarDate,
+  renderDayContent,
+  useCalendarChrome
+} from "./chunk-TT2DEREM.js";
+import {
+  CalendarIcon
+} from "./chunk-CDS4SYEQ.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/DatePicker/DatePicker.tsx
+import { useCallback, useContext, useMemo, useState } from "react";
+import {
+  Button as AriaButton,
+  Calendar as AriaCalendar,
+  CalendarCell as AriaCalendarCell,
+  CalendarGrid as AriaCalendarGrid,
+  CalendarGridBody as AriaCalendarGridBody,
+  CalendarGridHeader as AriaCalendarGridHeader,
+  CalendarHeaderCell as AriaCalendarHeaderCell,
+  CalendarStateContext as AriaCalendarStateContext,
+  DateInput as AriaDateInput,
+  DatePicker as AriaDatePicker,
+  DateSegment as AriaDateSegment,
+  Dialog as AriaDialog,
+  FieldError as AriaFieldError,
+  Group as AriaGroup,
+  I18nProvider,
+  Label as AriaLabel,
+  Popover as AriaPopover,
+  Text as AriaText
+} from "react-aria-components";
+import { CalendarDate } from "@internationalized/date";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var datePickerTriggerVariants = cva("ddga-date-picker-trigger", {
+  variants: {
+    size: {
+      sm: "ddga-date-picker-trigger--sm",
+      md: "ddga-date-picker-trigger--md"
+    },
+    error: {
+      true: "ddga-date-picker-trigger--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var datePickerVariants = datePickerTriggerVariants;
+function CalendarDayCell({ date, showSecondary, calendarSystem }) {
+  const state = useContext(AriaCalendarStateContext);
+  const start = state?.visibleRange.start;
+  const isOutside = !!start && (date.year !== start.year || date.month !== start.month);
+  const isOutOfBounds = state ? state.isInvalid(date) : false;
+  if (state && isOutside && !isOutOfBounds) {
+    const selected = state.value;
+    const isSelected = !!selected && selected.year === date.year && selected.month === date.month && selected.day === date.day;
+    const handleSelect = () => {
+      state.setFocusedDate(date);
+      state.selectDate(date);
+    };
+    return /* @__PURE__ */ jsx("td", { role: "gridcell", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "ddga-calendar__cell",
+        "data-outside-month": "",
+        "data-selected": isSelected ? "" : void 0,
+        "data-slot": "date-picker-day-cell",
+        onClick: handleSelect,
+        children: renderDayContent(date.day, { showSecondary, date, calendarSystem })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(AriaCalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, { showSecondary, date, calendarSystem }) });
+}
+function DatePicker({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  minValue,
+  maxValue,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  required,
+  disabled,
+  size,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  calendar: controlledCalendar,
+  defaultCalendar = "gregorian",
+  onCalendarChange,
+  showCalendarToggle = true,
+  calendarLabels,
+  showSecondaryCalendar = false
+}) {
+  const isValueControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    () => dateToCalendarDate(defaultValue)
+  );
+  const value = isValueControlled ? dateToCalendarDate(controlledValue) : internalValue;
+  const handleAriaChange = useCallback(
+    (next) => {
+      const nextCD = next ? new CalendarDate(next.year, next.month, next.day) : null;
+      if (!isValueControlled) setInternalValue(nextCD);
+      onChange?.(calendarDateToDate(nextCD));
+    },
+    [isValueControlled, onChange]
+  );
+  const isCalendarControlled = controlledCalendar !== void 0;
+  const [internalCalendar, setInternalCalendar] = useState(defaultCalendar);
+  const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;
+  const setCalendar = useCallback(
+    (next) => {
+      if (!isCalendarControlled) setInternalCalendar(next);
+      onCalendarChange?.(next);
+    },
+    [isCalendarControlled, onCalendarChange]
+  );
+  const {
+    dgaLocale,
+    locale: ariaLocale,
+    portalContainer,
+    PrevChevron,
+    NextChevron,
+    resolvedLabels,
+    navLabels,
+    a11yLabels
+  } = useCalendarChrome(calendarSystem, calendarLabels);
+  const ariaMinValue = useMemo(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
+  const ariaMaxValue = useMemo(() => dateToCalendarDate(maxValue) ?? void 0, [maxValue]);
+  const dialogAriaLabel = ariaLabel ?? (typeof label === "string" ? label : ariaLabelledBy ? void 0 : dgaLocale.startsWith("ar") ? "\u0627\u0644\u062A\u0627\u0631\u064A\u062E" : "Date");
+  const showToggle = showCalendarToggle && !isCalendarControlled;
+  const hasError = !!error;
+  const hasErrorMessage = hasError && errorMessage != null && errorMessage !== "";
+  const hasHelper = !hasErrorMessage && helperText != null && helperText !== "";
+  return /* @__PURE__ */ jsx(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ jsxs(
+    AriaDatePicker,
+    {
+      value,
+      onChange: handleAriaChange,
+      minValue: ariaMinValue,
+      maxValue: ariaMaxValue,
+      isRequired: required,
+      isDisabled: disabled,
+      isInvalid: hasError,
+      shouldCloseOnSelect: true,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      className: "ddga-field",
+      "data-slot": "date-picker-field",
+      children: [
+        label && /* @__PURE__ */ jsxs(AriaLabel, { className: "ddga-date-picker__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          AriaGroup,
+          {
+            "data-slot": "date-picker-trigger",
+            className: cn(datePickerTriggerVariants({ size, error: hasError }), className),
+            children: [
+              /* @__PURE__ */ jsx(AriaDateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ jsx(
+                AriaDateSegment,
+                {
+                  segment,
+                  className: "ddga-date-picker__segment",
+                  "data-slot": "date-picker-segment"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                AriaButton,
+                {
+                  className: "ddga-date-picker__icon-button",
+                  "aria-label": a11yLabels.openCalendar,
+                  "data-slot": "date-picker-trigger-button",
+                  children: /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
+                }
+              )
+            ]
+          }
+        ),
+        hasHelper && /* @__PURE__ */ jsx(
+          AriaText,
+          {
+            slot: "description",
+            className: "ddga-field__message ddga-field__message--helper",
+            "data-slot": "field-helper",
+            children: helperText
+          }
+        ),
+        hasErrorMessage && /* @__PURE__ */ jsx(
+          AriaFieldError,
+          {
+            className: "ddga-field__message ddga-field__message--error",
+            "data-slot": "field-error",
+            children: errorMessage
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AriaPopover,
+          {
+            UNSTABLE_portalContainer: portalContainer,
+            className: "ddga-calendar-popover",
+            "data-slot": "date-picker-popover",
+            offset: 6,
+            containerPadding: 12,
+            children: /* @__PURE__ */ jsxs(
+              AriaDialog,
+              {
+                className: "ddga-calendar-dialog",
+                "data-slot": "date-picker-dialog",
+                "aria-label": dialogAriaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: [
+                  showToggle && /* @__PURE__ */ jsx(
+                    CalendarSystemToggle,
+                    {
+                      value: calendarSystem,
+                      onChange: setCalendar,
+                      labels: resolvedLabels,
+                      groupLabel: a11yLabels.calendarSystem
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(AriaCalendar, { className: "ddga-calendar", "data-slot": "date-picker-calendar", children: [
+                    /* @__PURE__ */ jsxs("header", { className: "ddga-calendar__header", children: [
+                      /* @__PURE__ */ jsx(
+                        AriaButton,
+                        {
+                          slot: "previous",
+                          className: "ddga-calendar__nav",
+                          "data-slot": "date-picker-calendar-prev",
+                          children: /* @__PURE__ */ jsx(PrevChevron, { "aria-hidden": "true" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        CalendarNavHeader,
+                        {
+                          locale: ariaLocale,
+                          monthLabel: navLabels.month,
+                          yearLabel: navLabels.year
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        AriaButton,
+                        {
+                          slot: "next",
+                          className: "ddga-calendar__nav",
+                          "data-slot": "date-picker-calendar-next",
+                          children: /* @__PURE__ */ jsx(NextChevron, { "aria-hidden": "true" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(AriaCalendarGrid, { className: "ddga-calendar__grid", children: [
+                      /* @__PURE__ */ jsx(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(AriaCalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
+                      /* @__PURE__ */ jsx(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(
+                        CalendarDayCell,
+                        {
+                          date,
+                          showSecondary: showSecondaryCalendar,
+                          calendarSystem
+                        }
+                      ) })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export {
+  datePickerTriggerVariants,
+  datePickerVariants,
+  DatePicker
+};
+//# sourceMappingURL=chunk-EM55NWUF.js.map

package/dist/chunk-EM55NWUF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  CalendarCell as AriaCalendarCell,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarGridBody as AriaCalendarGridBody,\n  CalendarGridHeader as AriaCalendarGridHeader,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  CalendarStateContext as AriaCalendarStateContext,\n  DateInput as AriaDateInput,\n  DatePicker as AriaDatePicker,\n  DateSegment as AriaDateSegment,\n  Dialog as AriaDialog,\n  FieldError as AriaFieldError,\n  Group as AriaGroup,\n  I18nProvider,\n  Label as AriaLabel,\n  Popover as AriaPopover,\n  Text as AriaText,\n} from 'react-aria-components';\nimport { CalendarDate, type DateValue } from '@internationalized/date';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { CalendarIcon } from '../../internal/icons';\nimport {\n  CalendarNavHeader,\n  CalendarSystemToggle,\n  calendarDateToDate,\n  dateToCalendarDate,\n  renderDayContent,\n  useCalendarChrome,\n  type CalendarLabels,\n  type CalendarSystem,\n} from '../../internal/calendar';\n\n// ─── 1. Variants ─── //\n\n// Applied to the Group (the trigger row). Heights match Input/Select sm/md so\n// a DatePicker lines up with other fields in a form row.\nconst datePickerTriggerVariants = cva('ddga-date-picker-trigger', {\n  variants: {\n    size: {\n      sm: 'ddga-date-picker-trigger--sm',\n      md: 'ddga-date-picker-trigger--md',\n    },\n    error: {\n      true: 'ddga-date-picker-trigger--error',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// Passthrough alias so the barrel `*Variants` convention holds across\n// components. Same value, different name.\nconst datePickerVariants = datePickerTriggerVariants;\n\n// ─── 2. Types ─── //\n\ninterface DatePickerProps extends VariantProps<typeof datePickerTriggerVariants> {\n  /** Currently selected date (controlled). Local Y/M/D. */\n  value?: Date | null;\n  /** Initial value when uncontrolled. */\n  defaultValue?: Date | null;\n  /** Fires whenever the user picks a day. `null` when cleared. */\n  onChange?: (value: Date | null) => void;\n  /** Earliest pickable date (inclusive). */\n  minValue?: Date;\n  /** Latest pickable date (inclusive). */\n  maxValue?: Date;\n  /** Visible label above the trigger. */\n  label?: ReactNode;\n  /** Hint shown below the trigger. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the trigger when `error` is true. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid — sets `aria-invalid` and error styling. */\n  error?: boolean;\n  /** Marks the field required — adds the asterisk + `aria-required`. */\n  required?: boolean;\n  /** Disables the trigger entirely. */\n  disabled?: boolean;\n  /** Caller-supplied id for the field. */\n  id?: string;\n  /** Forwarded to the Group (the trigger row), matching Input/Select. */\n  className?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /**\n   * Calendar system (controlled). Omit to let the user toggle freely with\n   * the in-popover switch.\n   */\n  calendar?: CalendarSystem;\n  /** Initial calendar system when uncontrolled. Defaults to `'gregorian'`. */\n  defaultCalendar?: CalendarSystem;\n  /** Fires whenever the calendar system toggles. */\n  onCalendarChange?: (calendar: CalendarSystem) => void;\n  /**\n   * Show the Gregorian↔Hijri toggle inside the popover. Defaults to `true`,\n   * but is forced off when `calendar` is controlled — a toggle that ignores\n   * its click is a worse footgun than no toggle.\n   */\n  showCalendarToggle?: boolean;\n  /** Override the toggle labels. Defaults are locale-aware (English / Arabic). */\n  calendarLabels?: CalendarLabels;\n  /**\n   * When `true`, each day cell also shows the *other* calendar's day number\n   * as small secondary text (e.g., Hijri active → Gregorian day shown small\n   * underneath). Helps users cross-reference dates between calendar systems\n   * without round-tripping the toggle. Defaults to `false`.\n   */\n  showSecondaryCalendar?: boolean;\n}\n\n// ─── 3. Outside-month cell wrapper (single-date only) ─── //\n\n// react-aria marks outside-month cells as disabled by design — the standard\n// Calendar UX uses arrows / dropdowns / keyboard for cross-month navigation.\n// But many DGA flows want one-click selection of an adjacent month's day, so\n// we render a parallel <button> for those cells that bypasses the disabled\n// state, drives `setFocusedDate` + `selectDate` manually, and preserves the\n// rest of react-aria's a11y wiring for inside-month cells.\n//\n// This lives in DatePicker (not the shared core) because its `isSelected` check\n// reads `state.value` as a single CalendarDate — that doesn't generalize to a\n// range, where `state.value` is `{ start, end }`. DateRangePicker uses\n// react-aria's default outside-month behavior instead.\nfunction CalendarDayCell({ date, showSecondary, calendarSystem }: CalendarDayCellProps) {\n  const state = useContext(AriaCalendarStateContext);\n\n  // Visible range start tells us the \"current\" month being shown. Anything\n  // with a different (year, month) pair is outside-month.\n  const start = state?.visibleRange.start;\n  const isOutside = !!start && (date.year !== start.year || date.month !== start.month);\n\n  // For outside-month cells, also confirm they're inside min/max bounds —\n  // otherwise they should genuinely render disabled. `state.isInvalid` is\n  // bounds-only (min/max); `isCellDisabled` also marks outside-month as\n  // disabled internally, which would block our wrapper from activating.\n  const isOutOfBounds = state ? state.isInvalid(date) : false;\n\n  if (state && isOutside && !isOutOfBounds) {\n    const selected = state.value;\n    const isSelected =\n      !!selected &&\n      selected.year === date.year &&\n      selected.month === date.month &&\n      selected.day === date.day;\n\n    const handleSelect = () => {\n      // Update focused-month first so the visible page jumps, then commit the\n      // selection. React batches these into one re-render.\n      state.setFocusedDate(date);\n      state.selectDate(date);\n    };\n\n    return (\n      <td role=\"gridcell\">\n        <button\n          type=\"button\"\n          // Outside the keyboard nav chain (react-aria's inside-month cells own\n          // that). Mouse users get the shortcut; keyboard users navigate via\n          // arrows or the month/year dropdowns.\n          tabIndex={-1}\n          className=\"ddga-calendar__cell\"\n          data-outside-month=\"\"\n          data-selected={isSelected ? '' : undefined}\n          data-slot=\"date-picker-day-cell\"\n          onClick={handleSelect}\n        >\n          {renderDayContent(date.day, { showSecondary, date, calendarSystem })}\n        </button>\n      </td>\n    );\n  }\n\n  return (\n    <AriaCalendarCell date={date} className=\"ddga-calendar__cell\">\n      {({ formattedDate }) =>\n        renderDayContent(formattedDate, { showSecondary, date, calendarSystem })\n      }\n    </AriaCalendarCell>\n  );\n}\n\ninterface CalendarDayCellProps {\n  date: CalendarDate;\n  showSecondary: boolean;\n  calendarSystem: CalendarSystem;\n}\n\n// ─── 4. Component ─── //\n\nfunction DatePicker({\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  minValue,\n  maxValue,\n  label,\n  helperText,\n  errorMessage,\n  error,\n  required,\n  disabled,\n  size,\n  id,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  calendar: controlledCalendar,\n  defaultCalendar = 'gregorian',\n  onCalendarChange,\n  showCalendarToggle = true,\n  calendarLabels,\n  showSecondaryCalendar = false,\n}: DatePickerProps) {\n  // ─ value: controlled or uncontrolled, always Gregorian internally ─\n  const isValueControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState<CalendarDate | null>(() =>\n    dateToCalendarDate(defaultValue),\n  );\n  const value = isValueControlled ? dateToCalendarDate(controlledValue) : internalValue;\n\n  const handleAriaChange = useCallback(\n    (next: DateValue | null) => {\n      const nextCD = next ? new CalendarDate(next.year, next.month, next.day) : null;\n      if (!isValueControlled) setInternalValue(nextCD);\n      onChange?.(calendarDateToDate(nextCD));\n    },\n    [isValueControlled, onChange],\n  );\n\n  // ─ calendar system: controlled or uncontrolled ─\n  const isCalendarControlled = controlledCalendar !== undefined;\n  const [internalCalendar, setInternalCalendar] = useState<CalendarSystem>(defaultCalendar);\n  const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;\n\n  const setCalendar = useCallback(\n    (next: CalendarSystem) => {\n      if (!isCalendarControlled) setInternalCalendar(next);\n      onCalendarChange?.(next);\n    },\n    [isCalendarControlled, onCalendarChange],\n  );\n\n  // ─ Shared chrome (locale, portal, chevrons, labels) ─\n  const {\n    dgaLocale,\n    locale: ariaLocale,\n    portalContainer,\n    PrevChevron,\n    NextChevron,\n    resolvedLabels,\n    navLabels,\n    a11yLabels,\n  } = useCalendarChrome(calendarSystem, calendarLabels);\n\n  // ─ Bounds ─\n  const ariaMinValue = useMemo(() => dateToCalendarDate(minValue) ?? undefined, [minValue]);\n  const ariaMaxValue = useMemo(() => dateToCalendarDate(maxValue) ?? undefined, [maxValue]);\n\n  // ─ Popover aria-label fallback ─\n  // Dialog requires an accessible name; derive from the field label when\n  // possible (string-only), else fall back to a generic so a11y stays valid\n  // even when consumers compose a rich label node.\n  const dialogAriaLabel =\n    ariaLabel ??\n    (typeof label === 'string'\n      ? label\n      : ariaLabelledBy\n        ? undefined\n        : dgaLocale.startsWith('ar')\n          ? 'التاريخ'\n          : 'Date');\n\n  // ─ Toggle visibility ─\n  const showToggle = showCalendarToggle && !isCalendarControlled;\n\n  // ─ Derived field-message visibility (mirrors useFieldA11y rules) ─\n  const hasError = !!error;\n  const hasErrorMessage = hasError && errorMessage != null && errorMessage !== '';\n  const hasHelper = !hasErrorMessage && helperText != null && helperText !== '';\n\n  return (\n    <I18nProvider locale={ariaLocale}>\n      <AriaDatePicker\n        value={value}\n        onChange={handleAriaChange}\n        minValue={ariaMinValue}\n        maxValue={ariaMaxValue}\n        isRequired={required}\n        isDisabled={disabled}\n        isInvalid={hasError}\n        shouldCloseOnSelect\n        id={id}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className=\"ddga-field\"\n        data-slot=\"date-picker-field\"\n      >\n        {label && (\n          <AriaLabel className=\"ddga-date-picker__label\">\n            {label}\n            {required && (\n              <span aria-hidden=\"true\" className=\"ddga-date-picker__required\">\n                *\n              </span>\n            )}\n          </AriaLabel>\n        )}\n        <AriaGroup\n          data-slot=\"date-picker-trigger\"\n          className={cn(datePickerTriggerVariants({ size, error: hasError }), className)}\n        >\n          <AriaDateInput className=\"ddga-date-picker__input\" data-slot=\"date-picker-input\">\n            {(segment) => (\n              <AriaDateSegment\n                segment={segment}\n                className=\"ddga-date-picker__segment\"\n                data-slot=\"date-picker-segment\"\n              />\n            )}\n          </AriaDateInput>\n          <AriaButton\n            className=\"ddga-date-picker__icon-button\"\n            aria-label={a11yLabels.openCalendar}\n            data-slot=\"date-picker-trigger-button\"\n          >\n            <CalendarIcon aria-hidden=\"true\" className=\"ddga-date-picker__icon\" />\n          </AriaButton>\n        </AriaGroup>\n        {hasHelper && (\n          <AriaText\n            slot=\"description\"\n            className=\"ddga-field__message ddga-field__message--helper\"\n            data-slot=\"field-helper\"\n          >\n            {helperText}\n          </AriaText>\n        )}\n        {hasErrorMessage && (\n          <AriaFieldError\n            className=\"ddga-field__message ddga-field__message--error\"\n            data-slot=\"field-error\"\n          >\n            {errorMessage}\n          </AriaFieldError>\n        )}\n        <AriaPopover\n          UNSTABLE_portalContainer={portalContainer}\n          className=\"ddga-calendar-popover\"\n          data-slot=\"date-picker-popover\"\n          offset={6}\n          // Keep some breathing room from the viewport edge so the popover\n          // doesn't butt up against the bottom of the iframe in short\n          // containers (the Storybook canvas case). Combined with the inner\n          // Dialog's overflow:auto, the calendar will scroll if it can't fit.\n          containerPadding={12}\n        >\n          <AriaDialog\n            className=\"ddga-calendar-dialog\"\n            data-slot=\"date-picker-dialog\"\n            aria-label={dialogAriaLabel}\n            aria-labelledby={ariaLabelledBy}\n          >\n            {showToggle && (\n              <CalendarSystemToggle\n                value={calendarSystem}\n                onChange={setCalendar}\n                labels={resolvedLabels}\n                groupLabel={a11yLabels.calendarSystem}\n              />\n            )}\n            <AriaCalendar className=\"ddga-calendar\" data-slot=\"date-picker-calendar\">\n              <header className=\"ddga-calendar__header\">\n                <AriaButton\n                  slot=\"previous\"\n                  className=\"ddga-calendar__nav\"\n                  data-slot=\"date-picker-calendar-prev\"\n                >\n                  <PrevChevron aria-hidden=\"true\" />\n                </AriaButton>\n                <CalendarNavHeader\n                  locale={ariaLocale}\n                  monthLabel={navLabels.month}\n                  yearLabel={navLabels.year}\n                />\n                <AriaButton\n                  slot=\"next\"\n                  className=\"ddga-calendar__nav\"\n                  data-slot=\"date-picker-calendar-next\"\n                >\n                  <NextChevron aria-hidden=\"true\" />\n                </AriaButton>\n              </header>\n              <AriaCalendarGrid className=\"ddga-calendar__grid\">\n                <AriaCalendarGridHeader>\n                  {(day) => (\n                    <AriaCalendarHeaderCell className=\"ddga-calendar__weekday\">\n                      {day}\n                    </AriaCalendarHeaderCell>\n                  )}\n                </AriaCalendarGridHeader>\n                <AriaCalendarGridBody>\n                  {(date) => (\n                    <CalendarDayCell\n                      date={date}\n                      showSecondary={showSecondaryCalendar}\n                      calendarSystem={calendarSystem}\n                    />\n                  )}\n                </AriaCalendarGridBody>\n              </AriaCalendarGrid>\n            </AriaCalendar>\n          </AriaDialog>\n        </AriaPopover>\n      </AriaDatePicker>\n    </I18nProvider>\n  );\n}\n\n// ─── 5. Exports ─── //\n\nexport { DatePicker, datePickerTriggerVariants, datePickerVariants };\nexport type { DatePickerProps, CalendarSystem, CalendarLabels };\n"],"mappings":"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","names":[]}