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

package/dist/components/accordion/accordion.css

@@ -1,15 +1,15 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1qlrq_3 {
+  ._root_1c9ng_3 {
     display: flex;
     flex-direction: column;
     gap: var(--accordion-gap, var(--sys-unit-2));
   }
-  ._item_1qlrq_8 {
+  ._item_1c9ng_8 {
     display: flex;
     flex-direction: column;
   }
-  ._trigger_1qlrq_12 {
+  ._trigger_1c9ng_12 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -25,18 +25,18 @@
     text-align: start;
     cursor: pointer;
   }
-  ._trigger_1qlrq_12 {
+  ._trigger_1c9ng_12 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._trigger_1qlrq_12:focus-visible {
+  ._trigger_1c9ng_12:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._trigger_1qlrq_12 {
+  ._trigger_1c9ng_12 {
     position: relative;
     isolation: isolate;
   }
-  ._trigger_1qlrq_12::after {
+  ._trigger_1c9ng_12::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -47,52 +47,52 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._trigger_1qlrq_12::after {
+    ._trigger_1c9ng_12::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._trigger_1qlrq_12:hover:not(:disabled, [data-disabled])::after {
+  ._trigger_1c9ng_12:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._trigger_1qlrq_12:active:not(:disabled, [data-disabled])::after {
+  ._trigger_1c9ng_12:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._trigger_1qlrq_12[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._trigger_1c9ng_12[data-disabled] {
+    color: var(--accordion-trigger-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
   }
-  ._indicator_1qlrq_64 {
+  ._indicator_1c9ng_64 {
     flex-shrink: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1qlrq_64 {
+    ._indicator_1c9ng_64 {
       transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  [data-panel-open] > ._indicator_1qlrq_64 {
+  [data-panel-open] > ._indicator_1c9ng_64 {
     rotate: 180deg;
   }
-  ._indicator_1qlrq_64 {
+  ._indicator_1c9ng_64 {
     display: inline-flex;
     color: var(--accordion-indicator-fg, currentcolor);
     font-size: var(--accordion-indicator-size, 1.5em);
   }
-  ._panel_1qlrq_80 {
+  ._panel_1c9ng_80 {
     overflow: hidden;
   }
-  ._panel_1qlrq_80[hidden]:not([hidden=until-found]) {
+  ._panel_1c9ng_80[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._panel_1qlrq_80 {
+    ._panel_1c9ng_80 {
       block-size: var(--accordion-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._panel_1qlrq_80[data-starting-style], ._panel_1qlrq_80[data-ending-style] {
+    ._panel_1c9ng_80[data-starting-style], ._panel_1c9ng_80[data-ending-style] {
       block-size: 0;
     }
   }
-  ._content_1qlrq_95 {
+  ._content_1c9ng_95 {
     padding: var(--accordion-pad-y, var(--sys-unit-4)) var(--accordion-pad-x, var(--sys-unit-6));
   }
 }

package/dist/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import { useRender } from "@base-ui/react/use-render";
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 export type AccordionRootProps = Omit<BaseAccordion.Root.Props<string>, "className"> & Readonly<{
     className?: string;
 }>;
@@ -18,6 +18,7 @@ export type AccordionIndicatorProps = useRender.ComponentProps<"span">;
 export type AccordionPanelProps = Omit<BaseAccordion.Panel.Props, "className"> & Readonly<{
     className?: string;
 }>;
+export type AccordionContentProps = useRender.ComponentProps<"div">;
 /** The stack of items. */
 declare const Root: ({ className, ...props }: AccordionRootProps) => ReactNode;
 /** One item: its header and its panel. */
@@ -30,8 +31,17 @@ declare const Trigger: ({ className, ...props }: AccordionTriggerProps) => React
  * nothing.
  */
 declare const Indicator: ({ render, className, children, ref, ...props }: AccordionIndicatorProps) => ReactNode;
-/** What the item holds, folding along its height. */
-declare const Panel: ({ className, children, ...props }: AccordionPanelProps) => ReactNode;
+/** What the item holds, folding along its height; its `Content` pads it. */
+declare const Panel: ({ className, ...props }: AccordionPanelProps) => ReactNode;
+/**
+ * The padded content inside the `Panel`.
+ *
+ * @example
+ * <Accordion.Panel>
+ * 	<Accordion.Content>{settings}</Accordion.Content>
+ * </Accordion.Panel>
+ */
+declare const Content: ({ render, className, ref, ...props }: AccordionContentProps) => ReactElement;
 type AccordionNamespace = Readonly<{
     Root: typeof Root;
     Item: typeof Item;
@@ -39,6 +49,7 @@ type AccordionNamespace = Readonly<{
     Trigger: typeof Trigger;
     Indicator: typeof Indicator;
     Panel: typeof Panel;
+    Content: typeof Content;
 }>;
 /**
  * A stack of panels that fold open and shut, each under a heading whose
@@ -54,7 +65,9 @@ type AccordionNamespace = Readonly<{
  * 				<Accordion.Indicator><ChevronIcon /></Accordion.Indicator>
  * 			</Accordion.Trigger>
  * 		</Accordion.Header>
- * 		<Accordion.Panel>{fees}</Accordion.Panel>
+ * 		<Accordion.Panel>
+ * 			<Accordion.Content>{fees}</Accordion.Content>
+ * 		</Accordion.Panel>
  * 	</Accordion.Item>
  * </Accordion.Root>
  */

package/dist/components/accordion/accordion.js

@@ -163,51 +163,95 @@ var Indicator = (t0) => {
 	const element = useRender(t3);
 	return children === void 0 || children === null ? null : element;
 };
-/** What the item holds, folding along its height. */
+/** What the item holds, folding 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(accordion_module_default.content, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+	if ($[3] !== className) {
+		t1 = clsx(accordion_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(Accordion.Panel, {
-			className: accordion_module_default.panel,
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Accordion.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
+* <Accordion.Panel>
+* 	<Accordion.Content>{settings}</Accordion.Content>
+* </Accordion.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(accordion_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 stack of panels that fold open and shut, each under a heading whose
@@ -223,7 +267,9 @@ var Panel = (t0) => {
 * 				<Accordion.Indicator><ChevronIcon /></Accordion.Indicator>
 * 			</Accordion.Trigger>
 * 		</Accordion.Header>
-* 		<Accordion.Panel>{fees}</Accordion.Panel>
+* 		<Accordion.Panel>
+* 			<Accordion.Content>{fees}</Accordion.Content>
+* 		</Accordion.Panel>
 * 	</Accordion.Item>
 * </Accordion.Root>
 */
@@ -233,6 +279,7 @@ var Accordion$1 = {
 	Header: Accordion.Header,
 	Trigger,
 	Indicator,
-	Panel
+	Panel,
+	Content
 };
 export { Accordion$1 as Accordion };

package/dist/components/accordion/accordion.module.js

@@ -1,10 +1,10 @@
 import './accordion.css';// src/components/accordion/accordion.module.scss
-var root = "_root_1qlrq_3";
-var item = "_item_1qlrq_8";
-var trigger = "_trigger_1qlrq_12";
-var indicator = "_indicator_1qlrq_64";
-var panel = "_panel_1qlrq_80";
-var content = "_content_1qlrq_95";
+var root = "_root_1c9ng_3";
+var item = "_item_1c9ng_8";
+var trigger = "_trigger_1c9ng_12";
+var indicator = "_indicator_1c9ng_64";
+var panel = "_panel_1c9ng_80";
+var content = "_content_1c9ng_95";
 var accordion_module_default = {
 	root,
 	item,

package/dist/components/attachment-tile/attachment-preview.d.ts

@@ -1,4 +1,5 @@
-import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
 /** An image source for a preview, and whether one is still on its way. */
 export type AttachmentPreviewSource = Readonly<{
     src: string | undefined;
@@ -12,24 +13,66 @@ export type AttachmentPreviewSource = Readonly<{
  * useAttachmentPreview(file); // -> { src: "data:image/png;base64,…", pending: false }
  */
 export declare const useAttachmentPreview: (blob: Blob | undefined) => AttachmentPreviewSource;
-export type AttachmentPreviewProps = Omit<ComponentPropsWithRef<"span">, "children"> & Readonly<{
+export type AttachmentPreviewProps = ComponentPropsWithRef<"span"> & Readonly<{
     name: string;
-    /** Tooltip text for the preview. */
-    hint: string;
-    /** Image source; without one the tile shows its `icon` and the file's extension. */
+    /** Image source; without one the tile shows its `Icon` and `Extension`. */
     src: string | undefined;
     /** Whether an image source is still being produced. */
     pending?: boolean;
-    /** A file-type glyph above the extension, where there is no image. */
-    icon?: ReactNode;
 }>;
 /**
- * The inside of an attachment tile: an image preview where there is one, the
- * `icon` and the file's extension otherwise, plus the file name for assistive
- * tech. A source that is still arriving shows a skeleton; one that fails to
- * load falls back to the extension.
+ * The inside of an attachment tile, holding the `Image`, `Icon`, `Extension`,
+ * `Skeleton` and `Name` that read its file. A source that fails to load falls
+ * back to the icon and the extension.
  *
  * @example
- * <AttachmentTile.Preview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+ * <AttachmentTile.Preview name="nota.pdf" src={undefined}>
+ * 	<AttachmentTile.Image />
+ * 	<AttachmentTile.Extension />
+ * 	<AttachmentTile.Name />
+ * </AttachmentTile.Preview>
  */
-export declare const AttachmentPreview: ({ name, hint, src, pending, icon, className, ...props }: AttachmentPreviewProps) => ReactNode;
+export declare const AttachmentPreview: ({ name, src, pending, className, ...props }: AttachmentPreviewProps) => ReactNode;
+export type AttachmentImageProps = Omit<useRender.ComponentProps<"img">, "src">;
+/**
+ * The image, once there is a source that loads. Renders nothing otherwise.
+ *
+ * @example
+ * <AttachmentTile.Image />
+ */
+export declare const AttachmentImage: ({ className, render, ref, ...props }: AttachmentImageProps) => ReactElement | null;
+/**
+ * A file-type glyph where there is no image, such as a document icon. Renders
+ * nothing without children.
+ *
+ * @example
+ * <AttachmentTile.Icon><DescriptionIcon /></AttachmentTile.Icon>
+ */
+export declare const AttachmentIcon: ({ className, render, ref, children, ...props }: useRender.ComponentProps<"span">) => ReactElement | null;
+export type AttachmentTextProps = Omit<useRender.ComponentProps<"span">, "children">;
+/**
+ * The file's extension where there is no image, such as "pdf". Renders
+ * nothing for a name without one.
+ *
+ * @example
+ * <AttachmentTile.Extension />
+ */
+export declare const AttachmentExtension: ({ className, render, ref, ...props }: AttachmentTextProps) => ReactElement | null;
+export type AttachmentSkeletonProps = Readonly<{
+    className?: string;
+}>;
+/**
+ * The placeholder while the image is still on its way. Renders nothing once it
+ * has arrived.
+ *
+ * @example
+ * <AttachmentTile.Skeleton />
+ */
+export declare const AttachmentSkeleton: ({ className, }: AttachmentSkeletonProps) => ReactNode;
+/**
+ * The file's name, for assistive tech only.
+ *
+ * @example
+ * <AttachmentTile.Name />
+ */
+export declare const AttachmentName: ({ className, render, ref, ...props }: AttachmentTextProps) => ReactElement;