@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/feedback/SkeletonLoader.js

@@ -0,0 +1,59 @@
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/feedback/SkeletonLoader.tsx
+const presentationClasses = {
+	artwork: "aspect-square",
+	poster: "aspect-[2/3]",
+	video: "aspect-video",
+	card: "h-32",
+	chart: "h-36",
+	circle: "size-9",
+	control: "h-10",
+	heading: "h-[1cap]",
+	line: "h-3.5",
+	metric: "h-8"
+};
+const presentationRadius = {
+	artwork: "rounded-lg",
+	poster: "rounded-lg",
+	video: "rounded-lg",
+	card: "rounded-xl",
+	chart: "rounded-md",
+	circle: "rounded-full",
+	control: "rounded-md",
+	heading: "rounded-md",
+	line: "rounded-full",
+	metric: "rounded-md"
+};
+const widthClasses = {
+	action: "w-20",
+	full: "w-full",
+	medium: "w-1/2",
+	short: "w-1/3",
+	wide: "w-3/4"
+};
+function SkeletonLoaderRoot({ children, label, loading = true }) {
+	if (!loading) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			children
+		})
+	});
+}
+function SkeletonShape({ presentation = "line", width = "full" }) {
+	const classes = [presentationClasses[presentation], presentation === "circle" ? null : widthClasses[width]].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-slot": "skeleton",
+		className: `lar-skeleton block ${classes} ${presentationRadius[presentation]}`
+	});
+}
+const SkeletonLoader = Object.assign(SkeletonLoaderRoot, { Shape: SkeletonShape });
+export { SkeletonLoader };
+
+//# sourceMappingURL=SkeletonLoader.js.map

package/dist/feedback/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","names":[],"sources":["../../src/feedback/SkeletonLoader.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through SkeletonLoader. */\n\nimport { Fragment, type ReactNode } from 'react';\n\ntype SkeletonPresentation =\n    | 'artwork'\n    | 'poster'\n    | 'video'\n    | 'card'\n    | 'chart'\n    | 'circle'\n    | 'control'\n    | 'heading'\n    | 'line'\n    | 'metric';\ntype SkeletonWidth = 'action' | 'full' | 'medium' | 'short' | 'wide';\n\nconst presentationClasses: Record<SkeletonPresentation, string> = {\n    artwork: 'aspect-square',\n    poster: 'aspect-[2/3]',\n    video: 'aspect-video',\n    card: 'h-32',\n    chart: 'h-36',\n    circle: 'size-9',\n    control: 'h-10',\n    heading: 'h-[1cap]',\n    line: 'h-3.5',\n    metric: 'h-8',\n};\n\nconst presentationRadius = {\n    artwork: 'rounded-lg',\n    poster: 'rounded-lg',\n    video: 'rounded-lg',\n    card: 'rounded-xl',\n    chart: 'rounded-md',\n    circle: 'rounded-full',\n    control: 'rounded-md',\n    heading: 'rounded-md',\n    line: 'rounded-full',\n    metric: 'rounded-md',\n} as const;\n\nconst widthClasses: Record<SkeletonWidth, string> = {\n    action: 'w-20',\n    full: 'w-full',\n    medium: 'w-1/2',\n    short: 'w-1/3',\n    wide: 'w-3/4',\n};\n\ninterface SkeletonLoaderProps {\n    children: ReactNode;\n    label: string;\n    loading?: boolean;\n}\n\nfunction SkeletonLoaderRoot({ children, label, loading = true }: SkeletonLoaderProps) {\n    if (!loading) return <Fragment>{children}</Fragment>;\n\n    return (\n        <div role=\"status\" aria-busy=\"true\" aria-label={label}>\n            <div aria-hidden=\"true\">{children}</div>\n        </div>\n    );\n}\n\ninterface SkeletonShapeProps {\n    presentation?: SkeletonPresentation;\n    width?: SkeletonWidth;\n}\n\nfunction SkeletonShape({ presentation = 'line', width = 'full' }: SkeletonShapeProps) {\n    const classes = [presentationClasses[presentation], presentation === 'circle' ? null : widthClasses[width]]\n        .filter(Boolean)\n        .join(' ');\n\n    return (\n        <span\n            aria-hidden=\"true\"\n            role=\"presentation\"\n            data-slot=\"skeleton\"\n            className={`lar-skeleton block ${classes} ${presentationRadius[presentation]}`}\n        />\n    );\n}\n\nexport const SkeletonLoader = Object.assign(SkeletonLoaderRoot, { Shape: SkeletonShape });\n"],"mappings":";;;AAiBA,MAAM,sBAA4D;CAC9D,SAAS;CACT,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;AACZ;AAEA,MAAM,qBAAqB;CACvB,SAAS;CACT,QAAQ;CACR,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;AACZ;AAEA,MAAM,eAA8C;CAChD,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,OAAO;CACP,MAAM;AACV;AAQA,SAAS,mBAAmB,EAAE,UAAU,OAAO,UAAU,QAA6B;CAClF,IAAI,CAAC,SAAS,OAAO,oBAAC,UAAD,EAAW,SAAmB,CAAA;CAEnD,OACI,oBAAC,OAAD;EAAK,MAAK;EAAS,aAAU;EAAO,cAAY;EAC5C,UAAA,oBAAC,OAAD;GAAK,eAAY;GAAQ;EAAc,CAAA;CACtC,CAAA;AAEb;AAOA,SAAS,cAAc,EAAE,eAAe,QAAQ,QAAQ,UAA8B;CAClF,MAAM,UAAU,CAAC,oBAAoB,eAAe,iBAAiB,WAAW,OAAO,aAAa,MAAM,CAAC,CACtG,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEb,OACI,oBAAC,QAAD;EACI,eAAY;EACZ,MAAK;EACL,aAAU;EACV,WAAW,sBAAsB,QAAQ,GAAG,mBAAmB;CAClE,CAAA;AAET;AAEA,MAAa,iBAAiB,OAAO,OAAO,oBAAoB,EAAE,OAAO,cAAc,CAAC"}

package/dist/feedback/StatusIndicator.d.ts

@@ -0,0 +1,9 @@
+export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+interface StatusIndicatorProps {
+  className?: string;
+  size?: 'sm' | 'md';
+  tone: StatusTone;
+}
+export declare function StatusIndicator({ className, size, tone }: StatusIndicatorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/feedback/StatusIndicator.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+// src/feedback/StatusIndicator.tsx
+const toneClasses = {
+	neutral: "bg-base-400",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger",
+	info: "bg-info"
+};
+const sizeClasses = {
+	sm: "size-1.5",
+	md: "size-2"
+};
+function StatusIndicator({ className, size = "md", tone }) {
+	const classes = [
+		"inline-block shrink-0 rounded-full",
+		sizeClasses[size],
+		toneClasses[tone],
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: classes
+	});
+}
+export { StatusIndicator };
+
+//# sourceMappingURL=StatusIndicator.js.map

package/dist/feedback/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","names":[],"sources":["../../src/feedback/StatusIndicator.tsx"],"sourcesContent":["export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\ninterface StatusIndicatorProps {\n    className?: string;\n    size?: 'sm' | 'md';\n    tone: StatusTone;\n}\n\nconst toneClasses: Record<StatusTone, string> = {\n    neutral: 'bg-base-400',\n    success: 'bg-success',\n    warning: 'bg-warning',\n    danger: 'bg-danger',\n    info: 'bg-info',\n};\n\nconst sizeClasses: Record<NonNullable<StatusIndicatorProps['size']>, string> = {\n    sm: 'size-1.5',\n    md: 'size-2',\n};\n\nexport function StatusIndicator({ className, size = 'md', tone }: StatusIndicatorProps) {\n    const classes = ['inline-block shrink-0 rounded-full', sizeClasses[size], toneClasses[tone], className]\n        .filter(Boolean)\n        .join(' ');\n\n    return <span aria-hidden=\"true\" className={classes} />;\n}\n"],"mappings":";;AAQA,MAAM,cAA0C;CAC5C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;AAEA,MAAM,cAAyE;CAC3E,IAAI;CACJ,IAAI;AACR;AAEA,SAAgB,gBAAgB,EAAE,WAAW,OAAO,MAAM,QAA8B;CACpF,MAAM,UAAU;EAAC;EAAsC,YAAY;EAAO,YAAY;EAAO;CAAS,CAAC,CAClG,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEb,OAAO,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW;CAAU,CAAA;AACzD"}

package/dist/feedback/StatusPopoverContent.d.ts

@@ -0,0 +1,13 @@
+import { StatusTone } from "./StatusIndicator.js";
+import { ReactNode } from "react";
+interface StatusPopoverContentProps {
+  children: ReactNode;
+  detail?: string;
+  status: string;
+  title: string;
+  tone: StatusTone;
+  width?: 'sm' | 'md';
+}
+export declare function StatusPopoverContent({ children, detail, status, title, tone, width }: StatusPopoverContentProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StatusPopoverContent.d.ts.map

package/dist/feedback/StatusPopoverContent.js

@@ -0,0 +1,50 @@
+import { Badge } from "../display/Badge.js";
+import { Inline, Stack as Stack$1 } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@ninna-ui/layout";
+import { Popover } from "@ninna-ui/overlays";
+// src/feedback/StatusPopoverContent.tsx
+const widthClasses = {
+	sm: "w-72",
+	md: "w-80"
+};
+function StatusPopoverContent({ children, detail, status, title, tone, width = "sm" }) {
+	return /* @__PURE__ */ jsxs(Popover.Content, {
+		side: "bottom",
+		align: "end",
+		sideOffset: 8,
+		className: `${widthClasses[width]} p-0`,
+		children: [/* @__PURE__ */ jsx(Box, {
+			className: "border-base-300 border-b p-4",
+			children: /* @__PURE__ */ jsxs(Inline, {
+				align: "center",
+				justify: "between",
+				space: "group",
+				children: [/* @__PURE__ */ jsxs(Stack$1, {
+					space: "none",
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "label",
+						children: title
+					}), detail ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "caption",
+						tone: "muted",
+						children: detail
+					}) : null]
+				}), /* @__PURE__ */ jsx(Badge, {
+					tone,
+					children: status
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Stack$1, {
+			space: "tight",
+			className: "p-2",
+			children
+		})]
+	});
+}
+export { StatusPopoverContent };
+
+//# sourceMappingURL=StatusPopoverContent.js.map

package/dist/feedback/StatusPopoverContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPopoverContent.js","names":["Stack"],"sources":["../../src/feedback/StatusPopoverContent.tsx"],"sourcesContent":["import { Box } from '@ninna-ui/layout';\nimport { Popover } from '@ninna-ui/overlays';\nimport type { ReactNode } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport { Inline, Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\nimport { type StatusTone } from './StatusIndicator';\n\ninterface StatusPopoverContentProps {\n    children: ReactNode;\n    detail?: string;\n    status: string;\n    title: string;\n    tone: StatusTone;\n    width?: 'sm' | 'md';\n}\n\nconst widthClasses: Record<NonNullable<StatusPopoverContentProps['width']>, string> = {\n    sm: 'w-72',\n    md: 'w-80',\n};\n\nexport function StatusPopoverContent({\n    children,\n    detail,\n    status,\n    title,\n    tone,\n    width = 'sm',\n}: StatusPopoverContentProps) {\n    return (\n        <Popover.Content side=\"bottom\" align=\"end\" sideOffset={8} className={`${widthClasses[width]} p-0`}>\n            <Box className=\"border-base-300 border-b p-4\">\n                <Inline align=\"center\" justify=\"between\" space=\"group\">\n                    <Stack space=\"none\">\n                        <Text as=\"span\" variant=\"label\">\n                            {title}\n                        </Text>\n                        {detail ? (\n                            <Text as=\"span\" variant=\"caption\" tone=\"muted\">\n                                {detail}\n                            </Text>\n                        ) : null}\n                    </Stack>\n                    <Badge tone={tone}>{status}</Badge>\n                </Inline>\n            </Box>\n            <Stack space=\"tight\" className=\"p-2\">\n                {children}\n            </Stack>\n        </Popover.Content>\n    );\n}\n"],"mappings":";;;;;;;AAkBA,MAAM,eAAgF;CAClF,IAAI;CACJ,IAAI;AACR;AAEA,SAAgB,qBAAqB,EACjC,UACA,QACA,QACA,OACA,MACA,QAAQ,QACkB;CAC1B,OACI,qBAAC,QAAQ,SAAT;EAAiB,MAAK;EAAS,OAAM;EAAM,YAAY;EAAG,WAAW,GAAG,aAAa,OAAO;EAA5F,UAAA,CACI,oBAAC,KAAD;GAAK,WAAU;GACX,UAAA,qBAAC,QAAD;IAAQ,OAAM;IAAS,SAAQ;IAAU,OAAM;IAA/C,UAAA,CACI,qBAACA,SAAD;KAAO,OAAM;KAAb,UAAA,CACI,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAQ;MACnB,UAAA;KACC,CAAA,GACL,SACG,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAQ;MAAU,MAAK;MAClC,UAAA;KACC,CAAA,IACN,IACD;IACP,CAAA,GAAA,oBAAC,OAAD;KAAa;KAAO,UAAA;IAAc,CAAA,CAC9B;;EACP,CAAA,GACL,oBAACA,SAAD;GAAO,OAAM;GAAQ,WAAU;GAC1B;EACE,CAAA,CACM;;AAEzB"}

package/dist/feedback/StatusRow.d.ts

@@ -0,0 +1,16 @@
+import { StatusTone } from "./StatusIndicator.js";
+import { ReactNode } from "react";
+interface StatusRowProps {
+  loading?: boolean;
+  compact?: boolean;
+  detail?: string;
+  indicator?: ReactNode;
+  label: string;
+  tone: StatusTone;
+  trailing?: ReactNode;
+  value?: string;
+  secondaryDetail?: string;
+}
+export declare function StatusRow({ compact, loading, detail, indicator, label, tone, trailing, value, secondaryDetail }: StatusRowProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StatusRow.d.ts.map

package/dist/feedback/StatusRow.js

@@ -0,0 +1,60 @@
+import { Inline, Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { StatusIndicator } from "./StatusIndicator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/feedback/StatusRow.tsx
+function StatusRow({ compact = false, loading = false, detail, indicator, label, tone, trailing, value, secondaryDetail }) {
+	return /* @__PURE__ */ jsxs(Inline, {
+		align: "center",
+		justify: "between",
+		space: "section",
+		className: "min-w-0 rounded-lg px-2 py-2",
+		children: [/* @__PURE__ */ jsxs(Inline, {
+			align: "center",
+			space: "related",
+			className: "min-w-0 flex-1",
+			children: [indicator || compact ? /* @__PURE__ */ jsx("span", {
+				className: `flex shrink-0 items-center justify-center [&>[data-slot=skeleton]]:size-full ${compact ? "size-5" : "size-8"}`,
+				children: indicator ?? /* @__PURE__ */ jsx(StatusIndicator, { tone })
+			}) : /* @__PURE__ */ jsx(StatusIndicator, { tone }), /* @__PURE__ */ jsxs(Stack, {
+				space: "none",
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: compact ? "caption" : "body",
+						truncate: true,
+						title: label,
+						loading,
+						children: label
+					}),
+					detail ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						title: detail,
+						variant: "caption",
+						tone: "muted",
+						loading,
+						children: detail
+					}) : null,
+					secondaryDetail !== void 0 ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						title: secondaryDetail,
+						variant: "caption",
+						tone: "muted",
+						loading,
+						children: secondaryDetail || "\xA0"
+					}) : null
+				]
+			})]
+		}), trailing ?? /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: compact ? "caption" : "body",
+			tone: "muted",
+			className: compact ? "w-20 shrink-0 text-end" : void 0,
+			children: value
+		})]
+	});
+}
+export { StatusRow };
+
+//# sourceMappingURL=StatusRow.js.map

package/dist/feedback/StatusRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusRow.js","names":[],"sources":["../../src/feedback/StatusRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Inline, Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\nimport { StatusIndicator, type StatusTone } from './StatusIndicator';\n\ninterface StatusRowProps {\n    loading?: boolean;\n    compact?: boolean;\n    detail?: string;\n    indicator?: ReactNode;\n    label: string;\n    tone: StatusTone;\n    trailing?: ReactNode;\n    value?: string;\n    secondaryDetail?: string;\n}\n\nexport function StatusRow({\n    compact = false,\n    loading = false,\n    detail,\n    indicator,\n    label,\n    tone,\n    trailing,\n    value,\n    secondaryDetail,\n}: StatusRowProps) {\n    return (\n        <Inline align=\"center\" justify=\"between\" space=\"section\" className=\"min-w-0 rounded-lg px-2 py-2\">\n            <Inline align=\"center\" space=\"related\" className=\"min-w-0 flex-1\">\n                {indicator || compact ? (\n                    <span\n                        className={`flex shrink-0 items-center justify-center [&>[data-slot=skeleton]]:size-full ${compact ? 'size-5' : 'size-8'}`}\n                    >\n                        {indicator ?? <StatusIndicator tone={tone} />}\n                    </span>\n                ) : (\n                    <StatusIndicator tone={tone} />\n                )}\n                <Stack space=\"none\" className=\"min-w-0 flex-1\">\n                    <Text as=\"span\" variant={compact ? 'caption' : 'body'} truncate title={label} loading={loading}>\n                        {label}\n                    </Text>\n                    {detail ? (\n                        <Text as=\"span\" title={detail} variant=\"caption\" tone=\"muted\" loading={loading}>\n                            {detail}\n                        </Text>\n                    ) : null}\n                    {secondaryDetail !== undefined ? (\n                        <Text as=\"span\" title={secondaryDetail} variant=\"caption\" tone=\"muted\" loading={loading}>\n                            {secondaryDetail || '\\u00a0'}\n                        </Text>\n                    ) : null}\n                </Stack>\n            </Inline>\n            {trailing ?? (\n                <Text\n                    as=\"span\"\n                    variant={compact ? 'caption' : 'body'}\n                    tone=\"muted\"\n                    className={compact ? 'w-20 shrink-0 text-end' : undefined}\n                >\n                    {value}\n                </Text>\n            )}\n        </Inline>\n    );\n}\n"],"mappings":";;;;;AAkBA,SAAgB,UAAU,EACtB,UAAU,OACV,UAAU,OACV,QACA,WACA,OACA,MACA,UACA,OACA,mBACe;CACf,OACI,qBAAC,QAAD;EAAQ,OAAM;EAAS,SAAQ;EAAU,OAAM;EAAU,WAAU;EAAnE,UAAA,CACI,qBAAC,QAAD;GAAQ,OAAM;GAAS,OAAM;GAAU,WAAU;GAAjD,UAAA,CACK,aAAa,UACV,oBAAC,QAAD;IACI,WAAW,gFAAgF,UAAU,WAAW;IAE/G,UAAA,aAAa,oBAAC,iBAAD,EAAuB,KAAO,CAAA;GAC1C,CAAA,IAEN,oBAAC,iBAAD,EAAuB,KAAO,CAAA,GAElC,qBAAC,OAAD;IAAO,OAAM;IAAO,WAAU;IAA9B,UAAA;KACI,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAS,UAAU,YAAY;MAAQ,UAAA;MAAS,OAAO;MAAgB;MAClF,UAAA;KACC,CAAA;KACL,SACG,oBAAC,MAAD;MAAM,IAAG;MAAO,OAAO;MAAQ,SAAQ;MAAU,MAAK;MAAiB;MAClE,UAAA;KACC,CAAA,IACN;KACH,oBAAoB,KAAA,IACjB,oBAAC,MAAD;MAAM,IAAG;MAAO,OAAO;MAAiB,SAAQ;MAAU,MAAK;MAAiB;MAC3E,UAAA,mBAAmB;KAClB,CAAA,IACN;IACD;GACH,CAAA,CAAA;EACP,CAAA,GAAA,YACG,oBAAC,MAAD;GACI,IAAG;GACH,SAAS,UAAU,YAAY;GAC/B,MAAK;GACL,WAAW,UAAU,2BAA2B,KAAA;GAE/C,UAAA;EACC,CAAA,CAEN;;AAEhB"}

package/dist/feedback/index.d.ts

@@ -0,0 +1,11 @@
+import { StatusIndicator, StatusTone } from "./StatusIndicator.js";
+import { Alert as Alert$1 } from "./Alert.js";
+import { AsyncState } from "./AsyncState.js";
+import { ErrorNotification, dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./ErrorNotification.js";
+import { Notifications } from "./Notifications.js";
+import { ProgressStatusRow } from "./ProgressStatusRow.js";
+import { SkeletonLoader } from "./SkeletonLoader.js";
+import { StatusPopoverContent } from "./StatusPopoverContent.js";
+import { StatusRow } from "./StatusRow.js";
+import { Loading as Loading$1 } from "@ninna-ui/feedback";
+export { Alert$1 as Alert, AsyncState, type ErrorNotification, Loading$1 as Loading, Notifications, ProgressStatusRow, SkeletonLoader, StatusIndicator, StatusPopoverContent, StatusRow, type StatusTone, dismissAllNotifications, showErrorNotification, showSuccessNotification };

package/dist/feedback/index.js

@@ -0,0 +1,11 @@
+import { StatusIndicator } from "./StatusIndicator.js";
+import { SkeletonLoader } from "./SkeletonLoader.js";
+import { Alert as Alert$1 } from "./Alert.js";
+import { AsyncState } from "./AsyncState.js";
+import { dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./ErrorNotification.js";
+import { Notifications } from "./Notifications.js";
+import { ProgressStatusRow } from "./ProgressStatusRow.js";
+import { StatusPopoverContent } from "./StatusPopoverContent.js";
+import { StatusRow } from "./StatusRow.js";
+import { Loading as Loading$1 } from "@ninna-ui/feedback";
+export { Alert$1 as Alert, AsyncState, Loading$1 as Loading, Notifications, ProgressStatusRow, SkeletonLoader, StatusIndicator, StatusPopoverContent, StatusRow, dismissAllNotifications, showErrorNotification, showSuccessNotification };

package/dist/forms/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from "react";
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+  label?: string;
+  indeterminate?: boolean;
+};
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label?: string;
+  indeterminate?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/forms/Checkbox.js

@@ -0,0 +1,48 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { formChoiceClasses } from "./FormControlStyles.js";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/forms/Checkbox.tsx
+const Checkbox = forwardRef(({ label, indeterminate = false, "aria-checked": ariaChecked, className, onChange, ...props }, ref) => {
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	useLayoutEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	});
+	const control = /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex size-4 shrink-0 align-middle",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...tabbable,
+				...props,
+				ref: inputRef,
+				type: "checkbox",
+				onChange: (event) => {
+					onChange?.(event);
+					event.currentTarget.indeterminate = indeterminate;
+				},
+				"aria-checked": indeterminate ? "mixed" : ariaChecked,
+				className: `peer m-0 size-4 shrink-0 cursor-pointer appearance-none rounded-sm ${formChoiceClasses} checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary dark:checked:border-primary dark:checked:bg-primary dark:indeterminate:border-primary dark:indeterminate:bg-primary forced-colors:appearance-auto ${className ?? ""}`
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-primary-content pointer-events-none absolute inset-0 hidden peer-checked:block peer-indeterminate:hidden peer-disabled:opacity-50 forced-colors:hidden",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-0 hidden items-center justify-center peer-indeterminate:flex peer-disabled:opacity-50 forced-colors:hidden",
+				children: /* @__PURE__ */ jsx("span", { className: "bg-primary-content h-0.5 w-2 rounded-full" })
+			})
+		]
+	});
+	return label === void 0 ? control : /* @__PURE__ */ jsxs("label", {
+		className: "text-base-content has-disabled:text-base-700 inline-flex cursor-pointer items-center gap-2 text-sm has-disabled:cursor-default",
+		children: [control, /* @__PURE__ */ jsx("span", { children: label })]
+	});
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/forms/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/forms/Checkbox.tsx"],"sourcesContent":["import { CheckIcon } from 'lucide-react';\nimport { forwardRef, type InputHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { formChoiceClasses } from './FormControlStyles';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {\n    label?: string;\n    indeterminate?: boolean;\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n    ({ label, indeterminate = false, 'aria-checked': ariaChecked, className, onChange, ...props }, ref) => {\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        useImperativeHandle(ref, () => inputRef.current!);\n        useLayoutEffect(() => {\n            if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n        });\n\n        const control = (\n            <span className=\"relative inline-flex size-4 shrink-0 align-middle\">\n                <input\n                    {...tabbable}\n                    {...props}\n                    ref={inputRef}\n                    type=\"checkbox\"\n                    onChange={(event) => {\n                        onChange?.(event);\n                        event.currentTarget.indeterminate = indeterminate;\n                    }}\n                    aria-checked={indeterminate ? 'mixed' : ariaChecked}\n                    className={`peer m-0 size-4 shrink-0 cursor-pointer appearance-none rounded-sm ${formChoiceClasses} checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary dark:checked:border-primary dark:checked:bg-primary dark:indeterminate:border-primary dark:indeterminate:bg-primary forced-colors:appearance-auto ${className ?? ''}`}\n                />\n                <span\n                    aria-hidden=\"true\"\n                    className=\"text-primary-content pointer-events-none absolute inset-0 hidden peer-checked:block peer-indeterminate:hidden peer-disabled:opacity-50 forced-colors:hidden\"\n                >\n                    <CheckIcon />\n                </span>\n                <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-0 hidden items-center justify-center peer-indeterminate:flex peer-disabled:opacity-50 forced-colors:hidden\"\n                >\n                    <span className=\"bg-primary-content h-0.5 w-2 rounded-full\" />\n                </span>\n            </span>\n        );\n\n        return label === undefined ? (\n            control\n        ) : (\n            <label className=\"text-base-content has-disabled:text-base-700 inline-flex cursor-pointer items-center gap-2 text-sm has-disabled:cursor-default\">\n                {control}\n                <span>{label}</span>\n            </label>\n        );\n    },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;;;;AAWA,MAAa,WAAW,YACnB,EAAE,OAAO,gBAAgB,OAAO,gBAAgB,aAAa,WAAW,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,OAAyB,IAAI;CAE9C,oBAAoB,WAAW,SAAS,OAAQ;CAChD,sBAAsB;EAClB,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CAC3D,CAAC;CAED,MAAM,UACF,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACI,oBAAC,SAAD;IACI,GAAI;IACJ,GAAI;IACJ,KAAK;IACL,MAAK;IACL,WAAW,UAAU;KACjB,WAAW,KAAK;KAChB,MAAM,cAAc,gBAAgB;IACxC;IACA,gBAAc,gBAAgB,UAAU;IACxC,WAAW,sEAAsE,kBAAkB,qPAAqP,aAAa;GACxW,CAAA;GACD,oBAAC,QAAD;IACI,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,WAAD,CAAY,CAAA;GACV,CAAA;GACN,oBAAC,QAAD;IACI,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,4CAA6C,CAAA;GAC3D,CAAA;EACJ;;CAGV,OAAO,UAAU,KAAA,IACb,UAEA,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA,CACK,SACD,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CAChB;;AAEf,CACJ;AAEA,SAAS,cAAc"}

package/dist/forms/Field.d.ts

@@ -0,0 +1,5 @@
+import { FieldProps } from "@ninna-ui/forms";
+type FieldProps$1 = Omit<FieldProps, 'size'>;
+declare const Field$1: import("react").ForwardRefExoticComponent<FieldProps$1 & import("react").RefAttributes<HTMLDivElement>>;
+export { Field$1 as Field, FieldProps$1 as FieldProps };
+//# sourceMappingURL=Field.d.ts.map

package/dist/forms/Field.js

@@ -0,0 +1,15 @@
+import { formControlDefaults } from "./FormControlStyles.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@ninna-ui/forms";
+// src/forms/Field.tsx
+const Field$1 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Field, {
+	ref,
+	...props,
+	size: formControlDefaults.size,
+	className: `[&>div:first-child>label>span]:text-base-500 [&>p]:text-xs ${className ?? ""}`
+}));
+Field$1.displayName = "Field";
+export { Field$1 as Field };
+
+//# sourceMappingURL=Field.js.map

package/dist/forms/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":["Field","NinnaField"],"sources":["../../src/forms/Field.tsx"],"sourcesContent":["import { Field as NinnaField, type FieldProps as NinnaFieldProps } from '@ninna-ui/forms';\nimport { forwardRef } from 'react';\n\nimport { formControlDefaults } from './FormControlStyles';\n\nexport type FieldProps = Omit<NinnaFieldProps, 'size'>;\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(({ className, ...props }, ref) => (\n    <NinnaField\n        ref={ref}\n        {...props}\n        size={formControlDefaults.size}\n        className={`[&>div:first-child>label>span]:text-base-500 [&>p]:text-xs ${className ?? ''}`}\n    />\n));\n\nField.displayName = 'Field';\n"],"mappings":";;;;;AAOA,MAAaA,UAAQ,YAAwC,EAAE,WAAW,GAAG,SAAS,QAClF,oBAACC,OAAD;CACS;CACL,GAAI;CACJ,MAAM,oBAAoB;CAC1B,WAAW,8DAA8D,aAAa;AACzF,CAAA,CACJ;AAED,QAAM,cAAc"}

package/dist/forms/FormControlStyles.js

@@ -0,0 +1,14 @@
+// src/forms/FormControlStyles.ts
+const formControlDefaults = {
+	size: "sm",
+	variant: "filled",
+	color: "primary"
+};
+const formControlBorderClasses = "border border-base-400/80 dark:border-base-400";
+const formChoiceClasses = `${formControlBorderClasses} bg-base-100 shadow-xs/5 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-default disabled:opacity-50 dark:bg-base-400/30`;
+/** T3 Code's input: an 8px-radius field on the card surface with a hairline input border, a faint shadow and a
+*  3px primary ring while focused. */
+const formControlClasses = `min-w-0 rounded-md ${formControlBorderClasses} bg-base-100 text-base-content shadow-xs/5 placeholder:text-base-700 data-placeholder:text-base-700 focus:border-primary focus:bg-base-100 focus:ring-[3px] focus:ring-primary/20 dark:bg-base-400/30 dark:focus:bg-base-400/30 data-invalid:border-danger/60 data-invalid:bg-base-100 aria-invalid:border-danger/60 aria-invalid:bg-base-100 data-invalid:focus:ring-danger/16 aria-invalid:focus:ring-danger/16`;
+export { formChoiceClasses, formControlBorderClasses, formControlClasses, formControlDefaults };
+
+//# sourceMappingURL=FormControlStyles.js.map

package/dist/forms/FormControlStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlStyles.js","names":[],"sources":["../../src/forms/FormControlStyles.ts"],"sourcesContent":["export const formControlDefaults = { size: 'sm', variant: 'filled', color: 'primary' } as const;\n\nexport const formControlBorderClasses = 'border border-base-400/80 dark:border-base-400';\n\nexport const formChoiceClasses = `${formControlBorderClasses} bg-base-100 shadow-xs/5 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-primary/20 disabled:cursor-default disabled:opacity-50 dark:bg-base-400/30`;\n\n/** T3 Code's input: an 8px-radius field on the card surface with a hairline input border, a faint shadow and a\n *  3px primary ring while focused. */\nexport const formControlClasses = `min-w-0 rounded-md ${formControlBorderClasses} bg-base-100 text-base-content shadow-xs/5 placeholder:text-base-700 data-placeholder:text-base-700 focus:border-primary focus:bg-base-100 focus:ring-[3px] focus:ring-primary/20 dark:bg-base-400/30 dark:focus:bg-base-400/30 data-invalid:border-danger/60 data-invalid:bg-base-100 aria-invalid:border-danger/60 aria-invalid:bg-base-100 data-invalid:focus:ring-danger/16 aria-invalid:focus:ring-danger/16`;\n"],"mappings":";AAAA,MAAa,sBAAsB;CAAE,MAAM;CAAM,SAAS;CAAU,OAAO;AAAU;AAErF,MAAa,2BAA2B;AAExC,MAAa,oBAAoB,GAAG,yBAAyB;;;AAI7D,MAAa,qBAAqB,sBAAsB,yBAAyB"}

package/dist/forms/FormSection.d.ts

@@ -0,0 +1,48 @@
+import { ButtonProps } from "../actions/Button.js";
+import { FieldProps } from "./Field.js";
+import { ReactNode } from "react";
+export declare function FormContent({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FormStack({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+interface FormSectionProps {
+  action?: ReactNode;
+  badges?: ReactNode;
+  children: ReactNode;
+  description?: string;
+  loading?: boolean;
+  loadingLabel?: string;
+  title: ReactNode;
+}
+export declare function FormSection({ action, badges, children, description, loading, loadingLabel, title }: FormSectionProps): import("react").JSX.Element;
+interface FormRowProps {
+  badges?: ReactNode;
+  children: ReactNode;
+  description: string;
+  /** The row's element id, for linking or scrolling to it; a row with one can take focus when it is opened. */
+  id?: string;
+  label: ReactNode;
+}
+export declare function FormRow({ badges, children, description, id, label }: FormRowProps): import("react").JSX.Element;
+type FormFieldProps = Omit<FieldProps, 'children' | 'className'> & {
+  action?: ReactNode;
+} & ({
+  children: ReactNode;
+  loading?: false;
+  loadingLabel?: never;
+} | {
+  children?: never;
+  loading: true;
+  loadingLabel: string;
+});
+export declare function FormField({ action, children, loading, loadingLabel, ...props }: FormFieldProps): import("react").JSX.Element;
+export declare function FormAction(props: Omit<ButtonProps, 'type' | 'size' | 'variant' | 'color'>): import("react").JSX.Element;
+export declare function Disclosure({ children, label, lazy }: {
+  children: ReactNode;
+  label: string;
+  lazy?: boolean;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=FormSection.d.ts.map

package/dist/forms/FormSection.js

@@ -0,0 +1,142 @@
+import { Button } from "../actions/Button.js";
+import { InsetPanel } from "../display/InsetPanel.js";
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Stack } from "../layout/Flow.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { Field } from "./Field.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/forms/FormSection.tsx
+const contentSpacing = "px-4 py-3.5 sm:px-5";
+const rowClasses = `grid min-w-0 gap-x-6 gap-y-3 sm:items-center ${contentSpacing}`;
+function FormContent({ children }) {
+	return /* @__PURE__ */ jsx(Stack, {
+		space: "group",
+		className: contentSpacing,
+		children
+	});
+}
+function FormStack({ children }) {
+	return /* @__PURE__ */ jsx(Stack, {
+		space: "page",
+		children
+	});
+}
+function FormSection({ action, badges, children, description, loading = false, loadingLabel, title }) {
+	const titleId = useId();
+	const content = /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": titleId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-5 items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Heading, {
+					id: titleId,
+					as: "h3",
+					className: "text-base-700",
+					variant: "label",
+					children: title
+				}), badges]
+			}), action]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-3",
+			children: /* @__PURE__ */ jsxs(InsetPanel, {
+				presentation: "settings",
+				children: [description ? /* @__PURE__ */ jsx(FormContent, { children: /* @__PURE__ */ jsx(Text, {
+					variant: "caption",
+					tone: "muted",
+					children: description
+				}) }) : null, children]
+			})
+		})]
+	});
+	return loading ? /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: loadingLabel ?? (typeof title === "string" ? title : ""),
+		children: content
+	}) : content;
+}
+function FormRow({ badges, children, description, id, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		tabIndex: id ? -1 : void 0,
+		className: `${rowClasses} sm:grid-cols-[minmax(0,1fr)_13rem] sm:has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto]`,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			space: "tight",
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-2 gap-y-1.5",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "label",
+					children: label
+				}), badges]
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "caption",
+				tone: "muted",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 sm:flex sm:justify-end [&>[role=status]]:w-full",
+			children
+		})]
+	});
+}
+function FormField({ action, children, loading = false, loadingLabel, ...props }) {
+	if (loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: loadingLabel ?? "",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)]`,
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "label",
+				className: "w-3/4",
+				loading: true
+			}), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "control" })]
+		})
+	});
+	const content = children;
+	if (action) return /* @__PURE__ */ jsxs("div", {
+		className: `${rowClasses} grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[9rem_minmax(0,1fr)_auto]`,
+		children: [/* @__PURE__ */ jsx(Field, {
+			...props,
+			className: "contents [&>div]:min-w-0 [&>div:first-child]:col-span-2 [&>div:first-child]:mb-0 sm:[&>div:first-child]:col-span-1 [&>p]:col-span-2 [&>p]:mt-0 sm:[&>p]:col-start-2",
+			children: content
+		}), /* @__PURE__ */ jsx("div", {
+			className: "col-start-2 row-start-2 flex items-center gap-2 sm:col-start-3 sm:row-start-1",
+			children: action
+		})]
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		...props,
+		className: `${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)] [&>div]:min-w-0 [&>div:first-child]:mb-0 [&>p]:mt-0 sm:[&>p]:col-start-2`,
+		children: content
+	});
+}
+function FormAction(props) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		type: "button",
+		variant: "subtle"
+	});
+}
+function Disclosure({ children, label, lazy = false }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("details", {
+		className: "group px-1",
+		onToggle: (event) => setOpen(event.currentTarget.open),
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "text-base-700 hover:text-base-content focus-visible:outline-primary flex w-fit cursor-pointer list-none items-center gap-1.5 rounded py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "-rotate-90 transition-transform group-open:rotate-0 [&>svg]:size-3",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+			}), label]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "text-base-700 mt-2 space-y-2 text-xs leading-relaxed",
+			children: !lazy || open ? children : null
+		})]
+	});
+}
+export { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack };
+
+//# sourceMappingURL=FormSection.js.map

package/dist/forms/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","names":[],"sources":["../../src/forms/FormSection.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\nimport { type ReactNode, useId, useState } from 'react';\n\nimport { Button, type ButtonProps } from '../actions/Button';\nimport { InsetPanel } from '../display/InsetPanel';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\nimport { Field, type FieldProps } from './Field';\n\nconst contentSpacing = 'px-4 py-3.5 sm:px-5';\nconst rowClasses = `grid min-w-0 gap-x-6 gap-y-3 sm:items-center ${contentSpacing}`;\n\nexport function FormContent({ children }: { children: ReactNode }) {\n    return (\n        <Stack space=\"group\" className={contentSpacing}>\n            {children}\n        </Stack>\n    );\n}\n\nexport function FormStack({ children }: { children: ReactNode }) {\n    return <Stack space=\"page\">{children}</Stack>;\n}\n\ninterface FormSectionProps {\n    action?: ReactNode;\n    badges?: ReactNode;\n    children: ReactNode;\n    description?: string;\n    loading?: boolean;\n    loadingLabel?: string;\n    title: ReactNode;\n}\n\nexport function FormSection({\n    action,\n    badges,\n    children,\n    description,\n    loading = false,\n    loadingLabel,\n    title,\n}: FormSectionProps) {\n    const titleId = useId();\n    const content = (\n        <section aria-labelledby={titleId}>\n            <div className=\"flex min-h-5 items-center justify-between gap-3\">\n                <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n                    <Heading id={titleId} as=\"h3\" className=\"text-base-700\" variant=\"label\">\n                        {title}\n                    </Heading>\n                    {badges}\n                </div>\n                {action}\n            </div>\n            <div className=\"mt-3\">\n                <InsetPanel presentation=\"settings\">\n                    {description ? (\n                        <FormContent>\n                            <Text variant=\"caption\" tone=\"muted\">\n                                {description}\n                            </Text>\n                        </FormContent>\n                    ) : null}\n                    {children}\n                </InsetPanel>\n            </div>\n        </section>\n    );\n\n    return loading ? (\n        <SkeletonLoader label={loadingLabel ?? (typeof title === 'string' ? title : '')}>{content}</SkeletonLoader>\n    ) : (\n        content\n    );\n}\n\ninterface FormRowProps {\n    badges?: ReactNode;\n    children: ReactNode;\n    description: string;\n    /** The row's element id, for linking or scrolling to it; a row with one can take focus when it is opened. */\n    id?: string;\n    label: ReactNode;\n}\n\nexport function FormRow({ badges, children, description, id, label }: FormRowProps) {\n    return (\n        <div\n            id={id}\n            tabIndex={id ? -1 : undefined}\n            className={`${rowClasses} sm:grid-cols-[minmax(0,1fr)_13rem] sm:has-[[role=switch]]:grid-cols-[minmax(0,1fr)_auto]`}\n        >\n            <Stack space=\"tight\" className=\"min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1.5\">\n                    <Text as=\"span\" variant=\"label\">\n                        {label}\n                    </Text>\n                    {badges}\n                </div>\n                <Text variant=\"caption\" tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            <div className=\"min-w-0 sm:flex sm:justify-end [&>[role=status]]:w-full\">{children}</div>\n        </div>\n    );\n}\n\ntype FormFieldProps = Omit<FieldProps, 'children' | 'className'> & { action?: ReactNode } & (\n        | { children: ReactNode; loading?: false; loadingLabel?: never }\n        | { children?: never; loading: true; loadingLabel: string }\n    );\n\nexport function FormField({ action, children, loading = false, loadingLabel, ...props }: FormFieldProps) {\n    if (loading)\n        return (\n            <SkeletonLoader label={loadingLabel ?? ''}>\n                <div className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)]`}>\n                    <Text variant=\"label\" className=\"w-3/4\" loading />\n                    <SkeletonLoader.Shape presentation=\"control\" />\n                </div>\n            </SkeletonLoader>\n        );\n\n    const content = children;\n\n    if (action) {\n        return (\n            <div className={`${rowClasses} grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[9rem_minmax(0,1fr)_auto]`}>\n                <Field\n                    {...props}\n                    className=\"contents [&>div]:min-w-0 [&>div:first-child]:col-span-2 [&>div:first-child]:mb-0 sm:[&>div:first-child]:col-span-1 [&>p]:col-span-2 [&>p]:mt-0 sm:[&>p]:col-start-2\"\n                >\n                    {content}\n                </Field>\n                <div className=\"col-start-2 row-start-2 flex items-center gap-2 sm:col-start-3 sm:row-start-1\">\n                    {action}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <Field\n            {...props}\n            className={`${rowClasses} sm:grid-cols-[9rem_minmax(0,1fr)] [&>div]:min-w-0 [&>div:first-child]:mb-0 [&>p]:mt-0 sm:[&>p]:col-start-2`}\n        >\n            {content}\n        </Field>\n    );\n}\n\nexport function FormAction(props: Omit<ButtonProps, 'type' | 'size' | 'variant' | 'color'>) {\n    return <Button {...props} type=\"button\" variant=\"subtle\" />;\n}\n\nexport function Disclosure({ children, label, lazy = false }: { children: ReactNode; label: string; lazy?: boolean }) {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <details className=\"group px-1\" onToggle={(event) => setOpen(event.currentTarget.open)}>\n            <summary className=\"text-base-700 hover:text-base-content focus-visible:outline-primary flex w-fit cursor-pointer list-none items-center gap-1.5 rounded py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 [&::-webkit-details-marker]:hidden\">\n                <span aria-hidden=\"true\" className=\"-rotate-90 transition-transform group-open:rotate-0 [&>svg]:size-3\">\n                    <ChevronDownIcon />\n                </span>\n                {label}\n            </summary>\n            <div className=\"text-base-700 mt-2 space-y-2 text-xs leading-relaxed\">\n                {!lazy || open ? children : null}\n            </div>\n        </details>\n    );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,iBAAiB;AACvB,MAAM,aAAa,gDAAgD;AAEnE,SAAgB,YAAY,EAAE,YAAqC;CAC/D,OACI,oBAAC,OAAD;EAAO,OAAM;EAAQ,WAAW;EAC3B;CACE,CAAA;AAEf;AAEA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OAAO,oBAAC,OAAD;EAAO,OAAM;EAAQ;CAAgB,CAAA;AAChD;AAYA,SAAgB,YAAY,EACxB,QACA,QACA,UACA,aACA,UAAU,OACV,cACA,SACiB;CACjB,MAAM,UAAU,MAAM;CACtB,MAAM,UACF,qBAAC,WAAD;EAAS,mBAAiB;EAA1B,UAAA,CACI,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,SAAD;KAAS,IAAI;KAAS,IAAG;KAAK,WAAU;KAAgB,SAAQ;KAC3D,UAAA;IACI,CAAA,GACR,MACA;GACJ,CAAA,GAAA,MACA;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACX,UAAA,qBAAC,YAAD;IAAY,cAAa;IAAzB,UAAA,CACK,cACG,oBAAC,aAAD,EAAA,UACI,oBAAC,MAAD;KAAM,SAAQ;KAAU,MAAK;KACxB,UAAA;IACC,CAAA,EACG,CAAA,IACb,MACH,QACO;;EACX,CAAA,CACA;;CAGb,OAAO,UACH,oBAAC,gBAAD;EAAgB,OAAO,iBAAiB,OAAO,UAAU,WAAW,QAAQ;EAAM,UAAA;CAAwB,CAAA,IAE1G;AAER;AAWA,SAAgB,QAAQ,EAAE,QAAQ,UAAU,aAAa,IAAI,SAAuB;CAChF,OACI,qBAAC,OAAD;EACQ;EACJ,UAAU,KAAK,KAAK,KAAA;EACpB,WAAW,GAAG,WAAW;EAH7B,UAAA,CAKI,qBAAC,OAAD;GAAO,OAAM;GAAQ,WAAU;GAA/B,UAAA,CACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KACnB,UAAA;IACC,CAAA,GACL,MACA;GACL,CAAA,GAAA,oBAAC,MAAD;IAAM,SAAQ;IAAU,MAAK;IACxB,UAAA;GACC,CAAA,CACH;EACP,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GAA2D;EAAc,CAAA,CACvF;;AAEb;AAOA,SAAgB,UAAU,EAAE,QAAQ,UAAU,UAAU,OAAO,cAAc,GAAG,SAAyB;CACrG,IAAI,SACA,OACI,oBAAC,gBAAD;EAAgB,OAAO,gBAAgB;EACnC,UAAA,qBAAC,OAAD;GAAK,WAAW,GAAG,WAAW;GAA9B,UAAA,CACI,oBAAC,MAAD;IAAM,SAAQ;IAAQ,WAAU;IAAQ,SAAA;GAAS,CAAA,GACjD,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA,CAC7C;;CACO,CAAA;CAGxB,MAAM,UAAU;CAEhB,IAAI,QACA,OACI,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW;EAA9B,UAAA,CACI,oBAAC,OAAD;GACI,GAAI;GACJ,WAAU;GAET,UAAA;EACE,CAAA,GACP,oBAAC,OAAD;GAAK,WAAU;GACV,UAAA;EACA,CAAA,CACJ;;CAIb,OACI,oBAAC,OAAD;EACI,GAAI;EACJ,WAAW,GAAG,WAAW;EAExB,UAAA;CACE,CAAA;AAEf;AAEA,SAAgB,WAAW,OAAiE;CACxF,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAO,MAAK;EAAS,SAAQ;CAAU,CAAA;AAC9D;AAEA,SAAgB,WAAW,EAAE,UAAU,OAAO,OAAO,SAAiE;CAClH,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACI,qBAAC,WAAD;EAAS,WAAU;EAAa,WAAW,UAAU,QAAQ,MAAM,cAAc,IAAI;EAArF,UAAA,CACI,qBAAC,WAAD;GAAS,WAAU;GAAnB,UAAA,CACI,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAC/B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;GAChB,CAAA,GACL,KACI;EACT,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GACV,UAAA,CAAC,QAAQ,OAAO,WAAW;EAC3B,CAAA,CACA;;AAEjB"}