@dev-dga/react 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @dev-dga/react
 
+## 0.12.1
+
+### Patch Changes
+
+- No runtime changes. Refreshed npm package metadata (`description`, `keywords`, `homepage`) and README; descriptions now state the packages are an independent implementation of DGA Platforms Code, not the official DGA system, and `homepage` points at the community hub. The field-underline focus/pressed animation ships in `@dev-dga/css`; see its changelog.
+
+## 0.12.0
+
+The **SDGA Platforms Code parity** release: ~40 components rebuilt or aligned to the official DGA "Platforms Code" Figma, plus new SDGA components, a 3-tier token architecture, and library-wide brand-green / ink / navy-shadow token shifts. This is a **large breaking release** — scan the renames first.
+
+### Breaking renames (no aliases kept)
+
+- `Input` → **`TextInput`** (`InputProps`→`TextInputProps`, `inputVariants`→`textInputVariants`; CSS `ddga-input*`→`ddga-text-input*`). Adds `TextInputAffix` + `TextInputDropdown`.
+- `Combobox` → **`Dropdown`** (`ComboboxItem`/`Group`/`Separator` → `Dropdown*`; CSS `ddga-combobox*`→`ddga-dropdown*`). `Select` is unaffected.
+- `Stat` → **`Metric`** (`StatGroup`/`StatChange`/`StatChart` → `Metric*`, `statVariants`→`metricVariants`; CSS `ddga-stat*`→`ddga-metric*`).
+- `Badge` → **`Tag`** (`BadgeProps`→`TagProps`, `badgeVariants`→`tagVariants`; CSS `ddga-badge*`→`ddga-tag*`). `SidebarMenuBadge` unchanged.
+- `Steps` → **`ProgressIndicator`** (`stepsVariants`→`progressIndicatorVariants`; sub-parts `Step*` keep their names; new `StepContent` wrapper).
+- `Alert` → **`InlineAlert`** (removed `Alert`/`AlertTitle`/`AlertDescription`/`alertVariants` + `variant`/`dismissible`/`onDismiss`).
+- `Toaster` → **`NotificationToast`** (imperative `toast()` API unchanged; `toast.dismiss()` now **requires an id** — the no-arg "dismiss all" is removed).
+- `ToggleGroup`/`ToggleGroupItem`/`toggleGroupVariants` **removed** → use the new **`ContentSwitcher`** (single-select only; the `type="multiple"` toolbar is gone; standalone `Toggle` unchanged).
+- Button `inverted` prop → **`onColor`**.
+- `DropdownMenuItem` `shortcut` → **`trailing`**; `DropdownMenuCheckboxItem`/`RadioItem` render the check **trailing** now; `DropdownMenuContent` `size` removed.
+- `<Button fab>` modifier **removed** → use the new **`FloatingButton`**.
+- `Tag` loses `dot`/`ghost` → use the new **`StatusTag`**.
+
+### New components
+
+- **Charts** — `PieChart` / `LineChart` / `BarChart` (hand-built SVG, no charting dep).
+- **Chip** — interactive selectable chip (the counterpart to the static `Tag`).
+- **StatusTag** — the SDGA Status Tag (own tones/sizes/dot; replaces `Tag dot`/`ghost`).
+- **StructuredList** — SDGA Structured List (`<table>` compound with intrinsic row selection).
+- **ContentSwitcher** — SDGA segmented single-select control (extracted from `ToggleGroup`).
+- **FloatingButton** — SDGA FAB (replaces the removed `<Button fab>`).
+- **Carousel** — SDGA carousel (dots/arrows, keyboard, swipe, `loop`, `autoplay`).
+- **CodeSnippet** / **CodeSnippetInline** — SDGA code block + command row (always LTR).
+- **DigitalStamp** — SDGA government-site verification bar.
+- **Filtration** — SDGA faceted filter-panel compound (overlay + inline).
+- **Notification** — SDGA full-width system banner (3rd notification type).
+- **SlideoutMenu** — SDGA slide-in navigation panel (Radix Dialog).
+- **SaudiRiyal** / **SaudiRiyalSymbol** — the official Saudi Riyal symbol + formatted amount.
+- **HelpIcon** — the SDGA help "?" bubble (ships with the Tooltip rebuild).
+
+### Component alignments
+
+- **Accordion** — SDGA sizes/states + `iconAlign` / `flush`. **BREAKING** size remap (`md`→`lg`, `sm`→`md`, default `lg`).
+- **Avatar** — sizes `2xl` (80) / `3xl` (120), fallback type ramp, square corner `radius-sm`, white ring on every avatar (additive).
+- **Breadcrumb** — SDGA styling + `BreadcrumbEllipsisTrigger`; current page now muted gray-400.
+- **Button** — full SDGA fidelity: new `variant="black"`, expanded `onColor` matrix, icon sizes `icon`/`icon-md`/`icon-xs`.
+- **Card** — full SDGA parity rebuild. **BREAKING** (container padding/24px gap, `CardDescription` 16px/gray-800, inset rounded `CardImage`, selectable fills only the checkbox) + new `variant="plain"`.
+- **Checkbox** — SDGA box sizes (`md` 24 / `sm` 20 / new `xs` 16), `variant` primary/neutral, `readOnly`. **BREAKING** size remap; disabled is a recolour.
+- **DatePicker / DateRangePicker** — full SDGA calendar + field. **BREAKING** (`size` md/lg default `lg`, no calendar icon, `variant` fills, `readOnly`).
+- **Divider** — SDGA `tone` axis (neutral/primary/alpha-white/white); neutral default darkens gray-200→gray-300.
+- **DropdownMenu** — SDGA Menu rebuild. **BREAKING** (`trailing` slot, trailing selection check, `size` removed; shadow-2xl panel).
+- **Dropdown** (ex-Combobox) — SDGA Dropdown Input field + new `multiple` / `searchable`.
+- **FileUpload** — SDGA rebuild. **BREAKING** (`hint`/`helperText`/`progress` removed → `title`/`description` + spinner; `variant` dropzone/button; `'pending'` status dropped).
+- **InlineAlert** (ex-Alert) — SDGA notification compound (`type`/`appearance`/`actions` + `InlineAlertAction`).
+- **Link** — SDGA rebuild. **BREAKING** (`variant` → `tone`/`size`/`inline`; 6-state lighten-on-hover; ink focus; `disabled` + `:visited`).
+- **List** — SDGA marker list rebuild. **BREAKING** (removed `ListItemContent`/`Action`/`Icon` + `plain`/`bulleted`/… ; `variant` unordered/ordered/with-icon, `tone`, `level`).
+- **Metric** (ex-Stat) — SDGA Metric card. **BREAKING** (removed variant/size/sentiment/`StatLabel`/`StatValue`; `layout` large/small, `MetricChart`).
+- **Modal** — SDGA parity. **BREAKING** (`size` → `default`/`full`; supporting text → `ModalBody`; featured `icon`, `centered`, navy `shadow-3xl`, mobile-stacking actions).
+- **NumberInput** — SDGA field + prefix/suffix steppers. **BREAKING** size remap (`md` 32 / `lg` 40, default `lg`; `sm` removed); underline focus; ＋ leads / − trails.
+- **Pagination** — SDGA rebuild. **BREAKING** (green underline current, icon-only square arrows, `PaginationPreviousProps`+`NextProps`→`PaginationNavProps`) + `PaginationOverflow` jump-to-page.
+- **ProgressIndicator** (ex-Steps) — SDGA rebuild (32px circle, `StepContent`, `appearance` circles/dot; `size` removed).
+- **Progress / CircularProgress** — SDGA Progress Bar rebuild. **BREAKING** (`color` → `variant`+`state`; `warning` dropped; new sizes; `label`/`helperText`/`description`).
+- **Quote** — SDGA card quote rebuild. **BREAKING** (removed `variant`/`quoteMark`/`byline`/sub-parts; `quoteTitle`, `whiteBackground`, `authorTitle`).
+- **Radio** — SDGA single 24px, `variant` primary/neutral, `readOnly`, ripple, ink focus. **BREAKING** (`size` removed).
+- **Rating** — SDGA sizes 24/32/48, gold-600 fill, `tone="brand"`, pressed disc, `icon`. **BREAKING** size remap.
+- **SearchBox** — SDGA parity. **BREAKING** (sizes 40/48; voice mic shown by default via `voiceSearch`).
+- **Skeleton** — SDGA translucent gradient fill, per-shape radii, new `square`, single `shimmer`. **BREAKING** (removed `pulse`/`wave`).
+- **Slider** — SDGA sizes, solid brand-green thumb, trailing value readout, scaled label. Minor breaking (`sliderVariants` no longer carries `size`; `Slider` `size` prop unchanged).
+- **Spinner** — SDGA "Loading" track-ring + arc, `tone` presets, `size="xl"` (additive; every spinner gains a track ring).
+- **Switch** — SDGA 48×24 outlined-off / filled-on, ripple, ink focus. **BREAKING** (`size` removed).
+- **Table** — full SDGA parity. **BREAKING** (always-on row/header dividers, `contained` frame, removed `bordered`/`divided`; sort/filter icon-boxes; `filterable`).
+- **Tabs** — SDGA underline-only. **BREAKING** (removed `pill`/`variant`; size remap, Medium label 14px) + `overflow` "More" menu + `flush`.
+- **Tag** (ex-Badge) — SDGA Tag: new `size="lg"`, `shape` pill/squared, `variant="on-color"`, `outlined`, `iconOnly`; `*-subtle` recolored to SDGA (−50/−200/−800).
+- **Textarea** — SDGA rebuild. **BREAKING** (`size` removed; `variant` fills; underline focus; box moves to a control wrapper `data-slot="textarea-control"`).
+- **TextInput** (ex-Input) — SDGA Text input + `TextInputAffix` / `TextInputDropdown`. **BREAKING** rename + size remap (`md` 32 / `lg` 40, default `lg`; `sm` removed); underline focus.
+- **Tooltip** — SDGA structured card (icon + title + paragraph), `inverted` axis (default now **light**), 28×6 beak. **BREAKING** (`size` removed) + new `HelpIcon`.
+- **SDGA parity re-verification sweep** — dark-mode legibility, a11y/keyboard, and measured-value fixes across all components; `Notification` now **requires `children`**; props passthrough added to Rating/FileUpload/Pagination/Filtration.
+
+### Token-driven changes (ride `@dev-dga/tokens` / `@dev-dga/css`)
+
+- **Brand green** `--ddga-color-primary` SA-500 `#25935F` → SA-600 `#1B8354` (every primary surface).
+- **Text ink** `--ddga-text-primary` → `#161616`; `text-secondary` → gray-700, `text-tertiary` → gray-600.
+- **Navy 7-step shadow scale** — re-tints every shadowed surface.
+- **3-tier token architecture** — semantic tokens are `var()` aliases over a primitive → brand-ramp chain; `buildTheme` accent theming is now mode-aware in dark. New tokens: `alpha-white-*`, `radius-xs`, `font-size-2xs`, `color-focus-ring`, `chart-1..6`, `sa-flag`.
+
 ## 0.11.0
 
 ### Minor Changes

package/README.md

@@ -1,8 +1,10 @@
 # @dev-dga/react
 
-React 19 components for the **DGA (Digital Government Authority)** design system , Saudi Arabia's national reference for government digital platforms.
+An independent React 19 component library implementing the **DGA (Digital Government Authority) Platforms Code** design system, Saudi Arabia's (KSA) national reference for government digital platforms.
 
-Accessible (WCAG 2.2 AA), RTL-native, dark-mode ready, themable. **Ships no CSS** , pair with `@dev-dga/css`.
+Accessible (WCAG 2.2 AA), RTL-native, Arabic-first, dark-mode ready, themable, and RSC-compatible. **Ships no CSS**; pair with `@dev-dga/css`.
+
+> Independent, community-maintained. Not affiliated with or endorsed by the DGA.
 
 ## Install
 
@@ -45,10 +47,10 @@ For RTL, dark mode, or a brand color, configure the provider:
 
 The package entry ships `'use client'`, so the whole component surface is a client boundary and slots into a React Server Component tree the usual way:
 
-- **App Router:** wrap `DgaProvider` once in a `'use client'` module and render that from your server `layout.tsx`; use components inside your client components as normal. Importing anything from `@dev-dga/react` into a Server Component establishes the client boundary automatically — the package entry carries `'use client'`.
-- **Vite / CRA / any client-rendered React 19 app:** nothing special — just put `DgaProvider` at the root.
+- **App Router:** wrap `DgaProvider` once in a `'use client'` module and render that from your server `layout.tsx`; use components inside your client components as normal. Importing anything from `@dev-dga/react` into a Server Component establishes the client boundary automatically; the package entry carries `'use client'`.
+- **Vite / CRA / any client-rendered React 19 app:** nothing special; just put `DgaProvider` at the root.
 
-Because the entry is a single client boundary, even purely-presentational components (`Card`, `Divider`) render as client components when imported from `@dev-dga/react` — the right trade-off for an all-client library (most of the surface needs hooks/context), and what makes a one-line barrel import work in RSC. This is by design, not a limitation to route around.
+Because the entry is a single client boundary, even purely-presentational components (`Card`, `Divider`) render as client components when imported from `@dev-dga/react`: the right trade-off for an all-client library (most of the surface needs hooks/context), and what makes a one-line barrel import work in RSC. This is by design, not a limitation to route around.
 
 ## Compose with router links (`asChild`)
 
@@ -109,7 +111,7 @@ function MyField({ label, helperText, error, errorMessage, ...rest }) {
 
 ## Docs
 
-[Live Storybook](https://devdhaif.github.io/dev-dga/) · [Source](https://github.com/DevDhaif/dev-dga)
+[Live Storybook](https://dev-dga.vercel.app/) · [Source](https://github.com/DevDhaif/dev-dga)
 
 ## License
 

package/dist/chunk-2I7URBEK.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-2I7URBEK.js.map

package/dist/chunk-2MDYDWAH.js

@@ -0,0 +1,79 @@
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/FloatingButton/FloatingButton.tsx
+import "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var floatingButtonVariants = cva("ddga-floating-button", {
+  variants: {
+    variant: {
+      primary: "ddga-floating-button--primary",
+      black: "ddga-floating-button--black",
+      secondary: "ddga-floating-button--secondary"
+    },
+    size: {
+      sm: "ddga-floating-button--sm",
+      lg: "ddga-floating-button--lg"
+    },
+    onColor: {
+      true: "ddga-floating-button--on-color"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "lg"
+  }
+});
+function FloatingButton({
+  variant,
+  size,
+  onColor,
+  icon,
+  iconFlip,
+  asChild,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...props
+}) {
+  if (process.env.NODE_ENV === "development" && !asChild && (children == null || children === "")) {
+    if (!props["aria-label"] && !props["aria-labelledby"]) {
+      console.warn(
+        "[@dev-dga/react] An icon-only FloatingButton (no label) requires an aria-label or aria-labelledby for screen reader accessibility."
+      );
+    }
+  }
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ...asChild ? {} : { type, disabled },
+      ...asChild && disabled ? { tabIndex: -1 } : {},
+      "aria-disabled": disabled || void 0,
+      "data-slot": "floating-button",
+      className: cn(floatingButtonVariants({ variant, size, onColor }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("ddga-floating-button__icon", iconFlip && "ddga-icon-flip"),
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
+        asChild ? /* @__PURE__ */ jsx(SlotPrimitive.Slottable, { children }) : children != null && children !== "" && /* @__PURE__ */ jsx("span", { className: "ddga-floating-button__text", children })
+      ]
+    }
+  );
+}
+
+export {
+  floatingButtonVariants,
+  FloatingButton
+};
+//# sourceMappingURL=chunk-2MDYDWAH.js.map

package/dist/chunk-2MDYDWAH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst floatingButtonVariants = cva('ddga-floating-button', {\n  variants: {\n    variant: {\n      primary: 'ddga-floating-button--primary',\n      black: 'ddga-floating-button--black',\n      secondary: 'ddga-floating-button--secondary',\n    },\n    size: {\n      sm: 'ddga-floating-button--sm',\n      lg: 'ddga-floating-button--lg',\n    },\n    onColor: {\n      true: 'ddga-floating-button--on-color',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'lg',\n  },\n});\n\ninterface FloatingButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof floatingButtonVariants> {\n  /** Lead action glyph, rendered at 24px (e.g. a plus for \"create\"). */\n  icon: ReactNode;\n  /**\n   * Optional label. Present → an **extended** pill (icon + label, gap 8); omit →\n   * a circular **icon-only** FAB (then provide an `aria-label`).\n   */\n  children?: ReactNode;\n  /** Flip the icon horizontally in RTL (for directional glyphs). */\n  iconFlip?: boolean;\n  /**\n   * Render as the single child element instead of a `<button>`, to compose with\n   * router links: `<FloatingButton asChild icon={…}><a href=\"…\" /></FloatingButton>`.\n   * `type` and native `disabled` are dropped; disabled then relies on\n   * `aria-disabled` + `tabIndex={-1}` (consumer must still gate the action).\n   */\n  asChild?: boolean;\n}\n\nfunction FloatingButton({\n  variant,\n  size,\n  onColor,\n  icon,\n  iconFlip,\n  asChild,\n  disabled,\n  className,\n  children,\n  type = 'button',\n  ...props\n}: FloatingButtonProps) {\n  if (process.env.NODE_ENV === 'development' && !asChild && (children == null || children === '')) {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      console.warn(\n        '[@dev-dga/react] An icon-only FloatingButton (no label) requires an ' +\n          'aria-label or aria-labelledby for screen reader accessibility.',\n      );\n    }\n  }\n\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      {...(asChild ? {} : { type, disabled })}\n      {...(asChild && disabled ? { tabIndex: -1 } : {})}\n      aria-disabled={disabled || undefined}\n      data-slot=\"floating-button\"\n      className={cn(floatingButtonVariants({ variant, size, onColor }), className)}\n      {...props}\n    >\n      <span\n        className={cn('ddga-floating-button__icon', iconFlip && 'ddga-icon-flip')}\n        aria-hidden=\"true\"\n      >\n        {icon}\n      </span>\n      {asChild ? (\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      ) : (\n        children != null &&\n        children !== '' && <span className=\"ddga-floating-button__text\">{children}</span>\n      )}\n    </Comp>\n  );\n}\n\nexport { FloatingButton, floatingButtonVariants };\nexport type { FloatingButtonProps };\n"],"mappings":";;;;;AAEA,OAA+B;AAC/B,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAA8B;AAqEnC,SAQE,KARF;AAlEJ,IAAM,yBAAyB,IAAI,wBAAwB;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAsBD,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAwB;AACtB,MAAI,QAAQ,IAAI,aAAa,iBAAiB,CAAC,YAAY,YAAY,QAAQ,aAAa,KAAK;AAC/F,QAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,GAAG;AACrD,cAAQ;AAAA,QACN;AAAA,MAEF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,OAAO,UAAU,cAAc,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,UAAU,CAAC,IAAI,EAAE,MAAM,SAAS;AAAA,MACpC,GAAI,WAAW,WAAW,EAAE,UAAU,GAAG,IAAI,CAAC;AAAA,MAC/C,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,WAAW,GAAG,uBAAuB,EAAE,SAAS,MAAM,QAAQ,CAAC,GAAG,SAAS;AAAA,MAC1E,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,8BAA8B,YAAY,gBAAgB;AAAA,YACxE,eAAY;AAAA,YAEX;AAAA;AAAA,QACH;AAAA,QACC,UACC,oBAAC,cAAc,WAAd,EAAyB,UAAS,IAEnC,YAAY,QACZ,aAAa,MAAM,oBAAC,UAAK,WAAU,8BAA8B,UAAS;AAAA;AAAA;AAAA,EAE9E;AAEJ;","names":[]}

package/dist/chunk-36AIVLVG.cjs

@@ -0,0 +1,79 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/FloatingButton/FloatingButton.tsx
+require('react');
+var _radixui = require('radix-ui');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var floatingButtonVariants = _classvarianceauthority.cva.call(void 0, "ddga-floating-button", {
+  variants: {
+    variant: {
+      primary: "ddga-floating-button--primary",
+      black: "ddga-floating-button--black",
+      secondary: "ddga-floating-button--secondary"
+    },
+    size: {
+      sm: "ddga-floating-button--sm",
+      lg: "ddga-floating-button--lg"
+    },
+    onColor: {
+      true: "ddga-floating-button--on-color"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "lg"
+  }
+});
+function FloatingButton({
+  variant,
+  size,
+  onColor,
+  icon,
+  iconFlip,
+  asChild,
+  disabled,
+  className,
+  children,
+  type = "button",
+  ...props
+}) {
+  if (process.env.NODE_ENV === "development" && !asChild && (children == null || children === "")) {
+    if (!props["aria-label"] && !props["aria-labelledby"]) {
+      console.warn(
+        "[@dev-dga/react] An icon-only FloatingButton (no label) requires an aria-label or aria-labelledby for screen reader accessibility."
+      );
+    }
+  }
+  const Comp = asChild ? _radixui.Slot.Slot : "button";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Comp,
+    {
+      ...asChild ? {} : { type, disabled },
+      ...asChild && disabled ? { tabIndex: -1 } : {},
+      "aria-disabled": disabled || void 0,
+      "data-slot": "floating-button",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, floatingButtonVariants({ variant, size, onColor }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-floating-button__icon", iconFlip && "ddga-icon-flip"),
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
+        asChild ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Slot.Slottable, { children }) : children != null && children !== "" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-floating-button__text", children })
+      ]
+    }
+  );
+}
+
+
+
+
+exports.floatingButtonVariants = floatingButtonVariants; exports.FloatingButton = FloatingButton;
+//# sourceMappingURL=chunk-36AIVLVG.cjs.map

package/dist/chunk-36AIVLVG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-36AIVLVG.cjs","../src/components/FloatingButton/FloatingButton.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACFA,iBAA+B;AAC/B,mCAAsC;AACtC,kEAAuC;AAqEnC,+CAAA;AAlEJ,IAAM,uBAAA,EAAyB,yCAAA,sBAAI,EAAwB;AAAA,EACzD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,+BAAA;AAAA,MACT,KAAA,EAAO,6BAAA;AAAA,MACP,SAAA,EAAW;AAAA,IACb,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,0BAAA;AAAA,MACJ,EAAA,EAAI;AAAA,IACN,CAAA;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA,IACR;AAAA,EACF,CAAA;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM;AAAA,EACR;AACF,CAAC,CAAA;AAsBD,SAAS,cAAA,CAAe;AAAA,EACtB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,GAAA,CAAI,OAAA,CAAQ,GAAA,CAAI,SAAA,IAAa,cAAA,GAAiB,CAAC,QAAA,GAAA,CAAY,SAAA,GAAY,KAAA,GAAQ,SAAA,IAAa,EAAA,CAAA,EAAK;AAC/F,IAAA,GAAA,CAAI,CAAC,KAAA,CAAM,YAAY,EAAA,GAAK,CAAC,KAAA,CAAM,iBAAiB,CAAA,EAAG;AACrD,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,MAEF,CAAA;AAAA,IACF;AAAA,EACF;AAEA,EAAA,MAAM,KAAA,EAAO,QAAA,EAAU,aAAA,CAAc,KAAA,EAAO,QAAA;AAE5C,EAAA,uBACE,8BAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAI,QAAA,EAAU,CAAC,EAAA,EAAI,EAAE,IAAA,EAAM,SAAS,CAAA;AAAA,MACpC,GAAI,QAAA,GAAW,SAAA,EAAW,EAAE,QAAA,EAAU,CAAA,EAAG,EAAA,EAAI,CAAC,CAAA;AAAA,MAC/C,eAAA,EAAe,SAAA,GAAY,KAAA,CAAA;AAAA,MAC3B,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,kCAAA,sBAAG,CAAuB,EAAE,OAAA,EAAS,IAAA,EAAM,QAAQ,CAAC,CAAA,EAAG,SAAS,CAAA;AAAA,MAC1E,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,6BAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,kCAAA,4BAAG,EAA8B,SAAA,GAAY,gBAAgB,CAAA;AAAA,YACxE,aAAA,EAAY,MAAA;AAAA,YAEX,QAAA,EAAA;AAAA,UAAA;AAAA,QACH,CAAA;AAAA,QACC,QAAA,kBACC,6BAAA,aAAC,CAAc,SAAA,EAAd,EAAyB,SAAA,CAAS,EAAA,EAEnC,SAAA,GAAY,KAAA,GACZ,SAAA,IAAa,GAAA,mBAAM,6BAAA,MAAC,EAAA,EAAK,SAAA,EAAU,4BAAA,EAA8B,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAE9E,CAAA;AAEJ;ADtBA;AACA;AACE;AACA;AACF,iGAAC","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-36AIVLVG.cjs","sourcesContent":[null,"'use client';\n\nimport { type ReactNode } from 'react';\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst floatingButtonVariants = cva('ddga-floating-button', {\n  variants: {\n    variant: {\n      primary: 'ddga-floating-button--primary',\n      black: 'ddga-floating-button--black',\n      secondary: 'ddga-floating-button--secondary',\n    },\n    size: {\n      sm: 'ddga-floating-button--sm',\n      lg: 'ddga-floating-button--lg',\n    },\n    onColor: {\n      true: 'ddga-floating-button--on-color',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n    size: 'lg',\n  },\n});\n\ninterface FloatingButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof floatingButtonVariants> {\n  /** Lead action glyph, rendered at 24px (e.g. a plus for \"create\"). */\n  icon: ReactNode;\n  /**\n   * Optional label. Present → an **extended** pill (icon + label, gap 8); omit →\n   * a circular **icon-only** FAB (then provide an `aria-label`).\n   */\n  children?: ReactNode;\n  /** Flip the icon horizontally in RTL (for directional glyphs). */\n  iconFlip?: boolean;\n  /**\n   * Render as the single child element instead of a `<button>`, to compose with\n   * router links: `<FloatingButton asChild icon={…}><a href=\"…\" /></FloatingButton>`.\n   * `type` and native `disabled` are dropped; disabled then relies on\n   * `aria-disabled` + `tabIndex={-1}` (consumer must still gate the action).\n   */\n  asChild?: boolean;\n}\n\nfunction FloatingButton({\n  variant,\n  size,\n  onColor,\n  icon,\n  iconFlip,\n  asChild,\n  disabled,\n  className,\n  children,\n  type = 'button',\n  ...props\n}: FloatingButtonProps) {\n  if (process.env.NODE_ENV === 'development' && !asChild && (children == null || children === '')) {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      console.warn(\n        '[@dev-dga/react] An icon-only FloatingButton (no label) requires an ' +\n          'aria-label or aria-labelledby for screen reader accessibility.',\n      );\n    }\n  }\n\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      {...(asChild ? {} : { type, disabled })}\n      {...(asChild && disabled ? { tabIndex: -1 } : {})}\n      aria-disabled={disabled || undefined}\n      data-slot=\"floating-button\"\n      className={cn(floatingButtonVariants({ variant, size, onColor }), className)}\n      {...props}\n    >\n      <span\n        className={cn('ddga-floating-button__icon', iconFlip && 'ddga-icon-flip')}\n        aria-hidden=\"true\"\n      >\n        {icon}\n      </span>\n      {asChild ? (\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      ) : (\n        children != null &&\n        children !== '' && <span className=\"ddga-floating-button__text\">{children}</span>\n      )}\n    </Comp>\n  );\n}\n\nexport { FloatingButton, floatingButtonVariants };\nexport type { FloatingButtonProps };\n"]}

package/dist/chunk-3IEUUZKJ.cjs

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

package/dist/{chunk-G3M3XYMI.cjs.map → chunk-3IEUUZKJ.cjs.map}

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

package/dist/{chunk-AYIS62JR.cjs → chunk-3JHIEAJG.cjs}

@@ -5,10 +5,8 @@
 
 
 
-var _chunkRNOXGWKQcjs = require('./chunk-RNOXGWKQ.cjs');
 
-
-var _chunkIKWD2OENcjs = require('./chunk-IKWD2OEN.cjs');
+var _chunkA4HS7CYDcjs = require('./chunk-A4HS7CYD.cjs');
 
 
 var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
@@ -41,15 +39,21 @@ var _jsxruntime = require('react/jsx-runtime');
 var datePickerTriggerVariants = _classvarianceauthority.cva.call(void 0, "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;
@@ -75,11 +79,11 @@ function CalendarDayCell({ date, showSecondary, calendarSystem }) {
         "data-selected": isSelected ? "" : void 0,
         "data-slot": "date-picker-day-cell",
         onClick: handleSelect,
-        children: _chunkRNOXGWKQcjs.renderDayContent.call(void 0, date.day, { showSecondary, date, calendarSystem })
+        children: _chunkA4HS7CYDcjs.renderDayContent.call(void 0, date.day, { showSecondary, date, calendarSystem })
       }
     ) });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.CalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => _chunkRNOXGWKQcjs.renderDayContent.call(void 0, formattedDate, { showSecondary, date, calendarSystem }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.CalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => _chunkA4HS7CYDcjs.renderDayContent.call(void 0, formattedDate, { showSecondary, date, calendarSystem }) });
 }
 function DatePicker({
   value: controlledValue,
@@ -93,7 +97,9 @@ function DatePicker({
   error,
   required,
   disabled,
+  readOnly,
   size,
+  variant,
   id,
   className,
   "aria-label": ariaLabel,
@@ -107,14 +113,14 @@ function DatePicker({
 }) {
   const isValueControlled = controlledValue !== void 0;
   const [internalValue, setInternalValue] = _react.useState.call(void 0, 
-    () => _chunkRNOXGWKQcjs.dateToCalendarDate.call(void 0, defaultValue)
+    () => _chunkA4HS7CYDcjs.dateToCalendarDate.call(void 0, defaultValue)
   );
-  const value = isValueControlled ? _chunkRNOXGWKQcjs.dateToCalendarDate.call(void 0, controlledValue) : internalValue;
+  const value = isValueControlled ? _chunkA4HS7CYDcjs.dateToCalendarDate.call(void 0, controlledValue) : internalValue;
   const handleAriaChange = _react.useCallback.call(void 0, 
     (next) => {
       const nextCD = next ? new (0, _date.CalendarDate)(next.year, next.month, next.day) : null;
       if (!isValueControlled) setInternalValue(nextCD);
-      _optionalChain([onChange, 'optionalCall', _3 => _3(_chunkRNOXGWKQcjs.calendarDateToDate.call(void 0, nextCD))]);
+      _optionalChain([onChange, 'optionalCall', _3 => _3(_chunkA4HS7CYDcjs.calendarDateToDate.call(void 0, nextCD))]);
     },
     [isValueControlled, onChange]
   );
@@ -132,14 +138,15 @@ function DatePicker({
     dgaLocale,
     locale: ariaLocale,
     portalContainer,
-    PrevChevron,
-    NextChevron,
+    PrevArrow,
+    NextArrow,
     resolvedLabels,
     navLabels,
     a11yLabels
-  } = _chunkRNOXGWKQcjs.useCalendarChrome.call(void 0, calendarSystem, calendarLabels);
-  const ariaMinValue = _react.useMemo.call(void 0, () => _nullishCoalesce(_chunkRNOXGWKQcjs.dateToCalendarDate.call(void 0, minValue), () => ( void 0)), [minValue]);
-  const ariaMaxValue = _react.useMemo.call(void 0, () => _nullishCoalesce(_chunkRNOXGWKQcjs.dateToCalendarDate.call(void 0, maxValue), () => ( void 0)), [maxValue]);
+  } = _chunkA4HS7CYDcjs.useCalendarChrome.call(void 0, calendarSystem, calendarLabels);
+  const { pressed, pressHandlers } = _chunkA4HS7CYDcjs.usePressedState.call(void 0, );
+  const ariaMinValue = _react.useMemo.call(void 0, () => _nullishCoalesce(_chunkA4HS7CYDcjs.dateToCalendarDate.call(void 0, minValue), () => ( void 0)), [minValue]);
+  const ariaMaxValue = _react.useMemo.call(void 0, () => _nullishCoalesce(_chunkA4HS7CYDcjs.dateToCalendarDate.call(void 0, maxValue), () => ( void 0)), [maxValue]);
   const dialogAriaLabel = _nullishCoalesce(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;
@@ -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({
           _reactariacomponents.Group,
           {
             "data-slot": "date-picker-trigger",
-            className: _chunkV6MXOJQ4cjs.cn.call(void 0, datePickerTriggerVariants({ size, error: hasError }), className),
+            "data-readonly": readOnly ? "" : void 0,
+            "data-pressed": pressed ? "" : void 0,
+            ...pressHandlers,
+            className: _chunkV6MXOJQ4cjs.cn.call(void 0, datePickerTriggerVariants({ size, variant, error: hasError }), className),
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.DateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _reactariacomponents.DateSegment,
@@ -183,10 +194,9 @@ function DatePicker({
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _reactariacomponents.Button,
                 {
-                  className: "ddga-date-picker__icon-button",
+                  className: "ddga-date-picker__open",
                   "aria-label": a11yLabels.openCalendar,
-                  "data-slot": "date-picker-trigger-button",
-                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIKWD2OENcjs.CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
+                  "data-slot": "date-picker-trigger-button"
                 }
               )
             ]
@@ -226,7 +236,7 @@ function DatePicker({
                 "aria-labelledby": ariaLabelledBy,
                 children: [
                   showToggle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkRNOXGWKQcjs.CalendarSystemToggle,
+                    _chunkA4HS7CYDcjs.CalendarSystemToggle,
                     {
                       value: calendarSystem,
                       onChange: setCalendar,
@@ -237,33 +247,35 @@ function DatePicker({
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactariacomponents.Calendar, { className: "ddga-calendar", "data-slot": "date-picker-calendar", children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "header", { className: "ddga-calendar__header", children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _reactariacomponents.Button,
-                        {
-                          slot: "previous",
-                          className: "ddga-calendar__nav",
-                          "data-slot": "date-picker-calendar-prev",
-                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PrevChevron, { "aria-hidden": "true" })
-                        }
-                      ),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkRNOXGWKQcjs.CalendarNavHeader,
+                        _chunkA4HS7CYDcjs.CalendarNavHeader,
                         {
                           locale: ariaLocale,
                           monthLabel: navLabels.month,
                           yearLabel: navLabels.year
                         }
                       ),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _reactariacomponents.Button,
-                        {
-                          slot: "next",
-                          className: "ddga-calendar__nav",
-                          "data-slot": "date-picker-calendar-next",
-                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NextChevron, { "aria-hidden": "true" })
-                        }
-                      )
+                      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-calendar__nav-group", children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _reactariacomponents.Button,
+                          {
+                            slot: "previous",
+                            className: "ddga-calendar__nav",
+                            "data-slot": "date-picker-calendar-prev",
+                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PrevArrow, { "aria-hidden": "true" })
+                          }
+                        ),
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          _reactariacomponents.Button,
+                          {
+                            slot: "next",
+                            className: "ddga-calendar__nav",
+                            "data-slot": "date-picker-calendar-next",
+                            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NextArrow, { "aria-hidden": "true" })
+                          }
+                        )
+                      ] })
                     ] }),
-                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactariacomponents.CalendarGrid, { className: "ddga-calendar__grid", children: [
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactariacomponents.CalendarGrid, { className: "ddga-calendar__grid", weekdayStyle: "short", children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.CalendarGridHeader, { children: (day) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.CalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.CalendarGridBody, { children: (date) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         CalendarDayCell,
@@ -290,4 +302,4 @@ function DatePicker({
 
 
 exports.datePickerTriggerVariants = datePickerTriggerVariants; exports.datePickerVariants = datePickerVariants; exports.DatePicker = DatePicker;
-//# sourceMappingURL=chunk-AYIS62JR.cjs.map
+//# sourceMappingURL=chunk-3JHIEAJG.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3JHIEAJG.cjs","../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3JHIEAJG.cjs","sourcesContent":[null,"'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"]}

package/dist/chunk-3UT22WQM.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/field/FieldMessage.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function FieldMessage({ id, variant, icon, children }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "p",
+    {
+      id,
+      "data-slot": `field-${variant}`,
+      className: `ddga-field__message ddga-field__message--${variant}${icon ? " ddga-field__message--with-icon" : ""}`,
+      "aria-live": variant === "error" ? "polite" : void 0,
+      children: [
+        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", className: "ddga-field__message-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+
+
+
+exports.FieldMessage = FieldMessage;
+//# sourceMappingURL=chunk-3UT22WQM.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3UT22WQM.cjs","../src/field/FieldMessage.tsx"],"names":[],"mappings":"AAAA;ACkBI,+CAAA;AAFG,SAAS,YAAA,CAAa,EAAE,EAAA,EAAI,OAAA,EAAS,IAAA,EAAM,SAAS,CAAA,EAAsB;AAC/E,EAAA,uBACE,8BAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAA,EAAW,CAAA,MAAA,EAAS,OAAO,CAAA,CAAA;AAChB,MAAA;AAKY,MAAA;AAEtB,MAAA;AACE,QAAA;AAIF,QAAA;AAAA,MAAA;AAAA,IAAA;AACH,EAAA;AAEJ;ADnBoC;AACA;AACA;AACA","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-3UT22WQM.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\n\n// Public field-primitive component. The helper / error line below a form\n// control. Identical markup and styling across Input / Textarea / Checkbox,\n// and available to consumers composing custom fields on top of useFieldA11y.\n// No 'use client': pure markup, no hooks or client APIs.\n\nexport interface FieldMessageProps {\n  id: string;\n  /** `error` announces politely; `helper` is static. */\n  variant: 'error' | 'helper';\n  /** Optional 16px leading feedback icon (SDGA helper/error glyph). */\n  icon?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FieldMessage({ id, variant, icon, children }: FieldMessageProps) {\n  return (\n    <p\n      id={id}\n      data-slot={`field-${variant}`}\n      className={`ddga-field__message ddga-field__message--${variant}${\n        icon ? ' ddga-field__message--with-icon' : ''\n      }`}\n      // Polite (not assertive): an assertive error interrupts the user\n      // mid-interaction, the wrong UX for field-level validation.\n      aria-live={variant === 'error' ? 'polite' : undefined}\n    >\n      {icon && (\n        <span aria-hidden=\"true\" className=\"ddga-field__message-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </p>\n  );\n}\n"]}

package/dist/chunk-42MOUC3M.cjs

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