azamat-ui-kit-cli 0.3.13 → 0.3.15

package/vendor/src/components/patterns/form-builder-presets.ts

@@ -1,131 +1,13 @@
-import type { FieldPath, FieldValues } from "react-hook-form"
-
-import type {
-  FormBuilderAsyncSelectField,
-  FormBuilderCustomField,
-  FormBuilderDateField,
-  FormBuilderDateRangeField,
-  FormBuilderInputField,
-  FormBuilderNumberField,
-  FormBuilderPhoneField,
-  FormBuilderSection,
-  FormBuilderSelectField,
-  FormBuilderSwitchField,
-  FormBuilderTextareaField,
-} from "./form-builder"
-
-type FieldBase = {
-  id: string
-  hidden?: boolean
-  className?: string
-  colSpan?: 1 | 2 | 3 | 4 | "full"
-}
-
-type FieldPresetOptions<TProps> = FieldBase & {
-  props: TProps
-}
-
-function splitFieldOptions<TProps>(options: FieldPresetOptions<TProps>) {
-  const { id, hidden, className, colSpan, props } = options
-  return { base: { id, hidden, className, colSpan }, props }
-}
-
-function inputField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderInputField<TFieldValues, TName>["props"]>): FormBuilderInputField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "input", props }
-}
-
-function textareaField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderTextareaField<TFieldValues, TName>["props"]>): FormBuilderTextareaField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "textarea", props }
-}
-
-function selectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderSelectField<TFieldValues, TName>["props"]>): FormBuilderSelectField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "select", props }
-}
-
-function asyncSelectField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderAsyncSelectField<TFieldValues, TName>["props"]>): FormBuilderAsyncSelectField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "async-select", props }
-}
-
-function switchField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderSwitchField<TFieldValues, TName>["props"]>): FormBuilderSwitchField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "switch", props }
-}
-
-function numberField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderNumberField<TFieldValues, TName>["props"]>): FormBuilderNumberField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "number", props }
-}
-
-function phoneField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderPhoneField<TFieldValues, TName>["props"]>): FormBuilderPhoneField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "phone", props }
-}
-
-function dateField<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderDateField<TFieldValues, TName>["props"]>): FormBuilderDateField<TFieldValues, TName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "date", props }
-}
-
-function dateRangeField<
-  TFieldValues extends FieldValues,
-  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->(options: FieldPresetOptions<FormBuilderDateRangeField<TFieldValues, TFromName, TToName>["props"]>): FormBuilderDateRangeField<TFieldValues, TFromName, TToName> {
-  const { base, props } = splitFieldOptions(options)
-  return { ...base, type: "date-range", props }
-}
-
-function customField<TFieldValues extends FieldValues>(
-  options: FieldBase & Pick<FormBuilderCustomField<TFieldValues>, "render">
-): FormBuilderCustomField<TFieldValues> {
-  const { id, hidden, className, colSpan, render } = options
-  return { id, hidden, className, colSpan, type: "custom", render }
-}
-
-function formSection<TFieldValues extends FieldValues>(
-  section: FormBuilderSection<TFieldValues>
-): FormBuilderSection<TFieldValues> {
-  return section
-}
-
-export {
-  asyncSelectField,
-  customField,
-  dateField,
-  dateRangeField,
-  formSection,
-  inputField,
-  numberField,
-  phoneField,
-  selectField,
-  switchField,
-  textareaField,
-}
+export {
+  asyncSelectField,
+  customField,
+  dateField,
+  dateRangeField,
+  formSection,
+  inputField,
+  numberField,
+  phoneField,
+  selectField,
+  switchField,
+  textareaField,
+} from "./form-builder"

package/vendor/src/components/patterns/form-builder.tsx

@@ -167,14 +167,109 @@ const columnsClassName: Record<1 | 2 | 3 | 4, string> = {
   4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4",
 }
 
-const colSpanClassName: Record<NonNullable<BaseFormBuilderField["colSpan"]>, string> = {
-  1: "col-span-1",
-  2: "md:col-span-2",
-  3: "xl:col-span-3",
-  4: "xl:col-span-4",
-  full: "col-span-full",
-}
-
+const colSpanClassName: Record<NonNullable<BaseFormBuilderField["colSpan"]>, string> = {
+  1: "col-span-1",
+  2: "md:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+  full: "col-span-full",
+}
+
+type FieldPresetOptions<TProps> = BaseFormBuilderField & {
+  props: TProps
+}
+
+function splitFieldOptions<TProps>(options: FieldPresetOptions<TProps>) {
+  const { id, hidden, className, colSpan, props } = options
+  return { base: { id, hidden, className, colSpan }, props }
+}
+
+function inputField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderInputField<TFieldValues, TName>["props"]>): FormBuilderInputField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "input", props }
+}
+
+function textareaField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderTextareaField<TFieldValues, TName>["props"]>): FormBuilderTextareaField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "textarea", props }
+}
+
+function selectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderSelectField<TFieldValues, TName>["props"]>): FormBuilderSelectField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "select", props }
+}
+
+function asyncSelectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderAsyncSelectField<TFieldValues, TName>["props"]>): FormBuilderAsyncSelectField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "async-select", props }
+}
+
+function switchField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderSwitchField<TFieldValues, TName>["props"]>): FormBuilderSwitchField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "switch", props }
+}
+
+function numberField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderNumberField<TFieldValues, TName>["props"]>): FormBuilderNumberField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "number", props }
+}
+
+function phoneField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderPhoneField<TFieldValues, TName>["props"]>): FormBuilderPhoneField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "phone", props }
+}
+
+function dateField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderDateField<TFieldValues, TName>["props"]>): FormBuilderDateField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "date", props }
+}
+
+function dateRangeField<
+  TFieldValues extends FieldValues,
+  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderDateRangeField<TFieldValues, TFromName, TToName>["props"]>): FormBuilderDateRangeField<TFieldValues, TFromName, TToName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "date-range", props }
+}
+
+function customField<TFieldValues extends FieldValues>(
+  options: BaseFormBuilderField & Pick<FormBuilderCustomField<TFieldValues>, "render">
+): FormBuilderCustomField<TFieldValues> {
+  const { id, hidden, className, colSpan, render } = options
+  return { id, hidden, className, colSpan, type: "custom", render }
+}
+
+function formSection<TFieldValues extends FieldValues>(
+  section: FormBuilderSection<TFieldValues>
+): FormBuilderSection<TFieldValues> {
+  return section
+}
+
 function renderFormBuilderField<TFieldValues extends FieldValues>(
   field: FormBuilderField<TFieldValues>,
   context: FormBuilderFieldRenderContext<TFieldValues>
@@ -331,4 +426,18 @@ function FormBuilder<TFieldValues extends FieldValues>({
   )
 }
 
-export { FormBuilder, renderFormBuilderField }
+export {
+  FormBuilder,
+  asyncSelectField,
+  customField,
+  dateField,
+  dateRangeField,
+  formSection,
+  inputField,
+  numberField,
+  phoneField,
+  renderFormBuilderField,
+  selectField,
+  switchField,
+  textareaField,
+}

package/vendor/src/components/patterns/index.ts

@@ -1,8 +1,7 @@
 export * from './resource-page'
-export * from './resource-detail-page'
-export * from './form-builder'
-export * from './form-builder-presets'
-export * from './settings-section'
+export * from './resource-detail-page'
+export * from './form-builder'
+export * from './settings-section'
 export * from './action-system'
 export * from './status-system'
 export * from './filter-builder'

package/vendor/src/components/patterns/public.ts

@@ -1,4 +1,3 @@
 export * from "./resource-page"
 export * from "./resource-detail-page"
 export * from "./form-builder"
-export * from "./form-builder-presets"

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

@@ -6,28 +6,24 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent font-semibold tracking-[0.01em] transition-[background-color,border-color,color,box-shadow,transform] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent font-semibold tracking-[0.01em] transition-[background-color,border-color,color,box-shadow,transform] focus-visible:ring-0 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
-        default:
-          "border-emerald-500/18 bg-emerald-500/14 text-emerald-700 shadow-none [a]:hover:bg-emerald-500/18 dark:border-emerald-400/18 dark:bg-emerald-400/16 dark:text-emerald-200",
-        secondary:
-          "border-border/70 bg-muted/68 text-foreground shadow-none [a]:hover:bg-muted/82 dark:bg-muted/38",
-        destructive:
-          "border-destructive/20 bg-destructive/10 text-destructive focus-visible:ring-destructive/20 [a]:hover:bg-destructive/14 dark:bg-destructive/16 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border-border/72 bg-transparent text-foreground shadow-none [a]:hover:bg-muted/66 [a]:hover:text-foreground",
-        ghost: "border-transparent bg-transparent text-muted-foreground shadow-none hover:bg-transparent hover:text-foreground",
-        link: "border-transparent bg-transparent p-0 text-[color:var(--aui-brand-strong)] shadow-none underline-offset-4 hover:underline",
+        default: "",
+        secondary: "",
+        destructive: "",
+        outline: "",
+        ghost: "",
+        link: "border-transparent bg-transparent p-0 shadow-none underline-offset-4",
+      },
+      tone: {
+        neutral: "",
+        info: "",
+        success: "",
+        warning: "",
+        danger: "",
       },
-      tone: {
-        neutral: "",
-        info: "border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-300",
-        success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
-        warning: "border-amber-500/24 bg-amber-500/12 text-amber-700 dark:text-amber-300",
-        danger: "border-destructive/20 bg-destructive/12 text-destructive dark:bg-destructive/20",
-      },
       size: {
         sm: "min-h-5 px-2.5 py-0.5 text-[0.64rem]",
         default: "min-h-6 px-3 py-1 text-[0.68rem]",
@@ -53,7 +49,7 @@ type BadgeProps = useRender.ComponentProps<"span"> &
     rightIcon?: React.ReactNode
   }
 
-function Badge({
+function Badge({
   className,
   variant = "default",
   tone = "neutral",
@@ -65,22 +61,27 @@ function Badge({
   render,
   ...props
 }: BadgeProps) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant, tone, size, dot }), className),
-        children: (
-          <>
-            {dot ? <span data-slot="badge-dot" className="size-1.5 rounded-full bg-current opacity-75" /> : null}
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant, tone, size, dot }), className),
+        children: (
+          <>
+            {dot ? <span data-slot="badge-dot" className="size-1.5 rounded-full bg-current opacity-75" /> : null}
             {leftIcon ? <span data-icon="inline-start" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{leftIcon}</span> : null}
             {children ? <span data-slot="badge-label">{children}</span> : null}
             {rightIcon ? <span data-icon="inline-end" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{rightIcon}</span> : null}
-          </>
-        ),
-      },
-      props
-    ),
+          </>
+        ),
+      } as React.HTMLAttributes<HTMLSpanElement>,
+      {
+        "data-variant": variant ?? "default",
+        "data-tone": tone ?? "neutral",
+        "data-size": size ?? "default",
+      } as React.HTMLAttributes<HTMLSpanElement>,
+      props
+    ),
     render,
     state: {
       slot: "badge",

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

@@ -5,21 +5,17 @@ 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-lg 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/60 focus-visible:ring-2 focus-visible:ring-ring/35 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:shadow-none aria-disabled:opacity-100 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/35 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,none)] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default:
-          "border-primary/20 bg-primary text-primary-foreground shadow-sm hover:-translate-y-px hover:bg-[color-mix(in_oklch,var(--primary),white_7%)] hover:shadow-md disabled:border-primary/10 disabled:bg-primary/45 disabled:text-primary-foreground/70 dark:disabled:bg-primary/34",
-        outline:
-          "border-border/80 bg-background text-foreground shadow-none hover:-translate-y-px hover:border-ring/38 hover:bg-accent/72 hover:text-foreground hover:shadow-sm aria-expanded:border-ring/38 aria-expanded:bg-accent/72 aria-expanded:text-foreground disabled:border-border/48 disabled:bg-muted/24 disabled:text-muted-foreground/70 dark:border-white/14 dark:bg-white/[0.045] dark:hover:bg-white/[0.08] dark:hover:text-foreground dark:disabled:bg-white/[0.035]",
-        secondary:
-          "border-border/70 bg-secondary text-secondary-foreground shadow-sm hover:-translate-y-px hover:border-border/86 hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] hover:text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground disabled:border-border/44 disabled:bg-muted/28 disabled:text-muted-foreground/72 dark:bg-white/[0.08] dark:hover:bg-white/[0.12] dark:disabled:bg-white/[0.035]",
-        ghost:
-          "border-transparent bg-transparent text-foreground/88 shadow-none hover:border-border/48 hover:bg-accent/68 hover:text-foreground aria-expanded:border-border/48 aria-expanded:bg-accent/68 aria-expanded:text-foreground disabled:text-muted-foreground/64 dark:text-foreground/86 dark:hover:bg-white/[0.075] dark:disabled:text-muted-foreground/58",
-        destructive:
-          "border-destructive/20 bg-destructive text-destructive-foreground shadow-sm hover:-translate-y-px hover:bg-[color-mix(in_oklch,var(--destructive),white_7%)] hover:shadow-md focus-visible:border-destructive/45 focus-visible:ring-destructive/24 disabled:border-destructive/10 disabled:bg-destructive/42 disabled:text-destructive-foreground/70 dark:focus-visible:ring-destructive/35 dark:disabled:bg-destructive/34",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "border-primary bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,var(--aui-control-shadow,none))] hover:bg-[color:color-mix(in_oklch,var(--primary),white_10%)]",
+        outline: "bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none",
+        secondary: "border-border bg-secondary text-secondary-foreground",
+        ghost: "border-transparent bg-transparent shadow-none hover:border-[color:var(--aui-control-border-strong,var(--border))]",
+        destructive: "border-destructive bg-destructive text-[color:var(--aui-danger-foreground,var(--primary-foreground))] shadow-[var(--aui-button-danger-shadow,var(--aui-control-shadow,none))] hover:bg-[color:color-mix(in_oklch,var(--destructive),white_10%)]",
+        warning: "border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_64%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_82%)] text-[color:var(--aui-warning-foreground,var(--foreground))]",
+        link: "rounded-none border-transparent bg-transparent p-0 shadow-none underline-offset-4",
       },
       size: {
         default:
@@ -67,11 +63,13 @@ function Button({
   const isDisabled = disabled || loading
 
   return (
-    <ButtonPrimitive
-      data-slot="button"
-      data-loading={loading || undefined}
-      disabled={isDisabled}
-      aria-busy={loading || undefined}
+    <ButtonPrimitive
+      data-slot="button"
+      data-variant={variant ?? "default"}
+      data-size={size ?? "default"}
+      data-loading={loading || undefined}
+      disabled={isDisabled}
+      aria-busy={loading || undefined}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     >

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

@@ -8,13 +8,11 @@ const cardVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "border-border/72 bg-card shadow-[0_10px_30px_rgba(15,23,42,0.05)] ring-1 ring-foreground/3",
-        elevated:
-          "border-border/68 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.04),0_20px_46px_rgba(15,23,42,0.08)] ring-1 ring-foreground/4",
-        outline: "border-border/72 bg-card shadow-none",
-        soft: "border-border/40 bg-muted/28 shadow-none",
-        ghost: "border-transparent bg-transparent shadow-none",
+        default: "",
+        elevated: "",
+        outline: "",
+        soft: "",
+        ghost: "border-transparent bg-transparent shadow-none ring-0",
       },
       size: {
         sm: "[--card-spacing:--spacing(4)] data-[has-footer=true]:pb-0",
@@ -26,21 +24,21 @@ const cardVariants = cva(
         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: "",
-      },
+      tone: {
+        neutral: "",
+        info: "",
+        success: "",
+        warning: "",
+        danger: "",
+      },
+      interactive: {
+        true: "cursor-pointer hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-0",
+        false: "",
+      },
+      selected: {
+        true: "",
+        false: "",
+      },
       disabled: {
         true: "pointer-events-none opacity-55",
         false: "",
@@ -75,9 +73,12 @@ function Card({
   return (
     <div
       data-slot="card"
-      data-size={size ?? "default"}
-      data-interactive={interactive || undefined}
-      data-selected={selected || undefined}
+      data-size={size ?? "default"}
+      data-variant={variant ?? "default"}
+      data-tone={tone ?? "neutral"}
+      data-density={density ?? "default"}
+      data-interactive={interactive || undefined}
+      data-selected={selected || undefined}
       data-disabled={disabled || undefined}
       aria-disabled={disabled || undefined}
       tabIndex={interactive && !disabled ? tabIndex ?? 0 : tabIndex}

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

@@ -41,17 +41,20 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  size = "md",
   ...props
 }: DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
 }) {
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
+        data-size={size}
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border border-border/72 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-6 text-sm text-popover-foreground shadow-[0_28px_88px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/6 backdrop-blur duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border p-6 text-sm text-popover-foreground backdrop-blur duration-100 outline-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_1fr] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -96,10 +99,10 @@ function DialogFooter({
   showCloseButton?: boolean
 }) {
   return (
-    <div
+        <div
       data-slot="dialog-footer"
       className={cn(
-        "-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t border-border/58 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),transparent_38%),color-mix(in_oklch,var(--muted),transparent_18%))] p-5 sm:flex-row sm:justify-end",
+        "-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t p-5 sm:flex-row sm:justify-end",
         className
       )}
       {...props}

package/vendor/src/components/ui/dropdown-menu.tsx

@@ -39,7 +39,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-2 text-popover-foreground shadow-[0_18px_54px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 backdrop-blur duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border p-2 text-popover-foreground backdrop-blur duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -86,7 +86,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-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 transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-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 transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -111,7 +111,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "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 transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:border-border/65 data-popup-open:bg-accent/65 data-popup-open:text-accent-foreground data-open:border-border/65 data-open:bg-accent/65 data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "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 transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -131,10 +131,10 @@ function DropdownMenuSubContent({
   ...props
 }: React.ComponentProps<typeof DropdownMenuContent>) {
   return (
-    <DropdownMenuContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn("w-auto min-w-[128px] rounded-[var(--radius-2xl)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-2 text-popover-foreground shadow-[0_18px_48px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 backdrop-blur duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
-      align={align}
+      <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[128px] rounded-[var(--radius-2xl)] p-2 text-popover-foreground backdrop-blur duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
       alignOffset={alignOffset}
       side={side}
       sideOffset={sideOffset}
@@ -157,7 +157,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground focus:**:text-accent-foreground data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -199,7 +199,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground focus:**:text-accent-foreground data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/vendor/src/components/ui/input-primitive.tsx

@@ -13,7 +13,7 @@ function InputPrimitive({ className, type, ...props }: InputPrimitiveProps) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-11 w-full min-w-0 rounded-[min(var(--radius-xl),18px)] border border-border/66 bg-background px-4 py-2.5 text-sm text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.02)] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/68 hover:border-border/82 hover:bg-background focus-visible:border-ring/48 focus-visible:bg-background focus-visible:shadow-[0_0_0_1px_color-mix(in_oklch,var(--ring),transparent_56%),0_0_0_5px_color-mix(in_oklch,var(--ring),transparent_84%)] focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border/48 disabled:bg-muted/22 disabled:text-muted-foreground/72 disabled:shadow-none disabled:opacity-100 read-only:border-border/58 read-only:bg-muted/16 read-only:text-foreground/84 read-only:shadow-none aria-invalid:border-destructive/60 aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_64%),0_0_0_5px_color-mix(in_oklch,var(--destructive),transparent_88%)] dark:border-white/10 dark:bg-white/[0.045] dark:hover:border-white/14 dark:hover:bg-white/[0.06] dark:focus-visible:bg-white/[0.07] dark:disabled:bg-white/[0.032] dark:read-only:bg-white/[0.028] dark:aria-invalid:border-destructive/50 dark:aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_68%),0_0_0_5px_color-mix(in_oklch,var(--destructive),transparent_88%)]",
+        "h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-xl))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-2.5 text-sm text-foreground shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/72 hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
         className
       )}
       {...props}