@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/collections/autocomplete/autocomplete-popup-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-popup-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,\n * cor do texto e animação estão explicados (tabela no README de `overlays`). As diferenças:\n * - largura a partir da do campo (`--anchor-width`) e altura até `max-h-80`, sem animação de\n *   tamanho;\n * - o tamanho do texto vem dos itens, e não do popup.\n *\n * A altura máxima fica no popup, e a lista (`min-h-0`) encolhe até caber, como no `Select`.\n */\nexport const autocompletePopupVariants = cva([\n  'group',\n\n  'flex',\n  'flex-col',\n\n  'max-h-80',\n  'min-w-(--anchor-width)', // Largura mínima igual ao elemento âncora, permite crescer para conteúdo maior\n  // Cresce com o conteúdo até 20rem (ou a largura do campo, se maior) e aí quebra a linha;\n  // nunca passa da tela.\n  'max-w-[min(calc(100dvw-1rem),max(var(--anchor-width),--spacing(80)))]',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n  'text-gray-12',\n\n  'not-motion-reduced:origin-(--transform-origin)',\n  'not-motion-reduced:transition-[scale,opacity]',\n  'not-motion-reduced:ease-enter',\n  'not-motion-reduced:duration-150',\n\n  'not-motion-reduced:data-starting-style:scale-95',\n  'not-motion-reduced:data-ending-style:scale-95',\n  'not-motion-reduced:data-ending-style:ease-exit',\n  'not-motion-reduced:data-ending-style:duration-100',\n  'data-starting-style:opacity-0',\n  'data-ending-style:opacity-0',\n]);\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,4BAA4B,IAAI;CAC3C;CAEA;CACA;CAEA;CACA;CAGA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"autocomplete-popup-variants.js","names":[],"sources":["../../../../src/components/collections/autocomplete/autocomplete-popup-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno, sombra,\n * cor do texto e animação estão explicados. As diferenças:\n * - largura a partir da do campo (`--anchor-width`) e altura até `max-h-80`, sem animação de\n *   tamanho;\n * - o tamanho do texto vem dos itens, e não do popup;\n * - sem modo sobreposto, o do `Select` que alinha o item ao trigger: o popup sempre abre junto ao\n *   campo.\n *\n * A altura máxima fica no popup, e a lista (`min-h-0`) encolhe até caber, como no `Select`.\n */\nexport const autocompletePopupVariants = cva([\n  'group',\n\n  'flex',\n  'flex-col',\n\n  'max-h-80',\n  'min-w-(--anchor-width)', // Largura mínima igual ao elemento âncora, permite crescer para conteúdo maior\n  // Cresce com o conteúdo até 20rem (ou a largura do campo, se maior) e aí quebra a linha;\n  // nunca passa da tela.\n  'max-w-[min(calc(100dvw-1rem),max(var(--anchor-width),--spacing(80)))]',\n\n  'rounded-md',\n  'corner-squircle',\n  'outline-1',\n  'outline-gray-6',\n\n  'bg-white',\n  'dark:bg-gray-2',\n\n  'shadow-md',\n  'shadow-black/12',\n  'dark:shadow-none',\n\n  // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n  'text-gray-12',\n\n  'not-motion-reduced:origin-(--transform-origin)',\n  'not-motion-reduced:transition-[scale,opacity]',\n  'not-motion-reduced:ease-enter',\n  'not-motion-reduced:duration-150',\n\n  'not-motion-reduced:data-starting-style:scale-95',\n  'not-motion-reduced:data-ending-style:scale-95',\n  'not-motion-reduced:data-ending-style:ease-exit',\n  'not-motion-reduced:data-ending-style:duration-100',\n  'data-starting-style:opacity-0',\n  'data-ending-style:opacity-0',\n]);\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,4BAA4B,IAAI;CAC3C;CAEA;CACA;CAEA;CACA;CAGA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAGA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/components/collections/autocomplete/autocomplete-separator.d.ts

@@ -5,8 +5,7 @@ export type AutocompleteSeparatorState = Autocomplete.Separator.State;
 /**
  * Linha entre itens ou grupos.
  *
- * Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças (tabela no
- * README de `collections`).
+ * Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças.
  */
 export declare const AutocompleteSeparator: {
   (props: AutocompleteSeparatorProps): import("react").JSX.Element;

package/dist/components/collections/autocomplete/autocomplete-separator.js

@@ -5,8 +5,7 @@ import { Autocomplete } from "@base-ui/react/autocomplete";
 /**
 * Linha entre itens ou grupos.
 *
-* Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças (tabela no
-* README de `collections`).
+* Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças.
 */
 const AutocompleteSeparator = (props) => {
 	const { className, ...rest } = props;

package/dist/components/collections/autocomplete/autocomplete-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-separator.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-separator.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteSeparatorProps = BaseAutocomplete.Separator.Props;\n\nexport type AutocompleteSeparatorState = BaseAutocomplete.Separator.State;\n\n/**\n * Linha entre itens ou grupos.\n *\n * Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças (tabela no\n * README de `collections`).\n */\nexport const AutocompleteSeparator = (props: AutocompleteSeparatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Separator\n      data-component=\"Autocomplete.Separator\"\n      className={mergeStateClassNames(\n        [\n          'h-px',\n\n          'my-1',\n          'mx-2',\n\n          'bg-gray-6',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteSeparator.displayName = 'Autocomplete.Separator';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,WAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,sBAAsB,cAAc"}
+{"version":3,"file":"autocomplete-separator.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/autocomplete/autocomplete-separator.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AutocompleteSeparatorProps = BaseAutocomplete.Separator.Props;\n\nexport type AutocompleteSeparatorState = BaseAutocomplete.Separator.State;\n\n/**\n * Linha entre itens ou grupos.\n *\n * Cópia de `SelectSeparator`, a origem do separador das listas em popup, sem diferenças.\n */\nexport const AutocompleteSeparator = (props: AutocompleteSeparatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Separator\n      data-component=\"Autocomplete.Separator\"\n      className={mergeStateClassNames(\n        [\n          'h-px',\n\n          'my-1',\n          'mx-2',\n\n          'bg-gray-6',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAutocompleteSeparator.displayName = 'Autocomplete.Separator';\n"],"mappings":";;;;;;;;;AAYA,MAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,WAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,sBAAsB,cAAc"}

package/dist/components/collections/command/command-collection.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-collection.d.ts
+export type CommandCollectionProps = Autocomplete.Collection.Props;
+export type CommandCollectionState = Autocomplete.Collection.State;
+/**
+ * Renderiza os itens filtrados de um grupo. Necessário com `items` agrupados: sem ele, o grupo
+ * não filtra os próprios itens. Não renderiza elemento.
+ */
+export declare const CommandCollection: {
+  (props: CommandCollectionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-collection.d.ts.map

package/dist/components/collections/command/command-collection.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-collection.tsx
+/**
+* Renderiza os itens filtrados de um grupo. Necessário com `items` agrupados: sem ele, o grupo
+* não filtra os próprios itens. Não renderiza elemento.
+*/
+const CommandCollection = (props) => {
+	return /* @__PURE__ */ jsx(Autocomplete.Collection, { ...props });
+};
+CommandCollection.displayName = "Command.Collection";
+//#endregion
+export { CommandCollection };
+
+//# sourceMappingURL=command-collection.js.map

package/dist/components/collections/command/command-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-collection.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-collection.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\n\nexport type CommandCollectionProps = BaseAutocomplete.Collection.Props;\n\nexport type CommandCollectionState = BaseAutocomplete.Collection.State;\n\n/**\n * Renderiza os itens filtrados de um grupo. Necessário com `items` agrupados: sem ele, o grupo\n * não filtra os próprios itens. Não renderiza elemento.\n */\nexport const CommandCollection = (props: CommandCollectionProps) => {\n  return <BaseAutocomplete.Collection {...props} />;\n};\n\nCommandCollection.displayName = 'Command.Collection';\n"],"mappings":";;;;;;;AAUA,MAAa,qBAAqB,UAAkC;CAClE,OAAO,oBAACA,aAAiB,YAAlB,EAA6B,GAAI,MAAQ,CAAA;AAClD;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/command/command-empty.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-empty.d.ts
+export type CommandEmptyProps = Autocomplete.Empty.Props;
+export type CommandEmptyState = Autocomplete.Empty.State;
+/**
+ * Mensagem de "nenhum resultado": mostra os filhos só com a lista vazia, e a anuncia ao leitor de
+ * tela. Exige `items` no `Command.Root`. O texto vem do app.
+ */
+export declare const CommandEmpty: {
+  (props: CommandEmptyProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-empty.d.ts.map

package/dist/components/collections/command/command-empty.js

@@ -0,0 +1,28 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-empty.tsx
+/**
+* Mensagem de "nenhum resultado": mostra os filhos só com a lista vazia, e a anuncia ao leitor de
+* tela. Exige `items` no `Command.Root`. O texto vem do app.
+*/
+const CommandEmpty = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Empty, {
+		"data-component": "Command.Empty",
+		className: mergeStateClassNames([
+			"px-3",
+			"py-6",
+			"text-center",
+			"text-gray-11",
+			"text-sm",
+			"empty:p-0"
+		], className),
+		...rest
+	});
+};
+CommandEmpty.displayName = "Command.Empty";
+//#endregion
+export { CommandEmpty };
+
+//# sourceMappingURL=command-empty.js.map

package/dist/components/collections/command/command-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-empty.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-empty.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type CommandEmptyProps = BaseAutocomplete.Empty.Props;\n\nexport type CommandEmptyState = BaseAutocomplete.Empty.State;\n\n/**\n * Mensagem de \"nenhum resultado\": mostra os filhos só com a lista vazia, e a anuncia ao leitor de\n * tela. Exige `items` no `Command.Root`. O texto vem do app.\n */\nexport const CommandEmpty = (props: CommandEmptyProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Empty\n      data-component=\"Command.Empty\"\n      className={mergeStateClassNames(\n        [\n          'px-3',\n          'py-6',\n\n          'text-center',\n          'text-gray-11',\n          'text-sm',\n          'empty:p-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCommandEmpty.displayName = 'Command.Empty';\n"],"mappings":";;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/collections/command/command-footer.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/command/command-footer.d.ts
+export type CommandFooterProps = useRender.ComponentProps<'div'>;
+/**
+ * Rodapé da paleta, com um separador em cima, para as dicas de teclado (`Kbd`) e outras ações.
+ */
+export declare const CommandFooter: {
+  (props: CommandFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-footer.d.ts.map

package/dist/components/collections/command/command-footer.js

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/collections/command/command-footer.tsx
+/**
+* Rodapé da paleta, com um separador em cima, para as dicas de teclado (`Kbd`) e outras ações.
+*/
+const CommandFooter = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Command.Footer",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-3",
+			"px-3",
+			"py-2",
+			"border-t",
+			"border-gray-6",
+			"text-gray-11",
+			"text-xs"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CommandFooter.displayName = "Command.Footer";
+//#endregion
+export { CommandFooter };
+
+//# sourceMappingURL=command-footer.js.map

package/dist/components/collections/command/command-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-footer.js","names":[],"sources":["../../../../src/components/collections/command/command-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CommandFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Rodapé da paleta, com um separador em cima, para as dicas de teclado (`Kbd`) e outras ações.\n */\nexport const CommandFooter = (props: CommandFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Command.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'gap-3',\n\n        'px-3',\n        'py-2',\n\n        'border-t',\n        'border-gray-6',\n\n        'text-gray-11',\n        'text-xs',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCommandFooter.displayName = 'Command.Footer';\n"],"mappings":";;;;;;AAQA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/components/collections/command/command-group-label.d.ts

@@ -0,0 +1,15 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-group-label.d.ts
+export type CommandGroupLabelProps = Autocomplete.GroupLabel.Props;
+export type CommandGroupLabelState = Autocomplete.GroupLabel.State;
+/**
+ * Rótulo do grupo. Cópia de `AutocompleteGroupLabel` no `size` `md`, a mesma tipografia e o mesmo
+ * recuo dos itens, sem o `sticky`: o Command não tem fundo próprio para cobrir os itens que rolam
+ * por baixo do rótulo.
+ */
+export declare const CommandGroupLabel: {
+  (props: CommandGroupLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-group-label.d.ts.map

package/dist/components/collections/command/command-group-label.js

@@ -0,0 +1,31 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-group-label.tsx
+/**
+* Rótulo do grupo. Cópia de `AutocompleteGroupLabel` no `size` `md`, a mesma tipografia e o mesmo
+* recuo dos itens, sem o `sticky`: o Command não tem fundo próprio para cobrir os itens que rolam
+* por baixo do rótulo.
+*/
+const CommandGroupLabel = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+		"data-component": "Command.GroupLabel",
+		className: mergeStateClassNames([
+			"px-3",
+			"pt-2",
+			"pb-1",
+			"text-gray-11",
+			"font-medium",
+			"uppercase",
+			"tracking-wider",
+			"text-[0.6875rem]"
+		], className),
+		...rest
+	});
+};
+CommandGroupLabel.displayName = "Command.GroupLabel";
+//#endregion
+export { CommandGroupLabel };
+
+//# sourceMappingURL=command-group-label.js.map

package/dist/components/collections/command/command-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-label.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-group-label.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type CommandGroupLabelProps = BaseAutocomplete.GroupLabel.Props;\n\nexport type CommandGroupLabelState = BaseAutocomplete.GroupLabel.State;\n\n/**\n * Rótulo do grupo. Cópia de `AutocompleteGroupLabel` no `size` `md`, a mesma tipografia e o mesmo\n * recuo dos itens, sem o `sticky`: o Command não tem fundo próprio para cobrir os itens que rolam\n * por baixo do rótulo.\n */\nexport const CommandGroupLabel = (props: CommandGroupLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.GroupLabel\n      data-component=\"Command.GroupLabel\"\n      className={mergeStateClassNames(\n        [\n          'px-3',\n          'pt-2',\n          'pb-1',\n\n          'text-gray-11',\n          'font-medium',\n          'uppercase',\n          'tracking-wider',\n          'text-[0.6875rem]', // 11px\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCommandGroupLabel.displayName = 'Command.GroupLabel';\n"],"mappings":";;;;;;;;;AAYA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,YAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

package/dist/components/collections/command/command-group.d.ts

@@ -0,0 +1,15 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-group.d.ts
+export type CommandGroupProps = Autocomplete.Group.Props;
+export type CommandGroupState = Autocomplete.Group.State;
+/**
+ * Agrupa itens sob um `Command.GroupLabel`. Com `items` agrupados no `Command.Root`, os filhos da
+ * `Command.List` são uma função que recebe cada grupo. Um grupo sem itens depois do filtro sai do
+ * DOM.
+ */
+export declare const CommandGroup: {
+  (props: CommandGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-group.d.ts.map

package/dist/components/collections/command/command-group.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-group.tsx
+/**
+* Agrupa itens sob um `Command.GroupLabel`. Com `items` agrupados no `Command.Root`, os filhos da
+* `Command.List` são uma função que recebe cada grupo. Um grupo sem itens depois do filtro sai do
+* DOM.
+*/
+const CommandGroup = (props) => {
+	return /* @__PURE__ */ jsx(Autocomplete.Group, {
+		"data-component": "Command.Group",
+		...props
+	});
+};
+CommandGroup.displayName = "Command.Group";
+//#endregion
+export { CommandGroup };
+
+//# sourceMappingURL=command-group.js.map

package/dist/components/collections/command/command-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-group.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\n\nexport type CommandGroupProps = BaseAutocomplete.Group.Props;\n\nexport type CommandGroupState = BaseAutocomplete.Group.State;\n\n/**\n * Agrupa itens sob um `Command.GroupLabel`. Com `items` agrupados no `Command.Root`, os filhos da\n * `Command.List` são uma função que recebe cada grupo. Um grupo sem itens depois do filtro sai do\n * DOM.\n */\nexport const CommandGroup = (props: CommandGroupProps) => {\n  return (\n    <BaseAutocomplete.Group\n      data-component=\"Command.Group\"\n      {...props}\n    />\n  );\n};\n\nCommandGroup.displayName = 'Command.Group';\n"],"mappings":";;;;;;;;AAWA,MAAa,gBAAgB,UAA6B;CACxD,OACE,oBAACA,aAAiB,OAAlB;EACE,kBAAe;EACf,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/collections/command/command-input.d.ts

@@ -0,0 +1,20 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-input.d.ts
+export type CommandInputProps = Autocomplete.Input.Props;
+export type CommandInputState = Autocomplete.Input.State;
+/**
+ * Campo de busca da paleta, com a lupa à esquerda e um separador embaixo. Não tem borda própria
+ * nem `size`: a moldura é de quem envolve o `Command.Root`. O nome acessível vem de `aria-label`.
+ *
+ * Não pega o foco sozinho: solto na página, passe `autoFocus`; dentro de um `Dialog`, use o
+ * `initialFocus` dele. As props e a `className` vão para o `input`.
+ *
+ * `Ctrl+Enter` e `Cmd+Enter` disparam o clique no item ativo com o mesmo modificador no evento,
+ * para o `onClick` do item abrir em outra aba.
+ */
+export declare const CommandInput: {
+  (props: CommandInputProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-input.d.ts.map

package/dist/components/collections/command/command-input.js

@@ -0,0 +1,75 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-input.tsx
+/**
+* Campo de busca da paleta, com a lupa à esquerda e um separador embaixo. Não tem borda própria
+* nem `size`: a moldura é de quem envolve o `Command.Root`. O nome acessível vem de `aria-label`.
+*
+* Não pega o foco sozinho: solto na página, passe `autoFocus`; dentro de um `Dialog`, use o
+* `initialFocus` dele. As props e a `className` vão para o `input`.
+*
+* `Ctrl+Enter` e `Cmd+Enter` disparam o clique no item ativo com o mesmo modificador no evento,
+* para o `onClick` do item abrir em outra aba.
+*/
+const CommandInput = (props) => {
+	const { className, onKeyDown, ...rest } = props;
+	/**
+	* O Base UI só aciona o item ativo com `Enter` sem modificador. Com `Ctrl` ou `Cmd`, o campo
+	* dispara o clique no item ativo com o mesmo modificador; sem isso, o atalho não faz nada.
+	*/
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Enter" || !(event.ctrlKey || event.metaKey) || event.nativeEvent.isComposing) return;
+		const activeItem = event.currentTarget.closest("[data-component='Command.Root']")?.querySelector("[role=\"option\"][data-highlighted]");
+		if (!activeItem) return;
+		event.preventDefault();
+		activeItem.dispatchEvent(new MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey
+		}));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-2",
+			"px-3",
+			"border-b",
+			"border-gray-6",
+			"text-gray-11"
+		]),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			render: /* @__PURE__ */ jsx(MagnifyingGlassIcon, {}),
+			className: "size-4"
+		}), /* @__PURE__ */ jsx(Autocomplete.Input, {
+			"data-component": "Command.Input",
+			className: mergeStateClassNames([
+				"h-10",
+				"w-full",
+				"min-w-0",
+				"bg-transparent",
+				"outline-none",
+				"font-normal",
+				"text-gray-12",
+				"text-sm",
+				"any-pointer-coarse:text-base",
+				"placeholder:text-gray-11/80"
+			], className),
+			...rest,
+			onKeyDown: handleKeyDown
+		})]
+	});
+};
+CommandInput.displayName = "Command.Input";
+//#endregion
+export { CommandInput };
+
+//# sourceMappingURL=command-input.js.map

package/dist/components/collections/command/command-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-input.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-input.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames, mergeTwClassNames } from '#utils';\n\nexport type CommandInputProps = BaseAutocomplete.Input.Props;\n\nexport type CommandInputState = BaseAutocomplete.Input.State;\n\n/**\n * Campo de busca da paleta, com a lupa à esquerda e um separador embaixo. Não tem borda própria\n * nem `size`: a moldura é de quem envolve o `Command.Root`. O nome acessível vem de `aria-label`.\n *\n * Não pega o foco sozinho: solto na página, passe `autoFocus`; dentro de um `Dialog`, use o\n * `initialFocus` dele. As props e a `className` vão para o `input`.\n *\n * `Ctrl+Enter` e `Cmd+Enter` disparam o clique no item ativo com o mesmo modificador no evento,\n * para o `onClick` do item abrir em outra aba.\n */\nexport const CommandInput = (props: CommandInputProps) => {\n  const { className, onKeyDown, ...rest } = props;\n\n  /**\n   * O Base UI só aciona o item ativo com `Enter` sem modificador. Com `Ctrl` ou `Cmd`, o campo\n   * dispara o clique no item ativo com o mesmo modificador; sem isso, o atalho não faz nada.\n   */\n  const handleKeyDown: NonNullable<CommandInputProps['onKeyDown']> = (\n    event,\n  ) => {\n    onKeyDown?.(event);\n\n    if (\n      event.defaultPrevented ||\n      event.key !== 'Enter' ||\n      !(event.ctrlKey || event.metaKey) ||\n      event.nativeEvent.isComposing\n    ) {\n      return;\n    }\n\n    const activeItem = event.currentTarget\n      .closest(\"[data-component='Command.Root']\")\n      ?.querySelector<HTMLElement>('[role=\"option\"][data-highlighted]');\n\n    if (!activeItem) {\n      return;\n    }\n\n    event.preventDefault();\n\n    activeItem.dispatchEvent(\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n        ctrlKey: event.ctrlKey,\n        metaKey: event.metaKey,\n        shiftKey: event.shiftKey,\n        altKey: event.altKey,\n      }),\n    );\n  };\n\n  return (\n    <div\n      className={mergeTwClassNames([\n        'flex',\n        'items-center',\n        'gap-2',\n\n        'px-3',\n\n        'border-b',\n        'border-gray-6',\n\n        'text-gray-11',\n      ])}\n    >\n      <Icon\n        render={<MagnifyingGlassIcon />}\n        className=\"size-4\"\n      />\n\n      <BaseAutocomplete.Input\n        data-component=\"Command.Input\"\n        className={mergeStateClassNames(\n          [\n            'h-10',\n            'w-full',\n            'min-w-0',\n\n            'bg-transparent',\n            'outline-none',\n\n            'font-normal',\n            'text-gray-12',\n            'text-sm',\n            // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n            'any-pointer-coarse:text-base',\n\n            'placeholder:text-gray-11/80',\n          ],\n          className,\n        )}\n        {...rest}\n        onKeyDown={handleKeyDown}\n      />\n    </div>\n  );\n};\n\nCommandInput.displayName = 'Command.Input';\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;;;;;CAM1C,MAAM,iBACJ,UACG;EACH,YAAY,KAAK;EAEjB,IACE,MAAM,oBACN,MAAM,QAAQ,WACd,EAAE,MAAM,WAAW,MAAM,YACzB,MAAM,YAAY,aAElB;EAGF,MAAM,aAAa,MAAM,cACtB,QAAQ,iCAAiC,CAAC,EACzC,cAA2B,qCAAmC;EAElE,IAAI,CAAC,YACH;EAGF,MAAM,eAAe;EAErB,WAAW,cACT,IAAI,WAAW,SAAS;GACtB,SAAS;GACT,YAAY;GACZ,SAAS,MAAM;GACf,SAAS,MAAM;GACf,UAAU,MAAM;GAChB,QAAQ,MAAM;EAChB,CAAC,CACH;CACF;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GAEA;GAEA;GACA;GAEA;EACF,CAAC;EAZH,UAAA,CAcE,oBAAC,MAAD;GACE,QAAQ,oBAAC,qBAAD,CAAsB,CAAA;GAC9B,WAAU;EACX,CAAA,GAED,oBAACA,aAAiB,OAAlB;GACE,kBAAe;GACf,WAAW,qBACT;IACE;IACA;IACA;IAEA;IACA;IAEA;IACA;IACA;IAEA;IAEA;GACF,GACA,SACF;GACA,GAAI;GACJ,WAAW;EACZ,CAAA,CACE;;AAET;AAEA,aAAa,cAAc"}

package/dist/components/collections/command/command-item-text.d.ts

@@ -0,0 +1,19 @@
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/collections/command/command-item-text.d.ts
+export type CommandItemTextProps = MergeOverride<useRender.ComponentProps<'span'>, {
+  /**
+   * Texto do item, onde o trecho que casa com a busca é destacado.
+   */
+  children: string;
+}>;
+/**
+ * Texto do item, com o trecho que casa com a busca destacado (`Highlight`), sem diferenciar
+ * acento nem caixa. Lê o texto da busca do `Command.Root`.
+ */
+export declare const CommandItemText: {
+  (props: CommandItemTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-item-text.d.ts.map

package/dist/components/collections/command/command-item-text.js

@@ -0,0 +1,32 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Highlight } from "../../typography/highlight/highlight.js";
+import { useCommandContext } from "./use-command-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collections/command/command-item-text.tsx
+/**
+* Texto do item, com o trecho que casa com a busca destacado (`Highlight`), sem diferenciar
+* acento nem caixa. Lê o texto da busca do `Command.Root`.
+*/
+const CommandItemText = (props) => {
+	const { render, className, children, ...rest } = props;
+	const { query } = useCommandContext();
+	const baseProps = {
+		"data-component": "Command.ItemText",
+		className: mergeTwClassNames(["min-w-0", "truncate"], className),
+		children: /* @__PURE__ */ jsx(Highlight, {
+			query,
+			children
+		})
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CommandItemText.displayName = "Command.ItemText";
+//#endregion
+export { CommandItemText };
+
+//# sourceMappingURL=command-item-text.js.map

package/dist/components/collections/command/command-item-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-item-text.js","names":[],"sources":["../../../../src/components/collections/command/command-item-text.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/ts-utils';\nimport { Highlight } from '#components/typography/highlight';\nimport { mergeTwClassNames } from '#utils';\nimport { useCommandContext } from './use-command-context';\n\nexport type CommandItemTextProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  {\n    /**\n     * Texto do item, onde o trecho que casa com a busca é destacado.\n     */\n    children: string;\n  }\n>;\n\n/**\n * Texto do item, com o trecho que casa com a busca destacado (`Highlight`), sem diferenciar\n * acento nem caixa. Lê o texto da busca do `Command.Root`.\n */\nexport const CommandItemText = (props: CommandItemTextProps) => {\n  const { render, className, children, ...rest } = props;\n\n  const { query } = useCommandContext();\n\n  const baseProps = {\n    'data-component': 'Command.ItemText',\n    className: mergeTwClassNames(['min-w-0', 'truncate'], className),\n    children: <Highlight query={query}>{children}</Highlight>,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCommandItemText.displayName = 'Command.ItemText';\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS;CAEjD,MAAM,EAAE,UAAU,kBAAkB;CAEpC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,WAAW,UAAU,GAAG,SAAS;EAC/D,UAAU,oBAAC,WAAD;GAAkB;GAAQ;EAAoB,CAAA;CAC1D;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/collections/command/command-item-variants.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/collections/command/command-item-variants.d.ts
+/**
+ * Cópia de `autocompleteItemVariants`, que copia `selectItemVariants`, a origem do item das
+ * listas em popup, onde o realce está explicado. As diferenças:
+ * - sem `size`: vale o `md` do `Autocomplete`, com o texto em `text-sm`;
+ * - `items-center`, porque o item combina ícone, texto, descrição e atalho em linha, e o
+ *   `ms-auto` de um atalho o leva ao fim;
+ * - declara `text-gray-12`, porque o Command não tem um popup que defina a cor do texto.
+ */
+export declare const commandItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+//# sourceMappingURL=command-item-variants.d.ts.map

package/dist/components/collections/command/command-item-variants.js

@@ -0,0 +1,39 @@
+import { cva } from "class-variance-authority";
+//#region src/components/collections/command/command-item-variants.ts
+/**
+* Cópia de `autocompleteItemVariants`, que copia `selectItemVariants`, a origem do item das
+* listas em popup, onde o realce está explicado. As diferenças:
+* - sem `size`: vale o `md` do `Autocomplete`, com o texto em `text-sm`;
+* - `items-center`, porque o item combina ícone, texto, descrição e atalho em linha, e o
+*   `ms-auto` de um atalho o leva ao fim;
+* - declara `text-gray-12`, porque o Command não tem um popup que defina a cor do texto.
+*/
+const commandItemVariants = cva([
+	"flex",
+	"items-center",
+	"relative",
+	"rounded",
+	"px-3",
+	"gap-2",
+	"py-1.75",
+	"pointer-coarse:py-3",
+	"cursor-default",
+	"select-none",
+	"outline-none",
+	"text-gray-12",
+	"text-sm",
+	"data-disabled:pointer-events-none",
+	"data-disabled:opacity-50",
+	"data-highlighted:z-0",
+	"data-highlighted:before:absolute",
+	"data-highlighted:before:inset-x-1",
+	"data-highlighted:before:inset-y-0",
+	"data-highlighted:before:z-[-1]",
+	"data-highlighted:before:rounded",
+	"data-highlighted:before:content-[\"\"]",
+	"data-highlighted:before:bg-gray-4"
+]);
+//#endregion
+export { commandItemVariants };
+
+//# sourceMappingURL=command-item-variants.js.map

package/dist/components/collections/command/command-item-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-item-variants.js","names":[],"sources":["../../../../src/components/collections/command/command-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Cópia de `autocompleteItemVariants`, que copia `selectItemVariants`, a origem do item das\n * listas em popup, onde o realce está explicado. As diferenças:\n * - sem `size`: vale o `md` do `Autocomplete`, com o texto em `text-sm`;\n * - `items-center`, porque o item combina ícone, texto, descrição e atalho em linha, e o\n *   `ms-auto` de um atalho o leva ao fim;\n * - declara `text-gray-12`, porque o Command não tem um popup que defina a cor do texto.\n */\nexport const commandItemVariants = cva([\n  'flex',\n  'items-center', // Ícone, texto e atalho alinhados ao centro da linha\n\n  'relative',\n\n  'rounded',\n\n  'px-3',\n  'gap-2',\n  'py-1.75',\n  'pointer-coarse:py-3',\n\n  'cursor-default',\n  'select-none',\n  'outline-none',\n\n  'text-gray-12',\n  'text-sm',\n\n  'data-disabled:pointer-events-none',\n  'data-disabled:opacity-50',\n\n  'data-highlighted:z-0',\n  'data-highlighted:before:absolute',\n  'data-highlighted:before:inset-x-1',\n  'data-highlighted:before:inset-y-0',\n  'data-highlighted:before:z-[-1]',\n  'data-highlighted:before:rounded',\n  'data-highlighted:before:content-[\"\"]',\n  'data-highlighted:before:bg-gray-4',\n]);\n"],"mappings":";;;;;;;;;;AAUA,MAAa,sBAAsB,IAAI;CACrC;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/components/collections/command/command-item.d.ts

@@ -0,0 +1,17 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-item.d.ts
+export type CommandItemProps = Autocomplete.Item.Props;
+export type CommandItemState = Autocomplete.Item.State;
+/**
+ * Comando da lista. A ação vai no `onClick`, que o `Enter` também dispara no item ativo; escolher
+ * não preenche o campo. O ativo, sob o ponteiro ou o teclado, vem do `data-highlighted`.
+ *
+ * Os filhos são livres: ícone, `Command.ItemText`, uma descrição e um atalho (`ms-auto` o leva
+ * ao fim). Um item que é objeto vai em `value`, com `keywords` opcional para a busca.
+ */
+export declare const CommandItem: {
+  (props: CommandItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-item.d.ts.map

package/dist/components/collections/command/command-item.js

@@ -0,0 +1,25 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { commandItemVariants } from "./command-item-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-item.tsx
+/**
+* Comando da lista. A ação vai no `onClick`, que o `Enter` também dispara no item ativo; escolher
+* não preenche o campo. O ativo, sob o ponteiro ou o teclado, vem do `data-highlighted`.
+*
+* Os filhos são livres: ícone, `Command.ItemText`, uma descrição e um atalho (`ms-auto` o leva
+* ao fim). Um item que é objeto vai em `value`, com `keywords` opcional para a busca.
+*/
+const CommandItem = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.Item, {
+		"data-component": "Command.Item",
+		className: mergeStateClassNames(commandItemVariants(), className),
+		...rest
+	});
+};
+CommandItem.displayName = "Command.Item";
+//#endregion
+export { CommandItem };
+
+//# sourceMappingURL=command-item.js.map

package/dist/components/collections/command/command-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-item.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-item.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\nimport { commandItemVariants } from './command-item-variants';\n\nexport type CommandItemProps = BaseAutocomplete.Item.Props;\n\nexport type CommandItemState = BaseAutocomplete.Item.State;\n\n/**\n * Comando da lista. A ação vai no `onClick`, que o `Enter` também dispara no item ativo; escolher\n * não preenche o campo. O ativo, sob o ponteiro ou o teclado, vem do `data-highlighted`.\n *\n * Os filhos são livres: ícone, `Command.ItemText`, uma descrição e um atalho (`ms-auto` o leva\n * ao fim). Um item que é objeto vai em `value`, com `keywords` opcional para a busca.\n */\nexport const CommandItem = (props: CommandItemProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.Item\n      data-component=\"Command.Item\"\n      className={mergeStateClassNames(commandItemVariants(), className)}\n      {...rest}\n    />\n  );\n};\n\nCommandItem.displayName = 'Command.Item';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,MAAlB;EACE,kBAAe;EACf,WAAW,qBAAqB,oBAAoB,GAAG,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/collections/command/command-list.d.ts

@@ -0,0 +1,14 @@
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-list.d.ts
+export type CommandListProps = Autocomplete.List.Props;
+export type CommandListState = Autocomplete.List.State;
+/**
+ * Lista rolável dos itens, com altura máxima de `20rem` (troque pela `className`). Os filhos podem
+ * ser uma função, que recebe cada item filtrado. O item ativo rola para dentro da vista.
+ */
+export declare const CommandList: {
+  (props: CommandListProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=command-list.d.ts.map

package/dist/components/collections/command/command-list.js

@@ -0,0 +1,31 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/collections/command/command-list.tsx
+/**
+* Lista rolável dos itens, com altura máxima de `20rem` (troque pela `className`). Os filhos podem
+* ser uma função, que recebe cada item filtrado. O item ativo rola para dentro da vista.
+*/
+const CommandList = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Autocomplete.List, {
+		"data-component": "Command.List",
+		className: mergeStateClassNames([
+			"relative",
+			"min-h-0",
+			"max-h-80",
+			"scroll-py-1",
+			"py-1",
+			"data-empty:p-0",
+			"overflow-y-auto",
+			"overscroll-contain",
+			"outline-none"
+		], className),
+		...rest
+	});
+};
+CommandList.displayName = "Command.List";
+//#endregion
+export { CommandList };
+
+//# sourceMappingURL=command-list.js.map

package/dist/components/collections/command/command-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-list.js","names":["BaseAutocomplete"],"sources":["../../../../src/components/collections/command/command-list.tsx"],"sourcesContent":["import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';\nimport { mergeStateClassNames } from '#utils';\n\nexport type CommandListProps = BaseAutocomplete.List.Props;\n\nexport type CommandListState = BaseAutocomplete.List.State;\n\n/**\n * Lista rolável dos itens, com altura máxima de `20rem` (troque pela `className`). Os filhos podem\n * ser uma função, que recebe cada item filtrado. O item ativo rola para dentro da vista.\n */\nexport const CommandList = (props: CommandListProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAutocomplete.List\n      data-component=\"Command.List\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'min-h-0',\n          'max-h-80',\n\n          'scroll-py-1',\n          'py-1',\n          'data-empty:p-0',\n\n          'overflow-y-auto',\n          'overscroll-contain',\n          'outline-none',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCommandList.displayName = 'Command.List';\n"],"mappings":";;;;;;;;AAWA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,aAAiB,MAAlB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}