@exegia/corpora-ui 3.0.0 → 3.1.0

package/README.md

@@ -11,10 +11,30 @@ bun run typecheck
 bun run lint
 bun test
 bun run build        # docs site + publishable library
+bun run dev:example  # React consumer on http://127.0.0.1:3001
+bun run check:consumer # pack + isolated consumer typecheck/production build
 ```
 
 ## Project layout
 
+`react/` is the Bun workspace root. `examples/consumer` has its own private
+manifest and shares version definitions through the root catalog. Use one
+`bun install` here; do not install dependencies at the repository root.
+See [the consumer example](examples/consumer/README.md) for development and
+tarball verification.
+
+Focused imports are available from `@exegia/corpora-ui/button`, `/card`,
+`/input`, `/label`, `/state`, `/overlays`, `/shell`, and `/scaffold`.
+Existing root imports continue to work. The consumer example loads its
+Shell/Scaffold reading workspace on demand using those focused layout exports.
+Import `@exegia/corpora-ui/index.css` once for either style. The library builds
+all entrypoints together, sharing component implementations and state.
+
+Mount `ExegiaProvider` once for toast, shared tooltip settings, and portal
+defaults. Pass `store={appStore}` to share arbitrary app atoms with library
+state. Existing Shell/Scaffold panel and drawer layout contexts stay local.
+See [getting started](content/getting-started.mdx) for the provider contract.
+
 - `src/components/ui` — atoms
 - `src/components/composed` — components
 - `src/components/blocks` — blocks

package/dist-lib/button-CIRkQXA6.js

@@ -0,0 +1,152 @@
+import { t as e } from "./utils-BO0qfoA6.js";
+import { Loader2Icon as t } from "lucide-react";
+import { Suspense as n, lazy as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+import { useRender as c } from "@base-ui/react/use-render";
+import { cva as l } from "class-variance-authority";
+//#region src/components/ui/spinner.tsx
+function u({ className: n, ...r }) {
+	return /* @__PURE__ */ a(t, {
+		"aria-label": "Loading",
+		className: e("animate-spin", n),
+		role: "status",
+		...r
+	});
+}
+var d = {
+	clear: "bg-white/25 dark:bg-black/25",
+	frosted: "bg-white/55 dark:bg-black/35",
+	subtle: "bg-white/30 dark:bg-white/6",
+	liquid: "bg-white/10 dark:bg-white/4",
+	"liquid-refract": "bg-white/8 dark:bg-white/4"
+}, f = {
+	clear: {
+		frost: 2,
+		saturate: 1.9,
+		strength: .08
+	},
+	frosted: {
+		frost: 16,
+		saturate: 1.6,
+		strength: .08
+	},
+	subtle: {
+		frost: 4,
+		saturate: 1.5,
+		strength: .04
+	},
+	liquid: {
+		frost: 4,
+		saturate: 1.8,
+		strength: .14
+	},
+	"liquid-refract": {
+		frost: 2,
+		saturate: 1.5,
+		strength: .14
+	}
+};
+//#endregion
+//#region src/components/ui/glasscn/lazy-glass-surface.tsx
+function p({ glassVariant: t }) {
+	return /* @__PURE__ */ a("span", {
+		"aria-hidden": "true",
+		"data-glass-fallback": "",
+		className: e("pointer-events-none", d[t]),
+		style: {
+			position: "absolute",
+			inset: 0,
+			borderRadius: "inherit",
+			zIndex: -1,
+			backdropFilter: `blur(${f[t].frost}px)`
+		}
+	});
+}
+var m = r(() => import("./liquid-glass-BihU6nMl.js").then((e) => e.r).then(({ GlassSurface: e }) => ({ default: e })).catch(() => ({ default: p })));
+function h(e) {
+	return /* @__PURE__ */ a(n, {
+		fallback: /* @__PURE__ */ a(p, { ...e }),
+		children: /* @__PURE__ */ a(m, { ...e })
+	});
+}
+//#endregion
+//#region src/components/ui/button.tsx
+var g = l("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-base outline-none transition-[scale,box-shadow,width,height,background-color,border-color] [transition-duration:150ms,150ms,300ms,300ms,150ms,150ms] ease-smooth-out active:scale-99 data-pressed:scale-99 motion-reduce:transition-none motion-reduce:active:scale-100 motion-reduce:data-pressed:scale-100 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-smooth-out motion-reduce:[&_svg]:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0", {
+	compoundVariants: [{
+		class: "h-auto border-0 px-0 align-middle sm:h-auto",
+		size: [
+			"xs",
+			"sm",
+			"default",
+			"lg",
+			"xl"
+		],
+		variant: "link"
+	}],
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+			icon: "size-9 sm:size-8",
+			"icon-lg": "size-8 sm:size-8",
+			"icon-sm": "size-7 sm:size-6",
+			"icon-xl": "size-10 sm:size-9 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+		},
+		variant: {
+			default: "inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none disabled:opacity-50!",
+			destructive: "inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			"destructive-outline": "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			ghost: "border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground",
+			glass: "border-transparent text-foreground *:data-[slot=button-loading-indicator]:text-foreground",
+			link: "border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground",
+			outline: "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80"
+		}
+	}
+});
+function _({ className: t, variant: n, size: r, render: l, children: d, loading: f = !1, disabled: p, glassVariant: m, sound: _ = !0, ...v }) {
+	let y = !!(f || p), b = l ? void 0 : "button", x = n === "glass" ? m ?? "liquid-refract" : void 0, S = (r ?? "default").startsWith("icon"), C = {
+		children: /* @__PURE__ */ o(i, { children: [
+			x && /* @__PURE__ */ a(h, { glassVariant: x }),
+			!S && /* @__PURE__ */ a("span", {
+				"aria-hidden": !f || void 0,
+				"data-slot": "button-loading-indicator",
+				className: e("pointer-events-none inline-flex shrink-0 items-center overflow-hidden transition-[max-width,margin-inline-start,opacity,filter] duration-300 ease-smooth-out motion-reduce:transition-none", f ? "max-w-6" : e("max-w-0 opacity-0 blur-small", r === "xs" ? "-ms-1" : r === "sm" ? "-ms-1.5" : "-ms-2")),
+				children: /* @__PURE__ */ a(u, { className: f ? void 0 : "animate-none" })
+			}),
+			d,
+			f && S && /* @__PURE__ */ a(u, {
+				className: "pointer-events-none absolute",
+				"data-slot": "button-loading-indicator"
+			})
+		] }),
+		className: e(g({
+			size: r,
+			variant: n
+		}), !S && "hover:[&_svg:not([class*='animate-'])]:scale-101 motion-reduce:hover:[&_svg]:scale-100", f && S && "data-loading:text-transparent", x && e("isolate", "bg-transparent border-0 shadow-none"), t),
+		"aria-disabled": f || void 0,
+		"data-cuelume-press": _ ? "" : void 0,
+		"data-cuelume-release": _ ? "" : void 0,
+		"data-loading": f ? "" : void 0,
+		"data-glass-variant": x,
+		"data-slot": "button",
+		disabled: y,
+		type: b
+	};
+	return c({
+		defaultTagName: "button",
+		props: s(C, v),
+		render: l
+	});
+}
+//#endregion
+export { u as a, d as i, g as n, f as r, _ as t };

package/dist-lib/button.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, t } from "./button-CIRkQXA6.js";
+export { t as Button, e as buttonVariants };

package/dist-lib/card.js

@@ -0,0 +1,150 @@
+"use client";
+import { t as e } from "./utils-BO0qfoA6.js";
+import { mergeProps as t } from "@base-ui/react/merge-props";
+import { useRender as n } from "@base-ui/react/use-render";
+//#region src/components/ui/card.tsx
+function r({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("relative flex flex-col rounded-md border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", r),
+		"data-slot": "card"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function i({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("relative flex flex-col rounded-(--frame-radius) border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] [--frame-radius:var(--radius-md)] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=card]:rounded-(--frame-radius) *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-[calc(var(--frame-radius)-1px)] *:not-last:data-[slot=card]:rounded-b-[calc(var(--frame-radius)-1px)] *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--frame-radius)-2px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--frame-radius)-2px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--frame-radius)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]", r),
+		"data-slot": "card-frame"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function a({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]", r),
+		"data-slot": "card-frame-header"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function o({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("self-center font-semibold text-sm", r),
+		"data-slot": "card-frame-title"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function s({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("self-center text-muted-foreground text-sm", r),
+		"data-slot": "card-frame-description"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function c({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end", r),
+		"data-slot": "card-frame-action"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function l({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("px-6 py-4", r),
+		"data-slot": "card-frame-footer"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function u({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]", r),
+		"data-slot": "card-header"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function d({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("font-heading font-semibold text-lg leading-none", r),
+		"data-slot": "card-title"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function f({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("text-muted-foreground text-sm", r),
+		"data-slot": "card-description"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function p({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end", r),
+		"data-slot": "card-action"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function m({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0", r),
+		"data-slot": "card-panel"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+function h({ className: r, render: i, ...a }) {
+	let o = {
+		className: e("flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4", r),
+		"data-slot": "card-footer"
+	};
+	return n({
+		defaultTagName: "div",
+		props: t(o, a),
+		render: i
+	});
+}
+//#endregion
+export { r as Card, p as CardAction, m as CardContent, m as CardPanel, f as CardDescription, h as CardFooter, i as CardFrame, c as CardFrameAction, s as CardFrameDescription, l as CardFrameFooter, a as CardFrameHeader, o as CardFrameTitle, u as CardHeader, d as CardTitle };