@dev-dga/react 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -2,7 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { Checkbox as Checkbox$1 } from 'radix-ui';
+import { Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1 } from 'radix-ui';
+import { DgaTheme } from '@dev-dga/tokens';
+export { DgaTheme, PaletteName, ThemeColor } from '@dev-dga/tokens';
 import { ClassValue } from 'clsx';
 
 declare const buttonVariants: (props?: ({
@@ -16,8 +18,24 @@ interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeo
     endIcon?: ReactNode;
     /** Flip start/end icons horizontally in RTL (for chevrons, arrows, etc.) */
     iconFlip?: boolean;
+    /**
+     * Render as the single child element instead of a `<button>`. Lets consumers
+     * compose Button with router links (`<Button asChild><Link href="…">…</Link></Button>`)
+     * without `<button><a>` invalid nesting.
+     *
+     * The `type` and native `disabled` attributes are dropped in this mode
+     * (they're meaningless on non-button elements) , the disabled visual + a11y
+     * state still works via `aria-disabled` + `tabIndex={-1}`. button.css
+     * matches on `[aria-disabled='true']` alongside `:disabled` so the styling
+     * applies on any element.
+     *
+     * Consumer remains responsible for preventing the underlying action when
+     * disabled (e.g., calling `e.preventDefault()` in the Link's onClick),
+     * since native `disabled` doesn't gate clicks on non-form-controls.
+     */
+    asChild?: boolean;
 }
-declare function Button({ variant, size, fullWidth, loading, disabled, startIcon, endIcon, iconFlip, className, children, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ variant, size, fullWidth, loading, disabled, startIcon, endIcon, iconFlip, asChild, className, children, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -34,14 +52,14 @@ interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>, Varian
     error?: boolean;
     /**
      * Content rendered inside the field, before the input (icon or short text,
-     * e.g. a search glyph or `https://`). May be interactive — it is NOT
+     * e.g. a search glyph or `https://`). May be interactive , it is NOT
      * `aria-hidden`. Mark purely-decorative icons `aria-hidden` yourself.
      */
     startAdornment?: ReactNode;
     /**
      * Content rendered inside the field, after the input. Compose a clear
      * button or password-reveal toggle here with `<Button size="icon-sm">`
-     * — the 28px in-field icon size that fits the field without overflow.
+     * , the 28px in-field icon size that fits the field without overflow.
      */
     endAdornment?: ReactNode;
 }
@@ -80,26 +98,165 @@ interface CheckboxProps extends Omit<React.ComponentProps<typeof Checkbox$1.Root
 }
 declare function Checkbox({ id: externalId, label, helperText, errorMessage, error, size, required, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
+declare const radioGroupVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const radioVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface RadioGroupProps extends Omit<React.ComponentProps<typeof RadioGroup$1.Root>, 'children' | 'orientation'>, Pick<VariantProps<typeof radioGroupVariants>, 'size' | 'orientation'> {
+    /** Group label, sits above the rows. Associated to the group via aria-labelledby. */
+    label?: ReactNode;
+    /** Hint shown below the group. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the group when `error` is true (or when only `errorMessage` is set). */
+    errorMessage?: ReactNode;
+    /** Marks the group invalid: sets aria-invalid and applies error styling. */
+    error?: boolean;
+    /** `<Radio>` children. */
+    children: ReactNode;
+}
+interface RadioProps extends Omit<React.ComponentProps<typeof RadioGroup$1.Item>, 'children'> {
+    /** Visible label for this radio, sits beside the circle, associated via htmlFor/id. */
+    label?: ReactNode;
+}
+declare function RadioGroup({ id: externalId, label, helperText, errorMessage, error, size, orientation, required, className, children, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function Radio({ id: externalId, label, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends Omit<React.ComponentProps<typeof Switch$1.Root>, 'children'>, VariantProps<typeof switchVariants> {
+    /** Visible label, sits beside the track, associated via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the row. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the row when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+}
+declare function Switch({ id: externalId, label, helperText, errorMessage, error, size, required, className, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+declare const selectTriggerVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SelectProps extends Omit<React.ComponentProps<typeof Select$1.Root>, 'children' | 'dir'>, VariantProps<typeof selectTriggerVariants> {
+    /** Visible label above the trigger, associated via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the trigger. Hidden while an error message is showing. */
+    helperText?: ReactNode;
+    /** Message shown below the trigger when `error` is true. */
+    errorMessage?: ReactNode;
+    /** Marks the field invalid: sets `aria-invalid` and error styling. */
+    error?: boolean;
+    /** Placeholder shown in the trigger when no value is selected. */
+    placeholder?: ReactNode;
+    /** `<SelectItem>` children, rendered inside the dropdown panel. */
+    children: ReactNode;
+    /** Caller-supplied id for the trigger; falls back to a generated one. */
+    id?: string;
+    /** Forwarded to the trigger (the focusable control). */
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+interface SelectItemProps extends React.ComponentProps<typeof Select$1.Item> {
+    /** The visible label for this item. */
+    children: ReactNode;
+}
+declare function Select({ id: externalId, label, helperText, errorMessage, error, size, required, placeholder, className, children, ...rootProps }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectItemProps): react_jsx_runtime.JSX.Element;
+
 type DgaRootElement = 'div' | 'main' | 'nav' | 'section' | 'article' | 'aside' | 'header' | 'footer';
 interface DgaProviderProps {
     dir?: 'ltr' | 'rtl';
     locale?: string;
     mode?: 'light' | 'dark';
+    /**
+     * Brand theme. `theme.primary` accepts a palette name (`'lavender'`),
+     * any CSS color string (`'#7C3AED'` , hover/active auto-derived via
+     * `color-mix()`), or an explicit `{ base, hover, active, foreground? }`
+     * triplet. The override-object pattern (`style={{ '--ddga-color-primary':
+     * '...' }}`) still works , `style` wins over `theme`.
+     */
+    theme?: DgaTheme;
     as?: DgaRootElement;
     className?: string;
     style?: React.CSSProperties;
     children: React.ReactNode;
 }
-declare function DgaProvider({ dir, locale, mode, as: Component, className, style: consumerStyle, children, }: DgaProviderProps): react_jsx_runtime.JSX.Element;
+declare function DgaProvider({ dir, locale, mode, theme, as: Component, className, style: consumerStyle, children, }: DgaProviderProps): react_jsx_runtime.JSX.Element;
 
 interface DgaContextValue {
     dir: 'ltr' | 'rtl';
     locale: string;
     mode: 'light' | 'dark';
-    rootRef: React.RefObject<HTMLElement | null>;
+    /**
+     * The DgaProvider root element. Portal-rendering components (Select, and
+     * future Tooltip / Modal / Toast / Popover / DropdownMenu) MUST pass this
+     * as their Radix `Portal container={…}` so that `data-theme`, custom
+     * theme vars, and `.ddga-theme-*` classes set on the root inherit into
+     * the portaled content. Without it, portals mount under <body> and
+     * silently miss dark mode + custom themes.
+     *
+     * Exposed as state (not a ref) so consumers re-render once the element
+     * mounts , a useRef wouldn't fire that update and the portal would
+     * race to <body> on the first commit.
+     */
+    rootEl: HTMLElement | null;
 }
 declare function useDga(): DgaContextValue;
 
+/**
+ * Returns the current writing direction from the nearest `<DgaProvider>`.
+ *
+ * Prefer this over `useDga().dir` when a component only needs direction
+ * (clearer intent, smaller dependency footprint at the call site).
+ *
+ * Throws if called outside a `<DgaProvider>` (matches `useDga`).
+ */
+declare function useDir(): 'ltr' | 'rtl';
+
+interface UseFieldA11yOptions {
+    /** Component name used in the dev warning, e.g. `'Input'`. */
+    name: string;
+    /** Caller-supplied id; falls back to a stable generated one. */
+    id?: string;
+    label?: ReactNode;
+    error?: boolean;
+    errorMessage?: ReactNode;
+    helperText?: ReactNode;
+    /** From the consumer's props , used to suppress the no-label warning. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+interface FieldA11y {
+    fieldId: string;
+    helperId: string;
+    errorId: string;
+    hasError: boolean;
+    hasErrorMessage: boolean;
+    hasHelper: boolean;
+    /** Spread onto the control element (input / textarea / Radix root). */
+    controlProps: {
+        id: string;
+        'aria-invalid': true | undefined;
+        'aria-describedby': string | undefined;
+    };
+}
+declare function useFieldA11y(options: UseFieldA11yOptions): FieldA11y;
+
+interface FieldMessageProps {
+    id: string;
+    /** `error` announces politely; `helper` is static. */
+    variant: 'error' | 'helper';
+    children: ReactNode;
+}
+declare function FieldMessage({ id, variant, children }: FieldMessageProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Button, type ButtonProps, Checkbox, type CheckboxProps, DgaProvider, type DgaProviderProps, Input, type InputProps, Textarea, type TextareaProps, buttonVariants, checkboxVariants, cn, inputVariants, textareaVariants, useDga };
+export { Button, type ButtonProps, Checkbox, type CheckboxProps, DgaProvider, type DgaProviderProps, type FieldA11y, FieldMessage, type FieldMessageProps, Input, type InputProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, SelectItem, type SelectItemProps, type SelectProps, Switch, type SwitchProps, Textarea, type TextareaProps, type UseFieldA11yOptions, buttonVariants, checkboxVariants, cn, inputVariants, radioGroupVariants, radioVariants, selectTriggerVariants, switchVariants, textareaVariants, useDga, useDir, useFieldA11y };

package/dist/index.js

@@ -65,6 +65,24 @@ function Minus(props) {
     }
   );
 }
+function ChevronDown(props) {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
 
 // src/components/Button/Button.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -143,7 +161,7 @@ function Button({
 // src/components/Input/Input.tsx
 import { cva as cva2 } from "class-variance-authority";
 
-// src/internal/field/use-field-a11y.ts
+// src/field/use-field-a11y.ts
 import { useId } from "react";
 function isPresent(value) {
   return value != null && value !== "";
@@ -153,7 +171,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) {
@@ -178,7 +196,7 @@ function useFieldA11y(options) {
   };
 }
 
-// src/internal/field/FieldMessage.tsx
+// src/field/FieldMessage.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 function FieldMessage({ id, variant, children }) {
   return /* @__PURE__ */ jsx3(
@@ -292,7 +310,7 @@ var textareaVariants = cva3("ddga-textarea", {
       true: "ddga-textarea--error"
     },
     // Horizontal/both resize breaks form layout (same reason it's not the
-    // default) — only vertical or locked are offered.
+    // default) , only vertical or locked are offered.
     resize: {
       vertical: "ddga-textarea--resize-vertical",
       none: "ddga-textarea--resize-none"
@@ -419,9 +437,169 @@ function Checkbox({
   ] });
 }
 
-// src/providers/DgaProvider.tsx
-import { useRef, useMemo, useContext as useContext2 } from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+// src/components/Radio/Radio.tsx
+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";
+var radioGroupVariants = cva5("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 = cva5("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__ */ jsxs5("div", { "data-slot": "radio-group-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs5("span", { id: labelId, className: "ddga-radio-group__label", children: [
+      label,
+      required && /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", className: "ddga-radio-group__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      RadioGroupPrimitive.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__ */ jsx7(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx7(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+function Radio({ id: externalId, label, className, ...props }) {
+  const generatedId = useId2();
+  const itemId = externalId ?? generatedId;
+  return /* @__PURE__ */ jsxs5("div", { className: "ddga-radio-row", children: [
+    /* @__PURE__ */ jsx7(
+      RadioGroupPrimitive.Item,
+      {
+        ...props,
+        id: itemId,
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        children: /* @__PURE__ */ jsx7(
+          RadioGroupPrimitive.Indicator,
+          {
+            "data-slot": "radio-indicator",
+            className: "ddga-radio__indicator",
+            children: /* @__PURE__ */ jsx7("span", { className: "ddga-radio__dot", "aria-hidden": "true" })
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsx7("label", { htmlFor: itemId, className: "ddga-radio__label", children: label })
+  ] });
+}
+
+// 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";
+var switchVariants = cva6("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__ */ jsxs6("div", { "data-slot": "switch-field", className: "ddga-field", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "ddga-switch-row", children: [
+      /* @__PURE__ */ jsx8(
+        SwitchPrimitive.Root,
+        {
+          ...props,
+          ...controlProps,
+          "data-slot": "switch",
+          required,
+          className: cn(switchVariants({ size, error: hasError }), className),
+          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,
+        required && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "ddga-switch__required", children: "*" })
+      ] })
+    ] }),
+    hasErrorMessage && /* @__PURE__ */ jsx8(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx8(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+
+// src/components/Select/Select.tsx
+import { useContext as useContext2 } from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cva as cva7 } from "class-variance-authority";
 
 // src/providers/DgaContext.ts
 import { createContext, useContext } from "react";
@@ -434,50 +612,162 @@ function useDga() {
   return ctx;
 }
 
+// src/components/Select/Select.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var selectTriggerVariants = cva7("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 = 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: [
+      label,
+      required && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "ddga-select__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs7(SelectPrimitive.Root, { required, ...rootProps, children: [
+      /* @__PURE__ */ jsxs7(
+        SelectPrimitive.Trigger,
+        {
+          ...controlProps,
+          "data-slot": "select-trigger",
+          className: cn(selectTriggerVariants({ size, error: hasError }), className),
+          children: [
+            /* @__PURE__ */ jsx9(SelectPrimitive.Value, { placeholder }),
+            /* @__PURE__ */ jsx9(SelectPrimitive.Icon, { asChild: true, className: "ddga-select__icon", children: /* @__PURE__ */ jsx9(ChevronDown, { "aria-hidden": "true" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx9(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx9(
+        SelectPrimitive.Content,
+        {
+          "data-slot": "select-content",
+          className: "ddga-select-content",
+          position: "popper",
+          sideOffset: 4,
+          children: /* @__PURE__ */ jsx9(SelectPrimitive.Viewport, { className: "ddga-select-viewport", children })
+        }
+      ) })
+    ] }),
+    hasErrorMessage && /* @__PURE__ */ jsx9(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx9(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs7(
+    SelectPrimitive.Item,
+    {
+      ...props,
+      "data-slot": "select-item",
+      className: cn("ddga-select-item", className),
+      children: [
+        /* @__PURE__ */ jsx9(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx9(SelectPrimitive.ItemIndicator, { className: "ddga-select-item__indicator", children: /* @__PURE__ */ jsx9(Check, { className: "ddga-select-item__check", "aria-hidden": "true" }) })
+      ]
+    }
+  );
+}
+
 // src/providers/DgaProvider.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { useState, useMemo, useContext as useContext3 } from "react";
+import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive } from "radix-ui";
+import { buildTheme } from "@dev-dga/tokens";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function DgaProvider({
   dir = "ltr",
   locale,
   mode = "light",
+  theme,
   as: Component = "div",
   className,
   style: consumerStyle,
   children
 }) {
-  const parentCtx = useContext2(DgaContext);
+  const parentCtx = useContext3(DgaContext);
   const isNested = parentCtx !== null;
-  const rootRef = useRef(null);
+  const [rootEl, setRootEl] = useState(null);
   const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
   const ctxValue = useMemo(
-    () => ({ dir, locale: resolvedLocale, mode, rootRef }),
-    [dir, resolvedLocale, mode]
+    () => ({ dir, locale: resolvedLocale, mode, rootEl }),
+    [dir, resolvedLocale, mode, rootEl]
   );
-  return /* @__PURE__ */ jsx7(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx7(
+  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(
     Component,
     {
-      ref: rootRef,
+      ref: setRootEl,
       dir,
       lang: resolvedLocale,
       "data-slot": "dga-root",
       "data-theme": mode,
       className,
-      style: { colorScheme: mode, ...consumerStyle },
-      children: isNested ? children : /* @__PURE__ */ jsx7(TooltipPrimitive.Provider, { delayDuration: 300, skipDelayDuration: 100, children })
+      style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
+      children: isNested ? inner : /* @__PURE__ */ jsx10(TooltipPrimitive.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
+
+// src/hooks/useDir.ts
+function useDir() {
+  return useDga().dir;
+}
 export {
   Button,
   Checkbox,
   DgaProvider,
+  FieldMessage,
   Input,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectItem,
+  Switch,
   Textarea,
   buttonVariants,
   checkboxVariants,
   cn,
   inputVariants,
+  radioGroupVariants,
+  radioVariants,
+  selectTriggerVariants,
+  switchVariants,
   textareaVariants,
-  useDga
+  useDga,
+  useDir,
+  useFieldA11y
 };
 //# sourceMappingURL=index.js.map