@stealthscale/component-disclosure 0.2.2 → 0.2.4

package/dist/pages/collapsible/collapsible.js

@@ -0,0 +1,173 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { p as recipe } from "../../recipes-95yCB2V3.js";
+import { Ft as Root, It as Indicator, Lt as Content, Pt as Trigger } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/collapsible/examples/delivery.example.tsx
+var delivery_example_exports = /* @__PURE__ */ __exportAll({
+	Delivery: () => Delivery,
+	source: () => source$1
+});
+function Delivery(props) {
+	const $ = c(13);
+	const { t } = useWords("collapsible");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("delivery");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsxs(Trigger, { children: [t0, t1] });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("arrives");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Content, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t2, t4]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Collapsible } from \"@stealthscale/component-disclosure\";\n\nexport function Delivery(props: Collapsible.RootProps): ReactElement {\n  const { t } = useWords(\"collapsible\");\n\n  return (\n    <Collapsible.Root {...props}>\n      <Collapsible.Trigger>\n        {t(\"delivery\")}\n        <Collapsible.Indicator>\n          <ChevronDownIcon size=\"100%\" />\n        </Collapsible.Indicator>\n      </Collapsible.Trigger>\n      <Collapsible.Content>{t(\"arrives\")}</Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n";
+//#endregion
+//#region src/collapsible/examples/terms.example.tsx
+var terms_example_exports = /* @__PURE__ */ __exportAll({
+	Terms: () => Terms,
+	source: () => source
+});
+function Terms() {
+	const $ = c(12);
+	const { t } = useWords("collapsible");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("delivery");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "100%" }) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsxs(Trigger, { children: [t0, t1] });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("terms");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Content, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			collapsedHeight: "2lh",
+			variant: "subtle",
+			children: [t2, t4]
+		});
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Collapsible } from \"@stealthscale/component-disclosure\";\n\nexport function Terms(): ReactElement {\n  const { t } = useWords(\"collapsible\");\n\n  return (\n    <Collapsible.Root collapsedHeight=\"2lh\" variant=\"subtle\">\n      <Collapsible.Trigger>\n        {t(\"delivery\")}\n        <Collapsible.Indicator>\n          <ChevronDownIcon size=\"100%\" />\n        </Collapsible.Indicator>\n      </Collapsible.Trigger>\n      <Collapsible.Content>{t(\"terms\")}</Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n";
+//#endregion
+//#region src/collapsible/collapsible.specimen.tsx
+/**
+* Catalogue page for the collapsible.
+*
+* @remarks
+*   `scenesOf` generates the looks, palettes, sizes and motions from the delivery example. The
+*   looks and palettes render open, so the content shows, and the palettes use the subtle look,
+*   which fills the box. The sizes and motions render closed in
+*   the outline look, because a motion shows only on a press. The preview scene is hand-written,
+*   because `collapsedHeight` needs content longer than two lines. Every collapsible renders in an
+*   `md` room, and every scene shows its example file as its source. The words are keys under
+*   `collapsible` in `locales/en/specimen/collapsible.json`.
+*/
+/**
+* Hand-written scene for content that keeps two lines visible while closed.
+*/
+const preview = {
+	about: "collapsible.preview.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Terms, {})
+	}),
+	example: terms_example_exports,
+	title: "collapsible.preview.title"
+};
+var collapsible_specimen_default = specimen({
+	about: "collapsible.about",
+	id: "components/disclosure/collapsible",
+	imports: "import { Collapsible } from \"@stealthscale/component-disclosure\";",
+	scenes: [...scenesOf(recipe, {
+		axes: {
+			motion: { with: { variant: "outline" } },
+			palette: { with: {
+				defaultOpen: true,
+				variant: "subtle"
+			} },
+			size: {
+				direction: "column",
+				with: { variant: "outline" }
+			},
+			variant: {
+				direction: "column",
+				with: { defaultOpen: true }
+			}
+		},
+		draw: (props) => /* @__PURE__ */ jsx(Room, {
+			size: "md",
+			children: /* @__PURE__ */ jsx(Delivery, { ...props })
+		}),
+		example: delivery_example_exports,
+		namespace: "collapsible",
+		order: [
+			"variant",
+			"palette",
+			"size",
+			"motion"
+		]
+	}), preview],
+	title: "collapsible.title"
+});
+//#endregion
+export { collapsible_specimen_default as default, preview };

package/dist/pages/collapsible/collapsible.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ContentProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1039}, "TriggerProps": {"conditions": 284, "foreign": 1051}};
+export const parts = {"ContentProps": [], "IndicatorProps": [], "RootProps": [{"accepts": "string | number", "fallback": "", "kind": "option", "name": "collapsedHeight", "refers": [], "required": false, "says": "The height of the content when collapsed."}, {"accepts": "string | number", "fallback": "", "kind": "option", "name": "collapsedWidth", "refers": [], "required": false, "says": "The width of the content when collapsed."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "defaultOpen", "refers": [], "required": false, "says": "The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the collapsible is disabled."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["collapsible.ElementIds"], "required": false, "says": "The ids of the elements in the collapsible. Useful for composition."}, {"accepts": "\"fade\" | \"none\" | \"slide\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Animation of the content as it opens and closes."}, {"accepts": "VoidFunction", "fallback": "", "kind": "option", "name": "onExitComplete", "refers": [], "required": false, "says": "The callback invoked when the exit animation completes."}, {"accepts": "((details: OpenChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onOpenChange", "refers": ["collapsible.OpenChangeDetails"], "required": false, "says": "The callback invoked when the open state changes."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "open", "refers": [], "required": false, "says": "The controlled open state of the collapsible."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the looks read, set on the root."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Size of the trigger on the control scale, the indicator on the icon scale and the content's padding on the inset scale."}, {"accepts": "\"outline\" | \"plain\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the box around the trigger and the content."}], "TriggerProps": []};
+export const shapes = {"collapsible.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "content", "says": ""}, {"accepts": "string", "name": "trigger", "says": ""}], "collapsible.OpenChangeDetails": [{"accepts": "boolean", "name": "open", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};

package/dist/pages/details/details.js

@@ -0,0 +1,281 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { f as recipe } from "../../recipes-95yCB2V3.js";
+import { At as Root, Mt as Content, jt as Indicator, kt as Summary } from "../../shared-Cfsikh3X.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ChevronRightIcon, CircleAlertIcon } from "lucide-react";
+import { Stack } from "@stealthscale/component-layout";
+import { Code } from "@stealthscale/component-typography";
+import { DataList } from "@stealthscale/component-collections";
+import { Alert } from "@stealthscale/component-feedback";
+//#region src/details/examples/declined.example.tsx
+var declined_example_exports = /* @__PURE__ */ __exportAll({
+	Declined: () => Declined,
+	source: () => source$2
+});
+const FIELDS = [
+	["code", "card_declined"],
+	["reason", "insufficient_funds"],
+	["request", "req_7Hq2Lx9"]
+];
+function Declined() {
+	const $ = c(27);
+	const { t } = useWords("details");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Alert.Indicator, { children: /* @__PURE__ */ jsx(CircleAlertIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("declined.heading");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Alert.Title, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("declined.description");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Alert.Description, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Alert.Root, {
+			status: "error",
+			children: [t0, /* @__PURE__ */ jsxs(Alert.Content, { children: [t2, t4] })]
+		});
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("declined.show");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Summary, { children: [t6, t7] });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = FIELDS.map((t10) => {
+			const [field, value] = t10;
+			return /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: t(`declined.fields.${field}`) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: /* @__PURE__ */ jsx(Code, { children: value }) })] }, field);
+		});
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(DataList.Root, {
+			size: "sm",
+			children: t9
+		}) });
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Root, {
+			size: "sm",
+			children: [t8, t10]
+		});
+		$[21] = t10;
+		$[22] = t8;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t5) {
+		t12 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t5, t11]
+		});
+		$[24] = t11;
+		$[25] = t5;
+		$[26] = t12;
+	} else t12 = $[26];
+	return t12;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon, CircleAlertIcon } from \"lucide-react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Alert } from \"@stealthscale/component-feedback\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Code } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Details } from \"@stealthscale/component-disclosure\";\n\nconst FIELDS = [\n  [\"code\", \"card_declined\"],\n  [\"reason\", \"insufficient_funds\"],\n  [\"request\", \"req_7Hq2Lx9\"],\n];\n\nexport function Declined(): ReactElement {\n  const { t } = useWords(\"details\");\n\n  return (\n    <Stack gap=\"sm\">\n      <Alert.Root status=\"error\">\n        <Alert.Indicator>\n          <CircleAlertIcon />\n        </Alert.Indicator>\n        <Alert.Content>\n          <Alert.Title>{t(\"declined.heading\")}</Alert.Title>\n          <Alert.Description>{t(\"declined.description\")}</Alert.Description>\n        </Alert.Content>\n      </Alert.Root>\n      <Details.Root size=\"sm\">\n        <Details.Summary>\n          <Details.Indicator>\n            <ChevronRightIcon />\n          </Details.Indicator>\n          {t(\"declined.show\")}\n        </Details.Summary>\n        <Details.Content>\n          <DataList.Root size=\"sm\">\n            {FIELDS.map(([field, value]) => (\n              <DataList.Item key={field}>\n                <DataList.ItemLabel>{t(`declined.fields.${field}`)}</DataList.ItemLabel>\n                <DataList.ItemValue>\n                  <Code>{value}</Code>\n                </DataList.ItemValue>\n              </DataList.Item>\n            ))}\n          </DataList.Root>\n        </Details.Content>\n      </Details.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/details/examples/faq.example.tsx
+var faq_example_exports = /* @__PURE__ */ __exportAll({
+	Faq: () => Faq,
+	source: () => source$1
+});
+const QUESTIONS = [
+	"timing",
+	"fees",
+	"currencies"
+];
+function Faq() {
+	const $ = c(4);
+	const { t } = useWords("details");
+	let t0;
+	if ($[0] !== t) {
+		t0 = QUESTIONS.map((question) => /* @__PURE__ */ jsxs(Root, {
+			name: "payout-questions",
+			children: [/* @__PURE__ */ jsxs(Summary, { children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }), t(`faq.${question}.question`)] }), /* @__PURE__ */ jsx(Content, { children: t(`faq.${question}.answer`) })]
+		}, question));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			gap: "sm",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Details } from \"@stealthscale/component-disclosure\";\n\nconst QUESTIONS = [\"timing\", \"fees\", \"currencies\"];\n\nexport function Faq(): ReactElement {\n  const { t } = useWords(\"details\");\n\n  return (\n    <Stack gap=\"sm\">\n      {QUESTIONS.map((question) => (\n        <Details.Root key={question} name=\"payout-questions\">\n          <Details.Summary>\n            <Details.Indicator>\n              <ChevronRightIcon />\n            </Details.Indicator>\n            {t(`faq.${question}.question`)}\n          </Details.Summary>\n          <Details.Content>{t(`faq.${question}.answer`)}</Details.Content>\n        </Details.Root>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/details/examples/refund.example.tsx
+var refund_example_exports = /* @__PURE__ */ __exportAll({
+	Refund: () => Refund,
+	source: () => source
+});
+function Refund(props) {
+	const $ = c(13);
+	const { t } = useWords("details");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("refund.question");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Summary, { children: [t0, t1] });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("refund.answer");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Content, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t2, t4]
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Details } from \"@stealthscale/component-disclosure\";\n\nexport function Refund(props: Details.RootProps): ReactElement {\n  const { t } = useWords(\"details\");\n\n  return (\n    <Details.Root {...props}>\n      <Details.Summary>\n        <Details.Indicator>\n          <ChevronRightIcon />\n        </Details.Indicator>\n        {t(\"refund.question\")}\n      </Details.Summary>\n      <Details.Content>{t(\"refund.answer\")}</Details.Content>\n    </Details.Root>\n  );\n}\n";
+//#endregion
+//#region src/details/details.specimen.tsx
+/**
+* Catalogue page for the details.
+*
+* @remarks
+*   `scenesOf` generates the looks, palettes and sizes from the refund example, each in an `md`
+*   room. The looks and palettes render open, so the content shows, and the palettes use the subtle
+*   look, which fills the box. The hand-written scenes show an exclusive group of answers and a
+*   details under an alert. No generated scene sets `name`, because details with one name close
+*   each other across the page. The words are keys under `details` in
+*   `locales/en/specimen/details.json`.
+*/
+/**
+* Hand-written scene for three answers that close each other.
+*/
+const faq = {
+	about: "details.faq.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Faq, {})
+	}),
+	example: faq_example_exports,
+	title: "details.faq.title"
+};
+/**
+* Hand-written scene for the full error of a payment under its alert.
+*/
+const declined = {
+	about: "details.declined.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Declined, {})
+	}),
+	example: declined_example_exports,
+	title: "details.declined.title"
+};
+var details_specimen_default = specimen({
+	about: "details.about",
+	id: "components/disclosure/details",
+	imports: "import { Details } from \"@stealthscale/component-disclosure\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: { with: {
+					open: true,
+					variant: "subtle"
+				} },
+				size: { direction: "column" },
+				variant: {
+					direction: "column",
+					with: { open: true }
+				}
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "md",
+				children: /* @__PURE__ */ jsx(Refund, { ...props })
+			}),
+			example: refund_example_exports,
+			namespace: "details",
+			order: [
+				"variant",
+				"palette",
+				"size"
+			]
+		}),
+		faq,
+		declined
+	],
+	title: "details.title"
+});
+//#endregion
+export { declined, details_specimen_default as default, faq };

package/dist/pages/details/details.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ContentProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1043}, "SummaryProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ContentProps": [], "IndicatorProps": [], "RootProps": [{"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the looks read, set on the root."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Size of the summary, the indicator on the icon scale and the content's padding on the inset scale."}, {"accepts": "\"outline\" | \"plain\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the box around the summary and the content."}], "SummaryProps": []};
+export const shapes = {"kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}]};