@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4

package/dist/components/pagination.mjs

@@ -0,0 +1,71 @@
+import { cn } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "pagination",
+		className: cn("flex w-full justify-center", "mx-auto", className),
+		"data-slot": "pagination",
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex flex-row items-center gap-1", className),
+		"data-slot": "pagination-content",
+		...props
+	});
+}
+function PaginationItem(props) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ children, className, isActive, size = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		"aria-current": isActive ? "page" : void 0,
+		className: buttonVariants({
+			className,
+			size,
+			variant: isActive ? "outline" : "ghost"
+		}),
+		"data-slot": "pagination-link",
+		...props,
+		children
+	});
+}
+function PaginationPrevious({ ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		"data-slot": "pagination-previous",
+		size: "md",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: "Previous" })]
+	});
+}
+function PaginationNext({ ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		"data-slot": "pagination-next",
+		size: "md",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx(ChevronRightIcon, {})]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		className: cn("flex size-10 items-center justify-center", className),
+		"data-slot": "pagination-ellipsis",
+		...props,
+		children: [/* @__PURE__ */ jsx(EllipsisIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/popover.d.mts

@@ -0,0 +1,30 @@
+import { ComponentProps, JSX } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+//#region src/components/popover.d.ts
+type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>;
+declare function Popover({
+  ...props
+}: PopoverProps): JSX.Element;
+type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;
+declare function PopoverTrigger({
+  ...props
+}: PopoverTriggerProps): JSX.Element;
+type PopoverAnchorProps = ComponentProps<typeof PopoverPrimitive.Anchor>;
+declare function PopoverAnchor({
+  ...props
+}: PopoverAnchorProps): JSX.Element;
+type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content>;
+declare function PopoverContent({
+  align,
+  className,
+  sideOffset,
+  ...props
+}: PopoverContentProps): JSX.Element;
+type PopoverArrowProps = ComponentProps<typeof PopoverPrimitive.Arrow>;
+declare function PopoverArrow({
+  className,
+  ...props
+}: PopoverArrowProps): JSX.Element;
+//#endregion
+export { Popover, PopoverAnchor, type PopoverAnchorProps, PopoverArrow, type PopoverArrowProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/components/popover.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/components/popover.tsx
+function Popover({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverAnchor({ ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+}
+function PopoverContent({ align = "center", className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		align,
+		className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover shadow-lg outline-hidden", "text-popover-foreground", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-popover-content-transform-origin)", className),
+		"data-slot": "popover-content",
+		sideOffset,
+		...props
+	}) });
+}
+function PopoverArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, {
+		className: cn("fill-popover", className),
+		"data-slot": "popover-arrow",
+		...props
+	});
+}
+//#endregion
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };

package/dist/components/progress-circle.d.mts

@@ -0,0 +1,124 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { ProgressCircleProvider } from "../primitives/progress-circle.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/progress-circle.d.ts
+declare const progressCircleVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  size: {
+    sm: {
+      label: string;
+    };
+    md: {
+      label: string;
+    };
+    lg: {
+      label: string;
+    };
+    xl: {
+      label: string;
+    };
+    "2xl": {
+      label: string;
+    };
+  };
+  thickness: {
+    regular: {};
+    thick: {};
+    thin: {};
+  };
+  variant: {
+    default: {
+      indicator: string;
+      track: string;
+    };
+    destructive: {
+      indicator: string;
+      track: string;
+    };
+  };
+}, {
+  indicator: string;
+  label: string[];
+  root: string;
+  svg: string;
+  track: string;
+}>;
+interface ProgressCircleProps extends Omit<ComponentProps<typeof ProgressCircleProvider>, "children" | "size">, VariantProps<typeof progressCircleVariants> {
+  /**
+   * Enables animation effect when value changes
+   */
+  animate?: boolean;
+  /**
+   * Duration of the animation in milliseconds
+   */
+  animationDuration?: number;
+  /**
+   * CSS class to customize the entire component
+   */
+  className?: string;
+  /**
+   * CSS classes to customize specific parts of the component
+   */
+  classNames?: {
+    /**
+     * Class for the progress indicator
+     */
+    indicator?: string;
+    /**
+     * Class for the label in the center of the circle
+     */
+    label?: string;
+    /**
+     * Class for the root element of the component
+     */
+    root?: string;
+    /**
+     * Class for the SVG element
+     */
+    svg?: string;
+    /**
+     * Class for the circle track
+     */
+    track?: string;
+  };
+  /**
+   * Custom function to render content in the center of the circle
+   * @param value - Current value of the component
+   * @returns React element to display in the center of the circle
+   */
+  customLabel?: ({
+    value
+  }: {
+    value: number;
+  }) => JSX.Element;
+  /**
+   * Display the numeric value in the center of the circle
+   */
+  showValue?: boolean;
+  /**
+   * Custom size in pixels
+   * When provided, this value overrides the size variant option
+   */
+  sizeInPixels?: number;
+}
+declare function ProgressCircle({
+  animate,
+  animationDuration,
+  className,
+  classNames,
+  customLabel,
+  showValue,
+  size,
+  sizeInPixels,
+  strokeWidth,
+  thickness,
+  value,
+  variant,
+  ...props
+}: ProgressCircleProps): JSX.Element;
+declare namespace ProgressCircle {
+  var displayName: string;
+}
+//#endregion
+export { ProgressCircle, type ProgressCircleProps, progressCircleVariants };

package/dist/components/progress-circle.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { tv } from "../lib/utils.mjs";
+import { useAnimatedValue } from "../hooks/use-animated-value.mjs";
+import { Indicator as ProgressCircleIndicator, ProgressCircle as ProgressCircle$1, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue } from "../primitives/progress-circle.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+//#region src/components/progress-circle.tsx
+const progressCircleVariants = tv({
+	defaultVariants: {
+		size: "md",
+		thickness: "regular",
+		variant: "default"
+	},
+	slots: {
+		indicator: "origin-center",
+		label: [
+			"absolute flex items-center justify-center",
+			"inset-0",
+			"text-xs font-medium"
+		],
+		root: "relative inline-flex items-center justify-center",
+		svg: "size-full",
+		track: "origin-center"
+	},
+	variants: {
+		size: {
+			sm: { label: "text-[0.625rem]" },
+			md: { label: "text-xs" },
+			lg: { label: "text-sm" },
+			xl: { label: "text-base" },
+			"2xl": { label: "text-lg" }
+		},
+		thickness: {
+			regular: {},
+			thick: {},
+			thin: {}
+		},
+		variant: {
+			default: {
+				indicator: "text-primary",
+				track: "text-primary/20"
+			},
+			destructive: {
+				indicator: "text-destructive",
+				track: "text-destructive/20"
+			}
+		}
+	}
+});
+function ProgressCircle({ animate = true, animationDuration = 1e3, className, classNames, customLabel, showValue = false, size, sizeInPixels, strokeWidth, thickness = "regular", value = 0, variant = "default", ...props }) {
+	const displayValue = useAnimatedValue(value, animationDuration, animate);
+	const actualSize = useMemo(() => sizeInPixels ?? getActualSize(size), [sizeInPixels, size]);
+	const actualThickness = useMemo(() => strokeWidth ?? getStrokeWidth(thickness, actualSize), [
+		strokeWidth,
+		thickness,
+		actualSize
+	]);
+	const slots = useMemo(() => progressCircleVariants({
+		size,
+		thickness,
+		variant
+	}), [
+		variant,
+		size,
+		thickness
+	]);
+	const shouldShowLabel = showValue || Boolean(customLabel);
+	const renderLabel = useCallback(() => {
+		if (customLabel) return customLabel({ value: displayValue });
+		return `${displayValue.toString()}%`;
+	}, [customLabel, displayValue]);
+	return /* @__PURE__ */ jsx(ProgressCircleProvider, {
+		size: actualSize,
+		strokeWidth: actualThickness,
+		value,
+		...props,
+		children: /* @__PURE__ */ jsxs(ProgressCircle$1, {
+			className: slots.root({ className: [className, classNames?.root] }),
+			children: [/* @__PURE__ */ jsxs(ProgressCircleSVG, {
+				className: slots.svg({ className: classNames?.svg }),
+				children: [/* @__PURE__ */ jsx(ProgressCircleTrack, { className: slots.track({ className: classNames?.track }) }), /* @__PURE__ */ jsx(ProgressCircleIndicator, {
+					className: slots.indicator({ className: classNames?.indicator }),
+					style: {
+						transitionDuration: `${animationDuration.toString()}ms`,
+						transitionProperty: "stroke-dashoffset"
+					}
+				})]
+			}), shouldShowLabel ? /* @__PURE__ */ jsx(ProgressCircleValue, {
+				className: slots.label({ className: classNames?.label }),
+				children: renderLabel()
+			}) : null]
+		})
+	});
+}
+ProgressCircle.displayName = "ProgressCircle";
+/**
+* Maps size variants to actual pixel sizes
+*/
+const getActualSize = (size) => {
+	return size ? {
+		"2xl": 128,
+		lg: 64,
+		md: 48,
+		sm: 32,
+		xl: 96
+	}[size] : 48;
+};
+/**
+* Calculates stroke width based on thickness variant and circle size
+*/
+const getStrokeWidth = (thickness, size) => {
+	const thicknessMap = {
+		regular: Math.max(3, size * .05),
+		thick: Math.max(4, size * .075),
+		thin: Math.max(2, size * .025)
+	};
+	return thickness ? thicknessMap[thickness] : Math.max(3, size * .05);
+};
+//#endregion
+export { ProgressCircle, progressCircleVariants };

package/dist/components/progress.d.mts

@@ -0,0 +1,12 @@
+import { ComponentProps, JSX } from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+//#region src/components/progress.d.ts
+type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root>;
+declare function Progress({
+  className,
+  value,
+  ...props
+}: ProgressProps): JSX.Element;
+//#endregion
+export { Progress, type ProgressProps };

package/dist/components/progress.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+//#region src/components/progress.tsx
+function Progress({ className, value, ...props }) {
+	return /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+		className: cn("relative", "h-2 w-full overflow-hidden", "rounded-full", "bg-primary/20", className),
+		"data-slot": "progress",
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+			className: cn("size-full flex-1", "bg-primary", "transition-all"),
+			"data-slot": "progress-indicator",
+			style: { transform: `translateX(-${(100 - (value ?? 0)).toString()}%)` }
+		})
+	});
+}
+//#endregion
+export { Progress };

package/dist/components/{radio-cards.d.ts → radio-cards.d.mts}

@@ -1,9 +1,14 @@
-import type { ComponentProps, JSX } from "react";
+import { ComponentProps, JSX } from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+//#region src/components/radio-cards.d.ts
 type RadioCardsProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
 declare function RadioCards(props: RadioCardsProps): JSX.Element;
 type RadioCardsItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
-declare function RadioCardsItem({ children, className, ...props }: RadioCardsItemProps): JSX.Element;
-export { RadioCards, RadioCardsItem };
-export type { RadioCardsItemProps, RadioCardsProps };
-//# sourceMappingURL=radio-cards.d.ts.map
+declare function RadioCardsItem({
+  children,
+  className,
+  ...props
+}: RadioCardsItemProps): JSX.Element;
+//#endregion
+export { RadioCards, RadioCardsItem, type RadioCardsItemProps, type RadioCardsProps };

package/dist/components/radio-cards.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { Label } from "./label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region src/components/radio-cards.tsx
+function RadioCards(props) {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		"data-slot": "radio-cards",
+		...props
+	});
+}
+function RadioCardsItem({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Label, {
+		className: cn("flex items-start gap-3", "p-3", "rounded-lg border border-input", "transition", "hover:not-has-disabled:not-has-aria-checked:bg-secondary", "has-focus-visible:border-ring", "has-disabled:opacity-50", "has-aria-checked:border-primary has-aria-checked:bg-primary/10"),
+		"data-slot": "radio-card",
+		children: [/* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+			className: cn("peer flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "text-primary-foreground", "transition", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-aria-checked:border-ring", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", className),
+			"data-slot": "radio-card-item",
+			...props,
+			children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+				className: cn("size-1", "rounded-full", "bg-background"),
+				"data-slot": "radio-card-indicator"
+			})
+		}), children]
+	});
+}
+//#endregion
+export { RadioCards, RadioCardsItem };

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

@@ -0,0 +1,16 @@
+import { ComponentProps, JSX } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+//#region src/components/radio-group.d.ts
+type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+declare function RadioGroup({
+  className,
+  ...props
+}: RadioGroupProps): JSX.Element;
+type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+declare function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupItemProps): JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/components/radio-group.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region src/components/radio-group.tsx
+function RadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		className: cn("grid gap-2", className),
+		"data-slot": "radio-group",
+		...props
+	});
+}
+function RadioGroupItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "transition", "hover:not-disabled:not-aria-checked:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-checked:border-primary aria-checked:bg-primary", "focus-visible:aria-checked:ring-primary/20", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60", "aria-checked:aria-invalid:bg-destructive", "dark:bg-input/30", "dark:focus-visible:aria-checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		"data-slot": "radio-group-item",
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+			className: cn("size-1", "rounded-full", "bg-background"),
+			"data-slot": "radio-group-indicator"
+		})
+	});
+}
+//#endregion
+export { RadioGroup, RadioGroupItem };

package/dist/components/radio.d.mts

@@ -0,0 +1,14 @@
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/radio.d.ts
+interface RadioProps extends Omit<ComponentProps<"input">, "type"> {
+  onValueChange?: (value: string) => void;
+}
+declare function Radio({
+  className,
+  onChange,
+  onValueChange,
+  ...props
+}: RadioProps): JSX.Element;
+//#endregion
+export { Radio, type RadioProps };

package/dist/components/radio.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { composeEventHandlers } from "@radix-ui/primitive";
+//#region src/components/radio.tsx
+function Radio({ className, onChange, onValueChange, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		className: cn("peer inline-flex size-4 shrink-0 items-center justify-center", "rounded-full border border-input shadow-xs outline-hidden", "appearance-none", "after:size-full after:rounded-full after:bg-background after:transition-[width,height]", "checked:border-primary checked:bg-primary", "checked:after:size-1", "hover:not-disabled:not-checked:border-ring/60", "focus-visible:ring-3 focus-visible:ring-ring/50", "focus-visible:not-checked:border-ring", "focus-visible:checked:ring-primary/20", "disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "checked:aria-invalid:bg-destructive", "hover:not-disabled:not-checked:aria-invalid:border-destructive/60", "dark:not-checked:after:bg-input/30", "dark:focus-visible:checked:ring-primary/40", "dark:aria-invalid:ring-destructive/40", className),
+		"data-slot": "radio",
+		type: "radio",
+		onChange: composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value)),
+		...props
+	});
+}
+//#endregion
+export { Radio };

package/dist/components/resizable.d.mts

@@ -0,0 +1,23 @@
+import { ComponentProps, JSX } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+//#region src/components/resizable.d.ts
+type ResizableGroupProps = ComponentProps<typeof ResizablePrimitive.Group>;
+declare function ResizableGroup({
+  className,
+  ...props
+}: ResizableGroupProps): JSX.Element;
+type ResizablePanelProps = ComponentProps<typeof ResizablePrimitive.Panel>;
+declare function ResizablePanel({
+  ...props
+}: ResizablePanelProps): JSX.Element;
+interface ResizableSeparatorProps extends ComponentProps<typeof ResizablePrimitive.Separator> {
+  withHandle?: boolean;
+}
+declare function ResizableSeparator({
+  className,
+  withHandle,
+  ...props
+}: ResizableSeparatorProps): JSX.Element;
+//#endregion
+export { ResizableGroup, type ResizableGroupProps, ResizablePanel, type ResizablePanelProps, ResizableSeparator, type ResizableSeparatorProps };

package/dist/components/resizable.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { GripVerticalIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+//#region src/components/resizable.tsx
+function ResizableGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		className: cn("flex size-full", className),
+		"data-slot": "resizable-group",
+		...props
+	});
+}
+function ResizablePanel({ ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+}
+function ResizableSeparator({ className, withHandle, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		className: cn("flex items-center justify-center", "bg-border outline-hidden", "focus-visible:bg-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-[orientation=horizontal]:h-px", "aria-[orientation=vertical]:w-px", className),
+		"data-slot": "resizable-separator",
+		...props,
+		children: withHandle ? /* @__PURE__ */ jsx("div", {
+			className: cn("z-10 flex h-4 w-3 items-center justify-center", "rounded-sm border", "bg-border"),
+			children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" })
+		}) : null
+	});
+}
+//#endregion
+export { ResizableGroup, ResizablePanel, ResizableSeparator };

package/dist/components/scroll-area.d.mts

@@ -0,0 +1,40 @@
+import { VariantProps } from "../lib/utils.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+import { Scope } from "@radix-ui/react-context";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+//#region src/components/scroll-area.d.ts
+declare const scrollAreaScrollbarVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  orientation: {
+    horizontal: string[];
+    vertical: string[];
+  };
+  size: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+  };
+}, Record<string, never>>;
+type ScopedProps<P> = P & {
+  __scopeScrollArea?: Scope;
+};
+type ScrollAreaContextValue = Pick<VariantProps<typeof scrollAreaScrollbarVariants>, "size">;
+type ScrollAreaProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue>;
+declare function ScrollArea({
+  __scopeScrollArea,
+  children,
+  className,
+  size,
+  ...props
+}: ScrollAreaProps): JSX.Element;
+type ScrollAreaScrollbarProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>>;
+declare function ScrollAreaScrollbar({
+  __scopeScrollArea,
+  className,
+  orientation,
+  ...props
+}: ScrollAreaScrollbarProps): JSX.Element;
+//#endregion
+export { ScrollArea, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, scrollAreaScrollbarVariants };