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

package/dist/components/scroll-area.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContextScope } from "@radix-ui/react-context";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+//#region src/components/scroll-area.tsx
+const scrollAreaScrollbarVariants = tv({
+	base: [
+		"flex",
+		"p-px",
+		"touch-none transition-colors select-none"
+	],
+	compoundVariants: [
+		{
+			className: "w-1.5",
+			orientation: "vertical",
+			size: "sm"
+		},
+		{
+			className: "w-2",
+			orientation: "vertical",
+			size: "md"
+		},
+		{
+			className: "w-2.5",
+			orientation: "vertical",
+			size: "lg"
+		},
+		{
+			className: "h-1.5",
+			orientation: "horizontal",
+			size: "sm"
+		},
+		{
+			className: "h-2",
+			orientation: "horizontal",
+			size: "md"
+		},
+		{
+			className: "h-2.5",
+			orientation: "horizontal",
+			size: "lg"
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		size: "md"
+	},
+	variants: {
+		orientation: {
+			horizontal: ["w-full flex-col", "border-t border-t-transparent"],
+			vertical: ["h-full flex-row", "border-l border-l-transparent"]
+		},
+		size: {
+			none: "",
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	}
+});
+const SCROLL_AREA_NAME = "ScrollArea";
+const [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
+const [ScrollAreaContextProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+function ScrollArea({ __scopeScrollArea, children, className, size, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollAreaContextProvider, {
+		scope: __scopeScrollArea,
+		size,
+		children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+			className: cn("relative", className),
+			"data-slot": "scroll-area",
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+					className: cn("size-full", "rounded-[inherit] ring-ring/50 outline-ring", "transition", "focus-visible:ring-4 focus-visible:outline-1"),
+					"data-slot": "scroll-area-viewport",
+					children
+				}),
+				/* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "vertical" }),
+				/* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "horizontal" }),
+				/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+			]
+		})
+	});
+}
+function ScrollAreaScrollbar({ __scopeScrollArea, className, orientation, ...props }) {
+	const { size } = useScrollAreaContext(SCROLL_AREA_NAME, __scopeScrollArea);
+	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+		className: scrollAreaScrollbarVariants({
+			className,
+			orientation,
+			size
+		}),
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: cn("relative flex-1", "rounded-full", "bg-border") })
+	});
+}
+//#endregion
+export { ScrollArea, ScrollAreaScrollbar, scrollAreaScrollbarVariants };

package/dist/components/select.d.mts

@@ -0,0 +1,62 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import { ComponentProps, JSX } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region src/components/select.d.ts
+type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;
+declare function Select({
+  ...props
+}: SelectProps): JSX.Element;
+type SelectGroupProps = ComponentProps<typeof SelectPrimitive.Group>;
+declare function SelectGroup({
+  ...props
+}: SelectGroupProps): JSX.Element;
+type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;
+declare function SelectValue({
+  ...props
+}: SelectValueProps): JSX.Element;
+interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+}
+declare function SelectTrigger({
+  children,
+  className,
+  size,
+  ...props
+}: SelectTriggerProps): JSX.Element;
+type SelectScrollUpButtonProps = ComponentProps<typeof SelectPrimitive.ScrollUpButton>;
+declare function SelectScrollUpButton({
+  className,
+  ...props
+}: SelectScrollUpButtonProps): JSX.Element;
+type SelectScrollDownButtonProps = ComponentProps<typeof SelectPrimitive.ScrollDownButton>;
+declare function SelectScrollDownButton({
+  className,
+  ...props
+}: SelectScrollDownButtonProps): JSX.Element;
+type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content>;
+declare function SelectContent({
+  children,
+  className,
+  position,
+  ...props
+}: SelectContentProps): JSX.Element;
+type SelectLabelProps = ComponentProps<typeof SelectPrimitive.Label>;
+declare function SelectLabel({
+  className,
+  ...props
+}: SelectLabelProps): JSX.Element;
+type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
+declare function SelectItem({
+  children,
+  className,
+  ...props
+}: SelectItemProps): JSX.Element;
+type SelectSeparatorProps = ComponentProps<typeof SelectPrimitive.Separator>;
+declare function SelectSeparator({
+  className,
+  ...props
+}: SelectSeparatorProps): JSX.Element;
+//#endregion
+export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region src/components/select.tsx
+function Select({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Group, {
+		"data-slot": "select-group",
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger({ children, className, size, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+		className: buttonVariants({
+			className: ["[&_svg:not([class*='text-'])]:text-muted-foreground focus:ring-ring/50 focus:border-ring w-fit justify-between px-3 font-normal focus:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:truncate", className],
+			size,
+			variant: "outline"
+		}),
+		"data-size": size,
+		"data-slot": "select-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+			asChild: true,
+			className: cn("size-4 shrink-0", "opacity-50"),
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		})]
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+		className: cn("flex items-center justify-center", "py-1", "text-muted-foreground", className),
+		"data-slot": "select-scroll-up-button",
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+		className: cn("flex items-center justify-center", "py-1", "text-muted-foreground", className),
+		"data-slot": "select-scroll-down-button",
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+	});
+}
+function SelectContent({ children, className, position = "popper", ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+		className: cn("relative z-50", "max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "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-select-content-transform-origin)", position === "popper" && "data-side-top:-translate-y-1 data-side-right:translate-x-1 data-side-bottom:translate-y-1 data-side-left:-translate-x-1", className),
+		"data-slot": "select-content",
+		position,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+				className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
+				children
+			}),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+		className: cn("flex items-center gap-x-2", "px-2 py-1.5", "text-sm font-semibold", className),
+		"data-slot": "select-label",
+		...props
+	});
+}
+function SelectItem({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		className: cn("relative flex w-full items-center py-1.5 pr-8 pl-2", "rounded-sm outline-hidden", "text-sm", "cursor-default select-none", "focus:bg-accent focus:text-accent-foreground", "aria-disabled:opacity-50", "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80", "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		"data-slot": "select-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("absolute flex items-center justify-center", "right-2"),
+			children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+		className: cn("mx-2 my-1 h-px", "bg-border", className),
+		"data-slot": "select-separator",
+		...props
+	});
+}
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/separator.d.mts

@@ -0,0 +1,32 @@
+import { VariantProps } from "../lib/utils.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/separator.d.ts
+declare const separatorVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  align: {
+    center: string;
+    end: string;
+    start: string;
+  };
+  orientation: {
+    horizontal: string;
+    vertical: string;
+  };
+}, Record<string, never>>;
+interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root>, Omit<VariantProps<typeof separatorVariants>, "orientation"> {}
+declare function Separator({
+  align,
+  className,
+  decorative,
+  orientation,
+  ...props
+}: SeparatorProps): JSX.Element;
+type SeparatorItemProps = ComponentProps<"div">;
+declare function SeparatorItem({
+  className,
+  ...props
+}: SeparatorItemProps): JSX.Element;
+//#endregion
+export { Separator, SeparatorItem, type SeparatorItemProps, type SeparatorProps, separatorVariants };

package/dist/components/separator.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+//#region src/components/separator.tsx
+const separatorVariants = tv({
+	base: ["relative flex shrink-0 items-center", "bg-border"],
+	defaultVariants: {
+		align: "center",
+		orientation: "horizontal"
+	},
+	variants: {
+		align: {
+			center: "justify-center",
+			end: "justify-end",
+			start: "justify-start"
+		},
+		orientation: {
+			horizontal: "h-px w-full",
+			vertical: "h-full w-px flex-col"
+		}
+	}
+});
+function Separator({ align, className, decorative = true, orientation, ...props }) {
+	return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+		className: separatorVariants({
+			align,
+			className,
+			orientation
+		}),
+		"data-slot": "separator",
+		decorative,
+		orientation,
+		...props
+	});
+}
+function SeparatorItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute", "mx-2 px-2", "bg-background text-sm text-muted-foreground", className),
+		"data-slot": "separator-item",
+		...props
+	});
+}
+//#endregion
+export { Separator, SeparatorItem, separatorVariants };

package/dist/components/sheet.d.mts

@@ -0,0 +1,75 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+
+//#region src/components/sheet.d.ts
+declare const sheetContentVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  side: {
+    bottom: string[];
+    left: string[];
+    right: string[];
+    top: string[];
+  };
+}, Record<string, never>>;
+type SheetProps = ComponentProps<typeof SheetPrimitive.Root>;
+declare function Sheet({
+  children,
+  ...props
+}: SheetProps): JSX.Element;
+type SheetTriggerProps = ComponentProps<typeof SheetPrimitive.Trigger>;
+declare function SheetTrigger({
+  ...props
+}: SheetTriggerProps): JSX.Element;
+interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, VariantProps<typeof sheetContentVariants> {
+  classNames?: {
+    close?: string;
+    content?: string;
+    overlay?: string;
+  };
+}
+declare function SheetContent({
+  children,
+  className,
+  classNames,
+  side,
+  ...props
+}: SheetContentProps): JSX.Element;
+type SheetHeaderProps = ComponentProps<"div">;
+declare function SheetHeader({
+  className,
+  ...props
+}: SheetHeaderProps): JSX.Element;
+type SheetBodyProps = ComponentProps<"div">;
+declare function SheetBody({
+  className,
+  ...props
+}: SheetBodyProps): JSX.Element;
+type SheetFooterProps = ComponentProps<"div">;
+declare function SheetFooter({
+  className,
+  ...props
+}: SheetFooterProps): JSX.Element;
+type SheetTitleProps = ComponentProps<typeof SheetPrimitive.Title>;
+declare function SheetTitle({
+  className,
+  ...props
+}: SheetTitleProps): JSX.Element;
+type SheetDescriptionProps = ComponentProps<typeof SheetPrimitive.Description>;
+declare function SheetDescription({
+  className,
+  ...props
+}: SheetDescriptionProps): JSX.Element;
+interface SheetCloseProps extends ComponentProps<typeof SheetPrimitive.Close> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}
+declare function SheetClose({
+  className,
+  size,
+  variant,
+  ...props
+}: SheetCloseProps): JSX.Element;
+//#endregion
+export { Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetProps, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, sheetContentVariants };

package/dist/components/sheet.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+//#region src/components/sheet.tsx
+const sheetContentVariants = tv({
+	base: [
+		"fixed z-50 flex flex-col overflow-auto",
+		"bg-background shadow-lg",
+		"ease-ui data-open:animate-in data-open:animation-duration-500",
+		"data-closed:animate-out data-closed:animation-duration-500"
+	],
+	defaultVariants: { side: "right" },
+	variants: { side: {
+		bottom: [
+			"max-h-[80vh]",
+			"inset-x-0 bottom-0",
+			"border-t",
+			"data-open:slide-in-from-bottom",
+			"data-closed:slide-out-to-bottom"
+		],
+		left: [
+			"h-full w-3/4",
+			"inset-y-0 left-0",
+			"border-r",
+			"sm:max-w-sm",
+			"data-open:slide-in-from-left",
+			"data-closed:slide-out-to-left"
+		],
+		right: [
+			"h-full w-3/4",
+			"inset-y-0 right-0",
+			"border-l",
+			"sm:max-w-sm",
+			"data-open:slide-in-from-right",
+			"data-closed:slide-out-to-right"
+		],
+		top: [
+			"max-h-[80vh]",
+			"inset-x-0 top-0",
+			"border-b",
+			"data-open:slide-in-from-top",
+			"data-closed:slide-out-to-top"
+		]
+	} }
+});
+function Sheet({ children, ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Root, {
+		"data-slot": "sheet",
+		...props,
+		children
+	});
+}
+function SheetTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetContent({ children, className, classNames, side = "right", ...props }) {
+	return /* @__PURE__ */ jsxs(SheetPrimitive.Portal, { children: [/* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
+		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:animation-duration-500 data-open:fade-in-0", "data-closed:animate-out data-closed:animation-duration-500 data-closed:fade-out-0", classNames?.overlay),
+		"data-slot": "sheet-overlay"
+	}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+		className: sheetContentVariants({
+			className: [classNames?.content, className],
+			side
+		}),
+		"data-slot": "sheet-content",
+		...props,
+		children: [children, /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
+			className: buttonVariants({
+				className: ["absolute top-4 right-4 size-7", classNames?.close],
+				size: "icon",
+				variant: "ghost"
+			}),
+			"data-slot": "sheet-close",
+			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center", "sm:text-left", className),
+		"data-slot": "sheet-header",
+		...props
+	});
+}
+function SheetBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("overflow-auto", "px-6 py-2", className),
+		"data-slot": "sheet-body",
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6", "sm:flex-row sm:justify-end", className),
+		"data-slot": "sheet-footer",
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Title, {
+		className: cn("text-lg font-semibold text-foreground", className),
+		"data-slot": "sheet-title",
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Description, {
+		className: cn("text-sm text-muted-foreground", className),
+		"data-slot": "sheet-description",
+		...props
+	});
+}
+function SheetClose({ className, size, variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(SheetPrimitive.Close, {
+		className: buttonVariants({
+			className,
+			size,
+			variant
+		}),
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, sheetContentVariants };