@nsaa/core 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/toolbar/toolbar.js

@@ -0,0 +1,250 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ControlDefaultsContext, useControlDefaults } from "../lib/control-defaults.js";
+import { buttonVariants } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuShortcut } from "../dropdown-menu/dropdown-menu.js";
+import { tv } from "../lib/tv.js";
+import { ariaShortcut, formatShortcut } from "../lib/shortcut.js";
+import { TooltipProvider } from "../tooltip/tooltip.js";
+import { ToolbarItem } from "./toolbar-item.js";
+import { OverflowContext, OverflowMore, OverflowStore, useOverflowUnit } from "./overflow.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+// src/toolbar/toolbar.tsx
+const toolbarStyles = tv({
+	base: "flex items-center gap-0.5 data-[orientation=vertical]:flex-col",
+	variants: {
+		surface: {
+			none: "",
+			floating: "nsaa-surface w-fit rounded-surface p-1 shadow-default"
+		},
+		overflow: {
+			menu: "flex-nowrap",
+			none: "flex-wrap",
+			scroll: [
+				"snap-x snap-proximity scroll-px-4 overflow-x-auto overscroll-x-contain p-1 pointer-coarse:py-1.5 [scrollbar-width:none] [&>*]:snap-start",
+				"[--fade-l:0px] [--fade-r:0px] data-fade-left:[--fade-l:--spacing(4)] data-fade-right:[--fade-r:--spacing(4)]",
+				"[mask-image:linear-gradient(to_right,transparent,black_var(--fade-l),black_calc(100%-var(--fade-r)),transparent)]"
+			]
+		}
+	},
+	defaultVariants: {
+		surface: "none",
+		overflow: "menu"
+	}
+});
+/** Marks which edges of a scrolling toolbar hide items (`data-fade-left` / `data-fade-right`). */
+function useScrollEdges(enabled) {
+	const node = useRef(null);
+	useEffect(() => {
+		const el = node.current;
+		if (!enabled || !el) return;
+		const update = () => {
+			const max = el.scrollWidth - el.clientWidth;
+			const fromLeft = getComputedStyle(el).direction === "rtl" ? max + el.scrollLeft : el.scrollLeft;
+			el.toggleAttribute("data-fade-left", fromLeft > 1);
+			el.toggleAttribute("data-fade-right", max - fromLeft > 1);
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		observer?.observe(el);
+		return () => {
+			el.removeEventListener("scroll", update);
+			observer?.disconnect();
+		};
+	}, [enabled]);
+	return node;
+}
+/**
+* Groups related controls behind one Tab stop, with arrow keys, Home and End moving between items
+* (Base UI `Toolbar`). Items get the toolbar's size, swap icons instantly, change colour without
+* transitions and stay silent unless `sound` is set: a toolbar is high-frequency.
+*/
+function ToolbarRoot({ size = "sm", surface = "none", overflow = "menu", overflowLabel = "More", sound = false, orientation = "horizontal", className, children, onKeyDown, ref, ...props }) {
+	const edges = useScrollEdges(overflow === "scroll");
+	const root = useRef(null);
+	const setRef = useCallback((el) => mergeRefs(root, edges, ref)(el), [edges, ref]);
+	const [store] = useState(() => new OverflowStore());
+	const collapses = overflow === "menu" && orientation === "horizontal";
+	useLayoutEffect(() => {
+		if (collapses && root.current) store.layout(root.current);
+	});
+	useEffect(() => {
+		const el = root.current;
+		if (!collapses || !el || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => store.layout(el));
+		observer.observe(el);
+		if (el.parentElement) observer.observe(el.parentElement);
+		return () => observer.disconnect();
+	}, [collapses, store]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
+		if (event.target.closest("input, textarea, [contenteditable]")) return;
+		const items = [...event.currentTarget.querySelectorAll("button:not(:disabled), a[href], input:not(:disabled)")];
+		const target = event.key === "Home" ? items[0] : items.at(-1);
+		if (!target) return;
+		event.preventDefault();
+		target.focus();
+	};
+	return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
+		value: {
+			size,
+			sound,
+			orientation,
+			iconTransition: "instant",
+			instantColors: true
+		},
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar.Root, {
+			ref: setRef,
+			"data-slot": "toolbar",
+			"data-size": size,
+			"data-surface": surface,
+			orientation,
+			className: cn(toolbarStyles({
+				surface,
+				overflow
+			}), "data-[orientation=horizontal]:pointer-coarse:[&_:is(button,a)]:before:min-w-0", "data-[orientation=vertical]:pointer-coarse:[&_:is(button,a)]:before:min-h-0", className),
+			onKeyDown: handleKeyDown,
+			...props,
+			children: [/* @__PURE__ */ jsx(OverflowContext.Provider, {
+				value: collapses ? store : null,
+				children
+			}), collapses && /* @__PURE__ */ jsx(OverflowMore, {
+				store,
+				label: overflowLabel
+			})]
+		}) })
+	});
+}
+/** A toolbar button's form in the More menu: a menu item, or a checkbox item for a toggle. */
+function buttonMenuItem(p, disabled) {
+	const label = p["aria-label"] ?? p.children;
+	const shortcut = typeof p.tooltip === "object" ? p.tooltip.shortcut : void 0;
+	if (p.pressed !== void 0 || p.onPressedChange !== void 0) return /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+		"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
+		checked: p.pressed ?? false,
+		disabled,
+		onCheckedChange: (on, details) => p.onPressedChange?.(on, details),
+		children: [
+			p.icon,
+			label,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
+		]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
+		disabled,
+		onClick: p.onClick,
+		children: [
+			p.icon,
+			label,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
+		]
+	});
+}
+/**
+* A ghost Button (#84): icon-only (with a tooltip) when it has only an `icon`, labelled otherwise;
+* a toggle with `pressed`. Disabled items stay focusable so people can discover them.
+*/
+function ToolbarButton({ disabled, overflowPriority, ...props }) {
+	const trigger = props["aria-haspopup"] !== void 0;
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "item",
+		priority: trigger ? "never" : overflowPriority,
+		menu: buttonMenuItem(props, disabled)
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		...unitProps,
+		"data-slot": "toolbar-button",
+		disabled,
+		focusableWhenDisabled: true,
+		render: /* @__PURE__ */ jsx(ToolbarItem, { ...props })
+	});
+}
+const LINK_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "default",
+	lg: "lg",
+	xl: "lg"
+};
+/** A link styled like a ghost toolbar item. */
+function ToolbarLink({ className, overflowPriority, ...props }) {
+	const { size } = useControlDefaults();
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "item",
+		priority: overflowPriority,
+		menu: /* @__PURE__ */ jsx(DropdownMenuItem, {
+			render: /* @__PURE__ */ jsx("a", { href: props.href }),
+			children: props.children
+		})
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Link, {
+		...unitProps,
+		"data-slot": "toolbar-link",
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: LINK_SIZE[size ?? "md"]
+		}), "transition-none", className),
+		...props
+	});
+}
+/** A labelled cluster of items. */
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		"data-slot": "toolbar-group",
+		role: "group",
+		className: cn("flex items-center gap-0.5 data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+/** 1 px `border-default`, 60% of the item height, perpendicular to the toolbar. */
+function ToolbarSeparator({ className, ...props }) {
+	const { hidden, unitProps, placeholder } = useOverflowUnit({
+		kind: "separator",
+		menu: null
+	});
+	if (hidden) return placeholder;
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		...unitProps,
+		"data-slot": "toolbar-separator",
+		className: cn("shrink-0 self-stretch bg-border-default", "data-[orientation=vertical]:mx-0.5 data-[orientation=vertical]:w-px data-[orientation=vertical]:scale-y-60", "data-[orientation=horizontal]:my-0.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:scale-x-60", className),
+		...props
+	});
+}
+/**
+* A text input in the toolbar (search, find, a URL). At most one, placed last: arrow keys move
+* the caret inside it (Base UI). The base-nova Input (#84) without its resting border; never
+* collapses.
+*/
+function ToolbarInput({ className, ...props }) {
+	const { unitProps } = useOverflowUnit({
+		kind: "item",
+		priority: "never",
+		menu: null
+	});
+	return /* @__PURE__ */ jsx("span", {
+		...unitProps,
+		"data-slot": "toolbar-input",
+		className: "inline-flex min-w-0 shrink",
+		children: /* @__PURE__ */ jsx(Toolbar.Input, { render: /* @__PURE__ */ jsx(Input, {
+			className: cn("border-transparent dark:bg-transparent", className),
+			...props
+		}) })
+	});
+}
+const Toolbar$1 = Object.assign(ToolbarRoot, {
+	Button: ToolbarButton,
+	Input: ToolbarInput,
+	Link: ToolbarLink,
+	Group: ToolbarGroup,
+	Separator: ToolbarSeparator
+});
+export { Toolbar$1 as Toolbar };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,7 @@
+
+import { Tooltip } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: Tooltip.Provider.Props): import("react").JSX.Element;
+declare function Tooltip$1({ ...props }: Tooltip.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip/tooltip.js

@@ -0,0 +1,41 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/tooltip/tooltip.tsx
+function TooltipProvider({ delay = 600, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+		})
+	}) });
+}
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
     "**/*.css",
-    "./dist/index.js"
+    "./dist/lib/track-input-modality.js",
+    "./dist/spinner/spinner.js"
   ],
   "files": [
     "dist",
@@ -42,10 +43,11 @@
     "cmdk": "1.1.1",
     "input-otp": "1.5.0",
     "motion": "^14.7.1",
+    "react-day-picker": "9.14.0",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.0"
+    "@nsaa/tokens": "^0.1.0-alpha.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",

package/src/feel.css

@@ -61,9 +61,11 @@
   }
 
   /* ---------------------------------------------------------------- modal recipe (Phase 1)
-     Overlay opacity; content from the centre; base in, fast out. Dialog and CommandDialog. */
+     Overlay opacity; content from the centre; base in, fast out. Dialog, CommandDialog, Alert Dialog. */
   [data-slot="dialog-overlay"],
-  [data-slot="dialog-content"] {
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-overlay"],
+  [data-slot="alert-dialog-content"] {
     transition-property: opacity, scale;
     transition-duration: calc(var(--nsaa-duration-base) * var(--nsaa-time-scale));
     transition-timing-function: var(--nsaa-ease-out);
@@ -78,7 +80,8 @@
     }
   }
 
-  [data-slot="dialog-content"] {
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
     transform-origin: center;
 
     &[data-starting-style],
@@ -474,6 +477,7 @@
     [data-slot="popover-content"],
     [data-slot="dropdown-menu-content"],
     [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
     [data-slot="drawer-popup"]
   ) {
     --nsaa-il-surface: var(--popover);
@@ -526,7 +530,9 @@
           [data-slot="context-menu-sub-content"],
           [data-slot="tooltip-content"],
           [data-slot="dialog-overlay"],
-          [data-slot="dialog-content"]
+          [data-slot="dialog-content"],
+          [data-slot="alert-dialog-overlay"],
+          [data-slot="alert-dialog-content"]
         ) {
         transition-property: opacity;
         transition-duration: calc(var(--nsaa-reduced-fade) * var(--nsaa-time-scale));
@@ -688,7 +694,9 @@
         [data-slot="context-menu-sub-content"],
         [data-slot="tooltip-content"],
         [data-slot="dialog-overlay"],
-        [data-slot="dialog-content"]
+        [data-slot="dialog-content"],
+        [data-slot="alert-dialog-overlay"],
+        [data-slot="alert-dialog-content"]
       ) {
       transition-property: opacity;
       transition-duration: calc(var(--nsaa-reduced-fade) * var(--nsaa-time-scale));
@@ -851,7 +859,9 @@
       [data-slot="context-menu-sub-content"],
       [data-slot="tooltip-content"],
       [data-slot="dialog-overlay"],
-      [data-slot="dialog-content"]
+      [data-slot="dialog-content"],
+      [data-slot="alert-dialog-overlay"],
+      [data-slot="alert-dialog-content"]
     )[data-instant],
   :root[data-nsaa-input="keyboard"]
     :is(
@@ -865,6 +875,8 @@
       [data-slot="tooltip-content"],
       [data-slot="dialog-overlay"],
       [data-slot="dialog-content"],
+      [data-slot="alert-dialog-overlay"],
+      [data-slot="alert-dialog-content"],
       [data-slot="drawer-popup"],
       [data-slot="drawer-overlay"],
       [data-slot="accordion-content"],

package/src/styles.css

@@ -57,7 +57,8 @@
 }
 
 /* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
-   chevrons); `cn-input-otp` is styled by base-nova's style sheet, not by the item's classes. */
+   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
+   by the item's classes. */
 @layer components {
   .cn-rtl-flip:where(:dir(rtl)) {
     rotate: 180deg;
@@ -67,6 +68,23 @@
   .cn-input-otp {
     gap: calc(var(--spacing) * 2);
   }
+
+  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
+     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
+  .cn-calendar-dropdown-root {
+    border: 1px solid var(--input);
+
+    &:has(:focus) {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .cn-calendar-caption-label {
+    height: calc(var(--spacing) * 6);
+    padding-right: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * 1.5);
+  }
 }
 
 /* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */