@vuer-ai/vuer-uikit 0.0.101 → 0.0.103

package/src/dial/wrapped-inputs/DialPresetsInput.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+import { PresetsInput } from "../../ui/inputs/presets-input";
+import { FormLayout, Label } from "../../index";
+import { LabelPositionT, useDialSchema } from "../DialProvider";
+
+interface DialPresetsInputProps {
+  name: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  labelPosition?: LabelPositionT;
+  options: Array<string | number | { label: string; value: string | number }>;
+}
+
+const DialInputWrapper: React.FC<{
+  label?: string;
+  children: React.ReactElement;
+}> = ({ label, children }) => {
+  if (!label) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FormLayout orientation="label-top">
+      <Label size="sm">{label}</Label>
+      {children}
+    </FormLayout>
+  );
+};
+
+export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
+  name,
+  label,
+  size = "sm",
+  labelPosition,
+  options,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  // Extract preset values from options
+  const presets = options
+    .slice(0, 3)
+    .map((opt) => {
+      if (typeof opt === "number") return opt;
+      if (typeof opt === "string") return parseFloat(opt);
+      return typeof opt.value === "number" ? opt.value : parseFloat(opt.value as string);
+    }) as [number, number, number];
+
+  // Pad with zeros if less than 3 presets
+  while (presets.length < 3) {
+    presets.push(0);
+  }
+
+  if (labelPosition === "inline") {
+    return (
+      <div className="flex items-center gap-2">
+        {label && <Label size="sm">{label}</Label>}
+        <PresetsInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
+          presets={presets}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <PresetsInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
+          presets={presets}
+        />
+      </DialInputWrapper>
+    );
+  }
+};

package/src/dial/wrapped-inputs/index.ts

@@ -4,6 +4,7 @@ export {
   DialNumberInput,
   DialSelectInput,
   DialSliderInput,
+  DialColorInput,
 } from "./ControlledInputs";
 
 // UIKit wrapped inputs
@@ -20,7 +21,12 @@ export {
   DialInchInput,
   DialTimeInput,
   DialTextInput,
+  DialEulerRadInput,
+  DialNumberRadInput,
 } from "./DialInputs";
 
+// Presets input
+export { DialPresetsInput } from "./DialPresetsInput";
+
 // Variable-dimension vector input
 export { DialVectorInput } from "./DialVectorInput";

package/src/styles/theme.css

@@ -1,60 +1,107 @@
 @import "./variables.css";
 
+@custom-variant liquid-dark (&:is(.liquid-dark *));
+@custom-variant liquid-light (&:is(.liquid-light *));
 @custom-variant liquid (&:is(.liquid-dark *, .liquid-light *));
 
-@utility liquid-bg {
+@utility liquid-dark-bg {
   background: linear-gradient(
     147.1deg,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 105.28%
+    rgba(50, 50, 50, 0.6) 0%,
+    rgba(70, 70, 70, 0.6) 105.28%
   ) !important;
   backdrop-filter: blur(20px) !important;
 }
 
-@utility liquid-bg-tooltip-arrow {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-light-bg {
+  background: linear-gradient(
+    147.1deg,
+    rgba(236, 236, 236, 0.6) 0%,
+    rgba(202, 202, 202, 0.6) 105.28%
+  ) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-arrow {
+  background: rgba(70, 70, 70, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-arrow {
+  background: rgba(202, 202, 202, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-content {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-dark-bg-tooltip-top {
+  background: linear-gradient(
+    to bottom,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-top {
+@utility liquid-light-bg-tooltip-top {
   background: linear-gradient(
     to bottom,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-bottom {
+@utility liquid-dark-bg-tooltip-bottom {
   background: linear-gradient(
     to top,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-left {
+@utility liquid-light-bg-tooltip-bottom {
+  background: linear-gradient(
+    to top,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-left {
+  background: linear-gradient(
+    to right,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-left {
   background: linear-gradient(
     to right,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-right {
+@utility liquid-dark-bg-tooltip-right {
   background: linear-gradient(
     to left,
-    rgba(172, 172, 172, 0.1),
-    rgba(74, 74, 74, 0.1)
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-right {
+  background: linear-gradient(
+    to left,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
 @utility scrollbar-hide {
@@ -70,7 +117,7 @@
   &::-webkit-scrollbar-track {
     background: transparent;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: var(--bg-tertiary);
     border-radius: 4px;
@@ -123,8 +170,8 @@
   --radius-uk-lg: calc(var(--radius) + 10px); /* 12px */
   --radius-uk-xl: calc(var(--radius) + 13px); /* 16px */
   /* spacing */
-  --spacing-xxs: calc(var(--spacing) - 2px); /* 2px */
-  --spacing-xs: var(--spacing); /* 4px */
+  --spacing-xxs: calc(var(--spacing) - 3px); /* 2px */
+  --spacing-xs: calc(var(--spacing) - 1px); /* 4px */
   --spacing-sm: calc(var(--spacing) + 2px); /* 6px */
   --spacing-md: calc(var(--spacing) + 4px); /* 8px */
   --spacing-lg: calc(var(--spacing) + 9px); /* 12px */

package/src/ui/DialBadge.tsx

@@ -2,9 +2,14 @@ import { GitBranch } from "lucide-react";
 import React from "react";
 import { cn } from "../hooks";
 
-// Version info for dial-cli package
-const DIAL_PACKAGE_NAME = "@vuer-ai/dial-cli";
-const DIAL_PACKAGE_VERSION = "0.0.3";
+// Version info for dial-cli package (injected at build time)
+declare const __DIAL_VERSION__: string;
+declare const __DIAL_PACKAGE_NAME__: string;
+declare const __DIAL_GIT_HASH__: string;
+
+const DIAL_PACKAGE_NAME = typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
+const DIAL_PACKAGE_VERSION = typeof __DIAL_VERSION__ !== "undefined" ? __DIAL_VERSION__ : "dev";
+const DIAL_GIT_HASH = typeof __DIAL_GIT_HASH__ !== "undefined" ? __DIAL_GIT_HASH__ : "unknown";
 
 interface DialBadgeProps {
   /**
@@ -27,11 +32,15 @@ interface DialBadgeProps {
    * Whether to show the version
    */
   version?: boolean;
+  /**
+   * Whether to show the git hash instead of version
+   */
+  hash?: boolean;
 }
 
 /**
- * Badge component that displays the dial-cli package version
- * Format: [ dial-cli | v0.0.3 ]
+ * Badge component that displays the dial-cli package version or git hash
+ * Format: [ dial-cli | v0.0.11 ] or [ dial-cli | abc1234 ]
  */
 function DialBadge({
   className,
@@ -39,9 +48,11 @@ function DialBadge({
   prefix = true,
   linkable = true,
   version = true,
+  hash = false,
 }: DialBadgeProps) {
   const packageShortName = "dial-cli";
-  const versionText = version ? (prefix ? `v${DIAL_PACKAGE_VERSION}` : DIAL_PACKAGE_VERSION) : undefined;
+  const displayValue = hash ? DIAL_GIT_HASH : DIAL_PACKAGE_VERSION;
+  const versionText = version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
   const npmUrl = `https://www.npmjs.com/package/${DIAL_PACKAGE_NAME}/v/${DIAL_PACKAGE_VERSION}`;
 
   return (
@@ -93,5 +104,5 @@ function DialBadge({
   );
 }
 
-export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME };
+export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME, DIAL_GIT_HASH };
 export type { DialBadgeProps };

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/badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
     "px-md",
     "py-xxs",
     "align-middle",
-    "text-uk-sm",
+    "text-xs",
     "leading-uk-sm",
     "w-fit",
     "whitespace-nowrap",

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,8 +12,9 @@ const cardVariants = cva(
     "flex-col",
     "rounded-uk-lg",
     "bg-bg-primary",
-    "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-    "liquid:liquid-bg",
+    "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+    "liquid-dark:liquid-dark-bg",
+    "liquid-light:liquid-light-bg",
   ],
   {
     variants: {

package/src/ui/drawer.tsx

@@ -64,7 +64,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-bg-primary liquid:liquid-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+          "group/drawer-content bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:pt-0",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[340px]",