@refraction-ui/react 0.12.3 → 0.13.0

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

@@ -0,0 +1,56 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+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 };

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

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * 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;
+}
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+    'aria-orientation'?: SeparatorOrientation;
+}
+interface SeparatorAPI {
+    /** ARIA attributes to spread on the element. */
+    ariaProps: SeparatorAriaProps;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+    labeled?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class for each flanking line in the labeled-divider variant. */
+declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Class for the centered label in the labeled-divider variant. */
+declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
+
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };

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

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * 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;
+}
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+    'aria-orientation'?: SeparatorOrientation;
+}
+interface SeparatorAPI {
+    /** ARIA attributes to spread on the element. */
+    ariaProps: SeparatorAriaProps;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+    labeled?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class for each flanking line in the labeled-divider variant. */
+declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Class for the centered label in the labeled-divider variant. */
+declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
+
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };

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

@@ -0,0 +1,47 @@
+type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple';
+/** "Continue with …" label shown on each provider's button. */
+declare const PROVIDER_LABELS: Record<SocialProvider, string>;
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+declare const PROVIDER_MONO: Record<SocialProvider, boolean>;
+interface SocialAuthButtonProps {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+}
+interface SocialAuthButtonAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+    /** "Continue with …" label for the provider. */
+    label: string;
+    /** Whether the brand mark should render monochrome. */
+    mono: boolean;
+}
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+declare function createSocialAuthButton(props: SocialAuthButtonProps): SocialAuthButtonAPI;
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+declare const socialAuthButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+declare const socialAuthRowVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Floating "Last used" badge anchored to the top-right of a button. */
+declare const lastUsedBadgeVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { PROVIDER_LABELS, PROVIDER_MONO, type SocialAuthButtonAPI, type SocialAuthButtonProps, type SocialProvider, createSocialAuthButton, lastUsedBadgeVariants, socialAuthButtonVariants, socialAuthRowVariants };

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

@@ -0,0 +1,47 @@
+type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple';
+/** "Continue with …" label shown on each provider's button. */
+declare const PROVIDER_LABELS: Record<SocialProvider, string>;
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+declare const PROVIDER_MONO: Record<SocialProvider, boolean>;
+interface SocialAuthButtonProps {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+}
+interface SocialAuthButtonAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+    /** "Continue with …" label for the provider. */
+    label: string;
+    /** Whether the brand mark should render monochrome. */
+    mono: boolean;
+}
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+declare function createSocialAuthButton(props: SocialAuthButtonProps): SocialAuthButtonAPI;
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+declare const socialAuthButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+declare const socialAuthRowVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Floating "Last used" badge anchored to the top-right of a button. */
+declare const lastUsedBadgeVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { PROVIDER_LABELS, PROVIDER_MONO, type SocialAuthButtonAPI, type SocialAuthButtonProps, type SocialProvider, createSocialAuthButton, lastUsedBadgeVariants, socialAuthButtonVariants, socialAuthRowVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,6 +51,7 @@
     "@refraction-ui/accordion": "workspace:*",
     "@refraction-ui/react-accordion": "workspace:*",
     "@refraction-ui/react-ai": "workspace:*",
+    "@refraction-ui/react-analytics": "workspace:*",
     "@refraction-ui/react-animated-text": "workspace:*",
     "@refraction-ui/react-app-shell": "workspace:*",
     "@refraction-ui/react-auth": "workspace:*",
@@ -61,15 +62,20 @@
     "@refraction-ui/react-breadcrumbs": "workspace:*",
     "@refraction-ui/react-button": "workspace:*",
     "@refraction-ui/react-calendar": "workspace:*",
+    "@refraction-ui/react-callout": "workspace:*",
     "@refraction-ui/react-card": "workspace:*",
+    "@refraction-ui/react-card-grid": "workspace:*",
+    "@refraction-ui/react-carousel": "workspace:*",
     "@refraction-ui/react-charts": "workspace:*",
     "@refraction-ui/react-checkbox": "workspace:*",
+    "@refraction-ui/react-code-block": "workspace:*",
     "@refraction-ui/react-code-editor": "workspace:*",
     "@refraction-ui/react-collapsible": "workspace:*",
     "@refraction-ui/react-combobox": "workspace:*",
     "@refraction-ui/react-command": "workspace:*",
-    "@refraction-ui/react-conversation": "workspace:*",
+    "@refraction-ui/react-command-input": "workspace:*",
     "@refraction-ui/react-content-protection": "workspace:*",
+    "@refraction-ui/react-conversation": "workspace:*",
     "@refraction-ui/react-cookie-consent": "workspace:*",
     "@refraction-ui/react-data-table": "workspace:*",
     "@refraction-ui/react-date-picker": "workspace:*",
@@ -78,20 +84,28 @@
     "@refraction-ui/react-diff-viewer": "workspace:*",
     "@refraction-ui/react-dropdown-menu": "workspace:*",
     "@refraction-ui/react-emoji-picker": "workspace:*",
+    "@refraction-ui/react-empty-state": "workspace:*",
     "@refraction-ui/react-feedback-dialog": "workspace:*",
+    "@refraction-ui/react-file-tree": "workspace:*",
     "@refraction-ui/react-file-upload": "workspace:*",
     "@refraction-ui/react-footer": "workspace:*",
     "@refraction-ui/react-form": "workspace:*",
+    "@refraction-ui/react-icon-system": "workspace:*",
     "@refraction-ui/react-inline-editor": "workspace:*",
     "@refraction-ui/react-input": "workspace:*",
     "@refraction-ui/react-input-group": "workspace:*",
     "@refraction-ui/react-install-prompt": "workspace:*",
     "@refraction-ui/react-keyboard-shortcut": "workspace:*",
     "@refraction-ui/react-language-selector": "workspace:*",
+    "@refraction-ui/react-link-card": "workspace:*",
+    "@refraction-ui/react-logger": "workspace:*",
     "@refraction-ui/react-markdown-renderer": "workspace:*",
     "@refraction-ui/react-mobile-nav": "workspace:*",
     "@refraction-ui/react-navbar": "workspace:*",
     "@refraction-ui/react-otp-input": "workspace:*",
+    "@refraction-ui/react-pagination": "workspace:*",
+    "@refraction-ui/react-password-input": "workspace:*",
+    "@refraction-ui/react-payment": "workspace:*",
     "@refraction-ui/react-popover": "workspace:*",
     "@refraction-ui/react-presence-indicator": "workspace:*",
     "@refraction-ui/react-progress-display": "workspace:*",
@@ -100,12 +114,20 @@
     "@refraction-ui/react-resizable-layout": "workspace:*",
     "@refraction-ui/react-rich-editor": "workspace:*",
     "@refraction-ui/react-search-bar": "workspace:*",
+    "@refraction-ui/react-segmented-control": "workspace:*",
     "@refraction-ui/react-select": "workspace:*",
+    "@refraction-ui/react-separator": "workspace:*",
+    "@refraction-ui/react-sheet": "workspace:*",
     "@refraction-ui/react-sidebar": "workspace:*",
     "@refraction-ui/react-skeleton": "workspace:*",
+    "@refraction-ui/react-skip-to-content": "workspace:*",
     "@refraction-ui/react-slide-viewer": "workspace:*",
+    "@refraction-ui/react-slider": "workspace:*",
+    "@refraction-ui/react-social-auth-button": "workspace:*",
     "@refraction-ui/react-status-indicator": "workspace:*",
+    "@refraction-ui/react-steps": "workspace:*",
     "@refraction-ui/react-switch": "workspace:*",
+    "@refraction-ui/react-table-of-contents": "workspace:*",
     "@refraction-ui/react-tabs": "workspace:*",
     "@refraction-ui/react-textarea": "workspace:*",
     "@refraction-ui/react-theme": "workspace:*",
@@ -120,24 +142,7 @@
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "@refraction-ui/react-table-of-contents": "workspace:*",
-    "@refraction-ui/react-carousel": "workspace:*",
-    "@refraction-ui/react-slider": "workspace:*",
-    "@refraction-ui/react-pagination": "workspace:*",
-    "@refraction-ui/react-callout": "workspace:*",
-    "@refraction-ui/react-steps": "workspace:*",
-    "@refraction-ui/react-file-tree": "workspace:*",
-    "@refraction-ui/react-icon-system": "workspace:*",
-    "@refraction-ui/react-skip-to-content": "workspace:*",
-    "@refraction-ui/react-code-block": "workspace:*",
-    "@refraction-ui/react-link-card": "workspace:*",
-    "@refraction-ui/react-card-grid": "workspace:*",
-    "@refraction-ui/react-payment": "workspace:*",
-    "@refraction-ui/react-command-input": "workspace:*",
-    "@refraction-ui/react-sheet": "workspace:*",
-    "@refraction-ui/react-logger": "workspace:*",
-    "@refraction-ui/react-analytics": "workspace:*"
+    "react-dom": "19.0.0"
   },
   "publishConfig": {
     "access": "public"