azamat-ui-kit-cli 0.2.2 → 0.3.4

package/vendor/src/components/ui/button.tsx

@@ -1,61 +1,99 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-primary/90 bg-primary text-primary-foreground shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_78%)] hover:bg-[color-mix(in_oklch,var(--primary),white_8%)] hover:shadow-[0_14px_30px_color-mix(in_oklch,var(--primary),transparent_72%)]",
-        outline:
-          "border-border/80 bg-background/92 text-foreground shadow-sm hover:border-border hover:bg-accent/70 hover:text-foreground aria-expanded:bg-accent/70 aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/55",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground shadow-sm hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_4%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "border-transparent bg-transparent hover:bg-accent/70 hover:text-foreground aria-expanded:bg-accent/70 aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "border-destructive/15 bg-destructive text-white shadow-[0_10px_24px_color-mix(in_oklch,var(--destructive),transparent_78%)] hover:bg-[color-mix(in_oklch,var(--destructive),black_6%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-7 gap-1 rounded-[min(var(--radius-lg),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 rounded-[min(var(--radius-lg),14px)] px-3 text-[0.82rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs":
-          "size-7 rounded-[min(var(--radius-lg),12px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-8 rounded-[min(var(--radius-lg),14px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}: ButtonProps) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+import * as React from "react"
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary/78 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--primary),white_12%),var(--primary))] text-primary-foreground shadow-[0_1px_0_rgba(255,255,255,0.18),0_14px_34px_color-mix(in_oklch,var(--primary),transparent_72%)] hover:-translate-y-px hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--primary),white_18%),color-mix(in_oklch,var(--primary),white_4%))] hover:shadow-[0_1px_0_rgba(255,255,255,0.22),0_18px_38px_color-mix(in_oklch,var(--primary),transparent_66%)]",
+        outline:
+          "border-border/90 bg-background/96 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)] hover:-translate-y-px hover:border-ring/35 hover:bg-accent hover:text-foreground hover:shadow-[0_10px_20px_rgba(15,23,42,0.08)] aria-expanded:border-ring/35 aria-expanded:bg-accent aria-expanded:text-foreground dark:border-white/12 dark:bg-white/6 dark:hover:bg-white/10 dark:hover:text-foreground",
+        secondary:
+          "border-border/60 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--secondary),white_24%),var(--secondary))] text-secondary-foreground shadow-[0_1px_0_rgba(255,255,255,0.1)] hover:-translate-y-px hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--secondary),white_18%),color-mix(in_oklch,var(--secondary),var(--foreground)_6%))] hover:text-secondary-foreground aria-expanded:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_6%)] aria-expanded:text-secondary-foreground",
+        ghost:
+          "border-transparent bg-transparent text-foreground/86 shadow-none hover:border-border/60 hover:bg-accent/88 hover:text-foreground aria-expanded:border-border/60 aria-expanded:bg-accent/88 aria-expanded:text-foreground dark:text-foreground/84 dark:hover:bg-white/8",
+        destructive:
+          "border-destructive/34 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--destructive),white_8%),var(--destructive))] text-white shadow-[0_1px_0_rgba(255,255,255,0.16),0_14px_34px_color-mix(in_oklch,var(--destructive),transparent_74%)] hover:-translate-y-px hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--destructive),white_6%),color-mix(in_oklch,var(--destructive),black_6%))] hover:shadow-[0_1px_0_rgba(255,255,255,0.2),0_18px_38px_color-mix(in_oklch,var(--destructive),transparent_68%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-7 gap-1 rounded-[min(var(--radius-lg),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-lg),14px)] px-3 text-[0.82rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+        md: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        xl: "h-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        icon: "size-9",
+        "icon-xs":
+          "size-7 rounded-[min(var(--radius-lg),12px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-lg),14px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export type ButtonProps = ButtonPrimitive.Props &
+  VariantProps<typeof buttonVariants> & {
+    loading?: boolean
+    loadingLabel?: string
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+  }
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  disabled,
+  loading = false,
+  loadingLabel = "Loading",
+  leftIcon,
+  rightIcon,
+  children,
+  ...props
+}: ButtonProps) {
+  const isDisabled = disabled || loading
+
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      data-loading={loading || undefined}
+      disabled={isDisabled}
+      aria-busy={loading || undefined}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      {loading ? (
+        <span
+          data-slot="button-spinner"
+          aria-hidden="true"
+          className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
+        />
+      ) : leftIcon ? (
+        <span data-icon="inline-start" data-slot="button-icon" className="inline-flex shrink-0 items-center justify-center">
+          {leftIcon}
+        </span>
+      ) : null}
+      {children ? <span data-slot="button-label">{loading ? loadingLabel : children}</span> : null}
+      {!loading && rightIcon ? (
+        <span data-icon="inline-end" data-slot="button-icon" className="inline-flex shrink-0 items-center justify-center">
+          {rightIcon}
+        </span>
+      ) : null}
+    </ButtonPrimitive>
+  )
+}
+
+export { Button, buttonVariants }

package/vendor/src/components/ui/card.tsx

@@ -1,20 +1,87 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
+const cardVariants = cva(
+  "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[var(--radius-2xl)] border py-(--card-spacing) text-sm text-card-foreground transition-[background-color,border-color,box-shadow,transform,opacity] [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-[var(--radius-2xl)] *:[img:last-child]:rounded-b-[var(--radius-2xl)]",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_14%),var(--card))] shadow-sm ring-1 ring-foreground/5",
+        elevated:
+          "border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_18%),var(--card))] shadow-[0_1px_2px_rgba(15,23,42,0.06),0_18px_45px_rgba(15,23,42,0.08)] ring-1 ring-foreground/5",
+        outline: "border-border bg-card shadow-none",
+        soft: "border-transparent bg-muted/45 shadow-none",
+        ghost: "border-transparent bg-transparent shadow-none",
+      },
+      size: {
+        sm: "[--card-spacing:--spacing(4)] data-[has-footer=true]:pb-0",
+        default: "[--card-spacing:--spacing(5)]",
+        lg: "[--card-spacing:--spacing(6)]",
+      },
+      density: {
+        compact: "text-xs",
+        default: "text-sm",
+        comfortable: "text-base",
+      },
+      tone: {
+        neutral: "",
+        info: "border-blue-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.03_235)_32%),var(--card))]",
+        success: "border-emerald-500/20 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.04_155)_34%),var(--card))]",
+        warning: "border-amber-500/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),oklch(0.94_0.05_85)_34%),var(--card))]",
+        danger: "border-destructive/24 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),var(--destructive)_10%),var(--card))]",
+      },
+      interactive: {
+        true: "cursor-pointer hover:-translate-y-0.5 hover:border-ring/35 hover:shadow-[0_14px_34px_rgba(15,23,42,0.10)] focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/35",
+        false: "",
+      },
+      selected: {
+        true: "border-primary/40 ring-2 ring-primary/18",
+        false: "",
+      },
+      disabled: {
+        true: "pointer-events-none opacity-55",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      density: "default",
+      tone: "neutral",
+      interactive: false,
+      selected: false,
+      disabled: false,
+    },
+  }
+)
+
+export type CardProps = React.ComponentProps<"div"> & VariantProps<typeof cardVariants>
+
 function Card({
   className,
-  size = "default",
+  variant,
+  size,
+  density,
+  tone,
+  interactive,
+  selected,
+  disabled,
+  tabIndex,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+}: CardProps) {
   return (
     <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[var(--radius-2xl)] border border-border/75 bg-card/98 py-(--card-spacing) text-sm text-card-foreground shadow-sm [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-2xl)] *:[img:last-child]:rounded-b-[var(--radius-2xl)]",
-        className
-      )}
+      data-slot="card"
+      data-size={size ?? "default"}
+      data-interactive={interactive || undefined}
+      data-selected={selected || undefined}
+      data-disabled={disabled || undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={interactive && !disabled ? tabIndex ?? 0 : tabIndex}
+      className={cn(cardVariants({ variant, size, density, tone, interactive, selected, disabled }), className)}
       {...props}
     />
   )
@@ -25,7 +92,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-[var(--radius-2xl)] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-[var(--radius-2xl)] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
         className
       )}
       {...props}
@@ -38,7 +105,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-[1.05rem] leading-snug font-semibold tracking-tight group-data-[size=sm]/card:text-sm",
+        "font-heading text-[1.05rem] leading-snug font-semibold tracking-tight group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-xl",
         className
       )}
       {...props}
@@ -50,7 +117,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm leading-6 text-muted-foreground", className)}
+      className={cn("text-sm leading-6 text-muted-foreground", className)}
       {...props}
     />
   )
@@ -60,23 +127,14 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
       {...props}
     />
   )
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -84,9 +142,9 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-[var(--radius-2xl)] border-t border-border/70 bg-muted/45 p-(--card-spacing)",
-        className
-      )}
+        "flex items-center rounded-b-[var(--radius-2xl)] border-t border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),transparent_24%),color-mix(in_oklch,var(--muted),transparent_8%))] p-(--card-spacing)",
+        className
+      )}
       {...props}
     />
   )
@@ -100,4 +158,5 @@ export {
   CardAction,
   CardDescription,
   CardContent,
+  cardVariants,
 }

package/vendor/src/components/ui/checkbox.tsx

@@ -1,69 +1,69 @@
-import * as React from "react"
-import { CheckIcon, MinusIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-export type CheckboxCheckedState = boolean | "indeterminate"
-
-export type CheckboxProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "checked" | "defaultChecked" | "onChange" | "value"
-> & {
-  checked?: CheckboxCheckedState
-  defaultChecked?: CheckboxCheckedState
-  onCheckedChange?: (checked: boolean) => void
-}
-
-function getNextCheckedState(checked: CheckboxCheckedState) {
-  return checked === true ? false : true
-}
-
-const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-  (
-    {
-      className,
-      checked,
-      defaultChecked = false,
-      onCheckedChange,
-      disabled,
-      onClick,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isControlled = checked !== undefined
-    const [internalChecked, setInternalChecked] = React.useState<CheckboxCheckedState>(defaultChecked)
-    const currentChecked = isControlled ? checked : internalChecked
-    const dataState = currentChecked === "indeterminate" ? "indeterminate" : currentChecked ? "checked" : "unchecked"
-
-    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-      const nextChecked = getNextCheckedState(currentChecked)
-
-      if (!isControlled) {
-        setInternalChecked(nextChecked)
-      }
-
-      onCheckedChange?.(nextChecked)
-      onClick?.(event)
-    }
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        role="checkbox"
-        aria-checked={currentChecked === "indeterminate" ? "mixed" : currentChecked}
-        data-state={dataState}
+import * as React from "react"
+import { CheckIcon, MinusIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type CheckboxCheckedState = boolean | "indeterminate"
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "checked" | "defaultChecked" | "onChange" | "value"
+> & {
+  checked?: CheckboxCheckedState
+  defaultChecked?: CheckboxCheckedState
+  onCheckedChange?: (checked: boolean) => void
+}
+
+function getNextCheckedState(checked: CheckboxCheckedState) {
+  return checked === true ? false : true
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      onClick,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isControlled = checked !== undefined
+    const [internalChecked, setInternalChecked] = React.useState<CheckboxCheckedState>(defaultChecked)
+    const currentChecked = isControlled ? checked : internalChecked
+    const dataState = currentChecked === "indeterminate" ? "indeterminate" : currentChecked ? "checked" : "unchecked"
+
+    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      const nextChecked = getNextCheckedState(currentChecked)
+
+      if (!isControlled) {
+        setInternalChecked(nextChecked)
+      }
+
+      onCheckedChange?.(nextChecked)
+      onClick?.(event)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="checkbox"
+        aria-checked={currentChecked === "indeterminate" ? "mixed" : currentChecked}
+        data-state={dataState}
         data-slot="checkbox"
         disabled={disabled}
         className={cn(
-          "peer flex size-5 shrink-0 items-center justify-center rounded-[min(var(--radius-lg),8px)] border border-input/90 bg-background/92 text-primary-foreground shadow-sm outline-none transition-[background-color,border-color,box-shadow,color] hover:border-border focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)] data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)]",
+          "peer flex size-5 shrink-0 items-center justify-center rounded-[min(var(--radius-lg),8px)] border border-input/90 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_1px_0_rgba(255,255,255,0.08)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/85 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)] data-[state=indeterminate]:border-primary/85 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_80%)] dark:border-white/12 dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.05))] dark:hover:bg-white/8",
           className
         )}
-        onClick={handleClick}
-        {...props}
-      >
+        onClick={handleClick}
+        {...props}
+      >
         {children ?? (
           <span className="flex items-center justify-center">
             {currentChecked === "indeterminate" ? (
@@ -73,10 +73,10 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
             ) : null}
           </span>
         )}
-      </button>
-    )
-  }
-)
-Checkbox.displayName = "Checkbox"
-
-export { Checkbox }
+      </button>
+    )
+  }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/vendor/src/components/ui/command.tsx

@@ -20,13 +20,13 @@ function Command({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
-        className
-      )}
-      {...props}
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-[var(--radius-3xl)]! border border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-2 text-popover-foreground shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+        className
+      )}
+      {...props}
     />
   )
 }
@@ -51,12 +51,12 @@ function CommandDialog({
         <DialogTitle>{title}</DialogTitle>
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
-      <DialogContent
-        className={cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
-          className
-        )}
-        showCloseButton={showCloseButton}
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-[var(--radius-3xl)]! border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_10%),var(--popover))] p-0 shadow-[0_28px_90px_rgba(15,23,42,0.24)] backdrop-blur",
+          className
+        )}
+        showCloseButton={showCloseButton}
       >
         {children}
       </DialogContent>
@@ -69,11 +69,11 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          className={cn(
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-11! rounded-full! border-border/80 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_12%),var(--background))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_1px_0_rgba(255,255,255,0.05)]! *:data-[slot=input-group-addon]:pl-3!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
             "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
             className
           )}
@@ -121,13 +121,13 @@ function CommandGroup({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
-        className
-      )}
-      {...props}
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[11px] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.22em] **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
     />
   )
 }
@@ -151,13 +151,13 @@ function CommandItem({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
-        className
-      )}
-      {...props}
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-[min(var(--radius-xl),16px)]! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:border-border/70 data-selected:bg-muted/55 data-selected:text-foreground data-selected:shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
     >
       {children}
       <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />