@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/collapsible/collapsible.css

@@ -1,10 +1,10 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1pgip_3 {
+  ._root_1i30m_3 {
     display: flex;
     flex-direction: column;
   }
-  ._trigger_1pgip_7 {
+  ._trigger_1i30m_7 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,18 +20,18 @@
     text-align: start;
     cursor: pointer;
   }
-  ._trigger_1pgip_7 {
+  ._trigger_1i30m_7 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._trigger_1pgip_7:focus-visible {
+  ._trigger_1i30m_7:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._trigger_1pgip_7 {
+  ._trigger_1i30m_7 {
     position: relative;
     isolation: isolate;
   }
-  ._trigger_1pgip_7::after {
+  ._trigger_1i30m_7::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -42,52 +42,52 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._trigger_1pgip_7::after {
+    ._trigger_1i30m_7::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._trigger_1pgip_7:hover:not(:disabled, [data-disabled])::after {
+  ._trigger_1i30m_7:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._trigger_1pgip_7:active:not(:disabled, [data-disabled])::after {
+  ._trigger_1i30m_7:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._trigger_1pgip_7[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._trigger_1i30m_7[data-disabled] {
+    color: var(--collapsible-trigger-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._indicator_1pgip_59 {
+  ._indicator_1i30m_59 {
     flex-shrink: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1pgip_59 {
+    ._indicator_1i30m_59 {
       transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  [data-panel-open] > ._indicator_1pgip_59 {
+  [data-panel-open] > ._indicator_1i30m_59 {
     rotate: 180deg;
   }
-  ._indicator_1pgip_59 {
+  ._indicator_1i30m_59 {
     display: inline-flex;
     color: var(--collapsible-indicator-fg, currentcolor);
     font-size: var(--collapsible-indicator-size, 1.5em);
   }
-  ._panel_1pgip_75 {
+  ._panel_1i30m_75 {
     overflow: hidden;
   }
-  ._panel_1pgip_75[hidden]:not([hidden=until-found]) {
+  ._panel_1i30m_75[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._panel_1pgip_75 {
+    ._panel_1i30m_75 {
       block-size: var(--collapsible-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._panel_1pgip_75[data-starting-style], ._panel_1pgip_75[data-ending-style] {
+    ._panel_1i30m_75[data-starting-style], ._panel_1i30m_75[data-ending-style] {
       block-size: 0;
     }
   }
-  ._content_1pgip_90 {
+  ._content_1i30m_90 {
     padding: var(--collapsible-pad-y, var(--sys-unit-4)) var(--collapsible-pad-x, var(--sys-unit-6));
   }
 }

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

@@ -1,6 +1,6 @@
 import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { useRender } from "@base-ui/react/use-render";
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 export type CollapsibleRootProps = Omit<BaseCollapsible.Root.Props, "className"> & Readonly<{
     className?: string;
 }>;
@@ -13,6 +13,7 @@ export type CollapsibleIndicatorProps = useRender.ComponentProps<"span">;
 export type CollapsiblePanelProps = Omit<BaseCollapsible.Panel.Props, "className"> & Readonly<{
     className?: string;
 }>;
+export type CollapsibleContentProps = useRender.ComponentProps<"div">;
 /** The trigger and its panel. */
 declare const Root: ({ className, ...props }: CollapsibleRootProps) => ReactNode;
 /** The button that folds the panel open and shut. */
@@ -23,13 +24,23 @@ declare const Trigger: ({ className, ...props }: CollapsibleTriggerProps) => Rea
  * nothing.
  */
 declare const Indicator: ({ render, className, children, ref, ...props }: CollapsibleIndicatorProps) => ReactNode;
-/** What the trigger folds, along its height. */
-declare const Panel: ({ className, children, ...props }: CollapsiblePanelProps) => ReactNode;
+/** What the trigger folds, along its height; its `Content` pads it. */
+declare const Panel: ({ className, ...props }: CollapsiblePanelProps) => ReactNode;
+/**
+ * The padded content inside the `Panel`.
+ *
+ * @example
+ * <Collapsible.Panel>
+ * 	<Collapsible.Content>{settings}</Collapsible.Content>
+ * </Collapsible.Panel>
+ */
+declare const Content: ({ render, className, ref, ...props }: CollapsibleContentProps) => ReactElement;
 type CollapsibleNamespace = Readonly<{
     Root: typeof Root;
     Trigger: typeof Trigger;
     Indicator: typeof Indicator;
     Panel: typeof Panel;
+    Content: typeof Content;
 }>;
 /**
  * A panel that folds open and shut under a trigger that names it, on base-ui's
@@ -41,7 +52,9 @@ type CollapsibleNamespace = Readonly<{
  * 		Advanced settings
  * 		<Collapsible.Indicator><ChevronIcon /></Collapsible.Indicator>
  * 	</Collapsible.Trigger>
- * 	<Collapsible.Panel>{settings}</Collapsible.Panel>
+ * 	<Collapsible.Panel>
+ * 		<Collapsible.Content>{settings}</Collapsible.Content>
+ * 	</Collapsible.Panel>
  * </Collapsible.Root>
  */
 export declare const Collapsible: CollapsibleNamespace;

package/dist/components/collapsible/collapsible.js

@@ -131,51 +131,95 @@ var Indicator = (t0) => {
 	const element = useRender(t3);
 	return children === void 0 || children === null ? null : element;
 };
-/** What the trigger folds, along its height. */
+/** What the trigger folds, along its height; its `Content` pads it. */
 var Panel = (t0) => {
-	const $ = c(12);
-	let children;
+	const $ = c(8);
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[4] !== className) {
-		t1 = clsx(collapsible_module_default.content, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+	if ($[3] !== className) {
+		t1 = clsx(collapsible_module_default.panel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	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,
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Collapsible.Panel, {
 			...props,
-			children: t2
+			className: t1
 		});
-		$[9] = props;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
-	return t3;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The padded content inside the `Panel`.
+*
+* @example
+* <Collapsible.Panel>
+* 	<Collapsible.Content>{settings}</Collapsible.Content>
+* </Collapsible.Panel>
+*/
+var Content = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(collapsible_module_default.content, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
 * A panel that folds open and shut under a trigger that names it, on base-ui's
@@ -187,13 +231,16 @@ var Panel = (t0) => {
 * 		Advanced settings
 * 		<Collapsible.Indicator><ChevronIcon /></Collapsible.Indicator>
 * 	</Collapsible.Trigger>
-* 	<Collapsible.Panel>{settings}</Collapsible.Panel>
+* 	<Collapsible.Panel>
+* 		<Collapsible.Content>{settings}</Collapsible.Content>
+* 	</Collapsible.Panel>
 * </Collapsible.Root>
 */
 var Collapsible$1 = {
 	Root,
 	Trigger,
 	Indicator,
-	Panel
+	Panel,
+	Content
 };
 export { Collapsible$1 as Collapsible };

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

@@ -1,9 +1,9 @@
 import './collapsible.css';// src/components/collapsible/collapsible.module.scss
-var root = "_root_1pgip_3";
-var trigger = "_trigger_1pgip_7";
-var indicator = "_indicator_1pgip_59";
-var panel = "_panel_1pgip_75";
-var content = "_content_1pgip_90";
+var root = "_root_1i30m_3";
+var trigger = "_trigger_1i30m_7";
+var indicator = "_indicator_1i30m_59";
+var panel = "_panel_1i30m_75";
+var content = "_content_1i30m_90";
 var collapsible_module_default = {
 	root,
 	trigger,