@nexub/react 7.1.0 → 7.2.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.1.0",
+  "version": "7.2.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import { type ScrollLock } from '../../hooks/useClassScrollLock.js';
+export interface AlertDialogRootProps extends RadixAlertDialog.AlertDialogProps {
+    /** See Dialog.Root `scrollLock`. @default 'style' (becomes 'class' in 8.0) */
+    scrollLock?: ScrollLock;
+}
+declare function Root({ scrollLock, ...props }: AlertDialogRootProps): React.JSX.Element;
 export interface AlertDialogConfirmProps {
     /** What the user must type, e.g. the resource name. Matching ignores outer spaces. */
     text: string;
@@ -16,7 +22,7 @@ declare namespace Confirm {
     var displayName: string;
 }
 export declare const AlertDialog: {
-    Root: React.FC<RadixAlertDialog.AlertDialogProps>;
+    Root: typeof Root;
     Trigger: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixAlertDialog.AlertDialogPortalProps>;
     Overlay: React.ForwardRefExoticComponent<RadixAlertDialog.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/AlertDialog/AlertDialog.js

@@ -7,12 +7,19 @@ import { overlaySurface, scrim } from "../../utils/surface.js";
 import { buttonVariants } from "../Button/Button.js";
 import { Input } from "../Input/Input.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
 const ConfirmContext = React.createContext(null);
-const Root = RadixAlertDialog.Root;
+const ALERT_LOCK = { style: { scrollLock: "style", modal: true }, class: { scrollLock: "class", modal: true } };
+function Root({ scrollLock = "style", ...props }) {
+  return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: ALERT_LOCK[scrollLock], children: /* @__PURE__ */ jsx(RadixAlertDialog.Root, { ...props }) });
+}
 const Trigger = RadixAlertDialog.Trigger;
 const Portal = RadixAlertDialog.Portal;
 const Overlay = React.forwardRef(
   function AlertDialogOverlay({ className, ...props }, ref) {
+    const { scrollLock } = React.useContext(ScrollLockContext);
+    if (scrollLock === "class")
+      return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, className: cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim, className) });
     return /* @__PURE__ */ jsx(
       RadixAlertDialog.Overlay,
       {

package/dist/components/Avatar/Avatar.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { safeSrc } from "../../utils/safeHref.js";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
@@ -38,13 +39,14 @@ const Avatar = React.forwardRef(
   ({
     className,
     size = "md",
-    src,
+    src: srcProp,
     name,
     fallback,
     badge,
     badgeColor,
     ...props
   }, ref) => {
+    const src = safeSrc(srcProp);
     const [failedSrc, setFailedSrc] = React.useState();
     const showImage = Boolean(src) && failedSrc !== src;
     const initials = name ? getInitials(name) : null;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRight, MoreHorizontal } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
+import { safeHref } from "../../utils/safeHref.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 const Root = React.forwardRef(
@@ -84,7 +85,7 @@ const Trail = React.forwardRef(({ items, maxItems = 4, ...props }, ref) => {
   const collapsed = items.length > keep;
   const hidden = collapsed ? items.slice(1, items.length - (keep - 1)) : [];
   const shown = collapsed ? [items[0], ...items.slice(items.length - (keep - 1))] : items;
-  const crumb = (item, last) => last ? /* @__PURE__ */ jsx(Page, { children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, children: item.label });
+  const crumb = (item, last) => last ? /* @__PURE__ */ jsx(Page, { children: item.label }) : /* @__PURE__ */ jsx(Link, { href: safeHref(item.href), children: item.label });
   return /* @__PURE__ */ jsx(Root, { ref, ...props, children: /* @__PURE__ */ jsx(List, { children: shown.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(Item, { children: crumb(item, i === shown.length - 1) }),
@@ -99,7 +100,7 @@ const Trail = React.forwardRef(({ items, maxItems = 4, ...props }, ref) => {
             children: /* @__PURE__ */ jsx(MoreHorizontal, { size: "sm", "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: hidden.map((h, j) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: h.href, children: h.label }) }, j)) })
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: hidden.map((h, j) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: safeHref(h.href), children: h.label }) }, j)) })
       ] }) })
     ] })
   ] }, i)) }) });

package/dist/components/Card/Card.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { safeHref } from "../../utils/safeHref.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 import { usePointerSheen } from "../../hooks/usePointerSheen.js";
 const cardVariants = cva(
@@ -72,7 +73,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "Card";
 const CardLink = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, href, ...props }, ref) => {
     const Comp = asChild ? Slot : "a";
     return /* @__PURE__ */ jsx(
       Comp,
@@ -83,6 +84,7 @@ const CardLink = React.forwardRef(
           "text-inherit no-underline outline-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']",
           className
         ),
+        href: safeHref(href),
         ...props
       }
     );

package/dist/components/Dialog/Dialog.d.ts

@@ -2,12 +2,22 @@ import * as React from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import type { Size } from '../../utils/control.js';
 import { type SurfaceValue } from '../../utils/glass.js';
+import { type ScrollLock } from '../../hooks/useClassScrollLock.js';
+export interface DialogRootProps extends RadixDialog.DialogProps {
+    /**
+     * `'class'` locks page scroll with a class on <html> instead of the <style>
+     * Radix injects, so the dialog works under a strict `style-src` with no nonce.
+     * @default 'style' (becomes 'class' in 8.0)
+     */
+    scrollLock?: ScrollLock;
+}
+declare function Root({ scrollLock, modal, ...props }: DialogRootProps): React.JSX.Element;
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: Size | 'xl' | 'full';
     surface?: SurfaceValue;
 }
 export declare const Dialog: {
-    Root: React.FC<RadixDialog.DialogProps>;
+    Root: typeof Root;
     Trigger: React.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Portal: React.FC<RadixDialog.DialogPortalProps>;
     Overlay: React.ForwardRefExoticComponent<RadixDialog.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/Dialog.js

@@ -5,12 +5,19 @@ import * as RadixDialog from "@radix-ui/react-dialog";
 import { cn } from "../../utils/cn.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
-const Root = RadixDialog.Root;
+import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
+function Root({ scrollLock = "style", modal = true, ...props }) {
+  const lock = React.useMemo(() => ({ scrollLock, modal }), [scrollLock, modal]);
+  return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: lock, children: /* @__PURE__ */ jsx(RadixDialog.Root, { modal, ...props }) });
+}
 const Trigger = RadixDialog.Trigger;
 const Portal = RadixDialog.Portal;
 const Close = RadixDialog.Close;
 const Overlay = React.forwardRef(
   function DialogOverlay({ className, ...props }, ref) {
+    const { scrollLock, modal } = React.useContext(ScrollLockContext);
+    const cls = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim, className);
+    if (scrollLock === "class") return modal ? /* @__PURE__ */ jsx(ClassLockOverlay, { ref, className: cls }) : null;
     return /* @__PURE__ */ jsx(
       RadixDialog.Overlay,
       {

package/dist/components/FileUpload/FileUpload.d.ts

@@ -9,7 +9,9 @@ export declare function formatFileSize(bytes: number, locale: string): string;
 export declare function fileAccepted(file: File, accept?: string[]): boolean;
 export interface FileRejection {
     file: File;
-    reason: 'type' | 'size' | 'count';
+    reason: 'type' | 'size' | 'count' | 'custom';
+    /** The message returned by `validate` (reason `'custom'`). */
+    message?: string;
 }
 export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement> {
     accept?: string[];
@@ -19,6 +21,11 @@ export interface FileUploadRootProps extends React.HTMLAttributes<HTMLDivElement
     onFilesChange?: (files: File[]) => void;
     /** Files turned away by `accept`, `maxSize` or `maxFiles`, from the picker or a drop. */
     onReject?: (rejections: FileRejection[]) => void;
+    /**
+     * Your own check, run after `accept` and `maxSize`: return a message to reject
+     * the file. Client-side checks are a convenience; validate again on the server.
+     */
+    validate?: (file: File) => string | null | undefined;
 }
 export interface FileUploadItemProps extends React.HTMLAttributes<HTMLLIElement> {
     index: number;

package/dist/components/FileUpload/FileUpload.js

@@ -27,17 +27,19 @@ function useFileUpload() {
   return ctx;
 }
 const Root = React.forwardRef(
-  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, children, ...props }, ref) => {
+  ({ className, accept, maxFiles, maxSize, onFilesChange, onReject, validate, children, ...props }, ref) => {
     const [files, setFiles] = React.useState([]);
     const [rejections, setRejections] = React.useState([]);
     const [isDragging, setIsDragging] = React.useState(false);
     const addFiles = React.useCallback(
       (newFiles) => {
         const rejected = [];
+        let custom;
         const next = [...files];
         for (const file of newFiles) {
           if (!fileAccepted(file, accept)) rejected.push({ file, reason: "type" });
           else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+          else if (custom = validate?.(file) || null) rejected.push({ file, reason: "custom", message: custom });
           else if (maxFiles !== void 0 && next.length >= maxFiles) rejected.push({ file, reason: "count" });
           else next.push(file);
         }
@@ -48,7 +50,7 @@ const Root = React.forwardRef(
         }
         if (rejected.length) onReject?.(rejected);
       },
-      [files, accept, maxFiles, maxSize, onFilesChange, onReject]
+      [files, accept, maxFiles, maxSize, onFilesChange, onReject, validate]
     );
     const removeFile = React.useCallback(
       (index) => {
@@ -126,7 +128,7 @@ const Dropzone = React.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "empty:hidden px-4 pb-3 text-start text-sm text-[var(--color-error)]", children: rejections.length > 0 && /* @__PURE__ */ jsx("ul", { children: rejections.map(({ file, reason }, i) => /* @__PURE__ */ jsx("li", { children: reason === "type" ? messages.fileTypeRejected(file.name) : reason === "size" ? messages.fileTooLarge(file.name, formatFileSize(maxSize ?? 0, locale)) : messages.tooManyFiles(maxFiles ?? 0) }, `${file.name}-${i}`)) }) })
+            /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: "empty:hidden px-4 pb-3 text-start text-sm text-[var(--color-error)]", children: rejections.length > 0 && /* @__PURE__ */ jsx("ul", { children: rejections.map(({ file, reason, message }, i) => /* @__PURE__ */ jsx("li", { children: reason === "custom" ? message : reason === "type" ? messages.fileTypeRejected(file.name) : reason === "size" ? messages.fileTooLarge(file.name, formatFileSize(maxSize ?? 0, locale)) : messages.tooManyFiles(maxFiles ?? 0) }, `${file.name}-${i}`)) }) })
           ]
         }
       )

package/dist/components/MediaCard/MediaCard.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
+import { safeHref, safeSrc } from "../../utils/safeHref.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 const ratioClass = {
   "16/9": "aspect-video",
@@ -9,7 +10,9 @@ const ratioClass = {
   "3/4": "aspect-[3/4]"
 };
 const MediaCard = React.forwardRef(
-  ({ src, alt, ratio = "16/9", title, description, eyebrow, href, className, children, ...props }, ref) => {
+  ({ src: srcProp, alt, ratio = "16/9", title, description, eyebrow, href: hrefProp, className, children, ...props }, ref) => {
+    const src = safeSrc(srcProp);
+    const href = safeHref(hrefProp);
     const hasCaption = title != null || description != null || eyebrow != null || children != null;
     return /* @__PURE__ */ jsxs(
       "div",

package/dist/components/NexubProvider/NexubProvider.d.ts

@@ -14,6 +14,12 @@ export interface NexubProviderProps {
     dateLocale?: Locale;
     /** Overrides for the default English strings. */
     messages?: Partial<NexubMessages>;
+    /**
+     * CSP nonce for the `<style>` tags Radix overlays inject at runtime (scroll
+     * lock, scrollbar gap). Pass the same per-request nonce as your
+     * `style-src-elem` so they work without `'unsafe-inline'`.
+     */
+    nonce?: string;
     children?: React.ReactNode;
 }
 /**
@@ -21,7 +27,7 @@ export interface NexubProviderProps {
  * It does not set `dir`/`lang` on <html> — the app does that (as it renders
  * <html>), so the page and CSS `rtl:` variants agree with this provider.
  */
-export declare function NexubProvider({ locale, dir, dateLocale, messages, children }: NexubProviderProps): React.JSX.Element;
+export declare function NexubProvider({ locale, dir, dateLocale, messages, nonce, children }: NexubProviderProps): React.JSX.Element;
 /** The active strings: defaults merged with the nearest NexubProvider's overrides. */
 export declare function useNexubMessages(): NexubMessages;
 /** The active locale (default 'en'), direction and optional date-fns Locale. */

package/dist/components/NexubProvider/NexubProvider.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { DirectionProvider } from "@radix-ui/react-direction";
+import { setNonce } from "get-nonce";
 import { defaultMessages, directionOf } from "@nexub/core";
 const NexubContext = React.createContext({
   locale: void 0,
@@ -9,7 +10,8 @@ const NexubContext = React.createContext({
   dateLocale: void 0,
   messages: defaultMessages
 });
-function NexubProvider({ locale = "en", dir, dateLocale, messages, children }) {
+function NexubProvider({ locale = "en", dir, dateLocale, messages, nonce, children }) {
+  if (nonce) setNonce(nonce);
   const resolvedDir = dir ?? directionOf(locale);
   const value = React.useMemo(
     () => ({ locale, dir: resolvedDir, dateLocale, messages: { ...defaultMessages, ...messages } }),

package/dist/components/PasswordInput/PasswordInput.js

@@ -14,12 +14,16 @@ const PasswordInput = React.forwardRef(
       onChange: onVisibleChange
     });
     const messages = useNexubMessages();
+    const autoId = React.useId();
+    const inputId = props.id ?? autoId;
     const toggleButton = /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword(!showPassword),
-        "aria-label": showPassword ? messages.hidePassword : messages.showPassword,
+        "aria-label": messages.showPassword,
+        "aria-pressed": showPassword,
+        "aria-controls": inputId,
         className: cn(
           "shrink-0 rounded-full text-[var(--color-on-surface-muted)] hover:text-[var(--color-on-surface)] transition-colors"
         ),
@@ -30,6 +34,7 @@ const PasswordInput = React.forwardRef(
       Input,
       {
         ref,
+        id: inputId,
         autoComplete: "current-password",
         ...props,
         type: showPassword ? "text" : "password",

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+const PRODUCTS = ["leap", "bookub", "payub", "founderub"];
 const GLASS_MODES = ["clear", "balanced", "tinted", "off"];
 const ThemeContext = React.createContext(void 0);
 ThemeContext.displayName = "ThemeContext";
@@ -165,7 +166,7 @@ function useTheme() {
 const jsString = (s) => JSON.stringify(s).replace(/</g, "\\u003c");
 function themeScriptSource(storageKey, productStorageKey, glassStorageKey = "nexub-glass", contrastStorageKey) {
   const contrast = contrastStorageKey ? `var c=localStorage.getItem(${jsString(contrastStorageKey)});if(['standard','medium','high'].indexOf(c)>-1)d.setAttribute('data-contrast',c);` : "";
-  const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(b&&b!=='base')d.setAttribute('data-product',b);` : "";
+  const product = productStorageKey ? `var b=localStorage.getItem(${jsString(productStorageKey)});if(${JSON.stringify(PRODUCTS)}.indexOf(b)>-1)d.setAttribute('data-product',b);` : "";
   const glass = `var g=localStorage.getItem(${jsString(glassStorageKey)});if(${JSON.stringify(GLASS_MODES)}.indexOf(g)>-1)d.setAttribute('data-glass',g);`;
   return `try{var d=document.documentElement,t=localStorage.getItem(${jsString(storageKey)});if(t==='light'||t==='dark')d.setAttribute('data-theme',t);${product}${glass}${contrast}}catch(e){}`;
 }

package/dist/hooks/useClassScrollLock.d.ts

@@ -1,6 +1,19 @@
+import * as React from 'react';
 /**
  * CSP-safe page scroll lock: toggles `nexub-scroll-lock` (from @nexub/themes/base)
  * on <html> instead of injecting a <style> tag. On while mounted; counted, so
  * nested overlays (a Sheet and a CommandPalette) share one lock.
  */
 export declare function useClassScrollLock(): void;
+export type ScrollLock = 'style' | 'class';
+/**
+ * Which scroll lock a modal Root asked for. `'style'` (7.x default) is Radix's
+ * react-remove-scroll, which injects a <style> (needs a CSP nonce, see
+ * NexubProvider `nonce`); `'class'` is the class lock above, no <style> at all.
+ */
+export declare const ScrollLockContext: React.Context<{
+    scrollLock: ScrollLock;
+    modal: boolean;
+}>;
+/** Plain overlay for scrollLock="class": Radix's RemoveScroll lives in its Overlay. */
+export declare const ClassLockOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/useClassScrollLock.js

@@ -13,6 +13,18 @@ function useClassScrollLock() {
     };
   }, []);
 }
+const ScrollLockContext = React.createContext({
+  scrollLock: "style",
+  modal: true
+});
+const ClassLockOverlay = React.forwardRef(
+  function ClassLockOverlay2(props, ref) {
+    useClassScrollLock();
+    return React.createElement("div", { ref, "data-state": "open", ...props });
+  }
+);
 export {
+  ClassLockOverlay,
+  ScrollLockContext,
   useClassScrollLock
 };

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { cn } from './utils/cn.js';
 export type { Size } from './utils/control.js';
 export { startViewTransition } from './utils/viewTransition.js';
+export { safeHref, safeSrc } from './utils/safeHref.js';
+export type { SafeHrefOptions } from './utils/safeHref.js';
 export { useScopedSeed } from './hooks/useScopedSeed.js';
 export { useControllableState } from './hooks/useControllableState.js';
 export { useDisclosure } from './hooks/useDisclosure.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { cn } from "./utils/cn.js";
 import { startViewTransition } from "./utils/viewTransition.js";
+import { safeHref, safeSrc } from "./utils/safeHref.js";
 import { useScopedSeed } from "./hooks/useScopedSeed.js";
 import { useControllableState } from "./hooks/useControllableState.js";
 import { useDisclosure } from "./hooks/useDisclosure.js";
@@ -326,6 +327,8 @@ export {
   progressFillVariants,
   progressTrackVariants,
   ratingVariants,
+  safeHref,
+  safeSrc,
   safeUrl,
   sectionVariants,
   separatorVariants,

package/dist/utils/safeHref.d.ts

@@ -0,0 +1,12 @@
+export interface SafeHrefOptions {
+    /**
+     * `false` (7.x default): block script-capable schemes (`javascript:`,
+     * `vbscript:`, `data:`, `file:`), allow everything else.
+     * `true` (8.0 default): allow only relative URLs, `#…`, http(s), mailto, tel and sms.
+     */
+    strict?: boolean;
+}
+/** A link target that can't run script. Returns `undefined` when blocked. */
+export declare function safeHref(url: string | null | undefined, { strict }?: SafeHrefOptions): string | undefined;
+/** An image source: relative, http(s), blob: or a data:image/* URL. */
+export declare function safeSrc(url: string | null | undefined): string | undefined;

package/dist/utils/safeHref.js

@@ -0,0 +1,24 @@
+const SCHEME = /^([a-z][a-z0-9+.-]*):/i;
+const DANGEROUS = /* @__PURE__ */ new Set(["javascript", "vbscript", "data", "file"]);
+const STRICT_HREF = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel", "sms"]);
+function scheme(url) {
+  const probe = url.replace(/[\u0000- \u007f]+/g, "");
+  return SCHEME.exec(probe)?.[1]?.toLowerCase() ?? null;
+}
+function safeHref(url, { strict = false } = {}) {
+  if (!url) return void 0;
+  const s = scheme(url);
+  if (s === null) return url;
+  if (strict) return STRICT_HREF.has(s) ? url : void 0;
+  return DANGEROUS.has(s) ? void 0 : url;
+}
+function safeSrc(url) {
+  if (!url) return void 0;
+  const s = scheme(url);
+  if (s === null || s === "http" || s === "https" || s === "blob") return url;
+  return s === "data" && /^data:image\//i.test(url.trim()) ? url : void 0;
+}
+export {
+  safeHref,
+  safeSrc
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -39,6 +39,10 @@
       "types": "./dist/utils/cn.d.ts",
       "default": "./dist/utils/cn.js"
     },
+    "./safeHref": {
+      "types": "./dist/utils/safeHref.d.ts",
+      "default": "./dist/utils/safeHref.js"
+    },
     "./*": {
       "types": "./dist/components/*/index.d.ts",
       "default": "./dist/components/*/index.js"
@@ -79,16 +83,17 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
+    "get-nonce": "^1.0.1",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
-    "@nexub/core": "7.1.0",
-    "@nexub/icons": "7.1.0"
+    "@nexub/core": "7.2.0",
+    "@nexub/icons": "7.2.0"
   },
   "peerDependencies": {
     "react": ">=19 <20",
     "react-dom": ">=19 <20",
     "@tanstack/react-virtual": "^3.14.22",
-    "@nexub/tokens": "^7.1.0"
+    "@nexub/tokens": "^7.2.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-virtual": {
@@ -120,8 +125,8 @@
     "vaul": "1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
-    "@nexub/themes": "7.1.0",
-    "@nexub/tokens": "7.1.0"
+    "@nexub/themes": "7.2.0",
+    "@nexub/tokens": "7.2.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && rm -f dist/vendor/*.d.ts && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",