@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/inputs/variants.ts

@@ -0,0 +1,316 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariants = cva(
+  [
+    "w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+    "ring-offset-slate-950 transition-colors",
+    "placeholder:text-slate-500",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:cursor-default read-only:bg-white/[0.03]",
+    "file:h-8",
+  ],
+  {
+    variants: {
+      as: {
+        input: "",
+        textarea: "h-auto! resize-y py-2 align-top",
+        file: [
+          // Reset native padding so we control it fully
+          "p-0! cursor-pointer",
+          // File-selector button base styles
+          "file:cursor-pointer file:border-0 file:border-r file:border-white/10",
+          "file:bg-white/10 file:text-slate-200 file:font-medium",
+          "file:transition-colors file:duration-200",
+          "hover:file:bg-white/15",
+          // Content area padding
+          "[&:not(:disabled)]:file:hover:text-white",
+          "disabled:file:cursor-not-allowed",
+        ],
+        checkbox: [
+          "shrink-0 cursor-pointer appearance-none relative",
+          "min-h-0! shadow-none outline-none",
+          "border-2 border-white/30 [&:not(:checked)]: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-white/30 bg-transparent! read-only:bg-transparent!",
+          "ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950",
+          "transition-[color,box-shadow,background-color,border-color,box-shadow]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "read-only:cursor-default",
+        ],
+      },
+      appearance: {
+        default: "border-white/10 focus-visible:border-white/20",
+        warning:
+          "border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+        error:
+          "border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+        success:
+          "border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+        info: "border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+        violet:
+          "border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+        amber:
+          "border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
+        pink: "border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+        indigo:
+          "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
+        orange:
+          "border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80",
+      },
+      size: {
+        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",
+      },
+      ring: {
+        true: "focus-visible:ring-2 focus-visible:ring-offset-2",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      as: "input",
+      appearance: "default",
+      size: "md",
+      ring: true,
+    },
+    compoundVariants: [
+      // ── textarea size overrides ──────────────────────────────────────────
+      {
+        as: "textarea",
+        size: "sm",
+        class: "min-h-[5rem]",
+      },
+      {
+        as: "textarea",
+        size: "md",
+        class: "min-h-[6rem]",
+      },
+      {
+        as: "textarea",
+        size: "lg",
+        class: "min-h-[7.5rem]",
+      },
+      // ── file input: size – height & file-button padding ──────────────────
+      {
+        as: "file",
+        size: "sm",
+        class: "h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs",
+      },
+      {
+        as: "file",
+        size: "md",
+        class:
+          "h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm",
+      },
+      {
+        as: "file",
+        size: "lg",
+        class:
+          "h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base",
+      },
+      // ── file input: appearance – file-button accent colour ───────────────
+      {
+        as: "file",
+        appearance: "default",
+        class: "file:text-slate-200",
+      },
+      {
+        as: "file",
+        appearance: "warning",
+        class:
+          "file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30",
+      },
+      {
+        as: "file",
+        appearance: "error",
+        class:
+          "file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30",
+      },
+      {
+        as: "file",
+        appearance: "success",
+        class:
+          "file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30",
+      },
+      {
+        as: "file",
+        appearance: "info",
+        class:
+          "file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30",
+      },
+      {
+        as: "file",
+        appearance: "violet",
+        class:
+          "file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30",
+      },
+      {
+        as: "file",
+        appearance: "amber",
+        class:
+          "file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30",
+      },
+      {
+        as: "file",
+        appearance: "pink",
+        class:
+          "file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30",
+      },
+      {
+        as: "file",
+        appearance: "indigo",
+        class:
+          "file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30",
+      },
+      // ── checkbox / radio: size (overrides text-field height & padding) ───
+      {
+        as: "checkbox",
+        size: "sm",
+        class: "h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!",
+      },
+      {
+        as: "checkbox",
+        size: "md",
+        class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!",
+      },
+      {
+        as: "checkbox",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!",
+      },
+      {
+        as: "radio",
+        size: "sm",
+        class: "h-4! w-4! min-h-0! px-0! py-0!",
+      },
+      {
+        as: "radio",
+        size: "md",
+        class: "h-5! w-5! min-h-0! px-0! py-0!",
+      },
+      {
+        as: "radio",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! px-0! py-0!",
+      },
+      // ── checkbox: appearance (border + tick color; fill stays transparent) ─
+      {
+        as: "checkbox",
+        appearance: "default",
+        class:
+          "border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70",
+      },
+      {
+        as: "checkbox",
+        appearance: "warning",
+        class:
+          "border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "error",
+        class:
+          "border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "success",
+        class:
+          "border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "info",
+        class:
+          "border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "violet",
+        class:
+          "border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "amber",
+        class:
+          "border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!",
+      },
+      {
+        as: "checkbox",
+        appearance: "pink",
+        class:
+          "border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+      },
+      {
+        as: "checkbox",
+        appearance: "indigo",
+        class:
+          "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!",
+      },
+      // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
+      {
+        as: "radio",
+        appearance: "default",
+        class:
+          "border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!",
+      },
+      {
+        as: "radio",
+        appearance: "warning",
+        class:
+          "border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "error",
+        class:
+          "border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "success",
+        class:
+          "border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "info",
+        class:
+          "border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "violet",
+        class:
+          "border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "amber",
+        class:
+          "border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "pink",
+        class:
+          "border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!",
+      },
+      {
+        as: "radio",
+        appearance: "indigo",
+        class:
+          "border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!",
+      },
+    ],
+  },
+);

package/src/ui/modal/animated/animations.ts

@@ -0,0 +1,29 @@
+import type { ModalAnimationPresets } from "./types";
+
+export const modalOverlayAnimationPresets: ModalAnimationPresets = {
+  none: {},
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.2 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.96 },
+    transition: { type: "spring", stiffness: 420, damping: 32 },
+  },
+  "slide-up": {
+    initial: { opacity: 0, y: 24 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 16 },
+    transition: { type: "spring", stiffness: 380, damping: 30 },
+  },
+  "slide-down": {
+    initial: { opacity: 0, y: -24 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -16 },
+    transition: { type: "spring", stiffness: 380, damping: 30 },
+  },
+};

package/src/ui/modal/animated/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { ModalContentAnimated } from "./modal-content-animated";
+export type { ModalContentAnimatedProps, ModalAnimation, ModalAnimationPresets, ModalPresetMotionProps } from "./types";
+export { modalOverlayAnimationPresets } from "./animations";

package/src/ui/modal/animated/modal-content-animated.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../../lib/utils";
+import { useFocusManagement } from "../../../hooks/useFocusManagement";
+
+import { modalOverlayAnimationPresets } from "./animations";
+import type { ModalContentAnimatedProps } from "./types";
+import { modalContentVariants, modalOverlayVariants } from "../variants";
+import { useModalContext } from "../modal-base";
+
+export function ModalContentAnimated({
+  className,
+  size,
+  position,
+  appearance,
+  animation = "scale",
+  children,
+  ref,
+  id,
+  style,
+}: ModalContentAnimatedProps) {
+  const { open, setOpen, titleId, descriptionId, contentRef } =
+    useModalContext("ModalContent");
+  const reduceMotion = useReducedMotion();
+  const overlayMotion =
+    modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+  const panelMotion =
+    modalOverlayAnimationPresets[reduceMotion ? "fade" : animation];
+
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef,
+  });
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+
+  if (!portalTarget) {
+    return null;
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {open ? (
+        <div className="fixed inset-0 z-50" data-slot="modal-portal">
+          <motion.button
+            type="button"
+            aria-hidden
+            tabIndex={-1}
+            data-slot="modal-overlay"
+            className={modalOverlayVariants()}
+            onClick={() => setOpen(false)}
+            initial={animation === "none" ? false : overlayMotion.initial}
+            animate={animation === "none" ? undefined : overlayMotion.animate}
+            exit={animation === "none" ? undefined : overlayMotion.exit}
+            transition={overlayMotion.transition}
+          />
+          <motion.div
+            ref={(node) => {
+              contentRef.current = node;
+              if (typeof ref === "function") {
+                ref(node);
+              } else if (ref) {
+                (ref as React.RefObject<HTMLDivElement | null>).current = node;
+              }
+            }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            data-slot="modal-content"
+            tabIndex={-1}
+            className={cn(
+              modalContentVariants({ size, position, appearance }),
+              className,
+            )}
+            initial={animation === "none" ? false : panelMotion.initial}
+            animate={animation === "none" ? undefined : panelMotion.animate}
+            exit={animation === "none" ? undefined : panelMotion.exit}
+            transition={panelMotion.transition}
+            id={id}
+            style={style}
+          >
+            {children}
+          </motion.div>
+        </div>
+      ) : null}
+    </AnimatePresence>,
+    portalTarget,
+  );
+}
+
+ModalContentAnimated.displayName = "ModalContent";

package/src/ui/modal/animated/types.ts

@@ -0,0 +1,23 @@
+import { HTMLMotionProps } from "framer-motion";
+import type { ModalContentProps } from "../types";
+
+export type ModalAnimation =
+  | "none"
+  | "fade"
+  | "scale"
+  | "slide-up"
+  | "slide-down";
+
+export type ModalContentAnimatedProps = ModalContentProps & {
+  animation?: ModalAnimation;
+};
+
+export type ModalPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "exit" | "transition"
+>;
+
+export type ModalAnimationPresets = Record<
+  ModalAnimation,
+  ModalPresetMotionProps
+>;

package/src/ui/modal/index.ts

@@ -0,0 +1,21 @@
+"use client";
+
+export { Modal } from "./modal";
+export {
+  ModalTrigger,
+  ModalContent,
+  ModalTitle,
+  ModalBody,
+  ModalHeader,
+  ModalDescription,
+  ModalClose,
+  ModalFooter
+} from "./modal-base";
+export type {
+  ModalContentProps,
+  ModalProps,
+  ModalSectionProps,
+  ModalTriggerProps,
+  ModalContentVariantProps,
+} from "./types";
+export { modalContentVariants, modalOverlayVariants } from "./variants";