@nexub/react 1.5.1 → 1.7.0

package/dist/chunk-MLT7SA3T.js

@@ -0,0 +1,171 @@
+'use client';
+import {
+  useMergedRefs
+} from "./chunk-MNEXMMLM.js";
+import {
+  useControllableState
+} from "./chunk-JLUCMNVS.js";
+import {
+  IconButton
+} from "./chunk-CQWYZPPJ.js";
+import {
+  fieldDisabledWithin,
+  fieldFocusWithin
+} from "./chunk-7SXR4PGO.js";
+import {
+  glassSurfaceClass
+} from "./chunk-DEIBF3P7.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/PromptInput/PromptInput.tsx
+import * as React from "react";
+import { ArrowUp } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var fallbackMessages = {
+  promptLabel: "Message",
+  sendMessage: "Send message",
+  stopGenerating: "Stop generating",
+  promptHint: "Press Enter to send, Shift+Enter for a new line"
+};
+var stopIcon = /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-3.5 rounded-shape-min bg-current" });
+var PromptInput = React.forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    onSubmit,
+    onStop,
+    status = "idle",
+    maxRows = 8,
+    attachments,
+    actions,
+    surface = "solid",
+    label,
+    messages: messagesProp,
+    className,
+    textareaClassName,
+    disabled,
+    onKeyDown,
+    id,
+    "aria-describedby": describedBy,
+    ...props
+  }, ref) => {
+    const m = {
+      ...fallbackMessages,
+      ...useNexubMessages(),
+      ...messagesProp
+    };
+    const [value = "", setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange: onValueChange
+    });
+    const hintId = React.useId();
+    const growRef = React.useRef(null);
+    const textareaRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, textareaRef);
+    React.useEffect(() => {
+      growRef.current?.style.setProperty("--nx-max-rows", String(maxRows));
+    }, [maxRows]);
+    const streaming = status === "streaming";
+    const canSubmit = !disabled && status === "idle" && value.trim() !== "";
+    const submit = () => {
+      if (!canSubmit) return;
+      onSubmit?.(value);
+      if (valueProp === void 0) setValue("");
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "Enter" && !e.shiftKey) {
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+        e.preventDefault();
+        submit();
+      } else if (e.key === "Escape" && streaming) {
+        e.preventDefault();
+        onStop?.();
+      }
+    };
+    const textClass = "col-start-1 row-start-1 m-0 px-1 py-1.5 text-body-md max-h-[calc(var(--nx-max-rows,8)*1lh+0.75rem)] whitespace-pre-wrap break-words";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-2 p-3 rounded-shape-overlay border border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] text-[var(--color-on-surface)]",
+          "transition-[border-color,box-shadow] duration-effects-fast ease-effects-fast",
+          fieldFocusWithin,
+          fieldDisabledWithin,
+          surface === "glass" && glassSurfaceClass,
+          className
+        ),
+        "data-material": surface === "glass" ? "glass" : void 0,
+        "data-status": status,
+        children: [
+          attachments && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: attachments }),
+          /* @__PURE__ */ jsxs("div", { ref: growRef, className: "grid", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(textClass, "invisible overflow-hidden pointer-events-none"), children: value + "\u200B" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: mergedRef,
+                id,
+                rows: 1,
+                value,
+                onChange: (e) => setValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                disabled,
+                "aria-label": label ?? m.promptLabel,
+                "aria-describedby": describedBy ? `${hintId} ${describedBy}` : hintId,
+                className: cn(
+                  textClass,
+                  "w-full resize-none overflow-y-auto bg-transparent border-0 text-inherit",
+                  "placeholder:text-[var(--color-on-surface-muted)] focus-visible:outline-none disabled:cursor-not-allowed",
+                  textareaClassName
+                ),
+                ...props
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: m.promptHint }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: actions }),
+            streaming ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                label: m.stopGenerating,
+                variant: "subtle",
+                disabled,
+                onClick: onStop,
+                className: "bg-[var(--color-secondary-container)] text-[var(--color-on-secondary-container)]",
+                children: stopIcon
+              }
+            ) : /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                label: m.sendMessage,
+                variant: "solid",
+                disabled,
+                "aria-disabled": !canSubmit || void 0,
+                onClick: submit,
+                className: "aria-disabled:bg-[color-mix(in_srgb,var(--color-on-surface)_12%,transparent)] aria-disabled:text-[var(--color-text-disabled)]",
+                children: /* @__PURE__ */ jsx(ArrowUp, { size: "md" })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+PromptInput.displayName = "PromptInput";
+
+export {
+  PromptInput
+};

package/dist/chunk-MNEXMMLM.js

@@ -0,0 +1,23 @@
+'use client';
+
+// src/hooks/useMergedRefs.ts
+import { useCallback, useRef } from "react";
+function setRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    ref.current = value;
+  }
+}
+function useMergedRefs(...refs) {
+  const refsRef = useRef(refs);
+  refsRef.current = refs;
+  return useCallback((node) => {
+    for (const ref of refsRef.current) setRef(ref, node);
+  }, []);
+}
+
+export {
+  useMergedRefs
+};

package/dist/{chunk-PVTACENM.js → chunk-MTK3GHDQ.js}

@@ -11,8 +11,8 @@ var PageHeader = React.forwardRef(
     breadcrumb && /* @__PURE__ */ jsx("div", { children: breadcrumb }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)] truncate", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-text-muted)]", children: description })
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[var(--color-on-surface)] truncate", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-on-surface-muted)]", children: description })
       ] }),
       actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
     ] })

package/dist/chunk-MYP5ZTC3.js

@@ -0,0 +1,169 @@
+'use client';
+import {
+  floatingSurface
+} from "./chunk-FLZD7HQY.js";
+import {
+  field,
+  fieldFocusVisible
+} from "./chunk-7SXR4PGO.js";
+import {
+  useIntlLocale,
+  useLocale,
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.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";
+function formatDate(date, locale, dateLocale) {
+  if (dateLocale) return format(date, "PP", { locale: dateLocale });
+  return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
+}
+function CalendarChevron({ orientation, ...rest }) {
+  const { dir } = useLocale();
+  const flip = dir === "rtl";
+  if (orientation === "left" || orientation === "right") {
+    const Icon = orientation === "left" !== flip ? ChevronLeft : ChevronRight;
+    return /* @__PURE__ */ jsx(Icon, { size: "xs", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest });
+}
+function useCalendarLocale(localeProp) {
+  const { dir, dateLocale } = useLocale();
+  const messages = useNexubMessages();
+  const intlLocale = useIntlLocale();
+  const locale = localeProp ?? dateLocale;
+  const labels = React.useMemo(() => {
+    const day = (date, modifiers, withSelected) => {
+      let label = format(date, "PPPP", locale ? { locale } : void 0);
+      if (modifiers?.today) label = messages.todayDate(label);
+      if (withSelected && modifiers?.selected) label = messages.selectedDate(label);
+      return label;
+    };
+    return {
+      labelPrevious: () => messages.previousMonth,
+      labelNext: () => messages.nextMonth,
+      labelNav: () => messages.calendarNavigation,
+      labelDayButton: (date, modifiers) => day(date, modifiers, true),
+      labelGridcell: (date, modifiers) => day(date, modifiers, false)
+    };
+  }, [messages, locale]);
+  return {
+    dayPickerProps: { locale, dir, labels, components: { Chevron: CalendarChevron } },
+    format: (date) => formatDate(date, intlLocale, locale)
+  };
+}
+var calendarClassNames = {
+  months: "flex flex-col sm:flex-row gap-4",
+  month: "flex flex-col gap-4",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-label-lg text-[var(--color-on-surface)]",
+  // v9 renders nav beside the months, not in the caption: pin it to the caption row.
+  nav: "pointer-events-none absolute inset-x-3 top-3 flex h-8 items-center justify-between",
+  button_previous: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  button_next: "nx-state-layer pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full text-[var(--color-on-surface)] disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "text-[var(--color-on-surface-muted)] w-8 text-label-sm flex-1 text-center",
+  week: "flex w-full mt-2",
+  day: "relative flex flex-1 justify-center p-0 text-center focus-within:z-20",
+  day_button: cn(
+    // Capsule day with a state layer; focus = the global ring. The transparent
+    // border carries today's primary outline.
+    "nx-state-layer inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-body-sm text-[var(--color-on-surface)]",
+    "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]"
+  ),
+  selected: "[&>button]:bg-[var(--color-primary)] [&>button]:text-[var(--color-on-primary)]",
+  today: "[&>button]:border-[var(--color-primary)]",
+  outside: "[&:not([data-selected]):not([data-disabled])>button]:text-[var(--color-on-surface-muted)]",
+  disabled: "",
+  hidden: "invisible"
+};
+var DatePicker = React.forwardRef(
+  function DatePicker2({
+    value,
+    onChange,
+    placeholder: placeholderProp,
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    locale: localeProp
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const messages = useNexubMessages();
+    const placeholder = placeholderProp ?? messages.pickDate;
+    const calendar = useCalendarLocale(localeProp);
+    const display = value ? calendar.format(value) : 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-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
+            field,
+            fieldFocusVisible,
+            // Open reads like focus: the 2px primary border (as Select).
+            "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+            !value && "text-[var(--color-on-surface-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)] outline-none",
+            floatingSurface,
+            "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+          ),
+          children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "single",
+              selected: value,
+              defaultMonth: value,
+              onSelect: (date) => {
+                onChange?.(date);
+                setOpen(false);
+              },
+              startMonth: minDate,
+              endMonth: maxDate,
+              initialFocus: true,
+              showOutsideDays: true,
+              className: "relative p-3",
+              classNames: calendarClassNames,
+              ...calendar.dayPickerProps
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export {
+  useCalendarLocale,
+  DatePicker
+};

package/dist/chunk-NA5UMOE5.js

@@ -0,0 +1,55 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Tag/Tag.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var tagVariants = cva(
+  "inline-flex items-center rounded-shape-min font-medium select-none whitespace-nowrap",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0.5 text-xs",
+        md: "px-2 py-0.5 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      },
+      tone: {
+        neutral: "bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]",
+        info: "bg-[var(--color-info-container)] text-[var(--color-on-info-container)]",
+        success: "bg-[var(--color-success-container)] text-[var(--color-on-success-container)]",
+        warning: "bg-[var(--color-warning-container)] text-[var(--color-on-warning-container)]",
+        danger: "bg-[var(--color-error-container)] text-[var(--color-on-error-container)]",
+        leap: "bg-[var(--color-leap-container)] text-[var(--color-on-leap-container)]",
+        bookub: "bg-[var(--color-bookub-container)] text-[var(--color-on-bookub-container)]",
+        payub: "bg-[var(--color-payub-container)] text-[var(--color-on-payub-container)]",
+        founderub: "bg-[var(--color-founderub-container)] text-[var(--color-on-founderub-container)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "neutral"
+    }
+  }
+);
+var Tag = React.forwardRef(
+  ({ className, size, tone = "neutral", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(tagVariants({ size, tone }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+export {
+  tagVariants,
+  Tag
+};

package/dist/chunk-NAJKIBU2.js

@@ -0,0 +1,163 @@
+'use client';
+import {
+  useLocale,
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/FileUpload/FileUpload.tsx
+import * as React from "react";
+import { Upload, X } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatFileSize(bytes, locale) {
+  const [value, unit] = bytes < 1024 ? [bytes, "byte"] : bytes < 1024 * 1024 ? [bytes / 1024, "kilobyte"] : [bytes / (1024 * 1024), "megabyte"];
+  return new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: 1 }).format(value);
+}
+var FileUploadContext = React.createContext(null);
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload parts must be used inside FileUpload.Root");
+  return ctx;
+}
+var Root = React.forwardRef(
+  ({ className, accept, maxFiles, onFilesChange, children, ...props }, ref) => {
+    const [files, setFiles] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const addFiles = React.useCallback(
+      (newFiles) => {
+        setFiles((prev) => {
+          const next = [...prev, ...newFiles].slice(0, maxFiles);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [maxFiles, onFilesChange]
+    );
+    const removeFile = React.useCallback(
+      (index) => {
+        setFiles((prev) => {
+          const next = prev.filter((_, i) => i !== index);
+          onFilesChange?.(next);
+          return next;
+        });
+      },
+      [onFilesChange]
+    );
+    const contextValue = React.useMemo(
+      () => ({ accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging }),
+      [accept, maxFiles, onFilesChange, files, addFiles, removeFile, isDragging, setIsDragging]
+    );
+    return /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props, children }) });
+  }
+);
+Root.displayName = "FileUpload.Root";
+var Dropzone = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { accept, addFiles, isDragging, setIsDragging } = useFileUpload();
+    const messages = useNexubMessages();
+    const inputRef = React.useRef(null);
+    function handleDrop(e) {
+      e.preventDefault();
+      setIsDragging(false);
+      const dropped = Array.from(e.dataTransfer.files);
+      addFiles(dropped);
+    }
+    return (
+      // A <label> around the native file input: click, Enter and Space open the
+      // picker natively, the visible text is the accessible name, and the
+      // focus ring follows the input's keyboard focus onto the drop zone.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          onDragOver: (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+          },
+          onDragLeave: () => setIsDragging(false),
+          onDrop: handleDrop,
+          className: cn(
+            // Hover/press = the state layer.
+            "nx-state-layer rounded-shape-container border-2 border-dashed text-center text-[var(--color-on-surface)] transition-colors",
+            "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-[3px] has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
+            isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer flex-col items-center justify-center gap-2 p-8", children: [
+            /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
+            children ?? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
+              " ",
+              messages.orDragAndDrop
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                className: "sr-only",
+                multiple: true,
+                accept: accept?.join(","),
+                onChange: (e) => {
+                  if (e.target.files) addFiles(Array.from(e.target.files));
+                  e.target.value = "";
+                }
+              }
+            )
+          ] })
+        }
+      )
+    );
+  }
+);
+Dropzone.displayName = "FileUpload.Dropzone";
+var List = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { files } = useFileUpload();
+    if (files.length === 0) return null;
+    return /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col gap-2", className), ...props });
+  }
+);
+List.displayName = "FileUpload.List";
+var Item = React.forwardRef(({ className, index, ...props }, ref) => {
+  const { files, removeFile } = useFileUpload();
+  const messages = useNexubMessages();
+  const { locale } = useLocale();
+  const file = files[index];
+  if (!file) return null;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between gap-3 rounded-shape-container border border-[var(--color-outline-variant)] bg-[var(--color-surface)] p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-on-surface)]", children: file.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: formatFileSize(file.size, locale) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => removeFile(index),
+            "aria-label": messages.removeFile(file.name),
+            className: "nx-state-layer shrink-0 rounded-full p-1 text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors",
+            children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Item.displayName = "FileUpload.Item";
+var FileUpload = { Root, Dropzone, List, Item };
+
+export {
+  FileUpload
+};

package/dist/{chunk-WESZPFBZ.js → chunk-NERAWEIQ.js}

@@ -1,7 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-IK23Q2OF.js";
+} from "./chunk-JHVYI5GK.js";
+import {
+  useNexubMessages
+} from "./chunk-24ZFAXB2.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -13,15 +16,15 @@ import { jsx } from "react/jsx-runtime";
 var PasswordInput = React.forwardRef(
   ({ className, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
+    const messages = useNexubMessages();
     const toggleButton = /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword((prev) => !prev),
-        "aria-label": showPassword ? "Hide password" : "Show password",
+        "aria-label": showPassword ? messages.hidePassword : messages.showPassword,
         className: cn(
-          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+          "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
         children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
       }

package/dist/{chunk-YJ3JQYAN.js → chunk-NGQKBDHA.js}

@@ -1,4 +1,7 @@
 'use client';
+import {
+  toneTextClasses
+} from "./chunk-C6JRJ6JW.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -6,17 +9,6 @@ import {
 // src/components/EyebrowChip/EyebrowChip.tsx
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var toneTextMap = {
-  neutral: "text-[var(--color-neutral-700)]",
-  info: "text-[var(--color-semantic-info-default)]",
-  success: "text-[var(--color-semantic-success-default)]",
-  warning: "text-[var(--color-semantic-warning-default)]",
-  danger: "text-[var(--color-semantic-error-default)]",
-  leap: "text-[var(--color-leap-700)]",
-  bookub: "text-[var(--color-bookub-700)]",
-  payub: "text-[var(--color-payub-700)]",
-  founderub: "text-[var(--color-founderub-700)]"
-};
 var EyebrowChip = React.forwardRef(
   ({ className, tone = "neutral", leadingIcon, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -26,8 +18,8 @@ var EyebrowChip = React.forwardRef(
         className: cn(
           "inline-flex items-center gap-1.5 rounded-full px-3 py-1",
           "text-xs font-semibold uppercase tracking-wider select-none",
-          "bg-[var(--color-bg-subtle)]",
-          toneTextMap[tone],
+          "bg-[var(--color-surface-container-low)]",
+          toneTextClasses[tone],
           className
         ),
         ...props,