@dev-dga/react 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -20,23 +20,59 @@ 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
+  useDir: () => useDir,
+  useFieldA11y: () => useFieldA11y
 });
 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
@@ -102,6 +138,111 @@ 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",
+    {
+      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: "m6 9 6 6 6-6" })
+    }
+  );
+}
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -140,6 +281,7 @@ function Button({
   startIcon,
   endIcon,
   iconFlip,
+  asChild,
   className,
   children,
   type = "button",
@@ -153,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",
@@ -170,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 })
       ]
     }
@@ -180,7 +328,7 @@ function Button({
 // src/components/Input/Input.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 
-// src/internal/field/use-field-a11y.ts
+// src/field/use-field-a11y.ts
 var import_react2 = require("react");
 function isPresent(value) {
   return value != null && value !== "";
@@ -190,7 +338,7 @@ function useFieldA11y(options) {
   const fieldId = options.id ?? generatedId;
   const helperId = `${fieldId}-helper`;
   const errorId = `${fieldId}-error`;
-  const hasError = !!options.error;
+  const hasError = !!options.error || isPresent(options.errorMessage);
   const hasErrorMessage = hasError && isPresent(options.errorMessage);
   const hasHelper = !hasErrorMessage && isPresent(options.helperText);
   if (process.env.NODE_ENV === "development" && !options.label) {
@@ -215,7 +363,7 @@ function useFieldA11y(options) {
   };
 }
 
-// src/internal/field/FieldMessage.tsx
+// src/field/FieldMessage.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function FieldMessage({ id, variant, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -385,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", {
@@ -426,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,
@@ -434,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",
@@ -456,52 +604,746 @@ function Checkbox({
   ] });
 }
 
-// src/providers/DgaProvider.tsx
-var import_react4 = require("react");
-var import_radix_ui2 = require("radix-ui");
+// src/components/Radio/Radio.tsx
+var import_react3 = require("react");
+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", {
+  variants: {
+    size: {
+      sm: "ddga-radio-group--sm",
+      md: "ddga-radio-group--md"
+    },
+    orientation: {
+      vertical: "ddga-radio-group--vertical",
+      horizontal: "ddga-radio-group--horizontal"
+    },
+    error: {
+      true: "ddga-radio-group--error"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "vertical"
+  }
+});
+var radioVariants = (0, import_class_variance_authority5.cva)("ddga-radio");
+function RadioGroup({
+  id: externalId,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  size,
+  orientation,
+  required,
+  className,
+  children,
+  ...props
+}) {
+  const { errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps, fieldId } = useFieldA11y({
+    name: "RadioGroup",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"]
+  });
+  const labelId = `${fieldId}-label`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-slot": "radio-group-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { id: labelId, className: "ddga-radio-group__label", children: [
+      label,
+      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_ui3.RadioGroup.Root,
+      {
+        ...props,
+        "aria-invalid": controlProps["aria-invalid"],
+        "aria-describedby": controlProps["aria-describedby"],
+        "aria-labelledby": label ? labelId : props["aria-labelledby"],
+        orientation: orientation === "horizontal" ? "horizontal" : "vertical",
+        required,
+        "data-slot": "radio-group",
+        className: cn(radioGroupVariants({ size, orientation, error: hasError }), className),
+        children
+      }
+    ),
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+function Radio({ id: externalId, label, className, ...props }) {
+  const generatedId = (0, import_react3.useId)();
+  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_ui3.RadioGroup.Item,
+      {
+        ...props,
+        id: itemId,
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_radix_ui3.RadioGroup.Indicator,
+          {
+            "data-slot": "radio-indicator",
+            className: "ddga-radio__indicator",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ddga-radio__dot", "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: itemId, className: "ddga-radio__label", children: label })
+  ] });
+}
+
+// src/components/Switch/Switch.tsx
+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", {
+  variants: {
+    size: {
+      sm: "ddga-switch--sm",
+      md: "ddga-switch--md"
+    },
+    error: {
+      true: "ddga-switch--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Switch({
+  id: externalId,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  size,
+  required,
+  className,
+  ...props
+}) {
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
+    name: "Switch",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"]
+  });
+  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_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_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: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "ddga-switch__required", children: "*" })
+      ] })
+    ] }),
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+
+// src/components/Select/Select.tsx
+var import_react5 = require("react");
+var import_radix_ui5 = require("radix-ui");
+var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/providers/DgaContext.ts
-var import_react3 = require("react");
-var DgaContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var DgaContext = (0, import_react4.createContext)(null);
 function useDga() {
-  const ctx = (0, import_react3.useContext)(DgaContext);
+  const ctx = (0, import_react4.useContext)(DgaContext);
   if (!ctx) {
     throw new Error("useDga must be used within a <DgaProvider>");
   }
   return ctx;
 }
 
+// src/components/Select/Select.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var selectTriggerVariants = (0, import_class_variance_authority7.cva)("ddga-select-trigger", {
+  variants: {
+    size: {
+      sm: "ddga-select-trigger--sm",
+      md: "ddga-select-trigger--md"
+    },
+    error: {
+      true: "ddga-select-trigger--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Select({
+  id: externalId,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  size,
+  required,
+  placeholder,
+  className,
+  children,
+  ...rootProps
+}) {
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
+    name: "Select",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": rootProps["aria-label"],
+    "aria-labelledby": rootProps["aria-labelledby"]
+  });
+  const ctx = (0, import_react5.useContext)(DgaContext);
+  const portalContainer = ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-slot": "select-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: fieldId, className: "ddga-select__label", children: [
+      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_ui5.Select.Root, { required, ...rootProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        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_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_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_ui5.Select.Viewport, { className: "ddga-select-viewport", children })
+        }
+      ) })
+    ] }),
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    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_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/components/Tooltip/Tooltip.tsx
+var import_react6 = require("react");
+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_jsx_runtime7 = require("react/jsx-runtime");
+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,
   mode = "light",
+  theme,
   as: Component = "div",
   className,
   style: consumerStyle,
   children
 }) {
-  const parentCtx = (0, import_react4.useContext)(DgaContext);
+  const parentCtx = (0, import_react11.useContext)(DgaContext);
   const isNested = parentCtx !== null;
-  const rootRef = (0, import_react4.useRef)(null);
+  const [rootEl, setRootEl] = (0, import_react11.useState)(null);
   const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
-  const ctxValue = (0, import_react4.useMemo)(
-    () => ({ dir, locale: resolvedLocale, mode, rootRef }),
-    [dir, resolvedLocale, mode]
+  const ctxValue = (0, import_react11.useMemo)(
+    () => ({ dir, locale: resolvedLocale, mode, rootEl }),
+    [dir, resolvedLocale, mode, rootEl]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui2.Direction.Provider, { dir, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.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: rootRef,
+      ref: setRootEl,
       dir,
       lang: resolvedLocale,
       "data-slot": "dga-root",
       "data-theme": mode,
       className,
-      style: { colorScheme: mode, ...consumerStyle },
-      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui2.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
+      style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
+      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui10.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -512,17 +1354,52 @@ 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
+  useDir,
+  useFieldA11y
 });
 //# sourceMappingURL=index.cjs.map