@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/lib/calendar/temporal.module.js

@@ -1,42 +1,42 @@
 import './temporal.css';// src/lib/calendar/temporal.module.scss
-var group = "_group_zywoe_3";
-var input = "_input_zywoe_68";
-var rangeInput = "_rangeInput_zywoe_81";
-var rangeSeparator = "_rangeSeparator_zywoe_93";
-var rangeSpacer = "_rangeSpacer_zywoe_97";
-var segment = "_segment_zywoe_101";
-var trigger = "_trigger_zywoe_117";
-var popover = "_popover_zywoe_133";
-var dialog = "_dialog_zywoe_163";
-var calendar = "_calendar_zywoe_166";
-var header = "_header_zywoe_171";
-var navigation = "_navigation_zywoe_176";
-var navField = "_navField_zywoe_186";
-var navPortal = "_navPortal_zywoe_189";
-var navTrigger = "_navTrigger_zywoe_194";
-var navControl = "_navControl_zywoe_195";
-var navInput = "_navInput_zywoe_251";
-var navLabel = "_navLabel_zywoe_254";
-var navSizer = "_navSizer_zywoe_258";
-var navValue = "_navValue_zywoe_268";
-var navChevron = "_navChevron_zywoe_285";
-var navIcon = "_navIcon_zywoe_293";
-var navPositioner = "_navPositioner_zywoe_298";
-var navPopup = "_navPopup_zywoe_312";
-var yearPopup = "_yearPopup_zywoe_337";
-var yearEmpty = "_yearEmpty_zywoe_365";
-var yearList = "_yearList_zywoe_380";
-var navItem = "_navItem_zywoe_388";
-var yearOption = "_yearOption_zywoe_389";
-var navItemIndicator = "_navItemIndicator_zywoe_444";
-var yearIndicator = "_yearIndicator_zywoe_445";
-var yearValue = "_yearValue_zywoe_453";
-var months = "_months_zywoe_457";
-var grid = "_grid_zywoe_464";
-var weekday = "_weekday_zywoe_477";
-var day = "_day_zywoe_484";
-var today = "_today_zywoe_533";
-var rangeCalendar = "_rangeCalendar_zywoe_547";
+var group = "_group_1t1xp_3";
+var input = "_input_1t1xp_133";
+var rangeInput = "_rangeInput_1t1xp_146";
+var rangeSeparator = "_rangeSeparator_1t1xp_158";
+var rangeSpacer = "_rangeSpacer_1t1xp_162";
+var segment = "_segment_1t1xp_166";
+var trigger = "_trigger_1t1xp_182";
+var popover = "_popover_1t1xp_198";
+var dialog = "_dialog_1t1xp_228";
+var calendar = "_calendar_1t1xp_231";
+var header = "_header_1t1xp_236";
+var navigation = "_navigation_1t1xp_241";
+var navField = "_navField_1t1xp_251";
+var navPortal = "_navPortal_1t1xp_254";
+var navTrigger = "_navTrigger_1t1xp_259";
+var navControl = "_navControl_1t1xp_260";
+var navInput = "_navInput_1t1xp_316";
+var navLabel = "_navLabel_1t1xp_319";
+var navSizer = "_navSizer_1t1xp_323";
+var navValue = "_navValue_1t1xp_333";
+var navChevron = "_navChevron_1t1xp_350";
+var navIcon = "_navIcon_1t1xp_358";
+var navPositioner = "_navPositioner_1t1xp_363";
+var navPopup = "_navPopup_1t1xp_377";
+var yearPopup = "_yearPopup_1t1xp_402";
+var yearEmpty = "_yearEmpty_1t1xp_430";
+var yearList = "_yearList_1t1xp_445";
+var navItem = "_navItem_1t1xp_453";
+var yearOption = "_yearOption_1t1xp_454";
+var navItemIndicator = "_navItemIndicator_1t1xp_515";
+var yearIndicator = "_yearIndicator_1t1xp_516";
+var yearValue = "_yearValue_1t1xp_524";
+var months = "_months_1t1xp_528";
+var grid = "_grid_1t1xp_535";
+var weekday = "_weekday_1t1xp_548";
+var day = "_day_1t1xp_555";
+var today = "_today_1t1xp_604";
+var rangeCalendar = "_rangeCalendar_1t1xp_618";
 var temporal_module_default = {
 	group,
 	input,

package/dist/lib/forms/use-connected-field.d.ts

@@ -23,7 +23,7 @@ export type ConnectedField<TValue> = Readonly<{
  *
  * @example
  * const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
- * <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+ * <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange}>
  * 	<TextInput.Input name={name} onBlur={onBlur} />
  * </TextInput.Root>
  */

package/dist/lib/forms/use-connected-field.js

@@ -12,7 +12,7 @@ import { useContext, useLayoutEffect } from "react";
 *
 * @example
 * const { field, props: { name, onBlur, ...state } } = useConnectedField<string>(label);
-* <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange} optionalLabel="optional">
+* <TextInput.Root {...state} value={field.state.value} onValueChange={field.handleChange}>
 * 	<TextInput.Input name={name} onBlur={onBlur} />
 * </TextInput.Root>
 */

package/dist/lib/render-as.d.ts

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentPropsWithRef, ReactElement } from "react";
+type ButtonProps = ComponentPropsWithRef<"button">;
+/**
+ * A react-aria `render` function that hands the component's DOM props, and
+ * any `extra` props, to a base-ui style `render` element such as a kit button,
+ * merged the way base-ui merges them.
+ *
+ * @example
+ * <AriaButton slot="remove" render={renderAs(<IconButton label="Remove"><CloseIcon /></IconButton>)} />
+ */
+export declare const renderAs: (render: useRender.RenderProp, extra?: ButtonProps) => (props: ButtonProps) => ReactElement;
+export {};

package/dist/lib/render-as.js

@@ -0,0 +1,46 @@
+import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+// src/lib/render-as.tsx
+var Rendered = (t0) => {
+	const $ = c(7);
+	const { render, props: t1 } = t0;
+	let props;
+	let ref;
+	if ($[0] !== t1) {
+		({ref, ...props} = t1);
+		$[0] = t1;
+		$[1] = props;
+		$[2] = ref;
+	} else {
+		props = $[1];
+		ref = $[2];
+	}
+	let t2;
+	if ($[3] !== props || $[4] !== ref || $[5] !== render) {
+		t2 = {
+			render,
+			ref,
+			props
+		};
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+		$[6] = t2;
+	} else t2 = $[6];
+	return useRender(t2);
+};
+/**
+* A react-aria `render` function that hands the component's DOM props, and
+* any `extra` props, to a base-ui style `render` element such as a kit button,
+* merged the way base-ui merges them.
+*
+* @example
+* <AriaButton slot="remove" render={renderAs(<IconButton label="Remove"><CloseIcon /></IconButton>)} />
+*/
+var renderAs = (render, extra) => (props) => /* @__PURE__ */ jsx(Rendered, {
+	render,
+	props: extra === void 0 ? props : mergeProps(props, extra)
+});
+export { renderAs };

package/dist/terrazzo/index.d.ts

@@ -26,9 +26,10 @@ export declare const variableNameOf: (id: string) => string;
 export declare const fontFamilyPropertyOf: (id: string) => string;
 /**
  * A Terrazzo plugin that builds a resolver's tokens into the custom properties
- * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
- * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
- * under `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
+ * the kit's components read: the `ref` ramps on `:root`, the `light` theme's
+ * `sys` roles on `:root` and any `[data-theme="light"]` element, and the `dark`
+ * theme's on any `[data-theme="dark"]` element and on `<html>` under
+ * `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
  * `kit.base` cascade layer after the kit's layer order. A shadow
  * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
  * `drop-shadow()` filters.

package/dist/terrazzo/index.js

@@ -120,15 +120,17 @@ const dropShadows = (token, { tokensSet, transformAlias }) => {
     })
         .join(" ");
 };
-const light = (contents) => `:root {\n\tcolor-scheme: light;\n${families}${contents}\n}`;
+const ramps = (contents) => `:root {\n${families}${contents}\n}`;
+const light = (contents) => `:root,\n[data-theme="light"] {\n\tcolor-scheme: light;\n${contents}\n}`;
 const LAYER_ORDER = "@layer kit.reset, kit.base, kit.components;";
 const layered = (contents) => `${LAYER_ORDER}\n\n@layer kit.base {\n${contents.trimEnd()}\n}\n`;
-const dark = (contents) => `html[data-theme="dark"] {\n\tcolor-scheme: dark;\n${contents}\n}\n\n@media (prefers-color-scheme: dark) {\n\thtml:not([data-theme="light"]) {\n\t\tcolor-scheme: dark;\n${contents}\n\t}\n}`;
+const dark = (contents) => `[data-theme="dark"] {\n\tcolor-scheme: dark;\n${contents}\n}\n\n@media (prefers-color-scheme: dark) {\n\thtml:not([data-theme="light"]) {\n\t\tcolor-scheme: dark;\n${contents}\n\t}\n}`;
 /**
  * A Terrazzo plugin that builds a resolver's tokens into the custom properties
- * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
- * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
- * under `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
+ * the kit's components read: the `ref` ramps on `:root`, the `light` theme's
+ * `sys` roles on `:root` and any `[data-theme="light"]` element, and the `dark`
+ * theme's on any `[data-theme="dark"]` element and on `<html>` under
+ * `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
  * `kit.base` cascade layer after the kit's layer order. A shadow
  * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
  * `drop-shadow()` filters.
@@ -158,7 +160,16 @@ const kitTokens = (options = {}) => {
         transform: (token, transformOptions) => typography(token, transformOptions) ??
             dropShadows(token, transformOptions),
         permutations: [
-            { input: { theme: "light" }, prepare: light },
+            {
+                input: { theme: "light" },
+                include: ["ref.**"],
+                prepare: ramps,
+            },
+            {
+                input: { theme: "light" },
+                include: ["sys.**"],
+                prepare: light,
+            },
             {
                 input: { theme: "dark" },
                 include: ["sys.**"],

package/dist/tokens.css

@@ -6,7 +6,6 @@
  * ------------------------------------------- */
 
 :root {
-	color-scheme: light;
 	--sys-font-family-body: system-ui, sans-serif;
 	--sys-font-family-heading: var(--sys-font-family-body);
 --ref-blue-0: oklch(100% 0 234.03);
@@ -339,14 +338,25 @@
   --ref-sand-975: oklch(2.83% 0.0012 17.89);
   --ref-sand-990: oklch(1.13% 0.0005 17.89);
   --ref-sand-1000: oklch(0% 0 17.89);
+}
+
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+--sys-color-autofill-bg: var(--ref-blue-50);
+  /* The page behind everything */
   --sys-color-bg: var(--ref-neutral-25);
+  /* The quiet hairline that separation rations */
   --sys-color-border: var(--ref-neutral-150);
+  /* The fill of a control or button that cannot be used */
   --sys-color-disabled-bg: var(--ref-neutral-100);
+  /* The ink of a control that cannot be used: its text, icons and the marks of its choice */
   --sys-color-disabled-fg: var(--ref-neutral-300);
   --sys-color-error-bg: var(--ref-red-50);
   --sys-color-error-border: var(--ref-red-200);
   --sys-color-error-fg: var(--ref-red-700);
   --sys-color-error-outline: var(--ref-red-250);
+  /* Keyboard focus, on every focusable element */
   --sys-color-focus-ring: var(--sys-color-primary);
   --sys-color-identity-1-bg: oklch(96.02% 0.0119 84);
   --sys-color-identity-1-fg: oklch(24.08% 0.0472 84);
@@ -364,23 +374,35 @@
   --sys-color-neutral-fg: var(--ref-neutral-700);
   --sys-color-on-primary: var(--ref-neutral-0);
   --sys-color-on-primary-container: var(--ref-neutral-800);
+  /* A mark that has to be found: grab bars, scroll thumbs, control outlines */
   --sys-color-outline: var(--ref-neutral-200);
+  /* Primary buttons and links */
   --sys-color-primary: var(--ref-neutral-750);
+  /* Avatar fallbacks, mention pills, brand tints */
   --sys-color-primary-container: var(--ref-neutral-50);
   --sys-color-selection-bg: var(--ref-neutral-100);
   --sys-color-selection-fg: var(--ref-neutral-800);
   --sys-color-success-bg: var(--ref-green-50);
   --sys-color-success-border: var(--ref-green-200);
   --sys-color-success-fg: var(--ref-green-700);
+  /* The default card */
   --sys-color-surface: var(--ref-neutral-0);
+  /* A fill nested in a card */
   --sys-color-surface-high: var(--ref-neutral-50);
+  /* The deepest recess: fields, placeholders */
   --sys-color-surface-highest: var(--ref-neutral-100);
+  /* The dimmest card: a table's sub-rows */
   --sys-color-surface-lowest: var(--ref-neutral-10);
+  /* Popups and tooltips */
   --sys-color-surface-overlay: var(--ref-neutral-0);
+  /* Toasts */
   --sys-color-surface-overlay-high: var(--ref-neutral-0);
+  /* Body copy and headings */
   --sys-color-text: var(--ref-neutral-500);
   --sys-color-text-inverse: var(--ref-neutral-0);
+  /* Captions, help text and anything passive */
   --sys-color-text-muted: var(--ref-neutral-450);
+  /* The hint text an empty field shows */
   --sys-color-text-placeholder: var(--ref-neutral-400);
   --sys-color-warning-bg: var(--ref-orange-50);
   --sys-color-warning-border: var(--ref-orange-200);
@@ -580,9 +602,10 @@
   --sys-unit-64: 8rem;
 }
 
-html[data-theme="dark"] {
+[data-theme="dark"] {
 	color-scheme: dark;
-/* The page behind everything */
+--sys-color-autofill-bg: var(--ref-blue-750);
+  /* The page behind everything */
   --sys-color-bg: var(--ref-neutral-800);
   /* The quiet hairline that separation rations */
   --sys-color-border: var(--ref-neutral-500);
@@ -843,7 +866,8 @@ html[data-theme="dark"] {
 @media (prefers-color-scheme: dark) {
 	html:not([data-theme="light"]) {
 		color-scheme: dark;
-/* The page behind everything */
+--sys-color-autofill-bg: var(--ref-blue-750);
+  /* The page behind everything */
   --sys-color-bg: var(--ref-neutral-800);
   /* The quiet hairline that separation rations */
   --sys-color-border: var(--ref-neutral-500);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@igne-agency/react-web-ui",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"description": "IGNE's React web component kit: primitives and the presets over them, form controls in three tiers with a TanStack Form bridge, and DTCG tokens themed per app.",
 	"license": "MIT",
 	"repository": {
@@ -330,7 +330,7 @@
 	},
 	"scripts": {
 		"fix": "bun run tokens && oxfmt . && oxlint --fix .",
-		"check": "bun run tokens && oxfmt --check . && oxlint .",
+		"check": "bun run tokens && oxfmt --check . && oxlint . && bun tools/check-docs-tokens.ts",
 		"tokens": "tz build",
 		"build": "bun run tokens && vite build && tsc -p tsconfig.build.json && tsc -p tsconfig.terrazzo.json",
 		"check:exports": "bun tools/check-exports.ts",

package/tokens/dark.tokens.json

@@ -118,6 +118,12 @@
 					"$value": "{ref.neutral.0}"
 				}
 			},
+			"autofill": {
+				"bg": {
+					"$type": "color",
+					"$value": "{ref.blue.750}"
+				}
+			},
 			"bg": {
 				"$type": "color",
 				"$value": "{ref.neutral.800}"

package/tokens/sys.tokens.json

@@ -252,6 +252,13 @@
 					"$value": "{ref.neutral.800}"
 				}
 			},
+			"autofill": {
+				"$description": "A field the browser has filled in for the user",
+				"bg": {
+					"$type": "color",
+					"$value": "{ref.blue.50}"
+				}
+			},
 			"bg": {
 				"$description": "The page behind everything",
 				"$type": "color",

package/dist/components/button/close-button.d.ts

@@ -1,16 +0,0 @@
-import type { ReactElement, ReactNode } from "react";
-export type CloseButtonProps = Readonly<{
-    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
-    closeLabel: string;
-    /** The app's close glyph, drawn in `currentColor` at `1em`. */
-    icon: ReactNode;
-    /** The library part that closes, such as `<BaseDialog.Close />`. */
-    render: ReactElement;
-}>;
-/**
- * The icon-only way out of an overlay, rendered as the overlay's own close part.
- *
- * @example
- * <CloseButton closeLabel="Close" icon={<CloseIcon />} render={<BaseDialog.Close />} />
- */
-export declare const CloseButton: ({ closeLabel, icon, render, }: CloseButtonProps) => ReactNode;

package/dist/components/button/close-button.js

@@ -1,30 +0,0 @@
-import { Button } from "./button.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-// src/components/button/close-button.tsx
-/**
-* The icon-only way out of an overlay, rendered as the overlay's own close part.
-*
-* @example
-* <CloseButton closeLabel="Close" icon={<CloseIcon />} render={<BaseDialog.Close />} />
-*/
-var CloseButton = (t0) => {
-	const $ = c(4);
-	const { closeLabel, icon, render } = t0;
-	let t1;
-	if ($[0] !== closeLabel || $[1] !== icon || $[2] !== render) {
-		t1 = /* @__PURE__ */ jsx(Button, {
-			variant: "tertiary",
-			iconOnly: true,
-			icon,
-			label: closeLabel,
-			render
-		});
-		$[0] = closeLabel;
-		$[1] = icon;
-		$[2] = render;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-};
-export { CloseButton };