@dev-dga/react 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/Button/Button.tsx
 import "react";
+import { Slot as SlotPrimitive } from "radix-ui";
 import { cva } from "class-variance-authority";
 
 // src/utils/cn.ts
@@ -9,7 +10,7 @@ function cn(...inputs) {
 }
 
 // src/internal/icons/index.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function Spinner(props) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -65,6 +66,93 @@ function Minus(props) {
     }
   );
 }
+function Info(props) {
+  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+      ]
+    }
+  );
+}
+function AlertTriangle(props) {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+      ]
+    }
+  );
+}
+function AlertCircle(props) {
+  return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+      ]
+    }
+  );
+}
+function Close(props) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
 function ChevronDown(props) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -85,7 +173,7 @@ function ChevronDown(props) {
 }
 
 // src/components/Button/Button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = cva("ddga-button", {
   variants: {
     variant: {
@@ -121,6 +209,7 @@ function Button({
   startIcon,
   endIcon,
   iconFlip,
+  asChild,
   className,
   children,
   type = "button",
@@ -134,11 +223,12 @@ function Button({
     }
   }
   const isDisabled = disabled || loading;
-  return /* @__PURE__ */ jsxs(
-    "button",
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+  return /* @__PURE__ */ jsxs2(
+    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",
@@ -151,7 +241,12 @@ function Button({
       children: [
         loading && /* @__PURE__ */ jsx2(Spinner, { "aria-hidden": "true" }),
         !loading && startIcon && /* @__PURE__ */ jsx2("span", { className: cn("ddga-button__icon", iconFlip && "ddga-icon-flip"), "aria-hidden": "true", children: startIcon }),
-        children != null && children !== "" && /* @__PURE__ */ jsx2("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__ */ jsx2(SlotPrimitive.Slottable, { children })
+        ) : children != null && children !== "" && /* @__PURE__ */ jsx2("span", { className: "ddga-button__text", children }),
         !loading && endIcon && /* @__PURE__ */ jsx2("span", { className: cn("ddga-button__icon", iconFlip && "ddga-icon-flip"), "aria-hidden": "true", children: endIcon })
       ]
     }
@@ -212,7 +307,7 @@ function FieldMessage({ id, variant, children }) {
 }
 
 // src/components/Input/Input.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var inputVariants = cva2("ddga-input", {
   variants: {
     size: {
@@ -251,12 +346,12 @@ function Input({
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  return /* @__PURE__ */ jsxs2("div", { "data-slot": "input-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs2("label", { htmlFor: fieldId, className: "ddga-input__label", children: [
+  return /* @__PURE__ */ jsxs3("div", { "data-slot": "input-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { htmlFor: fieldId, className: "ddga-input__label", children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "ddga-input__required", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         "data-slot": "input-control",
@@ -298,7 +393,7 @@ function Input({
 
 // src/components/Textarea/Textarea.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var textareaVariants = cva3("ddga-textarea", {
   variants: {
     size: {
@@ -344,8 +439,8 @@ function Textarea({
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  return /* @__PURE__ */ jsxs3("div", { "data-slot": "textarea-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { htmlFor: fieldId, className: "ddga-textarea__label", children: [
+  return /* @__PURE__ */ jsxs4("div", { "data-slot": "textarea-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs4("label", { htmlFor: fieldId, className: "ddga-textarea__label", children: [
       label,
       required && /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "ddga-textarea__required", children: "*" })
     ] }),
@@ -368,7 +463,7 @@ function Textarea({
 // src/components/Checkbox/Checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var checkboxVariants = cva4("ddga-checkbox", {
   variants: {
     size: {
@@ -404,8 +499,8 @@ function Checkbox({
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  return /* @__PURE__ */ jsxs4("div", { "data-slot": "checkbox-field", className: "ddga-field", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "ddga-checkbox-row", children: [
+  return /* @__PURE__ */ jsxs5("div", { "data-slot": "checkbox-field", className: "ddga-field", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "ddga-checkbox-row", children: [
       /* @__PURE__ */ jsx6(
         CheckboxPrimitive.Root,
         {
@@ -414,7 +509,7 @@ function Checkbox({
           "data-slot": "checkbox",
           required,
           className: cn(checkboxVariants({ size, error: hasError }), className),
-          children: /* @__PURE__ */ jsxs4(
+          children: /* @__PURE__ */ jsxs5(
             CheckboxPrimitive.Indicator,
             {
               "data-slot": "checkbox-indicator",
@@ -427,7 +522,7 @@ function Checkbox({
           )
         }
       ),
-      label && /* @__PURE__ */ jsxs4("label", { htmlFor: fieldId, className: "ddga-checkbox__label", children: [
+      label && /* @__PURE__ */ jsxs5("label", { htmlFor: fieldId, className: "ddga-checkbox__label", children: [
         label,
         required && /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "ddga-checkbox__required", children: "*" })
       ] })
@@ -441,7 +536,7 @@ function Checkbox({
 import { useId as useId2 } from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var radioGroupVariants = cva5("ddga-radio-group", {
   variants: {
     size: {
@@ -486,8 +581,8 @@ function RadioGroup({
     "aria-labelledby": props["aria-labelledby"]
   });
   const labelId = `${fieldId}-label`;
-  return /* @__PURE__ */ jsxs5("div", { "data-slot": "radio-group-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs5("span", { id: labelId, className: "ddga-radio-group__label", children: [
+  return /* @__PURE__ */ jsxs6("div", { "data-slot": "radio-group-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs6("span", { id: labelId, className: "ddga-radio-group__label", children: [
       label,
       required && /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "ddga-radio-group__required", children: "*" })
     ] }),
@@ -512,7 +607,7 @@ function RadioGroup({
 function Radio({ id: externalId, label, className, ...props }) {
   const generatedId = useId2();
   const itemId = externalId ?? generatedId;
-  return /* @__PURE__ */ jsxs5("div", { className: "ddga-radio-row", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "ddga-radio-row", children: [
     /* @__PURE__ */ jsx7(
       RadioGroupPrimitive.Item,
       {
@@ -537,7 +632,7 @@ function Radio({ id: externalId, label, className, ...props }) {
 // src/components/Switch/Switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
 import { cva as cva6 } from "class-variance-authority";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var switchVariants = cva6("ddga-switch", {
   variants: {
     size: {
@@ -573,8 +668,8 @@ function Switch({
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"]
   });
-  return /* @__PURE__ */ jsxs6("div", { "data-slot": "switch-field", className: "ddga-field", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "ddga-switch-row", children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-slot": "switch-field", className: "ddga-field", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "ddga-switch-row", children: [
       /* @__PURE__ */ jsx8(
         SwitchPrimitive.Root,
         {
@@ -586,7 +681,7 @@ function Switch({
           children: /* @__PURE__ */ jsx8(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ddga-switch__thumb" })
         }
       ),
-      label && /* @__PURE__ */ jsxs6("label", { htmlFor: fieldId, className: "ddga-switch__label", children: [
+      label && /* @__PURE__ */ jsxs7("label", { htmlFor: fieldId, className: "ddga-switch__label", children: [
         label,
         required && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "ddga-switch__required", children: "*" })
       ] })
@@ -613,7 +708,7 @@ function useDga() {
 }
 
 // src/components/Select/Select.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var selectTriggerVariants = cva7("ddga-select-trigger", {
   variants: {
     size: {
@@ -653,13 +748,13 @@ function Select({
   });
   const ctx = useContext2(DgaContext);
   const portalContainer = ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ jsxs7("div", { "data-slot": "select-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs7("label", { htmlFor: fieldId, className: "ddga-select__label", children: [
+  return /* @__PURE__ */ jsxs8("div", { "data-slot": "select-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs8("label", { htmlFor: fieldId, className: "ddga-select__label", children: [
       label,
       required && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "ddga-select__required", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs7(SelectPrimitive.Root, { required, ...rootProps, children: [
-      /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(SelectPrimitive.Root, { required, ...rootProps, children: [
+      /* @__PURE__ */ jsxs8(
         SelectPrimitive.Trigger,
         {
           ...controlProps,
@@ -687,7 +782,7 @@ function Select({
   ] });
 }
 function SelectItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     SelectPrimitive.Item,
     {
       ...props,
@@ -701,11 +796,451 @@ function SelectItem({ className, children, ...props }) {
   );
 }
 
+// src/components/Tooltip/Tooltip.tsx
+import { useContext as useContext3 } from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var tooltipContentVariants = cva8("ddga-tooltip", {
+  variants: {
+    size: {
+      sm: "ddga-tooltip--sm",
+      md: "ddga-tooltip--md"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Tooltip(props) {
+  return /* @__PURE__ */ jsx10(TooltipPrimitive.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx10(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", className, ...props });
+}
+function TooltipContent({
+  size,
+  arrow = true,
+  sideOffset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ctx = useContext3(DgaContext);
+  const portalContainer = ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsx10(TooltipPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs9(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(tooltipContentVariants({ size }), className),
+      ...props,
+      children: [
+        children,
+        arrow ? /* @__PURE__ */ jsx10(TooltipPrimitive.Arrow, { className: "ddga-tooltip__arrow" }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/Alert/Alert.tsx
+import { useState } from "react";
+import { Slot as SlotPrimitive2 } from "radix-ui";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var alertVariants = cva9("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__ */ jsx11(Info, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx11(Check, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx11(AlertTriangle, { "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ jsx11(AlertCircle, { "aria-hidden": "true" })
+};
+function Alert({
+  variant,
+  asChild,
+  icon,
+  dismissible,
+  open: controlledOpen,
+  onDismiss,
+  live,
+  closeLabel = "Dismiss",
+  className,
+  children,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  if (!open) return null;
+  const Comp = asChild ? SlotPrimitive2.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__ */ jsxs10(
+    Comp,
+    {
+      "data-slot": "alert",
+      "data-variant": variant ?? "info",
+      className: cn(alertVariants({ variant }), className),
+      ...liveProps,
+      ...props,
+      children: [
+        resolvedIcon ? /* @__PURE__ */ jsx11("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__ */ jsx11(SlotPrimitive2.Slottable, { children })
+        ) : /* @__PURE__ */ jsx11("div", { className: "ddga-alert__body", children }),
+        dismissible ? /* @__PURE__ */ jsx11(
+          "button",
+          {
+            type: "button",
+            className: "ddga-alert__close",
+            "aria-label": closeLabel,
+            onClick: handleDismiss,
+            children: /* @__PURE__ */ jsx11(Close, { "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function AlertTitle({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive2.Slot : "h5";
+  return /* @__PURE__ */ jsx11(Comp, { "data-slot": "alert-title", className: cn("ddga-alert__title", className), ...props });
+}
+function AlertDescription({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive2.Slot : "p";
+  return /* @__PURE__ */ jsx11(
+    Comp,
+    {
+      "data-slot": "alert-description",
+      className: cn("ddga-alert__description", className),
+      ...props
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+import { useContext as useContext4 } from "react";
+import { Dialog as DialogPrimitive, Slot as SlotPrimitive3 } from "radix-ui";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var modalContentVariants = cva10("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__ */ jsx12(DialogPrimitive.Root, { ...props });
+}
+function ModalTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Trigger, { "data-slot": "modal-trigger", className, ...props });
+}
+function ModalContent({
+  size,
+  showCloseButton = true,
+  closeLabel = "Close",
+  className,
+  children,
+  ...props
+}) {
+  const ctx = useContext4(DgaContext);
+  const portalContainer = ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsxs11(DialogPrimitive.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ jsx12(DialogPrimitive.Overlay, { className: "ddga-modal__overlay", "data-slot": "modal-overlay" }),
+    /* @__PURE__ */ jsxs11(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "modal-content",
+        className: cn(modalContentVariants({ size }), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsx12(
+            DialogPrimitive.Close,
+            {
+              className: "ddga-modal__close",
+              "aria-label": closeLabel,
+              "data-slot": "modal-close-x",
+              children: /* @__PURE__ */ jsx12(Close, { "aria-hidden": "true" })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function ModalHeader({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive3.Slot : "div";
+  return /* @__PURE__ */ jsx12(Comp, { "data-slot": "modal-header", className: cn("ddga-modal__header", className), ...props });
+}
+function ModalTitle({ asChild, className, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Title,
+    {
+      asChild,
+      "data-slot": "modal-title",
+      className: cn("ddga-modal__title", className),
+      ...props
+    }
+  );
+}
+function ModalDescription({ asChild, className, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Description,
+    {
+      asChild,
+      "data-slot": "modal-description",
+      className: cn("ddga-modal__description", className),
+      ...props
+    }
+  );
+}
+function ModalFooter({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive3.Slot : "div";
+  return /* @__PURE__ */ jsx12(Comp, { "data-slot": "modal-footer", className: cn("ddga-modal__footer", className), ...props });
+}
+function ModalClose({ className, ...props }) {
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Close, { "data-slot": "modal-close", className, ...props });
+}
+
+// src/components/Toast/Toast.tsx
+import { useSyncExternalStore } from "react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import { cva as cva11 } from "class-variance-authority";
+
+// src/components/Toast/toast-store.ts
+import "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
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var toastVariants = cva11("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 = cva11("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__ */ jsx13(Info, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx13(Check, { "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsx13(AlertTriangle, { "aria-hidden": "true" }),
+  destructive: /* @__PURE__ */ jsx13(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 = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const resolvedSwipe = swipeDirection ?? (position.startsWith("top") ? "up" : "down");
+  return /* @__PURE__ */ jsxs12(ToastPrimitive.Provider, { duration, swipeDirection: resolvedSwipe, children: [
+    toasts.map((t) => /* @__PURE__ */ jsx13(
+      ToastItem,
+      {
+        toast: t,
+        store,
+        closeButton,
+        closeLabel,
+        hideIcon
+      },
+      t.id
+    )),
+    /* @__PURE__ */ jsx13(
+      ToastPrimitive.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__ */ jsxs12(
+    ToastPrimitive.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__ */ jsx13("span", { className: "ddga-toast__icon", children: icon }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: "ddga-toast__body", children: [
+          t.title ? /* @__PURE__ */ jsx13(ToastPrimitive.Title, { className: "ddga-toast__title", children: t.title }) : null,
+          t.description ? /* @__PURE__ */ jsx13(ToastPrimitive.Description, { className: "ddga-toast__description", children: t.description }) : null,
+          t.action ? /* @__PURE__ */ jsx13(
+            ToastPrimitive.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__ */ jsx13(ToastPrimitive.Close, { className: "ddga-toast__close", "aria-label": closeLabel, children: /* @__PURE__ */ jsx13(Close, { "aria-hidden": "true" }) }) : null
+      ]
+    }
+  );
+}
+
 // src/providers/DgaProvider.tsx
-import { useState, useMemo, useContext as useContext3 } from "react";
-import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive } from "radix-ui";
+import { useState as useState2, useMemo, useContext as useContext5 } from "react";
+import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive2 } from "radix-ui";
 import { buildTheme } from "@dev-dga/tokens";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function DgaProvider({
   dir = "ltr",
   locale,
@@ -716,17 +1251,17 @@ function DgaProvider({
   style: consumerStyle,
   children
 }) {
-  const parentCtx = useContext3(DgaContext);
+  const parentCtx = useContext5(DgaContext);
   const isNested = parentCtx !== null;
-  const [rootEl, setRootEl] = useState(null);
+  const [rootEl, setRootEl] = useState2(null);
   const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
   const ctxValue = useMemo(
     () => ({ dir, locale: resolvedLocale, mode, rootEl }),
     [dir, resolvedLocale, mode, rootEl]
   );
   const themeVars = useMemo(() => theme ? buildTheme(theme) : null, [theme]);
-  const inner = /* @__PURE__ */ jsx10(DirectionPrimitive.Provider, { dir, children });
-  return /* @__PURE__ */ jsx10(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx10(
+  const inner = /* @__PURE__ */ jsx14(DirectionPrimitive.Provider, { dir, children });
+  return /* @__PURE__ */ jsx14(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx14(
     Component,
     {
       ref: setRootEl,
@@ -736,7 +1271,7 @@ function DgaProvider({
       "data-theme": mode,
       className,
       style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
-      children: isNested ? inner : /* @__PURE__ */ jsx10(TooltipPrimitive.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
+      children: isNested ? inner : /* @__PURE__ */ jsx14(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -746,26 +1281,50 @@ function useDir() {
   return useDga().dir;
 }
 export {
+  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