@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-DOHXBNOP.js

@@ -0,0 +1,119 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DatePicker/DatePicker.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { DayPicker } from "react-day-picker";
+import { format } from "date-fns";
+import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex justify-center pt-1 relative items-center",
+  caption_label: "text-sm font-medium",
+  nav: "flex items-center gap-1",
+  button_previous: "absolute left-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  button_next: "absolute right-1 inline-flex h-7 w-7 items-center justify-center rounded-md border border-[var(--color-border-default)] hover:bg-[var(--color-bg-subtle)] disabled:pointer-events-none disabled:opacity-50",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-text-muted)] rounded-md w-8 font-normal text-[0.8rem] flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: cn(
+    "relative p-0 text-center text-sm flex-1",
+    "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+    "[&:has([aria-selected].day-outside)]:bg-[var(--color-bg-subtle)]/50",
+    "[&:has([aria-selected])]:bg-[var(--color-bg-subtle)]",
+    "first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
+    "focus-within:relative focus-within:z-20"
+  ),
+  day_button: cn(
+    "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
+    "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+    "aria-selected:opacity-100"
+  ),
+  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)] hover:text-white focus:bg-[var(--color-fill-primary)] focus:text-white",
+  today: "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)]",
+  outside: "text-[var(--color-text-muted)] opacity-50",
+  disabled: "text-[var(--color-text-muted)] opacity-50",
+  hidden: "invisible"
+};
+var DatePicker = React.forwardRef(
+  function DatePicker2({
+    value,
+    onChange,
+    placeholder = "Pick a date",
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const display = value ? format(value, "PP") : placeholder;
+    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id,
+          disabled,
+          "aria-label": ariaLabel ? `${ariaLabel}: ${display}` : display,
+          className: cn(
+            "inline-flex h-9 w-full items-center justify-start gap-2 rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
+            "hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            !value && "text-[var(--color-text-muted)]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+            value ? format(value, "PP") : placeholder
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+        RadixPopover.Content,
+        {
+          align: "start",
+          className: cn(
+            "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+          ),
+          children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "single",
+              selected: value,
+              onSelect: (date) => {
+                onChange?.(date);
+                setOpen(false);
+              },
+              startMonth: minDate,
+              endMonth: maxDate,
+              initialFocus: true,
+              showOutsideDays: true,
+              className: "p-3",
+              classNames: calendarClassNames,
+              components: {
+                Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
+              }
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export {
+  DatePicker
+};

package/dist/chunk-DR2Y3PIT.js

@@ -0,0 +1,91 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/FilterChip/FilterChip.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FilterChip = React.forwardRef(
+  ({ className, selected = false, count, onRemove, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors",
+          selected ? "bg-[var(--color-fill-accent)] text-white border-[var(--color-fill-accent)]" : "bg-[var(--color-bg-subtle)] text-[var(--color-text-primary)] border-[var(--color-border-default)] hover:bg-[var(--color-bg-muted)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref,
+              type: "button",
+              className: cn(
+                "inline-flex items-center gap-1 bg-transparent border-0 p-0 m-0 cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)] rounded-sm",
+                selected ? "text-white" : "text-[var(--color-text-primary)]",
+                className
+              ),
+              "aria-pressed": selected,
+              ...props,
+              children: [
+                children,
+                count !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-full text-xs font-semibold px-1.5 min-w-[1.25rem] h-5",
+                      selected ? "bg-white/20 text-white" : "bg-[var(--color-bg-muted)] text-[var(--color-text-muted)]"
+                    ),
+                    children: count
+                  }
+                )
+              ]
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove filter",
+              onClick: (e) => {
+                e.stopPropagation();
+                onRemove();
+              },
+              className: cn(
+                "inline-flex items-center justify-center rounded-full w-4 h-4 text-xs transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-1",
+                selected ? "text-white hover:bg-white/20" : "text-[var(--color-text-muted)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "10",
+                  height: "10",
+                  viewBox: "0 0 10 10",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M8 2L2 8M2 2l6 6",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FilterChip.displayName = "FilterChip";
+
+export {
+  FilterChip
+};

package/dist/chunk-ELC2NBGH.js

@@ -0,0 +1,89 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Table/Table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })
+);
+Root.displayName = "Table.Root";
+var Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+Header.displayName = "Table.Header";
+var Body = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+Body.displayName = "Table.Body";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-[var(--color-bg-subtle)] font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "Table.Footer";
+var Row = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--color-border-default)] transition-colors hover:bg-[var(--color-bg-subtle)]/50 data-[state=selected]:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Row.displayName = "Table.Row";
+var Head = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-4 text-left align-middle font-medium text-[var(--color-text-muted)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+Head.displayName = "Table.Head";
+var Cell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+Cell.displayName = "Table.Cell";
+var Caption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-[var(--color-text-muted)]", className),
+    ...props
+  }
+));
+Caption.displayName = "Table.Caption";
+var Table = {
+  Root,
+  Header,
+  Body,
+  Footer: TableFooter,
+  Row,
+  Head,
+  Cell,
+  Caption
+};
+
+export {
+  Table
+};

package/dist/chunk-EV43I5J6.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-EVCTOIRS.js

@@ -0,0 +1,66 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Tabs/Tabs.tsx
+import * as React from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { jsx } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-2", className), ...props })
+);
+Root2.displayName = "Tabs.Root";
+var List2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixTabs.List,
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-start overflow-x-auto rounded-lg bg-[var(--color-bg-subtle)] p-1 text-[var(--color-text-muted)] gap-0.5",
+        className
+      ),
+      ...props
+    }
+  )
+);
+List2.displayName = "Tabs.List";
+var Trigger2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixTabs.Trigger,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=active]:bg-[var(--color-bg-default)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:shadow-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Trigger2.displayName = "Tabs.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixTabs.Content,
+    {
+      ref,
+      className: cn(
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)] focus-visible:ring-offset-2 ring-offset-[var(--color-ring-offset)]",
+        className,
+        // Radix hides inactive panels with the `hidden` attribute, which any
+        // display class (`flex`, `md:grid`…) overrides. !important always wins.
+        "data-[state=inactive]:!hidden"
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "Tabs.Content";
+var Tabs = { Root: Root2, List: List2, Trigger: Trigger2, Content: Content2 };
+
+export {
+  Tabs
+};

package/dist/chunk-FS4XKWFA.js

@@ -0,0 +1,308 @@
+'use client';
+
+// src/components/Motion/Fade.tsx
+import * as React2 from "react";
+
+// src/components/Motion/useMotion.ts
+import * as React from "react";
+var DURATION_MS = {
+  instant: 0,
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 500
+};
+var FALLBACK_MARGIN_MS = 50;
+function useMotion({
+  visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false
+}) {
+  const [phase, setPhase] = React.useState(
+    visible ? "entered" : "exited"
+  );
+  const rafRef = React.useRef(null);
+  const isMounted = React.useRef(true);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  const prevVisible = React.useRef(visible);
+  React.useEffect(() => {
+    if (prevVisible.current === visible) return;
+    prevVisible.current = visible;
+    if (visible) {
+      setPhase("entering");
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          if (isMounted.current) setPhase("entered");
+        });
+      });
+    } else {
+      setPhase("exiting");
+    }
+  }, [visible]);
+  React.useEffect(() => {
+    if (phase !== "exiting") return;
+    const t = setTimeout(() => setPhase("exited"), DURATION_MS[duration] + FALLBACK_MARGIN_MS);
+    return () => clearTimeout(t);
+  }, [phase, duration]);
+  const handleTransitionEnd = React.useCallback((e) => {
+    if (!isMounted.current) return;
+    if (e && e.target !== e.currentTarget) return;
+    setPhase((prev) => prev === "exiting" ? "exited" : prev);
+  }, []);
+  const mounted = unmountOnExit ? phase !== "exited" : true;
+  const transitionStyle = {
+    transitionDuration: `var(--duration-${duration})`,
+    transitionTimingFunction: `var(--ease-${easing})`,
+    transitionProperty: "opacity, transform"
+  };
+  return { phase, mounted, transitionStyle, handleTransitionEnd };
+}
+
+// src/components/Motion/Fade.tsx
+import { jsx } from "react/jsx-runtime";
+var Fade = React2.forwardRef(function Fade2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const opacity = phase === "entered" ? 1 : 0;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity,
+        willChange: "opacity",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Fade.displayName = "Fade";
+
+// src/components/Motion/Slide.tsx
+import * as React3 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var directionTransform = {
+  up: { from: "translateY(12px)", to: "translateY(0)" },
+  down: { from: "translateY(-12px)", to: "translateY(0)" },
+  left: { from: "translateX(12px)", to: "translateX(0)" },
+  right: { from: "translateX(-12px)", to: "translateX(0)" }
+};
+var Slide = React3.forwardRef(function Slide2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  direction = "up",
+  distance,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const isEntered = phase === "entered";
+  const dt = directionTransform[direction];
+  let fromTransform = dt.from;
+  if (distance) {
+    if (direction === "up") fromTransform = `translateY(${distance})`;
+    if (direction === "down") fromTransform = `translateY(-${distance})`;
+    if (direction === "left") fromTransform = `translateX(${distance})`;
+    if (direction === "right") fromTransform = `translateX(-${distance})`;
+  }
+  return /* @__PURE__ */ jsx2(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered ? dt.to : fromTransform,
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Slide.displayName = "Slide";
+
+// src/components/Motion/Scale.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Scale = React4.forwardRef(function Scale2({
+  in: visible,
+  duration = "fast",
+  easing = "out-expo",
+  unmountOnExit = false,
+  initialScale = 0.95,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const isEntered = phase === "entered";
+  return /* @__PURE__ */ jsx3(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered ? "scale(1)" : `scale(${initialScale})`,
+        transformOrigin: "top center",
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Scale.displayName = "Scale";
+
+// src/components/Motion/Collapse.tsx
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Collapse = React5.forwardRef(function Collapse2({
+  in: visible,
+  duration = "normal",
+  easing = "out",
+  unmountOnExit = false,
+  collapsedHeight = 0,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const innerRef = React5.useRef(null);
+  const [height, setHeight] = React5.useState(visible ? "auto" : 0);
+  const [overflow, setOverflow] = React5.useState(
+    visible ? "visible" : "hidden"
+  );
+  const [mounted, setMounted] = React5.useState(unmountOnExit ? visible : true);
+  const prevVisible = React5.useRef(visible);
+  React5.useEffect(() => {
+    const changed = prevVisible.current !== visible;
+    prevVisible.current = visible;
+    if (!changed) return;
+    let raf1 = 0;
+    let raf2 = 0;
+    if (visible) {
+      setMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        const el = innerRef.current;
+        if (el) {
+          setHeight(el.scrollHeight);
+          setOverflow("hidden");
+        }
+      });
+    } else {
+      const el = innerRef.current;
+      if (el) {
+        setHeight(el.scrollHeight);
+        setOverflow("hidden");
+        raf1 = requestAnimationFrame(() => {
+          raf2 = requestAnimationFrame(() => {
+            setHeight(typeof collapsedHeight === "number" ? collapsedHeight : 0);
+          });
+        });
+      }
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [visible, collapsedHeight]);
+  const finish = React5.useCallback(() => {
+    if (visible) {
+      setHeight("auto");
+      setOverflow("visible");
+    } else if (unmountOnExit) {
+      setMounted(false);
+    }
+  }, [visible, unmountOnExit]);
+  const handleTransitionEnd = React5.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
+      finish();
+    },
+    [finish]
+  );
+  const firstRender = React5.useRef(true);
+  React5.useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const t = setTimeout(finish, DURATION_MS[duration] + 100);
+    return () => clearTimeout(t);
+  }, [visible, duration, finish]);
+  if (!mounted) return null;
+  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  return /* @__PURE__ */ jsx4(
+    Tag,
+    {
+      ref,
+      style: {
+        maxHeight,
+        overflow,
+        transitionProperty: "max-height",
+        transitionDuration: `var(--duration-${duration})`,
+        transitionTimingFunction: `var(--ease-${easing})`,
+        ...style
+      },
+      onTransitionEnd: handleTransitionEnd,
+      ...rest,
+      children: /* @__PURE__ */ jsx4("div", { ref: innerRef, children })
+    }
+  );
+});
+Collapse.displayName = "Collapse";
+
+export {
+  Fade,
+  Slide,
+  Scale,
+  Collapse
+};