@vuer-ai/vuer-uikit 0.0.100 → 0.0.102

package/src/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import React, { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Avatar root component that displays a user's profile image with fallback support.
@@ -10,10 +10,7 @@ import { cn, createClientOnlyComponent } from "../hooks";
  * @param className - Additional CSS classes to apply
  * @param props - All standard Radix Avatar.Root props are supported
  */
-export const AvatarRoot = ({
-  className,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Root>) => (
+export const Avatar = ({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>) => (
   <AvatarPrimitive.Root
     data-slot="avatar"
     className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
@@ -21,41 +18,15 @@ export const AvatarRoot = ({
   />
 );
 
-/**
- * SSR fallback component for Avatar when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- */
-export const AvatarSSRFallback = ({ className }: { className?: string }) => (
-  <span
-    data-slot="avatar"
-    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
-  />
-);
-
-/**
- * Main Avatar component with client-side rendering support and SSR fallback.
- * Use this as the container for AvatarImage and AvatarFallback components.
- *
- * @example
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/avatar.jpg" alt="User" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- */
-export const Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
-
 /**
  * Avatar image component for displaying the actual user image.
  * If the image fails to load, it will automatically fall back to AvatarFallback.
  *
  * @param src - Image source URL
- * @param alt - Alternative text for the image
  * @param className - Additional CSS classes to apply
  * @param props - All standard img element props are supported
  */
-export const AvatarImageRoot = ({
+export const AvatarImage = ({
   className,
   ...props
 }: ComponentProps<typeof AvatarPrimitive.Image>) => (
@@ -66,25 +37,6 @@ export const AvatarImageRoot = ({
   />
 );
 
-/**
- * SSR fallback component for AvatarImage when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- */
-export const AvatarImageFallback = ({ className }: { className?: string }) => (
-  <span data-slot="avatar-image" className={cn("aspect-square size-full", className)} />
-);
-
-/**
- * Avatar image component with client-side rendering support and SSR fallback.
- * Displays the user's profile image with automatic fallback support.
- *
- * @example
- * ```tsx
- * <AvatarImage src="/user-avatar.jpg" alt="John Doe" />
- * ```
- */
-export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
-
 /**
  * Avatar fallback component that displays when the image fails to load.
  * Typically contains user initials or a default icon.
@@ -93,7 +45,7 @@ export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImag
  * @param children - Content to display (usually initials)
  * @param props - All standard Radix Avatar.Fallback props are supported
  */
-export const AvatarFallbackRoot = ({
+export const AvatarFallback = ({
   className,
   ...props
 }: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
@@ -107,39 +59,6 @@ export const AvatarFallbackRoot = ({
   />
 );
 
-/**
- * SSR fallback component for AvatarFallback when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- * @param children - Content to display (usually initials)
- */
-export const AvatarFallbackSSR = ({
-  className,
-  ...props
-}: {
-  className?: string;
-  children?: React.ReactNode;
-}) => (
-  <span
-    data-slot="avatar-fallback"
-    className={cn(
-      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
-      className,
-    )}
-    {...props}
-  />
-);
-
-/**
- * Avatar fallback component with client-side rendering support and SSR fallback.
- * Displays fallback content when the avatar image fails to load.
- *
- * @example
- * ```tsx
- * <AvatarFallback>JD</AvatarFallback>
- * ```
- */
-export const AvatarFallback = createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
-
 /**
  * Props for the AvatarGroup component.
  */

package/src/ui/button.tsx

@@ -19,12 +19,7 @@ export const buttonVariants = cva(
     "disabled:pointer-events-none",
     "disabled:bg-bg-tertiary",
     "disabled:text-text-tertiary",
-    "focus-visible:border-ring",
-    "focus-visible:ring-ring/50",
-    "focus-visible:ring-[3px]",
     "focus-visible:bg-brand-tertiary",
-    "aria-invalid:ring-destructive/20",
-    "aria-invalid:border-destructive",
   ],
   {
     variants: {

package/src/ui/card.tsx

@@ -12,7 +12,7 @@ const cardVariants = cva(
     "flex-col",
     "rounded-uk-lg",
     "bg-bg-primary",
-    "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+    "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
     "liquid:liquid-bg",
   ],
   {

package/src/ui/dropdown.tsx

@@ -2,34 +2,17 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
-function DropdownMenuRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-function DropdownMenuFallback({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <div data-slot="dropdown-menu" {...props} />;
-}
-
-const DropdownMenu = createClientOnlyComponent(DropdownMenuRoot, DropdownMenuFallback);
-
-function DropdownMenuPortalRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
-function DropdownMenuPortalFallback({ children }: { children?: React.ReactNode }) {
-  return <div data-slot="dropdown-menu-portal">{children}</div>;
-}
-
-const DropdownMenuPortal = createClientOnlyComponent(
-  DropdownMenuPortalRoot,
-  DropdownMenuPortalFallback,
-);
-
-function DropdownMenuTriggerRoot({
-  ...props
-}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
@@ -39,32 +22,7 @@ function DropdownMenuTriggerRoot({
   );
 }
 
-function DropdownMenuTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-
-  return (
-    <button
-      data-slot="dropdown-menu-trigger"
-      className="text-text-primary hover:text-text-highlight disabled:text-text-tertiary active:text-text-secondary"
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-
-const DropdownMenuTrigger = createClientOnlyComponent(
-  DropdownMenuTriggerRoot,
-  DropdownMenuTriggerFallback,
-);
-
-function DropdownMenuContentRoot({
+function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
@@ -106,35 +64,7 @@ function DropdownMenuContentRoot({
   );
 }
 
-function DropdownMenuContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-content"
-      className={cn(
-        [
-          "bg-bg-primary",
-          "p-md",
-          "relative",
-          "z-50",
-          "overflow-x-hidden",
-          "overflow-y-auto",
-          "rounded-uk-md",
-          "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-          "liquid:liquid-bg",
-        ],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuContent = createClientOnlyComponent(
-  DropdownMenuContentRoot,
-  DropdownMenuContentFallback,
-);
-
-function DropdownMenuGroupRoot({
+function DropdownMenuGroup({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Group>) {
@@ -147,16 +77,7 @@ function DropdownMenuGroupRoot({
   );
 }
 
-function DropdownMenuGroupFallback({ className, ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-group" className={cn("space-y-xs", className)} {...props} />;
-}
-
-const DropdownMenuGroup = createClientOnlyComponent(
-  DropdownMenuGroupRoot,
-  DropdownMenuGroupFallback,
-);
-
-function DropdownMenuItemRoot({
+function DropdownMenuItem({
   className,
   inset,
   variant = "default",
@@ -182,7 +103,7 @@ function DropdownMenuItemRoot({
           "cursor-default",
           "rounded-uk-xs",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -200,55 +121,7 @@ function DropdownMenuItemRoot({
   );
 }
 
-function DropdownMenuItemFallback({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-  asChild?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        [
-          "w-full",
-          "flex",
-          "gap-md",
-          "items-center",
-          "px-sm",
-          "py-xs",
-          "relative",
-          "cursor-default",
-          "rounded-uk-xs",
-          "text-uk-sm",
-          "leading-uk-xs",
-          "outline-hidden",
-          "select-none",
-          "hover:bg-bg-tertiary",
-          "[&_svg]:pointer-events-none",
-          "[&_svg]:shrink-0",
-          "[&_svg:not([class*='size-'])]:size-4",
-          "[&_svg:not([class*='text-'])]:text-muted-foreground",
-        ],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuItem = createClientOnlyComponent(
-  DropdownMenuItemRoot as never,
-  DropdownMenuItemFallback,
-);
-
-function DropdownMenuCheckboxItemRoot({
+function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
@@ -270,7 +143,7 @@ function DropdownMenuCheckboxItemRoot({
           "cursor-default",
           "rounded-uk-xs",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "outline-hidden",
           "select-none",
           "hover:bg-bg-tertiary",
@@ -295,69 +168,13 @@ function DropdownMenuCheckboxItemRoot({
   );
 }
 
-function DropdownMenuCheckboxItemFallback({
-  className,
-  children,
-  checked,
-  ...props
-}: ComponentProps<"div"> & { checked?: boolean; asChild?: boolean }) {
-  return (
-    <div
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        [
-          "w-full",
-          "flex",
-          "gap-md",
-          "items-center",
-          "pr-md",
-          "pl-[calc(var(--spacing-xl)*1.8)]",
-          "py-xs",
-          "relative",
-          "cursor-default",
-          "rounded-uk-xs",
-          "text-uk-sm",
-          "leading-uk-xs",
-          "outline-hidden",
-          "select-none",
-          "hover:bg-bg-tertiary",
-          "[&_svg:not([class*='size-'])]:size-4",
-          "[&_svg]:pointer-events-none",
-          "[&_svg]:shrink-0",
-        ],
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        {checked && <CheckIcon className="size-4" />}
-      </span>
-      {children}
-    </div>
-  );
-}
-
-const DropdownMenuCheckboxItem = createClientOnlyComponent(
-  DropdownMenuCheckboxItemRoot as never,
-  DropdownMenuCheckboxItemFallback,
-);
-
-function DropdownMenuRadioGroupRoot({
+function DropdownMenuRadioGroup({
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
   return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
-function DropdownMenuRadioGroupFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-radio-group" {...props} />;
-}
-
-const DropdownMenuRadioGroup = createClientOnlyComponent(
-  DropdownMenuRadioGroupRoot,
-  DropdownMenuRadioGroupFallback,
-);
-
-function DropdownMenuRadioItemRoot({
+function DropdownMenuRadioItem({
   className,
   children,
   ...props
@@ -381,7 +198,7 @@ function DropdownMenuRadioItemRoot({
           "pl-[calc(var(--spacing-xl)*1.8)]",
           "pr-md",
           "text-uk-sm",
-          "leading-uk-xs",
+          "leading-uk-sm",
           "data-[disabled]:pointer-events-none",
           "data-[disabled]:text-bg-quaternary",
           "[&_svg:not([class*='size-'])]:size-4",
@@ -402,53 +219,7 @@ function DropdownMenuRadioItemRoot({
   );
 }
 
-function DropdownMenuRadioItemFallback({
-  className,
-  children,
-  ...props
-}: ComponentProps<"div"> & { asChild?: boolean }) {
-  return (
-    <div
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        [
-          "w-full",
-          "hover:bg-bg-tertiary",
-          "outline-hidden",
-          "relative",
-          "flex",
-          "cursor-default",
-          "select-none",
-          "items-center",
-          "gap-md",
-          "rounded-uk-xs",
-          "py-xs",
-          "pl-[calc(var(--spacing-xl)*1.8)]",
-          "pr-md",
-          "text-uk-sm",
-          "leading-uk-xs",
-          "[&_svg:not([class*='size-'])]:size-4",
-          "[&_svg]:pointer-events-none",
-          "[&_svg]:shrink-0",
-        ],
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <CircleIcon className="size-2 fill-current" />
-      </span>
-      {children}
-    </div>
-  );
-}
-
-const DropdownMenuRadioItem = createClientOnlyComponent(
-  DropdownMenuRadioItemRoot as never,
-  DropdownMenuRadioItemFallback,
-);
-
-function DropdownMenuLabelRoot({
+function DropdownMenuLabel({
   className,
   inset,
   ...props
@@ -459,35 +230,13 @@ function DropdownMenuLabelRoot({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("text-text-secondary text-uk-sm leading-uk-xs pb-lg pt-xs px-sm", className)}
+      className={cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuLabelFallback({
-  className,
-  inset,
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn("text-text-secondary text-uk-sm leading-uk-xs px-2 py-1.5", className)}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuLabel = createClientOnlyComponent(
-  DropdownMenuLabelRoot,
-  DropdownMenuLabelFallback,
-);
-
-function DropdownMenuSeparatorRoot({
+function DropdownMenuSeparator({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
@@ -500,42 +249,21 @@ function DropdownMenuSeparatorRoot({
   );
 }
 
-function DropdownMenuSeparatorFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-line-primary my-lg pointer-events-none h-px", className)}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuSeparator = createClientOnlyComponent(
-  DropdownMenuSeparatorRoot,
-  DropdownMenuSeparatorFallback,
-);
-
 function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn("text-text-tertiary text-uk-sm leading-uk-xs ml-auto", className)}
+      className={cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuSubRoot({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
-function DropdownMenuSubFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="dropdown-menu-sub" {...props} />;
-}
-
-const DropdownMenuSub = createClientOnlyComponent(DropdownMenuSubRoot, DropdownMenuSubFallback);
-
-function DropdownMenuSubTriggerRoot({
+function DropdownMenuSubTrigger({
   className,
   inset,
   children,
@@ -558,7 +286,7 @@ function DropdownMenuSubTriggerRoot({
         "cursor-default",
         "rounded-uk-xs",
         "text-uk-sm",
-        "leading-uk-xs",
+        "leading-uk-sm",
         "outline-hidden",
         "select-none",
         "hover:bg-bg-tertiary",
@@ -579,54 +307,7 @@ function DropdownMenuSubTriggerRoot({
   );
 }
 
-function DropdownMenuSubTriggerFallback({
-  className,
-  inset,
-  children,
-  ...props
-}: ComponentProps<"div"> & {
-  inset?: boolean;
-  asChild?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "w-full",
-        "flex",
-        "gap-md",
-        "items-center",
-        "px-sm",
-        "py-xs",
-        "relative",
-        "cursor-default",
-        "rounded-uk-xs",
-        "text-uk-sm",
-        "leading-uk-xs",
-        "outline-hidden",
-        "select-none",
-        "hover:bg-bg-tertiary",
-        "[&_svg]:pointer-events-none",
-        "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </div>
-  );
-}
-
-const DropdownMenuSubTrigger = createClientOnlyComponent(
-  DropdownMenuSubTriggerRoot,
-  DropdownMenuSubTriggerFallback,
-);
-
-function DropdownMenuSubContentRoot({
+function DropdownMenuSubContent({
   className,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
@@ -662,32 +343,6 @@ function DropdownMenuSubContentRoot({
   );
 }
 
-function DropdownMenuSubContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-bg-primary",
-        "p-md",
-        "relative",
-        "z-50",
-        "overflow-x-hidden",
-        "overflow-y-auto",
-        "rounded-uk-md",
-        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "liquid:liquid-bg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const DropdownMenuSubContent = createClientOnlyComponent(
-  DropdownMenuSubContentRoot,
-  DropdownMenuSubContentFallback,
-);
-
 export {
   DropdownMenu,
   DropdownMenuPortal,

package/src/ui/inputs/index.tsx

@@ -2,4 +2,6 @@ export * from "./input";
 export * from "./input-numbers";
 export * from "./color-input";
 export * from "./presets-input";
+export * from "./presets-rad-input";
 export * from "./number-inputs";
+export * from "./text-input";

package/src/ui/inputs/input.tsx

@@ -9,11 +9,8 @@ const inputRootVariants = cva(
   {
     variants: {
       state: {
-        default: [
-          "hover:bg-bg-secondary/80",
-          "has-[input:focus]:bg-bg-secondary",
-        ],
-        disabled: ["disabled:cursor-not-allowed", "bg-bg-secondary", "text-text-secondary"],
+        default: ["hover:bg-bg-secondary/80", "has-[input:focus]:bg-bg-secondary"],
+        disabled: ["disabled:cursor-not-allowed", "bg-bg-quaternary", "text-text-secondary"],
         error: ["hover:bg-danger-primary/10", "bg-danger-primary/20"],
       },
       size: {
@@ -103,6 +100,7 @@ export const InputRoot = forwardRef<HTMLInputElement, InputRootProps>(function I
             "[input[type=number]]:font-number-input",
             "[&::-webkit-inner-spin-button]:appearance-none",
             "[&::-webkit-outer-spin-button]:appearance-none",
+            "disabled:cursor-not-allowed",
           ],
           inputClassName,
         )}