@refraction-ui/react 0.4.2 → 0.6.0

package/dist/internal/react-app-shell/index.d.cts

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { AppShellConfig, AppShellAPI, AppShellState, PageShellConfig, PageShellAPI, SectionConfig, AuthShellConfig, AuthShellAPI } from '../app-shell/index.cjs';
+export { AppShellAPI, AppShellConfig, AppShellState, AppShellSubscriber, AuthShellAPI, AuthShellConfig, BreakpointName, PageShellAPI, PageShellConfig, SectionConfig, createAppShell, createAuthShell, createPageShell, resolveBreakpoint } from '../app-shell/index.cjs';
+
+interface AppShellContextValue {
+    api: AppShellAPI;
+    state: AppShellState;
+}
+declare function useAppShell(): AppShellContextValue;
+interface AppShellProps {
+    config?: AppShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AppShellRoot({ config, children, className }: AppShellProps): React.FunctionComponentElement<React.ProviderProps<AppShellContextValue | null>>;
+declare namespace AppShellRoot {
+    var displayName: string;
+}
+interface AppShellSidebarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Sidebar({ children, className }: AppShellSidebarProps): React.DetailedReactHTMLElement<{
+    className: string;
+    'data-collapsed': string | undefined;
+    'data-open': string | undefined;
+}, HTMLElement>;
+declare namespace Sidebar {
+    var displayName: string;
+}
+interface AppShellMainProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Main({ children, className }: AppShellMainProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Main {
+    var displayName: string;
+}
+interface AppShellHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Header({ children, className }: AppShellHeaderProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Header {
+    var displayName: string;
+}
+interface AppShellContentProps {
+    children?: React.ReactNode;
+    className?: string;
+    /** Tailwind max-width class suffix, e.g. '6xl' -> max-w-6xl */
+    maxWidth?: string;
+}
+declare function Content({ children, className, maxWidth }: AppShellContentProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Content {
+    var displayName: string;
+}
+interface AppShellMobileNavProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function MobileNav({ children, className }: AppShellMobileNavProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+declare namespace MobileNav {
+    var displayName: string;
+}
+interface AppShellOverlayProps {
+    className?: string;
+}
+declare function Overlay({ className }: AppShellOverlayProps): React.DetailedReactHTMLElement<{
+    className: string;
+    onClick: () => void;
+    'data-shell-overlay': string;
+}, HTMLElement> | null;
+declare namespace Overlay {
+    var displayName: string;
+}
+declare const AppShell: typeof AppShellRoot & {
+    Sidebar: typeof Sidebar;
+    Main: typeof Main;
+    Header: typeof Header;
+    Content: typeof Content;
+    MobileNav: typeof MobileNav;
+    Overlay: typeof Overlay;
+};
+
+interface PageShellContextValue {
+    api: PageShellAPI;
+}
+interface PageShellProps {
+    config?: PageShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function PageShellRoot({ config, children, className }: PageShellProps): React.FunctionComponentElement<React.ProviderProps<PageShellContextValue | null>>;
+declare namespace PageShellRoot {
+    var displayName: string;
+}
+interface PageShellNavProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Nav({ children, className }: PageShellNavProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Nav {
+    var displayName: string;
+}
+interface PageShellSectionProps extends SectionConfig {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Section({ children, className, fullWidth, maxWidth, padding, background, }: PageShellSectionProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Section {
+    var displayName: string;
+}
+interface PageShellFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+    columns?: number;
+}
+declare function Footer({ children, className, columns }: PageShellFooterProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Footer {
+    var displayName: string;
+}
+declare const PageShell: typeof PageShellRoot & {
+    Nav: typeof Nav;
+    Section: typeof Section;
+    Footer: typeof Footer;
+};
+
+interface AuthShellContextValue {
+    api: AuthShellAPI;
+}
+interface AuthShellProps {
+    config?: AuthShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AuthShellRoot({ config, children, className }: AuthShellProps): React.FunctionComponentElement<React.ProviderProps<AuthShellContextValue | null>>;
+declare namespace AuthShellRoot {
+    var displayName: string;
+}
+interface AuthShellCardProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AuthShellCard({ children, className }: AuthShellCardProps): React.DetailedReactHTMLElement<{
+    className: string;
+    'data-auth-card': string;
+}, HTMLElement>;
+declare namespace AuthShellCard {
+    var displayName: string;
+}
+declare const AuthShell: typeof AuthShellRoot & {
+    Card: typeof AuthShellCard;
+};
+
+export { AppShell, type AppShellContentProps, type AppShellHeaderProps, type AppShellMainProps, type AppShellMobileNavProps, type AppShellOverlayProps, type AppShellProps, type AppShellSidebarProps, AuthShell, type AuthShellCardProps, type AuthShellProps, PageShell, type PageShellFooterProps, type PageShellNavProps, type PageShellProps, type PageShellSectionProps, useAppShell };

package/dist/internal/react-app-shell/index.d.ts

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { AppShellConfig, AppShellAPI, AppShellState, PageShellConfig, PageShellAPI, SectionConfig, AuthShellConfig, AuthShellAPI } from '../app-shell/index.js';
+export { AppShellAPI, AppShellConfig, AppShellState, AppShellSubscriber, AuthShellAPI, AuthShellConfig, BreakpointName, PageShellAPI, PageShellConfig, SectionConfig, createAppShell, createAuthShell, createPageShell, resolveBreakpoint } from '../app-shell/index.js';
+
+interface AppShellContextValue {
+    api: AppShellAPI;
+    state: AppShellState;
+}
+declare function useAppShell(): AppShellContextValue;
+interface AppShellProps {
+    config?: AppShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AppShellRoot({ config, children, className }: AppShellProps): React.FunctionComponentElement<React.ProviderProps<AppShellContextValue | null>>;
+declare namespace AppShellRoot {
+    var displayName: string;
+}
+interface AppShellSidebarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Sidebar({ children, className }: AppShellSidebarProps): React.DetailedReactHTMLElement<{
+    className: string;
+    'data-collapsed': string | undefined;
+    'data-open': string | undefined;
+}, HTMLElement>;
+declare namespace Sidebar {
+    var displayName: string;
+}
+interface AppShellMainProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Main({ children, className }: AppShellMainProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Main {
+    var displayName: string;
+}
+interface AppShellHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Header({ children, className }: AppShellHeaderProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Header {
+    var displayName: string;
+}
+interface AppShellContentProps {
+    children?: React.ReactNode;
+    className?: string;
+    /** Tailwind max-width class suffix, e.g. '6xl' -> max-w-6xl */
+    maxWidth?: string;
+}
+declare function Content({ children, className, maxWidth }: AppShellContentProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Content {
+    var displayName: string;
+}
+interface AppShellMobileNavProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function MobileNav({ children, className }: AppShellMobileNavProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | null;
+declare namespace MobileNav {
+    var displayName: string;
+}
+interface AppShellOverlayProps {
+    className?: string;
+}
+declare function Overlay({ className }: AppShellOverlayProps): React.DetailedReactHTMLElement<{
+    className: string;
+    onClick: () => void;
+    'data-shell-overlay': string;
+}, HTMLElement> | null;
+declare namespace Overlay {
+    var displayName: string;
+}
+declare const AppShell: typeof AppShellRoot & {
+    Sidebar: typeof Sidebar;
+    Main: typeof Main;
+    Header: typeof Header;
+    Content: typeof Content;
+    MobileNav: typeof MobileNav;
+    Overlay: typeof Overlay;
+};
+
+interface PageShellContextValue {
+    api: PageShellAPI;
+}
+interface PageShellProps {
+    config?: PageShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function PageShellRoot({ config, children, className }: PageShellProps): React.FunctionComponentElement<React.ProviderProps<PageShellContextValue | null>>;
+declare namespace PageShellRoot {
+    var displayName: string;
+}
+interface PageShellNavProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Nav({ children, className }: PageShellNavProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Nav {
+    var displayName: string;
+}
+interface PageShellSectionProps extends SectionConfig {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Section({ children, className, fullWidth, maxWidth, padding, background, }: PageShellSectionProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Section {
+    var displayName: string;
+}
+interface PageShellFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+    columns?: number;
+}
+declare function Footer({ children, className, columns }: PageShellFooterProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Footer {
+    var displayName: string;
+}
+declare const PageShell: typeof PageShellRoot & {
+    Nav: typeof Nav;
+    Section: typeof Section;
+    Footer: typeof Footer;
+};
+
+interface AuthShellContextValue {
+    api: AuthShellAPI;
+}
+interface AuthShellProps {
+    config?: AuthShellConfig;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AuthShellRoot({ config, children, className }: AuthShellProps): React.FunctionComponentElement<React.ProviderProps<AuthShellContextValue | null>>;
+declare namespace AuthShellRoot {
+    var displayName: string;
+}
+interface AuthShellCardProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function AuthShellCard({ children, className }: AuthShellCardProps): React.DetailedReactHTMLElement<{
+    className: string;
+    'data-auth-card': string;
+}, HTMLElement>;
+declare namespace AuthShellCard {
+    var displayName: string;
+}
+declare const AuthShell: typeof AuthShellRoot & {
+    Card: typeof AuthShellCard;
+};
+
+export { AppShell, type AppShellContentProps, type AppShellHeaderProps, type AppShellMainProps, type AppShellMobileNavProps, type AppShellOverlayProps, type AppShellProps, type AppShellSidebarProps, AuthShell, type AuthShellCardProps, type AuthShellProps, PageShell, type PageShellFooterProps, type PageShellNavProps, type PageShellProps, type PageShellSectionProps, useAppShell };

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { User, OAuthProvider, AuthConfig } from '../auth/index.cjs';
+export { AuthAdapter, AuthConfig, AuthState, AuthStatus, OAuthProvider, User, canAccessAdmin, canAccessReviewer, getAssignableRoles, getDefaultPortal, hasAllRoles, hasAnyRole, hasRole } from '../auth/index.cjs';
+
+interface AuthContextValue {
+    user: User | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    signIn: (email: string, password: string) => Promise<User>;
+    signInWithOAuth: (provider: OAuthProvider) => Promise<User>;
+    signUp: (email: string, password: string, displayName: string) => Promise<User>;
+    signOut: () => Promise<void>;
+    resetPassword: (email: string) => Promise<void>;
+    getToken: () => Promise<string | null>;
+}
+interface AuthProviderProps extends AuthConfig {
+    children: React.ReactNode;
+}
+/**
+ * AuthProvider — wraps your app with auth context.
+ * You must provide an AuthAdapter implementation.
+ *
+ * ```tsx
+ * import { AuthProvider } from './index.cjs'
+ * import { myCustomAdapter } from './auth'
+ *
+ * <AuthProvider adapter={myCustomAdapter}>
+ *   <App />
+ * </AuthProvider>
+ * ```
+ */
+declare function AuthProvider({ children, ...config }: AuthProviderProps): React.FunctionComponentElement<React.ProviderProps<AuthContextValue | null>>;
+/**
+ * useAuth — access auth state and methods.
+ * Must be used within <AuthProvider>.
+ */
+declare function useAuth(): AuthContextValue;
+
+interface AuthGuardProps {
+    children: React.ReactNode;
+    /** Custom loading UI */
+    fallback?: React.ReactNode;
+    /** URL to redirect to when unauthenticated (if using a router) */
+    redirectTo?: string;
+    /** Roles required (if any) */
+    roles?: string[];
+    /** UI to show when user lacks required roles */
+    unauthorized?: React.ReactNode;
+}
+/**
+ * AuthGuard — wraps content that requires authentication.
+ * Shows loading fallback while auth state resolves.
+ * Optionally restricts by role.
+ */
+declare function AuthGuard({ children, fallback, roles, unauthorized, }: AuthGuardProps): React.FunctionComponentElement<{
+    children?: React.ReactNode | undefined;
+}>;
+
+export { type AuthContextValue, AuthGuard, type AuthGuardProps, AuthProvider, type AuthProviderProps, useAuth };

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { User, OAuthProvider, AuthConfig } from '../auth/index.js';
+export { AuthAdapter, AuthConfig, AuthState, AuthStatus, OAuthProvider, User, canAccessAdmin, canAccessReviewer, getAssignableRoles, getDefaultPortal, hasAllRoles, hasAnyRole, hasRole } from '../auth/index.js';
+
+interface AuthContextValue {
+    user: User | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    signIn: (email: string, password: string) => Promise<User>;
+    signInWithOAuth: (provider: OAuthProvider) => Promise<User>;
+    signUp: (email: string, password: string, displayName: string) => Promise<User>;
+    signOut: () => Promise<void>;
+    resetPassword: (email: string) => Promise<void>;
+    getToken: () => Promise<string | null>;
+}
+interface AuthProviderProps extends AuthConfig {
+    children: React.ReactNode;
+}
+/**
+ * AuthProvider — wraps your app with auth context.
+ * You must provide an AuthAdapter implementation.
+ *
+ * ```tsx
+ * import { AuthProvider } from './index.js'
+ * import { myCustomAdapter } from './auth'
+ *
+ * <AuthProvider adapter={myCustomAdapter}>
+ *   <App />
+ * </AuthProvider>
+ * ```
+ */
+declare function AuthProvider({ children, ...config }: AuthProviderProps): React.FunctionComponentElement<React.ProviderProps<AuthContextValue | null>>;
+/**
+ * useAuth — access auth state and methods.
+ * Must be used within <AuthProvider>.
+ */
+declare function useAuth(): AuthContextValue;
+
+interface AuthGuardProps {
+    children: React.ReactNode;
+    /** Custom loading UI */
+    fallback?: React.ReactNode;
+    /** URL to redirect to when unauthenticated (if using a router) */
+    redirectTo?: string;
+    /** Roles required (if any) */
+    roles?: string[];
+    /** UI to show when user lacks required roles */
+    unauthorized?: React.ReactNode;
+}
+/**
+ * AuthGuard — wraps content that requires authentication.
+ * Shows loading fallback while auth state resolves.
+ * Optionally restricts by role.
+ */
+declare function AuthGuard({ children, fallback, roles, unauthorized, }: AuthGuardProps): React.FunctionComponentElement<{
+    children?: React.ReactNode | undefined;
+}>;
+
+export { type AuthContextValue, AuthGuard, type AuthGuardProps, AuthProvider, type AuthProviderProps, useAuth };

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AvatarSize } from '../avatar/index.cjs';
+export { AvatarAPI, AvatarLoadingStatus, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.cjs';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+}
+/**
+ * Avatar -- circular image with fallback support.
+ * Compound component: use Avatar > AvatarImage + AvatarFallback.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AvatarSize } from '../avatar/index.js';
+export { AvatarAPI, AvatarLoadingStatus, AvatarSize, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, getInitials } from '../avatar/index.js';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+}
+/**
+ * Avatar -- circular image with fallback support.
+ * Compound component: use Avatar > AvatarImage + AvatarFallback.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/internal/react-avatar-group/index.d.cts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { AvatarUser, AvatarSize } from '../avatar-group/index.cjs';
+export { AvatarGroupAPI, AvatarSize, AvatarUser, AvatarGroupProps as CoreAvatarGroupProps, PresenceStatus, avatarGroupStyles, avatarImageStyles, avatarOverflowBadgeVariants, avatarPresenceDotVariants, avatarVariants } from '../avatar-group/index.cjs';
+
+interface AvatarGroupProps {
+    users: AvatarUser[];
+    max?: number;
+    size?: AvatarSize;
+    className?: string;
+}
+declare function AvatarGroup({ users, max, size, className }: AvatarGroupProps): React.DetailedReactHTMLElement<{
+    className: string;
+    role?: string | undefined;
+    tabIndex?: number | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-pressed'?: boolean | "mixed" | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-current'?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-atomic'?: boolean | undefined;
+}, HTMLElement>;
+declare namespace AvatarGroup {
+    var displayName: string;
+}
+
+export { AvatarGroup, type AvatarGroupProps };

package/dist/internal/react-avatar-group/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { AvatarUser, AvatarSize } from '../avatar-group/index.js';
+export { AvatarGroupAPI, AvatarSize, AvatarUser, AvatarGroupProps as CoreAvatarGroupProps, PresenceStatus, avatarGroupStyles, avatarImageStyles, avatarOverflowBadgeVariants, avatarPresenceDotVariants, avatarVariants } from '../avatar-group/index.js';
+
+interface AvatarGroupProps {
+    users: AvatarUser[];
+    max?: number;
+    size?: AvatarSize;
+    className?: string;
+}
+declare function AvatarGroup({ users, max, size, className }: AvatarGroupProps): React.DetailedReactHTMLElement<{
+    className: string;
+    role?: string | undefined;
+    tabIndex?: number | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-pressed'?: boolean | "mixed" | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-current'?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-atomic'?: boolean | undefined;
+}, HTMLElement>;
+declare namespace AvatarGroup {
+    var displayName: string;
+}
+
+export { AvatarGroup, type AvatarGroupProps };

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BadgeVariant, BadgeSize } from '../badge/index.cjs';
+export { BadgeSize, BadgeVariant, badgeVariants } from '../badge/index.cjs';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+}
+/**
+ * Badge component — renders a styled badge with variant and size support.
+ *
+ * Uses the headless @refraction-ui/badge core for state and ARIA attributes.
+ * Styling via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps };

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BadgeVariant, BadgeSize } from '../badge/index.js';
+export { BadgeSize, BadgeVariant, badgeVariants } from '../badge/index.js';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+}
+/**
+ * Badge component — renders a styled badge with variant and size support.
+ *
+ * Uses the headless @refraction-ui/badge core for state and ARIA attributes.
+ * Styling via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Badge, type BadgeProps };

package/dist/internal/react-bottom-nav/index.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { NavTab } from '../bottom-nav/index.cjs';
+export { NavTab, bottomNavTabVariants, bottomNavVariants } from '../bottom-nav/index.cjs';
+
+interface BottomNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** Tab items */
+    tabs?: NavTab[];
+    /** Current pathname for active state */
+    currentPath?: string;
+}
+/**
+ * BottomNav component — renders a fixed bottom navigation bar with tab buttons.
+ *
+ * Uses the headless @refraction-ui/bottom-nav core for state and ARIA attributes.
+ * Visible on mobile only (md:hidden via styles).
+ */
+declare const BottomNav: React.ForwardRefExoticComponent<BottomNavProps & React.RefAttributes<HTMLElement>>;
+
+export { BottomNav, type BottomNavProps };

package/dist/internal/react-bottom-nav/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { NavTab } from '../bottom-nav/index.js';
+export { NavTab, bottomNavTabVariants, bottomNavVariants } from '../bottom-nav/index.js';
+
+interface BottomNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** Tab items */
+    tabs?: NavTab[];
+    /** Current pathname for active state */
+    currentPath?: string;
+}
+/**
+ * BottomNav component — renders a fixed bottom navigation bar with tab buttons.
+ *
+ * Uses the headless @refraction-ui/bottom-nav core for state and ARIA attributes.
+ * Visible on mobile only (md:hidden via styles).
+ */
+declare const BottomNav: React.ForwardRefExoticComponent<BottomNavProps & React.RefAttributes<HTMLElement>>;
+
+export { BottomNav, type BottomNavProps };

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { BreadcrumbItem } from '../breadcrumbs/index.cjs';
+export { BreadcrumbItem, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants } from '../breadcrumbs/index.cjs';
+
+interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /** Current pathname to auto-generate breadcrumbs from */
+    pathname?: string;
+    /** Manual breadcrumb items (overrides pathname) */
+    items?: BreadcrumbItem[];
+    /** Custom label map for pathname segments */
+    labels?: Record<string, string>;
+    /** Separator character. Default: '/' */
+    separator?: string;
+    /** Max items before truncation */
+    maxItems?: number;
+}
+/**
+ * Breadcrumbs component — renders a breadcrumb navigation trail.
+ *
+ * Uses the headless @refraction-ui/breadcrumbs core for state and ARIA attributes.
+ */
+declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+
+export { Breadcrumbs, type BreadcrumbsProps };