jaci-ui 0.4.0 → 0.6.0

package/dist/components/command/command.js

@@ -17,7 +17,7 @@ function defaultFilter(value, search, keywords) {
 	if (!query) return true;
 	return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));
 }
-const CommandRoot = forwardRef(function CommandRoot({ children, className, defaultSearch = "", filter = defaultFilter, loading = false, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
+const CommandRoot = forwardRef(function CommandRoot({ children, className, defaultSearch = "", disabled = false, filter = defaultFilter, loading = false, onKeyDown, onSearchChange, search: controlledSearch, shouldFilter = true, loopFocus = true, ...props }, ref) {
 	const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);
 	const [highlighted, setHighlighted] = useState(null);
 	const [, setVersion] = useState(0);
@@ -35,7 +35,7 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
 		search,
 		shouldFilter
 	]);
-	const visibleItems = items.filter((item) => !item.disabled && matches(item));
+	const visibleItems = useMemo(() => items.filter((item) => !item.disabled && matches(item)), [items, matches]);
 	const registerItem = useCallback((item) => {
 		itemsRef.current.set(item.id, item);
 		setVersion((current) => current + 1);
@@ -48,33 +48,43 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
 		const item = itemsRef.current.get(id);
 		if (item) item.element = element;
 	}, []);
-	const selectItem = useCallback((value) => {
-		const item = itemsRef.current.get(value);
+	const selectItem = useCallback((id) => {
+		const item = itemsRef.current.get(id);
 		if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);
 	}, [matches]);
 	useEffect(() => {
-		if (!visibleItems.some((item) => item.value === highlighted)) setHighlighted(visibleItems[0]?.value ?? null);
+		if (!visibleItems.some((item) => item.id === highlighted)) setHighlighted(visibleItems[0]?.id ?? null);
 	}, [highlighted, visibleItems]);
-	const handleKeyDown = (event) => {
+	const handleKeyDown = useCallback((event) => {
 		onKeyDown?.(event);
 		if (event.defaultPrevented) return;
-		const currentIndex = visibleItems.findIndex((item) => item.value === highlighted);
+		if (disabled) return;
+		const currentIndex = visibleItems.findIndex((item) => item.id === highlighted);
 		if ((event.key === "ArrowDown" || event.key === "ArrowUp") && visibleItems.length > 0) {
 			event.preventDefault();
 			let nextIndex = currentIndex + (event.key === "ArrowDown" ? 1 : -1);
 			if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;
-			if (nextIndex >= 0 && nextIndex < visibleItems.length) setHighlighted(visibleItems[nextIndex]?.value ?? null);
+			if (nextIndex >= 0 && nextIndex < visibleItems.length) setHighlighted(visibleItems[nextIndex]?.id ?? null);
 		} else if (event.key === "Home" || event.key === "End") {
 			event.preventDefault();
-			setHighlighted((event.key === "Home" ? visibleItems[0] : visibleItems.at(-1))?.value ?? null);
+			setHighlighted((event.key === "Home" ? visibleItems[0] : visibleItems.at(-1))?.id ?? null);
 		} else if (event.key === "Enter" && highlighted) {
 			event.preventDefault();
 			selectItem(highlighted);
 		} else if (event.key === "Escape") event.preventDefault();
-	};
+	}, [
+		disabled,
+		highlighted,
+		loopFocus,
+		onKeyDown,
+		selectItem,
+		visibleItems
+	]);
 	const context = useMemo(() => ({
 		search,
 		setSearch,
+		disabled,
+		handleKeyDown,
 		loading,
 		shouldFilter,
 		items,
@@ -87,6 +97,8 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
 		selectItem
 	}), [
 		highlighted,
+		disabled,
+		handleKeyDown,
 		items,
 		listId,
 		loading,
@@ -107,17 +119,16 @@ const CommandRoot = forwardRef(function CommandRoot({ children, className, defau
 				else if (ref) ref.current = node;
 			},
 			className: cx(styles.root, className),
-			"data-disabled": props["aria-disabled"] || void 0,
+			"data-disabled": disabled || void 0,
 			"data-jaci-component": "command",
 			"data-slot": "command",
-			onKeyDown: handleKeyDown,
-			role: "application",
+			"aria-disabled": disabled || void 0,
 			children
 		})
 	});
 });
-const CommandInput = forwardRef(function CommandInput({ className, onChange, ...props }, ref) {
-	const { highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
+const CommandInput = forwardRef(function CommandInput({ className, onChange, onKeyDown, ...props }, ref) {
+	const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();
 	const handleChange = (event) => {
 		onChange?.(event);
 		const next = event.target.value;
@@ -127,43 +138,48 @@ const CommandInput = forwardRef(function CommandInput({ className, onChange, ...
 	return /* @__PURE__ */ jsx("input", {
 		...props,
 		ref,
-		"aria-activedescendant": highlighted ? `command-item-${highlighted}` : void 0,
+		"aria-activedescendant": highlighted ?? void 0,
 		"aria-controls": listId,
+		role: "combobox",
 		"aria-haspopup": "listbox",
+		"aria-expanded": "true",
 		className: cx(command().input, className),
 		"data-slot": "command-input",
+		disabled: disabled || props.disabled,
 		onChange: (event) => {
 			handleChange(event);
 		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			handleKeyDown(event);
+		},
 		value: search
 	});
 });
 const CommandList = forwardRef(function CommandList({ className, id, ...props }, ref) {
-	const { items, listId, matches } = useCommandContext();
-	const hasVisibleItems = items.some((item) => !item.disabled && matches(item));
+	const { listId } = useCommandContext();
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		id: id ?? listId,
 		className: cx(command().list, className),
 		"data-slot": "command-list",
-		role: hasVisibleItems ? "listbox" : void 0
+		role: "listbox"
 	});
 });
 const CommandGroup = forwardRef(function CommandGroup({ children, className, heading, ...props }, ref) {
 	const context = useCommandContext();
 	const groupId = useId();
-	const hasRegisteredItems = context.items.some((item) => item.groupId === groupId);
-	const hasVisibleItems = context.items.some((item) => item.groupId === groupId && context.matches(item));
+	const hasVisibleItems = context.items.some((item) => item.groupId === groupId && !item.disabled && context.matches(item));
 	return /* @__PURE__ */ jsx(CommandGroupContext.Provider, {
 		value: groupId,
 		children: /* @__PURE__ */ jsxs("div", {
 			...props,
 			ref,
-			"aria-hidden": hasRegisteredItems && !hasVisibleItems ? true : void 0,
+			"aria-hidden": !hasVisibleItems || void 0,
 			className: cx(command().group, className),
 			"data-slot": "command-group",
-			hidden: hasRegisteredItems && !hasVisibleItems,
+			hidden: !hasVisibleItems,
 			children: [heading ? /* @__PURE__ */ jsx("div", {
 				className: command().groupHeading,
 				"data-slot": "command-group-heading",
@@ -175,14 +191,14 @@ const CommandGroup = forwardRef(function CommandGroup({ children, className, hea
 const CommandItem = forwardRef(function CommandItem({ children, className, disabled = false, keywords: itemKeywords, onClick, onMouseEnter, onSelect, value, ...props }, ref) {
 	const context = useCommandContext();
 	const groupId = useContext(CommandGroupContext);
-	const id = `command-item-${value}`;
+	const id = `command-item-${useId().replace(/:/g, "")}`;
 	const keywords = itemKeywords ?? EMPTY_KEYWORDS;
 	const visible = context.matches({
 		value,
 		keywords
 	});
 	useEffect(() => context.registerItem({
-		id: value,
+		id,
 		value,
 		keywords,
 		disabled,
@@ -193,6 +209,7 @@ const CommandItem = forwardRef(function CommandItem({ children, className, disab
 		context.registerItem,
 		disabled,
 		groupId,
+		id,
 		keywords,
 		onSelect,
 		value
@@ -206,29 +223,29 @@ const CommandItem = forwardRef(function CommandItem({ children, className, disab
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref: (node) => {
-			context.setItemElement(value, node);
+			context.setItemElement(id, node);
 			if (typeof ref === "function") ref(node);
 			else if (ref) ref.current = node;
 		},
 		"aria-disabled": disabled || void 0,
-		"aria-selected": context.highlighted === value,
+		"aria-selected": context.highlighted === id,
 		className: cx(command().item, className),
 		"data-disabled": disabled || void 0,
-		"data-highlighted": context.highlighted === value || void 0,
+		"data-highlighted": context.highlighted === id || void 0,
 		"data-slot": "command-item",
 		id,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented && !disabled) context.selectItem(value);
+			if (!event.defaultPrevented && !disabled) context.selectItem(id);
 		},
 		onMouseEnter: (event) => {
 			onMouseEnter?.(event);
-			if (!disabled) context.setHighlighted(value);
+			if (!disabled) context.setHighlighted(id);
 		},
 		onKeyDown: (event) => {
 			if ((event.key === "Enter" || event.key === " ") && !disabled) {
 				event.preventDefault();
-				context.selectItem(value);
+				context.selectItem(id);
 			}
 		},
 		role: "option",
@@ -247,14 +264,16 @@ const CommandItemIndicator = forwardRef(function CommandItemIndicator({ children
 });
 const CommandEmpty = forwardRef(function CommandEmpty({ className, ...props }, ref) {
 	const context = useCommandContext();
-	if (context.loading || context.items.length === 0 || context.items.some((item) => context.matches(item))) return null;
+	if (context.loading || context.items.some((item) => !item.disabled && context.matches(item))) return null;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref,
 		className: cx(command().empty, className),
 		"aria-live": "polite",
+		"aria-disabled": "true",
 		"data-slot": "command-empty",
-		role: "presentation"
+		role: "option",
+		tabIndex: -1
 	});
 });
 const CommandLoading = forwardRef(function CommandLoading({ className, ...props }, ref) {
@@ -264,8 +283,10 @@ const CommandLoading = forwardRef(function CommandLoading({ className, ...props
 		ref,
 		className: cx(command().loading, className),
 		"aria-live": "polite",
+		"aria-disabled": "true",
 		"data-slot": "command-loading",
-		role: "presentation"
+		role: "option",
+		tabIndex: -1
 	});
 });
 const CommandSeparator = forwardRef(function CommandSeparator({ className, ...props }, ref) {

package/dist/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { command } from \"../../styled-system/recipes\";\nimport { cx } from \"../../styled-system/css\";\n\nexport type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;\n\ninterface CommandItemRecord {\n  id: string;\n  value: string;\n  keywords: readonly string[];\n  disabled: boolean;\n  groupId: string | undefined;\n  onSelect: ((value: string) => void) | undefined;\n  element: HTMLDivElement | null;\n}\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (search: string) => void;\n  loading: boolean;\n  shouldFilter: boolean;\n  items: readonly CommandItemRecord[];\n  highlighted: string | null;\n  listId: string;\n  matches: (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) => boolean;\n  registerItem: (item: CommandItemRecord) => () => void;\n  setItemElement: (id: string, element: HTMLDivElement | null) => void;\n  setHighlighted: (value: string | null) => void;\n  selectItem: (value: string) => void;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\nconst CommandGroupContext = createContext<string | undefined>(undefined);\nconst EMPTY_KEYWORDS: readonly string[] = [];\n\nfunction useCommandContext() {\n  const context = useContext(CommandContext);\n  if (!context) throw new Error(\"Command parts must be rendered inside Command.Root.\");\n  return context;\n}\n\nfunction defaultFilter(value: string, search: string, keywords: readonly string[]) {\n  const query = search.trim().toLocaleLowerCase();\n  if (!query) return true;\n  return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));\n}\n\nexport interface CommandRootProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  search?: string;\n  defaultSearch?: string;\n  onSearchChange?: (search: string) => void;\n  filter?: CommandFilter;\n  shouldFilter?: boolean;\n  loopFocus?: boolean;\n  loading?: boolean;\n  children?: ReactNode;\n}\n\nexport const CommandRoot = forwardRef<HTMLDivElement, CommandRootProps>(function CommandRoot(\n  {\n    children,\n    className,\n    defaultSearch = \"\",\n    filter = defaultFilter,\n    loading = false,\n    onKeyDown,\n    onSearchChange,\n    search: controlledSearch,\n    shouldFilter = true,\n    loopFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const [, setVersion] = useState(0);\n  const itemsRef = useRef(new Map<string, CommandItemRecord>());\n  const listId = useId();\n  const search = controlledSearch ?? uncontrolledSearch;\n  const styles = command();\n\n  const items = Array.from(itemsRef.current.values());\n  const setSearch = useCallback(\n    (next: string) => {\n      if (controlledSearch === undefined) setUncontrolledSearch(next);\n      onSearchChange?.(next);\n    },\n    [controlledSearch, onSearchChange],\n  );\n  const matches = useCallback(\n    (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) =>\n      !shouldFilter || filter(item.value, search, item.keywords),\n    [filter, search, shouldFilter],\n  );\n  const visibleItems = items.filter((item) => !item.disabled && matches(item));\n\n  const registerItem = useCallback((item: CommandItemRecord) => {\n    itemsRef.current.set(item.id, item);\n    setVersion((current) => current + 1);\n    return () => {\n      itemsRef.current.delete(item.id);\n      setVersion((current) => current + 1);\n    };\n  }, []);\n\n  const setItemElement = useCallback((id: string, element: HTMLDivElement | null) => {\n    const item = itemsRef.current.get(id);\n    if (item) item.element = element;\n  }, []);\n\n  const selectItem = useCallback(\n    (value: string) => {\n      const item = itemsRef.current.get(value);\n      if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);\n    },\n    [matches],\n  );\n\n  useEffect(() => {\n    if (!visibleItems.some((item) => item.value === highlighted)) {\n      setHighlighted(visibleItems[0]?.value ?? null);\n    }\n  }, [highlighted, visibleItems]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    const currentIndex = visibleItems.findIndex((item) => item.value === highlighted);\n    if ((event.key === \"ArrowDown\" || event.key === \"ArrowUp\") && visibleItems.length > 0) {\n      event.preventDefault();\n      const direction = event.key === \"ArrowDown\" ? 1 : -1;\n      let nextIndex = currentIndex + direction;\n      if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;\n      if (nextIndex >= 0 && nextIndex < visibleItems.length) {\n        setHighlighted(visibleItems[nextIndex]?.value ?? null);\n      }\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      setHighlighted((event.key === \"Home\" ? visibleItems[0] : visibleItems.at(-1))?.value ?? null);\n    } else if (event.key === \"Enter\" && highlighted) {\n      event.preventDefault();\n      selectItem(highlighted);\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n    }\n  };\n\n  const context = useMemo<CommandContextValue>(\n    () => ({\n      search,\n      setSearch,\n      loading,\n      shouldFilter,\n      items,\n      highlighted,\n      listId,\n      matches,\n      registerItem,\n      setItemElement,\n      setHighlighted,\n      selectItem,\n    }),\n    [\n      highlighted,\n      items,\n      listId,\n      loading,\n      matches,\n      registerItem,\n      search,\n      selectItem,\n      setItemElement,\n      setSearch,\n      shouldFilter,\n    ],\n  );\n\n  return (\n    <CommandContext.Provider value={context}>\n      <div\n        {...props}\n        ref={(node) => {\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        className={cx(styles.root, className)}\n        data-disabled={props[\"aria-disabled\"] || undefined}\n        data-jaci-component=\"command\"\n        data-slot=\"command\"\n        onKeyDown={handleKeyDown}\n        role=\"application\"\n      >\n        {children}\n      </div>\n    </CommandContext.Provider>\n  );\n});\n\nexport type CommandInputProps = ComponentPropsWithoutRef<\"input\">;\nexport const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(function CommandInput(\n  { className, onChange, ...props },\n  ref,\n) {\n  const { highlighted, listId, search, setHighlighted, setSearch } = useCommandContext();\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    const next = event.target.value;\n    setHighlighted(null);\n    setSearch(next);\n  };\n\n  return (\n    <input\n      {...props}\n      ref={ref}\n      aria-activedescendant={highlighted ? `command-item-${highlighted}` : undefined}\n      aria-controls={listId}\n      aria-haspopup=\"listbox\"\n      className={cx(command().input, className)}\n      data-slot=\"command-input\"\n      onChange={(event) => {\n        handleChange(event);\n      }}\n      value={search}\n    />\n  );\n});\n\nexport type CommandListProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandList = forwardRef<HTMLDivElement, CommandListProps>(function CommandList(\n  { className, id, ...props },\n  ref,\n) {\n  const { items, listId, matches } = useCommandContext();\n  const hasVisibleItems = items.some((item) => !item.disabled && matches(item));\n  return (\n    <div\n      {...props}\n      ref={ref}\n      id={id ?? listId}\n      className={cx(command().list, className)}\n      data-slot=\"command-list\"\n      role={hasVisibleItems ? \"listbox\" : undefined}\n    />\n  );\n});\n\nexport interface CommandGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  heading?: ReactNode;\n}\nexport const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(function CommandGroup(\n  { children, className, heading, ...props },\n  ref,\n) {\n  const context = useCommandContext();\n  const groupId = useId();\n  const hasRegisteredItems = context.items.some((item) => item.groupId === groupId);\n  const hasVisibleItems = context.items.some(\n    (item) => item.groupId === groupId && context.matches(item),\n  );\n  return (\n    <CommandGroupContext.Provider value={groupId}>\n      <div\n        {...props}\n        ref={ref}\n        aria-hidden={hasRegisteredItems && !hasVisibleItems ? true : undefined}\n        className={cx(command().group, className)}\n        data-slot=\"command-group\"\n        hidden={hasRegisteredItems && !hasVisibleItems}\n      >\n        {heading ? (\n          <div className={command().groupHeading} data-slot=\"command-group-heading\">\n            {heading}\n          </div>\n        ) : null}\n        {children}\n      </div>\n    </CommandGroupContext.Provider>\n  );\n});\n\nexport interface CommandItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  value: string;\n  keywords?: readonly string[];\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n}\nexport const CommandItem = forwardRef<HTMLDivElement, CommandItemProps>(function CommandItem(\n  {\n    children,\n    className,\n    disabled = false,\n    keywords: itemKeywords,\n    onClick,\n    onMouseEnter,\n    onSelect,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const context = useCommandContext();\n  const groupId = useContext(CommandGroupContext);\n  const id = `command-item-${value}`;\n  const keywords = itemKeywords ?? EMPTY_KEYWORDS;\n  const visible = context.matches({ value, keywords });\n\n  useEffect(\n    () =>\n      context.registerItem({\n        id: value,\n        value,\n        keywords,\n        disabled,\n        groupId,\n        onSelect,\n        element: null,\n      }),\n    [context.registerItem, disabled, groupId, keywords, onSelect, value],\n  );\n\n  if (!visible) {\n    return <div aria-hidden=\"true\" hidden ref={ref} data-slot=\"command-item\" />;\n  }\n\n  return (\n    <div\n      {...props}\n      ref={(node) => {\n        context.setItemElement(value, node);\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      aria-disabled={disabled || undefined}\n      aria-selected={context.highlighted === value}\n      className={cx(command().item, className)}\n      data-disabled={disabled || undefined}\n      data-highlighted={context.highlighted === value || undefined}\n      data-slot=\"command-item\"\n      id={id}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented && !disabled) context.selectItem(value);\n      }}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event);\n        if (!disabled) context.setHighlighted(value);\n      }}\n      onKeyDown={(event) => {\n        if ((event.key === \"Enter\" || event.key === \" \") && !disabled) {\n          event.preventDefault();\n          context.selectItem(value);\n        }\n      }}\n      role=\"option\"\n      tabIndex={-1}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport type CommandItemIndicatorProps = ComponentPropsWithoutRef<\"span\">;\nexport const CommandItemIndicator = forwardRef<HTMLSpanElement, CommandItemIndicatorProps>(\n  function CommandItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(command().itemIndicator, className)}\n        data-slot=\"command-item-indicator\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport type CommandEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(function CommandEmpty(\n  { className, ...props },\n  ref,\n) {\n  const context = useCommandContext();\n  if (\n    context.loading ||\n    context.items.length === 0 ||\n    context.items.some((item) => context.matches(item))\n  )\n    return null;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(command().empty, className)}\n      aria-live=\"polite\"\n      data-slot=\"command-empty\"\n      role=\"presentation\"\n    />\n  );\n});\n\nexport type CommandLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandLoading = forwardRef<HTMLDivElement, CommandLoadingProps>(\n  function CommandLoading({ className, ...props }, ref) {\n    const context = useCommandContext();\n    if (!context.loading) return null;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(command().loading, className)}\n        aria-live=\"polite\"\n        data-slot=\"command-loading\"\n        role=\"presentation\"\n      />\n    );\n  },\n);\n\nexport type CommandSeparatorProps = ComponentPropsWithoutRef<\"hr\">;\nexport const CommandSeparator = forwardRef<HTMLHRElement, CommandSeparatorProps>(\n  function CommandSeparator({ className, ...props }, ref) {\n    return (\n      <hr\n        {...props}\n        ref={ref}\n        role=\"presentation\"\n        className={cx(command().separator, className)}\n        data-slot=\"command-separator\"\n      />\n    );\n  },\n);\n\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Group: CommandGroup,\n  Item: CommandItem,\n  ItemIndicator: CommandItemIndicator,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Separator: CommandSeparator,\n};\n"],"mappings":"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"}
+{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ChangeEvent, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\n\nimport { command } from \"../../styled-system/recipes\";\nimport { cx } from \"../../styled-system/css\";\n\nexport type CommandFilter = (value: string, search: string, keywords: readonly string[]) => boolean;\n\ninterface CommandItemRecord {\n  id: string;\n  value: string;\n  keywords: readonly string[];\n  disabled: boolean;\n  groupId: string | undefined;\n  onSelect: ((value: string) => void) | undefined;\n  element: HTMLDivElement | null;\n}\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (search: string) => void;\n  loading: boolean;\n  shouldFilter: boolean;\n  items: readonly CommandItemRecord[];\n  highlighted: string | null;\n  listId: string;\n  matches: (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) => boolean;\n  handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  registerItem: (item: CommandItemRecord) => () => void;\n  setItemElement: (id: string, element: HTMLDivElement | null) => void;\n  setHighlighted: (value: string | null) => void;\n  selectItem: (id: string) => void;\n  disabled: boolean;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\nconst CommandGroupContext = createContext<string | undefined>(undefined);\nconst EMPTY_KEYWORDS: readonly string[] = [];\n\nfunction useCommandContext() {\n  const context = useContext(CommandContext);\n  if (!context) throw new Error(\"Command parts must be rendered inside Command.Root.\");\n  return context;\n}\n\nfunction defaultFilter(value: string, search: string, keywords: readonly string[]) {\n  const query = search.trim().toLocaleLowerCase();\n  if (!query) return true;\n  return [value, ...keywords].some((candidate) => candidate.toLocaleLowerCase().includes(query));\n}\n\nexport interface CommandRootProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  search?: string;\n  defaultSearch?: string;\n  onSearchChange?: (search: string) => void;\n  filter?: CommandFilter;\n  shouldFilter?: boolean;\n  loopFocus?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  children?: ReactNode;\n}\n\nexport const CommandRoot = forwardRef<HTMLDivElement, CommandRootProps>(function CommandRoot(\n  {\n    children,\n    className,\n    defaultSearch = \"\",\n    disabled = false,\n    filter = defaultFilter,\n    loading = false,\n    onKeyDown,\n    onSearchChange,\n    search: controlledSearch,\n    shouldFilter = true,\n    loopFocus = true,\n    ...props\n  },\n  ref,\n) {\n  const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const [, setVersion] = useState(0);\n  const itemsRef = useRef(new Map<string, CommandItemRecord>());\n  const listId = useId();\n  const search = controlledSearch ?? uncontrolledSearch;\n  const styles = command();\n\n  const items = Array.from(itemsRef.current.values());\n  const setSearch = useCallback(\n    (next: string) => {\n      if (controlledSearch === undefined) setUncontrolledSearch(next);\n      onSearchChange?.(next);\n    },\n    [controlledSearch, onSearchChange],\n  );\n  const matches = useCallback(\n    (item: Pick<CommandItemRecord, \"value\" | \"keywords\">) =>\n      !shouldFilter || filter(item.value, search, item.keywords),\n    [filter, search, shouldFilter],\n  );\n  const visibleItems = useMemo(\n    () => items.filter((item) => !item.disabled && matches(item)),\n    [items, matches],\n  );\n\n  const registerItem = useCallback((item: CommandItemRecord) => {\n    itemsRef.current.set(item.id, item);\n    setVersion((current) => current + 1);\n    return () => {\n      itemsRef.current.delete(item.id);\n      setVersion((current) => current + 1);\n    };\n  }, []);\n\n  const setItemElement = useCallback((id: string, element: HTMLDivElement | null) => {\n    const item = itemsRef.current.get(id);\n    if (item) item.element = element;\n  }, []);\n\n  const selectItem = useCallback(\n    (id: string) => {\n      const item = itemsRef.current.get(id);\n      if (item && !item.disabled && matches(item)) item.onSelect?.(item.value);\n    },\n    [matches],\n  );\n\n  useEffect(() => {\n    if (!visibleItems.some((item) => item.id === highlighted)) {\n      setHighlighted(visibleItems[0]?.id ?? null);\n    }\n  }, [highlighted, visibleItems]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      onKeyDown?.(event as KeyboardEvent<HTMLDivElement>);\n      if (event.defaultPrevented) return;\n      if (disabled) return;\n      const currentIndex = visibleItems.findIndex((item) => item.id === highlighted);\n      if ((event.key === \"ArrowDown\" || event.key === \"ArrowUp\") && visibleItems.length > 0) {\n        event.preventDefault();\n        const direction = event.key === \"ArrowDown\" ? 1 : -1;\n        let nextIndex = currentIndex + direction;\n        if (loopFocus) nextIndex = (nextIndex + visibleItems.length) % visibleItems.length;\n        if (nextIndex >= 0 && nextIndex < visibleItems.length) {\n          setHighlighted(visibleItems[nextIndex]?.id ?? null);\n        }\n      } else if (event.key === \"Home\" || event.key === \"End\") {\n        event.preventDefault();\n        setHighlighted((event.key === \"Home\" ? visibleItems[0] : visibleItems.at(-1))?.id ?? null);\n      } else if (event.key === \"Enter\" && highlighted) {\n        event.preventDefault();\n        selectItem(highlighted);\n      } else if (event.key === \"Escape\") {\n        event.preventDefault();\n      }\n    },\n    [disabled, highlighted, loopFocus, onKeyDown, selectItem, visibleItems],\n  );\n\n  const context = useMemo<CommandContextValue>(\n    () => ({\n      search,\n      setSearch,\n      disabled,\n      handleKeyDown,\n      loading,\n      shouldFilter,\n      items,\n      highlighted,\n      listId,\n      matches,\n      registerItem,\n      setItemElement,\n      setHighlighted,\n      selectItem,\n    }),\n    [\n      highlighted,\n      disabled,\n      handleKeyDown,\n      items,\n      listId,\n      loading,\n      matches,\n      registerItem,\n      search,\n      selectItem,\n      setItemElement,\n      setSearch,\n      shouldFilter,\n    ],\n  );\n\n  return (\n    <CommandContext.Provider value={context}>\n      <div\n        {...props}\n        ref={(node) => {\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        className={cx(styles.root, className)}\n        data-disabled={disabled || undefined}\n        data-jaci-component=\"command\"\n        data-slot=\"command\"\n        aria-disabled={disabled || undefined}\n      >\n        {children}\n      </div>\n    </CommandContext.Provider>\n  );\n});\n\nexport type CommandInputProps = ComponentPropsWithoutRef<\"input\">;\nexport const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(function CommandInput(\n  { className, onChange, onKeyDown, ...props },\n  ref,\n) {\n  const { disabled, handleKeyDown, highlighted, listId, search, setHighlighted, setSearch } =\n    useCommandContext();\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    const next = event.target.value;\n    setHighlighted(null);\n    setSearch(next);\n  };\n\n  return (\n    <input\n      {...props}\n      ref={ref}\n      aria-activedescendant={highlighted ?? undefined}\n      aria-controls={listId}\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"true\"\n      className={cx(command().input, className)}\n      data-slot=\"command-input\"\n      disabled={disabled || props.disabled}\n      onChange={(event) => {\n        handleChange(event);\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        handleKeyDown(event);\n      }}\n      value={search}\n    />\n  );\n});\n\nexport type CommandListProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandList = forwardRef<HTMLDivElement, CommandListProps>(function CommandList(\n  { className, id, ...props },\n  ref,\n) {\n  const { listId } = useCommandContext();\n  return (\n    <div\n      {...props}\n      ref={ref}\n      id={id ?? listId}\n      className={cx(command().list, className)}\n      data-slot=\"command-list\"\n      role=\"listbox\"\n    />\n  );\n});\n\nexport interface CommandGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  heading?: ReactNode;\n}\nexport const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(function CommandGroup(\n  { children, className, heading, ...props },\n  ref,\n) {\n  const context = useCommandContext();\n  const groupId = useId();\n  const hasVisibleItems = context.items.some(\n    (item) => item.groupId === groupId && !item.disabled && context.matches(item),\n  );\n  return (\n    <CommandGroupContext.Provider value={groupId}>\n      <div\n        {...props}\n        ref={ref}\n        aria-hidden={!hasVisibleItems || undefined}\n        className={cx(command().group, className)}\n        data-slot=\"command-group\"\n        hidden={!hasVisibleItems}\n      >\n        {heading ? (\n          <div className={command().groupHeading} data-slot=\"command-group-heading\">\n            {heading}\n          </div>\n        ) : null}\n        {children}\n      </div>\n    </CommandGroupContext.Provider>\n  );\n});\n\nexport interface CommandItemProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  value: string;\n  keywords?: readonly string[];\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n}\nexport const CommandItem = forwardRef<HTMLDivElement, CommandItemProps>(function CommandItem(\n  {\n    children,\n    className,\n    disabled = false,\n    keywords: itemKeywords,\n    onClick,\n    onMouseEnter,\n    onSelect,\n    value,\n    ...props\n  },\n  ref,\n) {\n  const context = useCommandContext();\n  const groupId = useContext(CommandGroupContext);\n  const id = `command-item-${useId().replace(/:/g, \"\")}`;\n  const keywords = itemKeywords ?? EMPTY_KEYWORDS;\n  const visible = context.matches({ value, keywords });\n\n  useEffect(\n    () =>\n      context.registerItem({\n        id,\n        value,\n        keywords,\n        disabled,\n        groupId,\n        onSelect,\n        element: null,\n      }),\n    [context.registerItem, disabled, groupId, id, keywords, onSelect, value],\n  );\n\n  if (!visible) {\n    return <div aria-hidden=\"true\" hidden ref={ref} data-slot=\"command-item\" />;\n  }\n\n  return (\n    <div\n      {...props}\n      ref={(node) => {\n        context.setItemElement(id, node);\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      aria-disabled={disabled || undefined}\n      aria-selected={context.highlighted === id}\n      className={cx(command().item, className)}\n      data-disabled={disabled || undefined}\n      data-highlighted={context.highlighted === id || undefined}\n      data-slot=\"command-item\"\n      id={id}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented && !disabled) context.selectItem(id);\n      }}\n      onMouseEnter={(event) => {\n        onMouseEnter?.(event);\n        if (!disabled) context.setHighlighted(id);\n      }}\n      onKeyDown={(event) => {\n        if ((event.key === \"Enter\" || event.key === \" \") && !disabled) {\n          event.preventDefault();\n          context.selectItem(id);\n        }\n      }}\n      role=\"option\"\n      tabIndex={-1}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport type CommandItemIndicatorProps = ComponentPropsWithoutRef<\"span\">;\nexport const CommandItemIndicator = forwardRef<HTMLSpanElement, CommandItemIndicatorProps>(\n  function CommandItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        ref={ref}\n        className={cx(command().itemIndicator, className)}\n        data-slot=\"command-item-indicator\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport type CommandEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(function CommandEmpty(\n  { className, ...props },\n  ref,\n) {\n  const context = useCommandContext();\n  if (context.loading || context.items.some((item) => !item.disabled && context.matches(item)))\n    return null;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(command().empty, className)}\n      aria-live=\"polite\"\n      aria-disabled=\"true\"\n      data-slot=\"command-empty\"\n      role=\"option\"\n      tabIndex={-1}\n    />\n  );\n});\n\nexport type CommandLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const CommandLoading = forwardRef<HTMLDivElement, CommandLoadingProps>(\n  function CommandLoading({ className, ...props }, ref) {\n    const context = useCommandContext();\n    if (!context.loading) return null;\n    return (\n      <div\n        {...props}\n        ref={ref}\n        className={cx(command().loading, className)}\n        aria-live=\"polite\"\n        aria-disabled=\"true\"\n        data-slot=\"command-loading\"\n        role=\"option\"\n        tabIndex={-1}\n      />\n    );\n  },\n);\n\nexport type CommandSeparatorProps = ComponentPropsWithoutRef<\"hr\">;\nexport const CommandSeparator = forwardRef<HTMLHRElement, CommandSeparatorProps>(\n  function CommandSeparator({ className, ...props }, ref) {\n    return (\n      <hr\n        {...props}\n        ref={ref}\n        role=\"presentation\"\n        className={cx(command().separator, className)}\n        data-slot=\"command-separator\"\n      />\n    );\n  },\n);\n\nexport const Command = {\n  Root: CommandRoot,\n  Input: CommandInput,\n  List: CommandList,\n  Group: CommandGroup,\n  Item: CommandItem,\n  ItemIndicator: CommandItemIndicator,\n  Empty: CommandEmpty,\n  Loading: CommandLoading,\n  Separator: CommandSeparator,\n};\n"],"mappings":"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"}

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