@zentauri-ui/zentauri-components 1.6.3 → 1.7.0

package/src/design-system/file-upload.ts

@@ -0,0 +1,30 @@
+export const zuiFileUploadBase =
+  "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-file-upload-ring-focus,oklch(70.2%_0.183_293.541_/_0.6))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-file-upload-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-file-upload-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+
+export const zuiFileUploadAppearances = {
+  idle: "border-[color:var(--zui-file-upload-idle-border,#00000026)] dark:border-[color:var(--zui-file-upload-idle-border-dark,#ffffff26)] bg-[var(--zui-file-upload-idle-bg,#0000000d)] dark:bg-[var(--zui-file-upload-idle-bg-dark,#ffffff0d)] text-[color:var(--zui-file-upload-idle-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-file-upload-idle-fg-dark,oklch(86.9%_0.022_252.894))] hover:border-[color:var(--zui-file-upload-idle-border-hover,#00000040)] dark:hover:border-[color:var(--zui-file-upload-idle-border-hover-dark,#ffffff40)] hover:bg-[var(--zui-file-upload-idle-bg-hover,#00000012)] dark:bg-[var(--zui-file-upload-idle-bg-dark,#ffffff12)]",
+  active:
+    "border-[color:var(--zui-file-upload-active-border,oklch(70.2%_0.183_293.541_/_0.7))] bg-[var(--zui-file-upload-active-bg,oklch(60.6%_0.25_292.717_/_0.1))] text-[color:var(--zui-file-upload-active-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-file-upload-active-fg-dark,#ffffff)]",
+  disabled: "cursor-not-allowed opacity-50",
+  error:
+    "border-[color:var(--zui-file-upload-error-border,oklch(70.4%_0.191_22.216_/_0.7))] bg-[var(--zui-file-upload-error-bg,oklch(63.7%_0.237_25.331_/_0.1))] text-[color:var(--zui-file-upload-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-file-upload-error-fg-dark,oklch(70.4%_0.191_22.216))] hover:border-[color:var(--zui-file-upload-error-border-hover,oklch(70.4%_0.191_22.216_/_0.8))] hover:bg-[var(--zui-file-upload-error-bg-hover,oklch(63.7%_0.237_25.331_/_0.15))]",
+  success:
+    "border-[color:var(--zui-file-upload-success-border,oklch(79.2%_0.209_151.711_/_0.7))] bg-[var(--zui-file-upload-success-bg,oklch(72.3%_0.219_149.579_/_0.1))] text-[color:var(--zui-file-upload-success-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-file-upload-success-fg-dark,oklch(79.2%_0.209_151.711))] hover:border-[color:var(--zui-file-upload-success-border-hover,oklch(79.2%_0.209_151.711_/_0.8))] hover:bg-[var(--zui-file-upload-success-bg-hover,oklch(72.3%_0.219_149.579_/_0.15))]",
+  warning:
+    "border-[color:var(--zui-file-upload-warning-border,oklch(85.2%_0.199_91.936_/_0.7))] bg-[var(--zui-file-upload-warning-bg,oklch(79.5%_0.184_86.047_/_0.1))] text-[color:var(--zui-file-upload-warning-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-file-upload-warning-fg-dark,oklch(85.2%_0.199_91.936))] hover:border-[color:var(--zui-file-upload-warning-border-hover,oklch(85.2%_0.199_91.936_/_0.8))] hover:bg-[var(--zui-file-upload-warning-bg-hover,oklch(79.5%_0.184_86.047_/_0.15))]",
+  info: "border-[color:var(--zui-file-upload-info-border,oklch(70.7%_0.165_254.624_/_0.7))] bg-[var(--zui-file-upload-info-bg,oklch(62.3%_0.214_259.815_/_0.1))] text-[color:var(--zui-file-upload-info-fg,oklch(54.6%_0.245_262.881))] dark:text-[color:var(--zui-file-upload-info-fg-dark,oklch(70.7%_0.165_254.624))] hover:border-[color:var(--zui-file-upload-info-border-hover,oklch(70.7%_0.165_254.624_/_0.8))] hover:bg-[var(--zui-file-upload-info-bg-hover,oklch(62.3%_0.214_259.815_/_0.15))]",
+  neutral:
+    "border-[color:var(--zui-file-upload-neutral-border,oklch(70.7%_0.022_261.325_/_0.7))] bg-[var(--zui-file-upload-neutral-bg,oklch(55.1%_0.027_264.364_/_0.1))] text-[color:var(--zui-file-upload-neutral-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-file-upload-neutral-fg-dark,oklch(70.7%_0.022_261.325))] hover:border-[color:var(--zui-file-upload-neutral-border-hover,oklch(70.7%_0.022_261.325_/_0.8))] hover:bg-[var(--zui-file-upload-neutral-bg-hover,oklch(55.1%_0.027_264.364_/_0.15))]",
+  purple:
+    "border-[color:var(--zui-file-upload-purple-border,oklch(71.4%_0.203_305.504_/_0.7))] bg-[var(--zui-file-upload-purple-bg,oklch(62.7%_0.265_303.9_/_0.1))] text-[color:var(--zui-file-upload-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-file-upload-purple-fg-dark,oklch(71.4%_0.203_305.504))] hover:border-[color:var(--zui-file-upload-purple-border-hover,oklch(71.4%_0.203_305.504_/_0.8))] hover:bg-[var(--zui-file-upload-purple-bg-hover,oklch(62.7%_0.265_303.9_/_0.15))]",
+  indigo:
+    "border-[color:var(--zui-file-upload-indigo-border,oklch(67.3%_0.182_276.935_/_0.7))] bg-[var(--zui-file-upload-indigo-bg,oklch(58.5%_0.233_277.117_/_0.1))] text-[color:var(--zui-file-upload-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-file-upload-indigo-fg-dark,oklch(67.3%_0.182_276.935))] hover:border-[color:var(--zui-file-upload-indigo-border-hover,oklch(67.3%_0.182_276.935_/_0.8))] hover:bg-[var(--zui-file-upload-indigo-bg-hover,oklch(58.5%_0.233_277.117_/_0.15))]",
+  emerald:
+    "border-[color:var(--zui-file-upload-emerald-border,oklch(76.5%_0.177_163.223_/_0.7))] bg-[var(--zui-file-upload-emerald-bg,oklch(69.6%_0.17_162.48_/_0.1))] text-[color:var(--zui-file-upload-emerald-fg,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-file-upload-emerald-fg-dark,oklch(76.5%_0.177_163.223))] hover:border-[color:var(--zui-file-upload-emerald-border-hover,oklch(76.5%_0.177_163.223_/_0.8))] hover:bg-[var(--zui-file-upload-emerald-bg-hover,oklch(69.6%_0.17_162.48_/_0.15))]",
+  amber:
+    "border-[color:var(--zui-file-upload-amber-border,oklch(82.8%_0.189_84.429_/_0.7))] bg-[var(--zui-file-upload-amber-bg,oklch(76.9%_0.188_70.08_/_0.1))] text-[color:var(--zui-file-upload-amber-fg,oklch(66.6%_0.179_58.318))] dark:text-[color:var(--zui-file-upload-amber-fg-dark,oklch(82.8%_0.189_84.429))] hover:border-[color:var(--zui-file-upload-amber-border-hover,oklch(82.8%_0.189_84.429_/_0.8))] hover:bg-[var(--zui-file-upload-amber-bg-hover,oklch(76.9%_0.188_70.08_/_0.15))]",
+  pink: "border-[color:var(--zui-file-upload-pink-border,oklch(71.8%_0.202_349.761_/_0.7))] bg-[var(--zui-file-upload-pink-bg,oklch(65.6%_0.241_354.308_/_0.1))] text-[color:var(--zui-file-upload-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-file-upload-pink-fg-dark,oklch(71.8%_0.202_349.761))] hover:border-[color:var(--zui-file-upload-pink-border-hover,oklch(71.8%_0.202_349.761_/_0.8))] hover:bg-[var(--zui-file-upload-pink-bg-hover,oklch(65.6%_0.241_354.308_/_0.15))]",
+  orange:
+    "border-[color:var(--zui-file-upload-orange-border,oklch(75%_0.183_55.934_/_0.7))] bg-[var(--zui-file-upload-orange-bg,oklch(70.5%_0.213_47.604_/_0.1))] text-[color:var(--zui-file-upload-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-file-upload-orange-fg-dark,oklch(75%_0.183_55.934))] hover:border-[color:var(--zui-file-upload-orange-border-hover,oklch(75%_0.183_55.934_/_0.8))] hover:bg-[var(--zui-file-upload-orange-bg-hover,oklch(70.5%_0.213_47.604_/_0.15))]",
+  teal: "border-[color:var(--zui-file-upload-teal-border,oklch(77.7%_0.152_181.912_/_0.7))] bg-[var(--zui-file-upload-teal-bg,oklch(70.4%_0.14_182.503_/_0.1))] text-[color:var(--zui-file-upload-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-file-upload-teal-fg-dark,oklch(77.7%_0.152_181.912))] hover:border-[color:var(--zui-file-upload-teal-border-hover,oklch(77.7%_0.152_181.912_/_0.8))] hover:bg-[var(--zui-file-upload-teal-bg-hover,oklch(70.4%_0.14_182.503_/_0.15))]",
+} as const;

package/src/design-system/index.ts

@@ -0,0 +1,29 @@
+export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./divider";
+export * from "./drawer";
+export * from "./dropdown";
+export * from "./dynamic-stepper";
+export * from "./empty-state";
+export * from "./file-upload";
+export * from "./inputs";
+export * from "./modal";
+export * from "./pagination";
+export * from "./progress";
+export * from "./select";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./spinner";
+export * from "./stepper";
+export * from "./table";
+export * from "./tabs";
+export * from "./toast";
+export * from "./tokens";
+export * from "./toggle";
+export * from "./tooltip";
+export * from "./typography";

package/src/design-system/inputs.ts

@@ -0,0 +1,74 @@
+export const zuiInputBase = [
+  "w-full min-w-0 rounded-xl border bg-[var(--zui-input-bg,#0000000d)] dark:bg-[var(--zui-input-bg-dark,#ffffff0d)] text-[color:var(--zui-input-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-input-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-input-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-input-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]",
+  "ring-offset-[var(--zui-input-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors",
+  "placeholder:text-[color:var(--zui-input-placeholder-fg,oklch(55.4%_0.046_257.417))] dark:placeholder:text-[color:var(--zui-input-placeholder-fg-dark,oklch(55.4%_0.046_257.417))]",
+  "focus-visible:outline-none",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "read-only:cursor-default read-only:bg-[var(--zui-input-bg-read-only,#00000008)] dark:bg-[var(--zui-input-bg-dark,#ffffff08)]",
+  "file:h-8",
+] as const;
+
+export const zuiInputAs = {
+  input: "",
+  textarea: "h-auto! resize-y py-2 align-top",
+  file: [
+    "p-0! cursor-pointer",
+    "file:cursor-pointer file:border-0 file:border-r file:border-[color:var(--zui-input-file-border,#0000001a)] dark:file:border-[color:var(--zui-input-file-border-dark,#ffffff1a)]",
+    "file:bg-[var(--zui-input-file-bg,#0000001a)] dark:file:bg-[var(--zui-input-file-bg-dark,#ffffff1a)] file:text-[color:var(--zui-input-file-fg,oklch(37.2%_0.044_257.287))] dark:file:text-[color:var(--zui-input-file-fg-dark,oklch(92.9%_0.013_255.508))] file:font-medium",
+    "file:transition-colors file:duration-200",
+    "hover:file:bg-[var(--zui-input-file-bg-hover,#00000026)] dark:hover:file:bg-[var(--zui-input-file-bg-hover-dark,#ffffff26)]",
+    "[&:not(:disabled)]:file:hover:text-[color:var(--zui-input-file-fg-hover,#ffffff)]",
+    "disabled:file:cursor-not-allowed",
+  ],
+  checkbox: [
+    "shrink-0 cursor-pointer appearance-none relative",
+    "min-h-0! shadow-none outline-none",
+    "border-2 border-[color:var(--zui-input-checkbox-border,#0000004d)] dark:border-[color:var(--zui-input-checkbox-border-dark,#ffffff4d)] [&:not(:checked)]:bg-[var(--zui-input-checkbox-bg,transparent)]",
+    "transition-[color,box-shadow,border-color,background-color]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:cursor-default",
+    "checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current",
+  ],
+  radio: [
+    "shrink-0 cursor-pointer appearance-none rounded-full",
+    "min-h-0! shadow-none outline-none",
+    "border-2 border-[color:var(--zui-input-radio-border,#0000004d)] dark:border-[color:var(--zui-input-radio-border-dark,#ffffff4d)] bg-[var(--zui-input-radio-bg,transparent)]! read-only:bg-[var(--zui-input-radio-bg-read-only,transparent)]!",
+    "ring-2 ring-[var(--zui-input-radio-ring,#00000033)] dark:ring-[var(--zui-input-radio-ring-dark,#ffffff33)] ring-offset-2 ring-offset-[var(--zui-input-radio-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-radio-ring-offset-dark,oklch(12.9%_0.042_264.695))]",
+    "transition-[color,box-shadow,background-color,border-color,box-shadow]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:cursor-default",
+  ],
+  date: "w-auto shrink-0",
+} as const;
+
+export const zuiInputAppearances = {
+  default:
+    "border-[color:var(--zui-input-default-border,#0000001a)] dark:border-[color:var(--zui-input-default-border-dark,#ffffff1a)] focus-visible:border-[color:var(--zui-input-default-border-focus,#00000033)] dark:focus-visible:border-[color:var(--zui-input-default-border-focus-dark,#ffffff33)]",
+  warning:
+    "border-[color:var(--zui-input-warning-border,oklch(79.5%_0.184_86.047_/_0.8))] text-[color:var(--zui-input-warning-fg,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-input-warning-fg-dark,oklch(98.7%_0.026_102.212))] placeholder:text-[color:var(--zui-input-warning-placeholder-fg,oklch(47.6%_0.114_61.907))] dark:placeholder:text-[color:var(--zui-input-warning-placeholder-fg-dark,oklch(90.5%_0.182_98.111_/_0.7))] focus-visible:border-[color:var(--zui-input-warning-border-focus,oklch(68.1%_0.162_75.834))] dark:focus-visible:border-[color:var(--zui-input-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] focus-visible:ring-[var(--zui-input-warning-ring-focus,oklch(85.2%_0.199_91.936_/_0.8))]",
+  error:
+    "border-[color:var(--zui-input-error-border,oklch(64.5%_0.246_16.439_/_0.8))] text-[color:var(--zui-input-error-fg,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-input-error-fg-dark,oklch(96.9%_0.015_12.422))] placeholder:text-[color:var(--zui-input-error-placeholder-fg,oklch(45.5%_0.188_13.697))] dark:placeholder:text-[color:var(--zui-input-error-placeholder-fg-dark,oklch(81%_0.117_11.638_/_0.7))] focus-visible:border-[color:var(--zui-input-error-border-focus,oklch(58.6%_0.253_17.585))] dark:focus-visible:border-[color:var(--zui-input-error-border-focus-dark,oklch(71.2%_0.194_13.428))] focus-visible:ring-[var(--zui-input-error-ring-focus,oklch(71.2%_0.194_13.428_/_0.8))]",
+  success:
+    "border-[color:var(--zui-input-success-border,oklch(69.6%_0.17_162.48_/_0.7))] text-[color:var(--zui-input-success-fg,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-input-success-fg-dark,oklch(97.9%_0.021_166.113))] placeholder:text-[color:var(--zui-input-success-placeholder-fg,oklch(43.2%_0.095_166.913))] dark:placeholder:text-[color:var(--zui-input-success-placeholder-fg-dark,oklch(84.5%_0.143_164.978_/_0.7))] focus-visible:border-[color:var(--zui-input-success-border-focus,oklch(59.6%_0.145_163.225))] dark:focus-visible:border-[color:var(--zui-input-success-border-focus-dark,oklch(76.5%_0.177_163.223))] focus-visible:ring-[var(--zui-input-success-ring-focus,oklch(76.5%_0.177_163.223_/_0.8))]",
+  info: "border-[color:var(--zui-input-info-border,oklch(62.3%_0.214_259.815_/_0.8))] text-[color:var(--zui-input-info-fg,oklch(28.2%_0.091_267.935))] dark:text-[color:var(--zui-input-info-fg-dark,oklch(97%_0.014_254.604))] placeholder:text-[color:var(--zui-input-info-placeholder-fg,oklch(42.4%_0.199_265.638))] dark:placeholder:text-[color:var(--zui-input-info-placeholder-fg-dark,oklch(80.9%_0.105_251.813_/_0.7))] focus-visible:border-[color:var(--zui-input-info-border-focus,oklch(54.6%_0.245_262.881))] dark:focus-visible:border-[color:var(--zui-input-info-border-focus-dark,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-input-info-ring-focus,oklch(70.7%_0.165_254.624_/_0.8))]",
+  violet:
+    "border-[color:var(--zui-input-violet-border,oklch(60.6%_0.25_292.717_/_0.8))] text-[color:var(--zui-input-violet-fg,oklch(28.3%_0.141_291.089))] dark:text-[color:var(--zui-input-violet-fg-dark,oklch(96.9%_0.016_293.756))] placeholder:text-[color:var(--zui-input-violet-placeholder-fg,oklch(43.2%_0.232_292.759))] dark:placeholder:text-[color:var(--zui-input-violet-placeholder-fg-dark,oklch(81.1%_0.111_293.571_/_0.7))] focus-visible:border-[color:var(--zui-input-violet-border-focus,oklch(54.1%_0.281_293.009))] dark:focus-visible:border-[color:var(--zui-input-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] focus-visible:ring-[var(--zui-input-violet-ring-focus,oklch(70.2%_0.183_293.541_/_0.8))]",
+  amber:
+    "border-[color:var(--zui-input-amber-border,oklch(76.9%_0.188_70.08_/_0.8))] text-[color:var(--zui-input-amber-fg,oklch(27.9%_0.077_45.635))] dark:text-[color:var(--zui-input-amber-fg-dark,oklch(98.7%_0.022_95.277))] placeholder:text-[color:var(--zui-input-amber-placeholder-fg,oklch(47.3%_0.137_46.201))] dark:placeholder:text-[color:var(--zui-input-amber-placeholder-fg-dark,oklch(87.9%_0.169_91.605_/_0.7))] focus-visible:border-[color:var(--zui-input-amber-border-focus,oklch(66.6%_0.179_58.318))] dark:focus-visible:border-[color:var(--zui-input-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] focus-visible:ring-[var(--zui-input-amber-ring-focus,oklch(82.8%_0.189_84.429_/_0.8))]",
+  pink: "border-[color:var(--zui-input-pink-border,oklch(65.6%_0.241_354.308_/_0.8))] text-[color:var(--zui-input-pink-fg,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-input-pink-fg-dark,oklch(97.1%_0.014_343.198))] placeholder:text-[color:var(--zui-input-pink-placeholder-fg,oklch(45.9%_0.187_3.815))] dark:placeholder:text-[color:var(--zui-input-pink-placeholder-fg-dark,oklch(82.3%_0.12_346.018_/_0.7))] focus-visible:border-[color:var(--zui-input-pink-border-focus,oklch(59.2%_0.249_0.584))] dark:focus-visible:border-[color:var(--zui-input-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] focus-visible:ring-[var(--zui-input-pink-ring-focus,oklch(71.8%_0.202_349.761_/_0.8))]",
+  indigo:
+    "border-[color:var(--zui-input-indigo-border,oklch(58.5%_0.233_277.117_/_0.8))] text-[color:var(--zui-input-indigo-fg,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-input-indigo-fg-dark,oklch(96.2%_0.018_272.314))] placeholder:text-[color:var(--zui-input-indigo-placeholder-fg,oklch(39.8%_0.195_277.366))] dark:placeholder:text-[color:var(--zui-input-indigo-placeholder-fg-dark,oklch(78.5%_0.115_274.713_/_0.7))] focus-visible:border-[color:var(--zui-input-indigo-border-focus,oklch(51.1%_0.262_276.966))] dark:focus-visible:border-[color:var(--zui-input-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] focus-visible:ring-[var(--zui-input-indigo-ring-focus,oklch(67.3%_0.182_276.935_/_0.8))]",
+  orange:
+    "border-[color:var(--zui-input-orange-border,oklch(70.5%_0.213_47.604_/_0.8))] text-[color:var(--zui-input-orange-fg,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-input-orange-fg-dark,oklch(98%_0.016_73.684))] placeholder:text-[color:var(--zui-input-orange-placeholder-fg,oklch(47%_0.157_37.304))] dark:placeholder:text-[color:var(--zui-input-orange-placeholder-fg-dark,oklch(83.7%_0.128_66.29_/_0.7))] focus-visible:border-[color:var(--zui-input-orange-border-focus,oklch(64.6%_0.222_41.116))] dark:focus-visible:border-[color:var(--zui-input-orange-border-focus-dark,oklch(75%_0.183_55.934))] focus-visible:ring-[var(--zui-input-orange-ring-focus,oklch(75%_0.183_55.934_/_0.8))]",
+} as const;
+
+export const zuiInputSizes = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-9 md:h-11 px-4 text-sm",
+  lg: "h-10 md:h-12 px-5 text-base",
+} as const;
+
+export const zuiInputRing = {
+  true: "focus-visible:ring-2 focus-visible:ring-offset-2",
+  false: "",
+} as const;

package/src/design-system/modal.ts

@@ -0,0 +1,110 @@
+export const zuiModalOverlayBase =
+  "fixed inset-0 z-50 bg-[var(--zui-modal-overlay-bg,oklch(12.9%_0.042_264.695_/_0.7))] backdrop-blur-sm data-[state=open]:animate-in";
+
+export const zuiModalTriggerBase =
+  "relative inline-flex shrink-0 cursor-pointer rounded-md border";
+
+export const zuiModalTriggerAppearances = {
+  default:
+    "bg-[var(--zui-modal-trigger-default-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-modal-trigger-default-bg-dark,oklch(12.9%_0.042_264.695))] text-[color:var(--zui-modal-trigger-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-modal-trigger-default-fg-dark,oklch(98.4%_0.003_247.858))]",
+  glass:
+    "border-[color:var(--zui-modal-trigger-glass-border,#00000026)] dark:border-[color:var(--zui-modal-trigger-glass-border-dark,#ffffff26)] bg-[var(--zui-modal-trigger-glass-bg,oklch(98.4%_0.003_247.858_/_0.7))] dark:bg-[var(--zui-modal-trigger-glass-bg-dark,oklch(12.9%_0.042_264.695_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-modal-trigger-glass-fg-dark,oklch(98.4%_0.003_247.858))]",
+  sky: "border-[color:var(--zui-modal-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-modal-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-modal-trigger-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-modal-trigger-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-modal-trigger-sky-fg-dark,oklch(97.7%_0.013_236.62))]",
+  rose: "border-[color:var(--zui-modal-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-modal-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-modal-trigger-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-modal-trigger-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-modal-trigger-rose-fg-dark,oklch(96.9%_0.015_12.422))]",
+  purple:
+    "border-[color:var(--zui-modal-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-modal-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-modal-trigger-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-modal-trigger-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-modal-trigger-purple-fg-dark,oklch(97.7%_0.014_308.299))]",
+  pink: "border-[color:var(--zui-modal-trigger-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-modal-trigger-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-modal-trigger-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-modal-trigger-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-modal-trigger-pink-fg-dark,oklch(97.1%_0.014_343.198))]",
+  orange:
+    "border-[color:var(--zui-modal-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-modal-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-modal-trigger-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-modal-trigger-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-modal-trigger-orange-fg-dark,oklch(98%_0.016_73.684))]",
+  yellow:
+    "border-[color:var(--zui-modal-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-modal-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-modal-trigger-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-modal-trigger-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-modal-trigger-yellow-fg-dark,oklch(98.7%_0.026_102.212))]",
+  teal: "border-[color:var(--zui-modal-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-modal-trigger-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-modal-trigger-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-modal-trigger-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-modal-trigger-teal-fg-dark,oklch(98.4%_0.014_180.72))]",
+  indigo:
+    "border-[color:var(--zui-modal-trigger-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-modal-trigger-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-modal-trigger-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-modal-trigger-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-modal-trigger-indigo-fg-dark,oklch(96.2%_0.018_272.314))]",
+  emerald:
+    "border-[color:var(--zui-modal-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-modal-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-modal-trigger-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-modal-trigger-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-modal-trigger-emerald-fg-dark,oklch(97.9%_0.021_166.113))]",
+  gray: "border-[color:var(--zui-modal-trigger-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-modal-trigger-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-modal-trigger-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-modal-trigger-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-modal-trigger-gray-fg-dark,oklch(98.5%_0.002_247.839))]",
+  amber:
+    "border-[color:var(--zui-modal-trigger-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-modal-trigger-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-modal-trigger-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-modal-trigger-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-modal-trigger-amber-fg-dark,oklch(98.7%_0.022_95.277))]",
+  violet:
+    "border-[color:var(--zui-modal-trigger-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-modal-trigger-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-modal-trigger-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-modal-trigger-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-modal-trigger-violet-fg-dark,oklch(96.9%_0.016_293.756))]",
+  "gradient-blue":
+    "border-[color:var(--zui-modal-trigger-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-modal-trigger-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-modal-trigger-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.7))] to-[var(--zui-modal-trigger-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-modal-trigger-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-blue-fg,oklch(42.4%_0.199_265.638))] dark:text-[color:var(--zui-modal-trigger-gradient-blue-fg-dark,oklch(97%_0.014_254.604))]",
+  "gradient-green":
+    "border-[color:var(--zui-modal-trigger-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-modal-trigger-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-modal-trigger-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.7))] to-[var(--zui-modal-trigger-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-modal-trigger-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-green-fg,oklch(44.8%_0.119_151.328))] dark:text-[color:var(--zui-modal-trigger-gradient-green-fg-dark,oklch(98.2%_0.018_155.826))]",
+  "gradient-red":
+    "border-[color:var(--zui-modal-trigger-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-modal-trigger-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-modal-trigger-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.7))] to-[var(--zui-modal-trigger-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-modal-trigger-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-red-fg,oklch(44.4%_0.177_26.899))] dark:text-[color:var(--zui-modal-trigger-gradient-red-fg-dark,oklch(97.1%_0.013_17.38))]",
+  "gradient-yellow":
+    "border-[color:var(--zui-modal-trigger-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-modal-trigger-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-modal-trigger-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.7))] to-[var(--zui-modal-trigger-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-modal-trigger-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-modal-trigger-gradient-yellow-fg-dark,oklch(98.7%_0.026_102.212))]",
+  "gradient-purple":
+    "border-[color:var(--zui-modal-trigger-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-modal-trigger-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-modal-trigger-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.7))] to-[var(--zui-modal-trigger-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-modal-trigger-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-modal-trigger-gradient-purple-fg-dark,oklch(97.7%_0.014_308.299))]",
+  "gradient-teal":
+    "border-[color:var(--zui-modal-trigger-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-modal-trigger-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-modal-trigger-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-modal-trigger-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-modal-trigger-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-modal-trigger-gradient-teal-fg-dark,oklch(98.4%_0.014_180.72))]",
+  "gradient-indigo":
+    "border-[color:var(--zui-modal-trigger-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-modal-trigger-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-modal-trigger-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-modal-trigger-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-modal-trigger-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-modal-trigger-gradient-indigo-fg-dark,oklch(96.2%_0.018_272.314))]",
+  "gradient-pink":
+    "border-[color:var(--zui-modal-trigger-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-modal-trigger-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-modal-trigger-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-modal-trigger-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-modal-trigger-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-modal-trigger-gradient-pink-fg-dark,oklch(97.1%_0.014_343.198))]",
+  "gradient-orange":
+    "border-[color:var(--zui-modal-trigger-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-modal-trigger-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-modal-trigger-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-modal-trigger-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-modal-trigger-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-modal-trigger-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl text-[color:var(--zui-modal-trigger-gradient-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-modal-trigger-gradient-orange-fg-dark,oklch(98%_0.016_73.684))]",
+} as const;
+
+export const zuiModalContentBase =
+  "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto border border-[color:var(--zui-modal-content-border,#0000001a)] dark:border-[color:var(--zui-modal-content-border-dark,#ffffff1a)] bg-[var(--zui-modal-content-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-modal-content-bg-dark,oklch(12.9%_0.042_264.695))] p-6 text-[color:var(--zui-modal-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-modal-content-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-modal-content-shadow,0_12px_40px_rgba(15,23,42,0.14))] dark:shadow-[var(--zui-modal-content-shadow-dark,0_24px_80px_rgba(15,23,42,0.55))] focus:outline-none";
+
+export const zuiModalContentSizes = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[calc(100%-2rem)]",
+} as const;
+
+export const zuiModalContentPositions = {
+  center: "top-1/2 translate-y-[-50%]",
+  top: "top-10 translate-y-0",
+  bottom: "bottom-10 translate-y-0",
+} as const;
+
+export const zuiModalContentAppearances = {
+  default:
+    "bg-[var(--zui-modal-content-default-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-modal-content-default-bg-dark,oklch(12.9%_0.042_264.695))]",
+  glass:
+    "border-[color:var(--zui-modal-content-glass-border,#00000026)] dark:border-[color:var(--zui-modal-content-glass-border-dark,#ffffff26)] bg-[var(--zui-modal-content-glass-bg,oklch(98.4%_0.003_247.858_/_0.7))] dark:bg-[var(--zui-modal-content-glass-bg-dark,oklch(12.9%_0.042_264.695_/_0.7))] backdrop-blur-xl",
+  sky: "border-[color:var(--zui-modal-content-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-modal-content-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-modal-content-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-modal-content-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl",
+  rose: "border-[color:var(--zui-modal-content-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-modal-content-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-modal-content-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-modal-content-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  purple:
+    "border-[color:var(--zui-modal-content-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-modal-content-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-modal-content-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-modal-content-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  pink: "border-[color:var(--zui-modal-content-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-modal-content-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-modal-content-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-modal-content-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  orange:
+    "border-[color:var(--zui-modal-content-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-modal-content-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-modal-content-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-modal-content-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  yellow:
+    "border-[color:var(--zui-modal-content-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-modal-content-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-modal-content-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-modal-content-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl",
+  teal: "border-[color:var(--zui-modal-content-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-modal-content-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-modal-content-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-modal-content-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl",
+  indigo:
+    "border-[color:var(--zui-modal-content-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-modal-content-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-modal-content-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-modal-content-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl",
+  emerald:
+    "border-[color:var(--zui-modal-content-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-modal-content-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-modal-content-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-modal-content-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl",
+  gray: "border-[color:var(--zui-modal-content-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-modal-content-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-modal-content-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-modal-content-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl",
+  amber:
+    "border-[color:var(--zui-modal-content-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-modal-content-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-modal-content-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-modal-content-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl",
+  violet:
+    "border-[color:var(--zui-modal-content-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-modal-content-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-modal-content-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-modal-content-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl",
+  "gradient-blue":
+    "border-[color:var(--zui-modal-content-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-modal-content-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-r from-[var(--zui-modal-content-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-modal-content-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.7))] to-[var(--zui-modal-content-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-modal-content-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  "gradient-green":
+    "border-[color:var(--zui-modal-content-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-modal-content-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-r from-[var(--zui-modal-content-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-modal-content-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.7))] to-[var(--zui-modal-content-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-modal-content-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.7))] backdrop-blur-xl",
+  "gradient-red":
+    "border-[color:var(--zui-modal-content-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-modal-content-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-r from-[var(--zui-modal-content-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-modal-content-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.7))] to-[var(--zui-modal-content-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-modal-content-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  "gradient-yellow":
+    "border-[color:var(--zui-modal-content-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-modal-content-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-r from-[var(--zui-modal-content-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-modal-content-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.7))] to-[var(--zui-modal-content-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-modal-content-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  "gradient-purple":
+    "border-[color:var(--zui-modal-content-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-modal-content-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-r from-[var(--zui-modal-content-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-modal-content-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.7))] to-[var(--zui-modal-content-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-modal-content-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  "gradient-teal":
+    "border-[color:var(--zui-modal-content-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-modal-content-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-modal-content-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-modal-content-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-modal-content-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-modal-content-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl",
+  "gradient-indigo":
+    "border-[color:var(--zui-modal-content-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-modal-content-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-modal-content-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-modal-content-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-modal-content-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-modal-content-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  "gradient-pink":
+    "border-[color:var(--zui-modal-content-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-modal-content-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-modal-content-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-modal-content-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-modal-content-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-modal-content-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  "gradient-orange":
+    "border-[color:var(--zui-modal-content-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-modal-content-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-modal-content-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-modal-content-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-modal-content-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-modal-content-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl",
+} as const;

package/src/design-system/pagination.ts

@@ -0,0 +1,92 @@
+export const zuiPaginationListBase =
+  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-[var(--zui-pagination-list-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-pagination-list-ring-offset-dark,oklch(12.9%_0.042_264.695))]";
+
+export const zuiPaginationListAppearances = {
+  default:
+    "border-[color:var(--zui-pagination-list-default-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-default-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-default-bg,#00000008)] dark:bg-[var(--zui-pagination-list-default-bg-dark,#ffffff08)]",
+  secondary:
+    "border-[color:var(--zui-pagination-list-secondary-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-secondary-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-secondary-bg,oklch(96.8%_0.007_247.896_/_0.4))] dark:bg-[var(--zui-pagination-list-secondary-bg-dark,oklch(20.8%_0.042_265.755_/_0.4))]",
+  destructive:
+    "border-[color:var(--zui-pagination-list-destructive-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-destructive-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-destructive-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
+  outline:
+    "border-[color:var(--zui-pagination-list-outline-border,#00000026)] dark:border-[color:var(--zui-pagination-list-outline-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-outline-bg,transparent)]",
+  ghost:
+    "border-[color:var(--zui-pagination-list-ghost-border,transparent)] bg-[var(--zui-pagination-list-ghost-bg,transparent)]",
+  link: "border-[color:var(--zui-pagination-list-link-border,transparent)] bg-[var(--zui-pagination-list-link-bg,transparent)]",
+  glass:
+    "border-[color:var(--zui-pagination-list-glass-border,#00000026)] dark:border-[color:var(--zui-pagination-list-glass-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-glass-bg,#0000000d)] dark:bg-[var(--zui-pagination-list-glass-bg-dark,#ffffff0d)] backdrop-blur-md",
+  emerald:
+    "border-[color:var(--zui-pagination-list-emerald-border,oklch(69.6%_0.17_162.48_/_0.25))] bg-[var(--zui-pagination-list-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-pagination-list-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.2))]",
+  indigo:
+    "border-[color:var(--zui-pagination-list-indigo-border,oklch(58.5%_0.233_277.117_/_0.25))] bg-[var(--zui-pagination-list-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-pagination-list-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.2))]",
+  purple:
+    "border-[color:var(--zui-pagination-list-purple-border,oklch(62.7%_0.265_303.9_/_0.25))] bg-[var(--zui-pagination-list-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-pagination-list-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.2))]",
+  pink: "border-[color:var(--zui-pagination-list-pink-border,oklch(65.6%_0.241_354.308_/_0.25))] bg-[var(--zui-pagination-list-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-pagination-list-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.2))]",
+  rose: "border-[color:var(--zui-pagination-list-rose-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
+  sky: "border-[color:var(--zui-pagination-list-sky-border,oklch(68.5%_0.169_237.323_/_0.25))] bg-[var(--zui-pagination-list-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-pagination-list-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.2))]",
+  teal: "border-[color:var(--zui-pagination-list-teal-border,oklch(70.4%_0.14_182.503_/_0.25))] bg-[var(--zui-pagination-list-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-pagination-list-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.2))]",
+  yellow:
+    "border-[color:var(--zui-pagination-list-yellow-border,oklch(79.5%_0.184_86.047_/_0.25))] bg-[var(--zui-pagination-list-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-pagination-list-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.2))]",
+  orange:
+    "border-[color:var(--zui-pagination-list-orange-border,oklch(70.5%_0.213_47.604_/_0.25))] bg-[var(--zui-pagination-list-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-pagination-list-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.2))]",
+  gray: "border-[color:var(--zui-pagination-list-gray-border,oklch(55.1%_0.027_264.364_/_0.25))] bg-[var(--zui-pagination-list-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-pagination-list-gray-bg-dark,oklch(13%_0.028_261.692_/_0.2))]",
+  amber:
+    "border-[color:var(--zui-pagination-list-amber-border,oklch(76.9%_0.188_70.08_/_0.25))] bg-[var(--zui-pagination-list-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-pagination-list-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.2))]",
+  violet:
+    "border-[color:var(--zui-pagination-list-violet-border,oklch(60.6%_0.25_292.717_/_0.25))] bg-[var(--zui-pagination-list-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-pagination-list-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.2))]",
+  "gradient-blue":
+    "border-[color:var(--zui-pagination-list-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-pagination-list-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.3))] to-[var(--zui-pagination-list-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
+  "gradient-green":
+    "border-[color:var(--zui-pagination-list-gradient-green-border,oklch(76.8%_0.233_130.85_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-pagination-list-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.3))] to-[var(--zui-pagination-list-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-pagination-list-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.3))]",
+  "gradient-red":
+    "border-[color:var(--zui-pagination-list-gradient-red-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-pagination-list-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.3))] to-[var(--zui-pagination-list-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
+  "gradient-yellow":
+    "border-[color:var(--zui-pagination-list-gradient-yellow-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-pagination-list-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.3))] to-[var(--zui-pagination-list-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-pagination-list-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.3))]",
+  "gradient-purple":
+    "border-[color:var(--zui-pagination-list-gradient-purple-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-pagination-list-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.3))] to-[var(--zui-pagination-list-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
+  "gradient-teal":
+    "border-[color:var(--zui-pagination-list-gradient-teal-border,oklch(71.5%_0.143_215.221_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-pagination-list-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.3))] to-[var(--zui-pagination-list-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-pagination-list-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.3))]",
+  "gradient-indigo":
+    "border-[color:var(--zui-pagination-list-gradient-indigo-border,oklch(62.7%_0.265_303.9_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-pagination-list-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.3))] to-[var(--zui-pagination-list-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
+  "gradient-pink":
+    "border-[color:var(--zui-pagination-list-gradient-pink-border,oklch(64.5%_0.246_16.439_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-pagination-list-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.3))] to-[var(--zui-pagination-list-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-pagination-list-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.3))]",
+  "gradient-orange":
+    "border-[color:var(--zui-pagination-list-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-pagination-list-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.3))] to-[var(--zui-pagination-list-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-pagination-list-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.3))]",
+} as const;
+
+export const zuiPaginationListSizes = {
+  sm: "gap-0.5",
+  md: "gap-1",
+  lg: "gap-1",
+  xl: "gap-1.5",
+  "2xl": "gap-1.5",
+  "3xl": "gap-2",
+  "4xl": "gap-2",
+  "5xl": "gap-2",
+  "6xl": "gap-2",
+  "7xl": "gap-2.5",
+  "8xl": "gap-2.5",
+  "9xl": "gap-2.5",
+  "10xl": "gap-3",
+  icon: "gap-1",
+} as const;
+
+export const zuiPaginationEllipsisBase =
+  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-[color:var(--zui-pagination-ellipsis-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-pagination-ellipsis-fg-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiPaginationEllipsisSizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-base",
+  "2xl": "text-lg",
+  "3xl": "text-lg",
+  "4xl": "text-xl",
+  "5xl": "text-xl",
+  "6xl": "text-xl",
+  "7xl": "text-2xl",
+  "8xl": "text-2xl",
+  "9xl": "text-2xl",
+  "10xl": "text-2xl",
+  icon: "text-sm",
+} as const;

package/src/design-system/progress.ts

@@ -0,0 +1,86 @@
+export const zuiProgressBase =
+  "w-full text-[color:var(--zui-progress-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-progress-fg-dark,oklch(98.4%_0.003_247.858))]";
+
+export const zuiProgressAppearances = {
+  default:
+    "[--progress-fill:var(--zui-progress-default-fill,oklch(20.8%_0.042_265.755))] dark:[--progress-fill:var(--zui-progress-default-fill-dark,oklch(98.4%_0.003_247.858))]",
+  secondary:
+    "[--progress-fill:var(--zui-progress-secondary-fill,oklch(44.6%_0.043_257.281))] dark:[--progress-fill:var(--zui-progress-secondary-fill-dark,oklch(86.9%_0.022_252.894))]",
+  destructive:
+    "[--progress-fill:var(--zui-progress-destructive-fill,oklch(45.5%_0.188_13.697))] dark:[--progress-fill:var(--zui-progress-destructive-fill-dark,oklch(71.2%_0.194_13.428))]",
+  emerald:
+    "[--progress-fill:var(--zui-progress-emerald-fill,oklch(43.2%_0.095_166.913))] dark:[--progress-fill:var(--zui-progress-emerald-fill-dark,oklch(76.5%_0.177_163.223))]",
+  indigo:
+    "[--progress-fill:var(--zui-progress-indigo-fill,oklch(39.8%_0.195_277.366))] dark:[--progress-fill:var(--zui-progress-indigo-fill-dark,oklch(67.3%_0.182_276.935))]",
+  purple:
+    "[--progress-fill:var(--zui-progress-purple-fill,oklch(43.8%_0.218_303.724))] dark:[--progress-fill:var(--zui-progress-purple-fill-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "[--progress-fill:var(--zui-progress-pink-fill,oklch(45.9%_0.187_3.815))] dark:[--progress-fill:var(--zui-progress-pink-fill-dark,oklch(71.8%_0.202_349.761))]",
+  rose: "[--progress-fill:var(--zui-progress-rose-fill,oklch(45.5%_0.188_13.697))] dark:[--progress-fill:var(--zui-progress-rose-fill-dark,oklch(71.2%_0.194_13.428))]",
+  sky: "[--progress-fill:var(--zui-progress-sky-fill,oklch(44.3%_0.11_240.79))] dark:[--progress-fill:var(--zui-progress-sky-fill-dark,oklch(74.6%_0.16_232.661))]",
+  teal: "[--progress-fill:var(--zui-progress-teal-fill,oklch(43.7%_0.078_188.216))] dark:[--progress-fill:var(--zui-progress-teal-fill-dark,oklch(77.7%_0.152_181.912))]",
+  yellow:
+    "[--progress-fill:var(--zui-progress-yellow-fill,oklch(47.6%_0.114_61.907))] dark:[--progress-fill:var(--zui-progress-yellow-fill-dark,oklch(85.2%_0.199_91.936))]",
+  orange:
+    "[--progress-fill:var(--zui-progress-orange-fill,oklch(47%_0.157_37.304))] dark:[--progress-fill:var(--zui-progress-orange-fill-dark,oklch(75%_0.183_55.934))]",
+  outline:
+    "[--progress-fill:var(--zui-progress-outline-fill,oklch(52%_0.105_223.128))] dark:[--progress-fill:var(--zui-progress-outline-fill-dark,oklch(86.5%_0.127_207.078))]",
+  ghost:
+    "[--progress-fill:var(--zui-progress-ghost-fill,oklch(27.9%_0.041_260.031))] dark:[--progress-fill:var(--zui-progress-ghost-fill-dark,oklch(92.9%_0.013_255.508))]",
+  glass:
+    "[--progress-fill:var(--zui-progress-glass-fill,oklch(20.8%_0.042_265.755))] dark:[--progress-fill:var(--zui-progress-glass-fill-dark,#ffffff)]",
+  "gradient-blue":
+    "[--progress-fill:var(--zui-progress-gradient-blue-fill,linear-gradient(90deg,oklch(62.3%_0.214_259.815),oklch(62.7%_0.265_303.9)))] dark:[--progress-fill:var(--zui-progress-gradient-blue-fill-dark,linear-gradient(90deg,oklch(62.3%_0.214_259.815),oklch(62.7%_0.265_303.9)))]",
+  "gradient-green":
+    "[--progress-fill:var(--zui-progress-gradient-green-fill,linear-gradient(90deg,oklch(72.3%_0.219_149.579),oklch(76.8%_0.233_130.85)))] dark:[--progress-fill:var(--zui-progress-gradient-green-fill-dark,linear-gradient(90deg,oklch(72.3%_0.219_149.579),oklch(76.8%_0.233_130.85)))]",
+  "gradient-red":
+    "[--progress-fill:var(--zui-progress-gradient-red-fill,linear-gradient(90deg,oklch(63.7%_0.237_25.331),oklch(65.6%_0.241_354.308)))] dark:[--progress-fill:var(--zui-progress-gradient-red-fill-dark,linear-gradient(90deg,oklch(63.7%_0.237_25.331),oklch(65.6%_0.241_354.308)))]",
+  "gradient-yellow":
+    "[--progress-fill:var(--zui-progress-gradient-yellow-fill,linear-gradient(90deg,oklch(79.5%_0.184_86.047),oklch(70.5%_0.213_47.604)))] dark:[--progress-fill:var(--zui-progress-gradient-yellow-fill-dark,linear-gradient(90deg,oklch(79.5%_0.184_86.047),oklch(70.5%_0.213_47.604)))]",
+  "gradient-purple":
+    "[--progress-fill:var(--zui-progress-gradient-purple-fill,linear-gradient(90deg,oklch(62.7%_0.265_303.9),oklch(65.6%_0.241_354.308)))] dark:[--progress-fill:var(--zui-progress-gradient-purple-fill-dark,linear-gradient(90deg,oklch(62.7%_0.265_303.9),oklch(65.6%_0.241_354.308)))]",
+  "gradient-teal":
+    "[--progress-fill:var(--zui-progress-gradient-teal-fill,linear-gradient(90deg,oklch(70.4%_0.14_182.503),oklch(71.5%_0.143_215.221)))] dark:[--progress-fill:var(--zui-progress-gradient-teal-fill-dark,linear-gradient(90deg,oklch(70.4%_0.14_182.503),oklch(71.5%_0.143_215.221)))]",
+  "gradient-indigo":
+    "[--progress-fill:var(--zui-progress-gradient-indigo-fill,linear-gradient(90deg,oklch(58.5%_0.233_277.117),oklch(62.7%_0.265_303.9)))] dark:[--progress-fill:var(--zui-progress-gradient-indigo-fill-dark,linear-gradient(90deg,oklch(58.5%_0.233_277.117),oklch(62.7%_0.265_303.9)))]",
+  "gradient-pink":
+    "[--progress-fill:var(--zui-progress-gradient-pink-fill,linear-gradient(90deg,oklch(65.6%_0.241_354.308),oklch(64.5%_0.246_16.439)))] dark:[--progress-fill:var(--zui-progress-gradient-pink-fill-dark,linear-gradient(90deg,oklch(65.6%_0.241_354.308),oklch(64.5%_0.246_16.439)))]",
+  "gradient-orange":
+    "[--progress-fill:var(--zui-progress-gradient-orange-fill,linear-gradient(90deg,oklch(70.5%_0.213_47.604),oklch(63.7%_0.237_25.331)))] dark:[--progress-fill:var(--zui-progress-gradient-orange-fill-dark,linear-gradient(90deg,oklch(70.5%_0.213_47.604),oklch(63.7%_0.237_25.331)))]",
+} as const;
+
+export const zuiProgressSizes = {
+  xs: "text-[0.65rem]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg",
+} as const;
+
+export const zuiProgressShapes = {
+  flat: "rounded-none",
+  rounded: "rounded-md",
+  pill: "rounded-full",
+} as const;
+
+export const zuiProgressBoolean = {
+  true: "",
+  false: "",
+} as const;
+
+export const zuiProgressTrackBase =
+  "relative w-full overflow-hidden bg-[var(--zui-progress-track-bg,#0000001a)] dark:bg-[var(--zui-progress-track-bg-dark,#ffffff1a)]";
+
+export const zuiProgressTrackSizes = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-3",
+  xl: "h-4",
+} as const;
+
+export const zuiProgressBarBase = "h-full w-full origin-left rounded-[inherit]";
+
+export const zuiProgressBarStriped = {
+  true: "[background:var(--zui-progress-bar-bg-striped,repeating-linear-gradient(135deg,rgba(255,255,255,0.28)_0,rgba(255,255,255,0.28)_10px,transparent_10px,transparent_20px)),var(--progress-fill)] dark:[background:var(--zui-progress-bar-bg-striped-dark,repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)),var(--progress-fill)]",
+  false: "[background:var(--progress-fill)]",
+} as const;