@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/components/slider.mjs

@@ -1,8 +1,7 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Slider as Slider$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
 //#region src/components/slider.tsx
 /**
 * @since 0.3.16-canary.0
@@ -17,24 +16,23 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
 		min,
 		max
 	]);
-	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
-		className: cn("relative flex w-full items-center", "touch-none select-none", "data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col", "data-disabled:opacity-50", className),
+	return /* @__PURE__ */ jsxs(Slider$1.Root, {
+		className: cn("relative flex w-full touch-none items-center select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50", className),
 		"data-slot": "slider",
 		defaultValue,
 		max,
 		min,
 		value,
 		...props,
-		children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
-			className: cn("relative", "w-full grow overflow-hidden", "rounded-full", "bg-input", "data-horizontal:h-1 data-horizontal:w-full", "data-vertical:h-full data-vertical:w-1"),
+		children: [/* @__PURE__ */ jsx(Slider$1.Track, {
+			className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5",
 			"data-slot": "slider-track",
-			children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
-				className: cn("absolute", "bg-primary", "data-horizontal:h-full", "data-vertical:w-full"),
+			children: /* @__PURE__ */ jsx(Slider$1.Range, {
+				className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full",
 				"data-slot": "slider-range"
 			})
-		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
-			"aria-label": "Volume",
-			className: cn("flex size-4 items-center justify-center", "rounded-full border-2 border-primary", "bg-primary shadow-sm outline-hidden", "after:size-full after:rounded-full after:bg-background after:transition-[width,height]", "focus-visible:ring-4 focus-visible:ring-primary/20", "active:not-data-disabled:after:size-1", "dark:focus-visible:ring-primary/40"),
+		}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+			className: "block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
 			"data-slot": "slider-thumb"
 		}, index))]
 	});

package/dist/components/sonner.mjs

@@ -1,5 +1,4 @@
-"use client";
-import { cn } from "../lib/utils.mjs";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
 import { Toaster as Toaster$1, toast, useSonner } from "sonner";
@@ -10,13 +9,22 @@ import { Toaster as Toaster$1, toast, useSonner } from "sonner";
 function Toaster({ ...props }) {
 	const { theme = "system" } = useTheme();
 	return /* @__PURE__ */ jsx(Toaster$1, {
-		className: cn("group", "toaster"),
+		className: "toaster group",
+		icons: {
+			error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+			info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+			loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),
+			success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" })
+		},
 		style: {
+			"--border-radius": "var(--radius)",
 			"--normal-bg": "var(--popover)",
 			"--normal-border": "var(--border)",
 			"--normal-text": "var(--popover-foreground)"
 		},
 		theme,
+		toastOptions: { classNames: { toast: "rounded-2xl" } },
 		...props
 	});
 }

package/dist/components/spinner.mjs

@@ -1,7 +1,6 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { VisuallyHidden } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 //#region src/components/spinner.tsx
 const SPINNER_COUNT = 8;
 /**
@@ -10,10 +9,10 @@ const SPINNER_COUNT = 8;
 function Spinner({ children, className, loading = true, ...props }) {
 	if (!loading) return children;
 	const spinner = /* @__PURE__ */ jsx("span", {
-		className: cn("relative flex size-4 items-center justify-center", "opacity-60", className),
+		className: cn("relative flex size-4 items-center justify-center opacity-60", className),
 		...props,
 		children: Array.from({ length: SPINNER_COUNT }, (_, index) => /* @__PURE__ */ jsx("span", {
-			className: cn("absolute", "h-full rotate-(--spinner-rotate)", "before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite"),
+			className: "absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none",
 			style: {
 				"--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
 				"--spinner-duration": `${(SPINNER_COUNT * 100).toString()}ms`,
@@ -28,12 +27,12 @@ function Spinner({ children, className, loading = true, ...props }) {
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("contents", "invisible"),
+				className: "invisible contents",
 				children
 			}),
-			/* @__PURE__ */ jsx(VisuallyHidden, { children }),
+			/* @__PURE__ */ jsx(VisuallyHidden.Root, { children }),
 			/* @__PURE__ */ jsx("span", {
-				className: cn("absolute flex items-center justify-center", "inset-0"),
+				className: "absolute inset-0 flex items-center justify-center",
 				children: spinner
 			})
 		]

package/dist/components/switch.d.mts

@@ -1,16 +1,19 @@
+import { Switch as Switch$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 //#region src/components/switch.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
+type SwitchProps = ComponentProps<typeof Switch$1.Root> & {
+  size?: "default" | "sm";
+};
 /**
  * @since 0.3.16-canary.0
  */
 declare function Switch({
   className,
+  size,
   ...props
 }: SwitchProps): JSX.Element;
 //#endregion

package/dist/components/switch.mjs

@@ -1,18 +1,18 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Switch as Switch$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/components/switch.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Switch({ className, ...props }) {
-	return /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-		className: cn("peer inline-flex h-5 w-9 shrink-0 items-center p-0.75", "rounded-full border border-transparent shadow-xs outline-hidden", "transition-all", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-data-checked:border-ring/60", "disabled:opacity-50", "data-checked:bg-primary", "data-checked:focus-visible:ring-primary/20", "dark:data-checked:focus-visible:ring-primary/40", "data-unchecked:bg-input", "dark:data-unchecked:bg-input/80", className),
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		"data-size": size,
 		"data-slot": "switch",
 		...props,
-		children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, {
-			className: cn("block", "size-3.5", "rounded-full", "bg-background shadow-sm", "pointer-events-none transition-transform", "dark:not-data-checked:bg-foreground", "data-checked:translate-x-3.5", "data-unchecked:translate-x-0"),
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground",
 			"data-slot": "switch-thumb"
 		})
 	});

package/dist/components/table.mjs

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 */
 function Table({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative", "w-full overflow-auto"),
-		"data-slot": "table-cotainer",
+		className: "relative w-full overflow-x-auto",
+		"data-slot": "table-container",
 		children: /* @__PURE__ */ jsx("table", {
-			className: cn("w-full text-sm", "caption-bottom", className),
+			className: cn("w-full caption-bottom text-sm", className),
 			"data-slot": "table",
 			...props
 		})
@@ -20,7 +20,7 @@ function Table({ className, ...props }) {
 */
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
-		className: cn("*:border-b", "*:has-aria-expanded:bg-transparent", className),
+		className: cn("[&_tr]:border-b", className),
 		"data-slot": "table-header",
 		...props
 	});
@@ -30,7 +30,7 @@ function TableHeader({ className, ...props }) {
 */
 function TableBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn("*:last-child:border-0", className),
+		className: cn("[&_tr:last-child]:border-0", className),
 		"data-slot": "table-body",
 		...props
 	});
@@ -40,7 +40,7 @@ function TableBody({ className, ...props }) {
 */
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
-		className: cn("bg-muted/50 font-medium", "*:border-t *:border-b-0", "*:has-aria-expanded:bg-transparent", className),
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
 		"data-slot": "table-footer",
 		...props
 	});
@@ -50,7 +50,7 @@ function TableFooter({ className, ...props }) {
 */
 function TableRow({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn("border-b", "transition-colors", "hover:bg-muted/50", "has-aria-expanded:bg-muted/50", "data-selected:bg-muted", className),
+		className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-selected:bg-muted", className),
 		"data-slot": "table-row",
 		...props
 	});
@@ -60,7 +60,7 @@ function TableRow({ className, ...props }) {
 */
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
-		className: cn("p-2", "text-left align-middle font-medium", className),
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
 		"data-slot": "table-head",
 		...props
 	});
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }) {
 */
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("p-2", "align-middle", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
 		"data-slot": "table-cell",
 		...props
 	});
@@ -80,7 +80,7 @@ function TableCell({ className, ...props }) {
 */
 function TableCaption({ className, ...props }) {
 	return /* @__PURE__ */ jsx("caption", {
-		className: cn("mt-4", "text-sm text-muted-foreground", className),
+		className: cn("mt-4 text-sm text-muted-foreground", className),
 		"data-slot": "table-caption",
 		...props
 	});

package/dist/components/tabs.d.mts

@@ -1,33 +1,36 @@
+import { TabsListVariants } from "../variants/tabs.mjs";
+import { Tabs as Tabs$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 //#region src/components/tabs.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
+type TabsProps = ComponentProps<typeof Tabs$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */
 declare function Tabs({
   className,
+  orientation,
   ...props
 }: TabsProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+type TabsListProps = ComponentProps<typeof Tabs$1.List> & TabsListVariants;
 /**
  * @since 0.3.16-canary.0
  */
 declare function TabsList({
   className,
+  variant,
   ...props
 }: TabsListProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+type TabsTriggerProps = ComponentProps<typeof Tabs$1.Trigger>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -38,7 +41,7 @@ declare function TabsTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+type TabsContentProps = ComponentProps<typeof Tabs$1.Content>;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/tabs.mjs

@@ -1,25 +1,31 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { tabsListVariants } from "../variants/tabs.mjs";
+import { Tabs as Tabs$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 //#region src/components/tabs.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Tabs({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
-		className: cn("flex flex-col gap-2", className),
+function Tabs({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+		"data-orientation": orientation,
 		"data-slot": "tabs",
+		orientation,
 		...props
 	});
 }
 /**
 * @since 0.3.16-canary.0
 */
-function TabsList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.List, {
-		className: cn("inline-flex w-fit items-center justify-center gap-1 px-1 py-1", "rounded-xl", "bg-muted text-muted-foreground", className),
+function TabsList({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		className: tabsListVariants({
+			className,
+			variant
+		}),
 		"data-slot": "tabs-list",
+		"data-variant": variant,
 		...props
 	});
 }
@@ -27,8 +33,8 @@ function TabsList({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function TabsTrigger({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
-		className: cn("inline-flex items-center justify-center gap-1.5", "px-2 py-1.5", "rounded-lg", "text-sm font-medium whitespace-nowrap text-muted-foreground", "transition", "not-dark:outline-hidden", "hover:not-disabled:text-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring", "data-active:bg-background data-active:text-foreground data-active:shadow-sm", "dark:data-active:bg-input/50", "dark:focus-visible:data-active:outline-1", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+	return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
 		"data-slot": "tabs-trigger",
 		...props
 	});
@@ -37,8 +43,8 @@ function TabsTrigger({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function TabsContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
-		className: cn("mt-2", "rounded-xl ring-ring/50 outline-ring", "focus-visible:ring-4 focus-visible:outline-1", className),
+	return /* @__PURE__ */ jsx(Tabs$1.Content, {
+		className: cn("flex-1 text-sm outline-none", className),
 		"data-slot": "tabs-content",
 		...props
 	});

package/dist/components/textarea.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
-		className: cn("flex min-h-16 w-full grow px-3 py-2", "rounded-lg border border-input shadow-xs outline-hidden", "text-base", "transition", "placeholder:text-muted-foreground", "hover:not-disabled:not-focus-visible:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-invalid:border-destructive", "focus-within:aria-invalid:ring-destructive/20", "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:aria-invalid:ring-destructive/40", className),
+		className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "textarea",
 		...props
 	});

package/dist/components/toggle-group.d.mts

@@ -1,16 +1,18 @@
-import { ToggleVariants } from "./toggle.mjs";
+import { VariantProps } from "../lib/utils.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
+import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import { Scope } from "@radix-ui/react-context";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { Context } from "radix-ui/internal";
 
 //#region src/components/toggle-group.d.ts
 type ScopedProps<P> = P & {
-  __scopeToggleGroup?: Scope;
+  __scopeToggleGroup?: Context.Scope;
 };
 /**
  * @since 0.3.16-canary.0
  */
-type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariants & {
+type ToggleGroupProps = ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+  orientation?: "horizontal" | "vertical";
   spacing?: number;
 };
 /**
@@ -20,6 +22,7 @@ declare function ToggleGroup({
   __scopeToggleGroup,
   children,
   className,
+  orientation,
   size,
   spacing,
   variant,
@@ -28,14 +31,15 @@ declare function ToggleGroup({
 /**
  * @since 0.3.16-canary.0
  */
-type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroupPrimitive.Item>>;
+type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>>;
 /**
  * @since 0.3.16-canary.0
  */
 declare function ToggleGroupItem({
   __scopeToggleGroup,
-  children,
   className,
+  size,
+  variant,
   ...props
 }: ToggleGroupItemProps): JSX.Element;
 //#endregion

package/dist/components/toggle-group.mjs

@@ -1,27 +1,27 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { toggleVariants } from "./toggle.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
+import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import { createContextScope } from "@radix-ui/react-context";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
+import { Context } from "radix-ui/internal";
 //#region src/components/toggle-group.tsx
 const TOGGLE_GROUP_NAME = "ToggleGroup";
-const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
-const useToggleGroupScope = createToggleGroupScope();
+const [createToggleGroupContext] = Context.createContextScope(TOGGLE_GROUP_NAME, [ToggleGroup$1.createToggleGroupScope]);
+const useToggleGroupScope = ToggleGroup$1.createToggleGroupScope();
 const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
 /**
 * @since 0.3.16-canary.0
 */
-function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing = 0, variant, ...props }) {
+function ToggleGroup({ __scopeToggleGroup, children, className, orientation = "horizontal", size, spacing = 2, variant, ...props }) {
 	const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
 	return /* @__PURE__ */ jsx(ToggleGroupProvider, {
+		orientation,
 		scope: __scopeToggleGroup,
 		size,
 		spacing,
 		variant,
-		children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
-			className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]", "rounded-lg", "data-[spacing=default]:data-[variant=outline]:shadow-xs", className),
+		children: /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
+			className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch", className),
+			"data-orientation": orientation,
 			"data-size": size,
 			"data-slot": "toggle-group",
 			"data-spacing": spacing,
@@ -37,22 +37,21 @@ const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
 /**
 * @since 0.3.16-canary.0
 */
-function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props }) {
-	const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
+function ToggleGroupItem({ __scopeToggleGroup, className, size = "default", variant = "default", ...props }) {
+	const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
 	const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
-	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
-		className: cn("w-auto min-w-0 shrink-0 px-3", "focus:z-10", "focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none", "data-[spacing=0]:first:rounded-l-lg", "data-[spacing=0]:last:rounded-r-lg", "data-[spacing=0]:data-[variant=outline]:border-l-0", "data-[spacing=0]:data-[variant=outline]:first:border-l", toggleVariants({
+	return /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 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 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 data-on:bg-muted", toggleVariants({
 			className,
-			size,
-			variant
+			size: context.size ?? size,
+			variant: context.variant ?? variant
 		})),
-		"data-size": size,
+		"data-size": context.size ?? size,
 		"data-slot": "toggle-group-item",
-		"data-spacing": spacing,
-		"data-variant": variant,
+		"data-spacing": context.spacing,
+		"data-variant": context.variant ?? variant,
 		...toggleGroupScope,
-		...props,
-		children
+		...props
 	});
 }
 //#endregion

package/dist/components/toggle.d.mts

@@ -1,40 +1,20 @@
-import { VariantProps } from "../lib/utils.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ToggleVariants } from "../variants/toggle.mjs";
+import { Toggle as Toggle$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
 
 //#region src/components/toggle.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-declare const toggleVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    default: string[];
-    lg: string[];
-    sm: string[];
-  };
-  variant: {
-    default: string;
-    outline: string[];
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-type ToggleVariants = VariantProps<typeof toggleVariants>;
-/**
- * @since 0.3.16-canary.0
- */
-interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
+interface ToggleProps extends ComponentProps<typeof Toggle$1.Root>, ToggleVariants {}
 /**
  * @since 0.3.16-canary.0
  */
 declare function Toggle({
-  children,
   className,
   size,
   variant,
   ...props
 }: ToggleProps): JSX.Element;
 //#endregion
-export { Toggle, type ToggleProps, type ToggleVariants, toggleVariants };
+export { Toggle, type ToggleProps };

package/dist/components/toggle.mjs

@@ -1,59 +1,20 @@
-"use client";
-import { tv } from "../lib/utils.mjs";
+import { toggleVariants } from "../variants/toggle.mjs";
+import { Toggle as Toggle$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
 //#region src/components/toggle.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const toggleVariants = tv({
-	base: [
-		"inline-flex items-center justify-center gap-2",
-		"rounded-lg outline-none",
-		"text-sm font-medium whitespace-nowrap",
-		"transition-[color,box-shadow]",
-		"hover:bg-muted hover:text-muted-foreground",
-		"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-		"disabled:pointer-events-none disabled:opacity-50",
-		"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-		"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-		"dark:aria-invalid:ring-destructive/40",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-	],
-	variants: {
-		size: {
-			default: ["h-9 min-w-9", "px-2"],
-			lg: ["h-10 min-w-10", "px-2.5"],
-			sm: ["h-8 min-w-8", "px-1.5"]
-		},
-		variant: {
-			default: "bg-transparent",
-			outline: [
-				"border border-input",
-				"bg-transparent shadow-xs",
-				"hover:bg-accent hover:text-accent-foreground"
-			]
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
-function Toggle({ children, className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
+function Toggle({ className, size, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1.Root, {
 		className: toggleVariants({
 			className,
 			size,
 			variant
 		}),
 		"data-slot": "toggle",
-		...props,
-		children
+		...props
 	});
 }
 //#endregion
-export { Toggle, toggleVariants };
+export { Toggle };