npm - @dev-dga/react - Versions diffs - 0.2.0 → 0.3.0 - Mend

@dev-dga/react 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,53 @@
 # @dev-dga/react
+## 0.3.0
+### Breaking Changes
+- **`DgaContextValue.rootRef` (RefObject) → `rootEl` (`HTMLElement | null`).** The `useDga()` return shape changed: `rootRef.current` is now `rootEl` directly. Callers reading `useDga().rootRef` will see a TypeScript error. Reason: the previous `useRef`-based exposure had a race — `useRef` doesn't trigger re-renders when the element mounts, so portal-rendering components reading `rootRef.current` raced to `<body>` on the first commit. The new state-backed callback ref triggers a re-render once the element is available. Pre-1.0 release; almost certainly no external consumers existed.
+### Minor Changes
+- **Theming API — `theme` prop on `<DgaProvider>`.** Accepts a `DgaTheme` (from `@dev-dga/tokens`'s new `buildTheme()`); memoizes the resulting CSS vars and merges them into the root element's `style`. Three input shapes supported: palette name (`'lavender'`), single CSS color (hover/active derived via `color-mix()` — requires Safari 16.4+), or explicit `{ base, hover, active, foreground? }` triplet. Consumer's manual `style` override still wins (escape hatch preserved):
+  ```tsx
+  // palette name
+  <DgaProvider theme={{ primary: 'lavender' }}>{…}</DgaProvider>
+  // single hex (derives hover + active)
+  <DgaProvider theme={{ primary: '#7C3AED' }}>{…}</DgaProvider>
+  // explicit triplet
+  <DgaProvider theme={{ primary: { base: '#A', hover: '#B', active: '#C', foreground: '#D' } }}>
+    {…}
+  </DgaProvider>
+  ```
+  Theme types re-exported from `@dev-dga/react`: `DgaTheme`, `PaletteName`, `ThemeColor`.
+- **Public field primitive — `useFieldA11y` + `FieldMessage`.** Promoted from `internal/` to the public surface. The same primitive every shipped form control uses; lets consumers build custom fields (date picker, file upload, combobox) with the library's id generation, helper/error precedence, ARIA wiring, and dev-time accessible-name warning. Exports: `useFieldA11y`, `FieldMessage`, `UseFieldA11yOptions`, `FieldA11y`, `FieldMessageProps`.
+- **Three new components on the field primitive.** Each ships with tests, an autodocs story (EN + RTL/AR copy), and per-component CSS in `@dev-dga/css`:
+  - **`RadioGroup` + `Radio`** — Radix RadioGroup. Compound shape with `label`/`helperText`/`error`/`errorMessage`/`size`/`orientation` on the group; size + error cascade from group to items via CSS. Group label associated via `aria-labelledby`.
+  - **`Switch`** — single boolean. Same `useFieldA11y` wiring as Checkbox.
+  - **`Select` + `SelectItem`** — Radix Select. Closed shape — Trigger + Portal + Content + Viewport rendered internally; consumers compose with `<SelectItem>` children. Trigger height matches `Input` (32/36) so triggers + text inputs align in form rows. Content panel width matches trigger via `--radix-select-trigger-width`.
+- **`asChild` composition on Button (Radix Slot).** New `asChild?: boolean` prop. When true, renders via `SlotPrimitive.Slot` with `Slottable` wrapping `children` so icons land as siblings inside the consumer's element. Unblocks router-link composition without invalid `<button><a>` nesting:
+  ```tsx
+  <Button asChild>
+    <Link href="/about">About</Link>
+  </Button>
+  ```
+  In Slot mode the `type` and native `disabled` attributes are dropped (no effect on non-form-controls); the disabled state still applies via `aria-disabled` + `tabIndex={-1}`. `@dev-dga/css` matches `[aria-disabled='true']` alongside `:disabled` so the visual disabled state works on any rendered element. Convention set for future visual components (Card, Badge, Avatar, Alert, …); form-control components that already wrap Radix primitives skip `asChild` — the primitive handles Slot internally.
+- **Select dropdown anchored to the DgaProvider root for theme + dark-mode inheritance.** Radix Portal defaults to `<body>`, which lives above the `DgaProvider` root in the DOM tree — `data-theme`, custom theme vars set via the new `theme` prop, and `.ddga-theme-*` classes set on the root never reached the dropdown. Select now re-anchors via `<Select.Portal container={ctx.rootEl}>`. Same pattern documented in `DgaContext.ts` for future portal-using components (Tooltip / Modal / Toast / Popover / DropdownMenu).
+### Patch Changes
+- **`errorMessage` alone now sets `aria-invalid` and renders the message.** Previously, `useFieldA11y` (and the form components that use it) gated rendering on `error: true`, so passing `errorMessage="…"` without `error` was a silent no-op — a footgun. `hasError` is now derived as `error || isPresent(errorMessage)`. The `error` boolean is still useful for the message-less invalid case (form-level validation marking the field invalid without per-field copy). Backward-compatible for callers passing both `error` + `errorMessage`.
 ## 0.2.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 React 19 components for the **DGA (Digital Government Authority)** design system , Saudi Arabia's national reference for government digital platforms.
-Accessible (WCAG 2.2 AA), RTL-native, dark-mode ready. **Ships no CSS** , pair with `@dev-dga/css`.
+Accessible (WCAG 2.2 AA), RTL-native, dark-mode ready, themable. **Ships no CSS** , pair with `@dev-dga/css`.
 ## Install
@@ -16,29 +16,77 @@ Requires `react@^19` and `react-dom@^19` (peer dependencies).
 ```tsx
 import '@dev-dga/css'; // required , components ship no styles
-import { DgaProvider, Button, Input, Textarea, Checkbox } from '@dev-dga/react';
+import { DgaProvider, Button, Input, Select, SelectItem, Switch } from '@dev-dga/react';
 export default function App() {
   return (
     <DgaProvider>
-      <Button>Hello</Button>
       <Input label="Email" type="email" helperText="We'll never share it." />
+      <Select label="Country" placeholder="Choose…">
+        <SelectItem value="sa">Saudi Arabia</SelectItem>
+        <SelectItem value="ae">United Arab Emirates</SelectItem>
+      </Select>
+      <Switch label="Subscribe to the newsletter" />
+      <Button>Submit</Button>
     </DgaProvider>
   );
 }
 ```
-For RTL or dark mode, configure the provider:
+For RTL, dark mode, or a brand color, configure the provider:
 ```tsx
-<DgaProvider dir="rtl" mode="dark">
+<DgaProvider dir="rtl" mode="dark" theme={{ primary: 'lavender' }}>
   {/* … */}
 </DgaProvider>
 ```
+## Compose with router links (`asChild`)
+Visual components support `asChild` so you can render them as your router's `Link` (Next.js, React Router, TanStack Router, …) without invalid `<button><a>` nesting:
+```tsx
+<Button asChild>
+  <Link href="/about">About</Link>
+</Button>
+```
+## Build your own field
+`useFieldA11y` + `FieldMessage` are public , the same primitives every shipped form control uses. Build a custom field (date picker, file upload, combobox) with the library's a11y wiring, helper/error precedence, and dev-time warnings:
+```tsx
+import { useFieldA11y, FieldMessage } from '@dev-dga/react';
+function MyField({ label, helperText, error, errorMessage, ...rest }) {
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =
+    useFieldA11y({ name: 'MyField', label, error, errorMessage, helperText });
+  return (
+    <div className="ddga-field">
+      {label && <label htmlFor={fieldId}>{label}</label>}
+      <input {...controlProps} {...rest} />
+      {hasErrorMessage && (
+        <FieldMessage id={errorId} variant="error">
+          {errorMessage}
+        </FieldMessage>
+      )}
+      {hasHelper && (
+        <FieldMessage id={helperId} variant="helper">
+          {helperText}
+        </FieldMessage>
+      )}
+    </div>
+  );
+}
+```
 ## Components
-`Button` · `Input` · `Textarea` · `Checkbox` · `DgaProvider` , plus `cn` (clsx), `useDga`, and `useDir`.
+**Form:** `Button` · `Input` · `Textarea` · `Checkbox` · `RadioGroup` + `Radio` · `Switch` · `Select` + `SelectItem`
+**Primitives:** `DgaProvider` · `useDga` · `useDir` · `useFieldA11y` · `FieldMessage` · `cn`
+**Theming types:** `DgaTheme` · `PaletteName` · `ThemeColor`
 ## Docs

package/dist/index.cjs CHANGED Viewed

@@ -23,15 +23,26 @@ __export(src_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   DgaProvider: () => DgaProvider,
+  FieldMessage: () => FieldMessage,
   Input: () => Input,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  Select: () => Select,
+  SelectItem: () => SelectItem,
+  Switch: () => Switch,
   Textarea: () => Textarea,
   buttonVariants: () => buttonVariants,
   checkboxVariants: () => checkboxVariants,
   cn: () => cn,
   inputVariants: () => inputVariants,
+  radioGroupVariants: () => radioGroupVariants,
+  radioVariants: () => radioVariants,
+  selectTriggerVariants: () => selectTriggerVariants,
+  switchVariants: () => switchVariants,
   textareaVariants: () => textareaVariants,
   useDga: () => useDga,
-  useDir: () => useDir
+  useDir: () => useDir,
+  useFieldA11y: () => useFieldA11y
 });
 module.exports = __toCommonJS(src_exports);
@@ -102,6 +113,24 @@ function Minus(props) {
     }
   );
 }
+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");
@@ -180,7 +209,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 +219,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 +244,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)(
@@ -456,52 +485,306 @@ function Checkbox({
   ] });
 }
-// src/providers/DgaProvider.tsx
-var import_react4 = require("react");
+// src/components/Radio/Radio.tsx
+var import_react3 = require("react");
 var import_radix_ui2 = 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_ui2.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_ui2.RadioGroup.Item,
+      {
+        ...props,
+        id: itemId,
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_radix_ui2.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_ui3 = 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_ui3.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" })
+        }
+      ),
+      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_ui4 = 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_ui4.Select.Root, { required, ...rootProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_radix_ui4.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_ui4.Select.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_radix_ui4.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 })
+        }
+      ) })
+    ] }),
+    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_ui4.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" }) })
+      ]
+    }
+  );
+}
 // src/providers/DgaProvider.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_radix_ui5 = require("radix-ui");
+var import_tokens = require("@dev-dga/tokens");
+var import_jsx_runtime10 = 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_react6.useContext)(DgaContext);
   const isNested = parentCtx !== null;
-  const rootRef = (0, import_react4.useRef)(null);
+  const [rootEl, setRootEl] = (0, import_react6.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_react6.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_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)(
     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_runtime10.jsx)(import_radix_ui5.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -515,14 +798,25 @@ function useDir() {
   Button,
   Checkbox,
   DgaProvider,
+  FieldMessage,
   Input,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectItem,
+  Switch,
   Textarea,
   buttonVariants,
   checkboxVariants,
   cn,
   inputVariants,
+  radioGroupVariants,
+  radioVariants,
+  selectTriggerVariants,
+  switchVariants,
   textareaVariants,
   useDga,
-  useDir
+  useDir,
+  useFieldA11y
 });
 //# sourceMappingURL=index.cjs.map