@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/toggle-buttons.tsx

@@ -0,0 +1,290 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../hooks";
+
+export const toggleButtonsVariants = cva(
+  ["rounded-uk-md", "relative", "inline-flex", "items-center"],
+  {
+    variants: {
+      variant: {
+        primary: "bg-bg-secondary",
+        secondary: "bg-bg-secondary",
+        ghost: "bg-transparent",
+      },
+      padding: {
+        true: "p-xs",
+        false: "p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      padding: true,
+    },
+  },
+);
+
+export const toggleButtonHighlightVariants = cva(
+  ["pointer-events-none", "absolute", "transition-all", "duration-200", "ease-out"],
+  {
+    variants: {
+      variant: {
+        primary: ["bg-brand-primary", "shadow-sm", "rounded-uk-sm"],
+        secondary: ["bg-bg-primary", "shadow-sm", "rounded-uk-sm"],
+        ghost: ["bg-bg-secondary", "shadow-sm", "rounded-uk-md"],
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  },
+);
+
+export const toggleButtonVariants = cva(
+  [
+    "focus-visible:ring-ring",
+    "relative",
+    "z-10",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "font-normal",
+    "whitespace-nowrap",
+    "transition-colors",
+    "focus-visible:ring-2",
+    "focus-visible:outline-none",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "cursor-pointer",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-primary",
+          "hover:text-text-primary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-withbg",
+        ],
+        secondary: [
+          "text-text-primary",
+          "hover:text-text-secondary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-highlight",
+          "data-[selected=true]:bg-bg-primary",
+        ],
+        ghost: [
+          "text-text-tertiary",
+          "hover:text-text-secondary",
+          "active:text-brand-primary",
+          "data-[selected=true]:text-text-highlight",
+          "data-[selected=true]:bg-bg-secondary",
+        ],
+      },
+      size: {
+        sm: "text-uk-sm gap-xxs",
+        md: "text-uk-md gap-xs",
+        lg: "text-uk-lg gap-xs",
+      },
+      icon: {
+        false: "",
+        true: "shrink-0 [&_svg]:shrink-0 [&_svg]:pointer-events-none",
+      },
+      corner: {
+        sm: "rounded-uk-sm",
+        md: "rounded-uk-md",
+      },
+    },
+    compoundVariants: [
+      // Icon button sizes
+      { size: "sm", icon: false, class: "h-6 px-md" },
+      { size: "md", icon: false, class: "h-7 px-lg" },
+      { size: "lg", icon: false, class: "h-8 px-xl" },
+      { size: "sm", icon: true, class: "size-6 p-xs" },
+      { size: "md", icon: true, class: "size-8 p-sm" },
+      { size: "lg", icon: true, class: "size-9 p-md" },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      icon: false,
+      corner: "sm",
+    },
+  },
+);
+
+interface ToggleButtonsContextValue
+  extends Pick<VariantProps<typeof toggleButtonVariants>, "variant" | "size"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  registerItem: (value: string, element: HTMLElement) => void;
+  unregisterItem: (value: string) => void;
+}
+
+const ToggleButtonsContext = React.createContext<ToggleButtonsContextValue | null>(null);
+
+interface ToggleButtonsProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof toggleButtonsVariants> {
+  value: string;
+  onValueChange: (value: string) => void;
+  children: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+}
+
+const ToggleButtons = React.forwardRef<HTMLDivElement, ToggleButtonsProps>(
+  (
+    {
+      value,
+      onValueChange,
+      children,
+      className,
+      size = "md",
+      padding = true,
+      variant = "primary",
+      ...props
+    },
+    ref,
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [items, setItems] = React.useState<Map<string, HTMLElement>>(new Map());
+    const [highlightStyle, setHighlightStyle] = React.useState<React.CSSProperties>({
+      opacity: 0,
+    });
+
+    const registerItem = React.useCallback((itemValue: string, element: HTMLElement) => {
+      setItems((prev) => new Map(prev).set(itemValue, element));
+    }, []);
+
+    const unregisterItem = React.useCallback((itemValue: string) => {
+      setItems((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(itemValue);
+        return newMap;
+      });
+    }, []);
+
+    React.useEffect(() => {
+      const selectedElement = items.get(value);
+      const container = containerRef.current;
+
+      if (selectedElement && container) {
+        // Use requestAnimationFrame to ensure DOM has settled after state changes
+        const rafId = requestAnimationFrame(() => {
+          const containerRect = container.getBoundingClientRect();
+          const selectedRect = selectedElement.getBoundingClientRect();
+
+          // Calculate position relative to container
+          const paddingOffset = padding ? 4 : 0;
+          const left = selectedRect.left - containerRect.left - paddingOffset;
+          const top = selectedRect.top - containerRect.top - paddingOffset;
+
+          setHighlightStyle({
+            width: selectedRect.width,
+            height: selectedRect.height,
+            transform: `translate(${left}px, ${top}px)`,
+            opacity: 1,
+          });
+        });
+
+        return () => cancelAnimationFrame(rafId);
+      } else {
+        setHighlightStyle((prev) => ({ ...prev, opacity: 0 }));
+      }
+    }, [value, items, padding]);
+
+    return (
+      <ToggleButtonsContext.Provider
+        value={{ value, onValueChange, size, variant, registerItem, unregisterItem }}
+      >
+        <div
+          ref={(node) => {
+            containerRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          }}
+          className={cn(toggleButtonsVariants({ variant, padding }), className)}
+          {...props}
+        >
+          <div className={cn(toggleButtonHighlightVariants({ variant }))} style={highlightStyle} />
+          {children}
+        </div>
+      </ToggleButtonsContext.Provider>
+    );
+  },
+);
+ToggleButtons.displayName = "ToggleButtons";
+
+interface ToggleButtonProps
+  extends React.ComponentProps<"button">,
+    VariantProps<typeof toggleButtonVariants> {
+  value: string;
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (
+    { value, children, className, asChild = false, icon = false, size, variant, corner, ...props },
+    ref,
+  ) => {
+    const context = React.useContext(ToggleButtonsContext);
+    const itemRef = React.useRef<HTMLElement>(null);
+
+    if (!context) {
+      throw new Error("ToggleButton must be used within ToggleButtons");
+    }
+
+    const {
+      value: selectedValue,
+      onValueChange,
+      size: contextSize,
+      variant: contextVariant,
+      registerItem,
+      unregisterItem,
+    } = context;
+    const isSelected = selectedValue === value;
+    const finalSize = size ?? contextSize;
+    const finalVariant = variant ?? contextVariant;
+    const finalCorner = corner ?? (finalVariant === "ghost" ? "md" : "sm");
+
+    const Comp = asChild ? Slot : "button";
+
+    React.useEffect(() => {
+      const element = itemRef.current;
+      if (element) {
+        registerItem(value, element);
+        return () => unregisterItem(value);
+      }
+    }, [value, registerItem, unregisterItem]);
+
+    return (
+      <Comp
+        ref={(node) => {
+          itemRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        {...props}
+        data-selected={isSelected}
+        className={cn(
+          toggleButtonVariants({
+            variant: finalVariant,
+            size: finalSize,
+            icon,
+            corner: finalCorner,
+          }),
+          className,
+        )}
+        onClick={() => onValueChange(value)}
+        type={asChild ? undefined : "button"}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButtons, ToggleButton };

package/src/ui/toggle-group.tsx

@@ -0,0 +1,236 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ComponentProps, createContext, useContext } from "react";
+
+import { cn, createClientOnlyComponent } from "../hooks";
+
+/**
+ * Toggle Group item variants using design system CSS variables.
+ */
+const toggleGroupVariants = cva(
+  [
+    // Base button styling
+    "inline-flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "font-normal",
+    "transition-all",
+    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-accent",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive",
+
+    // Toggle group specific styling
+    "min-w-0",
+    "flex-1",
+    "rounded-none",
+    "first:rounded-l-uk-sm",
+    "first:rounded-r-none",
+    "last:rounded-r-uk-sm",
+    "last:rounded-l-none",
+    "[&:not(:first-child):not(:last-child)]:rounded-none",
+    "focus:z-10",
+    "focus-visible:z-10",
+
+    // Disabled state
+    "disabled:pointer-events-none",
+    "disabled:text-text-secondary/30",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-secondary",
+          "bg-bg-tertiary",
+          "hover:bg-secondary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-brand-primary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--secondary),inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--secondary)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--secondary)]",
+        ],
+        secondary: [
+          "text-text-secondary",
+          "bg-bg-secondary",
+          "hover:bg-group-hover",
+          "border-solid border border-transparent -mr-[1px]",
+          "data-[state=on]:text-secondary-foreground",
+          "data-[state=on]:bg-group-primary",
+          "data-[state=on]:border-line-secondary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]",
+        ],
+        ghost: [
+          "hover:bg-tertiary",
+          "text-icon-secondary",
+          "data-[state=on]:text-icon-highlight",
+          "data-[state=on]:bg-bg-secondary",
+          "data-[state=on]:shadow-[inset_0.5px_0_0_var(--muted),inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:first:shadow-[inset_-0.5px_0_0_var(--muted)]",
+          "data-[state=on]:last:shadow-[inset_0.5px_0_0_var(--muted)]",
+        ],
+      },
+      size: {
+        sm: ["text-uk-sm", "h-6", "gap-xxs", "px-md", "[&_svg:not([class*='size-'])]:size-3"],
+        base: ["text-uk-md", "h-8", "gap-xs", "px-lg", "[&_svg:not([class*='size-'])]:size-4"],
+        lg: ["text-uk-lg", "h-9", "gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-5"],
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  },
+);
+
+/**
+ * Context to propagate toggle size/variant to group items.
+ */
+const ToggleGroupContext = createContext<
+  Pick<VariantProps<typeof toggleGroupVariants>, "variant" | "size">
+>({
+  size: "base",
+  variant: "primary",
+});
+
+/**
+ * Group container for multiple toggles.
+ */
+function ToggleGroupRoot({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  Pick<VariantProps<typeof toggleGroupVariants>, "variant" | "size">) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group",
+        "flex",
+        "w-fit",
+        "items-center",
+        "rounded-uk-md",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+/**
+ * SSR fallback for toggle group.
+ */
+function ToggleGroupFallback({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ComponentProps<"div"> & Pick<VariantProps<typeof toggleGroupVariants>, "variant" | "size">) {
+  return (
+    <div
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group",
+        "flex",
+        "w-fit",
+        "items-center",
+        "rounded-uk-md",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </div>
+  );
+}
+
+const ToggleGroup = createClientOnlyComponent(ToggleGroupRoot, ToggleGroupFallback);
+
+/**
+ * Toggle item that reads size/variant from group context.
+ */
+function ToggleGroupItemRoot({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  Pick<VariantProps<typeof toggleGroupVariants>, "variant" | "size">) {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleGroupVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+/**
+ * SSR fallback for toggle group item.
+ */
+function ToggleGroupItemFallback({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ComponentProps<"button"> & Pick<VariantProps<typeof toggleGroupVariants>, "variant" | "size">) {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <button
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleGroupVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+const ToggleGroupItem = createClientOnlyComponent(ToggleGroupItemRoot, ToggleGroupItemFallback);
+
+export { ToggleGroup, ToggleGroupItem, toggleGroupVariants };
+export type { VariantProps };

package/src/ui/toggle.tsx

@@ -0,0 +1,94 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Variants for the toggle component.
+ */
+const toggleVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "font-normal",
+    "transition-all",
+    "[&_svg]:shrink-0 ",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "disabled:bg-transparent",
+    "disabled:text-bg-tertiary",
+    "disabled:cursor-not-allowed",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-primary",
+          "data-[state=on]:text-text-withbg",
+          "data-[state=on]:bg-brand-primary",
+          "hover:bg-bg-secondary",
+        ],
+        secondary: [
+          "text-text-secondary",
+          "data-[state=on]:text-text-highlight",
+          "data-[state=on]:bg-bg-secondary",
+          "hover:bg-bg-secondary ",
+        ],
+      },
+      size: {
+        sm: [
+          "text-uk-sm",
+          "leading-uk-sm",
+          "gap-xxs",
+          "p-xs",
+          "[&_svg:not([class*='size-'])]:size-3",
+          "rounded-uk-xs",
+        ],
+        base: [
+          "text-uk-md",
+          "leading-uk-md",
+          "gap-xs",
+          "p-sm",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "rounded-uk-sm",
+        ],
+        lg: [
+          "text-uk-lg",
+          "leading-uk-lg",
+          "gap-xs",
+          "p-md",
+          "[&_svg:not([class*='size-'])]:size-5",
+          "rounded-uk-md",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  },
+);
+
+/**
+ * Toggle button component.
+ */
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/ui/toolbar.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../hooks";
+
+export interface ToolbarProps {
+  className?: string;
+  children?: ReactNode;
+  variant?: "default" | "floating" | "liquid" | "liquid-dark";
+  size?: "sm" | "md" | "lg";
+}
+
+export interface ToolbarGroupProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export interface ToolbarButtonProps {
+  variant?: "primary" | "secondary" | "destructive" | "ghost" | "link";
+  size?: "sm" | "md" | "lg";
+  icon?: boolean;
+  className?: string;
+  children: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  tooltip?: string;
+}
+
+export function Toolbar({ className, children, variant = "default", size = "md" }: ToolbarProps) {
+  return (
+    <div
+      className={cn(
+        "bg-bg-primary flex items-center gap-2 shadow-sm",
+        "liquid:liquid-bg",
+        size === "sm" && "rounded-uk-md p-1.5",
+        size === "md" && "rounded-uk-lg p-1.5",
+        size === "lg" && "rounded-uk-xl p-1.5",
+        variant === "floating" &&
+          "rounded-[var(--radius-uk-md)] bg-white shadow-lg dark:bg-gray-900" &&
+          (size === "sm" ? "px-1 py-1" : size === "md" ? "px-2 py-2" : "px-3 py-3"),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ToolbarGroup({ className, children }: ToolbarGroupProps) {
+  return <div className={cn("flex items-center gap-1", className)}>{children}</div>;
+}
+
+export function ToolbarSeparator({ className }: { className?: string }) {
+  return <div className={cn("bg-line-primary mx-2 h-3.5 w-0.75 rounded-full", className)} />;
+}