Poyraz Recipes

1import { cva, type VariantProps } from "class-variance-authority";
2 
3const fieldVariants = cva(
4  "flex w-full border text-sm text-foreground outline-none transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] placeholder:text-placeholder focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-invalid aria-invalid:ring-[3px] aria-invalid:ring-invalid/15",
5  {
6    variants: {
7      variant: {
8        default: "border-input bg-surface shadow-xs",
9        soft: "border-transparent bg-surface-subtle shadow-none hover:border-border-strong",
10        glass:
11          "poyraz-glass-field border-glass-border-outer bg-glass !text-foreground placeholder:!text-muted-foreground caret-foreground shadow-sm backdrop-blur-glass",
12      },
13      radius: {
14        none: "rounded-none",
15        sm: "rounded-sm",
16        md: "rounded-md",
17        lg: "rounded-lg",
18        xl: "rounded-xl",
19        full: "rounded-full",
20      },
21    },
22    defaultVariants: { variant: "default", radius: "md" },
23  },
24);
25 
26const floatingSurfaceVariants = cva(
27  "poyraz-floating-surface overflow-hidden border text-foreground outline-none transition-[background-color,border-color] duration-[var(--poyraz-motion-duration-fast)]",
28  {
29    variants: {
30      surface: {
31        solid: "border-border bg-background shadow-lg",
32        soft: "border-border/80 bg-surface-subtle shadow-md",
33        glass:
34          "border-glass-border-outer bg-glass shadow-lg backdrop-blur-glass supports-[backdrop-filter]:bg-glass",
35      },
36      radius: {
37        none: "rounded-none",
38        sm: "rounded-sm",
39        md: "rounded-md",
40        lg: "rounded-lg",
41        xl: "rounded-xl",
42      },
43    },
44    defaultVariants: { surface: "solid", radius: "lg" },
45  },
46);
47 
48const floatingMotion = [
49  "origin-[var(--poyraz-floating-transform-origin)]",
50  "data-[state=open]:animate-poyraz-floating-in data-[state=closed]:animate-poyraz-floating-out",
51].join(" ");
52 
53const controlMotion =
54  "transition-[color,background-color,border-color,opacity,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] active:scale-[var(--poyraz-motion-scale-press-medium)] motion-reduce:transition-none motion-reduce:active:scale-100";
55 
56const iconMotion =
57// … truncated