@jfrader/ui 0.0.0-stage → 0.1.1

package/dist/types/styling/surface.d.ts

@@ -0,0 +1,19 @@
+/** Raised panel: surface color, hairline border and the base text setup. */
+export declare const raisedSurface: {
+    readonly boxSizing: 'border-box';
+    readonly backgroundColor: "var(--ui-color-surface-raised)";
+    readonly border: "1px solid var(--ui-color-border)";
+    readonly color: "var(--ui-color-text)";
+    readonly fontFamily: "var(--ui-font-sans)";
+    readonly lineHeight: "var(--ui-line-height-base)";
+};
+/** Native `<dialog>` shell reset with the scrim backdrop; the panel inside draws the surface. */
+export declare const modalShellReset: {
+    readonly border: 0;
+    readonly padding: 0;
+    readonly background: 'transparent';
+    readonly color: 'inherit';
+    readonly '&::backdrop': {
+        readonly backgroundColor: "var(--ui-color-scrim)";
+    };
+};

package/dist/types/styling/trigger-style.d.ts

@@ -0,0 +1 @@
+export declare const triggerStyle: import("@emotion/react").SerializedStyles;

package/dist/types/styling/visually-hidden.d.ts

@@ -0,0 +1 @@
+export declare const visuallyHiddenStyle: import("@emotion/react").SerializedStyles;

package/dist/types/utils/collection-registry.d.ts

@@ -0,0 +1,41 @@
+import { type MutableRefObject, type RefObject } from 'react';
+import { useListItem } from '@floating-ui/react';
+export interface CollectionRecord {
+    /** The item's FloatingList index; -1 until the list has indexed it. */
+    index: number;
+    /** The item's rendered text. */
+    label: string;
+}
+export interface CollectionRegistration<R extends CollectionRecord> {
+    register: (value: string, record: R) => void;
+    unregister: (value: string) => void;
+}
+/** Index → label lookup for typeahead; a `null` entry is never matched. */
+export interface LabelLookup {
+    labelsRef: MutableRefObject<Array<string | null>>;
+    /** False keeps the item out of the lookup (e.g. disabled options). */
+    include: boolean;
+}
+/** The DOM id of a registered item. */
+export declare const collectionItemId: (baseId: string, value: string) => string;
+/**
+ * Root side: the registered records keyed by value, and a stable registration so items'
+ * effects do not re-run when the registry changes. Unchanged records keep the same map.
+ */
+export declare function useCollectionRegistry<R extends CollectionRecord>(): readonly [ReadonlyMap<string, R>, CollectionRegistration<R>];
+export declare function useCollectionListItem(options?: Parameters<typeof useListItem>[0]): {
+    ref: (node: HTMLElement | null) => void;
+    index: number;
+};
+export declare function useCollectionIndexRegistration(index: number, include: boolean, indices: Set<number>): void;
+/**
+ * Item side: joins the enclosing FloatingList and, on every commit, registers the record built
+ * from the current index and the label read from `labelRef`'s text. Layout effects so the root
+ * sees the record before paint; registering an unchanged record is a no-op. The item is
+ * unregistered when its value changes or it unmounts. With `labelLookup`, the label is also
+ * mirrored into an index-addressed lookup and cleared from its slot on cleanup.
+ */
+export declare function useCollectionItem<R extends CollectionRecord>(value: string, registration: CollectionRegistration<R>, labelRef: RefObject<HTMLElement | null>, toRecord: (index: number, label: string) => R, labelLookup?: LabelLookup): {
+    ref: (node: HTMLElement | null) => void;
+    index: number;
+};

package/dist/types/utils/part-id.d.ts

@@ -0,0 +1,2 @@
+/** The DOM id of a value-keyed part; the value is encoded so any string yields a valid id. */
+export declare const partId: (baseId: string, part: string, value: string) => string;

package/dist/types/utils/renderable.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+/** True when a ReactNode actually renders content — null, undefined and booleans render nothing. */
+export declare function isRenderable(node: ReactNode): boolean;

package/dist/types/utils/roving-focus.d.ts

@@ -0,0 +1,18 @@
+import type { KeyboardEvent } from 'react';
+export type RovingOrientation = 'horizontal' | 'vertical';
+export interface OwnedItemsQuery {
+    /** Matches the enabled items, e.g. `'[role="tab"]:not([disabled])'`. */
+    itemSelector: string;
+    /** Matches the owning container, so items of a nested instance are excluded. */
+    ownerSelector: string;
+}
+/** Enabled items inside `container` whose nearest owner is `container` itself. */
+export declare function queryOwnedItems(container: HTMLElement, { itemSelector, ownerSelector }: OwnedItemsQuery): HTMLElement[];
+/** The item whose `data-value` equals `value`; never matches a missing value. */
+export declare function findByValue(items: readonly HTMLElement[], value: string | null | undefined): HTMLElement | undefined;
+/**
+ * Moves focus among `container`'s owned items for arrow/Home/End keys, wrapping at the ends.
+ * Horizontal arrows swap under RTL (the container's computed direction). Keys that do not
+ * move, or events from outside the owned items, are left untouched.
+ */
+export declare function moveRovingFocus(event: KeyboardEvent<HTMLElement>, container: HTMLElement, orientation: RovingOrientation, query: OwnedItemsQuery): void;

package/dist/types/utils/use-controlled-state.d.ts

@@ -0,0 +1,7 @@
+/**
+ * One state authority for controlled/uncontrolled components.
+ * `value === undefined` means uncontrolled; internal state seeds from `defaultValue`.
+ * Requests dedupe against the current value and notify only through `onChange`.
+ * Do not switch modes during an instance's lifetime (see SKILL.md §5).
+ */
+export declare function useControlledState<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): readonly [T | undefined, (next: T) => void];

package/dist/types/utils/use-latest-callback.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A stable function that forwards to the latest `callback` (a no-op while it is undefined), so
+ * an inline consumer callback does not change the identity of the memoized values it feeds.
+ * No render-time ref writes: an abandoned render cannot leak its callback.
+ * `useControlledState`'s setter and Combobox's `onInputChange` call this only from event
+ * handlers, after commit/effects, so they see the current callback. A child layout effect
+ * in the commit that swaps the callback can still see the previous one; that is acceptable
+ * for these event-only call sites. Initializing the ref keeps pre-effect mount calls correct.
+ */
+export declare function useLatestCallback<Args extends unknown[]>(callback: ((...args: Args) => void) | undefined): (...args: Args) => void | undefined;

package/dist/use-controlled-state-DQXkiTQI.js

@@ -0,0 +1,20 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/utils/use-latest-callback.ts
+function i(r) {
+	let i = n(r);
+	return t(() => {
+		i.current = r;
+	}), e((...e) => i.current?.(...e), []);
+}
+//#endregion
+//#region src/utils/use-controlled-state.ts
+function a(t, a, o) {
+	let s = t !== void 0, [c, l] = r(a), u = s ? t : c, d = n(u);
+	d.current = u;
+	let f = i(o);
+	return [u, e((e) => {
+		e !== d.current && (s || l(e), f(e));
+	}, [s, f])];
+}
+//#endregion
+export { i as n, a as t };

package/dist/use-native-dialog-BCp1chwO.js

@@ -0,0 +1,83 @@
+import { useCallback as e, useEffect as t, useImperativeHandle as n, useRef as r, useState as i } from "react";
+//#region src/overlay/use-scroll-lock.ts
+var a = /* @__PURE__ */ new Map();
+function o(e, n) {
+	let i = r(n);
+	i.current = n, t(() => {
+		if (!e) return;
+		let t = i.current?.() ?? (typeof document > "u" ? void 0 : document);
+		if (!t) return;
+		let n = a.get(t);
+		return n ? n.count += 1 : (a.set(t, {
+			count: 1,
+			rootOverflow: t.documentElement.style.overflow,
+			bodyOverflow: t.body.style.overflow
+		}), t.documentElement.style.overflow = "hidden", t.body.style.overflow = "hidden"), () => {
+			let e = a.get(t);
+			e && (--e.count, !(e.count > 0) && (t.documentElement.style.overflow = e.rootOverflow, t.body.style.overflow = e.bodyOverflow, a.delete(t)));
+		};
+	}, [e]);
+}
+//#endregion
+//#region src/overlay/use-native-dialog.ts
+function s(e, t) {
+	e && e.open && typeof e.requestClose == "function" ? e.requestClose() : t(!1);
+}
+function c(t, n) {
+	let [a, o] = i(0), c = r(null), l = e((e) => {
+		c.current = e;
+	}, []), u = e((e) => {
+		let r = c.current?.open ?? !1;
+		(e !== t || r !== t) && (e === t ? o((e) => e + 1) : n(e));
+	}, [t, n]);
+	return {
+		dialogElementRef: c,
+		setDialogElement: l,
+		setOpen: u,
+		requestClose: e(() => {
+			s(c.current, u);
+		}, [u]),
+		repairToken: a
+	};
+}
+function l(e) {
+	let { open: t, ...n } = e;
+	return n;
+}
+function u({ open: a, setOpen: s, requestClose: c, repairToken: l, setDialogElement: u }, { onCancel: d, onClick: f, onClose: p }, m, h) {
+	let g = r(null), _ = h ?? g;
+	n(m, () => _.current, []);
+	let v = r(null), y = r(!1), [b, x] = i(!1), S = e((e) => {
+		_.current = e, u(e);
+	}, [u]);
+	return o(b, () => _.current?.ownerDocument), t(() => {
+		let e = _.current;
+		if (e) {
+			if (a && !e.open) {
+				v.current = e.ownerDocument.activeElement ?? null, y.current = !0;
+				try {
+					e.showModal();
+				} catch {}
+				x(e.open);
+			} else !a && e.open && (e.close(), y.current = !1, x(!1));
+		}
+	}, [a, l]), t(() => () => {
+		let e = v.current;
+		y.current && e && e.isConnected && typeof e.focus == "function" && e.focus();
+	}, []), {
+		ref: S,
+		onCancel: (e) => {
+			d?.(e);
+			let t = e.defaultPrevented;
+			e.preventDefault(), t || s(!1);
+		},
+		onClick: (e) => {
+			f?.(e), e.target === _.current && !e.defaultPrevented && c();
+		},
+		onClose: (e) => {
+			y.current = !1, p?.(e), x(!1), a && s(!1);
+		}
+	};
+}
+//#endregion
+export { c as i, s as n, u as r, l as t };

package/dist/use-overlay-floating-CsZd3qxa.js

@@ -0,0 +1,18 @@
+import { autoUpdate as e, flip as t, offset as n, shift as r, useFloating as i } from "@floating-ui/react";
+//#region src/overlay/use-overlay-floating.ts
+var a = 8, o = 8;
+function s({ open: s, onOpenChange: c, placement: l }) {
+	return i({
+		open: s,
+		onOpenChange: c,
+		placement: l,
+		middleware: [
+			n(a),
+			t({ padding: o }),
+			r({ padding: o })
+		],
+		whileElementsMounted: e
+	});
+}
+//#endregion
+export { s as t };

package/dist/visually-hidden-BXVyhj0y.js

@@ -0,0 +1,16 @@
+import { t as e } from "./css-CW_HG55W.js";
+//#region src/styling/visually-hidden.ts
+var t = e({
+	position: "absolute",
+	inlineSize: "1px",
+	blockSize: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+});
+//#endregion
+export { t };

package/package.json

@@ -1,6 +1,201 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "React components styled with Emotion and themed through CSS custom properties.",
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "emotion",
+    "accessibility"
+  ],
+  "homepage": "https://github.com/jfrader/jfrader-ui/tree/master/packages/ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jfrader/jfrader-ui.git",
+    "directory": "packages/ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/types/components/accordion/index.d.ts",
+      "import": "./dist/accordion.js"
+    },
+    "./alert": {
+      "types": "./dist/types/components/alert/index.d.ts",
+      "import": "./dist/alert.js"
+    },
+    "./avatar": {
+      "types": "./dist/types/components/avatar/index.d.ts",
+      "import": "./dist/avatar.js"
+    },
+    "./badge": {
+      "types": "./dist/types/components/badge/index.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/types/components/breadcrumbs/index.d.ts",
+      "import": "./dist/breadcrumbs.js"
+    },
+    "./button": {
+      "types": "./dist/types/components/button/index.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./calendar": {
+      "types": "./dist/types/components/calendar/index.d.ts",
+      "import": "./dist/calendar.js"
+    },
+    "./card": {
+      "types": "./dist/types/components/card/index.d.ts",
+      "import": "./dist/card.js"
+    },
+    "./checkbox": {
+      "types": "./dist/types/components/checkbox/index.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./combobox": {
+      "types": "./dist/types/components/combobox/index.d.ts",
+      "import": "./dist/combobox.js"
+    },
+    "./command-palette": {
+      "types": "./dist/types/components/command-palette/index.d.ts",
+      "import": "./dist/command-palette.js"
+    },
+    "./container": {
+      "types": "./dist/types/components/container/index.d.ts",
+      "import": "./dist/container.js"
+    },
+    "./date-picker": {
+      "types": "./dist/types/components/date-picker/index.d.ts",
+      "import": "./dist/date-picker.js"
+    },
+    "./dialog": {
+      "types": "./dist/types/components/dialog/index.d.ts",
+      "import": "./dist/dialog.js"
+    },
+    "./divider": {
+      "types": "./dist/types/components/divider/index.d.ts",
+      "import": "./dist/divider.js"
+    },
+    "./flex": {
+      "types": "./dist/types/components/flex/index.d.ts",
+      "import": "./dist/flex.js"
+    },
+    "./kbd": {
+      "types": "./dist/types/components/kbd/index.d.ts",
+      "import": "./dist/kbd.js"
+    },
+    "./menu": {
+      "types": "./dist/types/components/menu/index.d.ts",
+      "import": "./dist/menu.js"
+    },
+    "./navigation": {
+      "types": "./dist/types/components/navigation/index.d.ts",
+      "import": "./dist/navigation.js"
+    },
+    "./pagination": {
+      "types": "./dist/types/components/pagination/index.d.ts",
+      "import": "./dist/pagination.js"
+    },
+    "./pill": {
+      "types": "./dist/types/components/pill/index.d.ts",
+      "import": "./dist/pill.js"
+    },
+    "./popover": {
+      "types": "./dist/types/components/popover/index.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./progress": {
+      "types": "./dist/types/components/progress/index.d.ts",
+      "import": "./dist/progress.js"
+    },
+    "./radio-group": {
+      "types": "./dist/types/components/radio-group/index.d.ts",
+      "import": "./dist/radio-group.js"
+    },
+    "./select": {
+      "types": "./dist/types/components/select/index.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./skeleton": {
+      "types": "./dist/types/components/skeleton/index.d.ts",
+      "import": "./dist/skeleton.js"
+    },
+    "./spinner": {
+      "types": "./dist/types/components/spinner/index.d.ts",
+      "import": "./dist/spinner.js"
+    },
+    "./stack": {
+      "types": "./dist/types/components/stack/index.d.ts",
+      "import": "./dist/stack.js"
+    },
+    "./switch": {
+      "types": "./dist/types/components/switch/index.d.ts",
+      "import": "./dist/switch.js"
+    },
+    "./tabs": {
+      "types": "./dist/types/components/tabs/index.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./text-field": {
+      "types": "./dist/types/components/text-field/index.d.ts",
+      "import": "./dist/text-field.js"
+    },
+    "./textarea": {
+      "types": "./dist/types/components/textarea/index.d.ts",
+      "import": "./dist/textarea.js"
+    },
+    "./theme-root": {
+      "types": "./dist/types/components/theme-root/index.d.ts",
+      "import": "./dist/theme-root.js"
+    },
+    "./toast": {
+      "types": "./dist/types/components/toast/index.d.ts",
+      "import": "./dist/toast.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/types/components/toggle-group/index.d.ts",
+      "import": "./dist/toggle-group.js"
+    },
+    "./tooltip": {
+      "types": "./dist/types/components/tooltip/index.d.ts",
+      "import": "./dist/tooltip.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@floating-ui/react": "^0.27.20",
+    "@jfrader/tokens": "0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.6.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4"
+  },
+  "scripts": {
+    "build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json --emitDeclarationOnly --outDir dist/types",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }