jaci-ui 0.1.0

package/dist/components/copyable/copyable.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+//#region src/components/copyable/copyable.d.ts
+interface CopyableRootProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick" | "onCopy"> {
+  children?: ReactNode;
+  copiedDuration?: number;
+  copiedLabel?: string;
+  copyLabel?: string;
+  onCopy?: (value: string) => void;
+  onError?: (error: unknown) => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  value: string;
+}
+declare const CopyableRoot: import("react").ForwardRefExoticComponent<CopyableRootProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface CopyableContentProps extends Omit<ComponentPropsWithoutRef<"code">, "as"> {
+  as?: "code" | "span";
+}
+declare const CopyableContent: import("react").ForwardRefExoticComponent<CopyableContentProps & import("react").RefAttributes<HTMLElement>>;
+type CopyableIndicatorProps = ComponentPropsWithoutRef<"span">;
+declare const CopyableIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Copyable: {
+  Root: import("react").ForwardRefExoticComponent<CopyableRootProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Content: import("react").ForwardRefExoticComponent<CopyableContentProps & import("react").RefAttributes<HTMLElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Copyable, CopyableContent, CopyableContentProps, CopyableIndicator, CopyableIndicatorProps, CopyableRoot, CopyableRootProps };
+//# sourceMappingURL=copyable.d.ts.map

package/dist/components/copyable/copyable.js

@@ -0,0 +1,121 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { copyable } from "../../styled-system/recipes/copyable.js";
+import { createContext, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copyable/copyable.tsx
+const CopyableContext = createContext(null);
+function useCopyableContext() {
+	const context = useContext(CopyableContext);
+	if (!context) throw new Error("Copyable parts must be rendered inside Copyable.Root.");
+	return context;
+}
+async function copyToClipboard(value) {
+	let primaryError;
+	if (typeof navigator !== "undefined" && typeof navigator.clipboard?.writeText === "function") try {
+		await navigator.clipboard.writeText(value);
+		return;
+	} catch (error) {
+		primaryError = error;
+	}
+	if (typeof document !== "undefined" && typeof document.execCommand === "function") {
+		const textarea = document.createElement("textarea");
+		const selection = document.getSelection();
+		const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index)) : [];
+		textarea.value = value;
+		textarea.setAttribute("readonly", "true");
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		try {
+			if (document.execCommand("copy")) return;
+		} finally {
+			textarea.remove();
+			selection?.removeAllRanges();
+			for (const range of ranges) selection?.addRange(range);
+		}
+	}
+	throw primaryError instanceof Error ? primaryError : /* @__PURE__ */ new Error("Clipboard access is unavailable.");
+}
+const CopyableRoot = forwardRef(function CopyableRoot({ "aria-label": ariaLabel, children, className, copiedDuration = 1500, copiedLabel = "Copied", copyLabel = "Copy to clipboard", disabled = false, onClick, onCopy, onError, value, ...props }, ref) {
+	const [copied, setCopied] = useState(false);
+	const timeoutRef = useRef(void 0);
+	const styles = copyable();
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current !== void 0) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	async function handleCopy() {
+		try {
+			await copyToClipboard(value);
+			setCopied(true);
+			onCopy?.(value);
+			if (timeoutRef.current !== void 0) clearTimeout(timeoutRef.current);
+			timeoutRef.current = setTimeout(() => setCopied(false), copiedDuration);
+		} catch (error) {
+			setCopied(false);
+			onError?.(error);
+		}
+	}
+	return /* @__PURE__ */ jsx(CopyableContext.Provider, {
+		value: {
+			copied,
+			copiedLabel,
+			styles
+		},
+		children: /* @__PURE__ */ jsxs("button", {
+			...props,
+			ref,
+			"aria-label": ariaLabel ?? copyLabel,
+			className: cx(styles.root, className),
+			"data-copied": copied || void 0,
+			"data-disabled": disabled || void 0,
+			"data-jaci-component": "copyable",
+			"data-slot": "copyable",
+			disabled,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) handleCopy();
+			},
+			type: "button",
+			children: [children ?? /* @__PURE__ */ jsx(CopyableContent, { children: value }), /* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: styles.status,
+				"data-slot": "copyable-status",
+				children: copied ? copiedLabel : ""
+			})]
+		})
+	});
+});
+const CopyableContent = forwardRef(function CopyableContent({ as = "code", className, ...props }, ref) {
+	const { styles } = useCopyableContext();
+	return /* @__PURE__ */ jsx(as, {
+		...props,
+		ref,
+		className: cx(styles.content, className),
+		"data-slot": "copyable-content"
+	});
+});
+const CopyableIndicator = forwardRef(function CopyableIndicator({ children, className, ...props }, ref) {
+	const { copied, copiedLabel, styles } = useCopyableContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		"aria-hidden": props["aria-hidden"] ?? true,
+		className: cx(styles.indicator, className),
+		"data-copied": copied || void 0,
+		"data-slot": "copyable-indicator",
+		children: children ?? (copied ? copiedLabel : "Copy")
+	});
+});
+const Copyable = {
+	Root: CopyableRoot,
+	Content: CopyableContent,
+	Indicator: CopyableIndicator
+};
+//#endregion
+export { Copyable, CopyableContent, CopyableIndicator, CopyableRoot };
+
+//# sourceMappingURL=copyable.js.map

package/dist/components/copyable/copyable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyable.js","names":["Component"],"sources":["../../../src/components/copyable/copyable.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, MouseEventHandler, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { copyable } from \"../../styled-system/recipes\";\n\ninterface CopyableContextValue {\n  copied: boolean;\n  copiedLabel: string;\n  styles: ReturnType<typeof copyable>;\n}\n\nconst CopyableContext = createContext<CopyableContextValue | null>(null);\n\nfunction useCopyableContext() {\n  const context = useContext(CopyableContext);\n  if (!context) {\n    throw new Error(\"Copyable parts must be rendered inside Copyable.Root.\");\n  }\n\n  return context;\n}\n\nasync function copyToClipboard(value: string) {\n  let primaryError: unknown;\n\n  if (typeof navigator !== \"undefined\" && typeof navigator.clipboard?.writeText === \"function\") {\n    try {\n      await navigator.clipboard.writeText(value);\n      return;\n    } catch (error) {\n      primaryError = error;\n    }\n  }\n\n  if (typeof document !== \"undefined\" && typeof document.execCommand === \"function\") {\n    const textarea = document.createElement(\"textarea\");\n    const selection = document.getSelection();\n    const ranges = selection\n      ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index))\n      : [];\n\n    textarea.value = value;\n    textarea.setAttribute(\"readonly\", \"true\");\n    textarea.style.position = \"fixed\";\n    textarea.style.opacity = \"0\";\n    document.body.appendChild(textarea);\n    textarea.select();\n\n    try {\n      if (document.execCommand(\"copy\")) {\n        return;\n      }\n    } finally {\n      textarea.remove();\n      selection?.removeAllRanges();\n      for (const range of ranges) {\n        selection?.addRange(range);\n      }\n    }\n  }\n\n  throw primaryError instanceof Error\n    ? primaryError\n    : new Error(\"Clipboard access is unavailable.\");\n}\n\nexport interface CopyableRootProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\" | \"onClick\" | \"onCopy\"> {\n  children?: ReactNode;\n  copiedDuration?: number;\n  copiedLabel?: string;\n  copyLabel?: string;\n  onCopy?: (value: string) => void;\n  onError?: (error: unknown) => void;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  value: string;\n}\n\nexport const CopyableRoot = forwardRef<HTMLButtonElement, CopyableRootProps>(function CopyableRoot(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    className,\n    copiedDuration = 1500,\n    copiedLabel = \"Copied\",\n    copyLabel = \"Copy to clipboard\",\n    disabled = false,\n    onClick,\n    onCopy,\n    onError,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const styles = copyable();\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current !== undefined) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  async function handleCopy() {\n    try {\n      await copyToClipboard(value);\n      setCopied(true);\n      onCopy?.(value);\n      if (timeoutRef.current !== undefined) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(() => setCopied(false), copiedDuration);\n    } catch (error) {\n      setCopied(false);\n      onError?.(error);\n    }\n  }\n\n  return (\n    <CopyableContext.Provider value={{ copied, copiedLabel, styles }}>\n      <button\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? copyLabel}\n        className={cx(styles.root, className)}\n        data-copied={copied || undefined}\n        data-disabled={disabled || undefined}\n        data-jaci-component=\"copyable\"\n        data-slot=\"copyable\"\n        disabled={disabled}\n        onClick={(event: MouseEvent<HTMLButtonElement>) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) {\n            void handleCopy();\n          }\n        }}\n        type=\"button\"\n      >\n        {children ?? <CopyableContent>{value}</CopyableContent>}\n        <span aria-live=\"polite\" className={styles.status} data-slot=\"copyable-status\">\n          {copied ? copiedLabel : \"\"}\n        </span>\n      </button>\n    </CopyableContext.Provider>\n  );\n});\n\nexport interface CopyableContentProps extends Omit<ComponentPropsWithoutRef<\"code\">, \"as\"> {\n  as?: \"code\" | \"span\";\n}\n\nexport const CopyableContent = forwardRef<HTMLElement, CopyableContentProps>(\n  function CopyableContent({ as = \"code\", className, ...props }, ref) {\n    const { styles } = useCopyableContext();\n    const Component = as;\n\n    return (\n      <Component\n        {...props}\n        ref={ref as never}\n        className={cx(styles.content, className)}\n        data-slot=\"copyable-content\"\n      />\n    );\n  },\n);\n\nexport type CopyableIndicatorProps = ComponentPropsWithoutRef<\"span\">;\n\nexport const CopyableIndicator = forwardRef<HTMLSpanElement, CopyableIndicatorProps>(\n  function CopyableIndicator({ children, className, ...props }, ref) {\n    const { copied, copiedLabel, styles } = useCopyableContext();\n\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-hidden={props[\"aria-hidden\"] ?? true}\n        className={cx(styles.indicator, className)}\n        data-copied={copied || undefined}\n        data-slot=\"copyable-indicator\"\n      >\n        {children ?? (copied ? copiedLabel : \"Copy\")}\n      </span>\n    );\n  },\n);\n\nexport const Copyable = {\n  Root: CopyableRoot,\n  Content: CopyableContent,\n  Indicator: CopyableIndicator,\n};\n"],"mappings":"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"}

package/dist/components/copyable/index.d.cts

@@ -0,0 +1,2 @@
+import { Copyable, CopyableContent, CopyableContentProps, CopyableIndicator, CopyableIndicatorProps, CopyableRoot, CopyableRootProps } from "./copyable.cjs";
+export { Copyable, CopyableContent, CopyableContentProps, CopyableIndicator, CopyableIndicatorProps, CopyableRoot, CopyableRootProps };

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

@@ -0,0 +1,2 @@
+import { Copyable, CopyableContent, CopyableContentProps, CopyableIndicator, CopyableIndicatorProps, CopyableRoot, CopyableRootProps } from "./copyable.js";
+export { Copyable, CopyableContent, CopyableContentProps, CopyableIndicator, CopyableIndicatorProps, CopyableRoot, CopyableRootProps };

package/dist/components/data-view/data-view.cjs

@@ -0,0 +1,85 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_data_view = require("../../styled-system/recipes/data-view.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/data-view/data-view.tsx
+const DataViewRoot = (0, react.forwardRef)(function DataViewRoot({ children, className, columns = 3, layout = "list", ...props }, ref) {
+	const styles = require_data_view.dataView({
+		columns: String(columns),
+		layout
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.root, className),
+		"data-columns": columns,
+		"data-jaci-component": "data-view",
+		"data-layout": layout,
+		"data-slot": "data-view",
+		children
+	});
+});
+const DataViewToolbar = (0, react.forwardRef)(function DataViewToolbar({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().toolbar, className),
+		"data-slot": "data-view-toolbar"
+	});
+});
+const DataViewContent = (0, react.forwardRef)(function DataViewContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().content, className),
+		"data-slot": "data-view-content"
+	});
+});
+const DataViewLoading = (0, react.forwardRef)(function DataViewLoading({ children = "Loading…", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		"aria-live": "polite",
+		className: require_cx.cx(require_data_view.dataView().loading, className),
+		"data-slot": "data-view-loading",
+		children
+	});
+});
+const DataViewEmpty = (0, react.forwardRef)(function DataViewEmpty({ children = "No results found.", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().empty, className),
+		"data-slot": "data-view-empty",
+		children
+	});
+});
+const DataViewError = (0, react.forwardRef)(function DataViewError({ children = "Something went wrong.", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		"aria-live": "assertive",
+		className: require_cx.cx(require_data_view.dataView().error, className),
+		"data-slot": "data-view-error",
+		role: "alert",
+		children
+	});
+});
+const DataView = {
+	Root: DataViewRoot,
+	Toolbar: DataViewToolbar,
+	Content: DataViewContent,
+	Loading: DataViewLoading,
+	Empty: DataViewEmpty,
+	Error: DataViewError
+};
+//#endregion
+exports.DataView = DataView;
+exports.DataViewContent = DataViewContent;
+exports.DataViewEmpty = DataViewEmpty;
+exports.DataViewError = DataViewError;
+exports.DataViewLoading = DataViewLoading;
+exports.DataViewRoot = DataViewRoot;
+exports.DataViewToolbar = DataViewToolbar;
+
+//# sourceMappingURL=data-view.cjs.map

package/dist/components/data-view/data-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-view.cjs","names":["dataView","cx"],"sources":["../../../src/components/data-view/data-view.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dataView } from \"../../styled-system/recipes\";\n\nexport type DataViewLayout = \"table\" | \"list\" | \"grid\";\nexport type DataViewColumns = 1 | 2 | 3 | 4;\n\nexport interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"children\"> {\n  children?: ReactNode;\n  columns?: DataViewColumns;\n  layout?: DataViewLayout;\n}\n\nexport const DataViewRoot = forwardRef<HTMLElement, DataViewRootProps>(function DataViewRoot(\n  { children, className, columns = 3, layout = \"list\", ...props },\n  ref,\n) {\n  const styles = dataView({ columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\", layout });\n\n  return (\n    <section\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-columns={columns}\n      data-jaci-component=\"data-view\"\n      data-layout={layout}\n      data-slot=\"data-view\"\n    >\n      {children}\n    </section>\n  );\n});\n\nexport type DataViewToolbarProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewToolbar = forwardRef<HTMLDivElement, DataViewToolbarProps>(\n  function DataViewToolbar({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().toolbar, className)}\n        data-slot=\"data-view-toolbar\"\n      />\n    );\n  },\n);\n\nexport type DataViewContentProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewContent = forwardRef<HTMLDivElement, DataViewContentProps>(\n  function DataViewContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().content, className)}\n        data-slot=\"data-view-content\"\n      />\n    );\n  },\n);\n\nexport interface DataViewStateProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const DataViewLoading = forwardRef<HTMLDivElement, DataViewStateProps>(\n  function DataViewLoading({ children = \"Loading…\", className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-live=\"polite\"\n        className={cx(dataView().loading, className)}\n        data-slot=\"data-view-loading\"\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport const DataViewEmpty = forwardRef<HTMLDivElement, DataViewStateProps>(function DataViewEmpty(\n  { children = \"No results found.\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(dataView().empty, className)}\n      data-slot=\"data-view-empty\"\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const DataViewError = forwardRef<HTMLDivElement, DataViewStateProps>(function DataViewError(\n  { children = \"Something went wrong.\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-live=\"assertive\"\n      className={cx(dataView().error, className)}\n      data-slot=\"data-view-error\"\n      role=\"alert\"\n    >\n      {children}\n    </div>\n  );\n});\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: DataView is the public component API name.\nexport const DataView = {\n  Root: DataViewRoot,\n  Toolbar: DataViewToolbar,\n  Content: DataViewContent,\n  Loading: DataViewLoading,\n  Empty: DataViewEmpty,\n  Error: DataViewError,\n};\n"],"mappings":";;;;;AAeA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA0D,SAAS,aAC9E,EAAE,UAAU,WAAW,UAAU,GAAG,SAAS,QAAQ,GAAG,SACxD,KACA;CACA,MAAM,SAASA,kBAAAA,SAAS;EAAE,SAAS,OAAO,OAAO;EAA4B;CAAO,CAAC;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,gBAAc;EACd,uBAAoB;EACpB,eAAa;EACb,aAAU;EAET;CACM,CAAA;AAEb,CAAC;AAGD,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGD,kBAAAA,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,kBAAAA,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAMA,MAAa,mBAAA,GAAA,MAAA,WAAA,CACX,SAAS,gBAAgB,EAAE,WAAW,YAAY,WAAW,GAAG,SAAS,KAAK;CAC5E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAWC,WAAAA,GAAGD,kBAAAA,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;EAET;CACE,CAAA;AAET,CACF;AAEA,MAAa,iBAAA,GAAA,MAAA,WAAA,CAA+D,SAAS,cACnF,EAAE,WAAW,qBAAqB,WAAW,GAAG,SAChD,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,kBAAAA,SAAS,CAAC,CAAC,OAAO,SAAS;EACzC,aAAU;EAET;CACE,CAAA;AAET,CAAC;AAED,MAAa,iBAAA,GAAA,MAAA,WAAA,CAA+D,SAAS,cACnF,EAAE,WAAW,yBAAyB,WAAW,GAAG,SACpD,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAWC,WAAAA,GAAGD,kBAAAA,SAAS,CAAC,CAAC,OAAO,SAAS;EACzC,aAAU;EACV,MAAK;EAEJ;CACE,CAAA;AAET,CAAC;AAGD,MAAa,WAAW;CACtB,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT"}

package/dist/components/data-view/data-view.d.cts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/data-view/data-view.d.ts
+type DataViewLayout = "table" | "list" | "grid";
+type DataViewColumns = 1 | 2 | 3 | 4;
+interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
+  children?: ReactNode;
+  columns?: DataViewColumns;
+  layout?: DataViewLayout;
+}
+declare const DataViewRoot: import("react").ForwardRefExoticComponent<DataViewRootProps & import("react").RefAttributes<HTMLElement>>;
+type DataViewToolbarProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewToolbar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataViewContentProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataViewStateProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const DataViewLoading: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataViewEmpty: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataViewError: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataView: {
+  Root: import("react").ForwardRefExoticComponent<DataViewRootProps & import("react").RefAttributes<HTMLElement>>;
+  Toolbar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Loading: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+  Empty: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+  Error: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewLayout, DataViewLoading, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewToolbar, DataViewToolbarProps };
+//# sourceMappingURL=data-view.d.cts.map

package/dist/components/data-view/data-view.d.ts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/data-view/data-view.d.ts
+type DataViewLayout = "table" | "list" | "grid";
+type DataViewColumns = 1 | 2 | 3 | 4;
+interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
+  children?: ReactNode;
+  columns?: DataViewColumns;
+  layout?: DataViewLayout;
+}
+declare const DataViewRoot: import("react").ForwardRefExoticComponent<DataViewRootProps & import("react").RefAttributes<HTMLElement>>;
+type DataViewToolbarProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewToolbar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataViewContentProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataViewStateProps extends ComponentPropsWithoutRef<"div"> {
+  children?: ReactNode;
+}
+declare const DataViewLoading: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataViewEmpty: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataViewError: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataView: {
+  Root: import("react").ForwardRefExoticComponent<DataViewRootProps & import("react").RefAttributes<HTMLElement>>;
+  Toolbar: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Loading: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+  Empty: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+  Error: import("react").ForwardRefExoticComponent<DataViewStateProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewLayout, DataViewLoading, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewToolbar, DataViewToolbarProps };
+//# sourceMappingURL=data-view.d.ts.map

package/dist/components/data-view/data-view.js

@@ -0,0 +1,79 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { dataView } from "../../styled-system/recipes/data-view.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-view/data-view.tsx
+const DataViewRoot = forwardRef(function DataViewRoot({ children, className, columns = 3, layout = "list", ...props }, ref) {
+	const styles = dataView({
+		columns: String(columns),
+		layout
+	});
+	return /* @__PURE__ */ jsx("section", {
+		...props,
+		ref,
+		className: cx(styles.root, className),
+		"data-columns": columns,
+		"data-jaci-component": "data-view",
+		"data-layout": layout,
+		"data-slot": "data-view",
+		children
+	});
+});
+const DataViewToolbar = forwardRef(function DataViewToolbar({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().toolbar, className),
+		"data-slot": "data-view-toolbar"
+	});
+});
+const DataViewContent = forwardRef(function DataViewContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().content, className),
+		"data-slot": "data-view-content"
+	});
+});
+const DataViewLoading = forwardRef(function DataViewLoading({ children = "Loading…", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-live": "polite",
+		className: cx(dataView().loading, className),
+		"data-slot": "data-view-loading",
+		children
+	});
+});
+const DataViewEmpty = forwardRef(function DataViewEmpty({ children = "No results found.", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().empty, className),
+		"data-slot": "data-view-empty",
+		children
+	});
+});
+const DataViewError = forwardRef(function DataViewError({ children = "Something went wrong.", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-live": "assertive",
+		className: cx(dataView().error, className),
+		"data-slot": "data-view-error",
+		role: "alert",
+		children
+	});
+});
+const DataView = {
+	Root: DataViewRoot,
+	Toolbar: DataViewToolbar,
+	Content: DataViewContent,
+	Loading: DataViewLoading,
+	Empty: DataViewEmpty,
+	Error: DataViewError
+};
+//#endregion
+export { DataView, DataViewContent, DataViewEmpty, DataViewError, DataViewLoading, DataViewRoot, DataViewToolbar };
+
+//# sourceMappingURL=data-view.js.map

package/dist/components/data-view/data-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-view.js","names":[],"sources":["../../../src/components/data-view/data-view.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dataView } from \"../../styled-system/recipes\";\n\nexport type DataViewLayout = \"table\" | \"list\" | \"grid\";\nexport type DataViewColumns = 1 | 2 | 3 | 4;\n\nexport interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"children\"> {\n  children?: ReactNode;\n  columns?: DataViewColumns;\n  layout?: DataViewLayout;\n}\n\nexport const DataViewRoot = forwardRef<HTMLElement, DataViewRootProps>(function DataViewRoot(\n  { children, className, columns = 3, layout = \"list\", ...props },\n  ref,\n) {\n  const styles = dataView({ columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\", layout });\n\n  return (\n    <section\n      {...props}\n      ref={ref}\n      className={cx(styles.root, className)}\n      data-columns={columns}\n      data-jaci-component=\"data-view\"\n      data-layout={layout}\n      data-slot=\"data-view\"\n    >\n      {children}\n    </section>\n  );\n});\n\nexport type DataViewToolbarProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewToolbar = forwardRef<HTMLDivElement, DataViewToolbarProps>(\n  function DataViewToolbar({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().toolbar, className)}\n        data-slot=\"data-view-toolbar\"\n      />\n    );\n  },\n);\n\nexport type DataViewContentProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewContent = forwardRef<HTMLDivElement, DataViewContentProps>(\n  function DataViewContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().content, className)}\n        data-slot=\"data-view-content\"\n      />\n    );\n  },\n);\n\nexport interface DataViewStateProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport const DataViewLoading = forwardRef<HTMLDivElement, DataViewStateProps>(\n  function DataViewLoading({ children = \"Loading…\", className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-live=\"polite\"\n        className={cx(dataView().loading, className)}\n        data-slot=\"data-view-loading\"\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport const DataViewEmpty = forwardRef<HTMLDivElement, DataViewStateProps>(function DataViewEmpty(\n  { children = \"No results found.\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(dataView().empty, className)}\n      data-slot=\"data-view-empty\"\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const DataViewError = forwardRef<HTMLDivElement, DataViewStateProps>(function DataViewError(\n  { children = \"Something went wrong.\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-live=\"assertive\"\n      className={cx(dataView().error, className)}\n      data-slot=\"data-view-error\"\n      role=\"alert\"\n    >\n      {children}\n    </div>\n  );\n});\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: DataView is the public component API name.\nexport const DataView = {\n  Root: DataViewRoot,\n  Toolbar: DataViewToolbar,\n  Content: DataViewContent,\n  Loading: DataViewLoading,\n  Empty: DataViewEmpty,\n  Error: DataViewError,\n};\n"],"mappings":";;;;;AAeA,MAAa,eAAe,WAA2C,SAAS,aAC9E,EAAE,UAAU,WAAW,UAAU,GAAG,SAAS,QAAQ,GAAG,SACxD,KACA;CACA,MAAM,SAAS,SAAS;EAAE,SAAS,OAAO,OAAO;EAA4B;CAAO,CAAC;CAErF,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,gBAAc;EACd,uBAAoB;EACpB,eAAa;EACb,aAAU;EAET;CACM,CAAA;AAEb,CAAC;AAGD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAMA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,YAAY,WAAW,GAAG,SAAS,KAAK;CAC5E,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,GAAG,SAAS,CAAC,CAAC,SAAS,SAAS;EAC3C,aAAU;EAET;CACE,CAAA;AAET,CACF;AAEA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,qBAAqB,WAAW,GAAG,SAChD,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,SAAS,CAAC,CAAC,OAAO,SAAS;EACzC,aAAU;EAET;CACE,CAAA;AAET,CAAC;AAED,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,WAAW,yBAAyB,WAAW,GAAG,SACpD,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,GAAG,SAAS,CAAC,CAAC,OAAO,SAAS;EACzC,aAAU;EACV,MAAK;EAEJ;CACE,CAAA;AAET,CAAC;AAGD,MAAa,WAAW;CACtB,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT"}

package/dist/components/data-view/index.d.cts

@@ -0,0 +1,2 @@
+import { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewLayout, DataViewLoading, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewToolbar, DataViewToolbarProps } from "./data-view.cjs";
+export { DataView, type DataViewColumns, DataViewContent, type DataViewContentProps, DataViewEmpty, DataViewError, type DataViewLayout, DataViewLoading, DataViewRoot, type DataViewRootProps, type DataViewStateProps, DataViewToolbar, type DataViewToolbarProps };

package/dist/components/data-view/index.d.ts

@@ -0,0 +1,2 @@
+import { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewLayout, DataViewLoading, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewToolbar, DataViewToolbarProps } from "./data-view.js";
+export { DataView, type DataViewColumns, DataViewContent, type DataViewContentProps, DataViewEmpty, DataViewError, type DataViewLayout, DataViewLoading, DataViewRoot, type DataViewRootProps, type DataViewStateProps, DataViewToolbar, type DataViewToolbarProps };