@dev-dga/react 0.10.1 → 0.12.0

package/dist/chunk-5N6CFYT6.cjs

@@ -0,0 +1,256 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+
+var _chunkYS2JJ73Mcjs = require('./chunk-YS2JJ73M.cjs');
+
+
+var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
+
+// src/components/Progress/Progress.tsx
+var _react = require('react');
+var _radixui = require('radix-ui');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+var progressVariants = _classvarianceauthority.cva.call(void 0, "ddga-progress", {
+  variants: {
+    size: {
+      sm: "ddga-progress--sm",
+      md: "ddga-progress--md",
+      lg: "ddga-progress--lg"
+    },
+    variant: {
+      primary: "ddga-progress--primary",
+      neutral: "ddga-progress--neutral"
+    },
+    state: {
+      normal: "",
+      success: "ddga-progress--success",
+      error: "ddga-progress--error"
+    }
+  },
+  defaultVariants: { size: "md", variant: "primary", state: "normal" }
+});
+var circularProgressVariants = _classvarianceauthority.cva.call(void 0, "ddga-circular-progress", {
+  variants: {
+    size: {
+      sm: "ddga-circular-progress--sm",
+      md: "ddga-circular-progress--md",
+      lg: "ddga-circular-progress--lg",
+      xl: "ddga-circular-progress--xl",
+      "2xl": "ddga-circular-progress--2xl"
+    },
+    variant: {
+      primary: "ddga-circular-progress--primary",
+      neutral: "ddga-circular-progress--neutral"
+    },
+    state: {
+      normal: "",
+      success: "ddga-circular-progress--success",
+      error: "ddga-circular-progress--error"
+    }
+  },
+  defaultVariants: { size: "md", variant: "primary", state: "normal" }
+});
+function StatusBadge({ className, state }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkV6MXOJQ4cjs.cn.call(void 0, className, `${className}--${state}`), "aria-hidden": "true", children: state === "success" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Check, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.Close, {}) });
+}
+function Progress({
+  value = null,
+  max = 100,
+  size = "md",
+  variant = "primary",
+  state = "normal",
+  label,
+  required = false,
+  helperText,
+  showValue,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const labelId = _react.useId.call(void 0, );
+  const isIndeterminate = value === null;
+  const isStatus = state === "success" || state === "error";
+  const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
+  const fillPct = isStatus ? 100 : pct;
+  const showInBar = size === "lg" && !isIndeterminate && showValue !== false;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "progress-root",
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, progressVariants({ size, variant, state }), className),
+      children: [
+        label != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { id: labelId, "data-slot": "progress-label", className: "ddga-progress__label", children: [
+          required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-progress__required", "aria-hidden": "true", children: "*" }),
+          label
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _radixui.Progress.Root,
+          {
+            "data-slot": "progress",
+            value: isIndeterminate ? null : value,
+            max,
+            "aria-label": label == null ? ariaLabel : void 0,
+            "aria-labelledby": label != null ? labelId : ariaLabelledby,
+            className: "ddga-progress__track",
+            ...props,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _radixui.Progress.Indicator,
+              {
+                "data-slot": "progress-indicator",
+                className: "ddga-progress__indicator",
+                style: isIndeterminate ? void 0 : { inlineSize: `${fillPct}%` },
+                children: showInBar && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ddga-progress__value", "data-slot": "progress-value", dir: "auto", children: [
+                  Math.round(pct),
+                  "%"
+                ] })
+              }
+            )
+          }
+        ),
+        helperText != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { "data-slot": "progress-helper", className: "ddga-progress__helper", children: [
+          isStatus ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusBadge, { className: "ddga-progress__badge", state }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-progress__helper-icon", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYS2JJ73Mcjs.HelpCircle, {}) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-progress__helper-text", children: helperText })
+        ] })
+      ]
+    }
+  );
+}
+var CIRCULAR_SIZES = { sm: 64, md: 80, lg: 120, xl: 160, "2xl": 200 };
+var CIRCULAR_STROKE = { sm: 4, md: 8, lg: 10, xl: 14, "2xl": 20 };
+var SEGMENT_GAP_FRACTION = 0.16;
+function CircularProgress({
+  value = null,
+  max = 100,
+  size = "md",
+  variant = "primary",
+  state = "normal",
+  thickness,
+  segments,
+  showLabel = true,
+  description,
+  className,
+  ...props
+}) {
+  if (process.env.NODE_ENV === "development" && !props["aria-label"] && !props["aria-labelledby"]) {
+    console.warn(
+      "[dga/Progress] <CircularProgress> has no accessible name. Pass `aria-label` or `aria-labelledby` so screen-reader users know what the progress represents."
+    );
+  }
+  const isIndeterminate = value === null;
+  const isSegmented = typeof segments === "number" && segments >= 2;
+  const isStatus = state === "success" || state === "error";
+  const sizeKey = _nullishCoalesce(size, () => ( "md"));
+  const diameter = CIRCULAR_SIZES[sizeKey];
+  const strokeWidth = _nullishCoalesce(thickness, () => ( CIRCULAR_STROKE[sizeKey]));
+  const radius = (diameter - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = diameter / 2;
+  const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
+  const fillPct = isStatus ? 100 : pct;
+  const dashOffset = isIndeterminate ? circumference * 0.75 : circumference * (1 - fillPct / 100);
+  const dataState = isIndeterminate ? "indeterminate" : value >= max ? "complete" : "loading";
+  const filledSegments = isSegmented && segments ? isIndeterminate ? 0 : Math.round(pct / 100 * segments) : 0;
+  const segmentEls = isSegmented && segments ? Array.from({ length: segments }, (_, i) => {
+    const segAngle = 360 / segments;
+    const gapAngle = segAngle * SEGMENT_GAP_FRACTION;
+    const segLen = circumference * ((1 - SEGMENT_GAP_FRACTION) / segments);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "circle",
+      {
+        className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
+          "ddga-circular-progress__segment",
+          i < filledSegments && "ddga-circular-progress__segment--filled"
+        ),
+        cx: center,
+        cy: center,
+        r: radius,
+        fill: "none",
+        strokeWidth,
+        strokeLinecap: "butt",
+        strokeDasharray: `${segLen} ${circumference}`,
+        transform: `rotate(${-90 + i * segAngle + gapAngle / 2} ${center} ${center})`
+      },
+      i
+    );
+  }) : null;
+  const showValueLabel = !isIndeterminate && showLabel && !isStatus;
+  const valueText = isSegmented ? `${filledSegments}/${segments}` : `${Math.round(pct)}%`;
+  const showCentre = !isIndeterminate && (isStatus || showValueLabel || description != null);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "circular-progress",
+      "data-state": dataState,
+      "data-segmented": isSegmented ? "" : void 0,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": isIndeterminate ? void 0 : value,
+      className: _chunkV6MXOJQ4cjs.cn.call(void 0, circularProgressVariants({ size, variant, state }), className),
+      style: { inlineSize: diameter, blockSize: diameter },
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: "ddga-circular-progress__svg",
+            viewBox: `0 0 ${diameter} ${diameter}`,
+            width: diameter,
+            height: diameter,
+            "aria-hidden": "true",
+            focusable: "false",
+            children: isSegmented ? segmentEls : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "circle",
+                {
+                  className: "ddga-circular-progress__track",
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "circle",
+                {
+                  className: "ddga-circular-progress__indicator",
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: dashOffset,
+                  transform: `rotate(-90 ${center} ${center})`
+                }
+              )
+            ] })
+          }
+        ),
+        showCentre && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ddga-circular-progress__label", "aria-hidden": "true", children: [
+          isStatus ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            StatusBadge,
+            {
+              className: "ddga-circular-progress__badge",
+              state
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-circular-progress__value", children: valueText }),
+          description != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ddga-circular-progress__text", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+
+
+
+
+
+exports.progressVariants = progressVariants; exports.circularProgressVariants = circularProgressVariants; exports.Progress = Progress; exports.CircularProgress = CircularProgress;
+//# sourceMappingURL=chunk-5N6CFYT6.cjs.map

package/dist/chunk-5N6CFYT6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-5N6CFYT6.cjs","../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-5N6CFYT6.cjs","sourcesContent":[null,"'use client';\n\nimport { useId } from 'react';\nimport { Progress as ProgressPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Check, Close, HelpCircle } from '../../internal/icons';\n\nconst progressVariants = cva('ddga-progress', {\n  variants: {\n    size: {\n      sm: 'ddga-progress--sm',\n      md: 'ddga-progress--md',\n      lg: 'ddga-progress--lg',\n    },\n    variant: {\n      primary: 'ddga-progress--primary',\n      neutral: 'ddga-progress--neutral',\n    },\n    state: {\n      normal: '',\n      success: 'ddga-progress--success',\n      error: 'ddga-progress--error',\n    },\n  },\n  defaultVariants: { size: 'md', variant: 'primary', state: 'normal' },\n});\n\nconst circularProgressVariants = cva('ddga-circular-progress', {\n  variants: {\n    size: {\n      sm: 'ddga-circular-progress--sm',\n      md: 'ddga-circular-progress--md',\n      lg: 'ddga-circular-progress--lg',\n      xl: 'ddga-circular-progress--xl',\n      '2xl': 'ddga-circular-progress--2xl',\n    },\n    variant: {\n      primary: 'ddga-circular-progress--primary',\n      neutral: 'ddga-circular-progress--neutral',\n    },\n    state: {\n      normal: '',\n      success: 'ddga-circular-progress--success',\n      error: 'ddga-circular-progress--error',\n    },\n  },\n  defaultVariants: { size: 'md', variant: 'primary', state: 'normal' },\n});\n\ntype ProgressState = 'normal' | 'success' | 'error';\n\nfunction StatusBadge({ className, state }: { className: string; state: 'success' | 'error' }) {\n  return (\n    <span className={cn(className, `${className}--${state}`)} aria-hidden=\"true\">\n      {state === 'success' ? <Check /> : <Close />}\n    </span>\n  );\n}\n\ntype ProgressOwnProps = VariantProps<typeof progressVariants> & {\n  /** Current progress. `null`/omitted renders the indeterminate slide. Clamp to `[0, max]` yourself. */\n  value?: number | null;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n\n  state?: ProgressState;\n  label?: React.ReactNode;\n  required?: boolean;\n  helperText?: React.ReactNode;\n  showValue?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n};\n\ntype ProgressProps = ProgressOwnProps &\n  Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, keyof ProgressOwnProps | 'asChild'>;\n\nfunction Progress({\n  value = null,\n  max = 100,\n  size = 'md',\n  variant = 'primary',\n  state = 'normal',\n  label,\n  required = false,\n  helperText,\n  showValue,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: ProgressProps) {\n  const labelId = useId();\n  const isIndeterminate = value === null;\n  const isStatus = state === 'success' || state === 'error';\n  const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n  const fillPct = isStatus ? 100 : pct;\n  const showInBar = size === 'lg' && !isIndeterminate && showValue !== false;\n\n  return (\n    <div\n      data-slot=\"progress-root\"\n      className={cn(progressVariants({ size, variant, state }), className)}\n    >\n      {label != null && (\n        <span id={labelId} data-slot=\"progress-label\" className=\"ddga-progress__label\">\n          {required && (\n            <span className=\"ddga-progress__required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n          {label}\n        </span>\n      )}\n      <ProgressPrimitive.Root\n        data-slot=\"progress\"\n        value={isIndeterminate ? null : value}\n        max={max}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-labelledby={label != null ? labelId : ariaLabelledby}\n        className=\"ddga-progress__track\"\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className=\"ddga-progress__indicator\"\n          style={isIndeterminate ? undefined : { inlineSize: `${fillPct}%` }}\n        >\n          {showInBar && (\n            <span className=\"ddga-progress__value\" data-slot=\"progress-value\" dir=\"auto\">\n              {Math.round(pct)}%\n            </span>\n          )}\n        </ProgressPrimitive.Indicator>\n      </ProgressPrimitive.Root>\n      {helperText != null && (\n        <span data-slot=\"progress-helper\" className=\"ddga-progress__helper\">\n          {isStatus ? (\n            <StatusBadge className=\"ddga-progress__badge\" state={state as 'success' | 'error'} />\n          ) : (\n            <span className=\"ddga-progress__helper-icon\" aria-hidden=\"true\">\n              <HelpCircle />\n            </span>\n          )}\n          <span className=\"ddga-progress__helper-text\">{helperText}</span>\n        </span>\n      )}\n    </div>\n  );\n}\n\ntype CircularProgressOwnProps = VariantProps<typeof circularProgressVariants> & {\n  value?: number | null;\n  max?: number;\n  state?: ProgressState;\n  thickness?: number;\n  segments?: number;\n  showLabel?: boolean;\n  description?: React.ReactNode;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n};\n\ntype CircularProgressProps = CircularProgressOwnProps &\n  Omit<React.ComponentProps<'div'>, keyof CircularProgressOwnProps>;\n\nconst CIRCULAR_SIZES = { sm: 64, md: 80, lg: 120, xl: 160, '2xl': 200 } as const;\nconst CIRCULAR_STROKE = { sm: 4, md: 8, lg: 10, xl: 14, '2xl': 20 } as const;\nconst SEGMENT_GAP_FRACTION = 0.16;\n\nfunction CircularProgress({\n  value = null,\n  max = 100,\n  size = 'md',\n  variant = 'primary',\n  state = 'normal',\n  thickness,\n  segments,\n  showLabel = true,\n  description,\n  className,\n  ...props\n}: CircularProgressProps) {\n  if (process.env.NODE_ENV === 'development' && !props['aria-label'] && !props['aria-labelledby']) {\n    console.warn(\n      '[dga/Progress] <CircularProgress> has no accessible name. Pass `aria-label` or ' +\n        '`aria-labelledby` so screen-reader users know what the progress represents.',\n    );\n  }\n\n  const isIndeterminate = value === null;\n  const isSegmented = typeof segments === 'number' && segments >= 2;\n  const isStatus = state === 'success' || state === 'error';\n  const sizeKey = size ?? 'md';\n  const diameter = CIRCULAR_SIZES[sizeKey];\n  const strokeWidth = thickness ?? CIRCULAR_STROKE[sizeKey];\n  const radius = (diameter - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const center = diameter / 2;\n\n  const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n  const fillPct = isStatus ? 100 : pct;\n  const dashOffset = isIndeterminate ? circumference * 0.75 : circumference * (1 - fillPct / 100);\n\n  const dataState = isIndeterminate ? 'indeterminate' : value >= max ? 'complete' : 'loading';\n\n  const filledSegments =\n    isSegmented && segments ? (isIndeterminate ? 0 : Math.round((pct / 100) * segments)) : 0;\n  const segmentEls =\n    isSegmented && segments\n      ? Array.from({ length: segments }, (_, i) => {\n          const segAngle = 360 / segments;\n          const gapAngle = segAngle * SEGMENT_GAP_FRACTION;\n          const segLen = circumference * ((1 - SEGMENT_GAP_FRACTION) / segments);\n          return (\n            <circle\n              key={i}\n              className={cn(\n                'ddga-circular-progress__segment',\n                i < filledSegments && 'ddga-circular-progress__segment--filled',\n              )}\n              cx={center}\n              cy={center}\n              r={radius}\n              fill=\"none\"\n              strokeWidth={strokeWidth}\n              // Butt caps: round caps overrun the gap at small sizes.\n              strokeLinecap=\"butt\"\n              strokeDasharray={`${segLen} ${circumference}`}\n              transform={`rotate(${-90 + i * segAngle + gapAngle / 2} ${center} ${center})`}\n            />\n          );\n        })\n      : null;\n\n  const showValueLabel = !isIndeterminate && showLabel && !isStatus;\n  const valueText = isSegmented ? `${filledSegments}/${segments}` : `${Math.round(pct)}%`;\n  const showCentre = !isIndeterminate && (isStatus || showValueLabel || description != null);\n\n  return (\n    <div\n      data-slot=\"circular-progress\"\n      data-state={dataState}\n      data-segmented={isSegmented ? '' : undefined}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={isIndeterminate ? undefined : value}\n      className={cn(circularProgressVariants({ size, variant, state }), className)}\n      style={{ inlineSize: diameter, blockSize: diameter }}\n      {...props}\n    >\n      <svg\n        className=\"ddga-circular-progress__svg\"\n        viewBox={`0 0 ${diameter} ${diameter}`}\n        width={diameter}\n        height={diameter}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        {isSegmented ? (\n          segmentEls\n        ) : (\n          <>\n            <circle\n              className=\"ddga-circular-progress__track\"\n              cx={center}\n              cy={center}\n              r={radius}\n              fill=\"none\"\n              strokeWidth={strokeWidth}\n            />\n            <circle\n              className=\"ddga-circular-progress__indicator\"\n              cx={center}\n              cy={center}\n              r={radius}\n              fill=\"none\"\n              strokeWidth={strokeWidth}\n              strokeLinecap=\"round\"\n              strokeDasharray={circumference}\n              strokeDashoffset={dashOffset}\n              transform={`rotate(-90 ${center} ${center})`}\n            />\n          </>\n        )}\n      </svg>\n      {showCentre && (\n        <span className=\"ddga-circular-progress__label\" aria-hidden=\"true\">\n          {isStatus ? (\n            <StatusBadge\n              className=\"ddga-circular-progress__badge\"\n              state={state as 'success' | 'error'}\n            />\n          ) : (\n            <span className=\"ddga-circular-progress__value\">{valueText}</span>\n          )}\n          {description != null && (\n            <span className=\"ddga-circular-progress__text\">{description}</span>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport { Progress, CircularProgress, progressVariants, circularProgressVariants };\nexport type { ProgressProps, CircularProgressProps };\n"]}

package/dist/{chunk-UK2SFZIQ.cjs → chunk-5NENDJOM.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkNQGCAXTWcjs = require('./chunk-NQGCAXTW.cjs');
+var _chunkJCOUZVG3cjs = require('./chunk-JCOUZVG3.cjs');
 
 
 var _chunkV6MXOJQ4cjs = require('./chunk-V6MXOJQ4.cjs');
@@ -15,6 +15,7 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0, "ddga-button", {
     variant: {
       primary: "ddga-button--primary",
       secondary: "ddga-button--secondary",
+      black: "ddga-button--black",
       outline: "ddga-button--outline",
       ghost: "ddga-button--ghost",
       destructive: "ddga-button--destructive",
@@ -28,31 +29,25 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0, "ddga-button", {
       sm: "ddga-button--sm",
       md: "ddga-button--md",
       lg: "ddga-button--lg",
+      // Icon-only squares: 40/32/28/24 (icon-sm 28 is off-spec).
       icon: "ddga-button--icon",
-      "icon-sm": "ddga-button--icon-sm"
+      "icon-md": "ddga-button--icon-md",
+      "icon-sm": "ddga-button--icon-sm",
+      "icon-xs": "ddga-button--icon-xs"
     },
     fullWidth: {
       true: "ddga-button--full-width"
     },
     /**
-     * Use on dark / branded colored backgrounds. Visually inverts non-filled
-     * variants (`outline`, `ghost`, destructive's outline/ghost forms) so
-     * text + border stay visible against the surface. Filled variants
-     * (`primary`, `secondary`, `destructive`, `destructive-subtle`) ignore
-     * it — they already carry their own background contrast.
+     * Use on dark / brand-colored backgrounds (DGA Platforms Code "On-color").
+     * Restyles each `variant` for a colored surface: `black`/`primary` invert to
+     * a white button; `secondary`/`outline`/`ghost` become white-on-transparent
+     * (white border for `outline`); `destructive-outline`/`destructive-ghost`
+     * switch to a light error label. The solid danger fills (`destructive`,
+     * `destructive-subtle`) keep their own contrast and are unchanged.
      */
-    inverted: {
-      true: "ddga-button--inverted"
-    },
-    /**
-     * Floating action button: fully-rounded + elevated. Orthogonal to `variant`
-     * (color) and `size` — pair with `size="icon"` for a circular FAB, or a text
-     * size for an extended pill FAB. Positioning (`position: fixed`, safe-area
-     * insets) is the consumer's responsibility — see the placement recipe in the
-     * stories. Keep it a modifier, not a `Fab` wrapper component.
-     */
-    fab: {
-      true: "ddga-button--fab"
+    onColor: {
+      true: "ddga-button--on-color"
     }
   },
   compoundVariants: [],
@@ -65,8 +60,7 @@ function Button({
   variant,
   size,
   fullWidth,
-  inverted,
-  fab,
+  onColor,
   loading,
   disabled,
   startIcon,
@@ -78,10 +72,11 @@ function Button({
   type = "button",
   ...props
 }) {
-  if (process.env.NODE_ENV === "development" && (size === "icon" || size === "icon-sm")) {
+  const isIconOnly = size === "icon" || size === "icon-md" || size === "icon-sm" || size === "icon-xs";
+  if (process.env.NODE_ENV === "development" && isIconOnly) {
     if (!props["aria-label"] && !props["aria-labelledby"]) {
       console.warn(
-        '[@dev-dga/react] Button with an icon-only size (size="icon" or "icon-sm") requires an aria-label or aria-labelledby attribute for screen reader accessibility.'
+        '[@dev-dga/react] Button with an icon-only size (size="icon", "icon-md", "icon-sm", or "icon-xs") requires an aria-label or aria-labelledby attribute for screen reader accessibility.'
       );
     }
   }
@@ -96,13 +91,13 @@ function Button({
       "aria-busy": loading || void 0,
       "data-slot": "button",
       className: _chunkV6MXOJQ4cjs.cn.call(void 0, 
-        buttonVariants({ variant, size, fullWidth, inverted, fab }),
+        buttonVariants({ variant, size, fullWidth, onColor }),
         loading && "ddga-button--loading",
         className
       ),
       ...props,
       children: [
-        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQGCAXTWcjs.Spinner, { "aria-hidden": "true" }),
+        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJCOUZVG3cjs.Spinner, { "aria-hidden": "true" }),
         !loading && startIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkV6MXOJQ4cjs.cn.call(void 0, "ddga-button__icon", iconFlip && "ddga-icon-flip"), "aria-hidden": "true", children: startIcon }),
         asChild ? (
           // children IS the consumer's single element (e.g. <Link>). Slottable
@@ -120,4 +115,4 @@ function Button({
 
 
 exports.buttonVariants = buttonVariants; exports.Button = Button;
-//# sourceMappingURL=chunk-UK2SFZIQ.cjs.map
+//# sourceMappingURL=chunk-5NENDJOM.cjs.map

package/dist/chunk-5NENDJOM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-5NENDJOM.cjs","../src/components/Button/Button.tsx"],"names":[],"mappings":"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","file":"/home/devdhaif/work/react/dga-dev/packages/react/dist/chunk-5NENDJOM.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';\nimport { Spinner } from '../Spinner';\n\n// ─── 1. Variants (cva) ─── //\n\nconst buttonVariants = cva('ddga-button', {\n  variants: {\n    variant: {\n      primary: 'ddga-button--primary',\n      secondary: 'ddga-button--secondary',\n      black: 'ddga-button--black',\n      outline: 'ddga-button--outline',\n      ghost: 'ddga-button--ghost',\n      destructive: 'ddga-button--destructive',\n      // Destructive sub-variants — match the DGA library's full destructive\n      // family (des-primary maps to plain `destructive` above).\n      'destructive-outline': 'ddga-button--destructive-outline',\n      'destructive-subtle': 'ddga-button--destructive-subtle',\n      'destructive-ghost': 'ddga-button--destructive-ghost',\n    },\n    size: {\n      sm: 'ddga-button--sm',\n      md: 'ddga-button--md',\n      lg: 'ddga-button--lg',\n      // Icon-only squares: 40/32/28/24 (icon-sm 28 is off-spec).\n      icon: 'ddga-button--icon',\n      'icon-md': 'ddga-button--icon-md',\n      'icon-sm': 'ddga-button--icon-sm',\n      'icon-xs': 'ddga-button--icon-xs',\n    },\n    fullWidth: {\n      true: 'ddga-button--full-width',\n    },\n    /**\n     * Use on dark / brand-colored backgrounds (DGA Platforms Code \"On-color\").\n     * Restyles each `variant` for a colored surface: `black`/`primary` invert to\n     * a white button; `secondary`/`outline`/`ghost` become white-on-transparent\n     * (white border for `outline`); `destructive-outline`/`destructive-ghost`\n     * switch to a light error label. The solid danger fills (`destructive`,\n     * `destructive-subtle`) keep their own contrast and are unchanged.\n     */\n    onColor: {\n      true: 'ddga-button--on-color',\n    },\n  },\n  compoundVariants: [],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n  },\n});\n\n// ─── 2. Types ─── //\n\ninterface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  loading?: boolean;\n  startIcon?: ReactNode;\n  endIcon?: ReactNode;\n  /** Flip start/end icons horizontally in RTL (for chevrons, arrows, etc.) */\n  iconFlip?: boolean;\n  /**\n   * Render as the single child element instead of a `<button>`. Lets consumers\n   * compose Button with router links (`<Button asChild><Link href=\"…\">…</Link></Button>`)\n   * without `<button><a>` invalid nesting.\n   *\n   * The `type` and native `disabled` attributes are dropped in this mode\n   * (they're meaningless on non-button elements) , the disabled visual + a11y\n   * state still works via `aria-disabled` + `tabIndex={-1}`. button.css\n   * matches on `[aria-disabled='true']` alongside `:disabled` so the styling\n   * applies on any element.\n   *\n   * Consumer remains responsible for preventing the underlying action when\n   * disabled (e.g., calling `e.preventDefault()` in the Link's onClick),\n   * since native `disabled` doesn't gate clicks on non-form-controls.\n   */\n  asChild?: boolean;\n}\n\n// ─── 3. Component ─── //\n\nfunction Button({\n  variant,\n  size,\n  fullWidth,\n  onColor,\n  loading,\n  disabled,\n  startIcon,\n  endIcon,\n  iconFlip,\n  asChild,\n  className,\n  children,\n  type = 'button',\n  ...props\n}: ButtonProps) {\n  // Dev-only: warn if icon-only button has no accessible name\n  const isIconOnly =\n    size === 'icon' || size === 'icon-md' || size === 'icon-sm' || size === 'icon-xs';\n  if (process.env.NODE_ENV === 'development' && isIconOnly) {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      console.warn(\n        '[@dev-dga/react] Button with an icon-only size (size=\"icon\", ' +\n          '\"icon-md\", \"icon-sm\", or \"icon-xs\") requires an aria-label or ' +\n          'aria-labelledby attribute for screen reader accessibility.',\n      );\n    }\n  }\n\n  const isDisabled = disabled || loading;\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n\n  return (\n    <Comp\n      // `type` and native `disabled` only apply to <button>. In asChild mode\n      // the Slot's child could be <a>, <Link>, etc. , skip both attrs there\n      // and lean on aria-disabled + tabIndex for the disabled state.\n      {...(asChild ? {} : { type, disabled: isDisabled })}\n      {...(asChild && isDisabled ? { tabIndex: -1 } : {})}\n      // Both `disabled` and `aria-disabled` are set in button mode (native +\n      // explicit ARIA signal). In asChild mode, `aria-disabled` is the only\n      // disabled signal a11y consumers can read on a non-form-control.\n      aria-disabled={isDisabled || undefined}\n      aria-busy={loading || undefined}\n      data-slot=\"button\"\n      className={cn(\n        buttonVariants({ variant, size, fullWidth, onColor }),\n        loading && 'ddga-button--loading',\n        className,\n      )}\n      {...props}\n    >\n      {loading && <Spinner aria-hidden=\"true\" />}\n      {!loading && startIcon && (\n        <span className={cn('ddga-button__icon', iconFlip && 'ddga-icon-flip')} aria-hidden=\"true\">\n          {startIcon}\n        </span>\n      )}\n      {asChild ? (\n        // children IS the consumer's single element (e.g. <Link>). Slottable\n        // marks where THAT element's original children should land , without\n        // it the icons would replace the link text entirely.\n        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n      ) : (\n        children != null && children !== '' && <span className=\"ddga-button__text\">{children}</span>\n      )}\n      {!loading && endIcon && (\n        <span className={cn('ddga-button__icon', iconFlip && 'ddga-icon-flip')} aria-hidden=\"true\">\n          {endIcon}\n        </span>\n      )}\n    </Comp>\n  );\n}\n\n// ─── 4. Exports ─── //\n\nexport { Button, buttonVariants };\nexport type { ButtonProps };\n"]}

package/dist/chunk-5X2XQMGC.js

@@ -0,0 +1,178 @@
+import {
+  toastStore
+} from "./chunk-HMXCWHVT.js";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle,
+  Close,
+  Info
+} from "./chunk-FFGALWM2.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/NotificationToast/NotificationToast.tsx
+import { useSyncExternalStore } from "react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var notificationToastVariants = cva("ddga-notification-toast", {
+  variants: {
+    variant: {
+      default: "ddga-notification-toast--default",
+      info: "ddga-notification-toast--info",
+      success: "ddga-notification-toast--success",
+      warning: "ddga-notification-toast--warning",
+      destructive: "ddga-notification-toast--destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var notificationToastViewportVariants = cva("ddga-notification-toast-viewport", {
+  variants: {
+    position: {
+      "top-start": "ddga-notification-toast-viewport--top-start",
+      "top-center": "ddga-notification-toast-viewport--top-center",
+      "top-end": "ddga-notification-toast-viewport--top-end",
+      "bottom-start": "ddga-notification-toast-viewport--bottom-start",
+      "bottom-center": "ddga-notification-toast-viewport--bottom-center",
+      "bottom-end": "ddga-notification-toast-viewport--bottom-end"
+    },
+    containerized: {
+      true: "ddga-notification-toast-viewport--containerized"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-end"
+  }
+});
+var DEFAULT_ICONS = {
+  default: /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" }),
+  info: /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true" })
+};
+function NotificationToast({
+  position = "bottom-end",
+  containerized = false,
+  duration = 4e3,
+  closeButton = true,
+  closeLabel = "Dismiss",
+  hideIcon = false,
+  className,
+  swipeDirection,
+  store = toastStore
+}) {
+  const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const resolvedSwipe = swipeDirection ?? (position.startsWith("top") ? "up" : "down");
+  return /* @__PURE__ */ jsxs(
+    ToastPrimitive.Provider,
+    {
+      duration: duration === 0 ? Infinity : duration,
+      swipeDirection: resolvedSwipe,
+      children: [
+        toasts.map((t) => /* @__PURE__ */ jsx(
+          ToastItem,
+          {
+            toast: t,
+            store,
+            closeButton,
+            closeLabel,
+            hideIcon
+          },
+          t.id
+        )),
+        /* @__PURE__ */ jsx(
+          ToastPrimitive.Viewport,
+          {
+            "data-slot": "notification-toast-viewport",
+            "data-position": position,
+            className: cn(notificationToastViewportVariants({ position, containerized }), className)
+          }
+        )
+      ]
+    }
+  );
+}
+var altTextFor = (a) => a.altText ?? (typeof a.label === "string" ? a.label : "Action");
+function ToastItem({ toast: t, store, closeButton, closeLabel, hideIcon }) {
+  const radixType = t.variant === "destructive" ? "foreground" : "background";
+  const icon = hideIcon ? null : DEFAULT_ICONS[t.variant];
+  const radixDuration = t.duration === 0 ? Infinity : t.duration;
+  return /* @__PURE__ */ jsxs(
+    ToastPrimitive.Root,
+    {
+      "data-slot": "notification-toast",
+      "data-variant": t.variant,
+      className: notificationToastVariants({ variant: t.variant }),
+      open: t.open,
+      type: radixType,
+      duration: radixDuration,
+      onOpenChange: (open) => {
+        if (!open) store.dismiss(t.id);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ddga-notification-toast__stripe", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "ddga-notification-toast__header", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "ddga-notification-toast__icon", children: icon }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "ddga-notification-toast__text", children: [
+            t.title ? /* @__PURE__ */ jsx(
+              ToastPrimitive.Title,
+              {
+                "data-slot": "notification-toast-title",
+                className: "ddga-notification-toast__title",
+                children: t.title
+              }
+            ) : null,
+            t.description ? /* @__PURE__ */ jsx(
+              ToastPrimitive.Description,
+              {
+                "data-slot": "notification-toast-description",
+                className: "ddga-notification-toast__description",
+                children: t.description
+              }
+            ) : null
+          ] }),
+          closeButton ? /* @__PURE__ */ jsx(ToastPrimitive.Close, { className: "ddga-notification-toast__close", "aria-label": closeLabel, children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" }) }) : null
+        ] }),
+        t.action || t.secondaryAction ? /* @__PURE__ */ jsxs("div", { className: "ddga-notification-toast__actions", "data-slot": "notification-toast-actions", children: [
+          t.action ? /* @__PURE__ */ jsx(
+            ToastPrimitive.Action,
+            {
+              className: "ddga-notification-toast__action",
+              altText: altTextFor(t.action),
+              onClick: () => {
+                t.action?.onClick();
+                store.dismiss(t.id);
+              },
+              children: t.action.label
+            }
+          ) : null,
+          t.secondaryAction ? /* @__PURE__ */ jsx(
+            ToastPrimitive.Action,
+            {
+              className: "ddga-notification-toast__action",
+              altText: altTextFor(t.secondaryAction),
+              onClick: () => {
+                t.secondaryAction?.onClick();
+                store.dismiss(t.id);
+              },
+              children: t.secondaryAction.label
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export {
+  notificationToastVariants,
+  notificationToastViewportVariants,
+  NotificationToast
+};
+//# sourceMappingURL=chunk-5X2XQMGC.js.map

package/dist/chunk-5X2XQMGC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NotificationToast/NotificationToast.tsx"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore, type ReactNode } from 'react';\nimport { Toast as ToastPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Info, AlertTriangle, AlertCircle, CheckCircle, Close } from '../../internal/icons';\nimport {\n  toastStore as defaultStore,\n  type ToastAction,\n  type ToastData,\n  type ToastStore,\n  type ToastVariant,\n} from './toast-store';\n\nconst notificationToastVariants = cva('ddga-notification-toast', {\n  variants: {\n    variant: {\n      default: 'ddga-notification-toast--default',\n      info: 'ddga-notification-toast--info',\n      success: 'ddga-notification-toast--success',\n      warning: 'ddga-notification-toast--warning',\n      destructive: 'ddga-notification-toast--destructive',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst notificationToastViewportVariants = cva('ddga-notification-toast-viewport', {\n  variants: {\n    position: {\n      'top-start': 'ddga-notification-toast-viewport--top-start',\n      'top-center': 'ddga-notification-toast-viewport--top-center',\n      'top-end': 'ddga-notification-toast-viewport--top-end',\n      'bottom-start': 'ddga-notification-toast-viewport--bottom-start',\n      'bottom-center': 'ddga-notification-toast-viewport--bottom-center',\n      'bottom-end': 'ddga-notification-toast-viewport--bottom-end',\n    },\n    containerized: {\n      true: 'ddga-notification-toast-viewport--containerized',\n    },\n  },\n  defaultVariants: {\n    position: 'bottom-end',\n  },\n});\n\n// SDGA Notification Toast glyphs (stroke): info-circle for neutral+info,\n// alert-triangle for error, alert-circle for warning, check-circle for success.\nconst DEFAULT_ICONS: Record<ToastVariant, ReactNode> = {\n  default: <Info aria-hidden=\"true\" />,\n  info: <Info aria-hidden=\"true\" />,\n  success: <CheckCircle aria-hidden=\"true\" />,\n  warning: <AlertCircle aria-hidden=\"true\" />,\n  destructive: <AlertTriangle aria-hidden=\"true\" />,\n};\n\ntype ToastPosition = NonNullable<\n  VariantProps<typeof notificationToastViewportVariants>['position']\n>;\n\ninterface NotificationToastProps {\n  /** Where toasts stack. Logical: start/end flip in RTL. Default `bottom-end`. */\n  position?: ToastPosition;\n  /**\n   * Pin the viewport to a positioned ancestor (via `position: absolute`)\n   * instead of the browser viewport (`position: fixed`). Set this for\n   * Storybook stories, embedded widgets, and any layout where the NotificationToast\n   * should stay within a parent box. Caller is responsible for placing the\n   * NotificationToast inside an element with `position: relative` (or other positioned\n   * containing block).\n   */\n  containerized?: boolean;\n  /** ms; default 4000. Set 0 (or Infinity) to disable auto-dismiss globally. */\n  duration?: number;\n  /** Show a close (X) button on each toast. Defaults to true. */\n  closeButton?: boolean;\n  /** Localized label for the close button. Default `\"Dismiss\"`. */\n  closeLabel?: string;\n  /** Hide the default leading icon per variant. */\n  hideIcon?: boolean;\n  /** Extra class on the Radix Viewport. */\n  className?: string;\n  /** Override swipe direction. Defaults based on `position`. */\n  swipeDirection?: 'up' | 'down' | 'left' | 'right';\n  /**\n   * The toast store this NotificationToast subscribes to. Defaults to the module-level\n   * singleton so the bare `toast()` API works without setup. Pass an isolated\n   * store (created via `createToastStore()` + `createToast(store)`) when you\n   * need multiple independent NotificationToasts on the same page — common in\n   * Storybook, docs sites, and embedded widgets.\n   */\n  store?: ToastStore;\n}\n\nfunction NotificationToast({\n  position = 'bottom-end',\n  containerized = false,\n  duration = 4000,\n  closeButton = true,\n  closeLabel = 'Dismiss',\n  hideIcon = false,\n  className,\n  swipeDirection,\n  store = defaultStore,\n}: NotificationToastProps) {\n  const toasts = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n\n  const resolvedSwipe: 'up' | 'down' | 'left' | 'right' =\n    swipeDirection ?? (position.startsWith('top') ? 'up' : 'down');\n\n  return (\n    <ToastPrimitive.Provider\n      duration={duration === 0 ? Infinity : duration}\n      swipeDirection={resolvedSwipe}\n    >\n      {toasts.map((t) => (\n        <ToastItem\n          key={t.id}\n          toast={t}\n          store={store}\n          closeButton={closeButton}\n          closeLabel={closeLabel}\n          hideIcon={hideIcon}\n        />\n      ))}\n      <ToastPrimitive.Viewport\n        data-slot=\"notification-toast-viewport\"\n        data-position={position}\n        className={cn(notificationToastViewportVariants({ position, containerized }), className)}\n      />\n    </ToastPrimitive.Provider>\n  );\n}\n\ninterface ToastItemProps {\n  toast: ToastData;\n  store: ToastStore;\n  closeButton: boolean;\n  closeLabel: string;\n  hideIcon: boolean;\n}\n\nconst altTextFor = (a: ToastAction) =>\n  a.altText ?? (typeof a.label === 'string' ? a.label : 'Action');\n\nfunction ToastItem({ toast: t, store, closeButton, closeLabel, hideIcon }: ToastItemProps) {\n  // Route destructive toasts through Radix's assertive live region; the rest stay polite.\n  const radixType: 'foreground' | 'background' =\n    t.variant === 'destructive' ? 'foreground' : 'background';\n\n  const icon = hideIcon ? null : DEFAULT_ICONS[t.variant];\n\n  // Radix treats `0` as falsy (→ falls back to the provider duration), so map\n  // our \"0 = no auto-dismiss\" contract to Infinity, which Radix honors.\n  const radixDuration = t.duration === 0 ? Infinity : t.duration;\n\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"notification-toast\"\n      data-variant={t.variant}\n      className={notificationToastVariants({ variant: t.variant })}\n      open={t.open}\n      type={radixType}\n      duration={radixDuration}\n      onOpenChange={(open) => {\n        if (!open) store.dismiss(t.id);\n      }}\n    >\n      <span className=\"ddga-notification-toast__stripe\" aria-hidden=\"true\" />\n      <div className=\"ddga-notification-toast__header\">\n        {icon ? <span className=\"ddga-notification-toast__icon\">{icon}</span> : null}\n        <div className=\"ddga-notification-toast__text\">\n          {t.title ? (\n            <ToastPrimitive.Title\n              data-slot=\"notification-toast-title\"\n              className=\"ddga-notification-toast__title\"\n            >\n              {t.title}\n            </ToastPrimitive.Title>\n          ) : null}\n          {t.description ? (\n            <ToastPrimitive.Description\n              data-slot=\"notification-toast-description\"\n              className=\"ddga-notification-toast__description\"\n            >\n              {t.description}\n            </ToastPrimitive.Description>\n          ) : null}\n        </div>\n        {closeButton ? (\n          <ToastPrimitive.Close className=\"ddga-notification-toast__close\" aria-label={closeLabel}>\n            <Close aria-hidden=\"true\" />\n          </ToastPrimitive.Close>\n        ) : null}\n      </div>\n      {t.action || t.secondaryAction ? (\n        <div className=\"ddga-notification-toast__actions\" data-slot=\"notification-toast-actions\">\n          {t.action ? (\n            <ToastPrimitive.Action\n              className=\"ddga-notification-toast__action\"\n              altText={altTextFor(t.action)}\n              onClick={() => {\n                t.action?.onClick();\n                store.dismiss(t.id);\n              }}\n            >\n              {t.action.label}\n            </ToastPrimitive.Action>\n          ) : null}\n          {t.secondaryAction ? (\n            <ToastPrimitive.Action\n              className=\"ddga-notification-toast__action\"\n              altText={altTextFor(t.secondaryAction)}\n              onClick={() => {\n                t.secondaryAction?.onClick();\n                store.dismiss(t.id);\n              }}\n            >\n              {t.secondaryAction.label}\n            </ToastPrimitive.Action>\n          ) : null}\n        </div>\n      ) : null}\n    </ToastPrimitive.Root>\n  );\n}\n\nexport { NotificationToast, notificationToastVariants, notificationToastViewportVariants };\nexport { toast, toastStore, createToast, createToastStore } from './toast-store';\nexport type { NotificationToastProps, ToastPosition };\nexport type { ToastVariant, ToastData, ToastOptions, ToastAction, ToastStore } from './toast-store';\n"],"mappings":"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","names":[]}