@igne-agency/react-web-ui 0.5.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/tokens.css

@@ -343,7 +343,8 @@
 :root,
 [data-theme="light"] {
 	color-scheme: light;
-/* The page behind everything */
+--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);
@@ -603,7 +604,8 @@
 
 [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);
@@ -864,7 +866,8 @@
 @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.5.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": {

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 };