@neynar/ui 0.1.1

package/dist/components/ui/text-field.d.ts

@@ -0,0 +1,157 @@
+import * as React from "react";
+/**
+ * Props for the TextField component
+ *
+ * Extends standard HTML input properties while omitting 'id' to allow
+ * automatic ID generation for accessibility.
+ */
+export type TextFieldProps = Omit<React.ComponentProps<"input">, "id"> & {
+    /**
+     * Label text displayed above the input
+     *
+     * When provided, creates a semantic label-input relationship
+     * for improved accessibility and user experience.
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     *
+     * Provides additional context or instructions to help users
+     * understand the expected input format or purpose.
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input
+     *
+     * When provided, sets the input to an error state with
+     * destructive styling and proper ARIA attributes.
+     * Takes precedence over helperText when both are present.
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     *
+     * Adds a visual asterisk (*) indicator to the label
+     * and semantic meaning for form validation.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Custom ID for the input field
+     *
+     * If not provided, an automatic ID will be generated
+     * using React.useId() for accessibility compliance.
+     */
+    id?: string;
+};
+/**
+ * A complete form field component combining input, label, and descriptive text
+ *
+ * TextField provides a complete form field solution by composing the base Input
+ * and Label components with additional helper text and error handling. It automatically
+ * manages accessibility attributes, ID generation, and ARIA relationships to ensure
+ * forms are usable by all users including those using assistive technologies.
+ *
+ * This component follows form design patterns similar to those found in modern UI
+ * libraries while providing Neynar-specific styling and behavior. It supports all
+ * standard HTML input types and attributes while adding enhanced UX features.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <TextField
+ *   label="Email Address"
+ *   type="email"
+ *   placeholder="Enter your email"
+ * />
+ * ```
+ *
+ * @example With helper text
+ * ```tsx
+ * <TextField
+ *   label="Username"
+ *   placeholder="@username"
+ *   helperText="Choose a unique username (3-20 characters)"
+ * />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <TextField
+ *   label="Password"
+ *   type="password"
+ *   required
+ *   error="Password must be at least 8 characters"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ * />
+ * ```
+ *
+ * @example Controlled component with validation
+ * ```tsx
+ * const [email, setEmail] = useState("");
+ * const [error, setError] = useState("");
+ *
+ * const validateEmail = (value: string) => {
+ *   if (!value.includes("@")) {
+ *     setError("Please enter a valid email");
+ *   } else {
+ *     setError("");
+ *   }
+ * };
+ *
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   value={email}
+ *   onChange={(e) => {
+ *     setEmail(e.target.value);
+ *     validateEmail(e.target.value);
+ *   }}
+ *   error={error}
+ *   required
+ * />
+ * ```
+ *
+ * @example Form integration
+ * ```tsx
+ * <form onSubmit={handleSubmit}>
+ *   <TextField
+ *     label="Full Name"
+ *     name="fullName"
+ *     required
+ *     helperText="First and last name"
+ *   />
+ *   <TextField
+ *     label="API Key"
+ *     type="password"
+ *     name="apiKey"
+ *     required
+ *     helperText="Get your key from the Neynar dashboard"
+ *   />
+ * </form>
+ * ```
+ *
+ * ## Accessibility Features
+ *
+ * - **Semantic HTML**: Uses proper label-input association via `htmlFor` attribute
+ * - **ARIA Support**: Implements `aria-invalid`, `aria-describedby`, and `aria-required`
+ * - **Focus Management**: Keyboard navigation and focus indicators work correctly
+ * - **Screen Readers**: Helper text and error messages are properly announced
+ * - **Required Fields**: Visual and semantic indication with asterisk and ARIA attributes
+ * - **Error States**: Clear visual and programmatic error indication
+ *
+ * ## Styling & Variants
+ *
+ * The component inherits styling from the base Input component and adds:
+ * - Error state styling with destructive colors
+ * - Consistent spacing with `space-y-2` utility
+ * - Muted foreground color for helper text
+ * - Required field indicator styling
+ *
+ * @see {@link Input} The underlying input component
+ * @see {@link Label} The label component used for field labels
+ * @since 1.0.0 */
+declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { TextField };
+//# sourceMappingURL=text-field.d.ts.map

package/dist/components/ui/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,GAAG;IACvE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA0GkB;AAClB,QAAA,MAAM,SAAS,sGA0Cd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+/**
+ * A multi-line text input control built on the native HTML textarea element
+ *
+ * The Textarea component provides a styled textarea for entering longer pieces
+ * of text that span multiple lines, such as comments, descriptions, or messages.
+ * Features automatic content-based resizing using CSS field-sizing when supported
+ * by the browser.
+ *
+ * Built following shadcn/ui design patterns with consistent styling and behavior
+ * across form elements.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Textarea placeholder="Type your message here." />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With label and validation
+ * <div className="space-y-2">
+ *   <Label htmlFor="description">Description</Label>
+ *   <Textarea
+ *     id="description"
+ *     placeholder="Enter a description..."
+ *     rows={4}
+ *   />
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled with character limit
+ * const [bio, setBio] = useState("");
+ * const maxLength = 160;
+ *
+ * <div className="space-y-2">
+ *   <Label htmlFor="bio">Bio</Label>
+ *   <Textarea
+ *     id="bio"
+ *     value={bio}
+ *     onChange={(e) => setBio(e.target.value)}
+ *     placeholder="Tell us about yourself..."
+ *     maxLength={maxLength}
+ *   />
+ *   <p className="text-sm text-muted-foreground">
+ *     {bio.length}/{maxLength} characters
+ *   </p>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With error state
+ * <Textarea
+ *   placeholder="Enter your feedback"
+ *   aria-invalid="true"
+ *   aria-describedby="feedback-error"
+ *   className="border-destructive"
+ * />
+ * <p id="feedback-error" className="text-sm text-destructive">
+ *   This field is required
+ * </p>
+ * ```
+ *
+ * @param className - Additional CSS classes to apply
+ * @param ...props - All standard HTML textarea attributes are supported
+ *
+ * @accessibility
+ * - Inherits all native textarea accessibility features
+ * - Supports keyboard navigation with visible focus indicators
+ * - Compatible with screen readers and assistive technologies
+ * - Properly handles aria-invalid for validation states
+ * - Works seamlessly with Label components via htmlFor/id association
+ * - Respects disabled and readonly states
+ * - Auto-resizing maintains proper focus and scroll behavior
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/textarea} shadcn/ui Textarea documentation
+ * @since 1.0.0
+ */
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/ui/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/theme-toggle.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Props for the ThemeToggle component
+ */
+export type ThemeToggleProps = {
+    /** Visual style variant for the toggle button */
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    /** Size of the toggle button */
+    size?: "default" | "sm" | "lg" | "icon";
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether to show text labels (only applies when size is not "icon") */
+    showLabel?: boolean;
+    /** Alignment of the dropdown menu */
+    align?: "start" | "center" | "end";
+};
+/**
+ * ThemeToggle - A zero-config theme switcher with system, light, and dark modes
+ *
+ * A self-contained theme toggle component that works without any provider setup.
+ * Provides an intuitive dropdown interface for switching between system preference,
+ * light mode, and dark mode. The component handles theme persistence using cookies
+ * for SSR compatibility and automatically detects system theme changes.
+ *
+ * Built as a custom Neynar component that extends the standard shadcn/ui patterns
+ * with enhanced theme management capabilities.
+ *
+ * @component
+ * @example Basic usage (icon button)
+ * ```tsx
+ * // Most common usage - just drop it in!
+ * <ThemeToggle />
+ * ```
+ *
+ * @example With text labels
+ * ```tsx
+ * // Show current theme name next to icon
+ * <ThemeToggle size="default" showLabel />
+ * ```
+ *
+ * @example Custom styling variants
+ * ```tsx
+ * // Ghost button for minimalist UI
+ * <ThemeToggle variant="ghost" />
+ *
+ * // Secondary style for subtlety
+ * <ThemeToggle variant="secondary" size="sm" />
+ *
+ * // Custom positioning
+ * <ThemeToggle align="start" className="border-2" />
+ * ```
+ *
+ * @example In navigation components
+ * ```tsx
+ * // Header navigation
+ * <header className="flex items-center justify-between p-4">
+ *   <Logo />
+ *   <div className="flex items-center gap-2">
+ *     <Button variant="ghost">Settings</Button>
+ *     <ThemeToggle />
+ *   </div>
+ * </header>
+ *
+ * // Sidebar footer
+ * <SidebarFooter>
+ *   <div className="flex items-center justify-between">
+ *     <UserProfile />
+ *     <ThemeToggle variant="ghost" size="sm" />
+ *   </div>
+ * </SidebarFooter>
+ * ```
+ *
+ * @param variant - Button style variant (inherits from Button component)
+ * @param size - Button size, defaults to "icon" for compact display
+ * @param className - Additional CSS classes for custom styling
+ * @param showLabel - Whether to show theme name text (auto-enabled for non-icon sizes)
+ * @param align - Dropdown menu alignment relative to trigger button
+ *
+ * @features
+ * - **Zero Configuration**: Works immediately without providers or setup
+ * - **System Detection**: Automatically follows OS dark/light preference
+ * - **SSR Compatible**: Uses cookies for theme persistence across server/client
+ * - **Smooth Transitions**: CSS-based theme switching with no flash
+ * - **Accessibility**: Full keyboard navigation and screen reader support
+ * - **Responsive**: Touch-friendly on mobile devices
+ *
+ * @accessibility
+ * - Screen reader label: "Toggle theme" for assistive technology
+ * - Keyboard navigation: Enter, Space, and Arrow keys for dropdown
+ * - Current selection indicated with checkmark and visual styling
+ * - High contrast support across all theme modes
+ * - Focus visible indicators for keyboard users
+ *
+ * @remarks
+ * This component uses the {@link useTheme} hook internally to manage theme state.
+ * Theme changes are persisted automatically and synchronized across browser tabs.
+ * The component is fully self-contained and doesn't interfere with existing
+ * theme systems in your application.
+ *
+ * @see {@link useTheme} - The underlying theme management hook
+ * @see {@link Button} - Base button component for styling options
+ * @see {@link DropdownMenu} - Menu component used for theme selection
+ * @since 1.0.0
+ */
+export declare function ThemeToggle({ variant, size, className, showLabel, align, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/ui/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-toggle.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iDAAiD;IACjD,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;IAEX,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAExC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,IAAa,EACb,SAAS,EACT,SAA2B,EAC3B,KAAa,GACd,EAAE,gBAAgB,2CAmDlB"}

package/dist/components/ui/theme.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Theme - Prevents flash of unstyled content (FOUC) during theme initialization
+ *
+ * A critical component that prevents the flash of incorrect theme styling by applying
+ * the user's preferred theme before the page renders. This component should be placed
+ * once at the root of your application, ideally in the document head or at the very
+ * beginning of the body.
+ *
+ * The component works by injecting a small inline script that:
+ * 1. Reads the stored theme preference from cookies
+ * 2. Detects system theme preference if set to "system"
+ * 3. Applies the appropriate theme class and color scheme immediately
+ * 4. Executes synchronously before first paint to prevent FOUC
+ *
+ * @component
+ * @example Basic usage in Next.js App Router
+ * ```tsx
+ * import { Theme } from "@neynar/ui";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en" suppressHydrationWarning>
+ *       <head>
+ *         <Theme />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * @example Usage in Vite/React
+ * ```tsx
+ * import { Theme } from "@neynar/ui";
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <Theme />
+ *       <div className="app">
+ *         App content here
+ *       </div>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example Usage with Remix
+ * ```tsx
+ * import { Theme } from "@neynar/ui";
+ *
+ * export default function Root() {
+ *   return (
+ *     <html lang="en">
+ *       <head>
+ *         <Theme />
+ *         <Meta />
+ *         <Links />
+ *       </head>
+ *       <body>
+ *         <Outlet />
+ *         <ScrollRestoration />
+ *         <Scripts />
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ *
+ * @features
+ * - **FOUC Prevention**: Applies theme before first paint
+ * - **Framework Agnostic**: Works with Next.js, Vite, Remix, and other React frameworks
+ * - **SSR Compatible**: Handles server-side rendering correctly
+ * - **System Detection**: Automatically follows OS dark/light preference
+ * - **Cookie Persistence**: Maintains theme across browser sessions
+ * - **Minimal Overhead**: Tiny inline script with no external dependencies
+ *
+ * @accessibility
+ * - Respects system preference for reduced motion
+ * - Maintains proper color contrast ratios
+ * - Works with screen readers and assistive technology
+ * - Follows WCAG guidelines for theme switching
+ *
+ * @performance
+ * - Executes before React hydration
+ * - No network requests or external dependencies
+ * - Minified inline script for optimal performance
+ * - Zero runtime overhead after initial execution
+ *
+ * @security
+ * - Uses dangerouslySetInnerHTML with known safe content
+ * - No external script sources or eval usage
+ * - Cookie reading with proper error handling
+ * - Graceful fallback on script execution errors
+ *
+ * @remarks
+ * This component must be used alongside the {@link useTheme} hook and
+ * {@link ThemeToggle} component for a complete theming solution. The script
+ * handles initial theme application, while the hook manages runtime theme changes.
+ *
+ * The component is designed to work with Tailwind CSS's dark mode strategy,
+ * specifically the 'dark' class approach. It applies the 'dark' class to the
+ * document root and sets the appropriate color-scheme CSS property.
+ *
+ * @see {@link useTheme} - Hook for managing theme state and preferences
+ * @see {@link ThemeToggle} - UI component for theme switching
+ * @since 1.0.0
+ */
+export declare function Theme(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme.d.ts.map

package/dist/components/ui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AACH,wBAAgB,KAAK,4CAuCpB"}

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,133 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { toggleVariants } from "@/components/ui/toggle";
+/**
+ * Toggle Group - A group of toggle buttons with single or multiple selection
+ *
+ * ToggleGroup provides a way to group related toggle buttons together, allowing users
+ * to select from a set of mutually exclusive options (single selection) or independent
+ * options (multiple selection). Built on Radix UI Toggle Group primitive with support
+ * for keyboard navigation and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * // Single selection (like radio buttons)
+ * <ToggleGroup type="single" defaultValue="center">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeft className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenter className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRight className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection (like checkboxes)
+ * <ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <Bold className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <Italic className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <Underline className="h-4 w-4" />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Text-based options with variants
+ * <ToggleGroup type="single" variant="outline" size="sm">
+ *   <ToggleGroupItem value="draft">Draft</ToggleGroupItem>
+ *   <ToggleGroupItem value="published">Published</ToggleGroupItem>
+ *   <ToggleGroupItem value="archived">Archived</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @param type - Selection mode: "single" for radio-like behavior, "multiple" for checkbox-like
+ * @param variant - Visual style: "default" (subtle) or "outline" (bordered)
+ * @param size - Size variant: "sm", "default", or "lg"
+ * @param disabled - Whether the entire group is disabled
+ * @param defaultValue - Initial selected value(s) - string for single, array for multiple
+ * @param value - Controlled selected value(s) - string for single, array for multiple
+ * @param onValueChange - Callback when selection changes
+ *
+ * @accessibility
+ * - Uses role="group" with appropriate ARIA attributes
+ * - Arrow keys navigate between items with roving tabindex
+ * - Space or Enter key toggles item selection
+ * - Home/End keys jump to first/last items
+ * - Supports disabled state for individual items or entire group
+ * - Screen readers announce selection state changes
+ *
+ * @see {@link ToggleGroupItem} - Individual toggle items within the group
+ * @see {@link Toggle} - Standalone toggle button component
+ * @see {@link https://ui.shadcn.com/docs/components/toggle-group} - Design system documentation
+ * @since 1.0.0
+ */
+declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Toggle Group Item - Individual selectable item within a ToggleGroup
+ *
+ * Represents a single option within a ToggleGroup component. Automatically inherits
+ * variant and size styling from the parent ToggleGroup context, but these can be
+ * overridden for specific items if needed. Supports icons, text, or mixed content.
+ *
+ * @example
+ * ```tsx
+ * // Text-based item
+ * <ToggleGroupItem value="draft">Draft</ToggleGroupItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon-only item (requires aria-label)
+ * <ToggleGroupItem value="bold" aria-label="Toggle bold formatting">
+ *   <Bold className="h-4 w-4" />
+ * </ToggleGroupItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Mixed content with icon and text
+ * <ToggleGroupItem value="bold">
+ *   <Bold className="h-4 w-4" />
+ *   Bold
+ * </ToggleGroupItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Override inherited styling
+ * <ToggleGroupItem value="special" variant="outline" size="lg">
+ *   Special Option
+ * </ToggleGroupItem>
+ * ```
+ *
+ * @param value - Unique identifier for this item within the group (required)
+ * @param disabled - Whether this specific item is disabled
+ * @param variant - Override variant from parent ToggleGroup
+ * @param size - Override size from parent ToggleGroup
+ * @param children - Content to display (icons, text, or both)
+ *
+ * @accessibility
+ * - Participates in parent ToggleGroup's keyboard navigation
+ * - Uses aria-pressed to indicate selection state
+ * - Supports focus management with visible focus indicators
+ * - For icon-only items, always provide aria-label for screen readers
+ * - Disabled items are excluded from keyboard navigation
+ *
+ * @see {@link ToggleGroup} - Parent container component
+ * @see {@link Toggle} - Standalone toggle button
+ */
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/ui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAiBpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAqBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}