jaci-ui 0.3.0 → 0.5.0

package/dist/components/controls/textarea.js

@@ -1,28 +1,49 @@
 "use client";
 import { cx } from "../../styled-system/css/cx.js";
 import { textarea } from "../../styled-system/recipes/textarea.js";
-import { useFieldState } from "../field/field.js";
+import { Spinner } from "../layout/index.js";
+import { FieldControl, useFieldState } from "../field/field.js";
+import { InputGroup } from "../input-group/input-group.js";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Field } from "@base-ui/react/field";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/controls/textarea.tsx
-const Textarea = forwardRef(function Textarea({ className, size = "md", ...props }, ref) {
+const Textarea = forwardRef(function Textarea({ className, loading = false, prefix, size = "md", suffix, ...props }, ref) {
 	const { insideField } = useFieldState();
 	const controlProps = {
 		...props,
+		"aria-busy": loading || void 0,
 		className: cx(textarea({ size }), className),
 		"data-jaci-component": "textarea",
+		"data-loading": loading || void 0,
 		"data-slot": "textarea"
 	};
-	if (insideField) return /* @__PURE__ */ jsx(Field.Control, {
+	const control = insideField ? /* @__PURE__ */ jsx(FieldControl, {
 		...controlProps,
 		ref,
 		render: /* @__PURE__ */ jsx("textarea", {})
-	});
-	return /* @__PURE__ */ jsx("textarea", {
+	}) : /* @__PURE__ */ jsx("textarea", {
 		...controlProps,
 		ref
 	});
+	if (prefix !== void 0 || suffix !== void 0 || loading) return /* @__PURE__ */ jsxs(InputGroup, { children: [
+		prefix !== void 0 ? /* @__PURE__ */ jsx(InputGroup.Addon, {
+			"data-slot": "textarea-prefix",
+			children: prefix
+		}) : null,
+		control,
+		loading ? /* @__PURE__ */ jsx(InputGroup.Addon, {
+			"aria-hidden": "true",
+			"data-slot": "textarea-loading",
+			children: /* @__PURE__ */ jsx(Spinner, {
+				label: "",
+				size: "sm"
+			})
+		}) : suffix !== void 0 ? /* @__PURE__ */ jsx(InputGroup.Addon, {
+			"data-slot": "textarea-suffix",
+			children: suffix
+		}) : null
+	] });
+	return control;
 });
 //#endregion
 export { Textarea };

package/dist/components/controls/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["BaseField"],"sources":["../../../src/components/controls/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, Ref } from \"react\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { textarea } from \"../../styled-system/recipes\";\nimport { useFieldState } from \"../field\";\n\nexport interface TextareaProps extends ComponentPropsWithoutRef<\"textarea\"> {\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, size = \"md\", ...props },\n  ref,\n) {\n  const { insideField } = useFieldState();\n  const controlProps = {\n    ...props,\n    className: cx(textarea({ size }), className),\n    \"data-jaci-component\": \"textarea\",\n    \"data-slot\": \"textarea\",\n  };\n\n  if (insideField) {\n    return (\n      <BaseField.Control\n        {...(controlProps as unknown as ComponentProps<typeof BaseField.Control>)}\n        ref={ref as Ref<HTMLElement>}\n        render={<textarea />}\n      />\n    );\n  }\n\n  return <textarea {...controlProps} ref={ref} />;\n});\n"],"mappings":";;;;;;;;AAcA,MAAa,WAAW,WAA+C,SAAS,SAC9E,EAAE,WAAW,OAAO,MAAM,GAAG,SAC7B,KACA;CACA,MAAM,EAAE,gBAAgB,cAAc;CACtC,MAAM,eAAe;EACnB,GAAG;EACH,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3C,uBAAuB;EACvB,aAAa;CACf;CAEA,IAAI,aACF,OACE,oBAACA,MAAU,SAAX;EACE,GAAK;EACA;EACL,QAAQ,oBAAC,YAAD,CAAW,CAAA;CACpB,CAAA;CAIL,OAAO,oBAAC,YAAD;EAAU,GAAI;EAAmB;CAAM,CAAA;AAChD,CAAC"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/controls/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { textarea } from \"../../styled-system/recipes\";\nimport { FieldControl, useFieldState } from \"../field\";\nimport { InputGroup } from \"../input-group\";\nimport { Spinner } from \"../layout\";\n\nexport interface TextareaProps extends Omit<ComponentPropsWithoutRef<\"textarea\">, \"prefix\"> {\n  size?: \"sm\" | \"md\" | \"lg\";\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  loading?: boolean;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, loading = false, prefix, size = \"md\", suffix, ...props },\n  ref,\n) {\n  const { insideField } = useFieldState();\n  const controlProps = {\n    ...props,\n    \"aria-busy\": loading || undefined,\n    className: cx(textarea({ size }), className),\n    \"data-jaci-component\": \"textarea\",\n    \"data-loading\": loading || undefined,\n    \"data-slot\": \"textarea\",\n  };\n  const control = insideField ? (\n    <FieldControl\n      {...(controlProps as unknown as ComponentProps<typeof FieldControl>)}\n      ref={ref as Ref<HTMLElement>}\n      render={<textarea />}\n    />\n  ) : (\n    <textarea {...controlProps} ref={ref} />\n  );\n\n  if (prefix !== undefined || suffix !== undefined || loading) {\n    return (\n      <InputGroup>\n        {prefix !== undefined ? (\n          <InputGroup.Addon data-slot=\"textarea-prefix\">{prefix}</InputGroup.Addon>\n        ) : null}\n        {control}\n        {loading ? (\n          <InputGroup.Addon aria-hidden=\"true\" data-slot=\"textarea-loading\">\n            <Spinner label=\"\" size=\"sm\" />\n          </InputGroup.Addon>\n        ) : suffix !== undefined ? (\n          <InputGroup.Addon data-slot=\"textarea-suffix\">{suffix}</InputGroup.Addon>\n        ) : null}\n      </InputGroup>\n    );\n  }\n\n  return control;\n});\n"],"mappings":";;;;;;;;;AAkBA,MAAa,WAAW,WAA+C,SAAS,SAC9E,EAAE,WAAW,UAAU,OAAO,QAAQ,OAAO,MAAM,QAAQ,GAAG,SAC9D,KACA;CACA,MAAM,EAAE,gBAAgB,cAAc;CACtC,MAAM,eAAe;EACnB,GAAG;EACH,aAAa,WAAW,KAAA;EACxB,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,SAAS;EAC3C,uBAAuB;EACvB,gBAAgB,WAAW,KAAA;EAC3B,aAAa;CACf;CACA,MAAM,UAAU,cACd,oBAAC,cAAD;EACE,GAAK;EACA;EACL,QAAQ,oBAAC,YAAD,CAAW,CAAA;CACpB,CAAA,IAED,oBAAC,YAAD;EAAU,GAAI;EAAmB;CAAM,CAAA;CAGzC,IAAI,WAAW,KAAA,KAAa,WAAW,KAAA,KAAa,SAClD,OACE,qBAAC,YAAD,EAAA,UAAA;EACG,WAAW,KAAA,IACV,oBAAC,WAAW,OAAZ;GAAkB,aAAU;aAAmB;EAAyB,CAAA,IACtE;EACH;EACA,UACC,oBAAC,WAAW,OAAZ;GAAkB,eAAY;GAAO,aAAU;aAC7C,oBAAC,SAAD;IAAS,OAAM;IAAG,MAAK;GAAM,CAAA;EACb,CAAA,IAChB,WAAW,KAAA,IACb,oBAAC,WAAW,OAAZ;GAAkB,aAAU;aAAmB;EAAyB,CAAA,IACtE;CACM,EAAA,CAAA;CAIhB,OAAO;AACT,CAAC"}

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

@@ -0,0 +1,141 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_data_toolbar = require("../../styled-system/recipes/data-toolbar.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/data-toolbar/data-toolbar.tsx
+const SelectionContext = (0, react.createContext)(null);
+const DataToolbarRoot = (0, react.forwardRef)(function DataToolbarRoot({ className, role, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.dataToolbar().root, className),
+		"data-jaci-component": "data-toolbar",
+		"data-slot": "data-toolbar",
+		role: role ?? "toolbar"
+	});
+});
+const DataToolbarSearch = (0, react.forwardRef)(function DataToolbarSearch({ className, defaultValue = "", onValueChange, value: controlledValue, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.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 = (0, react.forwardRef)(function DataToolbarFilters({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.dataToolbar().filters, className),
+		"data-slot": "data-toolbar-filters"
+	});
+});
+const DataToolbarSort = (0, react.forwardRef)(function DataToolbarSort({ className, defaultValue = "", onValueChange, value: controlledValue, ...props }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.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 = (0, react.forwardRef)(function DataToolbarSelection({ children, className, count, label = "selected", onClear, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionContext.Provider, {
+		value: {
+			count,
+			onClear
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...props,
+			ref,
+			"aria-live": "polite",
+			className: require_cx.cx(require_data_toolbar.dataToolbar().selection, className),
+			"data-count": count,
+			"data-slot": "data-toolbar-selection",
+			children: children ?? `${count} ${label}`
+		})
+	});
+});
+const DataToolbarClearSelection = (0, react.forwardRef)(function DataToolbarClearSelection({ children = "Clear selection", className, onClick, ...props }, ref) {
+	const context = (0, react.useContext)(SelectionContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.dataToolbar().clearSelection, className),
+		"data-slot": "data-toolbar-clear-selection",
+		onClick: (event) => {
+			context?.onClear?.();
+			onClick?.(event);
+		},
+		type: "button",
+		children
+	});
+});
+const DataToolbarActions = (0, react.forwardRef)(function DataToolbarActions({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.dataToolbar().actions, className),
+		"data-slot": "data-toolbar-actions"
+	});
+});
+const DataToolbarClear = (0, react.forwardRef)(function DataToolbarClear({ children = "Clear filters", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		ref,
+		className: require_cx.cx(require_data_toolbar.dataToolbar().clear, className),
+		"data-slot": "data-toolbar-clear",
+		type: "button",
+		children
+	});
+});
+const DataToolbarSeparator = (0, react.forwardRef)(function DataToolbarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		"aria-hidden": "true",
+		className: require_cx.cx(require_data_toolbar.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
+exports.DataToolbar = DataToolbar;
+exports.DataToolbarActions = DataToolbarActions;
+exports.DataToolbarClear = DataToolbarClear;
+exports.DataToolbarClearSelection = DataToolbarClearSelection;
+exports.DataToolbarFilters = DataToolbarFilters;
+exports.DataToolbarRoot = DataToolbarRoot;
+exports.DataToolbarSearch = DataToolbarSearch;
+exports.DataToolbarSelection = DataToolbarSelection;
+exports.DataToolbarSeparator = DataToolbarSeparator;
+exports.DataToolbarSort = DataToolbarSort;
+
+//# sourceMappingURL=data-toolbar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-toolbar.cjs","names":["cx","dataToolbar"],"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/data-toolbar.d.cts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/data-toolbar/data-toolbar.d.ts
+type DataToolbarRootProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarSearchProps extends Omit<ComponentPropsWithoutRef<"input">, "defaultValue" | "onChange" | "value"> {
+  defaultValue?: string;
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onValueChange?: (value: string) => void;
+  value?: string;
+}
+declare const DataToolbarSearch: import("react").ForwardRefExoticComponent<DataToolbarSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+type DataToolbarFiltersProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarFilters: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarSortProps extends Omit<ComponentPropsWithoutRef<"select">, "defaultValue" | "onChange" | "value"> {
+  defaultValue?: string;
+  onChange?: ComponentPropsWithoutRef<"select">["onChange"];
+  onValueChange?: (value: string) => void;
+  value?: string;
+}
+declare const DataToolbarSort: import("react").ForwardRefExoticComponent<DataToolbarSortProps & import("react").RefAttributes<HTMLSelectElement>>;
+interface DataToolbarSelectionProps extends ComponentPropsWithoutRef<"div"> {
+  count: number;
+  label?: ReactNode;
+  onClear?: () => void;
+}
+declare const DataToolbarSelection: import("react").ForwardRefExoticComponent<DataToolbarSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarClearSelectionProps extends ComponentPropsWithoutRef<"button"> {
+  children?: ReactNode;
+}
+declare const DataToolbarClearSelection: import("react").ForwardRefExoticComponent<DataToolbarClearSelectionProps & import("react").RefAttributes<HTMLButtonElement>>;
+type DataToolbarActionsProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataToolbarClearProps = ComponentPropsWithoutRef<"button">;
+declare const DataToolbarClear: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type DataToolbarSeparatorProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarSeparator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataToolbar: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Search: import("react").ForwardRefExoticComponent<DataToolbarSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+  Filters: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Sort: import("react").ForwardRefExoticComponent<DataToolbarSortProps & import("react").RefAttributes<HTMLSelectElement>>;
+  Selection: import("react").ForwardRefExoticComponent<DataToolbarSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
+  ClearSelection: import("react").ForwardRefExoticComponent<DataToolbarClearSelectionProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Clear: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { DataToolbar, DataToolbarActions, DataToolbarActionsProps, DataToolbarClear, DataToolbarClearProps, DataToolbarClearSelection, DataToolbarClearSelectionProps, DataToolbarFilters, DataToolbarFiltersProps, DataToolbarRoot, DataToolbarRootProps, DataToolbarSearch, DataToolbarSearchProps, DataToolbarSelection, DataToolbarSelectionProps, DataToolbarSeparator, DataToolbarSeparatorProps, DataToolbarSort, DataToolbarSortProps };
+//# sourceMappingURL=data-toolbar.d.cts.map

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

@@ -0,0 +1,50 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/data-toolbar/data-toolbar.d.ts
+type DataToolbarRootProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarSearchProps extends Omit<ComponentPropsWithoutRef<"input">, "defaultValue" | "onChange" | "value"> {
+  defaultValue?: string;
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onValueChange?: (value: string) => void;
+  value?: string;
+}
+declare const DataToolbarSearch: import("react").ForwardRefExoticComponent<DataToolbarSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+type DataToolbarFiltersProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarFilters: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarSortProps extends Omit<ComponentPropsWithoutRef<"select">, "defaultValue" | "onChange" | "value"> {
+  defaultValue?: string;
+  onChange?: ComponentPropsWithoutRef<"select">["onChange"];
+  onValueChange?: (value: string) => void;
+  value?: string;
+}
+declare const DataToolbarSort: import("react").ForwardRefExoticComponent<DataToolbarSortProps & import("react").RefAttributes<HTMLSelectElement>>;
+interface DataToolbarSelectionProps extends ComponentPropsWithoutRef<"div"> {
+  count: number;
+  label?: ReactNode;
+  onClear?: () => void;
+}
+declare const DataToolbarSelection: import("react").ForwardRefExoticComponent<DataToolbarSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DataToolbarClearSelectionProps extends ComponentPropsWithoutRef<"button"> {
+  children?: ReactNode;
+}
+declare const DataToolbarClearSelection: import("react").ForwardRefExoticComponent<DataToolbarClearSelectionProps & import("react").RefAttributes<HTMLButtonElement>>;
+type DataToolbarActionsProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type DataToolbarClearProps = ComponentPropsWithoutRef<"button">;
+declare const DataToolbarClear: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type DataToolbarSeparatorProps = ComponentPropsWithoutRef<"div">;
+declare const DataToolbarSeparator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DataToolbar: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Search: import("react").ForwardRefExoticComponent<DataToolbarSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+  Filters: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Sort: import("react").ForwardRefExoticComponent<DataToolbarSortProps & import("react").RefAttributes<HTMLSelectElement>>;
+  Selection: import("react").ForwardRefExoticComponent<DataToolbarSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
+  ClearSelection: import("react").ForwardRefExoticComponent<DataToolbarClearSelectionProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Actions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Clear: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { DataToolbar, DataToolbarActions, DataToolbarActionsProps, DataToolbarClear, DataToolbarClearProps, DataToolbarClearSelection, DataToolbarClearSelectionProps, DataToolbarFilters, DataToolbarFiltersProps, DataToolbarRoot, DataToolbarRootProps, DataToolbarSearch, DataToolbarSearchProps, DataToolbarSelection, DataToolbarSelectionProps, DataToolbarSeparator, DataToolbarSeparatorProps, DataToolbarSort, DataToolbarSortProps };
+//# sourceMappingURL=data-toolbar.d.ts.map

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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"}