@dev-dga/react 0.2.0 → 0.4.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;
@@ -80,23 +98,115 @@ 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;
 
@@ -110,6 +220,43 @@ declare function useDga(): DgaContextValue;
  */
 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, useDir };
+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 };