@refraction-ui/react 0.12.3 → 0.13.0

package/dist/internal/empty-state/index.d.cts

@@ -0,0 +1,39 @@
+type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger';
+interface EmptyStateOptions {
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+}
+interface EmptyStateAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless EmptyState core — JSX-free. Resolves the tone into the data
+ * attributes that adapters spread onto the root element.
+ */
+declare function createEmptyState(options?: EmptyStateOptions): EmptyStateAPI;
+
+/**
+ * Container for the EmptyState column. The `bordered` variant wraps the
+ * content in a card surface.
+ */
+declare const emptyStateVariants: (props?: ({
+    bordered?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Tone-tinted classes for the icon chip. Tone styling lives here as a single
+ * source of truth (no scattered inline literals in the adapters).
+ */
+declare const emptyStateIconChipVariants: (props?: ({
+    tone?: "neutral" | "success" | "warning" | "danger" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Layout class helpers for the title/description/actions slots. */
+declare const emptyStateTitleClass = "text-lg font-semibold text-foreground";
+declare const emptyStateDescriptionClass = "text-sm text-muted-foreground";
+declare const emptyStateActionsClass = "flex items-center justify-center gap-2";
+
+export { type EmptyStateAPI, type EmptyStateOptions, type EmptyStateTone, createEmptyState, emptyStateActionsClass, emptyStateDescriptionClass, emptyStateIconChipVariants, emptyStateTitleClass, emptyStateVariants };

package/dist/internal/empty-state/index.d.ts

@@ -0,0 +1,39 @@
+type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger';
+interface EmptyStateOptions {
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+}
+interface EmptyStateAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless EmptyState core — JSX-free. Resolves the tone into the data
+ * attributes that adapters spread onto the root element.
+ */
+declare function createEmptyState(options?: EmptyStateOptions): EmptyStateAPI;
+
+/**
+ * Container for the EmptyState column. The `bordered` variant wraps the
+ * content in a card surface.
+ */
+declare const emptyStateVariants: (props?: ({
+    bordered?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Tone-tinted classes for the icon chip. Tone styling lives here as a single
+ * source of truth (no scattered inline literals in the adapters).
+ */
+declare const emptyStateIconChipVariants: (props?: ({
+    tone?: "neutral" | "success" | "warning" | "danger" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Layout class helpers for the title/description/actions slots. */
+declare const emptyStateTitleClass = "text-lg font-semibold text-foreground";
+declare const emptyStateDescriptionClass = "text-sm text-muted-foreground";
+declare const emptyStateActionsClass = "flex items-center justify-center gap-2";
+
+export { type EmptyStateAPI, type EmptyStateOptions, type EmptyStateTone, createEmptyState, emptyStateActionsClass, emptyStateDescriptionClass, emptyStateIconChipVariants, emptyStateTitleClass, emptyStateVariants };

package/dist/internal/input/index.d.cts

@@ -1,6 +1,8 @@
 import { AccessibilityProps } from '../shared/index.cjs';
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+/** High-level validation affordance for an input. */
+type InputValidationState = 'valid' | 'invalid';
 interface InputProps {
     type?: InputType;
     disabled?: boolean;
@@ -8,6 +10,14 @@ interface InputProps {
     required?: boolean;
     placeholder?: string;
     'aria-invalid'?: boolean;
+    /**
+     * Validation affordance. The core derives `aria-invalid` from this:
+     * - `'valid'` → `aria-invalid={false}`
+     * - `'invalid'` → `aria-invalid={true}`
+     *
+     * An explicit `aria-invalid` prop always takes precedence.
+     */
+    validationState?: InputValidationState;
 }
 interface InputAPI {
     /** ARIA attributes to spread on the element */
@@ -18,6 +28,13 @@ interface InputAPI {
     /** Data attributes for CSS styling hooks */
     dataAttributes: Record<string, string>;
 }
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+declare function resolveAriaInvalid(ariaInvalid: boolean | undefined, validationState: InputValidationState | undefined): boolean | undefined;
 declare function createInput(props?: InputProps): InputAPI;
 declare function getInputAriaProps(state: {
     disabled?: boolean;
@@ -31,8 +48,9 @@ declare function getInputAriaProps(state: {
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "default" | "lg" | undefined;
+    validationState?: "valid" | "invalid" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 
-export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };
+export { type InputAPI, type InputProps, type InputType, type InputValidationState, createInput, getInputAriaProps, inputVariants, resolveAriaInvalid };

package/dist/internal/input/index.d.ts

@@ -1,6 +1,8 @@
 import { AccessibilityProps } from '../shared/index.js';
 
 type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+/** High-level validation affordance for an input. */
+type InputValidationState = 'valid' | 'invalid';
 interface InputProps {
     type?: InputType;
     disabled?: boolean;
@@ -8,6 +10,14 @@ interface InputProps {
     required?: boolean;
     placeholder?: string;
     'aria-invalid'?: boolean;
+    /**
+     * Validation affordance. The core derives `aria-invalid` from this:
+     * - `'valid'` → `aria-invalid={false}`
+     * - `'invalid'` → `aria-invalid={true}`
+     *
+     * An explicit `aria-invalid` prop always takes precedence.
+     */
+    validationState?: InputValidationState;
 }
 interface InputAPI {
     /** ARIA attributes to spread on the element */
@@ -18,6 +28,13 @@ interface InputAPI {
     /** Data attributes for CSS styling hooks */
     dataAttributes: Record<string, string>;
 }
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+declare function resolveAriaInvalid(ariaInvalid: boolean | undefined, validationState: InputValidationState | undefined): boolean | undefined;
 declare function createInput(props?: InputProps): InputAPI;
 declare function getInputAriaProps(state: {
     disabled?: boolean;
@@ -31,8 +48,9 @@ declare function getInputAriaProps(state: {
 
 declare const inputVariants: (props?: ({
     size?: "sm" | "default" | "lg" | undefined;
+    validationState?: "valid" | "invalid" | undefined;
 } & {
     className?: string;
 }) | undefined) => string;
 
-export { type InputAPI, type InputProps, type InputType, createInput, getInputAriaProps, inputVariants };
+export { type InputAPI, type InputProps, type InputType, type InputValidationState, createInput, getInputAriaProps, inputVariants, resolveAriaInvalid };

package/dist/internal/react-empty-state/index.d.cts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { EmptyStateTone } from '../empty-state/index.cjs';
+export { EmptyStateTone } from '../empty-state/index.cjs';
+
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional icon rendered inside a tone-tinted rounded chip. */
+    icon?: React.ReactNode;
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+    /** Primary heading. */
+    title: React.ReactNode;
+    /** Optional supporting copy (supports rich children). */
+    description?: React.ReactNode;
+    /** Optional action row (e.g. buttons), centered under the description. */
+    actions?: React.ReactNode;
+    /** Wrap the content in a bordered card surface. */
+    bordered?: boolean;
+}
+/**
+ * EmptyState — a centered column for empty/zero/result states and inline
+ * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render
+ * it on a card surface.
+ *
+ * Styling and tone resolution come from the headless @refraction-ui/empty-state
+ * core (no inline class literals here).
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+interface ConfirmationCardProps extends EmptyStateProps {
+}
+/**
+ * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`
+ * defaulting to `true`, for inline confirmation states (e.g. "Check your email").
+ */
+declare const ConfirmationCard: React.ForwardRefExoticComponent<ConfirmationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationCard, type ConfirmationCardProps, EmptyState, type EmptyStateProps };

package/dist/internal/react-empty-state/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { EmptyStateTone } from '../empty-state/index.js';
+export { EmptyStateTone } from '../empty-state/index.js';
+
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional icon rendered inside a tone-tinted rounded chip. */
+    icon?: React.ReactNode;
+    /** Tone that tints the icon chip. Defaults to `neutral`. */
+    tone?: EmptyStateTone;
+    /** Primary heading. */
+    title: React.ReactNode;
+    /** Optional supporting copy (supports rich children). */
+    description?: React.ReactNode;
+    /** Optional action row (e.g. buttons), centered under the description. */
+    actions?: React.ReactNode;
+    /** Wrap the content in a bordered card surface. */
+    bordered?: boolean;
+}
+/**
+ * EmptyState — a centered column for empty/zero/result states and inline
+ * confirmations. The icon chip is tinted via `tone`; pass `bordered` to render
+ * it on a card surface.
+ *
+ * Styling and tone resolution come from the headless @refraction-ui/empty-state
+ * core (no inline class literals here).
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+interface ConfirmationCardProps extends EmptyStateProps {
+}
+/**
+ * ConfirmationCard — a thin preset of {@link EmptyState} with `bordered`
+ * defaulting to `true`, for inline confirmation states (e.g. "Check your email").
+ */
+declare const ConfirmationCard: React.ForwardRefExoticComponent<ConfirmationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ConfirmationCard, type ConfirmationCardProps, EmptyState, type EmptyStateProps };

package/dist/internal/react-input/index.d.cts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { InputValidationState } from '../input/index.cjs';
 export { InputType, inputVariants } from '../input/index.cjs';
 
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -19,6 +20,21 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * See the package README's "Sizing" section for more.
      */
     size?: 'sm' | 'default' | 'lg';
+    /**
+     * Validation affordance. Tints the border and wires `aria-invalid`:
+     * - `'valid'` → green border, trailing check icon, `aria-invalid={false}`
+     * - `'invalid'` → destructive border, `aria-invalid={true}`
+     *
+     * When omitted the input is rendered without a wrapper (identical to the
+     * legacy bare `<input>` markup), unless `leadingIcon` is set.
+     */
+    validationState?: InputValidationState;
+    /**
+     * Optional icon rendered inside the input's left padding. When provided
+     * (or when `validationState` is set) the input is wrapped in a relative
+     * `<div>` and gains left padding to make room for the icon.
+     */
+    leadingIcon?: React.ReactNode;
 }
 /**
  * Input component — renders a styled input with size support.

package/dist/internal/react-input/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { InputValidationState } from '../input/index.js';
 export { InputType, inputVariants } from '../input/index.js';
 
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -19,6 +20,21 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * See the package README's "Sizing" section for more.
      */
     size?: 'sm' | 'default' | 'lg';
+    /**
+     * Validation affordance. Tints the border and wires `aria-invalid`:
+     * - `'valid'` → green border, trailing check icon, `aria-invalid={false}`
+     * - `'invalid'` → destructive border, `aria-invalid={true}`
+     *
+     * When omitted the input is rendered without a wrapper (identical to the
+     * legacy bare `<input>` markup), unless `leadingIcon` is set.
+     */
+    validationState?: InputValidationState;
+    /**
+     * Optional icon rendered inside the input's left padding. When provided
+     * (or when `validationState` is set) the input is wrapped in a relative
+     * `<div>` and gains left padding to make room for the icon.
+     */
+    leadingIcon?: React.ReactNode;
 }
 /**
  * Input component — renders a styled input with size support.

package/dist/internal/react-password-input/index.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { InputProps } from '../react-input/index.cjs';
+
+interface PasswordInputProps extends Omit<InputProps, 'type' | 'leadingIcon'> {
+    /**
+     * Accessible label for the reveal (show password) action.
+     * @default 'Show password'
+     */
+    revealLabel?: string;
+    /**
+     * Accessible label for the hide action.
+     * @default 'Hide password'
+     */
+    hideLabel?: string;
+}
+/**
+ * PasswordInput — a password field with a built-in reveal/hide toggle.
+ *
+ * Wraps the styled {@link Input} from `@refraction-ui/react-input`, toggling
+ * the underlying input `type` between `'password'` and `'text'`. Forwards all
+ * Input props (`value`, `onChange`, `validationState`, `minLength`, …) through
+ * to the underlying element, including the `ref`.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps };

package/dist/internal/react-password-input/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { InputProps } from '../react-input/index.js';
+
+interface PasswordInputProps extends Omit<InputProps, 'type' | 'leadingIcon'> {
+    /**
+     * Accessible label for the reveal (show password) action.
+     * @default 'Show password'
+     */
+    revealLabel?: string;
+    /**
+     * Accessible label for the hide action.
+     * @default 'Hide password'
+     */
+    hideLabel?: string;
+}
+/**
+ * PasswordInput — a password field with a built-in reveal/hide toggle.
+ *
+ * Wraps the styled {@link Input} from `@refraction-ui/react-input`, toggling
+ * the underlying input `type` between `'password'` and `'text'`. Forwards all
+ * Input props (`value`, `onChange`, `validationState`, `minLength`, …) through
+ * to the underlying element, including the `ref`.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps };

package/dist/internal/react-segmented-control/index.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SegmentedControlSize } from '../segmented-control/index.cjs';
+export { SegmentedControlSize, SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants } from '../segmented-control/index.cjs';
+
+interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled selected item value. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the newly selected item value. */
+    onValueChange?: (value: string) => void;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+/**
+ * SegmentedControl — a pill-shaped single-select control with radio semantics.
+ *
+ * Renders `role="radiogroup"`; each {@link SegmentedControlItem} is a
+ * `role="radio"`. Supports controlled (`value`/`onValueChange`) and
+ * uncontrolled (`defaultValue`) usage, roving tabindex, arrow-key navigation
+ * with wrap, and Home/End jumps. Logic/styles come from the headless
+ * `@refraction-ui/segmented-control` core; styling via Tailwind utilities only.
+ */
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Value identifying this item; selected when it matches the group value. */
+    value: string;
+}
+/**
+ * SegmentedControlItem — a single selectable segment (`role="radio"`).
+ *
+ * Children may include a leading icon. Only the active item is tabbable
+ * (roving tabindex); arrow/Home/End keys delegate navigation to the group,
+ * which applies the shared `getNextSegmentIndex` rule from the core.
+ */
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps };

package/dist/internal/react-segmented-control/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SegmentedControlSize } from '../segmented-control/index.js';
+export { SegmentedControlSize, SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants } from '../segmented-control/index.js';
+
+interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled selected item value. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the newly selected item value. */
+    onValueChange?: (value: string) => void;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+/**
+ * SegmentedControl — a pill-shaped single-select control with radio semantics.
+ *
+ * Renders `role="radiogroup"`; each {@link SegmentedControlItem} is a
+ * `role="radio"`. Supports controlled (`value`/`onValueChange`) and
+ * uncontrolled (`defaultValue`) usage, roving tabindex, arrow-key navigation
+ * with wrap, and Home/End jumps. Logic/styles come from the headless
+ * `@refraction-ui/segmented-control` core; styling via Tailwind utilities only.
+ */
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Value identifying this item; selected when it matches the group value. */
+    value: string;
+}
+/**
+ * SegmentedControlItem — a single selectable segment (`role="radio"`).
+ *
+ * Children may include a leading icon. Only the active item is tabbable
+ * (roving tabindex); arrow/Home/End keys delegate navigation to the group,
+ * which applies the shared `getNextSegmentIndex` rule from the core.
+ */
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps };

package/dist/internal/react-separator/index.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SeparatorOrientation } from '../separator/index.cjs';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * Optional centered label. Only meaningful for horizontal separators —
+     * renders a line on each side of the label (a "labeled divider").
+     */
+    label?: React.ReactNode;
+    /**
+     * When `true` (the default) the separator is purely visual and is hidden
+     * from assistive tech (`role="none"`). When `false` it is exposed as a
+     * semantic `role="separator"` with the appropriate `aria-orientation`.
+     */
+    decorative?: boolean;
+}
+/**
+ * Separator / LabeledDivider — a thin rule that visually divides content.
+ *
+ * Supports horizontal and vertical orientations and an optional centered
+ * label (the "labeled divider" variant, horizontal only). State and ARIA
+ * semantics come from the headless @refraction-ui/separator core; styling
+ * via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/internal/react-separator/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SeparatorOrientation } from '../separator/index.js';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * Optional centered label. Only meaningful for horizontal separators —
+     * renders a line on each side of the label (a "labeled divider").
+     */
+    label?: React.ReactNode;
+    /**
+     * When `true` (the default) the separator is purely visual and is hidden
+     * from assistive tech (`role="none"`). When `false` it is exposed as a
+     * semantic `role="separator"` with the appropriate `aria-orientation`.
+     */
+    decorative?: boolean;
+}
+/**
+ * Separator / LabeledDivider — a thin rule that visually divides content.
+ *
+ * Supports horizontal and vertical orientations and an optional centered
+ * label (the "labeled divider" variant, horizontal only). State and ARIA
+ * semantics come from the headless @refraction-ui/separator core; styling
+ * via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/internal/react-social-auth-button/index.d.cts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ButtonProps } from '../react-button/index.cjs';
+import { SocialProvider } from '../social-auth-button/index.cjs';
+export { SocialProvider } from '../social-auth-button/index.cjs';
+
+interface SocialAuthButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+    /** Marks this as the provider the user signed in with last. */
+    lastUsed?: boolean;
+    /** Shows a spinner and disables interaction. */
+    loading?: boolean;
+}
+/**
+ * A branded social sign-in button built on the outline Button. Renders the
+ * provider's brand icon and a "Continue with …" label, with optional loading
+ * and "Last used" affordances. Labels, the `data-provider` hook, and the
+ * monochrome decision come from the headless @refraction-ui/social-auth-button
+ * core; only the icon markup lives here.
+ */
+declare const SocialAuthButton: React.ForwardRefExoticComponent<SocialAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SocialAuthRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Responsive grid wrapper for SocialAuthButtons: one column on mobile, two
+ * columns from the `sm` breakpoint up.
+ */
+declare const SocialAuthRow: React.ForwardRefExoticComponent<SocialAuthRowProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SocialAuthButton, type SocialAuthButtonProps, SocialAuthRow, type SocialAuthRowProps };

package/dist/internal/react-social-auth-button/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ButtonProps } from '../react-button/index.js';
+import { SocialProvider } from '../social-auth-button/index.js';
+export { SocialProvider } from '../social-auth-button/index.js';
+
+interface SocialAuthButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+    /** Marks this as the provider the user signed in with last. */
+    lastUsed?: boolean;
+    /** Shows a spinner and disables interaction. */
+    loading?: boolean;
+}
+/**
+ * A branded social sign-in button built on the outline Button. Renders the
+ * provider's brand icon and a "Continue with …" label, with optional loading
+ * and "Last used" affordances. Labels, the `data-provider` hook, and the
+ * monochrome decision come from the headless @refraction-ui/social-auth-button
+ * core; only the icon markup lives here.
+ */
+declare const SocialAuthButton: React.ForwardRefExoticComponent<SocialAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SocialAuthRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Responsive grid wrapper for SocialAuthButtons: one column on mobile, two
+ * columns from the `sm` breakpoint up.
+ */
+declare const SocialAuthRow: React.ForwardRefExoticComponent<SocialAuthRowProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SocialAuthButton, type SocialAuthButtonProps, SocialAuthRow, type SocialAuthRowProps };

package/dist/internal/segmented-control/index.d.cts

@@ -0,0 +1,56 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type SegmentedControlSize = 'sm' | 'md';
+/** Value identifying a single segment. */
+type SegmentedControlValue = string;
+interface SegmentedControlProps {
+    /** Currently selected segment value (controlled). */
+    value?: SegmentedControlValue;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+interface SegmentedControlAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic group props for a segmented control.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these
+ * onto their group element and handle their own rendering/state.
+ */
+declare function createSegmentedControl(props?: SegmentedControlProps): SegmentedControlAPI;
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Given the current index, the pressed key, and the item count, returns the
+ * index that focus/selection should move to. Arrow keys wrap; Home/End jump
+ * to the ends. Unhandled keys (or an empty group) return `current` unchanged.
+ *
+ * - ArrowRight / ArrowDown → next (wraps to 0 past the end)
+ * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)
+ * - Home                   → first
+ * - End                    → last
+ */
+declare function getNextSegmentIndex(current: number, key: string, count: number): number;
+
+/** Pill-shaped container that holds the segments (`role="radiogroup"`). */
+declare const segmentedControlVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single segment (`role="radio"`). The `state` variant carries the
+ * active vs inactive visual treatment so adapters never inline these classes.
+ */
+declare const segmentedControlItemVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+    state?: "checked" | "unchecked" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SegmentedControlAPI, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants };