@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,529 @@
+import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
+import { Button } from "../button/button.js";
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { OPTIONS_LOADED, optionsLoadMessage } from "../field/options-load.js";
+import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
+import { Icon } from "../icon/icon.js";
+import { Spinner } from "../spinner/spinner.js";
+import { SelectContext, useSelectContext } from "./select-context.js";
+import select_module_default from "./select.module.js";
+import { c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Select } from "@base-ui/react/select";
+// src/components/select-field/select.tsx
+var SelectRoot = (t0) => {
+	const $ = c(15);
+	let onValueChange;
+	let options;
+	let props;
+	if ($[0] !== t0) {
+		({options, onValueChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = onValueChange;
+		$[2] = options;
+		$[3] = props;
+	} else {
+		onValueChange = $[1];
+		options = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== options) {
+		t1 = { options };
+		$[4] = options;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== onValueChange) {
+		t2 = (next) => {
+			if (next !== null) onValueChange?.(next);
+		};
+		$[6] = onValueChange;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== options || $[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Select.Root, {
+			items: options,
+			onValueChange: t2,
+			...props
+		});
+		$[8] = options;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t1 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx(SelectContext, {
+			value: t1,
+			children: t3
+		});
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+};
+var SelectLabel = (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(select_module_default.label, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.Label, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var NO_STATE = {};
+var SelectTrigger = (t0) => {
+	const $ = c(22);
+	let children;
+	let className;
+	let placeholder;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({placeholder, state: t1, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = placeholder;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		placeholder = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const state = t1 === void 0 ? NO_STATE : t1;
+	const focus = useFieldFocus(props);
+	const t2 = state.invalid === true || void 0;
+	let t3;
+	if ($[6] !== className) {
+		t3 = clsx(select_module_default.trigger, className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== focus || $[9] !== state) {
+		t4 = fieldStateAttributes(withFieldFocus(state, focus));
+		$[8] = focus;
+		$[9] = state;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== children || $[12] !== placeholder || $[13] !== state.pending) {
+		t5 = children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Select.Value, {
+				className: select_module_default.value,
+				placeholder
+			}),
+			state.pending === true && /* @__PURE__ */ jsx(Field.Pending, {}),
+			/* @__PURE__ */ jsx(Select.Icon, {
+				className: select_module_default.icon,
+				children: /* @__PURE__ */ jsx(Icon, {
+					svg: SvgExpandMore,
+					label: ""
+				})
+			})
+		] });
+		$[11] = children;
+		$[12] = placeholder;
+		$[13] = state.pending;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== focus.props || $[16] !== props || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Select.Trigger, {
+			"aria-invalid": t2,
+			className: t3,
+			...t4,
+			...props,
+			...focus.props,
+			children: t5
+		});
+		$[15] = focus.props;
+		$[16] = props;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+};
+var SelectPositioner = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({className, sideOffset: t1, alignItemWithTrigger: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const sideOffset = t1 === void 0 ? 4 : t1;
+	const alignItemWithTrigger = t2 === void 0 ? false : t2;
+	const t3 = usePopupEdgePadding();
+	let t4;
+	if ($[5] !== className) {
+		t4 = clsx(select_module_default.positioner, className);
+		$[5] = className;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== alignItemWithTrigger || $[8] !== props || $[9] !== sideOffset || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Select.Positioner, {
+			...t3,
+			className: t4,
+			sideOffset,
+			alignItemWithTrigger,
+			...props
+		});
+		$[7] = alignItemWithTrigger;
+		$[8] = props;
+		$[9] = sideOffset;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+var SelectPopup = (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(select_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Select.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var SelectItem = (t0) => {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(select_module_default.item, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ jsx(Select.ItemText, {
+			className: select_module_default.itemText,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: select_module_default.indicator,
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg: SvgCheck,
+				label: ""
+			})
+		});
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(Select.Item, {
+			className: t1,
+			...props,
+			children: [t2, t3]
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* Every option of the enclosing `Select.Root`, in the order it was given them.
+* Compose the parts directly instead where a row is more than its label.
+*/
+var SelectItems = () => {
+	const $ = c(2);
+	const { options } = useSelectContext();
+	let t0;
+	if ($[0] !== options) {
+		t0 = options.map(_temp);
+		$[0] = options;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+var SelectStatus = (t0) => {
+	const $ = c(14);
+	const { load, onRetry, ...labels } = t0;
+	const { options } = useSelectContext();
+	const retry = load.status === "error" ? load.retry : void 0;
+	const t1 = select_module_default;
+	const t2 = "status";
+	const t3 = "polite";
+	const t4 = "true";
+	const t5 = select_module_default;
+	let t6;
+	if ($[0] !== load.status) {
+		t6 = load.status === "pending" && /* @__PURE__ */ jsx(Spinner, { size: 1 });
+		$[0] = load.status;
+		$[1] = t6;
+	} else t6 = $[1];
+	const t7 = optionsLoadMessage(load, labels) ?? (options.length === 0 ? labels.noOptionsLabel : void 0);
+	let t8;
+	if ($[2] !== t5.status || $[3] !== t6 || $[4] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			role: t2,
+			"aria-live": t3,
+			"aria-atomic": t4,
+			className: t5.status,
+			children: [t6, t7]
+		});
+		$[2] = t5.status;
+		$[3] = t6;
+		$[4] = t7;
+		$[5] = t8;
+	} else t8 = $[5];
+	let t9;
+	if ($[6] !== labels || $[7] !== onRetry || $[8] !== retry) {
+		t9 = retry !== void 0 && /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			size: "sm",
+			onClick: () => {
+				onRetry(retry);
+			},
+			children: labels.retryLabel
+		});
+		$[6] = labels;
+		$[7] = onRetry;
+		$[8] = retry;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== t1.statusArea || $[11] !== t8 || $[12] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: t1.statusArea,
+			children: [t8, t9]
+		});
+		$[10] = t1.statusArea;
+		$[11] = t8;
+		$[12] = t9;
+		$[13] = t10;
+	} else t10 = $[13];
+	return t10;
+};
+/**
+* The trigger over the portalled list of every option: the shape almost every
+* select takes. Reach for the parts where the list needs anything else.
+*/
+var SelectControl = (t0) => {
+	const $ = c(24);
+	let loadBrokenLabel;
+	let loadFailedLabel;
+	let loadingLabel;
+	let noOptionsLabel;
+	let props;
+	let retryLabel;
+	let t1;
+	if ($[0] !== t0) {
+		({load: t1, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, ...props} = t0);
+		$[0] = t0;
+		$[1] = loadBrokenLabel;
+		$[2] = loadFailedLabel;
+		$[3] = loadingLabel;
+		$[4] = noOptionsLabel;
+		$[5] = props;
+		$[6] = retryLabel;
+		$[7] = t1;
+	} else {
+		loadBrokenLabel = $[1];
+		loadFailedLabel = $[2];
+		loadingLabel = $[3];
+		noOptionsLabel = $[4];
+		props = $[5];
+		retryLabel = $[6];
+		t1 = $[7];
+	}
+	const load = t1 === void 0 ? OPTIONS_LOADED : t1;
+	const popupRef = useRef(null);
+	let t2;
+	if ($[8] !== props) {
+		t2 = /* @__PURE__ */ jsx(SelectTrigger, { ...props });
+		$[8] = props;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (retry) => {
+			retry();
+			popupRef.current?.focus();
+		};
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== load || $[12] !== loadBrokenLabel || $[13] !== loadFailedLabel || $[14] !== loadingLabel || $[15] !== noOptionsLabel || $[16] !== retryLabel) {
+		t4 = /* @__PURE__ */ jsx(SelectStatus, {
+			load,
+			loadingLabel,
+			loadFailedLabel,
+			loadBrokenLabel,
+			retryLabel,
+			noOptionsLabel,
+			onRetry: t3
+		});
+		$[11] = load;
+		$[12] = loadBrokenLabel;
+		$[13] = loadFailedLabel;
+		$[14] = loadingLabel;
+		$[15] = noOptionsLabel;
+		$[16] = retryLabel;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Select.List, { children: /* @__PURE__ */ jsx(SelectItems, {}) });
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== t4) {
+		t6 = /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsxs(SelectPopup, {
+			ref: popupRef,
+			children: [t4, t5]
+		}) }) });
+		$[19] = t4;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t2 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t6] });
+		$[21] = t2;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+};
+/**
+* The styled parts of a base-ui Select: a trigger wearing the same treatment as
+* every text input, over the shared popup surface. `Root` holds the options, so
+* no part below it takes the list again. For a labelled field, use
+* `SelectField`; a control in a toolbar composes these directly.
+*
+* @example
+* <Select.Root options={options} value={value} onValueChange={setValue}>
+* 	<Select.Label>Status</Select.Label>
+* 	<Select.Control
+* 		loadingLabel="Loading options…"
+* 		loadFailedLabel="Options could not be loaded."
+* 		loadBrokenLabel="Options could not be loaded, and trying again won't help."
+* 		retryLabel="Try again"
+* 		noOptionsLabel="No options available."
+* 	/>
+* </Select.Root>
+*/
+var Select$1 = {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Trigger: SelectTrigger,
+	Value: Select.Value,
+	Icon: Select.Icon,
+	Portal: Select.Portal,
+	Positioner: SelectPositioner,
+	Popup: SelectPopup,
+	List: Select.List,
+	Item: SelectItem,
+	Items: SelectItems,
+	Group: Select.Group,
+	GroupLabel: Select.GroupLabel,
+	Separator: Select.Separator,
+	Control: SelectControl,
+	Pending: Field.Pending,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsxs(SelectItem, {
+		value: option.value,
+		children: [option.label, option.detail !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: select_module_default.itemDetail,
+			children: option.detail
+		})]
+	}, option.value);
+}
+export { Select$1 as Select };

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

@@ -0,0 +1,30 @@
+import './select.css';// src/components/select-field/select.module.scss
+var field = "_field_nro8f_3";
+var label = "_label_nro8f_9";
+var trigger = "_trigger_nro8f_14";
+var value = "_value_nro8f_89";
+var icon = "_icon_nro8f_97";
+var positioner = "_positioner_nro8f_102";
+var popup = "_popup_nro8f_116";
+var item = "_item_nro8f_142";
+var statusArea = "_statusArea_nro8f_190";
+var status = "_status_nro8f_190";
+var itemText = "_itemText_nro8f_214";
+var itemDetail = "_itemDetail_nro8f_218";
+var indicator = "_indicator_nro8f_223";
+var select_module_default = {
+	field,
+	label,
+	trigger,
+	value,
+	icon,
+	positioner,
+	popup,
+	item,
+	statusArea,
+	status,
+	itemText,
+	itemDetail,
+	indicator
+};
+export { select_module_default as default, field, icon, indicator, item, itemDetail, itemText, label, popup, positioner, status, statusArea, trigger, value };

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type SelectFieldProps } from "./select-field.tsx";
+export type TSFSelectFieldProps<T extends string> = Omit<SelectFieldProps<T>, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `SelectField` bound to the TanStack Form field it renders in, whose value is
+ * the selected option's value. Leaving the field, popup included, blurs it.
+ * Reach it as `field.SelectField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="status">
+ * 	{field => <field.SelectField label="Status" optionalLabel="optional" options={statusOptions} {...selectLabels} />}
+ * </form.AppField>
+ */
+export declare const TSFSelectField: <T extends string>(props: TSFSelectFieldProps<T>) => ReactNode;
+//# sourceMappingURL=tsf-select-field.d.ts.map

package/dist/components/select-field/tsf-select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-select-field.d.ts","sourceRoot":"","sources":["../../../src/components/select-field/tsf-select-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,gBAAgB,EACrB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CACvD,gBAAgB,CAAC,CAAC,CAAC,EACjB,MAAM,mBAAmB,GACzB,OAAO,GACP,cAAc,GACd,eAAe,CACjB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,SACvC,mBAAmB,CAAC,CAAC,CAAC,KAC3B,SAYF,CAAC"}

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

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { SelectField } from "./select-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/select-field/tsf-select-field.tsx
+/**
+* `SelectField` bound to the TanStack Form field it renders in, whose value is
+* the selected option's value. Leaving the field, popup included, blurs it.
+* Reach it as `field.SelectField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="status">
+* 	{field => <field.SelectField label="Status" optionalLabel="optional" options={statusOptions} {...selectLabels} />}
+* </form.AppField>
+*/
+var TSFSelectField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SelectField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFSelectField };

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

@@ -0,0 +1,2 @@
+export * from "./skeleton.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/components/skeleton/skeleton.css

@@ -0,0 +1,16 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  @keyframes _loading-pulse_1vc0q_1 {
+    50% {
+      opacity: 1;
+    }
+  }
+  ._skeleton_1vc0q_8 {
+    display: block;
+    border-radius: var(--skeleton-radius, var(--sys-radius-xs));
+    background-color: var(--skeleton-bg, var(--sys-color-surface-highest));
+    block-size: 1em;
+    opacity: var(--skeleton-rest, 0.75);
+    animation: _loading-pulse_1vc0q_1 2.4s var(--sys-motion-standard) infinite;
+  }
+}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type SkeletonProps = Readonly<{
+    className?: string;
+}>;
+/**
+ * A placeholder block standing in for content that has not arrived yet. Sized by
+ * its container, one line of the current font tall, and hidden from assistive
+ * tech: the region it fills carries the busy state.
+ *
+ * @example
+ * {isPending ? <Skeleton /> : <span>{user.fullName}</span>}
+ */
+export declare const Skeleton: ({ className, }: SkeletonProps) => ReactNode;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,mBAElB,aAAa,KAAG,SAKlB,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,34 @@
+import skeleton_module_default from "./skeleton.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/skeleton/skeleton.tsx
+/**
+* A placeholder block standing in for content that has not arrived yet. Sized by
+* its container, one line of the current font tall, and hidden from assistive
+* tech: the region it fills carries the busy state.
+*
+* @example
+* {isPending ? <Skeleton /> : <span>{user.fullName}</span>}
+*/
+var Skeleton = (t0) => {
+	const $ = c(4);
+	const { className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(skeleton_module_default.skeleton, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			"aria-hidden": "true"
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+};
+export { Skeleton };