@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.7

package/dist/chunk-2BADJLMV.js

@@ -0,0 +1,117 @@
+import { buttonVariants } from './chunk-7KIDDF3I.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { ChevronLeftIcon } from './chunk-G5YLGJXR.js';
+import { ChevronRightIcon } from './chunk-G24VV5NO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useTranslations } from 'next-intl';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var NS = "components.pagination";
+function Pagination({ className, ...props }) {
+  const t = useTranslations(NS);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": t("pagination"),
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      className: cn("flex flex-row items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props });
+}
+var PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({ variant: "ghost", size }),
+      isActive && "pagination-active",
+      "text-text-primary transition-[transform,background-color] duration-150 hover:scale-105 active:scale-95 motion-reduce:hover:scale-100 motion-reduce:active:scale-100",
+      className
+    ),
+    ...props
+  }
+);
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  const t = useTranslations(NS);
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": t("goToPreviousPage"),
+      size: "default",
+      className: cn("gap-1.5 pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { children: t("previous") })
+      ]
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  const t = useTranslations(NS);
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": t("goToNextPage"),
+      size: "default",
+      className: cn("gap-1.5 pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: t("next") }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+      ]
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  const t = useTranslations(NS);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("flex h-9 w-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(EllipsisIcon, { size: 16, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("morePages") })
+      ]
+    }
+  );
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/chunk-35EX5FP5.js

@@ -0,0 +1,106 @@
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { ChevronRightIcon } from './chunk-G24VV5NO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { Slot } from '@radix-ui/react-slot';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Breadcrumb({
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props });
+}
+function BreadcrumbList({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-text-tertiary sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  asChild,
+  className,
+  ref,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn("transition-colors duration-150 hover:text-text-primary hover:underline hover:decoration-accent/40 hover:underline-offset-4", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-current": "page",
+      className: cn("font-medium text-text-primary", className),
+      ...props
+    }
+  );
+}
+var BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("[&>svg]:size-3.5", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+  }
+);
+var BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex h-9 w-9 items-center justify-center rounded-md transition-colors duration-150 hover:bg-surface-hover", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/chunk-5PORR6LE.js

@@ -0,0 +1,60 @@
+import { useSafeTimeout } from './chunk-MDAYDDTC.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { CopyIcon } from './chunk-TV4RSQH4.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-tomorrow.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CodeBlock({
+  code,
+  language = "javascript",
+  filename,
+  className,
+  ...props
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const setSafeTimeout = useSafeTimeout();
+  React.useEffect(() => {
+    Prism.highlightAll();
+  }, [code, language]);
+  const onCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setSafeTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-lg glass-panel",
+        className
+      ),
+      ...props,
+      children: [
+        !!filename && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border/30 bg-surface-hover px-4 py-2 text-xs text-text-tertiary", children: /* @__PURE__ */ jsx("span", { children: filename }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "icon",
+              variant: "ghost",
+              className: "absolute right-1 top-1 text-text-tertiary hover:bg-surface-hover hover:text-text-secondary",
+              onClick: onCopy,
+              children: [
+                copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Copy code" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "overflow-x-auto p-4", children: /* @__PURE__ */ jsx("pre", { className: "!m-0 !bg-transparent !p-0", children: /* @__PURE__ */ jsx("code", { className: `language-${language}`, children: code }) }) })
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { CodeBlock };

package/dist/chunk-5PZ4VR2D.js

@@ -0,0 +1,142 @@
+import { useSafeTimeout } from './chunk-MDAYDDTC.js';
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { Separator } from './chunk-CUZJIDU7.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, fadeInUp, scaleIn } from './chunk-PD2YEH3H.js';
+import { SparklesIcon } from './chunk-CGUCH322.js';
+import { MailIcon } from './chunk-XQ2UDMPO.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { useReducedMotion } from 'motion/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var MODE_ICONS = {
+  reset: /* @__PURE__ */ jsx(MailIcon, { size: 32, className: "text-text-secondary" }),
+  "magic-link": /* @__PURE__ */ jsx(SparklesIcon, { size: 32, className: "text-accent" })
+};
+var INSTRUCTION_STEPS = ["step1", "step2", "step3"];
+function PasswordRecoveryBlock({
+  className,
+  mode = "reset",
+  onSubmit,
+  onBackToLogin,
+  title,
+  description,
+  buttonText,
+  successTitle
+}) {
+  const prefersReduced = useReducedMotion();
+  const tShared = useTranslations("auth.passwordRecovery.shared");
+  const tMode = useTranslations(mode === "magic-link" ? "auth.passwordRecovery.magicLink" : "auth.passwordRecovery.reset");
+  const [email, setEmail] = React.useState("");
+  const [state, setState] = React.useState("entry");
+  const [resendState, setResendState] = React.useState("idle");
+  const setSafeTimeout = useSafeTimeout();
+  const resolvedTitle = title ?? tMode("title");
+  const resolvedDescription = description ?? tMode("description");
+  const resolvedButtonText = buttonText ?? tMode("button");
+  const resolvedSuccessTitle = successTitle ?? tShared("checkEmail");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email) return;
+    setState("loading");
+    onSubmit?.(email);
+    setSafeTimeout(() => setState("success"), 1500);
+  };
+  const handleResend = () => {
+    setResendState("sending");
+    onSubmit?.(email);
+    setSafeTimeout(() => {
+      setResendState("sent");
+      setSafeTimeout(() => setResendState("idle"), 3e3);
+    }, 1e3);
+  };
+  if (state === "success") {
+    return /* @__PURE__ */ jsx(m.div, { ...prefersReduced ? {} : fadeInUp, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(MailIcon, { size: 48, className: "text-accent" }) }),
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: resolvedSuccessTitle }),
+        /* @__PURE__ */ jsx(CardDescription, { children: tMode("successDescription") })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: email }) }),
+        /* @__PURE__ */ jsx("ol", { className: "space-y-2 text-sm text-text-secondary list-none", children: INSTRUCTION_STEPS.map((key) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "text-success mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: tMode(`instructions.${key}`) })
+        ] }, key)) }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-text-tertiary", children: tShared("didNotReceiveEmail") }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleResend,
+              disabled: resendState === "sending",
+              children: [
+                resendState === "sending" && /* @__PURE__ */ jsx(Spinner, { className: "mr-2" }),
+                resendState === "sent" ? tShared("emailResent") : tShared("resendEmail")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBackToLogin,
+          className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+          children: tShared("backToLogin")
+        }
+      ) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(m.div, { ...prefersReduced ? {} : scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2", children: MODE_ICONS[mode] }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: resolvedTitle }),
+      /* @__PURE__ */ jsx(CardDescription, { children: resolvedDescription })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "recovery-email", children: tShared("email") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: "email",
+            id: "recovery-email",
+            type: "email",
+            placeholder: tShared("emailPlaceholder"),
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            autoComplete: "email",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "accent", className: "w-full", disabled: state === "loading", children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "mr-2" }),
+        tShared("sending")
+      ] }) : resolvedButtonText })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBackToLogin,
+        className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+        children: mode === "magic-link" ? tMode("backToPassword") : tShared("backToLogin")
+      }
+    ) })
+  ] }) });
+}
+
+export { PasswordRecoveryBlock };

package/dist/chunk-5UESKK6S.js

@@ -0,0 +1,76 @@
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var audioWaveformVariants = cva(
+  "flex items-center",
+  {
+    variants: {
+      variant: {
+        default: "[--waveform-color:rgb(var(--color-text-primary))]",
+        accent: "[--waveform-color:rgb(var(--color-accent))]",
+        success: "[--waveform-color:rgb(var(--color-success))]"
+      },
+      size: {
+        sm: "h-4 gap-[2px]",
+        default: "h-8 gap-1",
+        lg: "h-12 gap-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function AudioWaveform({
+  className,
+  variant,
+  size,
+  bars = 24,
+  active = false,
+  barWidth = 3,
+  ref,
+  ...props
+}) {
+  const randomOffsetsRef = React.useRef(null);
+  if (randomOffsetsRef.current === null || randomOffsetsRef.current.length !== bars) {
+    randomOffsetsRef.current = Array.from({ length: bars }, (_, i) => (i * 7 + 3) % 20);
+  }
+  const randomOffsets = randomOffsetsRef.current;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(audioWaveformVariants({ variant, size }), className),
+      role: "img",
+      "aria-label": active ? "Audio waveform active" : "Audio waveform inactive",
+      ...props,
+      children: Array.from({ length: bars }).map((_, i) => {
+        const activeHeight = 20 + Math.sin(i * 0.7) * 60 + randomOffsets[i];
+        const activeOpacity = 0.6 + Math.sin(i * 0.5) * 0.4;
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "rounded-full bg-[var(--waveform-color)] transition-all",
+              active && "animate-pulse"
+            ),
+            style: {
+              width: `${barWidth}px`,
+              height: active ? `${activeHeight.toFixed(3)}%` : "15%",
+              opacity: active ? activeOpacity.toFixed(6) : "0.300000",
+              animationDelay: `${i * 75}ms`,
+              animationDuration: `${600 + i % 5 * 200}ms`
+            },
+            "aria-hidden": "true"
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+export { AudioWaveform, audioWaveformVariants };