@dev-dga/react 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -20,26 +20,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Alert: () => Alert,
+  AlertDescription: () => AlertDescription,
+  AlertTitle: () => AlertTitle,
   Button: () => Button,
   Checkbox: () => Checkbox,
   DgaProvider: () => DgaProvider,
   FieldMessage: () => FieldMessage,
   Input: () => Input,
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalDescription: () => ModalDescription,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
+  ModalTitle: () => ModalTitle,
+  ModalTrigger: () => ModalTrigger,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   Select: () => Select,
   SelectItem: () => SelectItem,
   Switch: () => Switch,
   Textarea: () => Textarea,
+  Toaster: () => Toaster,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipTrigger: () => TooltipTrigger,
+  alertVariants: () => alertVariants,
   buttonVariants: () => buttonVariants,
   checkboxVariants: () => checkboxVariants,
   cn: () => cn,
+  createToast: () => createToast,
+  createToastStore: () => createToastStore,
   inputVariants: () => inputVariants,
+  modalContentVariants: () => modalContentVariants,
   radioGroupVariants: () => radioGroupVariants,
   radioVariants: () => radioVariants,
   selectTriggerVariants: () => selectTriggerVariants,
   switchVariants: () => switchVariants,
   textareaVariants: () => textareaVariants,
+  toast: () => toast,
+  toastStore: () => toastStore,
+  toastVariants: () => toastVariants,
+  toastViewportVariants: () => toastViewportVariants,
+  tooltipContentVariants: () => tooltipContentVariants,
   useDga: () => useDga,
   useDir: () => useDir,
   useFieldA11y: () => useFieldA11y
@@ -48,6 +72,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/Button/Button.tsx
 var import_react = require("react");
+var import_radix_ui = require("radix-ui");
 var import_class_variance_authority = require("class-variance-authority");
 
 // src/utils/cn.ts
@@ -113,6 +138,93 @@ function Minus(props) {
     }
   );
 }
+function Info(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
+function AlertTriangle(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+function AlertCircle(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+      ]
+    }
+  );
+}
+function Close(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
 function ChevronDown(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
@@ -169,6 +281,7 @@ function Button({
   startIcon,
   endIcon,
   iconFlip,
+  asChild,
   className,
   children,
   type = "button",
@@ -182,11 +295,12 @@ function Button({
     }
   }
   const isDisabled = disabled || loading;
+  const Comp = asChild ? import_radix_ui.Slot.Slot : "button";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "button",
+    Comp,
     {
-      type,
-      disabled: isDisabled,
+      ...asChild ? {} : { type, disabled: isDisabled },
+      ...asChild && isDisabled ? { tabIndex: -1 } : {},
       "aria-disabled": isDisabled || void 0,
       "aria-busy": loading || void 0,
       "data-slot": "button",
@@ -199,7 +313,12 @@ function Button({
       children: [
         loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { "aria-hidden": "true" }),
         !loading && startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("ddga-button__icon", iconFlip && "ddga-icon-flip"), "aria-hidden": "true", children: startIcon }),
-        children != null && children !== "" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ddga-button__text", children }),
+        asChild ? (
+          // children IS the consumer's single element (e.g. <Link>). Slottable
+          // marks where THAT element's original children should land , without
+          // it the icons would replace the link text entirely.
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Slottable, { children })
+        ) : children != null && children !== "" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ddga-button__text", children }),
         !loading && endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("ddga-button__icon", iconFlip && "ddga-icon-flip"), "aria-hidden": "true", children: endIcon })
       ]
     }
@@ -414,7 +533,7 @@ function Textarea({
 }
 
 // src/components/Checkbox/Checkbox.tsx
-var import_radix_ui = require("radix-ui");
+var import_radix_ui2 = require("radix-ui");
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var checkboxVariants = (0, import_class_variance_authority4.cva)("ddga-checkbox", {
@@ -455,7 +574,7 @@ function Checkbox({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-slot": "checkbox-field", className: "ddga-field", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ddga-checkbox-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_radix_ui.Checkbox.Root,
+        import_radix_ui2.Checkbox.Root,
         {
           ...props,
           ...controlProps,
@@ -463,7 +582,7 @@ function Checkbox({
           required,
           className: cn(checkboxVariants({ size, error: hasError }), className),
           children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-            import_radix_ui.Checkbox.Indicator,
+            import_radix_ui2.Checkbox.Indicator,
             {
               "data-slot": "checkbox-indicator",
               className: "ddga-checkbox__indicator",
@@ -487,7 +606,7 @@ function Checkbox({
 
 // src/components/Radio/Radio.tsx
 var import_react3 = require("react");
-var import_radix_ui2 = require("radix-ui");
+var import_radix_ui3 = require("radix-ui");
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var radioGroupVariants = (0, import_class_variance_authority5.cva)("ddga-radio-group", {
@@ -540,7 +659,7 @@ function RadioGroup({
       required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "ddga-radio-group__required", children: "*" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_radix_ui2.RadioGroup.Root,
+      import_radix_ui3.RadioGroup.Root,
       {
         ...props,
         "aria-invalid": controlProps["aria-invalid"],
@@ -562,14 +681,14 @@ function Radio({ id: externalId, label, className, ...props }) {
   const itemId = externalId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ddga-radio-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_radix_ui2.RadioGroup.Item,
+      import_radix_ui3.RadioGroup.Item,
       {
         ...props,
         id: itemId,
         "data-slot": "radio",
         className: cn(radioVariants(), className),
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_radix_ui2.RadioGroup.Indicator,
+          import_radix_ui3.RadioGroup.Indicator,
           {
             "data-slot": "radio-indicator",
             className: "ddga-radio__indicator",
@@ -583,7 +702,7 @@ function Radio({ id: externalId, label, className, ...props }) {
 }
 
 // src/components/Switch/Switch.tsx
-var import_radix_ui3 = require("radix-ui");
+var import_radix_ui4 = require("radix-ui");
 var import_class_variance_authority6 = require("class-variance-authority");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var switchVariants = (0, import_class_variance_authority6.cva)("ddga-switch", {
@@ -624,14 +743,14 @@ function Switch({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-slot": "switch-field", className: "ddga-field", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ddga-switch-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_radix_ui3.Switch.Root,
+        import_radix_ui4.Switch.Root,
         {
           ...props,
           ...controlProps,
           "data-slot": "switch",
           required,
           className: cn(switchVariants({ size, error: hasError }), className),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui3.Switch.Thumb, { "data-slot": "switch-thumb", className: "ddga-switch__thumb" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui4.Switch.Thumb, { "data-slot": "switch-thumb", className: "ddga-switch__thumb" })
         }
       ),
       label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: fieldId, className: "ddga-switch__label", children: [
@@ -646,7 +765,7 @@ function Switch({
 
 // src/components/Select/Select.tsx
 var import_react5 = require("react");
-var import_radix_ui4 = require("radix-ui");
+var import_radix_ui5 = require("radix-ui");
 var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/providers/DgaContext.ts
@@ -706,27 +825,27 @@ function Select({
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", className: "ddga-select__required", children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_radix_ui4.Select.Root, { required, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_radix_ui5.Select.Root, { required, ...rootProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        import_radix_ui4.Select.Trigger,
+        import_radix_ui5.Select.Trigger,
         {
           ...controlProps,
           "data-slot": "select-trigger",
           className: cn(selectTriggerVariants({ size, error: hasError }), className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.Value, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.Icon, { asChild: true, className: "ddga-select__icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronDown, { "aria-hidden": "true" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.Icon, { asChild: true, className: "ddga-select__icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronDown, { "aria-hidden": "true" }) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_radix_ui4.Select.Content,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_radix_ui5.Select.Content,
         {
           "data-slot": "select-content",
           className: "ddga-select-content",
           position: "popper",
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.Viewport, { className: "ddga-select-viewport", children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.Viewport, { className: "ddga-select-viewport", children })
         }
       ) })
     ] }),
@@ -736,24 +855,464 @@ function Select({
 }
 function SelectItem({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    import_radix_ui4.Select.Item,
+    import_radix_ui5.Select.Item,
     {
       ...props,
       "data-slot": "select-item",
       className: cn("ddga-select-item", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.ItemText, { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui4.Select.ItemIndicator, { className: "ddga-select-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Check, { className: "ddga-select-item__check", "aria-hidden": "true" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.ItemText, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui5.Select.ItemIndicator, { className: "ddga-select-item__indicator", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Check, { className: "ddga-select-item__check", "aria-hidden": "true" }) })
       ]
     }
   );
 }
 
-// src/providers/DgaProvider.tsx
+// src/components/Tooltip/Tooltip.tsx
 var import_react6 = require("react");
-var import_radix_ui5 = require("radix-ui");
-var import_tokens = require("@dev-dga/tokens");
+var import_radix_ui6 = require("radix-ui");
+var import_class_variance_authority8 = require("class-variance-authority");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var tooltipContentVariants = (0, import_class_variance_authority8.cva)("ddga-tooltip", {
+  variants: {
+    size: {
+      sm: "ddga-tooltip--sm",
+      md: "ddga-tooltip--md"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Tooltip(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui6.Tooltip.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui6.Tooltip.Trigger, { "data-slot": "tooltip-trigger", className, ...props });
+}
+function TooltipContent({
+  size,
+  arrow = true,
+  sideOffset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ctx = (0, import_react6.useContext)(DgaContext);
+  const portalContainer = ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui6.Tooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_radix_ui6.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(tooltipContentVariants({ size }), className),
+      ...props,
+      children: [
+        children,
+        arrow ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui6.Tooltip.Arrow, { className: "ddga-tooltip__arrow" }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/Alert/Alert.tsx
+var import_react7 = require("react");
+var import_radix_ui7 = require("radix-ui");
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority9.cva)("ddga-alert", {
+  variants: {
+    variant: {
+      info: "ddga-alert--info",
+      success: "ddga-alert--success",
+      warning: "ddga-alert--warning",
+      destructive: "ddga-alert--destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var DEFAULT_ICONS = {
+  info: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Info, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Check, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AlertTriangle, { "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AlertCircle, { "aria-hidden": "true" })
+};
+function Alert({
+  variant,
+  asChild,
+  icon,
+  dismissible,
+  open: controlledOpen,
+  onDismiss,
+  live,
+  closeLabel = "Dismiss",
+  className,
+  children,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = (0, import_react7.useState)(true);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  if (!open) return null;
+  const Comp = asChild ? import_radix_ui7.Slot.Slot : "div";
+  const resolvedIcon = icon === false ? null : icon !== void 0 ? icon : DEFAULT_ICONS[variant ?? "info"];
+  const liveProps = live === "assertive" ? { role: "alert", "aria-live": "assertive" } : live === "polite" ? { role: "status", "aria-live": "polite" } : {};
+  function handleDismiss() {
+    if (!isControlled) setInternalOpen(false);
+    onDismiss?.();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Comp,
+    {
+      "data-slot": "alert",
+      "data-variant": variant ?? "info",
+      className: cn(alertVariants({ variant }), className),
+      ...liveProps,
+      ...props,
+      children: [
+        resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ddga-alert__icon", children: resolvedIcon }) : null,
+        asChild ? (
+          // Slot mode: the consumer's element receives the children body.
+          // Title/description are nested by the consumer.
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui7.Slot.Slottable, { children })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ddga-alert__body", children }),
+        dismissible ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "ddga-alert__close",
+            "aria-label": closeLabel,
+            onClick: handleDismiss,
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Close, { "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function AlertTitle({ asChild, className, ...props }) {
+  const Comp = asChild ? import_radix_ui7.Slot.Slot : "h5";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Comp, { "data-slot": "alert-title", className: cn("ddga-alert__title", className), ...props });
+}
+function AlertDescription({ asChild, className, ...props }) {
+  const Comp = asChild ? import_radix_ui7.Slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Comp,
+    {
+      "data-slot": "alert-description",
+      className: cn("ddga-alert__description", className),
+      ...props
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+var import_react8 = require("react");
+var import_radix_ui8 = require("radix-ui");
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var modalContentVariants = (0, import_class_variance_authority10.cva)("ddga-modal", {
+  variants: {
+    size: {
+      sm: "ddga-modal--sm",
+      md: "ddga-modal--md",
+      lg: "ddga-modal--lg",
+      xl: "ddga-modal--xl",
+      full: "ddga-modal--full"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Modal(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Dialog.Root, { ...props });
+}
+function ModalTrigger({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Dialog.Trigger, { "data-slot": "modal-trigger", className, ...props });
+}
+function ModalContent({
+  size,
+  showCloseButton = true,
+  closeLabel = "Close",
+  className,
+  children,
+  ...props
+}) {
+  const ctx = (0, import_react8.useContext)(DgaContext);
+  const portalContainer = ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_radix_ui8.Dialog.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Dialog.Overlay, { className: "ddga-modal__overlay", "data-slot": "modal-overlay" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_radix_ui8.Dialog.Content,
+      {
+        "data-slot": "modal-content",
+        className: cn(modalContentVariants({ size }), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_radix_ui8.Dialog.Close,
+            {
+              className: "ddga-modal__close",
+              "aria-label": closeLabel,
+              "data-slot": "modal-close-x",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Close, { "aria-hidden": "true" })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function ModalHeader({ asChild, className, ...props }) {
+  const Comp = asChild ? import_radix_ui8.Slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Comp, { "data-slot": "modal-header", className: cn("ddga-modal__header", className), ...props });
+}
+function ModalTitle({ asChild, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui8.Dialog.Title,
+    {
+      asChild,
+      "data-slot": "modal-title",
+      className: cn("ddga-modal__title", className),
+      ...props
+    }
+  );
+}
+function ModalDescription({ asChild, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui8.Dialog.Description,
+    {
+      asChild,
+      "data-slot": "modal-description",
+      className: cn("ddga-modal__description", className),
+      ...props
+    }
+  );
+}
+function ModalFooter({ asChild, className, ...props }) {
+  const Comp = asChild ? import_radix_ui8.Slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Comp, { "data-slot": "modal-footer", className: cn("ddga-modal__footer", className), ...props });
+}
+function ModalClose({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Dialog.Close, { "data-slot": "modal-close", className, ...props });
+}
+
+// src/components/Toast/Toast.tsx
+var import_react10 = require("react");
+var import_radix_ui9 = require("radix-ui");
+var import_class_variance_authority11 = require("class-variance-authority");
+
+// src/components/Toast/toast-store.ts
+var import_react9 = require("react");
+var EXIT_ANIM_MS = 200;
+function createToastStore() {
+  let toasts = [];
+  const listeners = /* @__PURE__ */ new Set();
+  let counter = 0;
+  function emit() {
+    for (const l of listeners) l();
+  }
+  function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+  function getSnapshot() {
+    return toasts;
+  }
+  function nextId() {
+    counter += 1;
+    return `t${counter}`;
+  }
+  function add(variant, message, options = {}) {
+    const id = options.id ?? nextId();
+    const existing = toasts.findIndex((t) => t.id === id);
+    const data = {
+      id,
+      variant,
+      open: true,
+      title: message,
+      description: options.description,
+      duration: options.duration,
+      action: options.action,
+      onDismiss: options.onDismiss
+    };
+    if (existing >= 0) {
+      toasts = toasts.map((t, i) => i === existing ? data : t);
+    } else {
+      toasts = [...toasts, data];
+    }
+    emit();
+    return id;
+  }
+  function dismiss(id) {
+    if (id === void 0) {
+      const ids = toasts.map((t) => t.id);
+      toasts = toasts.map((t) => ({ ...t, open: false }));
+      emit();
+      setTimeout(() => {
+        ids.forEach((id2) => remove(id2));
+      }, EXIT_ANIM_MS);
+    } else {
+      toasts = toasts.map((t) => t.id === id ? { ...t, open: false } : t);
+      emit();
+      setTimeout(() => remove(id), EXIT_ANIM_MS);
+    }
+  }
+  function remove(id) {
+    const target = toasts.find((t) => t.id === id);
+    toasts = toasts.filter((t) => t.id !== id);
+    emit();
+    target?.onDismiss?.();
+  }
+  function __reset() {
+    toasts = [];
+    counter = 0;
+    emit();
+  }
+  return { subscribe, getSnapshot, add, dismiss, remove, __reset };
+}
+var toastStore = createToastStore();
+function createToast(store) {
+  const fn = ((message, options) => store.add("default", message, options));
+  fn.default = (message, options) => store.add("default", message, options);
+  fn.info = (message, options) => store.add("info", message, options);
+  fn.success = (message, options) => store.add("success", message, options);
+  fn.warning = (message, options) => store.add("warning", message, options);
+  fn.error = (message, options) => store.add("destructive", message, options);
+  fn.destructive = fn.error;
+  fn.dismiss = (id) => store.dismiss(id);
+  return fn;
+}
+var toast = createToast(toastStore);
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var toastVariants = (0, import_class_variance_authority11.cva)("ddga-toast", {
+  variants: {
+    variant: {
+      default: "ddga-toast--default",
+      info: "ddga-toast--info",
+      success: "ddga-toast--success",
+      warning: "ddga-toast--warning",
+      destructive: "ddga-toast--destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var toastViewportVariants = (0, import_class_variance_authority11.cva)("ddga-toast-viewport", {
+  variants: {
+    position: {
+      "top-start": "ddga-toast-viewport--top-start",
+      "top-center": "ddga-toast-viewport--top-center",
+      "top-end": "ddga-toast-viewport--top-end",
+      "bottom-start": "ddga-toast-viewport--bottom-start",
+      "bottom-center": "ddga-toast-viewport--bottom-center",
+      "bottom-end": "ddga-toast-viewport--bottom-end"
+    },
+    containerized: {
+      true: "ddga-toast-viewport--containerized"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-end"
+  }
+});
+var DEFAULT_ICONS2 = {
+  default: null,
+  info: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Info, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Check, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertTriangle, { "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertCircle, { "aria-hidden": "true" })
+};
+function Toaster({
+  position = "bottom-end",
+  containerized = false,
+  duration = 4e3,
+  closeButton = true,
+  closeLabel = "Dismiss",
+  hideIcon = false,
+  className,
+  swipeDirection,
+  store = toastStore
+}) {
+  const toasts = (0, import_react10.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const resolvedSwipe = swipeDirection ?? (position.startsWith("top") ? "up" : "down");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_radix_ui9.Toast.Provider, { duration, swipeDirection: resolvedSwipe, children: [
+    toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ToastItem,
+      {
+        toast: t,
+        store,
+        closeButton,
+        closeLabel,
+        hideIcon
+      },
+      t.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_radix_ui9.Toast.Viewport,
+      {
+        "data-slot": "toast-viewport",
+        "data-position": position,
+        className: cn(toastViewportVariants({ position, containerized }), className)
+      }
+    )
+  ] });
+}
+function ToastItem({ toast: t, store, closeButton, closeLabel, hideIcon }) {
+  const radixType = t.variant === "destructive" ? "foreground" : "background";
+  const icon = hideIcon ? null : DEFAULT_ICONS2[t.variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_radix_ui9.Toast.Root,
+    {
+      "data-slot": "toast",
+      "data-variant": t.variant,
+      className: toastVariants({ variant: t.variant }),
+      open: t.open,
+      type: radixType,
+      duration: t.duration,
+      onOpenChange: (open) => {
+        if (!open) {
+          store.dismiss(t.id);
+        }
+      },
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ddga-toast__icon", children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ddga-toast__body", children: [
+          t.title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui9.Toast.Title, { className: "ddga-toast__title", children: t.title }) : null,
+          t.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui9.Toast.Description, { className: "ddga-toast__description", children: t.description }) : null,
+          t.action ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_radix_ui9.Toast.Action,
+            {
+              className: "ddga-toast__action",
+              altText: t.action.altText ?? (typeof t.action.label === "string" ? t.action.label : "Action"),
+              onClick: () => {
+                t.action?.onClick();
+                store.dismiss(t.id);
+              },
+              children: t.action.label
+            }
+          ) : null
+        ] }),
+        closeButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui9.Toast.Close, { className: "ddga-toast__close", "aria-label": closeLabel, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Close, { "aria-hidden": "true" }) }) : null
+      ]
+    }
+  );
+}
+
+// src/providers/DgaProvider.tsx
+var import_react11 = require("react");
+var import_radix_ui10 = require("radix-ui");
+var import_tokens = require("@dev-dga/tokens");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DgaProvider({
   dir = "ltr",
   locale,
@@ -764,17 +1323,17 @@ function DgaProvider({
   style: consumerStyle,
   children
 }) {
-  const parentCtx = (0, import_react6.useContext)(DgaContext);
+  const parentCtx = (0, import_react11.useContext)(DgaContext);
   const isNested = parentCtx !== null;
-  const [rootEl, setRootEl] = (0, import_react6.useState)(null);
+  const [rootEl, setRootEl] = (0, import_react11.useState)(null);
   const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
-  const ctxValue = (0, import_react6.useMemo)(
+  const ctxValue = (0, import_react11.useMemo)(
     () => ({ dir, locale: resolvedLocale, mode, rootEl }),
     [dir, resolvedLocale, mode, rootEl]
   );
-  const themeVars = (0, import_react6.useMemo)(() => theme ? (0, import_tokens.buildTheme)(theme) : null, [theme]);
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui5.Direction.Provider, { dir, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const themeVars = (0, import_react11.useMemo)(() => theme ? (0, import_tokens.buildTheme)(theme) : null, [theme]);
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui10.Direction.Provider, { dir, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Component,
     {
       ref: setRootEl,
@@ -784,7 +1343,7 @@ function DgaProvider({
       "data-theme": mode,
       className,
       style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
-      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui5.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
+      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui10.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -795,26 +1354,50 @@ function useDir() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
+  AlertDescription,
+  AlertTitle,
   Button,
   Checkbox,
   DgaProvider,
   FieldMessage,
   Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
   Radio,
   RadioGroup,
   Select,
   SelectItem,
   Switch,
   Textarea,
+  Toaster,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  alertVariants,
   buttonVariants,
   checkboxVariants,
   cn,
+  createToast,
+  createToastStore,
   inputVariants,
+  modalContentVariants,
   radioGroupVariants,
   radioVariants,
   selectTriggerVariants,
   switchVariants,
   textareaVariants,
+  toast,
+  toastStore,
+  toastVariants,
+  toastViewportVariants,
+  tooltipContentVariants,
   useDga,
   useDir,
   useFieldA11y