@nexus-cross/design-system 1.0.3-beta.1

package/dist/chunks/chunk-FA2OPP3U.mjs

@@ -0,0 +1,140 @@
+import { cn } from './chunk-XALPBGSC.mjs';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var selectTriggerVariants = cva(
+  [
+    "nx:relative",
+    "nx:flex nx:h-10 nx:items-center nx:justify-between nx:rounded nx:border nx:bg-surface-default nx:border-border-default",
+    "nx:placeholder:text-text-tertiary",
+    "nx:disabled:cursor-not-allowed nx:disabled:opacity-50",
+    "nx:hover:border-border-strong nx:transition-all nx:duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "nx:bg-surface-hover",
+        outline: "nx:bg-surface-default"
+      },
+      size: {
+        sm: "nx:w-16",
+        md: "nx:w-32",
+        lg: "nx:w-48",
+        full: "nx:w-full"
+      }
+    },
+    defaultVariants: { variant: "default", size: "full" }
+  }
+);
+var selectContentVariants = cva(
+  [
+    "nx:relative nx:z-50 nx:max-h-96 nx:overflow-hidden nx:rounded nx:border nx:bg-surface-default nx:border-border-default nx:shadow-lg",
+    "nx:data-[state=open]:animate-in nx:data-[state=closed]:animate-out",
+    "nx:data-[state=closed]:fade-out-0 nx:data-[state=open]:fade-in-0",
+    "nx:data-[state=closed]:zoom-out-95 nx:data-[state=open]:zoom-in-95",
+    "nx:data-[side=bottom]:slide-in-from-top-2 nx:data-[side=left]:slide-in-from-right-2",
+    "nx:data-[side=right]:slide-in-from-left-2 nx:data-[side=top]:slide-in-from-bottom-2"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "nx:w-16",
+        md: "nx:w-32",
+        lg: "nx:w-48",
+        full: "nx:w-[var(--radix-popper-anchor-width)]"
+      }
+    },
+    defaultVariants: { size: "full" }
+  }
+);
+var ChevronDown = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+var Select = ({
+  children,
+  value,
+  onValueChange,
+  placeholder,
+  disabled,
+  size,
+  variant,
+  className = "",
+  triggerClassName = "",
+  displayComponent
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Root,
+    {
+      value,
+      onValueChange,
+      disabled,
+      onOpenChange: setIsOpen,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            selectTriggerVariants({ size, variant }),
+            displayComponent && "nx:justify-end",
+            className
+          ),
+          children: [
+            displayComponent && /* @__PURE__ */ jsx("div", { className: "nx:absolute nx:top-0 nx:left-0 nx:flex nx:h-full nx:w-[calc(100%-30px)] nx:items-center", children: displayComponent }),
+            /* @__PURE__ */ jsxs(
+              SelectPrimitive.Trigger,
+              {
+                className: cn(
+                  "nx:flex nx:h-full nx:w-full nx:flex-row-reverse nx:items-center nx:justify-between nx:rounded nx:px-3 nx:py-2 nx:focus:outline-none",
+                  triggerClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn(
+                        "nx:size-3 nx:opacity-50 nx:transition-transform nx:duration-200",
+                        isOpen && "nx:rotate-180"
+                      )
+                    }
+                  ) }),
+                  !displayComponent && /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+              SelectPrimitive.Content,
+              {
+                className: cn(selectContentVariants({ size })),
+                position: "popper",
+                children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "nx:p-1", children })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+var SelectItem = ({
+  children,
+  value,
+  disabled,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Item,
+  {
+    value,
+    disabled,
+    className: cn(
+      "nx:relative nx:flex nx:w-full nx:cursor-pointer nx:items-center nx:rounded nx:px-3 nx:py-2 nx:transition-colors nx:outline-none nx:select-none",
+      "nx:hover:bg-surface-hover",
+      "nx:focus:bg-surface-hover",
+      "nx:data-[disabled]:pointer-events-none nx:data-[disabled]:opacity-50",
+      "nx:data-[highlighted]:bg-surface-hover",
+      className
+    ),
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+  }
+);
+
+export { Select, SelectItem, selectContentVariants, selectTriggerVariants };

package/dist/chunks/chunk-FHPHDK3O.mjs

@@ -0,0 +1,89 @@
+import { cn } from './chunk-XALPBGSC.mjs';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function calcTimeLeft(endTimestamp) {
+  const total = Math.max(0, endTimestamp - Date.now());
+  const isFinished = total <= 0;
+  return {
+    days: Math.floor(total / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(total / (1e3 * 60 * 60) % 24),
+    minutes: Math.floor(total / (1e3 * 60) % 60),
+    seconds: Math.floor(total / 1e3 % 60),
+    total,
+    isFinished
+  };
+}
+function useCountdown(endTimestamp, onEnd) {
+  const [timeLeft, setTimeLeft] = React.useState(() => calcTimeLeft(endTimestamp));
+  const onEndRef = React.useRef(onEnd);
+  onEndRef.current = onEnd;
+  React.useEffect(() => {
+    setTimeLeft(calcTimeLeft(endTimestamp));
+    const id = setInterval(() => {
+      const next = calcTimeLeft(endTimestamp);
+      setTimeLeft(next);
+      if (next.isFinished) {
+        clearInterval(id);
+        onEndRef.current?.();
+      }
+    }, 1e3);
+    const handleVisibility = () => {
+      if (!document.hidden) setTimeLeft(calcTimeLeft(endTimestamp));
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      clearInterval(id);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [endTimestamp]);
+  return timeLeft;
+}
+var pad = (n) => n.toString().padStart(2, "0");
+var Countdown = React.forwardRef(
+  ({
+    endTimestamp,
+    separator = ":",
+    showDays = true,
+    labels,
+    onEnd,
+    render,
+    className,
+    ...props
+  }, ref) => {
+    const timeLeft = useCountdown(endTimestamp, onEnd);
+    if (render) {
+      return /* @__PURE__ */ jsx("div", { ref, className, ...props, children: render(timeLeft) });
+    }
+    const units = [];
+    if (showDays && timeLeft.days > 0) {
+      units.push({ value: timeLeft.days.toString(), label: labels?.days });
+    }
+    units.push(
+      { value: pad(timeLeft.hours), label: labels?.hours },
+      { value: pad(timeLeft.minutes), label: labels?.minutes },
+      { value: pad(timeLeft.seconds), label: labels?.seconds }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("nx:inline-flex nx:items-center nx:gap-1 nx:font-mono nx:tabular-nums", className),
+        role: "timer",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        ...props,
+        children: units.map((unit, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 && separator && /* @__PURE__ */ jsx("span", { className: "nx:text-text-tertiary nx:mx-0.5", children: separator }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            unit.value,
+            unit.label && /* @__PURE__ */ jsx("span", { className: "nx:text-text-tertiary nx:text-xs nx:ml-0.5", children: unit.label })
+          ] })
+        ] }, i))
+      }
+    );
+  }
+);
+Countdown.displayName = "Countdown";
+
+export { Countdown, useCountdown };