@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/select.tsx

@@ -0,0 +1,365 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { type ComponentProps, createContext, type ReactNode, useContext } from "react";
+
+import { cn } from "../hooks";
+
+const SelectContext = createContext<{
+  font: "standard" | "mono";
+  align: "left" | "center" | "right";
+}>({ font: "mono", align: "left" });
+
+interface SelectRootProps extends ComponentProps<typeof SelectPrimitive.Root> {
+  font?: "standard" | "mono";
+  align?: "left" | "center" | "right";
+}
+
+/**
+ * Select root primitive.
+ */
+export function Select({ font = "mono", align = "left", ...props }: SelectRootProps) {
+  return (
+    <SelectContext.Provider value={{ font, align }}>
+      <SelectPrimitive.Root data-slot="select" data-font={font} data-align={align} {...props} />
+    </SelectContext.Provider>
+  );
+}
+
+/**
+ * Group container for related select items.
+ */
+export function SelectGroup({ className, ...props }: ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("space-y-xs", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Displays the selected value inside the trigger.
+ */
+export function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+export const selectTriggerVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "bg-select-secondary",
+    "whitespace-nowrap",
+    "shadow-xs",
+    "transition-[color,box-shadow]",
+    "outline-none",
+    "*:data-[slot=select-value]:line-clamp-1",
+    "*:data-[slot=select-value]:flex",
+    "*:data-[slot=select-value]:items-center",
+    "*:data-[slot=select-value]:gap-2",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+    "[type=number]:font-number-input",
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-secondary/80", "has-[input:focus]:bg-bg-secondary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-tertiary", "text-text-tertiary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
+      },
+      size: {
+        sm: "px-sm py-xs text-uk-sm h-6 [&_svg:not([class*='size-'])]:size-3 rounded-uk-md",
+        md: "px-md py-sm text-uk-md h-8 [&_svg:not([class*='size-'])]:size-4 rounded-uk-lg",
+        lg: "px-lg py-sm text-uk-lg h-9 [&_svg:not([class*='size-'])]:size-5 rounded-uk-xl",
+      },
+      font: {
+        standard: "font-sans",
+        mono: "font-number-input",
+      },
+      align: {
+        left: "justify-between",
+        center:
+          "justify-center *:data-[slot=select-value]:flex-1 *:data-[slot=select-value]:justify-center",
+        right:
+          "justify-between *:data-[slot=select-value]:flex-1 *:data-[slot=select-value]:justify-end",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "md",
+      font: "mono",
+      align: "left",
+    },
+  },
+);
+
+interface SelectTriggerProps
+  extends Omit<ComponentProps<typeof SelectPrimitive.Trigger>, "ref">,
+    VariantProps<typeof selectTriggerVariants> {}
+
+/**
+ * Trigger button for the select.
+ */
+export function SelectTrigger({
+  className,
+  size,
+  children,
+  disabled,
+  state,
+  font,
+  align,
+  ...props
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        selectTriggerVariants({
+          size,
+          className,
+          state: disabled ? "disabled" : state,
+          font,
+          align,
+        }),
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+/**
+ * Floating panel containing options.
+ */
+export function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Content>) {
+  const { font } = useContext(SelectContext);
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-font={font}
+        className={cn(
+          [
+            "bg-bg-primary",
+            "data-[state=open]:animate-in",
+            "data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0",
+            "data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95",
+            "data-[state=open]:zoom-in-95",
+            "data-[side=bottom]:slide-in-from-top-2",
+            "data-[side=left]:slide-in-from-right-2",
+            "data-[side=right]:slide-in-from-left-2",
+            "data-[side=top]:slide-in-from-bottom-2",
+            "relative",
+            "z-50",
+            "max-h-(--radix-select-content-available-height)",
+            "origin-(--radix-select-content-transform-origin)",
+            "overflow-x-hidden",
+            "overflow-y-auto",
+            "rounded-uk-md",
+            "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+            "liquid:liquid-bg",
+            font === "standard" ? "font-sans" : "font-number-input",
+          ],
+          {
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1":
+              position === "popper",
+            "-ml-2 translate-x-2": position === "item-aligned",
+          },
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn("p-md", {
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1":
+              position === "popper",
+          })}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+/**
+ * Section label for options.
+ */
+export function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-text-secondary text-uk-sm px-2 py-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+interface SelectItemProps extends Omit<ComponentProps<typeof SelectPrimitive.Item>, "prefix"> {
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+/**
+ * Single option row with optional prefix/suffix content.
+ */
+export function SelectItem({
+  className,
+  children,
+  prefix,
+  suffix,
+  disabled,
+  ...props
+}: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      disabled={disabled}
+      className={cn(
+        [
+          "group/select-item",
+          "w-full",
+          "flex",
+          "gap-sm",
+          "items-center",
+          "px-xs",
+          "py-xxs",
+          "relative",
+          "cursor-default",
+          "rounded-uk-sm",
+          "text-uk-sm",
+          "outline-hidden",
+          "select-none",
+          "focus:bg-bg-tertiary",
+          "active:text-text-withbg",
+          "active:bg-brand-primary/90",
+          "data-[state=checked]:bg-brand-primary",
+          "data-[state=checked]:text-text-withbg",
+          "data-[disabled]:pointer-events-none",
+          "data-[disabled]:text-bg-quaternary",
+          "[&_svg]:pointer-events-none",
+          "[&_svg]:shrink-0",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          "*:[span]:last:flex",
+          "*:[span]:last:items-center",
+          "*:[span]:last:gap-2",
+          // Font inheritance from parent select
+          "[*[data-font=standard]_&]:font-sans",
+          "[*[data-font=mono]_&]:font-number-input",
+          // Alignment inheritance from parent select
+          "[*[data-align=left]_&]:justify-start",
+          "[*[data-align=center]_&]:justify-center",
+          "[*[data-align=right]_&]:justify-end",
+        ],
+        className,
+      )}
+      {...props}
+    >
+      {prefix && (
+        <p
+          data-disabled={disabled}
+          className={cn([
+            "text-text-tertiary",
+            "flex",
+            "shrink-0",
+            "gap-0.5",
+            "data-[disabled=true]:text-bg-quaternary",
+            "group-data-[state=checked]/select-item:text-text-withbg",
+          ])}
+        >
+          {prefix}
+        </p>
+      )}
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {suffix && (
+        <p
+          data-disabled={disabled}
+          className={cn(
+            "text-text-tertiary",
+            "ml-auto",
+            "flex",
+            "shrink-0",
+            "gap-0.5",
+            "data-[disabled=true]:text-bg-quaternary",
+            "group-data-[state=checked]/select-item:text-text-withbg",
+          )}
+        >
+          {suffix}
+        </p>
+      )}
+    </SelectPrimitive.Item>
+  );
+}
+
+/**
+ * Visual separator between groups.
+ */
+export function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-line-primary my-lg pointer-events-none -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Scroll button at top of list.
+ */
+export function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("mx-24 flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+/**
+ * Scroll button at bottom of list.
+ */
+export function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}

package/src/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-line-primary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/ui/sheet.tsx

@@ -0,0 +1,257 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { ComponentProps } from "react";
+
+import { cn, createClientOnlyComponent } from "../hooks";
+
+/**
+ * Sheet root using dialog primitives.
+ */
+function SheetRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetFallback({ ...props }: ComponentProps<"div">) {
+  return <div data-slot="sheet" {...props} />;
+}
+
+const Sheet = createClientOnlyComponent(SheetRoot, SheetFallback);
+
+/**
+ * Trigger element that opens the sheet.
+ */
+function SheetTriggerRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetTriggerFallback({
+  asChild,
+  children,
+  ...props
+}: ComponentProps<"button"> & { asChild?: boolean }) {
+  if (asChild) {
+    return <>{children}</>;
+  }
+  return (
+    <button data-slot="sheet-trigger" {...props}>
+      {children}
+    </button>
+  );
+}
+
+const SheetTrigger = createClientOnlyComponent(SheetTriggerRoot, SheetTriggerFallback);
+
+/**
+ * Close control for the sheet.
+ */
+function SheetCloseRoot({ ...props }: ComponentProps<typeof SheetPrimitive.Close>) {
+  return (
+    <SheetPrimitive.Close
+      data-slot="sheet-close"
+      className={cn("focus:ring-0 focus:outline-none")}
+      {...props}
+    />
+  );
+}
+
+function SheetCloseFallback({
+  asChild,
+  children,
+  ...props
+}: ComponentProps<"button"> & { asChild?: boolean }) {
+  if (asChild) {
+    return <>{children}</>;
+  }
+  return (
+    <button data-slot="sheet-close" className={cn("focus:ring-0 focus:outline-none")} {...props}>
+      {children}
+    </button>
+  );
+}
+
+const SheetClose = createClientOnlyComponent(SheetCloseRoot, SheetCloseFallback);
+
+/**
+ * Portal for sheet overlay and content.
+ */
+function SheetPortal({ ...props }: ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+/**
+ * Fullscreen overlay behind the sheet.
+ */
+function SheetOverlay({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-bg-mask fixed inset-0 z-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Sliding panel content for the sheet.
+ */
+function SheetContentRoot({
+  className,
+  children,
+  side = "right",
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-[340px]",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetContentFallback({
+  className,
+  children,
+  side = "right",
+  ...props
+}: ComponentProps<"div"> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <div
+      data-slot="sheet-content"
+      className={cn(
+        "liquid:liquid-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        side === "right" && "inset-y-0 right-0 h-full w-[340px]",
+        side === "left" && "inset-y-0 left-0 h-full w-[340px]",
+        side === "top" && "inset-x-0 top-0 h-auto",
+        side === "bottom" && "inset-x-0 bottom-0 h-auto",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <button className="text-icon-primary hover:text-icon-highlight absolute top-4 right-4 disabled:pointer-events-none">
+        <XIcon className="size-4" />
+        <span className="sr-only">Close</span>
+      </button>
+    </div>
+  );
+}
+
+const SheetContent = createClientOnlyComponent(SheetContentRoot, SheetContentFallback);
+
+/**
+ * Header section inside the sheet.
+ */
+function SheetHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("gap-md pb-xl flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer section inside the sheet.
+ */
+function SheetFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("gap-lg pt-xl mt-auto flex flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title text for the sheet.
+ */
+function SheetTitleRoot({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitleFallback({ className, ...props }: ComponentProps<"h2">) {
+  return (
+    <h2
+      data-slot="sheet-title"
+      className={cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+const SheetTitle = createClientOnlyComponent(SheetTitleRoot, SheetTitleFallback);
+
+/**
+ * Secondary description text for the sheet.
+ */
+function SheetDescriptionRoot({
+  className,
+  ...props
+}: ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescriptionFallback({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="sheet-description"
+      className={cn("text-text-secondary text-uk-md leading-uk-md", className)}
+      {...props}
+    />
+  );
+}
+
+const SheetDescription = createClientOnlyComponent(SheetDescriptionRoot, SheetDescriptionFallback);
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};