@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/dialog/dialog.css

@@ -0,0 +1,78 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._backdrop_1ki7n_3 {
+    --overlay-dim: 0.4;
+    --overlay-opacity: 1;
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0, 0, 0, var(--overlay-dim));
+    backdrop-filter: blur(1px);
+    opacity: var(--overlay-opacity);
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_1ki7n_3 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  html[data-theme="dark"] ._backdrop_1ki7n_3 {
+    --overlay-dim: 0.6;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_1ki7n_3 {
+      --overlay-dim: 0.6;
+    }
+  }
+  ._backdrop_1ki7n_3[data-starting-style], ._backdrop_1ki7n_3[data-ending-style] {
+    opacity: 0;
+  }
+  ._popup_1ki7n_28 {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    box-sizing: border-box;
+    inline-size: min(32rem, 100dvw - var(--sys-unit-16));
+    border: none;
+    border-radius: var(--sys-radius-xl);
+    background: var(--sys-color-surface-overlay);
+    color: var(--sys-color-text);
+    transform: translate(-50%, -50%);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_1ki7n_28 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard), transform var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._popup_1ki7n_28[data-starting-style], ._popup_1ki7n_28[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  ._popup_1ki7n_28 {
+    display: flex;
+    flex-direction: column;
+    max-block-size: calc(100dvh - var(--sys-unit-24));
+  }
+  ._header_1ki7n_54 {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--sys-unit-10);
+    padding: var(--sys-unit-20) var(--sys-unit-20) var(--sys-unit-8);
+  }
+  ._title_1ki7n_61 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-heading-small);
+  }
+  ._body_1ki7n_65 {
+    overflow-y: auto;
+    padding: var(--sys-unit-8) var(--sys-unit-20);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+  }
+  ._footer_1ki7n_71 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--sys-unit-8);
+    padding: var(--sys-unit-12) var(--sys-unit-20) var(--sys-unit-20);
+  }
+}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,59 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentProps, ReactNode } from "react";
+import { type CloseButtonProps } from "../button/close-button.tsx";
+declare const Backdrop: ({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>) => ReactNode;
+declare const Popup: ({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>) => ReactNode;
+declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) => ReactNode;
+export type DialogHeaderProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>;
+/** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
+declare const Header: ({ children, className, }: DialogHeaderProps) => ReactNode;
+export type DialogCloseButtonProps = Pick<CloseButtonProps, "closeLabel">;
+/** The icon-only way out, for a header or a footer. */
+declare const CloseButton: ({ closeLabel, }: DialogCloseButtonProps) => ReactNode;
+declare const Body: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+declare const Footer: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+type DialogParts = Readonly<{
+    Root: typeof BaseDialog.Root;
+    Trigger: typeof BaseDialog.Trigger;
+    Portal: typeof BaseDialog.Portal;
+    Backdrop: typeof Backdrop;
+    Popup: typeof Popup;
+    Title: typeof Title;
+    Description: typeof BaseDialog.Description;
+    Close: typeof BaseDialog.Close;
+    CloseButton: typeof CloseButton;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    createHandle: typeof BaseDialog.createHandle;
+}>;
+/**
+ * Dialog chrome over base-ui's Dialog. Provides `Header` / `Body` / `Footer`
+ * regions plus a styled `Backdrop` and `Popup`. Footer actions are a slot.
+ *
+ * @example
+ * <Dialog.Root>
+ *   <Dialog.Trigger>Edit</Dialog.Trigger>
+ *   <Dialog.Portal>
+ *     <Dialog.Backdrop />
+ *     <Dialog.Popup>
+ *       <Dialog.Header>
+ *         <Dialog.Title>Discard changes?</Dialog.Title>
+ *         <Dialog.CloseButton closeLabel="Close" />
+ *       </Dialog.Header>
+ *       <Dialog.Body>
+ *         <Dialog.Description>Your edits will be lost.</Dialog.Description>
+ *       </Dialog.Body>
+ *       <Dialog.Footer>
+ *         <Dialog.Close>Keep editing</Dialog.Close>
+ *         <button onClick={discard}>Discard</button>
+ *       </Dialog.Footer>
+ *     </Dialog.Popup>
+ *   </Dialog.Portal>
+ * </Dialog.Root>
+ */
+export declare const Dialog: DialogParts;
+export {};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,245 @@
+import { CloseButton as CloseButton$1 } from "../button/close-button.js";
+import dialog_module_default from "./dialog.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/dialog/dialog.tsx
+var Backdrop = (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(dialog_module_default.backdrop, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Backdrop, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Popup = (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(dialog_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Title = (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(dialog_module_default.title, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Title, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
+var Header = (t0) => {
+	const $ = c(5);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(dialog_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/** The icon-only way out, for a header or a footer. */
+var CloseButton = (t0) => {
+	const $ = c(3);
+	const { closeLabel } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Dialog.Close, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== closeLabel) {
+		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
+			closeLabel,
+			render: t1
+		});
+		$[1] = closeLabel;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+var Body = (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(dialog_module_default.body, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Footer = (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(dialog_module_default.footer, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* Dialog chrome over base-ui's Dialog. Provides `Header` / `Body` / `Footer`
+* regions plus a styled `Backdrop` and `Popup`. Footer actions are a slot.
+*
+* @example
+* <Dialog.Root>
+*   <Dialog.Trigger>Edit</Dialog.Trigger>
+*   <Dialog.Portal>
+*     <Dialog.Backdrop />
+*     <Dialog.Popup>
+*       <Dialog.Header>
+*         <Dialog.Title>Discard changes?</Dialog.Title>
+*         <Dialog.CloseButton closeLabel="Close" />
+*       </Dialog.Header>
+*       <Dialog.Body>
+*         <Dialog.Description>Your edits will be lost.</Dialog.Description>
+*       </Dialog.Body>
+*       <Dialog.Footer>
+*         <Dialog.Close>Keep editing</Dialog.Close>
+*         <button onClick={discard}>Discard</button>
+*       </Dialog.Footer>
+*     </Dialog.Popup>
+*   </Dialog.Portal>
+* </Dialog.Root>
+*/
+var Dialog$1 = {
+	Root: Dialog.Root,
+	Trigger: Dialog.Trigger,
+	Portal: Dialog.Portal,
+	Backdrop,
+	Popup,
+	Title,
+	Description: Dialog.Description,
+	Close: Dialog.Close,
+	CloseButton,
+	Header,
+	Body,
+	Footer,
+	createHandle: Dialog.createHandle
+};
+export { Dialog$1 as Dialog };

package/dist/components/dialog/dialog.module.js

@@ -0,0 +1,16 @@
+import './dialog.css';// src/components/dialog/dialog.module.scss
+var backdrop = "_backdrop_1ki7n_3";
+var popup = "_popup_1ki7n_28";
+var header = "_header_1ki7n_54";
+var title = "_title_1ki7n_61";
+var body = "_body_1ki7n_65";
+var footer = "_footer_1ki7n_71";
+var dialog_module_default = {
+	backdrop,
+	popup,
+	header,
+	title,
+	body,
+	footer
+};
+export { backdrop, body, dialog_module_default as default, footer, header, popup, title };

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

@@ -0,0 +1 @@
+export * from "./dialog.tsx";

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog } from "./dialog.js";

package/dist/components/divider/divider.css

@@ -0,0 +1,16 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._container_1y7jl_3 {
+    margin-block: var(--divider-space, var(--sys-unit-6));
+  }
+  ._divider_1y7jl_6 {
+    inline-size: 100%;
+    border: none;
+    border-block-start: 1px solid var(--divider-color, var(--sys-color-border));
+  }
+  ._subtitle_1y7jl_11 {
+    margin-block-start: var(--sys-unit-4);
+    color: var(--divider-subtitle-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-body-small);
+  }
+}

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type DividerProps = Readonly<{
+    /** A short line under the rule, naming what follows it. */
+    subtitle?: string;
+    className?: string;
+}>;
+/**
+ * A horizontal rule between two groups, with an optional subtitle under it.
+ *
+ * @example
+ * <Divider subtitle="Earlier messages" />
+ */
+export declare const Divider: ({ subtitle, className, }: DividerProps) => ReactNode;

package/dist/components/divider/divider.js

@@ -0,0 +1,47 @@
+import divider_module_default from "./divider.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/divider/divider.tsx
+/**
+* A horizontal rule between two groups, with an optional subtitle under it.
+*
+* @example
+* <Divider subtitle="Earlier messages" />
+*/
+var Divider = (t0) => {
+	const $ = c(8);
+	const { subtitle, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(divider_module_default.container, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("hr", { className: divider_module_default.divider });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== subtitle) {
+		t3 = subtitle === void 0 ? null : /* @__PURE__ */ jsx("p", {
+			className: divider_module_default.subtitle,
+			children: subtitle
+		});
+		$[3] = subtitle;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t1 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t2, t3]
+		});
+		$[5] = t1;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+export { Divider };

package/dist/components/divider/divider.module.js

@@ -0,0 +1,10 @@
+import './divider.css';// src/components/divider/divider.module.scss
+var container = "_container_1y7jl_3";
+var divider = "_divider_1y7jl_6";
+var subtitle = "_subtitle_1y7jl_11";
+var divider_module_default = {
+	container,
+	divider,
+	subtitle
+};
+export { container, divider_module_default as default, divider, subtitle };

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

@@ -0,0 +1 @@
+export * from "./divider.tsx";

package/dist/components/divider/index.js

@@ -0,0 +1 @@
+export { Divider } from "./divider.js";

package/dist/components/drawer/drawer.css

@@ -0,0 +1,168 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._backdrop_17y86_3 {
+    --overlay-dim: 0.4;
+    --overlay-opacity: 1;
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0, 0, 0, var(--overlay-dim));
+    backdrop-filter: blur(1px);
+    opacity: var(--overlay-opacity);
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_17y86_3 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  html[data-theme="dark"] ._backdrop_17y86_3 {
+    --overlay-dim: 0.6;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_17y86_3 {
+      --overlay-dim: 0.6;
+    }
+  }
+  ._backdrop_17y86_3[data-starting-style], ._backdrop_17y86_3[data-ending-style] {
+    opacity: 0;
+  }
+  ._backdrop_17y86_3 {
+    --overlay-dim: 0.22;
+    --overlay-opacity: calc(
+    	1 - var(--drawer-swipe-progress)
+    );
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_17y86_3 {
+      transition-timing-function: var(--sys-motion-emphasized);
+    }
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._backdrop_17y86_3 {
+      position: absolute;
+    }
+  }
+  html[data-theme="dark"] ._backdrop_17y86_3 {
+    --overlay-dim: 0.4;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_17y86_3 {
+      --overlay-dim: 0.4;
+    }
+  }
+  ._backdrop_17y86_3[data-swiping] {
+    transition-duration: 0ms;
+  }
+  ._backdrop_17y86_3[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
+  }
+  ._viewport_17y86_58 {
+    --drawer-viewport-padding: 0px;
+    position: fixed;
+    inset: 0;
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--drawer-viewport-padding);
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._viewport_17y86_58 {
+      --drawer-viewport-padding: var(--sys-unit-8);
+    }
+  }
+  ._popup_17y86_71 {
+    --drawer-bleed: 3rem;
+    --drawer-inset: var(--sys-unit-16);
+    position: relative;
+    box-sizing: border-box;
+    inline-size: calc(33dvw + var(--drawer-bleed));
+    min-inline-size: 24rem;
+    block-size: 100%;
+    background: var(--drawer-surface, var(--sys-color-surface));
+    padding: var(--drawer-inset);
+    padding-right: calc(var(--drawer-inset) + var(--drawer-bleed));
+    margin-right: calc(-1 * var(--drawer-bleed));
+    color: var(--sys-color-text);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: auto;
+    transform: translateX(var(--drawer-swipe-movement-x));
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_17y86_71 {
+      transition: transform var(--sys-motion-short) var(--sys-motion-emphasized);
+      will-change: transform;
+    }
+  }
+  ._popup_17y86_71::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: var(--sys-unit-3);
+    inset-block-start: 50%;
+    inline-size: var(--sys-unit-2);
+    block-size: var(--sys-unit-16);
+    border-radius: var(--sys-radius-full);
+    background: var(--sys-color-outline);
+    translate: 0 -50%;
+  }
+  ._popup_17y86_71[data-swiping] {
+    user-select: none;
+  }
+  ._popup_17y86_71[data-starting-style], ._popup_17y86_71[data-ending-style] {
+    transform: translateX(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
+  }
+  ._popup_17y86_71[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._popup_17y86_71 {
+      --drawer-bleed: 0px;
+      margin-right: 0;
+      border-radius: var(--sys-radius-lg);
+    }
+  }
+  ._popup_17y86_71[data-swipe-direction=down] {
+    align-self: flex-end;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--drawer-sheet-block-size, auto);
+    max-block-size: var(--drawer-sheet-max, 85dvh);
+    border-radius: var(--sys-radius-xl) var(--sys-radius-xl) 0 0;
+    margin-right: 0;
+    margin-bottom: calc(-1 * var(--drawer-bleed));
+    padding-top: var(--sys-unit-6);
+    padding-right: var(--drawer-inset);
+    padding-bottom: calc(var(--drawer-inset) + var(--drawer-bleed) + 1.75rem);
+    transform: translateY(var(--drawer-swipe-movement-y));
+  }
+  ._popup_17y86_71[data-swipe-direction=down]::before {
+    position: static;
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--sys-unit-16);
+    block-size: var(--sys-unit-2);
+    margin-inline: auto;
+    margin-block-end: var(--sys-unit-6);
+    translate: none;
+  }
+  ._popup_17y86_71[data-swipe-direction=down][data-starting-style], ._popup_17y86_71[data-swipe-direction=down][data-ending-style] {
+    transform: translateY(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
+  }
+  ._filled_17y86_149 {
+    --drawer-sheet-block-size: var(
+    	--drawer-sheet-max,
+    	85dvh
+    );
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  ._header_17y86_158 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sys-unit-8);
+  }
+  ._title_17y86_164 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-heading-small);
+  }
+}