@dev-dga/react 0.11.0 → 0.12.1

package/dist/{chunk-MCHL23CE.js → chunk-P7XKSXHH.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";
@@ -40,15 +38,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var dateRangePickerTriggerVariants = cva("ddga-date-range-picker-trigger", {
   variants: {
     size: {
-      sm: "ddga-date-range-picker-trigger--sm",
-      md: "ddga-date-range-picker-trigger--md"
+      md: "ddga-date-range-picker-trigger--md",
+      lg: "ddga-date-range-picker-trigger--lg"
+    },
+    variant: {
+      default: "ddga-date-range-picker-trigger--default",
+      "filled-lighter": "ddga-date-range-picker-trigger--filled-lighter",
+      "filled-darker": "ddga-date-range-picker-trigger--filled-darker"
     },
     error: {
       true: "ddga-date-range-picker-trigger--error"
     }
   },
   defaultVariants: {
-    size: "md"
+    size: "lg",
+    variant: "default"
   }
 });
 var dateRangePickerVariants = dateRangePickerTriggerVariants;
@@ -78,7 +82,9 @@ function DateRangePicker({
   error,
   required,
   disabled,
+  readOnly,
   size,
+  variant,
   id,
   className,
   "aria-label": ariaLabel,
@@ -120,12 +126,13 @@ function DateRangePicker({
     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") ? "\u0646\u0637\u0627\u0642 \u0627\u0644\u062A\u0627\u0631\u064A\u062E" : "Date range");
@@ -142,6 +149,7 @@ function DateRangePicker({
       maxValue: ariaMaxValue,
       isRequired: required,
       isDisabled: disabled,
+      isReadOnly: readOnly,
       isInvalid: hasError,
       shouldCloseOnSelect: true,
       id,
@@ -158,7 +166,13 @@ function DateRangePicker({
           AriaGroup,
           {
             "data-slot": "date-range-picker-trigger",
-            className: cn(dateRangePickerTriggerVariants({ size, error: hasError }), className),
+            "data-readonly": readOnly ? "" : void 0,
+            "data-pressed": pressed ? "" : void 0,
+            ...pressHandlers,
+            className: cn(
+              dateRangePickerTriggerVariants({ size, variant, error: hasError }),
+              className
+            ),
             children: [
               /* @__PURE__ */ jsx(
                 AriaDateInput,
@@ -196,10 +210,9 @@ function DateRangePicker({
               /* @__PURE__ */ jsx(
                 AriaButton,
                 {
-                  className: "ddga-date-range-picker__icon-button",
+                  className: "ddga-date-range-picker__open",
                   "aria-label": a11yLabels.openCalendar,
-                  "data-slot": "date-range-picker-trigger-button",
-                  children: /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-range-picker__icon" })
+                  "data-slot": "date-range-picker-trigger-button"
                 }
               )
             ]
@@ -254,15 +267,6 @@ function DateRangePicker({
                       "data-slot": "date-range-picker-calendar",
                       children: [
                         /* @__PURE__ */ jsxs("header", { className: "ddga-calendar__header", children: [
-                          /* @__PURE__ */ jsx(
-                            AriaButton,
-                            {
-                              slot: "previous",
-                              className: "ddga-calendar__nav",
-                              "data-slot": "date-range-picker-calendar-prev",
-                              children: /* @__PURE__ */ jsx(PrevChevron, { "aria-hidden": "true" })
-                            }
-                          ),
                           /* @__PURE__ */ jsx(
                             CalendarNavHeader,
                             {
@@ -271,17 +275,28 @@ function DateRangePicker({
                               yearLabel: navLabels.year
                             }
                           ),
-                          /* @__PURE__ */ jsx(
-                            AriaButton,
-                            {
-                              slot: "next",
-                              className: "ddga-calendar__nav",
-                              "data-slot": "date-range-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-range-picker-calendar-prev",
+                                children: /* @__PURE__ */ jsx(PrevArrow, { "aria-hidden": "true" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              AriaButton,
+                              {
+                                slot: "next",
+                                className: "ddga-calendar__nav",
+                                "data-slot": "date-range-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(AriaCalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, {
                             showSecondary: showSecondaryCalendar,
@@ -307,4 +322,4 @@ export {
   dateRangePickerVariants,
   DateRangePicker
 };
-//# sourceMappingURL=chunk-MCHL23CE.js.map
+//# sourceMappingURL=chunk-P7XKSXHH.js.map

package/dist/chunk-P7XKSXHH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState, type ReactNode } from 'react';\nimport {\n  Button as AriaButton,\n  CalendarCell as AriaCalendarCell,\n  CalendarGrid as AriaCalendarGrid,\n  CalendarGridBody as AriaCalendarGridBody,\n  CalendarGridHeader as AriaCalendarGridHeader,\n  CalendarHeaderCell as AriaCalendarHeaderCell,\n  DateInput as AriaDateInput,\n  DateRangePicker as AriaDateRangePicker,\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  RangeCalendar as AriaRangeCalendar,\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). Range triggers hold more by content\n// (two date inputs + separator), but heights still match Input/Select sm/md so\n// they line up in a form row.\nconst dateRangePickerTriggerVariants = cva('ddga-date-range-picker-trigger', {\n  variants: {\n    size: {\n      md: 'ddga-date-range-picker-trigger--md',\n      lg: 'ddga-date-range-picker-trigger--lg',\n    },\n    variant: {\n      default: 'ddga-date-range-picker-trigger--default',\n      'filled-lighter': 'ddga-date-range-picker-trigger--filled-lighter',\n      'filled-darker': 'ddga-date-range-picker-trigger--filled-darker',\n    },\n    error: {\n      true: 'ddga-date-range-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 components.\nconst dateRangePickerVariants = dateRangePickerTriggerVariants;\n\n// ─── 2. Types ─── //\n\n/** A complete, inclusive date range. Both ends are local Y/M/D. */\ninterface DateRange {\n  start: Date;\n  end: Date;\n}\n\ninterface DateRangePickerProps extends VariantProps<typeof dateRangePickerTriggerVariants> {\n  /** Currently selected range (controlled). `null` clears it. */\n  value?: DateRange | null;\n  /** Initial range when uncontrolled. */\n  defaultValue?: DateRange | null;\n  /** Fires when a complete range is picked, or `null` when cleared. */\n  onChange?: (value: DateRange | 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  /** Calendar system (controlled). Omit to let the user toggle freely. */\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`, but\n   * is forced off when `calendar` is controlled.\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 as\n   * small secondary text. Helps cross-reference Hijri↔Gregorian. Default `false`.\n   */\n  showSecondaryCalendar?: boolean;\n}\n\n// react-aria's range value is { start, end } of CalendarDate. We keep our public\n// contract Date-based and round-trip through Gregorian CalendarDates so the Hijri\n// toggle is purely a display concern (same engine as DatePicker).\ntype AriaDateRange = { start: CalendarDate; end: CalendarDate } | null;\n\nfunction toAriaRange(range: DateRange | null | undefined): AriaDateRange {\n  if (!range) return null;\n  const start = dateToCalendarDate(range.start);\n  const end = dateToCalendarDate(range.end);\n  if (!start || !end) return null;\n  return { start, end };\n}\n\nfunction fromAriaRange(value: { start: DateValue; end: DateValue } | null): DateRange | null {\n  if (!value) return null;\n  const start = calendarDateToDate(value.start);\n  const end = calendarDateToDate(value.end);\n  if (!start || !end) return null;\n  return { start, end };\n}\n\n// ─── 3. Component ─── //\n\nfunction DateRangePicker({\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}: DateRangePickerProps) {\n  // ─ value: controlled or uncontrolled, always Gregorian internally ─\n  const isValueControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState<AriaDateRange>(() =>\n    toAriaRange(defaultValue),\n  );\n  const value = isValueControlled ? toAriaRange(controlledValue) : internalValue;\n\n  const handleAriaChange = useCallback(\n    (next: { start: DateValue; end: DateValue } | null) => {\n      // Normalize to plain Gregorian CalendarDates so internal state never holds\n      // a Hijri-flavored CalendarDate (display calendar must not leak into value).\n      const nextRange: AriaDateRange = next\n        ? {\n            start: new CalendarDate(next.start.year, next.start.month, next.start.day),\n            end: new CalendarDate(next.end.year, next.end.month, next.end.day),\n          }\n        : null;\n      if (!isValueControlled) setInternalValue(nextRange);\n      onChange?.(fromAriaRange(nextRange));\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 (Dialog needs an accessible name) ─\n  const dialogAriaLabel =\n    ariaLabel ??\n    (typeof label === 'string'\n      ? label\n      : ariaLabelledBy\n        ? undefined\n        : dgaLocale.startsWith('ar')\n          ? 'نطاق التاريخ'\n          : 'Date range');\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      <AriaDateRangePicker\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-range-picker-field\"\n      >\n        {label && (\n          <AriaLabel className=\"ddga-date-range-picker__label\">\n            {label}\n            {required && (\n              <span aria-hidden=\"true\" className=\"ddga-date-range-picker__required\">\n                *\n              </span>\n            )}\n          </AriaLabel>\n        )}\n        <AriaGroup\n          data-slot=\"date-range-picker-trigger\"\n          data-readonly={readOnly ? '' : undefined}\n          data-pressed={pressed ? '' : undefined}\n          {...pressHandlers}\n          className={cn(\n            dateRangePickerTriggerVariants({ size, variant, error: hasError }),\n            className,\n          )}\n        >\n          <AriaDateInput\n            slot=\"start\"\n            className=\"ddga-date-range-picker__input\"\n            data-slot=\"date-range-picker-input-start\"\n          >\n            {(segment) => (\n              <AriaDateSegment\n                segment={segment}\n                className=\"ddga-date-range-picker__segment\"\n                data-slot=\"date-range-picker-segment\"\n              />\n            )}\n          </AriaDateInput>\n          <span aria-hidden=\"true\" className=\"ddga-date-range-picker__separator\">\n            –\n          </span>\n          <AriaDateInput\n            slot=\"end\"\n            className=\"ddga-date-range-picker__input\"\n            data-slot=\"date-range-picker-input-end\"\n          >\n            {(segment) => (\n              <AriaDateSegment\n                segment={segment}\n                className=\"ddga-date-range-picker__segment\"\n                data-slot=\"date-range-picker-segment\"\n              />\n            )}\n          </AriaDateInput>\n          {/* SDGA range field has no calendar icon — the iconless button is the\n              click surface filling the trailing space; segments stay editable. */}\n          <AriaButton\n            className=\"ddga-date-range-picker__open\"\n            aria-label={a11yLabels.openCalendar}\n            data-slot=\"date-range-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-range-picker-popover\"\n          offset={6}\n          // Breathing room from the viewport edge; with the Dialog's\n          // `overflow:auto` + `max-block-size:100%`, the calendar scrolls if it\n          // can't fit. Mirrors DatePicker — keep both pickers in lockstep.\n          containerPadding={12}\n        >\n          <AriaDialog\n            className=\"ddga-calendar-dialog\"\n            data-slot=\"date-range-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            <AriaRangeCalendar\n              className=\"ddga-calendar ddga-calendar--range\"\n              data-slot=\"date-range-picker-calendar\"\n            >\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-range-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-range-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                    <AriaCalendarCell date={date} className=\"ddga-calendar__cell\">\n                      {({ formattedDate }) =>\n                        renderDayContent(formattedDate, {\n                          showSecondary: showSecondaryCalendar,\n                          date,\n                          calendarSystem,\n                        })\n                      }\n                    </AriaCalendarCell>\n                  )}\n                </AriaCalendarGridBody>\n              </AriaCalendarGrid>\n            </AriaRangeCalendar>\n          </AriaDialog>\n        </AriaPopover>\n      </AriaDateRangePicker>\n    </I18nProvider>\n  );\n}\n\n// ─── 4. Exports ─── //\n\nexport { DateRangePicker, dateRangePickerTriggerVariants, dateRangePickerVariants };\nexport type { DateRangePickerProps, DateRange };\n// Re-exported for symmetry with DatePicker so the component file is\n// self-contained. The public barrel exposes these once via DatePicker (the\n// canonical owner) to avoid a duplicate export.\nexport type { CalendarSystem, CalendarLabels } from '../../internal/calendar';\n"],"mappings":"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","names":[]}

package/dist/chunk-PLLUSKME.cjs

@@ -0,0 +1,95 @@
+"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 _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/Notification/Notification.tsx
+var _react = require('react');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var notificationVariants = _classvarianceauthority.cva.call(void 0, "ddga-notification", {
+  variants: {
+    type: {
+      neutral: "ddga-notification--neutral",
+      info: "ddga-notification--info",
+      success: "ddga-notification--success",
+      warning: "ddga-notification--warning",
+      critical: "ddga-notification--critical"
+    }
+  },
+  defaultVariants: { type: "neutral" }
+});
+var DEFAULT_ICONS = {
+  neutral: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.InfoCircleFeatured, { "aria-hidden": "true" }),
+  info: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.InfoCircleFeatured, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.CheckCircleFeatured, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.AlertTriangleFeatured, { "aria-hidden": "true" }),
+  critical: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.AlertCircleFeatured, { "aria-hidden": "true" })
+};
+function Notification({
+  type,
+  lead,
+  icon,
+  actions,
+  onClose,
+  open: controlledOpen,
+  closeLabel = "Dismiss",
+  live,
+  className,
+  children,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = _react.useState.call(void 0, true);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  if (!open) return null;
+  const resolvedIcon = icon === false ? null : _nullishCoalesce(icon, () => ( DEFAULT_ICONS[_nullishCoalesce(type, () => ( "neutral"))]));
+  const liveProps = live === "assertive" ? { role: "alert", "aria-live": "assertive" } : live === "polite" ? { role: "status", "aria-live": "polite" } : {};
+  function handleClose() {
+    if (!isControlled) setInternalOpen(false);
+    _optionalChain([onClose, 'optionalCall', _ => _()]);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "notification",
+      "data-type": _nullishCoalesce(type, () => ( "neutral")),
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, notificationVariants({ type }), className),
+      ...liveProps,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-notification__title", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ddga-notification__content", children: [
+            resolvedIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-notification__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+            lead ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-notification__lead", "data-slot": "notification-lead", children: lead }) : null,
+            children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "ddga-notification__message", "data-slot": "notification-message", children }) : null,
+            actions ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ddga-notification__actions", "data-slot": "notification-actions", children: actions }) : null
+          ] }),
+          onClose ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              className: "ddga-notification__close",
+              "aria-label": closeLabel,
+              onClick: handleClose,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.CloseSolid, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-notification__line", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+
+
+
+exports.notificationVariants = notificationVariants; exports.Notification = Notification;
+//# sourceMappingURL=chunk-PLLUSKME.cjs.map

package/dist/chunk-PLLUSKME.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-PLLUSKME.cjs","../src/components/Notification/Notification.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-PLLUSKME.cjs","sourcesContent":[null,"'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  AlertCircleFeatured,\n  AlertTriangleFeatured,\n  CheckCircleFeatured,\n  InfoCircleFeatured,\n  CloseSolid,\n} from '../../internal/icons';\n\nconst notificationVariants = cva('ddga-notification', {\n  variants: {\n    type: {\n      neutral: 'ddga-notification--neutral',\n      info: 'ddga-notification--info',\n      success: 'ddga-notification--success',\n      warning: 'ddga-notification--warning',\n      critical: 'ddga-notification--critical',\n    },\n  },\n  defaultVariants: { type: 'neutral' },\n});\n\ntype NotificationType = NonNullable<VariantProps<typeof notificationVariants>['type']>;\n\nconst DEFAULT_ICONS: Record<NotificationType, ReactNode> = {\n  neutral: <InfoCircleFeatured aria-hidden=\"true\" />,\n  info: <InfoCircleFeatured aria-hidden=\"true\" />,\n  success: <CheckCircleFeatured aria-hidden=\"true\" />,\n  warning: <AlertTriangleFeatured aria-hidden=\"true\" />,\n  critical: <AlertCircleFeatured aria-hidden=\"true\" />,\n};\n\ninterface NotificationProps\n  extends React.ComponentProps<'div'>, VariantProps<typeof notificationVariants> {\n  /** The message body — always present per SDGA (the one required content). */\n  children: ReactNode;\n  /** Bold lead-in shown before the message, e.g. `\"Important:\"`. */\n  lead?: ReactNode;\n  /** Featured leading icon. Pass `false` to hide it; defaults to the type's glyph. */\n  icon?: ReactNode | false;\n  /**\n   * Trailing action row — compose `<Link tone=\"neutral\">` and/or\n   * `<Button variant=\"black\" size=\"md\">` (the exact SDGA action variants).\n   */\n  actions?: ReactNode;\n  /** Provide to render the trailing ✕ and make the banner dismissible. */\n  onClose?: () => void;\n  /** Controlled visibility. Pair with `onClose` to own the state yourself. */\n  open?: boolean;\n  /** Localized close-button label. Defaults to `\"Dismiss\"`. */\n  closeLabel?: string;\n  /**\n   * Wire the banner into the a11y tree as a live region. `polite` (role=status)\n   * announces gracefully; `assertive` (role=alert) interrupts. Omit for static banners.\n   */\n  live?: 'polite' | 'assertive';\n}\n\nfunction Notification({\n  type,\n  lead,\n  icon,\n  actions,\n  onClose,\n  open: controlledOpen,\n  closeLabel = 'Dismiss',\n  live,\n  className,\n  children,\n  ...props\n}: NotificationProps) {\n  const [internalOpen, setInternalOpen] = useState(true);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n\n  if (!open) return null;\n\n  const resolvedIcon = icon === false ? null : (icon ?? DEFAULT_ICONS[type ?? 'neutral']);\n\n  const liveProps =\n    live === 'assertive'\n      ? { role: 'alert' as const, 'aria-live': 'assertive' as const }\n      : live === 'polite'\n        ? { role: 'status' as const, 'aria-live': 'polite' as const }\n        : {};\n\n  function handleClose() {\n    if (!isControlled) setInternalOpen(false);\n    onClose?.();\n  }\n\n  return (\n    <div\n      data-slot=\"notification\"\n      data-type={type ?? 'neutral'}\n      className={cn(notificationVariants({ type }), className)}\n      {...liveProps}\n      {...props}\n    >\n      <div className=\"ddga-notification__title\">\n        <div className=\"ddga-notification__content\">\n          {resolvedIcon ? (\n            <span className=\"ddga-notification__icon\" aria-hidden=\"true\">\n              {resolvedIcon}\n            </span>\n          ) : null}\n          {lead ? (\n            <span className=\"ddga-notification__lead\" data-slot=\"notification-lead\">\n              {lead}\n            </span>\n          ) : null}\n          {children ? (\n            <p className=\"ddga-notification__message\" data-slot=\"notification-message\">\n              {children}\n            </p>\n          ) : null}\n          {actions ? (\n            <div className=\"ddga-notification__actions\" data-slot=\"notification-actions\">\n              {actions}\n            </div>\n          ) : null}\n        </div>\n        {onClose ? (\n          <button\n            type=\"button\"\n            className=\"ddga-notification__close\"\n            aria-label={closeLabel}\n            onClick={handleClose}\n          >\n            <CloseSolid aria-hidden=\"true\" />\n          </button>\n        ) : null}\n      </div>\n      <span className=\"ddga-notification__line\" aria-hidden=\"true\" />\n    </div>\n  );\n}\n\nexport { Notification, notificationVariants };\nexport type { NotificationProps };\n"]}

package/dist/chunk-PLT3EZZ5.js

@@ -0,0 +1,194 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  MoreHorizontal
+} from "./chunk-FFGALWM2.js";
+import {
+  DgaContext
+} from "./chunk-TMXABSFE.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Pagination/Pagination.tsx
+import { Slot as SlotPrimitive, DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { useContext } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var paginationVariants = cva("ddga-pagination", {
+  variants: {
+    size: {
+      sm: "ddga-pagination--sm",
+      md: "ddga-pagination--md",
+      lg: "ddga-pagination--lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var paginationLinkVariants = cva("ddga-pagination__link", {
+  variants: {
+    isActive: {
+      true: "ddga-pagination__link--active"
+    }
+  }
+});
+function Pagination({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn(paginationVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("ddga-pagination__content", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", className: cn("ddga-pagination__item", className), ...props });
+}
+function PaginationLink({
+  asChild,
+  isActive,
+  className,
+  tabIndex,
+  "aria-disabled": ariaDisabled,
+  ...props
+}) {
+  const Comp = asChild ? SlotPrimitive.Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "aria-disabled": ariaDisabled,
+      tabIndex: ariaDisabled ? -1 : tabIndex,
+      "data-slot": "pagination-link",
+      "data-active": isActive ? "" : void 0,
+      className: cn(paginationLinkVariants({ isActive }), className),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({
+  label = "Previous",
+  className,
+  children,
+  asChild,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      asChild,
+      "aria-label": label,
+      "data-slot": "pagination-previous",
+      className: cn("ddga-pagination__nav", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ArrowLeft, { className: "ddga-pagination__nav-icon", "aria-hidden": "true" })
+    }
+  );
+}
+function PaginationNext({
+  label = "Next",
+  className,
+  children,
+  asChild,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      asChild,
+      "aria-label": label,
+      "data-slot": "pagination-next",
+      className: cn("ddga-pagination__nav", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ArrowRight, { className: "ddga-pagination__nav-icon", "aria-hidden": "true" })
+    }
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      "data-slot": "pagination-ellipsis",
+      className: cn("ddga-pagination__ellipsis", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ddga-pagination__ellipsis-icon" })
+    }
+  );
+}
+function PaginationOverflow({
+  pages,
+  current,
+  onSelect,
+  label = "More pages",
+  className,
+  ...rest
+}) {
+  const ctx = useContext(DgaContext);
+  const container = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        "data-slot": "pagination-overflow",
+        className: cn("ddga-pagination__link", "ddga-pagination__overflow", className),
+        ...rest,
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "ddga-pagination__ellipsis-icon", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
+      DropdownMenuPrimitive.Content,
+      {
+        "data-slot": "pagination-menu",
+        align: "start",
+        sideOffset: 4,
+        className: "ddga-pagination__menu",
+        children: pages.map((page) => /* @__PURE__ */ jsxs(
+          DropdownMenuPrimitive.Item,
+          {
+            "aria-current": page === current ? "page" : void 0,
+            className: "ddga-pagination__menu-item",
+            onSelect: () => onSelect(page),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ddga-pagination__menu-label", children: page }),
+              page === current ? /* @__PURE__ */ jsx(Check, { className: "ddga-pagination__menu-check", "aria-hidden": "true" }) : null
+            ]
+          },
+          page
+        ))
+      }
+    ) })
+  ] });
+}
+
+export {
+  paginationVariants,
+  paginationLinkVariants,
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  PaginationOverflow
+};
+//# sourceMappingURL=chunk-PLT3EZZ5.js.map

package/dist/chunk-PLT3EZZ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { Slot as SlotPrimitive, DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\nimport { useContext } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { ArrowLeft, ArrowRight, Check, MoreHorizontal } from '../../internal/icons';\nimport { DgaContext } from '../../providers/DgaContext';\n\nconst paginationVariants = cva('ddga-pagination', {\n  variants: {\n    size: {\n      sm: 'ddga-pagination--sm',\n      md: 'ddga-pagination--md',\n      lg: 'ddga-pagination--lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst paginationLinkVariants = cva('ddga-pagination__link', {\n  variants: {\n    isActive: {\n      true: 'ddga-pagination__link--active',\n    },\n  },\n});\n\ninterface PaginationProps\n  extends React.ComponentProps<'nav'>, VariantProps<typeof paginationVariants> {}\n\ntype PaginationContentProps = React.ComponentProps<'ul'>;\ntype PaginationItemProps = React.ComponentProps<'li'>;\n\ninterface PaginationLinkProps\n  extends\n    Omit<React.ComponentProps<'a'>, 'aria-current'>,\n    VariantProps<typeof paginationLinkVariants> {\n  /** Render as the consumer element (e.g., router Link) via Radix Slot. */\n  asChild?: boolean;\n}\n\ntype PaginationNavProps = Omit<PaginationLinkProps, 'isActive'> & {\n  /**\n   * Accessible label for the icon-only button — also drives `aria-label` (the\n   * arrow has no visible text). Pass a translated string for non-English UIs.\n   * Ignored when `asChild` + consumer-provided `children` are used.\n   */\n  label?: string;\n};\n\ntype PaginationEllipsisProps = React.ComponentProps<'span'>;\n\ninterface PaginationOverflowProps extends Omit<React.ComponentProps<'button'>, 'onSelect'> {\n  /** The collapsed page numbers to list in the jump-to-page menu. */\n  pages: number[];\n  /** Current page — marked with `aria-current` + a trailing check. */\n  current?: number;\n  /** Called with the chosen page number. */\n  onSelect: (page: number) => void;\n  /** Accessible label for the trigger. Defaults to `\"More pages\"`. */\n  label?: string;\n}\n\nfunction Pagination({ size, className, ...props }: PaginationProps) {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(paginationVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn('ddga-pagination__content', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem({ className, ...props }: PaginationItemProps) {\n  return (\n    <li data-slot=\"pagination-item\" className={cn('ddga-pagination__item', className)} {...props} />\n  );\n}\n\nfunction PaginationLink({\n  asChild,\n  isActive,\n  className,\n  tabIndex,\n  'aria-disabled': ariaDisabled,\n  ...props\n}: PaginationLinkProps) {\n  // `isActive` is the single source of truth for both the visual state and\n  // the `aria-current=\"page\"` mark — they can't drift apart.\n  const Comp = asChild ? SlotPrimitive.Slot : 'a';\n  return (\n    <Comp\n      aria-current={isActive ? 'page' : undefined}\n      aria-disabled={ariaDisabled}\n      // pointer-events:none blocks the mouse; also drop it from the tab order so a\n      // keyboard user can't focus + Enter-activate a \"disabled\" prev/next (mirrors Link).\n      tabIndex={ariaDisabled ? -1 : tabIndex}\n      data-slot=\"pagination-link\"\n      data-active={isActive ? '' : undefined}\n      className={cn(paginationLinkVariants({ isActive }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({\n  label = 'Previous',\n  className,\n  children,\n  asChild,\n  ...props\n}: PaginationNavProps) {\n  return (\n    <PaginationLink\n      asChild={asChild}\n      aria-label={label}\n      data-slot=\"pagination-previous\"\n      className={cn('ddga-pagination__nav', className)}\n      {...props}\n    >\n      {children ?? <ArrowLeft className=\"ddga-pagination__nav-icon\" aria-hidden=\"true\" />}\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({\n  label = 'Next',\n  className,\n  children,\n  asChild,\n  ...props\n}: PaginationNavProps) {\n  return (\n    <PaginationLink\n      asChild={asChild}\n      aria-label={label}\n      data-slot=\"pagination-next\"\n      className={cn('ddga-pagination__nav', className)}\n      {...props}\n    >\n      {children ?? <ArrowRight className=\"ddga-pagination__nav-icon\" aria-hidden=\"true\" />}\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  // Static, decorative collapsed-range marker (the SDGA bordered \"…\" box). For\n  // the interactive jump-to-page menu, use `PaginationOverflow` instead.\n  return (\n    <span\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-slot=\"pagination-ellipsis\"\n      className={cn('ddga-pagination__ellipsis', className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"ddga-pagination__ellipsis-icon\" />\n    </span>\n  );\n}\n\nfunction PaginationOverflow({\n  pages,\n  current,\n  onSelect,\n  label = 'More pages',\n  className,\n  ...rest\n}: PaginationOverflowProps) {\n  // SDGA's \"Opened\" overflow: the bordered \"…\" box is a dropdown trigger that\n  // lists the collapsed pages (check on current). Built on the Radix primitive\n  // (not the house DropdownMenu) so the panel pixel-matches the SDGA menu chrome;\n  // portal-anchored to the DgaProvider root so it inherits theme + direction.\n  const ctx = useContext(DgaContext);\n  const container = ctx?.portalEl ?? ctx?.rootEl ?? undefined;\n  return (\n    <DropdownMenuPrimitive.Root>\n      <DropdownMenuPrimitive.Trigger asChild>\n        <button\n          type=\"button\"\n          aria-label={label}\n          data-slot=\"pagination-overflow\"\n          className={cn('ddga-pagination__link', 'ddga-pagination__overflow', className)}\n          {...rest}\n        >\n          <MoreHorizontal className=\"ddga-pagination__ellipsis-icon\" aria-hidden=\"true\" />\n        </button>\n      </DropdownMenuPrimitive.Trigger>\n      <DropdownMenuPrimitive.Portal container={container}>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"pagination-menu\"\n          align=\"start\"\n          sideOffset={4}\n          className=\"ddga-pagination__menu\"\n        >\n          {pages.map((page) => (\n            <DropdownMenuPrimitive.Item\n              key={page}\n              aria-current={page === current ? 'page' : undefined}\n              className=\"ddga-pagination__menu-item\"\n              onSelect={() => onSelect(page)}\n            >\n              <span className=\"ddga-pagination__menu-label\">{page}</span>\n              {page === current ? (\n                <Check className=\"ddga-pagination__menu-check\" aria-hidden=\"true\" />\n              ) : null}\n            </DropdownMenuPrimitive.Item>\n          ))}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n  PaginationOverflow,\n  paginationVariants,\n  paginationLinkVariants,\n};\nexport type {\n  PaginationProps,\n  PaginationContentProps,\n  PaginationItemProps,\n  PaginationLinkProps,\n  PaginationNavProps,\n  PaginationEllipsisProps,\n  PaginationOverflowProps,\n};\n"],"mappings":"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","names":[]}