@dev-dga/react 0.10.1 → 0.12.0

package/dist/chunk-7F24FFIV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7F24FFIV.cjs","../src/components/CodeSnippet/CodeSnippet.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7F24FFIV.cjs","sourcesContent":[null,"'use client';\n\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs/Tabs';\nimport { Copy, Check, ChevronDown } from '../../internal/icons';\n\ninterface CodeSnippetLanguage {\n  /** Stable id for the tab + active state. */\n  value: string;\n  /** Tab label (shown only when more than one language). */\n  label: string;\n  /** The code for this language — drives the gutter, copy, and default rendering. */\n  code: string;\n}\n\ninterface CodeSnippetProps extends Omit<React.ComponentProps<'div'>, 'children' | 'onCopy'> {\n  /** One entry per language. A single entry hides the tab bar (SDGA single-tab). */\n  languages: CodeSnippetLanguage[];\n  /** Controlled active language. */\n  value?: string;\n  /** Uncontrolled initial active language (defaults to the first). */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Render the line-number gutter. @default true */\n  lineNumbers?: boolean;\n  /** Collapse to this many lines with a Show More toggle when exceeded. */\n  maxLines?: number;\n  /** Escape hatch: render highlighted code yourself; the active `code` still drives copy + line count. */\n  renderCode?: (ctx: { code: string; language: string }) => ReactNode;\n  onCopy?: (text: string) => void;\n  /** Accessible name for the copy button. @default 'Copy code' */\n  copyLabel?: string;\n  /** Live-region text announced after a successful copy. @default 'Copied' */\n  copiedLabel?: string;\n}\n\ninterface CodeSnippetInlineProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onCopy' | 'prefix' | 'children'\n> {\n  /** The command text — copied verbatim. */\n  children: string;\n  /** Leading label (e.g. `npm`) — rendered in gold. */\n  prefix?: ReactNode;\n  onCopy?: (text: string) => void;\n  /** Accessible name for the copy button. @default 'Copy code' */\n  copyLabel?: string;\n  /** Live-region text announced after a successful copy. @default 'Copied' */\n  copiedLabel?: string;\n}\n\nconst COMMENT_SYNTAX: Record<string, { line?: string; block?: [string, string] }> = {\n  java: { line: '//', block: ['/*', '*/'] },\n  c: { line: '//', block: ['/*', '*/'] },\n  cpp: { line: '//', block: ['/*', '*/'] },\n  'c++': { line: '//', block: ['/*', '*/'] },\n  php: { line: '//', block: ['/*', '*/'] },\n  js: { line: '//', block: ['/*', '*/'] },\n  javascript: { line: '//', block: ['/*', '*/'] },\n  ts: { line: '//', block: ['/*', '*/'] },\n  typescript: { line: '//', block: ['/*', '*/'] },\n  python: { line: '#' },\n  py: { line: '#' },\n  ruby: { line: '#' },\n  sh: { line: '#' },\n  bash: { line: '#' },\n  shell: { line: '#' },\n  html: { block: ['<!--', '-->'] },\n  xml: { block: ['<!--', '-->'] },\n};\n\nfunction renderGreyedLines(code: string, language: string): ReactNode {\n  const syntax = COMMENT_SYNTAX[language.toLowerCase()] ?? {};\n  const lines = code.split('\\n');\n  let inBlock = false;\n  return lines.map((line, i) => {\n    const trimmed = line.trimStart();\n    let isComment = false;\n    if (syntax.block) {\n      const [open, close] = syntax.block;\n      if (inBlock) {\n        isComment = true;\n        if (line.includes(close)) inBlock = false;\n      } else if (trimmed.startsWith(open)) {\n        isComment = true;\n        if (line.indexOf(close, line.indexOf(open) + open.length) === -1) inBlock = true;\n      }\n    }\n    if (!isComment && syntax.line && trimmed.startsWith(syntax.line)) isComment = true;\n    return (\n      <span\n        key={i}\n        className={cn('ddga-code-snippet__line', isComment && 'ddga-code-snippet__line--comment')}\n      >\n        {line}\n      </span>\n    );\n  });\n}\n\nfunction CopyButton({\n  text,\n  size,\n  onCopy,\n  copyLabel = 'Copy code',\n  copiedLabel = 'Copied',\n}: {\n  text: string;\n  size: 'sm' | 'md';\n  onCopy?: (text: string) => void;\n  copyLabel?: string;\n  copiedLabel?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  async function handleCopy() {\n    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) return;\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch {\n      return;\n    }\n    onCopy?.(text);\n    setCopied(true);\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), 1500);\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={copyLabel}\n        data-slot=\"code-snippet-copy\"\n        className={cn('ddga-code-snippet__copy-button', `ddga-code-snippet__copy-button--${size}`)}\n      >\n        {copied ? <Check aria-hidden /> : <Copy aria-hidden />}\n      </button>\n      {/* Sibling, not a child — a live region inside the button leaks into its name. */}\n      <span className=\"ddga-sr-only\" aria-live=\"polite\">\n        {copied ? copiedLabel : ''}\n      </span>\n    </>\n  );\n}\n\ninterface PanelProps {\n  language: CodeSnippetLanguage;\n  lineNumbers: boolean;\n  maxLines?: number;\n  renderCode?: CodeSnippetProps['renderCode'];\n  onCopy?: (text: string) => void;\n  copyLabel?: string;\n  copiedLabel?: string;\n  expanded: boolean;\n  onToggleExpanded: () => void;\n}\n\nfunction CodeSnippetPanel({\n  language,\n  lineNumbers,\n  maxLines,\n  renderCode,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  expanded,\n  onToggleExpanded,\n}: PanelProps) {\n  const lines = language.code.split('\\n');\n  const collapsible = maxLines != null && lines.length > maxLines;\n  const collapsed = collapsible && !expanded;\n\n  return (\n    <div className=\"ddga-code-snippet__panel\" data-slot=\"code-snippet-panel\">\n      <div\n        className={cn(\n          'ddga-code-snippet__viewport',\n          collapsed && 'ddga-code-snippet__viewport--collapsed',\n        )}\n        style={\n          collapsed\n            ? ({ '--ddga-code-snippet-max-lines': maxLines } as React.CSSProperties)\n            : undefined\n        }\n      >\n        {lineNumbers && (\n          <div className=\"ddga-code-snippet__gutter\" aria-hidden>\n            {lines.map((_, i) => (\n              <span key={i} className=\"ddga-code-snippet__line-number\">\n                {i + 1}\n              </span>\n            ))}\n          </div>\n        )}\n        <div className=\"ddga-code-snippet__scroll\">\n          <pre className=\"ddga-code-snippet__code\">\n            <code>\n              {renderCode\n                ? renderCode({ code: language.code, language: language.value })\n                : renderGreyedLines(language.code, language.value)}\n            </code>\n          </pre>\n        </div>\n      </div>\n      <CopyButton\n        text={language.code}\n        size=\"md\"\n        onCopy={onCopy}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          className=\"ddga-code-snippet__show-more\"\n          aria-expanded={expanded}\n          onClick={onToggleExpanded}\n        >\n          {expanded ? 'Show Less' : 'Show More'}\n          <ChevronDown\n            aria-hidden\n            className={cn(\n              'ddga-code-snippet__show-more-icon',\n              expanded && 'ddga-code-snippet__show-more-icon--up',\n            )}\n          />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction CodeSnippet({\n  languages,\n  value,\n  defaultValue,\n  onValueChange,\n  lineNumbers = true,\n  maxLines,\n  renderCode,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  className,\n  ...props\n}: CodeSnippetProps) {\n  // expand state lives here (keyed by language) so it survives Radix unmounting inactive tab panels.\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const showTabs = languages.length > 1;\n  const panelFor = (l: CodeSnippetLanguage) => ({\n    language: l,\n    lineNumbers,\n    maxLines,\n    renderCode,\n    onCopy,\n    copyLabel,\n    copiedLabel,\n    expanded: !!expanded[l.value],\n    onToggleExpanded: () => setExpanded((m) => ({ ...m, [l.value]: !m[l.value] })),\n  });\n\n  return (\n    // Code is always LTR — force it at the root so the whole component ignores page direction.\n    <div\n      data-slot=\"code-snippet\"\n      className={cn('ddga-code-snippet', className)}\n      {...props}\n      dir=\"ltr\"\n    >\n      {showTabs ? (\n        <Tabs\n          dir=\"ltr\"\n          className=\"ddga-code-snippet__tabs\"\n          value={value}\n          defaultValue={defaultValue ?? languages[0].value}\n          onValueChange={onValueChange}\n        >\n          <TabsList className=\"ddga-code-snippet__tab-list\">\n            {languages.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {languages.map((l) => (\n            <TabsContent key={l.value} value={l.value} className=\"ddga-code-snippet__tab-content\">\n              <CodeSnippetPanel {...panelFor(l)} />\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <CodeSnippetPanel {...panelFor(languages[0])} />\n      )}\n    </div>\n  );\n}\n\nfunction CodeSnippetInline({\n  prefix,\n  children,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  className,\n  ...props\n}: CodeSnippetInlineProps) {\n  return (\n    <div\n      data-slot=\"code-snippet-inline\"\n      className={cn('ddga-code-snippet-inline', className)}\n      {...props}\n      dir=\"ltr\"\n    >\n      <span className=\"ddga-code-snippet-inline__text\">\n        {prefix != null && (\n          <span className=\"ddga-code-snippet-inline__prefix\" data-slot=\"code-snippet-prefix\">\n            {prefix}\n          </span>\n        )}\n        <span className=\"ddga-code-snippet-inline__command\" data-slot=\"code-snippet-command\">\n          {children}\n        </span>\n      </span>\n      <CopyButton\n        text={children}\n        size=\"sm\"\n        onCopy={onCopy}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n      />\n    </div>\n  );\n}\n\nexport { CodeSnippet, CodeSnippetInline };\nexport type { CodeSnippetProps, CodeSnippetInlineProps, CodeSnippetLanguage };\n"]}

package/dist/{chunk-6BZMLKCU.cjs → chunk-7GAELGEB.cjs}

@@ -1,13 +1,15 @@
 "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 _chunkO74TNSJDcjs = require('./chunk-O74TNSJD.cjs');
+var _chunkEQINOHB6cjs = require('./chunk-EQINOHB6.cjs');
 
 
-var _chunkUK2SFZIQcjs = require('./chunk-UK2SFZIQ.cjs');
+var _chunk5NENDJOMcjs = require('./chunk-5NENDJOM.cjs');
 
 
 
-var _chunkIKWD2OENcjs = require('./chunk-IKWD2OEN.cjs');
+
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
 
 
 var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
@@ -26,9 +28,15 @@ function SearchBox({
   onChange,
   onKeyDown,
   onSearch,
+  voiceSearch = true,
+  onVoiceSearch,
   onClear,
   clearable = true,
   clearLabel = "Clear search",
+  voiceLabel = "Search by voice",
+  helperIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.HelpCircleGlyph, { width: 16, height: 16, "aria-hidden": "true" }),
+  disabled,
+  readOnly,
   className,
   ref,
   ...rest
@@ -47,11 +55,13 @@ function SearchBox({
     defaultValue != null ? String(defaultValue) : ""
   );
   const currentValue = isControlled ? String(_nullishCoalesce(value, () => ( ""))) : internal;
+  const isLocked = !!disabled || !!readOnly;
   const handleChange = (event) => {
     if (!isControlled) setInternal(event.target.value);
     _optionalChain([onChange, 'optionalCall', _6 => _6(event)]);
   };
   const clear = () => {
+    if (isLocked) return;
     const el = inputRef.current;
     if (!el) return;
     setNativeInputValue(el, "");
@@ -63,15 +73,40 @@ function SearchBox({
     if (event.defaultPrevented) return;
     if (event.key === "Enter") {
       _optionalChain([onSearch, 'optionalCall', _9 => _9(currentValue)]);
-    } else if (event.key === "Escape" && currentValue.length > 0) {
+    } else if (event.key === "Escape" && currentValue.length > 0 && !isLocked) {
       event.preventDefault();
       event.stopPropagation();
       clear();
     }
   };
-  const showClear = clearable && currentValue.length > 0;
+  const showClear = clearable && currentValue.length > 0 && !isLocked;
+  const showVoice = voiceSearch && !showClear;
+  const trailing = showClear ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk5NENDJOMcjs.Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": clearLabel,
+      "data-slot": "search-box-clear",
+      onClick: clear,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Close, { "aria-hidden": "true" })
+    }
+  ) : showVoice ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk5NENDJOMcjs.Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": voiceLabel,
+      "data-slot": "search-box-voice",
+      disabled: isLocked,
+      onClick: () => _optionalChain([onVoiceSearch, 'optionalCall', _10 => _10(currentValue)]),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Mic, { "aria-hidden": "true" })
+    }
+  ) : void 0;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkO74TNSJDcjs.Input,
+    _chunkEQINOHB6cjs.TextInput,
     {
       ...rest,
       ref: setRefs,
@@ -79,20 +114,12 @@ function SearchBox({
       value: currentValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
+      disabled,
+      readOnly,
+      helperIcon,
       className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-search-box", className),
-      startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.Search, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
-      endAdornment: showClear ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkUK2SFZIQcjs.Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon-sm",
-          "aria-label": clearLabel,
-          "data-slot": "search-box-clear",
-          onClick: clear,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.Close, { "aria-hidden": "true" })
-        }
-      ) : void 0
+      startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.SearchGlyph, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
+      endAdornment: trailing
     }
   );
 }
@@ -100,4 +127,4 @@ function SearchBox({
 
 
 exports.SearchBox = SearchBox;
-//# sourceMappingURL=chunk-6BZMLKCU.cjs.map
+//# sourceMappingURL=chunk-7GAELGEB.cjs.map

package/dist/chunk-7GAELGEB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7GAELGEB.cjs","../src/components/SearchBox/SearchBox.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-7GAELGEB.cjs","sourcesContent":[null,"'use client';\n\nimport { useCallback, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextInput, type TextInputProps } from '../TextInput';\nimport { Button } from '../Button';\nimport { SearchGlyph, Close, Mic, HelpCircleGlyph } from '../../internal/icons';\n\n// SearchBox composes TextInput — it reuses TextInput's field a11y (label /\n// helper / error), state + fill styles and adornment slots — and adds the SDGA\n// Search Box chrome: a leading magnifier, the voice-search mic (SDGA's trailing\n// icon), Escape-to-clear, `onSearch`, and an off-spec clear (×). It is a form\n// control, so (like TextInput) it does NOT take `asChild`.\ninterface SearchBoxProps extends Omit<TextInputProps, 'startAdornment' | 'endAdornment' | 'type'> {\n  /** Fires on Enter with the current query string. */\n  onSearch?: (value: string) => void;\n  /** Show the SDGA voice-search mic while the field is empty. Default `true`. */\n  voiceSearch?: boolean;\n  /** Fires when the voice-search mic is activated, with the current query. */\n  onVoiceSearch?: (value: string) => void;\n  /** Fires when the field is cleared (clear button or Escape). */\n  onClear?: () => void;\n  /** Show the clear (×) button while the field has a value. Default `true`. */\n  clearable?: boolean;\n  /** Accessible label for the clear button. Default `'Clear search'`. */\n  clearLabel?: string;\n  /** Accessible label for the voice-search mic. Default `'Search by voice'`. */\n  voiceLabel?: string;\n}\n\n// Set the value via the native setter (bypasses React's value tracker) + dispatch `input`,\n// so clear() fires onChange identically in controlled and uncontrolled mode.\nfunction setNativeInputValue(el: HTMLInputElement, value: string) {\n  const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;\n  setter?.call(el, value);\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n}\n\nfunction SearchBox({\n  value,\n  defaultValue,\n  onChange,\n  onKeyDown,\n  onSearch,\n  voiceSearch = true,\n  onVoiceSearch,\n  onClear,\n  clearable = true,\n  clearLabel = 'Clear search',\n  voiceLabel = 'Search by voice',\n  helperIcon = <HelpCircleGlyph width={16} height={16} aria-hidden=\"true\" />,\n  disabled,\n  readOnly,\n  className,\n  ref,\n  ...rest\n}: SearchBoxProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // We need the input node internally (clear() refocuses it), but consumers can\n  // also pass a `ref` (TextInputProps advertises it). Merge both onto one\n  // callback so neither clobbers the other.\n  const setRefs = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  // Internally controlled: we always feed `value` to the inner input so the\n  // clear button's visibility tracks the current text in both modes.\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<string>(\n    defaultValue != null ? String(defaultValue) : '',\n  );\n  const currentValue = isControlled ? String(value ?? '') : internal;\n\n  const isLocked = !!disabled || !!readOnly;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInternal(event.target.value);\n    onChange?.(event);\n  };\n\n  const clear = () => {\n    if (isLocked) return;\n    const el = inputRef.current;\n    if (!el) return;\n    setNativeInputValue(el, '');\n    el.focus();\n    onClear?.();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (event.key === 'Enter') {\n      onSearch?.(currentValue);\n    } else if (event.key === 'Escape' && currentValue.length > 0 && !isLocked) {\n      // First Escape clears the query; stop it here so a parent overlay\n      // (Modal/Popover) only closes on a second, now-empty Escape.\n      event.preventDefault();\n      event.stopPropagation();\n      clear();\n    }\n  };\n\n  const showClear = clearable && currentValue.length > 0 && !isLocked;\n  const showVoice = voiceSearch && !showClear;\n\n  const trailing = showClear ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={clearLabel}\n      data-slot=\"search-box-clear\"\n      onClick={clear}\n    >\n      <Close aria-hidden=\"true\" />\n    </Button>\n  ) : showVoice ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      aria-label={voiceLabel}\n      data-slot=\"search-box-voice\"\n      disabled={isLocked}\n      onClick={() => onVoiceSearch?.(currentValue)}\n    >\n      <Mic aria-hidden=\"true\" />\n    </Button>\n  ) : undefined;\n\n  return (\n    <TextInput\n      {...rest}\n      ref={setRefs}\n      type=\"search\"\n      value={currentValue}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n      readOnly={readOnly}\n      helperIcon={helperIcon}\n      className={cn('ddga-search-box', className)}\n      startAdornment={<SearchGlyph data-slot=\"search-box-icon\" aria-hidden=\"true\" />}\n      endAdornment={trailing}\n    />\n  );\n}\n\nexport { SearchBox };\nexport type { SearchBoxProps };\n"]}

package/dist/{chunk-EM55NWUF.js → chunk-7GWM7F5C.js}

@@ -4,11 +4,9 @@ import {
   calendarDateToDate,
   dateToCalendarDate,
   renderDayContent,
-  useCalendarChrome
-} from "./chunk-TT2DEREM.js";
-import {
-  CalendarIcon
-} from "./chunk-CDS4SYEQ.js";
+  useCalendarChrome,
+  usePressedState
+} from "./chunk-GCOBDP4W.js";
 import {
   cn
 } from "./chunk-7NTT2UXP.js";
@@ -41,15 +39,21 @@ 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"
+      md: "ddga-date-picker-trigger--md",
+      lg: "ddga-date-picker-trigger--lg"
+    },
+    variant: {
+      default: "ddga-date-picker-trigger--default",
+      "filled-lighter": "ddga-date-picker-trigger--filled-lighter",
+      "filled-darker": "ddga-date-picker-trigger--filled-darker"
     },
     error: {
       true: "ddga-date-picker-trigger--error"
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg",
+    variant: "default"
   }
 });
 var datePickerVariants = datePickerTriggerVariants;
@@ -93,7 +97,9 @@ function DatePicker({
   error,
   required,
   disabled,
+  readOnly,
   size,
+  variant,
   id,
   className,
   "aria-label": ariaLabel,
@@ -132,12 +138,13 @@ function DatePicker({
     dgaLocale,
     locale: ariaLocale,
     portalContainer,
-    PrevChevron,
-    NextChevron,
+    PrevArrow,
+    NextArrow,
     resolvedLabels,
     navLabels,
     a11yLabels
   } = useCalendarChrome(calendarSystem, calendarLabels);
+  const { pressed, pressHandlers } = usePressedState();
   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");
@@ -154,6 +161,7 @@ function DatePicker({
       maxValue: ariaMaxValue,
       isRequired: required,
       isDisabled: disabled,
+      isReadOnly: readOnly,
       isInvalid: hasError,
       shouldCloseOnSelect: true,
       id,
@@ -170,7 +178,10 @@ function DatePicker({
           AriaGroup,
           {
             "data-slot": "date-picker-trigger",
-            className: cn(datePickerTriggerVariants({ size, error: hasError }), className),
+            "data-readonly": readOnly ? "" : void 0,
+            "data-pressed": pressed ? "" : void 0,
+            ...pressHandlers,
+            className: cn(datePickerTriggerVariants({ size, variant, error: hasError }), className),
             children: [
               /* @__PURE__ */ jsx(AriaDateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ jsx(
                 AriaDateSegment,
@@ -183,10 +194,9 @@ function DatePicker({
               /* @__PURE__ */ jsx(
                 AriaButton,
                 {
-                  className: "ddga-date-picker__icon-button",
+                  className: "ddga-date-picker__open",
                   "aria-label": a11yLabels.openCalendar,
-                  "data-slot": "date-picker-trigger-button",
-                  children: /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
+                  "data-slot": "date-picker-trigger-button"
                 }
               )
             ]
@@ -236,15 +246,6 @@ function DatePicker({
                   ),
                   /* @__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,
                         {
@@ -253,17 +254,28 @@ function DatePicker({
                           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("div", { className: "ddga-calendar__nav-group", children: [
+                        /* @__PURE__ */ jsx(
+                          AriaButton,
+                          {
+                            slot: "previous",
+                            className: "ddga-calendar__nav",
+                            "data-slot": "date-picker-calendar-prev",
+                            children: /* @__PURE__ */ jsx(PrevArrow, { "aria-hidden": "true" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          AriaButton,
+                          {
+                            slot: "next",
+                            className: "ddga-calendar__nav",
+                            "data-slot": "date-picker-calendar-next",
+                            children: /* @__PURE__ */ jsx(NextArrow, { "aria-hidden": "true" })
+                          }
+                        )
+                      ] })
                     ] }),
-                    /* @__PURE__ */ jsxs(AriaCalendarGrid, { className: "ddga-calendar__grid", children: [
+                    /* @__PURE__ */ jsxs(AriaCalendarGrid, { className: "ddga-calendar__grid", weekdayStyle: "short", children: [
                       /* @__PURE__ */ jsx(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(AriaCalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
                       /* @__PURE__ */ jsx(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(
                         CalendarDayCell,
@@ -290,4 +302,4 @@ export {
   datePickerVariants,
   DatePicker
 };
-//# sourceMappingURL=chunk-EM55NWUF.js.map
+//# sourceMappingURL=chunk-7GWM7F5C.js.map

package/dist/chunk-7GWM7F5C.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 {\n  CalendarNavHeader,\n  CalendarSystemToggle,\n  calendarDateToDate,\n  dateToCalendarDate,\n  renderDayContent,\n  useCalendarChrome,\n  usePressedState,\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      md: 'ddga-date-picker-trigger--md',\n      lg: 'ddga-date-picker-trigger--lg',\n    },\n    variant: {\n      default: 'ddga-date-picker-trigger--default',\n      'filled-lighter': 'ddga-date-picker-trigger--filled-lighter',\n      'filled-darker': 'ddga-date-picker-trigger--filled-darker',\n    },\n    error: {\n      true: 'ddga-date-picker-trigger--error',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    variant: 'default',\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  /** Read-only: value is shown but not editable (segments + calendar locked). */\n  readOnly?: 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  readOnly,\n  size,\n  variant,\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    PrevArrow,\n    NextArrow,\n    resolvedLabels,\n    navLabels,\n    a11yLabels,\n  } = useCalendarChrome(calendarSystem, calendarLabels);\n  const { pressed, pressHandlers } = usePressedState();\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        isReadOnly={readOnly}\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          data-readonly={readOnly ? '' : undefined}\n          data-pressed={pressed ? '' : undefined}\n          {...pressHandlers}\n          className={cn(datePickerTriggerVariants({ size, variant, 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          {/* SDGA field has no calendar icon — the field itself opens the\n              calendar. The button is the (iconless) click surface filling the\n              field's trailing space; segments stay editable. */}\n          <AriaButton\n            className=\"ddga-date-picker__open\"\n            aria-label={a11yLabels.openCalendar}\n            data-slot=\"date-picker-trigger-button\"\n          />\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                <CalendarNavHeader\n                  locale={ariaLocale}\n                  monthLabel={navLabels.month}\n                  yearLabel={navLabels.year}\n                />\n                <div className=\"ddga-calendar__nav-group\">\n                  <AriaButton\n                    slot=\"previous\"\n                    className=\"ddga-calendar__nav\"\n                    data-slot=\"date-picker-calendar-prev\"\n                  >\n                    <PrevArrow aria-hidden=\"true\" />\n                  </AriaButton>\n                  <AriaButton\n                    slot=\"next\"\n                    className=\"ddga-calendar__nav\"\n                    data-slot=\"date-picker-calendar-next\"\n                  >\n                    <NextArrow aria-hidden=\"true\" />\n                  </AriaButton>\n                </div>\n              </header>\n              <AriaCalendarGrid className=\"ddga-calendar__grid\" weekdayStyle=\"short\">\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":[]}

package/dist/chunk-7PSLMVCX.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-7PSLMVCX.js.map

package/dist/{chunk-RNOXGWKQ.cjs → chunk-A4HS7CYD.cjs}

@@ -1,7 +1,8 @@
 "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 _chunkIKWD2OENcjs = require('./chunk-IKWD2OEN.cjs');
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
 
 
 var _chunkFQLVTLUIcjs = require('./chunk-FQLVTLUI.cjs');
@@ -51,8 +52,8 @@ function useCalendarChrome(calendarSystem, calendarLabels) {
     [dgaLocale, calendarSystem]
   );
   const portalContainer = _nullishCoalesce(_nullishCoalesce(_optionalChain([dgaCtx, 'optionalAccess', _4 => _4.portalEl]), () => ( _optionalChain([dgaCtx, 'optionalAccess', _5 => _5.rootEl]))), () => ( void 0));
-  const PrevChevron = dir === "rtl" ? _chunkIKWD2OENcjs.ChevronRight : _chunkIKWD2OENcjs.ChevronLeft;
-  const NextChevron = dir === "rtl" ? _chunkIKWD2OENcjs.ChevronLeft : _chunkIKWD2OENcjs.ChevronRight;
+  const PrevArrow = dir === "rtl" ? _chunkYS2JJ73Mcjs.ArrowRight : _chunkYS2JJ73Mcjs.ArrowLeft;
+  const NextArrow = dir === "rtl" ? _chunkYS2JJ73Mcjs.ArrowLeft : _chunkYS2JJ73Mcjs.ArrowRight;
   const resolvedLabels = _react.useMemo.call(void 0, () => {
     if (calendarLabels) return calendarLabels;
     return dgaLocale.startsWith("ar") ? { gregorian: "\u0645\u064A\u0644\u0627\u062F\u064A", hijri: "\u0647\u062C\u0631\u064A" } : { gregorian: "Gregorian", hijri: "Hijri" };
@@ -70,13 +71,25 @@ function useCalendarChrome(calendarSystem, calendarLabels) {
     dir,
     locale,
     portalContainer,
-    PrevChevron,
-    NextChevron,
+    PrevArrow,
+    NextArrow,
     resolvedLabels,
     navLabels,
     a11yLabels
   };
 }
+function usePressedState() {
+  const [pressed, setPressed] = _react.useState.call(void 0, false);
+  return {
+    pressed,
+    pressHandlers: {
+      onPointerDownCapture: () => setPressed(true),
+      onPointerUpCapture: () => setPressed(false),
+      onPointerCancelCapture: () => setPressed(false),
+      onPointerLeave: () => setPressed(false)
+    }
+  };
+}
 function CalendarSystemToggle({
   value,
   onChange,
@@ -159,17 +172,20 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
         children: monthNames.map((name, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: i + 1, children: name }, i + 1))
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "select",
-      {
-        "aria-label": yearLabel,
-        className: "ddga-calendar__select ddga-calendar__year-select",
-        "data-slot": "calendar-year-select",
-        value: focusedDate.year,
-        onChange: (e) => state.setFocusedDate(focusedDate.set({ year: Number(e.target.value) })),
-        children: yearOptions.map((y) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: y, children: y }, y))
-      }
-    )
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ddga-calendar__year-chip", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "select",
+        {
+          "aria-label": yearLabel,
+          className: "ddga-calendar__select ddga-calendar__year-select",
+          "data-slot": "calendar-year-select",
+          value: focusedDate.year,
+          onChange: (e) => state.setFocusedDate(focusedDate.set({ year: Number(e.target.value) })),
+          children: yearOptions.map((y) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: y, children: y }, y))
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.ChevronDown, { "aria-hidden": "true", className: "ddga-calendar__year-chevron" })
+    ] })
   ] });
 }
 function renderDayContent(primary, opts) {
@@ -189,5 +205,6 @@ function renderDayContent(primary, opts) {
 
 
 
-exports.dateToCalendarDate = dateToCalendarDate; exports.calendarDateToDate = calendarDateToDate; exports.composeLocale = composeLocale; exports.secondaryDayNumber = secondaryDayNumber; exports.useCalendarChrome = useCalendarChrome; exports.CalendarSystemToggle = CalendarSystemToggle; exports.CalendarNavHeader = CalendarNavHeader; exports.renderDayContent = renderDayContent;
-//# sourceMappingURL=chunk-RNOXGWKQ.cjs.map
+
+exports.dateToCalendarDate = dateToCalendarDate; exports.calendarDateToDate = calendarDateToDate; exports.composeLocale = composeLocale; exports.secondaryDayNumber = secondaryDayNumber; exports.useCalendarChrome = useCalendarChrome; exports.usePressedState = usePressedState; exports.CalendarSystemToggle = CalendarSystemToggle; exports.CalendarNavHeader = CalendarNavHeader; exports.renderDayContent = renderDayContent;
+//# sourceMappingURL=chunk-A4HS7CYD.cjs.map

package/dist/chunk-A4HS7CYD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-A4HS7CYD.cjs","../src/internal/calendar/calendar-core.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-A4HS7CYD.cjs","sourcesContent":[null,"'use client';\n\n// Shared Calendar core consumed by both DatePicker (single date) and\n// DateRangePicker (date range). Everything here is calendar-system /\n// month-year-navigation / day-rendering logic that is identical regardless of\n// whether one date or a range is being selected — extracted so the two pickers\n// stay in lockstep on Hijri handling, Latin digits, and locale composition.\n//\n// NOT exported from the public barrel. Pickers import from here directly.\n\nimport { useContext, useMemo, useState, type ReactNode } from 'react';\nimport {\n  CalendarStateContext as AriaCalendarStateContext,\n  RangeCalendarStateContext as AriaRangeCalendarStateContext,\n} from 'react-aria-components';\nimport {\n  CalendarDate,\n  GregorianCalendar,\n  IslamicUmalquraCalendar,\n  toCalendar,\n  type DateValue,\n} from '@internationalized/date';\nimport { ArrowLeft, ArrowRight, ChevronDown } from '../icons';\nimport { DgaContext } from '../../providers/DgaContext';\n\n// ─── Types ─── //\n\nexport type CalendarSystem = 'gregorian' | 'hijri';\n\nexport interface CalendarLabels {\n  gregorian: string;\n  hijri: string;\n}\n\n// Locale-aware accessible names for the calendar chrome's controls. Defaulted\n// in `useCalendarChrome` (Arabic when the DGA locale is `ar`) so a screen reader\n// in an Arabic UI doesn't announce these controls in English.\nexport interface CalendarA11yLabels {\n  /** Accessible name for the popover trigger button. */\n  openCalendar: string;\n  /** Accessible name for the Gregorian↔Hijri tablist. */\n  calendarSystem: string;\n}\n\n// ─── Date ↔ CalendarDate (Gregorian) normalization ─── //\n\n// Public APIs are `Date`-based so consumers don't take a dep on\n// `@internationalized/date`. Internally everything round-trips through a\n// Gregorian `CalendarDate` so the Hijri toggle is purely a *display* concern —\n// the stored value is always the same absolute day, regardless of which\n// calendar the user was looking at when they picked it.\n\nconst GREGORIAN = new GregorianCalendar();\nconst ISLAMIC_UMALQURA = new IslamicUmalquraCalendar();\n\nexport function dateToCalendarDate(date: Date | null | undefined): CalendarDate | null {\n  if (!date) return null;\n  // Extract LOCAL Y/M/D, not UTC. The contract is date-only; converting\n  // through UTC would shift the day across timezone boundaries.\n  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());\n}\n\nexport function calendarDateToDate(value: DateValue | null | undefined): Date | null {\n  if (!value) return null;\n  // Defensive: if a non-Gregorian CalendarDate ever reaches here, convert.\n  // Today the contract is Gregorian-only.\n  const greg =\n    value.calendar.identifier === 'gregory' ? value : toCalendar(value, new GregorianCalendar());\n  return new Date(greg.year, greg.month - 1, greg.day);\n}\n\n// ─── Locale composition (DGA locale + optional calendar override) ─── //\n\nexport function composeLocale(dgaLocale: string, calendar: CalendarSystem): string {\n  // Promote a bare 'ar'/'en' from DgaProvider to a regional tag so react-aria\n  // picks the right defaults (week start, weekday names). 'ar-SA' matches the\n  // DGA target audience; 'en-US' is the conventional English default.\n  const base = dgaLocale === 'ar' ? 'ar-SA' : dgaLocale === 'en' ? 'en-US' : dgaLocale;\n  // DGA convention: Latin digits (0–9) at all times, regardless of calendar or\n  // UI language. Without this, `ar-*` locales default to Arabic-Indic numerals\n  // (٠–٩) on segments + calendar cells, which makes month/year dropdowns and\n  // cross-calendar comparisons harder to read. The Unicode `-u-` extension\n  // carries both calendar and numbering-system keys when both apply.\n  const isArabic = base.startsWith('ar');\n  if (calendar === 'hijri') {\n    return isArabic ? `${base}-u-ca-islamic-umalqura-nu-latn` : `${base}-u-ca-islamic-umalqura`;\n  }\n  return isArabic ? `${base}-u-nu-latn` : base;\n}\n\n// ─── Secondary-calendar helper ─── //\n\nexport function secondaryDayNumber(date: DateValue, mainCalendar: CalendarSystem): number {\n  const other = mainCalendar === 'hijri' ? GREGORIAN : ISLAMIC_UMALQURA;\n  return toCalendar(date, other).day;\n}\n\n// ─── Shared chrome hook (locale, portal, chevrons, labels) ─── //\n\n// Consolidates the DgaContext-derived bits both pickers need: the composed\n// react-aria locale, the body-portal container (theme inheritance), the\n// direction-swapped prev/next chevrons, and locale-aware default labels.\nexport function useCalendarChrome(calendarSystem: CalendarSystem, calendarLabels?: CalendarLabels) {\n  const dgaCtx = useContext(DgaContext);\n  const dgaLocale = dgaCtx?.locale ?? 'en';\n  const dir = dgaCtx?.dir ?? 'ltr';\n\n  const locale = useMemo(\n    () => composeLocale(dgaLocale, calendarSystem),\n    [dgaLocale, calendarSystem],\n  );\n\n  // react-aria's Popover renders to a portal under <body> by default. Re-anchor\n  // it under DgaProvider's body-mounted portal so data-theme, theme vars, and\n  // .ddga-theme-* classes inherit into the dropdown. Falls back to <body> when\n  // used standalone (no provider).\n  const portalContainer = (dgaCtx?.portalEl ?? dgaCtx?.rootEl ?? undefined) as Element | undefined;\n\n  // In RTL, \"previous\" sits visually on the right and points right; \"next\" sits\n  // on the left and points left. Swapping the icon components (rather than\n  // CSS-flipping) is robust because it doesn't rely on the portal inheriting dir.\n  const PrevArrow = dir === 'rtl' ? ArrowRight : ArrowLeft;\n  const NextArrow = dir === 'rtl' ? ArrowLeft : ArrowRight;\n\n  const resolvedLabels = useMemo<CalendarLabels>(() => {\n    if (calendarLabels) return calendarLabels;\n    return dgaLocale.startsWith('ar')\n      ? { gregorian: 'ميلادي', hijri: 'هجري' }\n      : { gregorian: 'Gregorian', hijri: 'Hijri' };\n  }, [calendarLabels, dgaLocale]);\n\n  const navLabels = useMemo(\n    () =>\n      dgaLocale.startsWith('ar')\n        ? { month: 'الشهر', year: 'السنة' }\n        : { month: 'Month', year: 'Year' },\n    [dgaLocale],\n  );\n\n  const a11yLabels = useMemo<CalendarA11yLabels>(\n    () =>\n      dgaLocale.startsWith('ar')\n        ? { openCalendar: 'فتح التقويم', calendarSystem: 'نظام التقويم' }\n        : { openCalendar: 'Open calendar', calendarSystem: 'Calendar system' },\n    [dgaLocale],\n  );\n\n  return {\n    dgaLocale,\n    dir,\n    locale,\n    portalContainer,\n    PrevArrow,\n    NextArrow,\n    resolvedLabels,\n    navLabels,\n    a11yLabels,\n  };\n}\n\n// ─── Pressed state (reliable on a react-aria Group) ─── //\n\n// CSS `:active` is unreliable on the picker trigger: it's a react-aria Group of\n// DateSegments + a Button whose usePress handling (preventDefault / pointer\n// capture) makes `:active` fire inconsistently depending on where you press.\n// Track pressed in JS via CAPTURE-phase pointer events (which fire on the Group\n// before any child can swallow them) and expose it as `data-pressed`. Spread\n// `pressHandlers` onto the trigger Group; gate the CSS with `[data-pressed]`.\nexport function usePressedState() {\n  const [pressed, setPressed] = useState(false);\n  return {\n    pressed,\n    pressHandlers: {\n      onPointerDownCapture: () => setPressed(true),\n      onPointerUpCapture: () => setPressed(false),\n      onPointerCancelCapture: () => setPressed(false),\n      onPointerLeave: () => setPressed(false),\n    },\n  };\n}\n\n// ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── //\n\ninterface CalendarSystemToggleProps {\n  value: CalendarSystem;\n  onChange: (next: CalendarSystem) => void;\n  labels: CalendarLabels;\n  /** Localized accessible name for the tablist (from `useCalendarChrome`). */\n  groupLabel: string;\n}\n\nexport function CalendarSystemToggle({\n  value,\n  onChange,\n  labels,\n  groupLabel,\n}: CalendarSystemToggleProps) {\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={groupLabel}\n      className=\"ddga-calendar-toggle\"\n      data-slot=\"calendar-toggle\"\n    >\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={value === 'gregorian'}\n        className=\"ddga-calendar-toggle__button\"\n        data-active={value === 'gregorian' ? '' : undefined}\n        onClick={() => onChange('gregorian')}\n      >\n        {labels.gregorian}\n      </button>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={value === 'hijri'}\n        className=\"ddga-calendar-toggle__button\"\n        data-active={value === 'hijri' ? '' : undefined}\n        onClick={() => onChange('hijri')}\n      >\n        {labels.hijri}\n      </button>\n    </div>\n  );\n}\n\n// ─── Calendar nav header (month + year dropdowns) ─── //\n\n// Rendered inside <Calendar>/<RangeCalendar> so it can consume the calendar\n// state context. Both single and range calendars expose the same\n// `focusedDate`/`setFocusedDate`/`minValue`/`maxValue` surface (CalendarStateBase),\n// so we read whichever context is populated — the component is calendar-kind\n// agnostic. Hooking the state directly keeps the dropdowns in sync with the\n// prev/next buttons and keyboard navigation automatically.\ninterface CalendarNavHeaderProps {\n  locale: string;\n  monthLabel: string;\n  yearLabel: string;\n}\n\nexport function CalendarNavHeader({ locale, monthLabel, yearLabel }: CalendarNavHeaderProps) {\n  // A given subtree lives inside exactly one of these; the other is null.\n  const rangeState = useContext(AriaRangeCalendarStateContext);\n  const singleState = useContext(AriaCalendarStateContext);\n  const state = rangeState ?? singleState;\n\n  // Pull state fields with safe fallbacks so the hooks below stay unconditional\n  // (rules-of-hooks). Rendering still bails when state is null.\n  const focusedDate = state?.focusedDate ?? null;\n  const focusedYear = focusedDate?.year ?? 0;\n  const focusedCalendar = focusedDate?.calendar ?? GREGORIAN;\n  const minValue = state?.minValue ?? null;\n  const maxValue = state?.maxValue ?? null;\n\n  // Localized month names in the active calendar. Hijri months translate\n  // correctly because the locale string carries `-u-ca-islamic-umalqura`.\n  const monthNames = useMemo(() => {\n    if (!focusedDate) return [];\n    const fmt = new Intl.DateTimeFormat(locale, { month: 'long' });\n    return Array.from({ length: 12 }, (_, i) => {\n      const cd = new CalendarDate(focusedCalendar, focusedYear, i + 1, 1);\n      const greg = toCalendar(cd, GREGORIAN);\n      const js = new Date(greg.year, greg.month - 1, greg.day);\n      return fmt.format(js);\n    });\n  }, [locale, focusedDate, focusedCalendar, focusedYear]);\n\n  // Year range. min/maxValue are in the consumer's calendar (Gregorian); convert\n  // to the focused calendar's year. Defaults span 100 years back to 30 forward.\n  const yearOptions = useMemo(() => {\n    if (!focusedDate) return [];\n    const minY = minValue ? toCalendar(minValue, focusedCalendar).year : focusedYear - 100;\n    const maxY = maxValue ? toCalendar(maxValue, focusedCalendar).year : focusedYear + 30;\n    const start = Math.min(minY, focusedYear);\n    const end = Math.max(maxY, focusedYear);\n    return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n  }, [focusedDate, focusedCalendar, focusedYear, minValue, maxValue]);\n\n  if (!state || !focusedDate) return null;\n\n  return (\n    <div className=\"ddga-calendar__nav-selects\" data-slot=\"calendar-nav\">\n      <select\n        aria-label={monthLabel}\n        className=\"ddga-calendar__select ddga-calendar__month-select\"\n        data-slot=\"calendar-month-select\"\n        value={focusedDate.month}\n        onChange={(e) => state.setFocusedDate(focusedDate.set({ month: Number(e.target.value) }))}\n      >\n        {monthNames.map((name, i) => (\n          <option key={i + 1} value={i + 1}>\n            {name}\n          </option>\n        ))}\n      </select>\n      <span className=\"ddga-calendar__year-chip\">\n        <select\n          aria-label={yearLabel}\n          className=\"ddga-calendar__select ddga-calendar__year-select\"\n          data-slot=\"calendar-year-select\"\n          value={focusedDate.year}\n          onChange={(e) => state.setFocusedDate(focusedDate.set({ year: Number(e.target.value) }))}\n        >\n          {yearOptions.map((y) => (\n            <option key={y} value={y}>\n              {y}\n            </option>\n          ))}\n        </select>\n        <ChevronDown aria-hidden=\"true\" className=\"ddga-calendar__year-chevron\" />\n      </span>\n    </div>\n  );\n}\n\n// ─── Day-cell content (primary number + optional secondary calendar number) ─── //\n\n// The visual content rendered inside a day cell, shared by both pickers. Takes\n// the already-formatted primary text (react-aria's `formattedDate`, or a bare\n// day number for the single picker's outside-month button) and stacks the other\n// calendar's day number beneath it when `showSecondary` is on.\nexport function renderDayContent(\n  primary: ReactNode,\n  opts: { showSecondary: boolean; date: DateValue; calendarSystem: CalendarSystem },\n): ReactNode {\n  if (!opts.showSecondary) return primary;\n  return (\n    <>\n      <span className=\"ddga-calendar__cell-primary\">{primary}</span>\n      <span aria-hidden=\"true\" className=\"ddga-calendar__cell-secondary\">\n        {secondaryDayNumber(opts.date, opts.calendarSystem)}\n      </span>\n    </>\n  );\n}\n"]}

package/dist/chunk-A6S4V3IG.cjs

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

package/dist/{chunk-IUEAUTR7.cjs.map → chunk-A6S4V3IG.cjs.map}

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