@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/tabs.tsx

@@ -0,0 +1,128 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+import { type ComponentProps, createContext, useContext } from "react";
+
+import { TabsCursorProvider, useTabsCursor } from "../highlight-cursor/tabs-cursor-context";
+import { cn } from "../utils";
+
+interface TabsContextType {
+  size?: "sm" | "base" | "lg";
+}
+
+const TabsContext = createContext<TabsContextType | undefined>(undefined);
+
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs component");
+  }
+  return context;
+};
+
+interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root> {
+  size?: "sm" | "base" | "lg";
+}
+
+function Tabs({ className, size = "base", ...props }: TabsProps) {
+  return (
+    <TabsContext.Provider value={{ size }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={cn("flex w-full flex-col", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  );
+}
+
+const tabsListVariants = cva(["inline-flex", "items-center", "justify-center"], {
+  variants: {
+    size: {
+      sm: "gap-xs",
+      base: "gap-sm",
+      lg: "gap-md",
+    },
+  },
+  defaultVariants: {
+    size: "base",
+  },
+});
+
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+
+function TabsList({ className, ...props }: TabsListProps) {
+  const { setCursorTarget } = useTabsCursor();
+  const { size } = useTabsContext();
+  return (
+    <TabsCursorProvider>
+      <TabsPrimitive.List
+        onMouseLeave={() => setCursorTarget(null)}
+        data-slot="tabs-list"
+        className={cn(tabsListVariants({ size }), "justify-start", className)}
+        {...props}
+      />
+    </TabsCursorProvider>
+  );
+}
+
+const tabsTriggerVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "font-medium",
+    "whitespace-nowrap",
+    "transition-all",
+    "disabled:pointer-events-none",
+    "disabled:bg-bg-tertiary",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='size-'])]:size-xl",
+    "shrink-0",
+    "[&_svg]:shrink-0",
+    "outline-none",
+    "text-text-primary",
+    "data-[state=active]:bg-bg-secondary",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-uk-sm leading-uk-sm px-md py-xs rounded-uk-sm",
+        base: "text-uk-md leading-uk-md px-lg py-sm rounded-uk-md",
+        lg: "text-uk-lg leading-uk-lg px-xl py-sm rounded-uk-md",
+      },
+    },
+    defaultVariants: {
+      size: "base",
+    },
+  },
+);
+
+type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
+
+function TabsTrigger({ className, ...props }: TabsTriggerProps) {
+  const { setCursorTarget } = useTabsCursor();
+  const { size } = useTabsContext();
+  return (
+    <TabsPrimitive.Trigger
+      onMouseEnter={(e) => setCursorTarget(e.currentTarget)}
+      data-slot="tabs-trigger"
+      className={cn(tabsTriggerVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
+
+function TabsContent({ className, ...props }: TabsContentProps) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/src/ui/textarea.tsx

@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+const textareaVariants = cva(
+  [
+    "bg-bg-secondary",
+    "disabled:bg-bg-tertiary",
+    "disabled:text-text-tertiary",
+    "disabled:cursor-not-allowed",
+    "outline-transparent",
+    "placehoder:text-text-secondary/20",
+    "min-h-16",
+    "flex",
+    "w-full",
+  ],
+  {
+    variants: {
+      state: {
+        default: ["hover:bg-bg-tertiary", "focus:bg-bg-quaternary"],
+        error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
+      },
+      size: {
+        sm: ["text-uk-sm", "leading-uk-sm", "rounded-uk-sm", "px-sm", "py-xs"],
+        base: ["text-uk-md", "leading-uk-md", "rounded-uk-md", "px-md", "py-sm"],
+        lg: ["text-uk-lg", "leading-uk-lg", "rounded-uk-md", "px-lg", "py-sm"],
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "base",
+    },
+  },
+);
+
+interface TextareaProps extends ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
+  state?: "default" | "error";
+  size?: "sm" | "base" | "lg";
+}
+
+function Textarea({ className, state, size, ...props }: TextareaProps) {
+  return (
+    <textarea
+      className={cn(textareaVariants({ className, state, size }))}
+      data-slot="textarea"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/ui/theme-context.tsx

@@ -0,0 +1,80 @@
+import { createContext, type ReactNode, useContext, useEffect, useMemo } from "react";
+
+import { useLocalStorage } from "../utils";
+
+type Theme = "dark" | "light" | "liquidlight" | "liquiddark" | "system";
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vuer-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useLocalStorage<Theme>(storageKey, defaultTheme);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const root = window.document.documentElement;
+
+    // Remove both class and data-theme attributes
+    root.classList.remove("light", "dark", "liquidlight", "liquiddark", "system");
+    root.removeAttribute("data-theme");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      root.setAttribute("data-theme", "auto");
+      return;
+    }
+
+    root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
+  }, [theme]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme, setTheme],
+  );
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
+
+export { useTheme, ThemeProvider };
+export type { Theme };