@zentauri-ui/zentauri-components 1.5.22 → 1.6.0

package/src/ui/dynamic-stepper/variants.ts

@@ -0,0 +1,247 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+import type { buttonVariants } from "../buttons/variants";
+
+type GradientButtonAppearance =
+  | "gradient-blue"
+  | "gradient-green"
+  | "gradient-red"
+  | "gradient-yellow"
+  | "gradient-purple"
+  | "gradient-teal"
+  | "gradient-indigo"
+  | "gradient-pink"
+  | "gradient-orange";
+
+/** Button `appearance` keys usable for indicator tones (gradients excluded). */
+export type DynamicStepperIndicatorToneAppearance = Exclude<
+  NonNullable<VariantProps<typeof buttonVariants>["appearance"]>,
+  GradientButtonAppearance
+>;
+
+export type DynamicStepperIndicatorSemanticState =
+  | "complete"
+  | "current"
+  | "upcoming";
+
+const INDICATOR_TONE_CLASSES: Record<
+  DynamicStepperIndicatorToneAppearance,
+  Record<DynamicStepperIndicatorSemanticState, string>
+> = {
+  default: {
+    complete:
+      "border-slate-500/55 dark:border-slate-700/55 bg-slate-500/25 dark:bg-slate-500/25 text-slate-900 dark:text-slate-50 ring-2 ring-slate-500/25 dark:ring-slate-400/25",
+    current:
+      "border-slate-600 dark:border-slate-300 bg-slate-500/35 dark:bg-slate-500/35 text-slate-900 dark:text-white ring-2 ring-slate-600/45 dark:ring-slate-300/45",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
+  },
+  secondary: {
+    complete:
+      "border-slate-400 dark:border-slate-600 bg-slate-200/70 dark:bg-slate-800/70 text-slate-700 dark:text-slate-200 ring-2 ring-slate-400/35 dark:ring-slate-600/35",
+    current:
+      "border-slate-500 dark:border-slate-500 bg-slate-300/55 dark:bg-slate-700/55 text-slate-900 dark:text-white ring-2 ring-slate-500/45 dark:ring-slate-500/45",
+    upcoming:
+      "border-black/10 dark:border-white/10 bg-slate-100/50 dark:bg-slate-900/50 text-slate-500 dark:text-slate-500",
+  },
+  destructive: {
+    complete:
+      "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
+    current:
+      "border-rose-600 dark:border-rose-400 bg-rose-100/50 dark:bg-rose-600/35 text-slate-900 dark:text-white ring-2 ring-rose-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-rose-50 dark:bg-rose-950/25 text-slate-500 dark:text-slate-400",
+  },
+  outline: {
+    complete:
+      "border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25",
+    current:
+      "border-black/30 dark:border-white/30 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white ring-2 ring-black/25 dark:ring-white/25",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
+  },
+  ghost: {
+    complete:
+      "border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20",
+    current:
+      "border-transparent bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white ring-2 ring-black/15 dark:ring-white/15",
+    upcoming:
+      "border-transparent bg-transparent text-slate-500 dark:text-slate-500",
+  },
+  link: {
+    complete:
+      "border-cyan-500/45 bg-cyan-50 dark:bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25",
+    current:
+      "border-cyan-600 dark:border-cyan-400 bg-cyan-900/45 text-cyan-950 dark:text-cyan-50 ring-2 ring-cyan-400/45",
+    upcoming:
+      "border-black/10 dark:border-white/10 bg-transparent text-slate-500 dark:text-slate-500",
+  },
+  glass: {
+    complete:
+      "border-black/25 dark:border-white/25 bg-black/10 dark:bg-white/10 text-emerald-900 dark:text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25",
+    current:
+      "border-black/35 dark:border-white/35 bg-black/15 dark:bg-white/15 text-slate-900 dark:text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-black/30 dark:ring-white/30",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400 backdrop-blur-sm",
+  },
+  emerald: {
+    complete:
+      "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
+    current:
+      "border-emerald-600 dark:border-emerald-400 bg-emerald-500/30 text-slate-900 dark:text-white ring-2 ring-emerald-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700/55",
+  },
+  indigo: {
+    complete:
+      "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
+    current:
+      "border-indigo-600 dark:border-indigo-400 bg-indigo-500/30 text-slate-900 dark:text-white ring-2 ring-indigo-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-indigo-50 dark:bg-indigo-950/30 text-indigo-700/55",
+  },
+  purple: {
+    complete:
+      "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
+    current:
+      "border-purple-600 dark:border-purple-400 bg-purple-500/30 text-slate-900 dark:text-white ring-2 ring-purple-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-purple-50 dark:bg-purple-950/30 text-purple-700/55",
+  },
+  pink: {
+    complete:
+      "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
+    current:
+      "border-pink-600 dark:border-pink-400 bg-pink-500/30 text-slate-900 dark:text-white ring-2 ring-pink-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-pink-50 dark:bg-pink-950/30 text-pink-700/55",
+  },
+  rose: {
+    complete:
+      "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
+    current:
+      "border-rose-600 dark:border-rose-400 bg-rose-500/30 text-slate-900 dark:text-white ring-2 ring-rose-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-rose-50 dark:bg-rose-950/30 text-rose-700/55",
+  },
+  sky: {
+    complete:
+      "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
+    current:
+      "border-sky-600 dark:border-sky-400 bg-sky-500/30 text-slate-900 dark:text-white ring-2 ring-sky-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-sky-50 dark:bg-sky-950/30 text-sky-700/55",
+  },
+  teal: {
+    complete:
+      "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
+    current:
+      "border-teal-600 dark:border-teal-400 bg-teal-500/30 text-slate-900 dark:text-white ring-2 ring-teal-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-teal-50 dark:bg-teal-950/30 text-teal-700/55",
+  },
+  yellow: {
+    complete:
+      "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
+    current:
+      "border-yellow-600 dark:border-yellow-400 bg-yellow-100/50 dark:bg-yellow-600/35 text-slate-900 dark:text-white ring-2 ring-yellow-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-yellow-50 dark:bg-yellow-950/35 text-yellow-700/55",
+  },
+  orange: {
+    complete:
+      "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
+    current:
+      "border-orange-600 dark:border-orange-400 bg-orange-100/50 dark:bg-orange-600/35 text-slate-900 dark:text-white ring-2 ring-orange-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-orange-50 dark:bg-orange-950/30 text-orange-700/55",
+  },
+  gray: {
+    complete:
+      "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
+    current:
+      "border-gray-600 dark:border-gray-400 bg-gray-100/50 dark:bg-gray-600/35 text-slate-900 dark:text-white ring-2 ring-gray-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-gray-50 dark:bg-gray-950/30 text-gray-300/70",
+  },
+  amber: {
+    complete:
+      "border-amber-500/60 bg-amber-500/20 text-amber-900 dark:text-amber-100 ring-2 ring-amber-400/30",
+    current:
+      "border-amber-600 dark:border-amber-400 bg-amber-100/50 dark:bg-amber-600/35 text-slate-900 dark:text-white ring-2 ring-amber-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-amber-50 dark:bg-amber-950/35 text-amber-700/55",
+  },
+  violet: {
+    complete:
+      "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
+    current:
+      "border-violet-600 dark:border-violet-400 bg-violet-500/30 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
+    upcoming:
+      "border-black/15 dark:border-white/15 bg-violet-50 dark:bg-violet-950/30 text-violet-700/55",
+  },
+};
+
+export function dynamicStepperIndicatorToneClass(
+  state: DynamicStepperIndicatorSemanticState,
+  tone: DynamicStepperIndicatorToneAppearance,
+): string {
+  return INDICATOR_TONE_CLASSES[tone][state];
+}
+
+export const dynamicStepperRootVariants = cva("flex w-full", {
+  variants: {
+    orientation: {
+      horizontal:
+        "flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center",
+      vertical: "flex-col gap-6",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const dynamicStepperMapperVariants = cva(
+  "m-0 min-w-0 flex-1 list-none p-0",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex flex-row flex-wrap items-start justify-center gap-4",
+        vertical: "flex flex-col gap-6",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+export const dynamicStepperItemVariants = cva("relative flex gap-3", {
+  variants: {
+    orientation: {
+      horizontal: "min-w-0 flex-col items-center text-center",
+      vertical: "flex-row items-start text-left",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const dynamicStepperIndicatorVariants = cva(
+  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);

package/src/ui/empty-state/variants.ts

@@ -10,9 +10,9 @@ export const emptyStateVariants = cva(
         lg: "gap-4 p-8 text-base",
       },
       appearance: {
-        default: "text-slate-50",
-        ghost: "text-slate-200",
-        card: "rounded-2xl border border-white/10 bg-white/5 p-8 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
+        default: "text-slate-900 dark:text-slate-50",
+        ghost: "text-slate-700 dark:text-slate-200",
+        card: "rounded-2xl border border-black/10 dark:border-white/10 bg-white/90 dark:bg-white/5 p-8 text-slate-900 dark:text-slate-50 shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
       },
       align: {
         start: "items-start text-left",
@@ -39,13 +39,16 @@ export const emptyStateTitleVariants = cva("font-semibold tracking-tight", {
   defaultVariants: { size: "md" },
 });
 
-export const emptyStateDescriptionVariants = cva("max-w-md text-slate-400", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
+export const emptyStateDescriptionVariants = cva(
+  "max-w-md text-slate-500 dark:text-slate-400",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
     },
+    defaultVariants: { size: "md" },
   },
-  defaultVariants: { size: "md" },
-});
+);

package/src/ui/file-upload/file-upload.tsx

@@ -94,16 +94,18 @@ export function FileUpload({
       >
         {children ?? (
           <>
-            <span className="text-base font-semibold text-slate-100">
+            <span className="text-base font-semibold text-slate-900 dark:text-slate-100">
               Drop files here
             </span>
-            <span className="text-xs text-slate-400">
+            <span className="text-xs text-slate-600 dark:text-slate-400">
               or click to browse from your device
             </span>
           </>
         )}
         {dragOver && (
-          <span className="text-xs text-slate-400">Drop files here</span>
+          <span className="text-xs text-slate-600 dark:text-slate-400">
+            Drop files here
+          </span>
         )}
       </label>
     </div>

package/src/ui/file-upload/variants.ts

@@ -1,34 +1,35 @@
 import { cva } from "class-variance-authority";
 
 export const fileUploadVariants = cva(
-  "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-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  "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-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950",
   {
     variants: {
       appearance: {
-        idle: "border-white/15 bg-white/5 text-slate-300 hover:border-white/25 hover:bg-white/[0.07]",
-        active: "border-violet-400/70 bg-violet-500/10 text-white",
+        idle: "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:border-black/25 dark:hover:border-white/25 hover:bg-black/[0.07] dark:bg-white/[0.07]",
+        active:
+          "border-violet-400/70 bg-violet-500/10 text-slate-900 dark:text-white",
         disabled: "cursor-not-allowed opacity-50",
         error:
-          "border-red-400/70 bg-red-500/10 text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
+          "border-red-400/70 bg-red-500/10 text-red-600 dark:text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
         success:
-          "border-green-400/70 bg-green-500/10 text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
+          "border-green-400/70 bg-green-500/10 text-green-600 dark:text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
         warning:
-          "border-yellow-400/70 bg-yellow-500/10 text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
-        info: "border-blue-400/70 bg-blue-500/10 text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
+          "border-yellow-400/70 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
+        info: "border-blue-400/70 bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
         neutral:
-          "border-gray-400/70 bg-gray-500/10 text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
+          "border-gray-400/70 bg-gray-500/10 text-gray-600 dark:text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
         purple:
-          "border-purple-400/70 bg-purple-500/10 text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
+          "border-purple-400/70 bg-purple-500/10 text-purple-600 dark:text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
         indigo:
-          "border-indigo-400/70 bg-indigo-500/10 text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
+          "border-indigo-400/70 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
         emerald:
-          "border-emerald-400/70 bg-emerald-500/10 text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
+          "border-emerald-400/70 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
         amber:
-          "border-amber-400/70 bg-amber-500/10 text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
-        pink: "border-pink-400/70 bg-pink-500/10 text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
+          "border-amber-400/70 bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
+        pink: "border-pink-400/70 bg-pink-500/10 text-pink-600 dark:text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
         orange:
-          "border-orange-400/70 bg-orange-500/10 text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
-        teal: "border-teal-400/70 bg-teal-500/10 text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
+          "border-orange-400/70 bg-orange-500/10 text-orange-600 dark:text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
+        teal: "border-teal-400/70 bg-teal-500/10 text-teal-600 dark:text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
       },
     },
     defaultVariants: {

package/src/ui/inputs/types.ts

@@ -15,7 +15,7 @@ export type InputSharedProps = Omit<
 export type InputProps =
   | (InputSharedProps &
       Omit<ComponentPropsWithRef<"input">, "size" | "as"> & {
-        as?: "input" | "file" | "checkbox" | "radio";
+        as?: "input" | "file" | "checkbox" | "radio" | "date";
       })
   | (InputSharedProps &
       Omit<ComponentPropsWithRef<"textarea">, "size" | "as"> & {