jaci-ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,132 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { dataToolbar } from "../../styled-system/recipes/data-toolbar.js";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-toolbar/data-toolbar.tsx
+const SelectionContext = createContext(null);
+const DataToolbarRoot = forwardRef(function DataToolbarRoot({ className, role, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataToolbar().root, className),
+		"data-jaci-component": "data-toolbar",
+		"data-slot": "data-toolbar",
+		role: role ?? "toolbar"
+	});
+});
+const DataToolbarSearch = forwardRef(function DataToolbarSearch({ className, defaultValue = "", onValueChange, value: controlledValue, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		ref,
+		className: cx(dataToolbar().search, className),
+		"data-slot": "data-toolbar-search",
+		onChange: (event) => {
+			if (controlledValue === void 0) setUncontrolledValue(event.currentTarget.value);
+			onValueChange?.(event.currentTarget.value);
+			props.onChange?.(event);
+		},
+		type: props.type ?? "search",
+		value
+	});
+});
+const DataToolbarFilters = forwardRef(function DataToolbarFilters({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataToolbar().filters, className),
+		"data-slot": "data-toolbar-filters"
+	});
+});
+const DataToolbarSort = forwardRef(function DataToolbarSort({ className, defaultValue = "", onValueChange, value: controlledValue, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	return /* @__PURE__ */ jsx("select", {
+		...props,
+		ref,
+		className: cx(dataToolbar().sort, className),
+		"data-slot": "data-toolbar-sort",
+		onChange: (event) => {
+			if (controlledValue === void 0) setUncontrolledValue(event.currentTarget.value);
+			onValueChange?.(event.currentTarget.value);
+			props.onChange?.(event);
+		},
+		value
+	});
+});
+const DataToolbarSelection = forwardRef(function DataToolbarSelection({ children, className, count, label = "selected", onClear, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SelectionContext.Provider, {
+		value: {
+			count,
+			onClear
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref,
+			"aria-live": "polite",
+			className: cx(dataToolbar().selection, className),
+			"data-count": count,
+			"data-slot": "data-toolbar-selection",
+			children: children ?? `${count} ${label}`
+		})
+	});
+});
+const DataToolbarClearSelection = forwardRef(function DataToolbarClearSelection({ children = "Clear selection", className, onClick, ...props }, ref) {
+	const context = useContext(SelectionContext);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		className: cx(dataToolbar().clearSelection, className),
+		"data-slot": "data-toolbar-clear-selection",
+		onClick: (event) => {
+			context?.onClear?.();
+			onClick?.(event);
+		},
+		type: "button",
+		children
+	});
+});
+const DataToolbarActions = forwardRef(function DataToolbarActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataToolbar().actions, className),
+		"data-slot": "data-toolbar-actions"
+	});
+});
+const DataToolbarClear = forwardRef(function DataToolbarClear({ children = "Clear filters", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		className: cx(dataToolbar().clear, className),
+		"data-slot": "data-toolbar-clear",
+		type: "button",
+		children
+	});
+});
+const DataToolbarSeparator = forwardRef(function DataToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"aria-hidden": "true",
+		className: cx(dataToolbar().separator, className),
+		"data-slot": "data-toolbar-separator"
+	});
+});
+const DataToolbar = {
+	Root: DataToolbarRoot,
+	Search: DataToolbarSearch,
+	Filters: DataToolbarFilters,
+	Sort: DataToolbarSort,
+	Selection: DataToolbarSelection,
+	ClearSelection: DataToolbarClearSelection,
+	Actions: DataToolbarActions,
+	Clear: DataToolbarClear,
+	Separator: DataToolbarSeparator
+};
+//#endregion
+export { DataToolbar, DataToolbarActions, DataToolbarClear, DataToolbarClearSelection, DataToolbarFilters, DataToolbarRoot, DataToolbarSearch, DataToolbarSelection, DataToolbarSeparator, DataToolbarSort };
+
+//# sourceMappingURL=data-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-toolbar.js","names":[],"sources":["../../../src/components/data-toolbar/data-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { dataToolbar } from \"../../styled-system/recipes\";\n\ninterface SelectionContextValue {\n  count: number;\n  onClear: (() => void) | undefined;\n}\n\nconst SelectionContext = createContext<SelectionContextValue | null>(null);\n\nexport type DataToolbarRootProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataToolbarRoot = forwardRef<HTMLDivElement, DataToolbarRootProps>(\n  function DataToolbarRoot({ className, role, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().root, className)}\n        data-jaci-component=\"data-toolbar\"\n        data-slot=\"data-toolbar\"\n        role={role ?? \"toolbar\"}\n      />\n    );\n  },\n);\n\nexport interface DataToolbarSearchProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"defaultValue\" | \"onChange\" | \"value\"> {\n  defaultValue?: string;\n  onChange?: ComponentPropsWithoutRef<\"input\">[\"onChange\"];\n  onValueChange?: (value: string) => void;\n  value?: string;\n}\n\nexport const DataToolbarSearch = forwardRef<HTMLInputElement, DataToolbarSearchProps>(\n  function DataToolbarSearch(\n    { className, defaultValue = \"\", onValueChange, value: controlledValue, ...props },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const value = controlledValue ?? uncontrolledValue;\n    return (\n      <input\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().search, className)}\n        data-slot=\"data-toolbar-search\"\n        onChange={(event) => {\n          if (controlledValue === undefined) setUncontrolledValue(event.currentTarget.value);\n          onValueChange?.(event.currentTarget.value);\n          props.onChange?.(event);\n        }}\n        type={props.type ?? \"search\"}\n        value={value}\n      />\n    );\n  },\n);\n\nexport type DataToolbarFiltersProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataToolbarFilters = forwardRef<HTMLDivElement, DataToolbarFiltersProps>(\n  function DataToolbarFilters({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().filters, className)}\n        data-slot=\"data-toolbar-filters\"\n      />\n    );\n  },\n);\n\nexport interface DataToolbarSortProps\n  extends Omit<ComponentPropsWithoutRef<\"select\">, \"defaultValue\" | \"onChange\" | \"value\"> {\n  defaultValue?: string;\n  onChange?: ComponentPropsWithoutRef<\"select\">[\"onChange\"];\n  onValueChange?: (value: string) => void;\n  value?: string;\n}\n\nexport const DataToolbarSort = forwardRef<HTMLSelectElement, DataToolbarSortProps>(\n  function DataToolbarSort(\n    { className, defaultValue = \"\", onValueChange, value: controlledValue, ...props },\n    ref,\n  ) {\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const value = controlledValue ?? uncontrolledValue;\n    return (\n      <select\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().sort, className)}\n        data-slot=\"data-toolbar-sort\"\n        onChange={(event) => {\n          if (controlledValue === undefined) setUncontrolledValue(event.currentTarget.value);\n          onValueChange?.(event.currentTarget.value);\n          props.onChange?.(event);\n        }}\n        value={value}\n      />\n    );\n  },\n);\n\nexport interface DataToolbarSelectionProps extends ComponentPropsWithoutRef<\"div\"> {\n  count: number;\n  label?: ReactNode;\n  onClear?: () => void;\n}\nexport const DataToolbarSelection = forwardRef<HTMLDivElement, DataToolbarSelectionProps>(\n  function DataToolbarSelection(\n    { children, className, count, label = \"selected\", onClear, ...props },\n    ref,\n  ) {\n    return (\n      <SelectionContext.Provider value={{ count, onClear }}>\n        <div\n          {...props}\n          ref={ref}\n          aria-live=\"polite\"\n          className={cx(dataToolbar().selection, className)}\n          data-count={count}\n          data-slot=\"data-toolbar-selection\"\n        >\n          {children ?? `${count} ${label}`}\n        </div>\n      </SelectionContext.Provider>\n    );\n  },\n);\n\nexport interface DataToolbarClearSelectionProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const DataToolbarClearSelection = forwardRef<\n  HTMLButtonElement,\n  DataToolbarClearSelectionProps\n>(function DataToolbarClearSelection(\n  { children = \"Clear selection\", className, onClick, ...props },\n  ref,\n) {\n  const context = useContext(SelectionContext);\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={cx(dataToolbar().clearSelection, className)}\n      data-slot=\"data-toolbar-clear-selection\"\n      onClick={(event) => {\n        context?.onClear?.();\n        onClick?.(event);\n      }}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type DataToolbarActionsProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataToolbarActions = forwardRef<HTMLDivElement, DataToolbarActionsProps>(\n  function DataToolbarActions({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().actions, className)}\n        data-slot=\"data-toolbar-actions\"\n      />\n    );\n  },\n);\n\nexport type DataToolbarClearProps = ComponentPropsWithoutRef<\"button\">;\nexport const DataToolbarClear = forwardRef<HTMLButtonElement, DataToolbarClearProps>(\n  function DataToolbarClear({ children = \"Clear filters\", className, ...props }, ref) {\n    return (\n      <button\n        {...props}\n        ref={ref}\n        className={cx(dataToolbar().clear, className)}\n        data-slot=\"data-toolbar-clear\"\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nexport type DataToolbarSeparatorProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataToolbarSeparator = forwardRef<HTMLDivElement, DataToolbarSeparatorProps>(\n  function DataToolbarSeparator({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cx(dataToolbar().separator, className)}\n        data-slot=\"data-toolbar-separator\"\n      />\n    );\n  },\n);\n\nexport const DataToolbar = {\n  Root: DataToolbarRoot,\n  Search: DataToolbarSearch,\n  Filters: DataToolbarFilters,\n  Sort: DataToolbarSort,\n  Selection: DataToolbarSelection,\n  ClearSelection: DataToolbarClearSelection,\n  Actions: DataToolbarActions,\n  Clear: DataToolbarClear,\n  Separator: DataToolbarSeparator,\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { DataToolbar, DataToolbarActions, DataToolbarActionsProps, DataToolbarClear, DataToolbarClearProps, DataToolbarClearSelection, DataToolbarClearSelectionProps, DataToolbarFilters, DataToolbarFiltersProps, DataToolbarRoot, DataToolbarRootProps, DataToolbarSearch, DataToolbarSearchProps, DataToolbarSelection, DataToolbarSelectionProps, DataToolbarSeparator, DataToolbarSeparatorProps, DataToolbarSort, DataToolbarSortProps } from "./data-toolbar.cjs";
+export { DataToolbar, DataToolbarActions, type DataToolbarActionsProps, DataToolbarClear, type DataToolbarClearProps, DataToolbarClearSelection, type DataToolbarClearSelectionProps, DataToolbarFilters, type DataToolbarFiltersProps, DataToolbarRoot, type DataToolbarRootProps, DataToolbarSearch, type DataToolbarSearchProps, DataToolbarSelection, type DataToolbarSelectionProps, DataToolbarSeparator, type DataToolbarSeparatorProps, DataToolbarSort, type DataToolbarSortProps };

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

@@ -0,0 +1,2 @@
+import { DataToolbar, DataToolbarActions, DataToolbarActionsProps, DataToolbarClear, DataToolbarClearProps, DataToolbarClearSelection, DataToolbarClearSelectionProps, DataToolbarFilters, DataToolbarFiltersProps, DataToolbarRoot, DataToolbarRootProps, DataToolbarSearch, DataToolbarSearchProps, DataToolbarSelection, DataToolbarSelectionProps, DataToolbarSeparator, DataToolbarSeparatorProps, DataToolbarSort, DataToolbarSortProps } from "./data-toolbar.js";
+export { DataToolbar, DataToolbarActions, type DataToolbarActionsProps, DataToolbarClear, type DataToolbarClearProps, DataToolbarClearSelection, type DataToolbarClearSelectionProps, DataToolbarFilters, type DataToolbarFiltersProps, DataToolbarRoot, type DataToolbarRootProps, DataToolbarSearch, type DataToolbarSearchProps, DataToolbarSelection, type DataToolbarSelectionProps, DataToolbarSeparator, type DataToolbarSeparatorProps, DataToolbarSort, type DataToolbarSortProps };

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

@@ -3,7 +3,7 @@ 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 DataViewRoot = (0, react.forwardRef)(function DataViewRoot({ children, className, columns = 3, layout = "list", status = "idle", ...props }, ref) {
 	const styles = require_data_view.dataView({
 		columns: String(columns),
 		layout
@@ -12,9 +12,11 @@ const DataViewRoot = (0, react.forwardRef)(function DataViewRoot({ children, cla
 		...props,
 		ref,
 		className: require_cx.cx(styles.root, className),
+		"aria-busy": props["aria-busy"] ?? (status === "loading" || void 0),
 		"data-columns": columns,
 		"data-jaci-component": "data-view",
 		"data-layout": layout,
+		"data-status": status,
 		"data-slot": "data-view",
 		children
 	});
@@ -27,6 +29,14 @@ const DataViewToolbar = (0, react.forwardRef)(function DataViewToolbar({ classNa
 		"data-slot": "data-view-toolbar"
 	});
 });
+const DataViewFilters = (0, react.forwardRef)(function DataViewFilters({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().filters, className),
+		"data-slot": "data-view-filters"
+	});
+});
 const DataViewContent = (0, react.forwardRef)(function DataViewContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
@@ -35,6 +45,22 @@ const DataViewContent = (0, react.forwardRef)(function DataViewContent({ classNa
 		"data-slot": "data-view-content"
 	});
 });
+const DataViewFooter = (0, react.forwardRef)(function DataViewFooter({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().footer, className),
+		"data-slot": "data-view-footer"
+	});
+});
+const DataViewPagination = (0, react.forwardRef)(function DataViewPagination({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_view.dataView().pagination, className),
+		"data-slot": "data-view-pagination"
+	});
+});
 const DataViewLoading = (0, react.forwardRef)(function DataViewLoading({ children = "Loading…", className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...props,
@@ -68,7 +94,10 @@ const DataViewError = (0, react.forwardRef)(function DataViewError({ children =
 const DataView = {
 	Root: DataViewRoot,
 	Toolbar: DataViewToolbar,
+	Filters: DataViewFilters,
 	Content: DataViewContent,
+	Footer: DataViewFooter,
+	Pagination: DataViewPagination,
 	Loading: DataViewLoading,
 	Empty: DataViewEmpty,
 	Error: DataViewError
@@ -78,7 +107,10 @@ exports.DataView = DataView;
 exports.DataViewContent = DataViewContent;
 exports.DataViewEmpty = DataViewEmpty;
 exports.DataViewError = DataViewError;
+exports.DataViewFilters = DataViewFilters;
+exports.DataViewFooter = DataViewFooter;
 exports.DataViewLoading = DataViewLoading;
+exports.DataViewPagination = DataViewPagination;
 exports.DataViewRoot = DataViewRoot;
 exports.DataViewToolbar = DataViewToolbar;
 

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

@@ -1 +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"}
+{"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;\nexport type DataViewStatus = \"idle\" | \"loading\" | \"empty\" | \"error\" | \"ready\";\n\nexport interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"children\"> {\n  children?: ReactNode;\n  columns?: DataViewColumns;\n  layout?: DataViewLayout;\n  status?: DataViewStatus;\n}\n\nexport const DataViewRoot = forwardRef<HTMLElement, DataViewRootProps>(function DataViewRoot(\n  { children, className, columns = 3, layout = \"list\", status = \"idle\", ...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      aria-busy={props[\"aria-busy\"] ?? (status === \"loading\" || undefined)}\n      data-columns={columns}\n      data-jaci-component=\"data-view\"\n      data-layout={layout}\n      data-status={status}\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 DataViewFiltersProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewFilters = forwardRef<HTMLDivElement, DataViewFiltersProps>(\n  function DataViewFilters({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().filters, className)}\n        data-slot=\"data-view-filters\"\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 type DataViewFooterProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewFooter = forwardRef<HTMLDivElement, DataViewFooterProps>(\n  function DataViewFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().footer, className)}\n        data-slot=\"data-view-footer\"\n      />\n    );\n  },\n);\n\nexport type DataViewPaginationProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewPagination = forwardRef<HTMLDivElement, DataViewPaginationProps>(\n  function DataViewPagination({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().pagination, className)}\n        data-slot=\"data-view-pagination\"\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  Filters: DataViewFilters,\n  Content: DataViewContent,\n  Footer: DataViewFooter,\n  Pagination: DataViewPagination,\n  Loading: DataViewLoading,\n  Empty: DataViewEmpty,\n  Error: DataViewError,\n};\n"],"mappings":"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"}

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

@@ -2,16 +2,24 @@ 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;
+type DataViewStatus = "idle" | "loading" | "empty" | "error" | "ready";
 interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
   children?: ReactNode;
   columns?: DataViewColumns;
   layout?: DataViewLayout;
+  status?: DataViewStatus;
 }
 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 DataViewFiltersProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewFilters: 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>>;
+type DataViewFooterProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataViewPaginationProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewPagination: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 interface DataViewStateProps extends ComponentPropsWithoutRef<"div"> {
   children?: ReactNode;
 }
@@ -21,11 +29,14 @@ declare const DataViewError: import("react").ForwardRefExoticComponent<DataViewS
 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>>;
+  Filters: 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>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Pagination: 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 };
+export { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, DataViewFiltersProps, DataViewFooter, DataViewFooterProps, DataViewLayout, DataViewLoading, DataViewPagination, DataViewPaginationProps, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewStatus, DataViewToolbar, DataViewToolbarProps };
 //# sourceMappingURL=data-view.d.cts.map

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

@@ -2,16 +2,24 @@ 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;
+type DataViewStatus = "idle" | "loading" | "empty" | "error" | "ready";
 interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
   children?: ReactNode;
   columns?: DataViewColumns;
   layout?: DataViewLayout;
+  status?: DataViewStatus;
 }
 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 DataViewFiltersProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewFilters: 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>>;
+type DataViewFooterProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataViewPaginationProps = ComponentPropsWithoutRef<"div">;
+declare const DataViewPagination: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 interface DataViewStateProps extends ComponentPropsWithoutRef<"div"> {
   children?: ReactNode;
 }
@@ -21,11 +29,14 @@ declare const DataViewError: import("react").ForwardRefExoticComponent<DataViewS
 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>>;
+  Filters: 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>>;
+  Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Pagination: 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 };
+export { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, DataViewFiltersProps, DataViewFooter, DataViewFooterProps, DataViewLayout, DataViewLoading, DataViewPagination, DataViewPaginationProps, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewStatus, DataViewToolbar, DataViewToolbarProps };
 //# sourceMappingURL=data-view.d.ts.map

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

@@ -3,7 +3,7 @@ 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 DataViewRoot = forwardRef(function DataViewRoot({ children, className, columns = 3, layout = "list", status = "idle", ...props }, ref) {
 	const styles = dataView({
 		columns: String(columns),
 		layout
@@ -12,9 +12,11 @@ const DataViewRoot = forwardRef(function DataViewRoot({ children, className, col
 		...props,
 		ref,
 		className: cx(styles.root, className),
+		"aria-busy": props["aria-busy"] ?? (status === "loading" || void 0),
 		"data-columns": columns,
 		"data-jaci-component": "data-view",
 		"data-layout": layout,
+		"data-status": status,
 		"data-slot": "data-view",
 		children
 	});
@@ -27,6 +29,14 @@ const DataViewToolbar = forwardRef(function DataViewToolbar({ className, ...prop
 		"data-slot": "data-view-toolbar"
 	});
 });
+const DataViewFilters = forwardRef(function DataViewFilters({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().filters, className),
+		"data-slot": "data-view-filters"
+	});
+});
 const DataViewContent = forwardRef(function DataViewContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
@@ -35,6 +45,22 @@ const DataViewContent = forwardRef(function DataViewContent({ className, ...prop
 		"data-slot": "data-view-content"
 	});
 });
+const DataViewFooter = forwardRef(function DataViewFooter({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().footer, className),
+		"data-slot": "data-view-footer"
+	});
+});
+const DataViewPagination = forwardRef(function DataViewPagination({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(dataView().pagination, className),
+		"data-slot": "data-view-pagination"
+	});
+});
 const DataViewLoading = forwardRef(function DataViewLoading({ children = "Loading…", className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
@@ -68,12 +94,15 @@ const DataViewError = forwardRef(function DataViewError({ children = "Something
 const DataView = {
 	Root: DataViewRoot,
 	Toolbar: DataViewToolbar,
+	Filters: DataViewFilters,
 	Content: DataViewContent,
+	Footer: DataViewFooter,
+	Pagination: DataViewPagination,
 	Loading: DataViewLoading,
 	Empty: DataViewEmpty,
 	Error: DataViewError
 };
 //#endregion
-export { DataView, DataViewContent, DataViewEmpty, DataViewError, DataViewLoading, DataViewRoot, DataViewToolbar };
+export { DataView, DataViewContent, DataViewEmpty, DataViewError, DataViewFilters, DataViewFooter, DataViewLoading, DataViewPagination, DataViewRoot, DataViewToolbar };
 
 //# sourceMappingURL=data-view.js.map

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

@@ -1 +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"}
+{"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;\nexport type DataViewStatus = \"idle\" | \"loading\" | \"empty\" | \"error\" | \"ready\";\n\nexport interface DataViewRootProps extends Omit<ComponentPropsWithoutRef<\"section\">, \"children\"> {\n  children?: ReactNode;\n  columns?: DataViewColumns;\n  layout?: DataViewLayout;\n  status?: DataViewStatus;\n}\n\nexport const DataViewRoot = forwardRef<HTMLElement, DataViewRootProps>(function DataViewRoot(\n  { children, className, columns = 3, layout = \"list\", status = \"idle\", ...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      aria-busy={props[\"aria-busy\"] ?? (status === \"loading\" || undefined)}\n      data-columns={columns}\n      data-jaci-component=\"data-view\"\n      data-layout={layout}\n      data-status={status}\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 DataViewFiltersProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewFilters = forwardRef<HTMLDivElement, DataViewFiltersProps>(\n  function DataViewFilters({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().filters, className)}\n        data-slot=\"data-view-filters\"\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 type DataViewFooterProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewFooter = forwardRef<HTMLDivElement, DataViewFooterProps>(\n  function DataViewFooter({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().footer, className)}\n        data-slot=\"data-view-footer\"\n      />\n    );\n  },\n);\n\nexport type DataViewPaginationProps = ComponentPropsWithoutRef<\"div\">;\nexport const DataViewPagination = forwardRef<HTMLDivElement, DataViewPaginationProps>(\n  function DataViewPagination({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(dataView().pagination, className)}\n        data-slot=\"data-view-pagination\"\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  Filters: DataViewFilters,\n  Content: DataViewContent,\n  Footer: DataViewFooter,\n  Pagination: DataViewPagination,\n  Loading: DataViewLoading,\n  Empty: DataViewEmpty,\n  Error: DataViewError,\n};\n"],"mappings":";;;;;AAiBA,MAAa,eAAe,WAA2C,SAAS,aAC9E,EAAE,UAAU,WAAW,UAAU,GAAG,SAAS,QAAQ,SAAS,QAAQ,GAAG,SACzE,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,aAAW,MAAM,iBAAiB,WAAW,aAAa,KAAA;EAC1D,gBAAc;EACd,uBAAoB;EACpB,eAAa;EACb,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;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;AAGA,MAAa,iBAAiB,WAC5B,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,SAAS,CAAC,CAAC,QAAQ,SAAS;EAC1C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,SAAS,CAAC,CAAC,YAAY,SAAS;EAC9C,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,QAAQ;CACR,YAAY;CACZ,SAAS;CACT,OAAO;CACP,OAAO;AACT"}

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

@@ -1,2 +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 };
+import { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, DataViewFiltersProps, DataViewFooter, DataViewFooterProps, DataViewLayout, DataViewLoading, DataViewPagination, DataViewPaginationProps, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewStatus, DataViewToolbar, DataViewToolbarProps } from "./data-view.cjs";
+export { DataView, type DataViewColumns, DataViewContent, type DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, type DataViewFiltersProps, DataViewFooter, type DataViewFooterProps, type DataViewLayout, DataViewLoading, DataViewPagination, type DataViewPaginationProps, DataViewRoot, type DataViewRootProps, type DataViewStateProps, type DataViewStatus, DataViewToolbar, type DataViewToolbarProps };

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

@@ -1,2 +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 };
+import { DataView, DataViewColumns, DataViewContent, DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, DataViewFiltersProps, DataViewFooter, DataViewFooterProps, DataViewLayout, DataViewLoading, DataViewPagination, DataViewPaginationProps, DataViewRoot, DataViewRootProps, DataViewStateProps, DataViewStatus, DataViewToolbar, DataViewToolbarProps } from "./data-view.js";
+export { DataView, type DataViewColumns, DataViewContent, type DataViewContentProps, DataViewEmpty, DataViewError, DataViewFilters, type DataViewFiltersProps, DataViewFooter, type DataViewFooterProps, type DataViewLayout, DataViewLoading, DataViewPagination, type DataViewPaginationProps, DataViewRoot, type DataViewRootProps, type DataViewStateProps, type DataViewStatus, DataViewToolbar, type DataViewToolbarProps };

package/dist/components/list/list.cjs

@@ -3,8 +3,9 @@ const require_list = require("../../styled-system/recipes/list.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/list/list.tsx
-const ListRoot = (0, react.forwardRef)(function ListRoot({ children, className, gap = "md", ordered = false, variant = "plain", ...props }, ref) {
+const ListRoot = (0, react.forwardRef)(function ListRoot({ children, className, density = "comfortable", gap = "md", ordered = false, variant = "plain", ...props }, ref) {
 	const styles = require_list.list({
+		density,
 		gap,
 		variant
 	});
@@ -13,6 +14,7 @@ const ListRoot = (0, react.forwardRef)(function ListRoot({ children, className,
 		ref,
 		className: require_cx.cx(styles.root, className),
 		"data-gap": gap,
+		"data-density": density,
 		"data-jaci-component": "list",
 		"data-ordered": ordered || void 0,
 		"data-slot": "list",

package/dist/components/list/list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.cjs","names":["list","cx"],"sources":["../../../src/components/list/list.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { list } from \"../../styled-system/recipes\";\n\nexport type ListVariant = \"plain\" | \"divided\" | \"card\";\nexport type ListGap = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ListRootProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  children?: ReactNode;\n  gap?: ListGap;\n  ordered?: boolean;\n  variant?: ListVariant;\n}\n\nexport const ListRoot = forwardRef<HTMLElement, ListRootProps>(function ListRoot(\n  { children, className, gap = \"md\", ordered = false, variant = \"plain\", ...props },\n  ref,\n) {\n  const styles = list({ gap, variant });\n  const Component = ordered ? \"ol\" : \"ul\";\n\n  return (\n    <Component\n      {...props}\n      ref={ref as never}\n      className={cx(styles.root, className)}\n      data-gap={gap}\n      data-jaci-component=\"list\"\n      data-ordered={ordered || undefined}\n      data-slot=\"list\"\n      data-variant={variant}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport interface ListItemProps extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  children?: ReactNode;\n  disabled?: boolean;\n  interactive?: boolean;\n  selected?: boolean;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  { children, className, disabled = false, interactive = false, selected = false, ...props },\n  ref,\n) {\n  const styles = list();\n\n  return (\n    <li\n      {...props}\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      className={cx(styles.item, className)}\n      data-disabled={disabled || undefined}\n      data-interactive={interactive || undefined}\n      data-selected={selected || undefined}\n      data-slot=\"list-item\"\n    >\n      {children}\n    </li>\n  );\n});\n\nexport type ListItemContentProps = ComponentPropsWithoutRef<\"div\">;\nexport const ListItemContent = forwardRef<HTMLDivElement, ListItemContentProps>(\n  function ListItemContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(list().content, className)}\n        data-slot=\"list-item-content\"\n      />\n    );\n  },\n);\n\nexport type ListItemTitleProps = ComponentPropsWithoutRef<\"span\">;\nexport const ListItemTitle = forwardRef<HTMLSpanElement, ListItemTitleProps>(function ListItemTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(list().title, className)}\n      data-slot=\"list-item-title\"\n    />\n  );\n});\n\nexport type ListItemDescriptionProps = ComponentPropsWithoutRef<\"span\">;\nexport const ListItemDescription = forwardRef<HTMLSpanElement, ListItemDescriptionProps>(\n  function ListItemDescription({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(list().description, className)}\n        data-slot=\"list-item-description\"\n      />\n    );\n  },\n);\n\nexport type ListItemActionProps = ComponentPropsWithoutRef<\"div\">;\nexport const ListItemAction = forwardRef<HTMLDivElement, ListItemActionProps>(\n  function ListItemAction({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(list().action, className)}\n        data-slot=\"list-item-action\"\n      />\n    );\n  },\n);\n\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  ItemContent: ListItemContent,\n  ItemTitle: ListItemTitle,\n  ItemDescription: ListItemDescription,\n  ItemAction: ListItemAction,\n};\n"],"mappings":";;;;;AAgBA,MAAa,YAAA,GAAA,MAAA,WAAA,CAAkD,SAAS,SACtE,EAAE,UAAU,WAAW,MAAM,MAAM,UAAU,OAAO,UAAU,SAAS,GAAG,SAC1E,KACA;CACA,MAAM,SAASA,aAAAA,KAAK;EAAE;EAAK;CAAQ,CAAC;CAGpC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAHgB,UAAU,OAAO,MAGjC;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,YAAU;EACV,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,gBAAc;EAEb;CACQ,CAAA;AAEf,CAAC;AASD,MAAa,YAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,SACxE,EAAE,UAAU,WAAW,WAAW,OAAO,cAAc,OAAO,WAAW,OAAO,GAAG,SACnF,KACA;CACA,MAAM,SAASD,aAAAA,KAAK;CAEpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACE,GAAI;EACC;EACL,iBAAe,YAAY,KAAA;EAC3B,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,iBAAe,YAAY,KAAA;EAC3B,oBAAkB,eAAe,KAAA;EACjC,iBAAe,YAAY,KAAA;EAC3B,aAAU;EAET;CACC,CAAA;AAER,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,aAAAA,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,iBAAA,GAAA,MAAA,WAAA,CAAgE,SAAS,cACpF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,OAAO,SAAS;EACrC,aAAU;CACX,CAAA;AAEL,CAAC;AAGD,MAAa,uBAAA,GAAA,MAAA,WAAA,CACX,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,aAAa,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,aAAa;CACb,WAAW;CACX,iBAAiB;CACjB,YAAY;AACd"}
+{"version":3,"file":"list.cjs","names":["list","cx"],"sources":["../../../src/components/list/list.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { list } from \"../../styled-system/recipes\";\n\nexport type ListVariant = \"plain\" | \"divided\" | \"card\";\nexport type ListGap = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type ListDensity = \"compact\" | \"comfortable\";\n\nexport interface ListRootProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  children?: ReactNode;\n  density?: ListDensity;\n  gap?: ListGap;\n  ordered?: boolean;\n  variant?: ListVariant;\n}\n\nexport const ListRoot = forwardRef<HTMLElement, ListRootProps>(function ListRoot(\n  {\n    children,\n    className,\n    density = \"comfortable\",\n    gap = \"md\",\n    ordered = false,\n    variant = \"plain\",\n    ...props\n  },\n  ref,\n) {\n  const styles = list({ density, gap, variant });\n  const Component = ordered ? \"ol\" : \"ul\";\n\n  return (\n    <Component\n      {...props}\n      ref={ref as never}\n      className={cx(styles.root, className)}\n      data-gap={gap}\n      data-density={density}\n      data-jaci-component=\"list\"\n      data-ordered={ordered || undefined}\n      data-slot=\"list\"\n      data-variant={variant}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport interface ListItemProps extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  children?: ReactNode;\n  disabled?: boolean;\n  interactive?: boolean;\n  selected?: boolean;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  { children, className, disabled = false, interactive = false, selected = false, ...props },\n  ref,\n) {\n  const styles = list();\n\n  return (\n    <li\n      {...props}\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      className={cx(styles.item, className)}\n      data-disabled={disabled || undefined}\n      data-interactive={interactive || undefined}\n      data-selected={selected || undefined}\n      data-slot=\"list-item\"\n    >\n      {children}\n    </li>\n  );\n});\n\nexport type ListItemContentProps = ComponentPropsWithoutRef<\"div\">;\nexport const ListItemContent = forwardRef<HTMLDivElement, ListItemContentProps>(\n  function ListItemContent({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(list().content, className)}\n        data-slot=\"list-item-content\"\n      />\n    );\n  },\n);\n\nexport type ListItemTitleProps = ComponentPropsWithoutRef<\"span\">;\nexport const ListItemTitle = forwardRef<HTMLSpanElement, ListItemTitleProps>(function ListItemTitle(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(list().title, className)}\n      data-slot=\"list-item-title\"\n    />\n  );\n});\n\nexport type ListItemDescriptionProps = ComponentPropsWithoutRef<\"span\">;\nexport const ListItemDescription = forwardRef<HTMLSpanElement, ListItemDescriptionProps>(\n  function ListItemDescription({ className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(list().description, className)}\n        data-slot=\"list-item-description\"\n      />\n    );\n  },\n);\n\nexport type ListItemActionProps = ComponentPropsWithoutRef<\"div\">;\nexport const ListItemAction = forwardRef<HTMLDivElement, ListItemActionProps>(\n  function ListItemAction({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(list().action, className)}\n        data-slot=\"list-item-action\"\n      />\n    );\n  },\n);\n\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  ItemContent: ListItemContent,\n  ItemTitle: ListItemTitle,\n  ItemDescription: ListItemDescription,\n  ItemAction: ListItemAction,\n};\n"],"mappings":";;;;;AAkBA,MAAa,YAAA,GAAA,MAAA,WAAA,CAAkD,SAAS,SACtE,EACE,UACA,WACA,UAAU,eACV,MAAM,MACN,UAAU,OACV,UAAU,SACV,GAAG,SAEL,KACA;CACA,MAAM,SAASA,aAAAA,KAAK;EAAE;EAAS;EAAK;CAAQ,CAAC;CAG7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAHgB,UAAU,OAAO,MAGjC;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,YAAU;EACV,gBAAc;EACd,uBAAoB;EACpB,gBAAc,WAAW,KAAA;EACzB,aAAU;EACV,gBAAc;EAEb;CACQ,CAAA;AAEf,CAAC;AASD,MAAa,YAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,SACxE,EAAE,UAAU,WAAW,WAAW,OAAO,cAAc,OAAO,WAAW,OAAO,GAAG,SACnF,KACA;CACA,MAAM,SAASD,aAAAA,KAAK;CAEpB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;EACE,GAAI;EACC;EACL,iBAAe,YAAY,KAAA;EAC3B,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,iBAAe,YAAY,KAAA;EAC3B,oBAAkB,eAAe,KAAA;EACjC,iBAAe,YAAY,KAAA;EAC3B,aAAU;EAET;CACC,CAAA;AAER,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,aAAAA,KAAK,CAAC,CAAC,SAAS,SAAS;EACvC,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,iBAAA,GAAA,MAAA,WAAA,CAAgE,SAAS,cACpF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,OAAO,SAAS;EACrC,aAAU;CACX,CAAA;AAEL,CAAC;AAGD,MAAa,uBAAA,GAAA,MAAA,WAAA,CACX,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,aAAa,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWC,WAAAA,GAAGD,aAAAA,KAAK,CAAC,CAAC,QAAQ,SAAS;EACtC,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,aAAa;CACb,WAAW;CACX,iBAAiB;CACjB,YAAY;AACd"}

package/dist/components/list/list.d.cts

@@ -2,8 +2,10 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/list/list.d.ts
 type ListVariant = "plain" | "divided" | "card";
 type ListGap = "none" | "sm" | "md" | "lg";
+type ListDensity = "compact" | "comfortable";
 interface ListRootProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"> {
   children?: ReactNode;
+  density?: ListDensity;
   gap?: ListGap;
   ordered?: boolean;
   variant?: ListVariant;
@@ -33,5 +35,5 @@ declare const List: {
   ItemAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { List, ListGap, ListItem, ListItemAction, ListItemActionProps, ListItemContent, ListItemContentProps, ListItemDescription, ListItemDescriptionProps, ListItemProps, ListItemTitle, ListItemTitleProps, ListRoot, ListRootProps, ListVariant };
+export { List, ListDensity, ListGap, ListItem, ListItemAction, ListItemActionProps, ListItemContent, ListItemContentProps, ListItemDescription, ListItemDescriptionProps, ListItemProps, ListItemTitle, ListItemTitleProps, ListRoot, ListRootProps, ListVariant };
 //# sourceMappingURL=list.d.cts.map

package/dist/components/list/list.d.ts

@@ -2,8 +2,10 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/components/list/list.d.ts
 type ListVariant = "plain" | "divided" | "card";
 type ListGap = "none" | "sm" | "md" | "lg";
+type ListDensity = "compact" | "comfortable";
 interface ListRootProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"> {
   children?: ReactNode;
+  density?: ListDensity;
   gap?: ListGap;
   ordered?: boolean;
   variant?: ListVariant;
@@ -33,5 +35,5 @@ declare const List: {
   ItemAction: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { List, ListGap, ListItem, ListItemAction, ListItemActionProps, ListItemContent, ListItemContentProps, ListItemDescription, ListItemDescriptionProps, ListItemProps, ListItemTitle, ListItemTitleProps, ListRoot, ListRootProps, ListVariant };
+export { List, ListDensity, ListGap, ListItem, ListItemAction, ListItemActionProps, ListItemContent, ListItemContentProps, ListItemDescription, ListItemDescriptionProps, ListItemProps, ListItemTitle, ListItemTitleProps, ListRoot, ListRootProps, ListVariant };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/list/list.js

@@ -3,8 +3,9 @@ import { list } from "../../styled-system/recipes/list.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/list/list.tsx
-const ListRoot = forwardRef(function ListRoot({ children, className, gap = "md", ordered = false, variant = "plain", ...props }, ref) {
+const ListRoot = forwardRef(function ListRoot({ children, className, density = "comfortable", gap = "md", ordered = false, variant = "plain", ...props }, ref) {
 	const styles = list({
+		density,
 		gap,
 		variant
 	});
@@ -13,6 +14,7 @@ const ListRoot = forwardRef(function ListRoot({ children, className, gap = "md",
 		ref,
 		className: cx(styles.root, className),
 		"data-gap": gap,
+		"data-density": density,
 		"data-jaci-component": "list",
 		"data-ordered": ordered || void 0,
 		"data-slot": "list",