@neynar/ui 0.4.0 → 0.5.0

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

@@ -1,209 +1,26 @@
-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";
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import { toggleVariants } from './toggle';
+type ToggleGroupProps = ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+    /** Gap between items in spacing units. Set to 0 for joined buttons. @default 0 */
+    spacing?: number;
+    /** Layout direction of the toggle group. @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+};
 /**
- * Toggle Group - A group of toggle buttons with single or multiple selection
+ * Container for a group of toggle buttons that share state. Supports both single and multiple selection modes.
  *
- * 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 enhanced
- * styling through CVA variants and full accessibility support including keyboard navigation.
- *
- * The component supports both controlled and uncontrolled usage patterns, with automatic
- * focus management and roving tabindex behavior. Visual variants are inherited by all child
- * items but can be overridden per item if needed.
- *
- * @example Single selection with icons (radio button behavior)
- * ```tsx
- * import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";
- *
- * <ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
- *   <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 Multiple selection with controlled state
- * ```tsx
- * import { Bold, Italic, Underline } from "lucide-react";
- *
- * function TextEditor() {
- *   const [formatting, setFormatting] = useState<string[]>(["bold"]);
- *
- *   return (
- *     <ToggleGroup
- *       type="multiple"
- *       value={formatting}
- *       onValueChange={setFormatting}
- *       aria-label="Text formatting"
- *     >
- *       <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 Text-based options with outline variant
- * ```tsx
- * <ToggleGroup type="single" variant="outline" size="sm" defaultValue="draft">
- *   <ToggleGroupItem value="draft">Draft</ToggleGroupItem>
- *   <ToggleGroupItem value="review">In Review</ToggleGroupItem>
- *   <ToggleGroupItem value="published">Published</ToggleGroupItem>
- *   <ToggleGroupItem value="archived">Archived</ToggleGroupItem>
- * </ToggleGroup>
- * ```
- *
- * @example Vertical orientation for sidebar controls
- * ```tsx
- * <ToggleGroup
- *   type="multiple"
- *   orientation="vertical"
- *   variant="outline"
- *   className="flex-col"
- * >
- *   <ToggleGroupItem value="notifications">Notifications</ToggleGroupItem>
- *   <ToggleGroupItem value="sidebar">Show Sidebar</ToggleGroupItem>
- *   <ToggleGroupItem value="minimap">Show Minimap</ToggleGroupItem>
- * </ToggleGroup>
- * ```
- *
- * @example Mixed content with icons and text
- * ```tsx
- * <ToggleGroup type="single" variant="outline" size="lg">
- *   <ToggleGroupItem value="grid">
- *     <Grid className="h-4 w-4" />
- *     Grid View
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="list">
- *     <List className="h-4 w-4" />
- *     List View
- *   </ToggleGroupItem>
- * </ToggleGroup>
- * ```
- *
- * @variant default - Subtle background styling with transparent base, accent color when pressed
- * @variant outline - Bordered styling with subtle shadow, maintains outline when pressed
- *
- * @accessibility
- * - Implements WAI-ARIA ToggleButton pattern with proper roles and states
- * - Uses roving tabindex for keyboard navigation between items
- * - Arrow keys navigate between items (direction based on orientation)
- * - Space or Enter key toggles item selection state
- * - Home key moves focus to first item, End key to last item
- * - Focus wraps from last to first item when loop=true (default)
- * - Supports disabled state for individual items or entire group
- * - Screen readers announce selection state changes via aria-pressed
- * - Proper focus management with visible focus indicators
- * - Group labeling via aria-label or aria-labelledby recommended
- *
- * @see {@link ToggleGroupItem} Individual toggle items within the group
- * @see {@link Toggle} Standalone toggle button component
- * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle-group} Radix UI ToggleGroup primitive
- * @see {@link https://ui.shadcn.com/docs/components/toggle-group} Design system documentation
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/} WAI-ARIA Toggle Button pattern
- * @since 1.0.0
+ * By default, the toggle group allows multiple selection. Use `multiple={false}` for single selection.
+ * All items inherit variant and size from the group unless explicitly overridden.
  */
-declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+type ToggleGroupItemProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
 /**
- * Toggle Group Item - Individual selectable item within a ToggleGroup
- *
- * Represents a single toggleable option within a ToggleGroup component. Each item
- * automatically inherits variant and size styling from the parent ToggleGroup context
- * through React Context, but these can be overridden for specific styling needs.
- * Supports flexible content including icons, text, or mixed combinations.
- *
- * The component participates in the parent ToggleGroup's keyboard navigation and
- * selection behavior, with proper ARIA attributes for accessibility. Focus management
- * and selection state are handled automatically by the Radix UI primitive.
- *
- * @example Text-based item with inherited styling
- * ```tsx
- * <ToggleGroupItem value="draft">Draft</ToggleGroupItem>
- * ```
- *
- * @example Icon-only item with required accessibility label
- * ```tsx
- * import { Bold } from "lucide-react";
- *
- * <ToggleGroupItem value="bold" aria-label="Toggle bold formatting">
- *   <Bold className="h-4 w-4" />
- * </ToggleGroupItem>
- * ```
- *
- * @example Mixed content with icon and descriptive text
- * ```tsx
- * import { Calendar } from "lucide-react";
- *
- * <ToggleGroupItem value="calendar">
- *   <Calendar className="h-4 w-4" />
- *   Calendar View
- * </ToggleGroupItem>
- * ```
- *
- * @example Override inherited styling for special emphasis
- * ```tsx
- * <ToggleGroupItem
- *   value="premium"
- *   variant="outline"
- *   size="lg"
- *   className="border-gold text-gold"
- * >
- *   Premium Feature
- * </ToggleGroupItem>
- * ```
- *
- * @example Disabled item within functional group
- * ```tsx
- * <ToggleGroupItem
- *   value="coming-soon"
- *   disabled
- *   aria-label="Feature coming soon"
- * >
- *   <Sparkles className="h-4 w-4" />
- *   Coming Soon
- * </ToggleGroupItem>
- * ```
- *
- * @example Using asChild for custom element composition
- * ```tsx
- * <ToggleGroupItem value="custom" asChild>
- *   <a href="/settings" className="no-underline">
- *     <Settings className="h-4 w-4" />
- *     Settings
- *   </a>
- * </ToggleGroupItem>
- * ```
- *
- * @accessibility
- * - Participates in parent ToggleGroup's roving tabindex navigation
- * - Uses aria-pressed attribute to indicate selection state ("true"/"false")
- * - Supports focus management with visible focus indicators and proper focus ring
- * - For icon-only items, always provide aria-label for screen reader users
- * - Disabled items are excluded from keyboard navigation and marked non-interactive
- * - Inherits semantic meaning from parent group's aria-label or aria-labelledby
- * - Proper button semantics with keyboard activation (Space/Enter)
+ * Individual toggle button within a ToggleGroup. Inherits variant and size from parent group context.
  *
- * @see {@link ToggleGroup} Parent container component that manages selection state
- * @see {@link Toggle} Standalone toggle button for independent usage
- * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle-group} Radix UI primitive documentation
- * @since 1.0.0
+ * When spacing={0}, items are joined together with shared borders. Use `aria-label` for icon-only buttons.
  */
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
-export { ToggleGroup, ToggleGroupItem };
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps, };
 //# sourceMappingURL=toggle-group.d.ts.map

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

@@ -1 +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;AAkJxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAiBxG;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAqBxG;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAcxD,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,KAAK,GAChD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEJ;;;;;GAKG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAsBlB;AAED,KAAK,oBAAoB,GAAG,eAAe,CAAC,KAAK,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAsBtB;AAED,OAAO,EACL,WAAW,EACX,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,GAC1B,CAAC"}

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { toggleVariants } from "./toggle.js";
+import { ToggleGroup as ToggleGroup$1 } from "../../node_modules/@base-ui/react/esm/toggle-group/ToggleGroup.js";
+import { Toggle } from "../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ToggleGroupContext.Provider,
+        {
+          value: { variant, size, spacing, orientation },
+          children
+        }
+      )
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};
+//# sourceMappingURL=toggle-group.js.map

package/dist/components/ui/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"@/components/ui/toggle\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number;\n    orientation?: \"horizontal\" | \"vertical\";\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n});\n\ntype ToggleGroupProps = ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    /** Gap between items in spacing units. Set to 0 for joined buttons. @default 0 */\n    spacing?: number;\n    /** Layout direction of the toggle group. @default \"horizontal\" */\n    orientation?: \"horizontal\" | \"vertical\";\n  };\n\n/**\n * Container for a group of toggle buttons that share state. Supports both single and multiple selection modes.\n *\n * By default, the toggle group allows multiple selection. Use `multiple={false}` for single selection.\n * All items inherit variant and size from the group unless explicitly overridden.\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleGroupItemProps = TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>;\n\n/**\n * Individual toggle button within a ToggleGroup. Inherits variant and size from parent group context.\n *\n * When spacing={0}, items are joined together with shared borders. Use `aria-label` for icon-only buttons.\n */\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleGroupItemProps) {\n  const context = React.useContext(ToggleGroupContext);\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n}\n\nexport {\n  ToggleGroup,\n  ToggleGroupItem,\n  type ToggleGroupProps,\n  type ToggleGroupItemProps,\n};\n"],"names":["ToggleGroupPrimitive","TogglePrimitive"],"mappings":";;;;;;;AAUA;AAKE;AACM;AACG;AACA;AAEX;AAgBA;AAAqB;AACnB;AACA;AACA;AACU;AACI;AACd;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACI;AACH;AACG;AACI;AACA;AACP;AACT;AACA;AAAA;AAEE;AAEJ;AAAoB;AAAnB;AACkC;AAEhC;AAAA;AAAA;AACH;AAGN;AAUA;AAAyB;AACvB;AACA;AACU;AACH;AAET;AACE;AAEA;AACE;AAACC;AAAA;AACW;AACuB;AACN;AACL;AACX;AACT;AACe;AACe;AACN;AACvB;AACD;AAAA;AAEE;AAEH;AAAA;AAGP;;;;;"}

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

@@ -1,172 +1,14 @@
-import * as React from "react";
-/**
- * Toggle component variant configuration
- *
- * Defines visual styles and sizing options for the toggle component
- * with proper state indicators and accessibility features.
- *
- * @variant default - Clean transparent background with hover states
- * @variant outline - Bordered style with subtle shadow for emphasis
- *
- * @size sm - Compact 32px height for dense layouts
- * @size default - Standard 36px height for general use
- * @size lg - Large 40px height for prominent actions
- */
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { VariantProps } from 'class-variance-authority';
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * Props for Toggle component
- *
- * Combines Radix UI Toggle primitive props with custom variant styling options.
- * Supports both controlled and uncontrolled usage patterns.
- */
-type ToggleProps = {
-    /** Whether to render as a child element instead of the default button */
-    asChild?: boolean;
-    /** The pressed state of the toggle when initially rendered (uncontrolled) @default false */
-    defaultPressed?: boolean;
-    /** The controlled pressed state of the toggle */
-    pressed?: boolean;
-    /** Event handler called when the pressed state changes */
-    onPressedChange?: (pressed: boolean) => void;
-    /** When true, prevents user interaction with the toggle */
-    disabled?: boolean;
-    /** Visual style variant for the toggle appearance */
-    variant?: "default" | "outline";
-    /** Size variant that affects dimensions and padding */
-    size?: "sm" | "default" | "lg";
-    /** Additional CSS classes for custom styling */
-    className?: string;
-    /** Toggle content - typically icons, text, or both */
-    children?: React.ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'children'>;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;
 /**
- * A two-state button that can be either on or off
- *
- * The Toggle component provides an accessible button with on/off state functionality.
- * Built on Radix UI Toggle primitives with customizable variants and sizes.
- * Perfect for text formatting controls, feature toggles, and any binary state controls.
- * Automatically manages ARIA attributes and provides keyboard navigation.
- *
- * @example Basic toggle with icon
- * ```tsx
- * import { Bold } from "lucide-react"
- *
- * <Toggle aria-label="Toggle bold formatting">
- *   <Bold className="h-4 w-4" />
- * </Toggle>
- * ```
- *
- * @example Controlled toggle with state management
- * ```tsx
- * const [isBold, setIsBold] = useState(false)
- *
- * <Toggle
- *   pressed={isBold}
- *   onPressedChange={setIsBold}
- *   aria-label="Toggle bold formatting"
- * >
- *   <Bold className="h-4 w-4" />
- * </Toggle>
- * ```
- *
- * @example Toggle with text and outline variant
- * ```tsx
- * <Toggle variant="outline" size="lg">
- *   <Italic className="h-4 w-4" />
- *   Italic
- * </Toggle>
- * ```
- *
- * @example Text formatting toolbar
- * ```tsx
- * <div className="flex gap-1 p-2 border rounded-md">
- *   <Toggle
- *     pressed={formatting.bold}
- *     onPressedChange={(pressed) => setFormatting(prev => ({ ...prev, bold: pressed }))}
- *     aria-label="Bold"
- *   >
- *     <Bold className="h-4 w-4" />
- *   </Toggle>
- *   <Toggle
- *     pressed={formatting.italic}
- *     onPressedChange={(pressed) => setFormatting(prev => ({ ...prev, italic: pressed }))}
- *     aria-label="Italic"
- *   >
- *     <Italic className="h-4 w-4" />
- *   </Toggle>
- *   <Toggle
- *     pressed={formatting.underline}
- *     onPressedChange={(pressed) => setFormatting(prev => ({ ...prev, underline: pressed }))}
- *     aria-label="Underline"
- *   >
- *     <Underline className="h-4 w-4" />
- *   </Toggle>
- * </div>
- * ```
- *
- * @example Toggle group for settings
- * ```tsx
- * <div className="space-y-2">
- *   <div className="flex items-center justify-between">
- *     <Label htmlFor="notifications">Notifications</Label>
- *     <Toggle
- *       id="notifications"
- *       pressed={settings.notifications}
- *       onPressedChange={(pressed) => updateSetting('notifications', pressed)}
- *       variant="outline"
- *     >
- *       <Bell className="h-4 w-4" />
- *     </Toggle>
- *   </div>
- *   <div className="flex items-center justify-between">
- *     <Label htmlFor="dark-mode">Dark Mode</Label>
- *     <Toggle
- *       id="dark-mode"
- *       pressed={settings.darkMode}
- *       onPressedChange={(pressed) => updateSetting('darkMode', pressed)}
- *       variant="outline"
- *     >
- *       <Moon className="h-4 w-4" />
- *     </Toggle>
- *   </div>
- * </div>
- * ```
- *
- * @example Disabled state with tooltip
- * ```tsx
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Toggle disabled aria-label="Unavailable feature">
- *       <Lock className="h-4 w-4" />
- *       Pro Feature
- *     </Toggle>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <p>This feature requires a Pro subscription</p>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- *
- * @accessibility
- * - Keyboard Support: Space and Enter keys activate/deactivate the toggle
- * - Screen Reader Support: Automatically manages aria-pressed attribute ("true"/"false")
- * - Focus Management: Visible focus indicators with customizable focus ring
- * - State Communication: Uses data-state attribute ("on"/"off") for styling pressed state
- * - Disabled State: Properly communicated to assistive technology with aria-disabled
- * - Labeling: Requires accessible name via aria-label or aria-labelledby for icon-only toggles
- * - High Contrast: Maintains visibility in high contrast mode with proper color combinations
- *
- * @see {@link https://www.radix-ui.com/primitives/docs/components/toggle} Radix UI Toggle Documentation
- * @see {@link https://ui.shadcn.com/docs/components/toggle} shadcn/ui Toggle Documentation
- * @see {@link ToggleGroup} For mutually exclusive toggle groups
- * @since 1.0.0
+ * Two-state button that can be pressed (on) or unpressed (off).
+ * Supports icons, text, or both. Commonly used for formatting toolbars, view mode toggles, and preference switches.
  */
 declare function Toggle({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Toggle {
-    var displayName: string;
-}
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, type ToggleProps };
 //# sourceMappingURL=toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyHG;AAEH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQlE;kBARQ,MAAM;;;AAYf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAmBnB,CAAC;AAEF,KAAK,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE/E;;;GAGG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,2CAQb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/ui/toggle.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cn } from "../../lib/utils.js";
+import { Toggle as Toggle$1 } from "../../node_modules/@base-ui/react/esm/toggle/Toggle.js";
+const toggleVariants = cva(
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-input hover:bg-muted border bg-transparent shadow-xs"
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toggle$1,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+export {
+  Toggle,
+  toggleVariants
+};
+//# sourceMappingURL=toggle.js.map

package/dist/components/ui/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../src/components/ui/toggle.tsx"],"sourcesContent":["import { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent shadow-xs\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\ntype ToggleProps = TogglePrimitive.Props & VariantProps<typeof toggleVariants>;\n\n/**\n * Two-state button that can be pressed (on) or unpressed (off).\n * Supports icons, text, or both. Commonly used for formatting toolbars, view mode toggles, and preference switches.\n */\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants, type ToggleProps };\n"],"names":["TogglePrimitive"],"mappings":";;;;AAKA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAQA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,MACzD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}