@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/switch-field/switch.js

@@ -0,0 +1,207 @@
+import { Field as Field$1 } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { useFieldState } from "../field/use-field-state.js";
+import switch_module_default from "./switch.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+import { Switch } from "@base-ui/react/switch";
+// src/components/switch-field/switch.tsx
+var SwitchRoot = (t0) => {
+	const $ = c(32);
+	let className;
+	let dirty;
+	let disabled;
+	let errors;
+	let filled;
+	let pending;
+	let props;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = dirty;
+		$[3] = disabled;
+		$[4] = errors;
+		$[5] = filled;
+		$[6] = pending;
+		$[7] = props;
+		$[8] = readOnly;
+		$[9] = requiredness;
+		$[10] = touched;
+	} else {
+		className = $[1];
+		dirty = $[2];
+		disabled = $[3];
+		errors = $[4];
+		filled = $[5];
+		pending = $[6];
+		props = $[7];
+		readOnly = $[8];
+		requiredness = $[9];
+		touched = $[10];
+	}
+	let t1;
+	if ($[11] !== dirty || $[12] !== disabled || $[13] !== errors || $[14] !== filled || $[15] !== pending || $[16] !== readOnly || $[17] !== requiredness || $[18] !== touched) {
+		t1 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled
+		};
+		$[11] = dirty;
+		$[12] = disabled;
+		$[13] = errors;
+		$[14] = filled;
+		$[15] = pending;
+		$[16] = readOnly;
+		$[17] = requiredness;
+		$[18] = touched;
+		$[19] = t1;
+	} else t1 = $[19];
+	const field = useFieldState(t1);
+	let t2;
+	if ($[20] !== className) {
+		t2 = clsx(switch_module_default.root, className);
+		$[20] = className;
+		$[21] = t2;
+	} else t2 = $[21];
+	const t3 = field.disabled;
+	const t4 = field.invalid;
+	let t5;
+	if ($[22] !== field.state) {
+		t5 = fieldStateAttributes(field.state);
+		$[22] = field.state;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== t2 || $[29] !== t5 || $[30] !== touched) {
+		t6 = /* @__PURE__ */ jsx(Field$1.Root, {
+			className: t2,
+			disabled: t3,
+			invalid: t4,
+			dirty,
+			touched,
+			...t5,
+			...props
+		});
+		$[24] = dirty;
+		$[25] = field.disabled;
+		$[26] = field.invalid;
+		$[27] = props;
+		$[28] = t2;
+		$[29] = t5;
+		$[30] = touched;
+		$[31] = t6;
+	} else t6 = $[31];
+	return t6;
+};
+var SwitchLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(switch_module_default.label, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var SwitchControl = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(switch_module_default.control, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[5] = focus;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb });
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Switch.Root, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props,
+			children: t3
+		});
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* The styled parts of a base-ui Switch: a track with a sliding thumb that
+* announces as a switch. `Label` wraps the control and its text, so the two
+* share one hit area. For the ordinary case, use `SwitchField`.
+*
+* @example
+* <Switch.Root filled={enabled}>
+* 	<Switch.Label>
+* 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
+* 		Email me about new messages
+* 	</Switch.Label>
+* </Switch.Root>
+*/
+var Switch$1 = {
+	Root: SwitchRoot,
+	Label: SwitchLabel,
+	Control: SwitchControl,
+	Description: Field$1.Description,
+	Error: Field$1.Error
+};
+export { Switch$1 as Switch };

package/dist/components/switch-field/switch.module.js

@@ -0,0 +1,12 @@
+import './switch.css';// src/components/switch-field/switch.module.scss
+var root = "_root_1ietq_3";
+var label = "_label_1ietq_9";
+var control = "_control_1ietq_12";
+var thumb = "_thumb_1ietq_129";
+var switch_module_default = {
+	root,
+	label,
+	control,
+	thumb
+};
+export { control, switch_module_default as default, label, root, thumb };

package/dist/components/switch-field/tsf-switch-field.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type SwitchFieldProps } from "./switch-field.tsx";
+export type TSFSwitchFieldProps = Omit<SwitchFieldProps, keyof ConnectedFieldProps | "checked" | "defaultChecked" | "onCheckedChange">;
+/**
+ * `SwitchField` bound to the TanStack Form field it renders in, whose value is
+ * a boolean. Reach it as `field.SwitchField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="notify">
+ * 	{field => <field.SwitchField label="Email me about new messages" optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFSwitchField: (props: TSFSwitchFieldProps) => ReactNode;

package/dist/components/switch-field/tsf-switch-field.js

@@ -0,0 +1,40 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { SwitchField } from "./switch-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/switch-field/tsf-switch-field.tsx
+/**
+* `SwitchField` bound to the TanStack Form field it renders in, whose value is
+* a boolean. Reach it as `field.SwitchField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="notify">
+* 	{field => <field.SwitchField label="Email me about new messages" optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFSwitchField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField(props.label);
+	let t0;
+	if ($[0] !== field) {
+		t0 = (checked) => field.handleChange(checked);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SwitchField, {
+			...props,
+			...connected,
+			checked: field.state.value,
+			onCheckedChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFSwitchField };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from "./tabs.tsx";

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from "./tabs.js";

package/dist/components/tabs/tabs.css

@@ -0,0 +1,122 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1jg47_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tabs-gap, var(--sys-unit-8));
+  }
+  ._scroller_1jg47_8 {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
+  ._list_1jg47_12 {
+    position: relative;
+    display: flex;
+    gap: var(--tab-gap, var(--sys-unit-2));
+    min-inline-size: max-content;
+  }
+  ._tab_1jg47_18 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    padding: var(--sys-unit-6) var(--sys-unit-10);
+    border-radius: var(--sys-radius-full);
+    color: var(--tab-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-label-medium);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  ._tab_1jg47_18 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tab_1jg47_18:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tab_1jg47_18 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  @media not (prefers-reduced-motion) {
+    ._tab_1jg47_18 {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._tab_1jg47_18:hover {
+    background: var(--tab-bg-hover, var(--sys-color-primary-container));
+  }
+  ._tab_1jg47_18 {
+    border: none;
+    background: none;
+  }
+  ._tab_1jg47_18[data-disabled] {
+    color: var(--tab-disabled-fg, var(--sys-color-disabled-fg));
+    cursor: not-allowed;
+  }
+  ._indicator_1jg47_56 {
+    --_indicator-slack: var(
+    	--sliding-indicator-slack,
+    	0px
+    );
+    --_indicator-slide: var(--sys-motion-short)
+    	var(--sys-motion-emphasized);
+    position: absolute;
+    inset-inline-start: calc(var(--active-tab-left, 0) - var(--_indicator-slack));
+    inset-block-start: calc(var(--active-tab-top, 0) - var(--_indicator-slack));
+    overflow: hidden;
+    inline-size: calc(var(--active-tab-width, 0) + 2 * var(--_indicator-slack));
+    block-size: calc(var(--active-tab-height, 0) + 2 * var(--_indicator-slack));
+    opacity: 1;
+    scale: 1;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1jg47_56 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._indicator_1jg47_56[data-jump] {
+    --_indicator-slide: 0s;
+  }
+  ._indicator_1jg47_56[data-empty] {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1jg47_56[data-empty] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_1jg47_56 {
+    border-radius: var(--sys-radius-full);
+    background: var(--tab-indicator, var(--sys-color-primary));
+  }
+  ._indicatorLabels_1jg47_94 {
+    position: absolute;
+    inset-inline-start: calc(var(--_indicator-slack) - var(--active-tab-left, 0));
+    inset-block-start: calc(var(--_indicator-slack) - var(--active-tab-top, 0));
+    display: flex;
+    inline-size: max-content;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicatorLabels_1jg47_94 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
+    }
+  }
+  ._indicatorLabels_1jg47_94 {
+    gap: var(--tab-gap, var(--sys-unit-2));
+  }
+  ._indicatorLabels_1jg47_94 ._tab_1jg47_18 {
+    color: var(--tab-fg-active, var(--sys-color-on-primary));
+  }
+  ._panel_1jg47_112 {
+    border-radius: var(--sys-radius-sm);
+  }
+  ._panel_1jg47_112 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._panel_1jg47_112:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from "react";
+/** One tab in a bar, and the panel it opens. */
+export type Tab = Readonly<{
+    value: string;
+    label: string;
+    /** A count shown as a trailing badge. */
+    count?: number;
+    disabled?: boolean;
+}>;
+export type TabsRootProps = Readonly<{
+    tabs: readonly Tab[];
+    className?: string;
+    children: ReactNode;
+}> & (Readonly<{
+    /** The open tab's `value`, when controlled. */
+    value: string;
+    onValueChange: (value: string) => void;
+    defaultValue?: never;
+}> | Readonly<{
+    value?: never;
+    /** The tab open at first, when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}>);
+declare const Root: ({ tabs, value, defaultValue, onValueChange, className, children, }: TabsRootProps) => ReactNode;
+export type TabsBarProps = Readonly<{
+    /** What the tabs switch between, such as "Declaration". */
+    label: string;
+    className?: string;
+}>;
+declare const Bar: ({ label, className, }: TabsBarProps) => ReactNode;
+export type TabsPanelProps = Readonly<{
+    /** The `value` of the tab that opens this panel. */
+    value: string;
+    className?: string;
+    children: ReactNode;
+}>;
+declare const Panel: ({ value, className, children, }: TabsPanelProps) => ReactNode;
+type TabsParts = Readonly<{
+    Root: typeof Root;
+    Bar: typeof Bar;
+    Panel: typeof Panel;
+}>;
+/**
+ * In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
+ * out with a pill that slides to the open one, and each `Panel` holds what its
+ * tab opens. Tabs that lead to pages are a horizontal `Nav`.
+ *
+ * @example
+ * <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
+ * 	<Tabs.Bar label="Declaration" />
+ * 	<Tabs.Panel value="details">…</Tabs.Panel>
+ * 	<Tabs.Panel value="history">…</Tabs.Panel>
+ * </Tabs.Root>
+ */
+export declare const Tabs: TabsParts;
+export {};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,194 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Badge } from "../badge/badge.js";
+import tabs_module_default from "./tabs.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Tabs } from "@base-ui/react/tabs";
+// src/components/tabs/tabs.tsx
+var TabsContext = createContext(null);
+var useTabs = () => {
+	return useRequiredContext(TabsContext, "Tabs parts must be rendered inside Tabs.Root.");
+};
+var Root = (t0) => {
+	const $ = c(13);
+	const { tabs, value, defaultValue, onValueChange, className, children } = t0;
+	let t1;
+	if ($[0] !== onValueChange) {
+		t1 = (next) => {
+			if (typeof next === "string") onValueChange?.(next);
+		};
+		$[0] = onValueChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== className) {
+		t2 = clsx(tabs_module_default.root, className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== children || $[5] !== defaultValue || $[6] !== t1 || $[7] !== t2 || $[8] !== value) {
+		t3 = /* @__PURE__ */ jsx(Tabs.Root, {
+			value,
+			defaultValue,
+			onValueChange: t1,
+			className: t2,
+			children
+		});
+		$[4] = children;
+		$[5] = defaultValue;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = value;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t3 || $[11] !== tabs) {
+		t4 = /* @__PURE__ */ jsx(TabsContext, {
+			value: tabs,
+			children: t3
+		});
+		$[10] = t3;
+		$[11] = tabs;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+var TabContent = (t0) => {
+	const $ = c(5);
+	const { tab } = t0;
+	let t1;
+	if ($[0] !== tab.count) {
+		t1 = tab.count === void 0 ? null : /* @__PURE__ */ jsx(Badge, {
+			tone: "neutral",
+			variant: "subtle",
+			children: tab.count
+		});
+		$[0] = tab.count;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1 || $[3] !== tab.label) {
+		t2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [tab.label, t1] });
+		$[2] = t1;
+		$[3] = tab.label;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+var Bar = (t0) => {
+	const $ = c(15);
+	const { label, className } = t0;
+	const tabs = useTabs();
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(tabs_module_default.scroller, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== tabs) {
+		t2 = tabs.map(_temp);
+		$[2] = tabs;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== tabs) {
+		t3 = tabs.map(_temp2);
+		$[4] = tabs;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Tabs.Indicator, {
+			className: tabs_module_default.indicator,
+			children: /* @__PURE__ */ jsx("span", {
+				className: tabs_module_default.indicatorLabels,
+				"aria-hidden": "true",
+				children: t3
+			})
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== label || $[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Tabs.List, {
+			className: tabs_module_default.list,
+			"aria-label": label,
+			children: [t2, t4]
+		});
+		$[8] = label;
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t5
+		});
+		$[12] = t1;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+};
+var Panel = (t0) => {
+	const $ = c(6);
+	const { value, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(tabs_module_default.panel, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1 || $[4] !== value) {
+		t2 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			value,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = value;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+/**
+* In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
+* out with a pill that slides to the open one, and each `Panel` holds what its
+* tab opens. Tabs that lead to pages are a horizontal `Nav`.
+*
+* @example
+* <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
+* 	<Tabs.Bar label="Declaration" />
+* 	<Tabs.Panel value="details">…</Tabs.Panel>
+* 	<Tabs.Panel value="history">…</Tabs.Panel>
+* </Tabs.Root>
+*/
+var Tabs$1 = {
+	Root,
+	Bar,
+	Panel
+};
+function _temp(tab) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		value: tab.value,
+		disabled: tab.disabled,
+		className: tabs_module_default.tab,
+		children: /* @__PURE__ */ jsx(TabContent, { tab })
+	}, tab.value);
+}
+function _temp2(tab_0) {
+	return /* @__PURE__ */ jsx("span", {
+		className: tabs_module_default.tab,
+		children: /* @__PURE__ */ jsx(TabContent, { tab: tab_0 })
+	}, tab_0.value);
+}
+export { Tabs$1 as Tabs };

package/dist/components/tabs/tabs.module.js

@@ -0,0 +1,18 @@
+import './tabs.css';// src/components/tabs/tabs.module.scss
+var root = "_root_1jg47_3";
+var scroller = "_scroller_1jg47_8";
+var list = "_list_1jg47_12";
+var tab = "_tab_1jg47_18";
+var indicator = "_indicator_1jg47_56";
+var indicatorLabels = "_indicatorLabels_1jg47_94";
+var panel = "_panel_1jg47_112";
+var tabs_module_default = {
+	root,
+	scroller,
+	list,
+	tab,
+	indicator,
+	indicatorLabels,
+	panel
+};
+export { tabs_module_default as default, indicator, indicatorLabels, list, panel, root, scroller, tab };

package/dist/components/tag/index.d.ts

@@ -0,0 +1 @@
+export * from "./tag.tsx";

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { Tag } from "./tag.js";