From 454727ef285c09735168a84b1ae1a5173188a029 Mon Sep 17 00:00:00 2001
From: Joachim Viide <jviide@iki.fi>
Date: Sat, 14 Sep 2024 22:02:24 +0000
Subject: [PATCH] Add a Disclosure component

---
 .changeset/nasty-apricots-report.md |  5 ++++
 src/ui/experimental/Disclosure.ts   | 37 +++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 .changeset/nasty-apricots-report.md
 create mode 100644 src/ui/experimental/Disclosure.ts

diff --git a/.changeset/nasty-apricots-report.md b/.changeset/nasty-apricots-report.md
new file mode 100644
index 0000000..56b49c1
--- /dev/null
+++ b/.changeset/nasty-apricots-report.md
@@ -0,0 +1,5 @@
+---
+"@badrap/libapp": patch
+---
+
+Add a Disclosure component
diff --git a/src/ui/experimental/Disclosure.ts b/src/ui/experimental/Disclosure.ts
new file mode 100644
index 0000000..e9f13c0
--- /dev/null
+++ b/src/ui/experimental/Disclosure.ts
@@ -0,0 +1,37 @@
+import { UiNode, element, Responsive } from "../internal.js";
+
+interface DisclosureProps {
+  /**
+   * Controls component size, including the text size of the label and content.
+   * Default value: "md".
+   * */
+  size?: Responsive<"xs" | "sm" | "md" | "lg">;
+  /**
+   * The disclosure label. Gives a summary, caption, or legend for the details.
+   * Usually just text, but can contain arbitrary formatting content.
+   * */
+  label: UiNode;
+  /**
+   * The content to be displayed as details when the disclosure component
+   * has been expanded.
+   * */
+  children: UiNode;
+}
+
+/**
+ * A component with a summary label and additional detailed content.
+ * The details can be collapsed (hidden) or expanded (shown again)
+ * by interacting with the label.
+ *
+ * @example
+ * ```tsx
+ * <Disclosure label="Show lorem ipsum">
+ *   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ *   eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ * </Disclosure>
+ * ```
+ * */
+export function Disclosure(props: DisclosureProps): UiNode {
+  const { children, ...rest } = props;
+  return element("ui-disclosure", { content: children, ...rest });
+}