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

package/dist/components/checkbox-group-field/checkbox-group-field.js

@@ -0,0 +1,128 @@
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/checkbox-group-field/checkbox-group-field.tsx
+/**
+* The assembled checkbox group: a fieldset named by its label, holding one box
+* per item, whose value is the array of ticked values; then the description
+* and the error.
+*
+* @example
+* <CheckboxGroupField
+* 	label="Statuses"
+* 	optionalLabel="optional"
+* 	items={[{ label: "Open", value: "open" }]}
+* 	value={statuses}
+* 	onValueChange={setStatuses}
+* />
+*/
+var CheckboxGroupField = (t0) => {
+	const $ = c(38);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled } = t0;
+	const { controlId } = CheckboxGroup.useIds();
+	const prefix = name ?? controlId;
+	const t1 = value !== void 0 && value.length > 0;
+	let t2;
+	if ($[0] !== label || $[1] !== optionalLabel || $[2] !== requiredness) {
+		t2 = /* @__PURE__ */ jsx(CheckboxGroup.Legend, {
+			requiredness,
+			optionalLabel,
+			children: label
+		});
+		$[0] = label;
+		$[1] = optionalLabel;
+		$[2] = requiredness;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== items || $[5] !== onBlur || $[6] !== prefix || $[7] !== readOnly) {
+		let t4;
+		if ($[9] !== onBlur || $[10] !== prefix || $[11] !== readOnly) {
+			t4 = (item) => /* @__PURE__ */ jsxs(CheckboxGroup.Item, { children: [/* @__PURE__ */ jsx(CheckboxGroup.Checkbox, {
+				id: `${prefix}-${item.value}`,
+				name: prefix,
+				inputRef: detachHiddenInput,
+				value: item.value,
+				onBlur,
+				readOnly
+			}), item.label] }, item.value);
+			$[9] = onBlur;
+			$[10] = prefix;
+			$[11] = readOnly;
+			$[12] = t4;
+		} else t4 = $[12];
+		t3 = items.map(t4);
+		$[4] = items;
+		$[5] = onBlur;
+		$[6] = prefix;
+		$[7] = readOnly;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[13] !== defaultValue || $[14] !== disabled || $[15] !== onValueChange || $[16] !== t3 || $[17] !== value) {
+		t4 = /* @__PURE__ */ jsx(CheckboxGroup.Group, {
+			value,
+			defaultValue,
+			onValueChange,
+			disabled,
+			children: t3
+		});
+		$[13] = defaultValue;
+		$[14] = disabled;
+		$[15] = onValueChange;
+		$[16] = t3;
+		$[17] = value;
+		$[18] = t4;
+	} else t4 = $[18];
+	let t5;
+	if ($[19] !== description) {
+		t5 = /* @__PURE__ */ jsx(CheckboxGroup.Description, { children: description });
+		$[19] = description;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== errors) {
+		t6 = /* @__PURE__ */ jsx(CheckboxGroup.Error, { children: errors });
+		$[21] = errors;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== className || $[24] !== dirty || $[25] !== disabled || $[26] !== errors || $[27] !== name || $[28] !== pending || $[29] !== readOnly || $[30] !== requiredness || $[31] !== t1 || $[32] !== t2 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== touched) {
+		t7 = /* @__PURE__ */ jsxs(CheckboxGroup.Root, {
+			name,
+			className,
+			disabled,
+			readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t1,
+			children: [
+				t2,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[23] = className;
+		$[24] = dirty;
+		$[25] = disabled;
+		$[26] = errors;
+		$[27] = name;
+		$[28] = pending;
+		$[29] = readOnly;
+		$[30] = requiredness;
+		$[31] = t1;
+		$[32] = t2;
+		$[33] = t4;
+		$[34] = t5;
+		$[35] = t6;
+		$[36] = touched;
+		$[37] = t7;
+	} else t7 = $[37];
+	return t7;
+};
+export { CheckboxGroupField };

package/dist/components/checkbox-group-field/checkbox-group.css

@@ -0,0 +1,31 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_126dd_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--checkbox-group-gap, var(--sys-unit-6));
+  }
+  ._label_126dd_9 {
+    cursor: pointer;
+  }
+  ._label_126dd_9:hover [role=checkbox] {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._label_126dd_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._label_126dd_9:hover [role=checkbox]:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._label_126dd_9 {
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "control text";
+    align-items: center;
+    gap: var(--sys-unit-1) var(--sys-unit-6);
+  }
+  ._label_126dd_9:has(> [data-optional-suffix]) {
+    grid-template-areas: "control text" "control optional";
+  }
+}

package/dist/components/checkbox-group-field/checkbox-group.d.ts

@@ -0,0 +1,39 @@
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Field as BaseField } from "@base-ui/react/field";
+import type { ReactNode } from "react";
+import { Checkbox } from "../checkbox-field/index.ts";
+import { Field } from "../field/index.ts";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+export type CheckboxGroupRootProps = FieldsetRootProps;
+declare const CheckboxGroupGroup: ({ className, ...props }: BaseCheckboxGroup.Props) => ReactNode;
+declare const CheckboxGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;
+/** The parts of a checkbox group. */
+export type CheckboxGroupParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Group: typeof CheckboxGroupGroup;
+    Item: typeof CheckboxGroupItem;
+    Checkbox: typeof Checkbox;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a base-ui CheckboxGroup: one labelled box per value. The
+ * `Root` is a fieldset named by its `Legend`. For the ordinary case, use
+ * `CheckboxGroupField`.
+ *
+ * @example
+ * <CheckboxGroup.Root filled={values.length > 0}>
+ * 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
+ * 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
+ * 		<CheckboxGroup.Item>
+ * 			<CheckboxGroup.Checkbox value="open" />
+ * 			Open
+ * 		</CheckboxGroup.Item>
+ * 	</CheckboxGroup.Group>
+ * </CheckboxGroup.Root>
+ */
+export declare const CheckboxGroup: CheckboxGroupParts;
+export {};
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/checkbox-group-field/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group-field/checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EACN,cAAc,EACd,YAAY,EACZ,KAAK,iBAAiB,EACtB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,QAAA,MAAM,kBAAkB,4BAGrB,iBAAiB,CAAC,KAAK,KAAG,SAK5B,CAAC;AAEF,QAAA,MAAM,iBAAiB,4BAGpB,SAAS,CAAC,IAAI,CAAC,KAAK,KAAG,SAUzB,CAAC;AAEF,qCAAqC;AACrC,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACzC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,KAAK,EAAE,OAAO,kBAAkB,CAAC;IACjC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,WAAW,EAAE,OAAO,KAAK,CAAC,WAAW,CAAC;IACtC,KAAK,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC;IAC1B,MAAM,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,kBAS3B,CAAC"}

package/dist/components/checkbox-group-field/checkbox-group.js

@@ -0,0 +1,102 @@
+import { Checkbox } from "../checkbox-field/checkbox.js";
+import { Field as Field$1 } from "../field/field.js";
+import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import checkbox_group_module_default from "./checkbox-group.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 { CheckboxGroup } from "@base-ui/react/checkbox-group";
+// src/components/checkbox-group-field/checkbox-group.tsx
+var CheckboxGroupGroup = (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(checkbox_group_module_default.group, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CheckboxGroup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var CheckboxGroupItem = (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 = (itemProps) => /* @__PURE__ */ jsx(Field.Label, {
+			className: clsx(checkbox_group_module_default.label, className),
+			...itemProps
+		});
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Item, {
+			render: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The styled parts of a base-ui CheckboxGroup: one labelled box per value. The
+* `Root` is a fieldset named by its `Legend`. For the ordinary case, use
+* `CheckboxGroupField`.
+*
+* @example
+* <CheckboxGroup.Root filled={values.length > 0}>
+* 	<CheckboxGroup.Legend optionalLabel="optional">Statuses</CheckboxGroup.Legend>
+* 	<CheckboxGroup.Group value={values} onValueChange={setValues}>
+* 		<CheckboxGroup.Item>
+* 			<CheckboxGroup.Checkbox value="open" />
+* 			Open
+* 		</CheckboxGroup.Item>
+* 	</CheckboxGroup.Group>
+* </CheckboxGroup.Root>
+*/
+var CheckboxGroup$1 = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: CheckboxGroupGroup,
+	Item: CheckboxGroupItem,
+	Checkbox,
+	Description: Field$1.Description,
+	Error: Field$1.Error,
+	useIds: Field$1.useIds
+};
+export { CheckboxGroup$1 as CheckboxGroup };

package/dist/components/checkbox-group-field/checkbox-group.module.js

@@ -0,0 +1,8 @@
+import './checkbox-group.css';// src/components/checkbox-group-field/checkbox-group.module.scss
+var group = "_group_126dd_3";
+var label = "_label_126dd_9";
+var checkbox_group_module_default = {
+	group,
+	label
+};
+export { checkbox_group_module_default as default, group, label };

package/dist/components/checkbox-group-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./checkbox-group.tsx";
+export * from "./checkbox-group-field.tsx";
+export * from "./tsf-checkbox-group-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox-group-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC"}

package/dist/components/checkbox-group-field/index.js

@@ -0,0 +1,4 @@
+import { CheckboxGroup } from "./checkbox-group.js";
+import { CheckboxGroupField } from "./checkbox-group-field.js";
+import { TSFCheckboxGroupField } from "./tsf-checkbox-group-field.js";
+export { CheckboxGroup, CheckboxGroupField, TSFCheckboxGroupField };

package/dist/components/checkbox-group-field/tsf-checkbox-group-field.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type CheckboxGroupFieldProps } from "./checkbox-group-field.tsx";
+export type TSFCheckboxGroupFieldProps = Omit<CheckboxGroupFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `CheckboxGroupField` bound to the TanStack Form field it renders in, whose
+ * value is the array of ticked values. Reach it as `field.CheckboxGroupField`
+ * inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="statuses">
+ * 	{field => <field.CheckboxGroupField label="Statuses" items={statuses} optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFCheckboxGroupField: (props: TSFCheckboxGroupFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-checkbox-group-field.d.ts.map

package/dist/components/checkbox-group-field/tsf-checkbox-group-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-checkbox-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group-field/tsf-checkbox-group-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,uBAAuB,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC5C,uBAAuB,EACrB,MAAM,mBAAmB,GACzB,OAAO,GACP,cAAc,GACd,eAAe,CACjB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,UAC1B,0BAA0B,KAC/B,SAYF,CAAC"}

package/dist/components/checkbox-group-field/tsf-checkbox-group-field.js

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { CheckboxGroupField } from "./checkbox-group-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/checkbox-group-field/tsf-checkbox-group-field.tsx
+/**
+* `CheckboxGroupField` bound to the TanStack Form field it renders in, whose
+* value is the array of ticked values. Reach it as `field.CheckboxGroupField`
+* inside `form.AppField`.
+*
+* @example
+* <form.AppField name="statuses">
+* 	{field => <field.CheckboxGroupField label="Statuses" items={statuses} optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFCheckboxGroupField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (value) => field.handleChange(value);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(CheckboxGroupField, {
+			...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 { TSFCheckboxGroupField };

package/dist/components/collapsible/collapsible.css

@@ -0,0 +1,88 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1uobn_3 {
+    display: flex;
+    flex-direction: column;
+  }
+  ._trigger_1uobn_7 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--collapsible-trigger-gap, var(--sys-unit-4));
+    box-sizing: border-box;
+    inline-size: 100%;
+    border: none;
+    border-radius: var(--collapsible-trigger-radius, var(--sys-radius-sm));
+    background: var(--collapsible-trigger-bg, transparent);
+    padding: var(--collapsible-trigger-pad-y, var(--sys-unit-4)) var(--collapsible-trigger-pad-x, var(--sys-unit-6));
+    color: var(--collapsible-trigger-fg, var(--sys-color-text));
+    font: var(--collapsible-trigger-font, var(--sys-font-label-large));
+    text-align: start;
+    cursor: pointer;
+  }
+  ._trigger_1uobn_7 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._trigger_1uobn_7:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._trigger_1uobn_7 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._trigger_1uobn_7::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._trigger_1uobn_7::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._trigger_1uobn_7:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._trigger_1uobn_7:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._trigger_1uobn_7[data-disabled] {
+    color: var(--sys-color-text-muted);
+    cursor: not-allowed;
+  }
+  ._chevron_1uobn_59 {
+    flex-shrink: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._chevron_1uobn_59 {
+      transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  [data-panel-open] > ._chevron_1uobn_59 {
+    rotate: 180deg;
+  }
+  ._panel_1uobn_70 {
+    overflow: hidden;
+  }
+  ._panel_1uobn_70[hidden]:not([hidden=until-found]) {
+    display: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._panel_1uobn_70 {
+      block-size: var(--collapsible-panel-height);
+      transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
+    }
+    ._panel_1uobn_70[data-starting-style], ._panel_1uobn_70[data-ending-style] {
+      block-size: 0;
+    }
+  }
+  ._content_1uobn_85 {
+    padding: var(--collapsible-pad-y, var(--sys-unit-4)) var(--collapsible-pad-x, var(--sys-unit-6));
+  }
+}

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,34 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type { ReactNode } from "react";
+export type CollapsibleRootProps = Omit<BaseCollapsible.Root.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+export type CollapsibleTriggerProps = Omit<BaseCollapsible.Trigger.Props, "className" | "children"> & Readonly<{
+    className?: string;
+    /** What the panel holds, as the trigger's label. */
+    children: ReactNode;
+}>;
+export type CollapsiblePanelProps = Omit<BaseCollapsible.Panel.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const Root: ({ className, ...props }: CollapsibleRootProps) => ReactNode;
+declare const Trigger: ({ className, children, ...props }: CollapsibleTriggerProps) => ReactNode;
+declare const Panel: ({ className, children, ...props }: CollapsiblePanelProps) => ReactNode;
+type CollapsibleNamespace = Readonly<{
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+}>;
+/**
+ * A panel that folds open and shut under a trigger that names it, on base-ui's
+ * `Collapsible`.
+ *
+ * @example
+ * <Collapsible.Root>
+ * 	<Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+ * 	<Collapsible.Panel>{settings}</Collapsible.Panel>
+ * </Collapsible.Root>
+ */
+export declare const Collapsible: CollapsibleNamespace;
+export {};
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,eAAe,CAAC,IAAI,CAAC,KAAK,EAC1B,WAAW,CACX,GACA,QAAQ,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,eAAe,CAAC,OAAO,CAAC,KAAK,EAC7B,WAAW,GAAG,UAAU,CACxB,GACA,QAAQ,CAAC;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,eAAe,CAAC,KAAK,CAAC,KAAK,EAC3B,WAAW,CACX,GACA,QAAQ,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElC,QAAA,MAAM,IAAI,4BAGP,oBAAoB,KAAG,SAKzB,CAAC;AAEF,QAAA,MAAM,OAAO,sCAIV,uBAAuB,KAAG,SAY5B,CAAC;AAEF,QAAA,MAAM,KAAK,sCAIR,qBAAqB,KAAG,SAM1B,CAAC;AAEF,KAAK,oBAAoB,GAAG,QAAQ,CAAC;IACpC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,oBAIzB,CAAC"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,146 @@
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { Icon } from "../icon/icon.js";
+import collapsible_module_default from "./collapsible.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/collapsible.tsx
+var Root = (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(collapsible_module_default.root, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Root, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Trigger = (t0) => {
+	const $ = c(11);
+	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(collapsible_module_default.trigger, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			svg: SvgExpandMore,
+			label: "",
+			size: 1.5,
+			className: collapsible_module_default.chevron
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: t1,
+			...props,
+			children: [children, t2]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+var Panel = (t0) => {
+	const $ = c(12);
+	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(collapsible_module_default.content, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[6] = children;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: collapsible_module_default.panel,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+/**
+* A panel that folds open and shut under a trigger that names it, on base-ui's
+* `Collapsible`.
+*
+* @example
+* <Collapsible.Root>
+* 	<Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+* 	<Collapsible.Panel>{settings}</Collapsible.Panel>
+* </Collapsible.Root>
+*/
+var Collapsible$1 = {
+	Root,
+	Trigger,
+	Panel
+};
+export { Collapsible$1 as Collapsible };

package/dist/components/collapsible/collapsible.module.js

@@ -0,0 +1,14 @@
+import './collapsible.css';// src/components/collapsible/collapsible.module.scss
+var root = "_root_1uobn_3";
+var trigger = "_trigger_1uobn_7";
+var chevron = "_chevron_1uobn_59";
+var panel = "_panel_1uobn_70";
+var content = "_content_1uobn_85";
+var collapsible_module_default = {
+	root,
+	trigger,
+	chevron,
+	panel,
+	content
+};
+export { chevron, content, collapsible_module_default as default, panel, root, trigger };

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

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