@nexub/react 1.0.0 → 1.1.0

package/dist/chunk-S344IRK4.js

@@ -0,0 +1,63 @@
+'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
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "Tabs.Content";
+var Tabs = { Root: Root2, List: List2, Trigger: Trigger2, Content: Content2 };
+
+export {
+  Tabs
+};

package/dist/chunk-SZKUSLHI.js

@@ -0,0 +1,176 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import * as React from "react";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = RadixDropdownMenu.Root;
+var Trigger2 = RadixDropdownMenu.Trigger;
+var Portal2 = RadixDropdownMenu.Portal;
+var Group2 = RadixDropdownMenu.Group;
+var RadioGroup2 = RadixDropdownMenu.RadioGroup;
+var Sub2 = RadixDropdownMenu.Sub;
+var Content2 = React.forwardRef(
+  function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Content2.displayName = "DropdownMenu.Content";
+var itemBaseClasses = cn(
+  "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none",
+  "transition-colors hover:bg-[var(--color-bg-subtle)] focus:bg-[var(--color-bg-subtle)]",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+);
+var Item2 = React.forwardRef(
+  function DropdownMenuItem({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Item,
+      {
+        ref,
+        className: cn(itemBaseClasses, className),
+        ...props
+      }
+    );
+  }
+);
+Item2.displayName = "DropdownMenu.Item";
+var Label2 = React.forwardRef(
+  function DropdownMenuLabel({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Label,
+      {
+        ref,
+        className: cn(
+          "px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "DropdownMenu.Label";
+var Separator2 = React.forwardRef(
+  function DropdownMenuSeparator({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixDropdownMenu.Separator,
+      {
+        ref,
+        className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Separator2.displayName = "DropdownMenu.Separator";
+var CheckboxItem2 = React.forwardRef(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.CheckboxItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+CheckboxItem2.displayName = "DropdownMenu.CheckboxItem";
+var RadioItem2 = React.forwardRef(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.RadioItem,
+    {
+      ref,
+      className: cn(itemBaseClasses, "pl-8", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RadixDropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { className: "h-2 w-2 fill-current", viewBox: "0 0 8 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "4" }) }) }) }),
+        children
+      ]
+    }
+  );
+});
+RadioItem2.displayName = "DropdownMenu.RadioItem";
+var SubTrigger2 = React.forwardRef(function DropdownMenuSubTrigger({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixDropdownMenu.SubTrigger,
+    {
+      ref,
+      className: cn(
+        itemBaseClasses,
+        "data-[state=open]:bg-[var(--color-bg-subtle)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
+SubTrigger2.displayName = "DropdownMenu.SubTrigger";
+var SubContent2 = React.forwardRef(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    RadixDropdownMenu.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-[var(--z-popover)] min-w-48 rounded-lg border border-[var(--color-border-default)]",
+        "bg-[var(--color-bg-default)] p-1 shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SubContent2.displayName = "DropdownMenu.SubContent";
+var DropdownMenu = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Item: Item2,
+  Group: Group2,
+  Label: Label2,
+  Separator: Separator2,
+  CheckboxItem: CheckboxItem2,
+  RadioGroup: RadioGroup2,
+  RadioItem: RadioItem2,
+  Sub: Sub2,
+  SubTrigger: SubTrigger2,
+  SubContent: SubContent2
+};
+
+export {
+  DropdownMenu
+};

package/dist/chunk-T4IVMVMQ.js

@@ -0,0 +1,32 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/HelperText/HelperText.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var HelperText = React.forwardRef(
+  ({ className, tone, style, children, ...props }, ref) => {
+    const toneStyle = tone ? { color: `var(--color-text-${tone})` } : {};
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-tone": tone,
+        style: { ...toneStyle, ...style },
+        className: cn(
+          "text-sm text-[var(--color-text-muted)] leading-snug",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+HelperText.displayName = "HelperText";
+
+export {
+  HelperText
+};

package/dist/chunk-TCTFQYLH.js

@@ -0,0 +1,115 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/DateRangePicker/DateRangePicker.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";
+function formatRange(range, placeholder) {
+  if (!range) return placeholder;
+  if (range.from && range.to) {
+    return `${format(range.from, "PP")} \u2013 ${format(range.to, "PP")}`;
+  }
+  if (range.from) return `${format(range.from, "PP")} \u2013 \u2026`;
+  return placeholder;
+}
+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: "relative p-0 text-center text-sm flex-1 focus-within:relative focus-within:z-20",
+  day_button: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-[var(--color-bg-subtle)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring-default)]",
+  selected: "bg-[var(--color-fill-primary)] text-white hover:bg-[var(--color-fill-primary-hover)]",
+  range_start: "rounded-l-md",
+  range_end: "rounded-r-md",
+  range_middle: "aria-selected:bg-[var(--color-bg-subtle)] aria-selected:text-[var(--color-text-primary)] rounded-none",
+  today: "bg-[var(--color-bg-subtle)]",
+  outside: "opacity-50",
+  disabled: "opacity-50",
+  hidden: "invisible"
+};
+var DateRangePicker = React.forwardRef(function DateRangePicker2({
+  value,
+  onChange,
+  placeholder = "Pick a date range",
+  disabled = false,
+  minDate,
+  maxDate,
+  className,
+  id,
+  "aria-label": ariaLabel
+}, ref) {
+  const [open, setOpen] = React.useState(false);
+  const display = formatRange(value, placeholder);
+  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        id,
+        disabled,
+        "aria-label": label,
+        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" }),
+          display
+        ]
+      }
+    ) }),
+    /* @__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: "range",
+            selected: value,
+            onSelect: onChange,
+            numberOfMonths: 2,
+            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 })
+            }
+          }
+        )
+      }
+    ) })
+  ] });
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export {
+  DateRangePicker
+};

package/dist/chunk-U3AEA4BZ.js

@@ -0,0 +1,56 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Link/Link.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ExternalLink } from "@nexub/icons";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var linkVariants = cva(
+  [
+    "inline-flex items-center gap-1 transition-colors",
+    "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"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "text-[var(--color-brand-primary-500)] hover:text-[var(--color-brand-primary-600)]",
+        muted: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+        underlined: "text-[var(--color-brand-primary-500)] underline underline-offset-4 hover:text-[var(--color-brand-primary-600)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Link = React.forwardRef(
+  ({ variant, external = false, asChild, className, children, target, rel, ...rest }, ref) => {
+    const resolvedTarget = external ? "_blank" : target;
+    const resolvedRel = resolvedTarget === "_blank" ? [.../* @__PURE__ */ new Set([...rel?.split(/\s+/).filter(Boolean) ?? [], "noopener", "noreferrer"])].join(" ") : rel;
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(linkVariants({ variant }), className),
+        ...rest,
+        target: resolvedTarget,
+        rel: resolvedRel,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          external && /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" })
+        ] })
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+
+export {
+  linkVariants,
+  Link
+};

package/dist/chunk-U3EGB3JL.js

@@ -0,0 +1,43 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Toggle/Toggle.tsx
+import * as React from "react";
+import * as RadixToggle from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors 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=on]:bg-[var(--color-bg-subtle)] data-[state=on]:text-[var(--color-text-primary)]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)]",
+        outline: "border border-[var(--color-border-default)] bg-transparent hover:bg-[var(--color-bg-subtle)]"
+      },
+      size: {
+        sm: "h-8 px-2.5",
+        md: "h-9 px-3",
+        lg: "h-10 px-4"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+var Toggle = React.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixToggle.Root,
+    {
+      ref,
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+
+export {
+  toggleVariants,
+  Toggle
+};

package/dist/chunk-UALYS4XI.js

@@ -0,0 +1,67 @@
+'use client';
+import {
+  glassSurfaceClass
+} from "./chunk-ROZVVWPV.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Popover/Popover.tsx
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { jsx } from "react/jsx-runtime";
+var Root2 = RadixPopover.Root;
+var Trigger2 = RadixPopover.Trigger;
+var Portal2 = RadixPopover.Portal;
+var Close2 = RadixPopover.Close;
+var Content2 = React.forwardRef(
+  function PopoverContent({ className, sideOffset = 4, surface = "solid", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-[var(--z-popover)] rounded-lg border border-[var(--color-border-default)]",
+          "bg-[var(--color-bg-default)] p-4 shadow-md",
+          "outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          surface === "glass" && glassSurfaceClass,
+          className
+        ),
+        "data-material": surface === "glass" ? "glass" : void 0,
+        ...props
+      }
+    );
+  }
+);
+Content2.displayName = "Popover.Content";
+var Arrow2 = React.forwardRef(
+  function PopoverArrow({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      RadixPopover.Arrow,
+      {
+        ref,
+        className: cn("fill-[var(--color-border-default)]", className),
+        ...props
+      }
+    );
+  }
+);
+Arrow2.displayName = "Popover.Arrow";
+var Popover = {
+  Root: Root2,
+  Trigger: Trigger2,
+  Portal: Portal2,
+  Content: Content2,
+  Arrow: Arrow2,
+  Close: Close2
+};
+
+export {
+  Popover
+};