@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/buttons/clipboard-button/clipboard-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-button.d.ts","names":["Clipboard","Clipboard.UseClipboardProps"],"sources":["../../../../src/components/buttons/clipboard-button/clipboard-button.tsx"],"mappings":";;;;;;;YASY,uBAAuB,cACjC,KAAK,0BACLC;;;;;;;;;;;;;;;;;qBAqBW;GAA0B,OAAA,uCAAoB,IAAA"}

package/dist/components/buttons/clipboard-button/clipboard-button.js

@@ -0,0 +1,44 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { ClipboardIndicator } from "../../display/clipboard/clipboard-indicator.js";
+import { ClipboardRoot } from "../../display/clipboard/clipboard-root.js";
+import { ClipboardTrigger } from "../../display/clipboard/clipboard-trigger.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import * as ZagClipboard from "@zag-js/clipboard";
+//#region src/components/buttons/clipboard-button/clipboard-button.tsx
+const splitClipboardProps = createSplitProps();
+/**
+* Botão de ícone que copia `value` para a área de transferência e troca o ícone enquanto o
+* destaque de cópia dura. Aceita as opções do `Clipboard.Root` e as props do `IconButton`.
+*
+* No layout, se comporta como o próprio botão: `className` e posição em flex valem para ele. A
+* cópia é anunciada ao leitor de tela pelo `Clipboard.Root`, com o `triggerLabel` das
+* `translations`.
+*
+* @example
+* ```tsx
+* <ClipboardButton
+*   aria-label="Copiar link"
+*   value="https://exemplo.com.br"
+* />
+* ```
+*/
+const ClipboardButton = (props) => {
+	const [clipboardProps, iconButtonProps] = splitClipboardProps(props, ZagClipboard.props);
+	return /* @__PURE__ */ jsx(ClipboardRoot, {
+		className: mergeTwClassNames(["contents"]),
+		...clipboardProps,
+		children: /* @__PURE__ */ jsx(ClipboardTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "subtle",
+			colorScheme: "gray",
+			icon: /* @__PURE__ */ jsx(ClipboardIndicator, {}),
+			...iconButtonProps
+		}) })
+	});
+};
+ClipboardButton.displayName = "ClipboardButton";
+//#endregion
+export { ClipboardButton };
+
+//# sourceMappingURL=clipboard-button.js.map

package/dist/components/buttons/clipboard-button/clipboard-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-button.js","names":["Clipboard.Root","Clipboard.Trigger","Clipboard.Indicator"],"sources":["../../../../src/components/buttons/clipboard-button/clipboard-button.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport * as ZagClipboard from '@zag-js/clipboard';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\nimport { Clipboard } from '#components/display/clipboard';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ClipboardButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  Clipboard.UseClipboardProps\n>;\n\nconst splitClipboardProps = createSplitProps<Clipboard.UseClipboardProps>();\n\n/**\n * Botão de ícone que copia `value` para a área de transferência e troca o ícone enquanto o\n * destaque de cópia dura. Aceita as opções do `Clipboard.Root` e as props do `IconButton`.\n *\n * No layout, se comporta como o próprio botão: `className` e posição em flex valem para ele. A\n * cópia é anunciada ao leitor de tela pelo `Clipboard.Root`, com o `triggerLabel` das\n * `translations`.\n *\n * @example\n * ```tsx\n * <ClipboardButton\n *   aria-label=\"Copiar link\"\n *   value=\"https://exemplo.com.br\"\n * />\n * ```\n */\nexport const ClipboardButton = (props: ClipboardButtonProps) => {\n  const [clipboardProps, iconButtonProps] = splitClipboardProps(\n    props,\n    ZagClipboard.props,\n  );\n\n  return (\n    <Clipboard.Root\n      // Sem caixa própria: o botão é que ocupa o lugar no layout, e o `className` de quem usa\n      // (que vai para o botão) vale no flex do contêiner.\n      className={mergeTwClassNames(['contents'])}\n      {...clipboardProps}\n    >\n      <Clipboard.Trigger\n        render={\n          <IconButton\n            variant=\"subtle\"\n            colorScheme=\"gray\"\n            icon={<Clipboard.Indicator />}\n            {...iconButtonProps}\n          />\n        }\n      />\n    </Clipboard.Root>\n  );\n};\n\nClipboardButton.displayName = 'ClipboardButton';\n"],"mappings":";;;;;;;;;AAcA,MAAM,sBAAsB,iBAA8C;;;;;;;;;;;;;;;;;AAkB1E,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,CAAC,gBAAgB,mBAAmB,oBACxC,OACA,aAAa,KACf;CAEA,OACE,oBAACA,eAAD;EAGE,WAAW,kBAAkB,CAAC,UAAU,CAAC;EACzC,GAAI;EAEJ,UAAA,oBAACC,kBAAD,EACE,QACE,oBAAC,YAAD;GACE,SAAQ;GACR,aAAY;GACZ,MAAM,oBAACC,oBAAD,CAAsB,CAAA;GAC5B,GAAI;EACL,CAAA,EAEJ,CAAA;CACa,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}

package/dist/components/buttons/clipboard-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ClipboardButton, ClipboardButtonProps } from "./clipboard-button.js";
+export { ClipboardButton, type ClipboardButtonProps };

package/dist/components/buttons/clipboard-button/index.js

@@ -0,0 +1,2 @@
+import { ClipboardButton } from "./clipboard-button.js";
+export { ClipboardButton };

package/dist/components/buttons/close-button/close-button.d.ts

@@ -0,0 +1,29 @@
+import { IconButtonProps } from "../icon-button/icon-button.js";
+import "../icon-button/index.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/buttons/close-button/close-button.d.ts
+export type CloseButtonProps = MergeOverride<Omit<IconButtonProps, 'icon'>, {
+  /**
+   * Nome do botão para o leitor de tela.
+   *
+   * @default 'Fechar'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * `IconButton` com X, para fechar um dialog, um drawer ou um aviso. Sai `ghost` e com o nome
+ * "Fechar"; as outras props do `IconButton` valem igual.
+ *
+ * Não fecha nada sozinho: entra no `render` da parte que fecha.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Close render={<CloseButton />} />
+ * ```
+ */
+export declare const CloseButton: {
+  (props: CloseButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=close-button.d.ts.map

package/dist/components/buttons/close-button/close-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-button.d.ts","names":[],"sources":["../../../../src/components/buttons/close-button/close-button.tsx"],"mappings":";;;;YAOY,mBAAmB,cAC7B,KAAK;;;;;;EAOH;;;;;;;;;;;;;qBAeS;GAAsB,OAAA,mCAAgB,IAAA"}

package/dist/components/buttons/close-button/close-button.js

@@ -0,0 +1,30 @@
+import { IconButton } from "../icon-button/icon-button.js";
+import { jsx } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+//#region src/components/buttons/close-button/close-button.tsx
+/**
+* `IconButton` com X, para fechar um dialog, um drawer ou um aviso. Sai `ghost` e com o nome
+* "Fechar"; as outras props do `IconButton` valem igual.
+*
+* Não fecha nada sozinho: entra no `render` da parte que fecha.
+*
+* @example
+* ```tsx
+* <Dialog.Close render={<CloseButton />} />
+* ```
+*/
+const CloseButton = (props) => {
+	const { "aria-label": ariaLabel = "Fechar", ...rest } = props;
+	return /* @__PURE__ */ jsx(IconButton, {
+		"data-component": "CloseButton",
+		variant: "ghost",
+		"aria-label": ariaLabel,
+		icon: /* @__PURE__ */ jsx(XIcon, {}),
+		...rest
+	});
+};
+CloseButton.displayName = "CloseButton";
+//#endregion
+export { CloseButton };
+
+//# sourceMappingURL=close-button.js.map

package/dist/components/buttons/close-button/close-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/buttons/close-button/close-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/utils';\nimport { XIcon } from '@phosphor-icons/react';\nimport {\n  IconButton,\n  type IconButtonProps,\n} from '#components/buttons/icon-button';\n\nexport type CloseButtonProps = MergeOverride<\n  Omit<IconButtonProps, 'icon'>,\n  {\n    /**\n     * Nome do botão para o leitor de tela.\n     *\n     * @default 'Fechar'\n     */\n    'aria-label'?: string;\n  }\n>;\n\n/**\n * `IconButton` com X, para fechar um dialog, um drawer ou um aviso. Sai `ghost` e com o nome\n * \"Fechar\"; as outras props do `IconButton` valem igual.\n *\n * Não fecha nada sozinho: entra no `render` da parte que fecha.\n *\n * @example\n * ```tsx\n * <Dialog.Close render={<CloseButton />} />\n * ```\n */\nexport const CloseButton = (props: CloseButtonProps) => {\n  const { 'aria-label': ariaLabel = 'Fechar', ...rest } = props;\n\n  return (\n    <IconButton\n      data-component=\"CloseButton\"\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n      icon={<XIcon />}\n      {...rest}\n    />\n  );\n};\n\nCloseButton.displayName = 'CloseButton';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,cAAc,YAAY,UAAU,GAAG,SAAS;CAExD,OACE,oBAAC,YAAD;EACE,kBAAe;EACf,SAAQ;EACR,cAAY;EACZ,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc"}

package/dist/components/buttons/close-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CloseButton, CloseButtonProps } from "./close-button.js";
+export { CloseButton, type CloseButtonProps };

package/dist/components/buttons/close-button/index.js

@@ -0,0 +1,2 @@
+import { CloseButton } from "./close-button.js";
+export { CloseButton };

package/dist/components/buttons/icon-button/icon-button-variants.d.ts

@@ -0,0 +1,24 @@
+import { ButtonVariants } from "../button/button-variants.js";
+import "../button/index.js";
+//#region src/components/buttons/icon-button/icon-button-variants.d.ts
+export type IconButtonVariants = {
+  /**
+   * Deixa o botão redondo.
+   *
+   * @default false
+   */
+  round?: boolean;
+  /**
+   * Mesma escala do `Button`. No toque, o ícone cresce um pouco para compensar a falta do texto.
+   *
+   * @default 'sm'
+   */
+  size?: ButtonVariants['size'];
+};
+export declare const iconButtonDefaultVariants: Required<IconButtonVariants>;
+export declare const iconButtonVariants: (props?: ({
+  round?: boolean | null | undefined;
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=icon-button-variants.d.ts.map

package/dist/components/buttons/icon-button/icon-button-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-variants.d.ts","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button-variants.ts"],"mappings":";;;YAGY;;;;;;EAMV;;;;;;EAMA,OAAO;;qBAGI,2BAA2B,SAAS;qBAKpC,qBAAkB;;;6CAuB7B"}

package/dist/components/buttons/icon-button/icon-button-variants.js

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+//#region src/components/buttons/icon-button/icon-button-variants.ts
+const iconButtonDefaultVariants = {
+	round: false,
+	size: "sm"
+};
+const iconButtonVariants = cva(["p-0"], {
+	variants: {
+		round: {
+			true: ["rounded-full", "corner-round"],
+			false: []
+		},
+		size: {
+			"3xs": ["pointer-coarse:[&_svg]:size-3"],
+			"2xs": ["pointer-coarse:[&_svg]:size-4"],
+			xs: ["pointer-coarse:[&_svg]:size-4.5"],
+			sm: ["pointer-coarse:[&_svg]:size-4.5"],
+			md: ["pointer-coarse:[&_svg]:size-5.5"],
+			lg: ["pointer-coarse:[&_svg]:size-5.5"],
+			xl: ["pointer-coarse:[&_svg]:size-5.5"],
+			"2xl": ["pointer-coarse:[&_svg]:size-6.5"]
+		}
+	},
+	defaultVariants: {
+		round: iconButtonDefaultVariants.round,
+		size: iconButtonDefaultVariants.size
+	}
+});
+//#endregion
+export { iconButtonDefaultVariants, iconButtonVariants };
+
+//# sourceMappingURL=icon-button-variants.js.map

package/dist/components/buttons/icon-button/icon-button-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-variants.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ButtonVariants } from '#components/buttons/button';\n\nexport type IconButtonVariants = {\n  /**\n   * Deixa o botão redondo.\n   *\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Mesma escala do `Button`. No toque, o ícone cresce um pouco para compensar a falta do texto.\n   *\n   * @default 'sm'\n   */\n  size?: ButtonVariants['size'];\n};\n\nexport const iconButtonDefaultVariants: Required<IconButtonVariants> = {\n  round: false,\n  size: 'sm',\n};\n\nexport const iconButtonVariants = cva(['p-0'], {\n  variants: {\n    round: {\n      // O `Button` aplica `corner-squircle`, que deforma o `rounded-full`: o `corner-round`\n      // o substitui no merge e garante o círculo.\n      true: ['rounded-full', 'corner-round'],\n      false: [],\n    },\n    size: {\n      '3xs': ['pointer-coarse:[&_svg]:size-3'],\n      '2xs': ['pointer-coarse:[&_svg]:size-4'],\n      xs: ['pointer-coarse:[&_svg]:size-4.5'],\n      sm: ['pointer-coarse:[&_svg]:size-4.5'],\n      md: ['pointer-coarse:[&_svg]:size-5.5'],\n      lg: ['pointer-coarse:[&_svg]:size-5.5'],\n      xl: ['pointer-coarse:[&_svg]:size-5.5'],\n      '2xl': ['pointer-coarse:[&_svg]:size-6.5'],\n    },\n  },\n  defaultVariants: {\n    round: iconButtonDefaultVariants.round,\n    size: iconButtonDefaultVariants.size,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,4BAA0D;CACrE,OAAO;CACP,MAAM;AACR;AAEA,MAAa,qBAAqB,IAAI,CAAC,KAAK,GAAG;CAC7C,UAAU;EACR,OAAO;GAGL,MAAM,CAAC,gBAAgB,cAAc;GACrC,OAAO,CAAC;EACV;EACA,MAAM;GACJ,OAAO,CAAC,+BAA+B;GACvC,OAAO,CAAC,+BAA+B;GACvC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,IAAI,CAAC,iCAAiC;GACtC,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,OAAO,0BAA0B;EACjC,MAAM,0BAA0B;CAClC;AACF,CAAC"}

package/dist/components/buttons/icon-button/icon-button.d.ts

@@ -0,0 +1,39 @@
+import { IconProps } from "../../display/icon/icon.js";
+import "../../display/icon/index.js";
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { IconButtonVariants } from "./icon-button-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/buttons/icon-button/icon-button.d.ts
+export type IconButtonProps = MergeOverride<Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'>, IconButtonVariants & {
+  /**
+   * O que o botão faz ("Fechar", "Editar pedido"), não o nome do ícone. É o único nome do
+   * botão: o ícone sai do leitor de tela.
+   */
+  'aria-label': string;
+  /**
+   * Ícone do botão, no tamanho definido pelo `size`.
+   */
+  icon: NonNullable<IconProps['render']>;
+}>;
+/**
+ * Botão quadrado só com ícone.
+ *
+ * O ícone sai do leitor de tela (o `Icon` é decorativo por padrão), então o tipo exige um
+ * `aria-label` que diga o que o botão faz. Quem enxerga vê só o ícone: em barras com
+ * vários botões, envolva cada um num tooltip com o mesmo texto.
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   aria-label="Fechar"
+ *   icon={<XIcon />}
+ * />
+ * ```
+ */
+export declare const IconButton: {
+  (props: IconButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/buttons/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button.tsx"],"mappings":";;;;;;;YASY,kBAAkB,cAC5B,KAAK,oDACL;;;;;EAKE;;;;EAIA,MAAM,YAAY;;;;;;;;;;;;;;;;;qBAqBT;GAAqB,OAAA,kCAAe,IAAA"}

package/dist/components/buttons/icon-button/icon-button.js

@@ -0,0 +1,39 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { Button } from "../button/button.js";
+import { iconButtonVariants } from "./icon-button-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/buttons/icon-button/icon-button.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Botão quadrado só com ícone.
+*
+* O ícone sai do leitor de tela (o `Icon` é decorativo por padrão), então o tipo exige um
+* `aria-label` que diga o que o botão faz. Quem enxerga vê só o ícone: em barras com
+* vários botões, envolva cada um num tooltip com o mesmo texto.
+*
+* @example
+* ```tsx
+* <IconButton
+*   aria-label="Fechar"
+*   icon={<XIcon />}
+* />
+* ```
+*/
+const IconButton = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["round", "size"]);
+	const { className, icon, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-component": "IconButton",
+		className: mergeStateClassNames(iconButtonVariants(variantProps), className),
+		size: variantProps.size,
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, { render: icon })
+	});
+};
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/buttons/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../../src/components/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { Icon, type IconProps } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type IconButtonVariants,\n  iconButtonVariants,\n} from './icon-button-variants';\n\nexport type IconButtonProps = MergeOverride<\n  Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'>,\n  IconButtonVariants & {\n    /**\n     * O que o botão faz (\"Fechar\", \"Editar pedido\"), não o nome do ícone. É o único nome do\n     * botão: o ícone sai do leitor de tela.\n     */\n    'aria-label': string;\n    /**\n     * Ícone do botão, no tamanho definido pelo `size`.\n     */\n    icon: NonNullable<IconProps['render']>;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<IconButtonVariants>();\n\n/**\n * Botão quadrado só com ícone.\n *\n * O ícone sai do leitor de tela (o `Icon` é decorativo por padrão), então o tipo exige um\n * `aria-label` que diga o que o botão faz. Quem enxerga vê só o ícone: em barras com\n * vários botões, envolva cada um num tooltip com o mesmo texto.\n *\n * @example\n * ```tsx\n * <IconButton\n *   aria-label=\"Fechar\"\n *   icon={<XIcon />}\n * />\n * ```\n */\nexport const IconButton = (props: IconButtonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'round',\n    'size',\n  ]);\n\n  const { className, icon, ...rest } = elementProps;\n\n  return (\n    <Button\n      data-component=\"IconButton\"\n      className={mergeStateClassNames(\n        iconButtonVariants(variantProps),\n        className,\n      )}\n      size={variantProps.size}\n      {...rest}\n    >\n      <Icon render={icon} />\n    </Button>\n  );\n};\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;;AAwBA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;AAiB/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,SACA,MACF,CAAC;CAED,MAAM,EAAE,WAAW,MAAM,GAAG,SAAS;CAErC,OACE,oBAAC,QAAD;EACE,kBAAe;EACf,WAAW,qBACT,mBAAmB,YAAY,GAC/B,SACF;EACA,MAAM,aAAa;EACnB,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,QAAQ,KAAO,CAAA;CACf,CAAA;AAEZ;AAEA,WAAW,cAAc"}

package/dist/components/buttons/icon-button/index.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonVariants } from "./icon-button-variants.js";
+import { IconButton, IconButtonProps } from "./icon-button.js";
+export { IconButton, type IconButtonProps, type IconButtonVariants };

package/dist/components/buttons/icon-button/index.js

@@ -0,0 +1,2 @@
+import { IconButton } from "./icon-button.js";
+export { IconButton };

package/dist/components/buttons/responsive-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveButton, ResponsiveButtonProps } from "./responsive-button.js";
+export { ResponsiveButton, type ResponsiveButtonProps };

package/dist/components/buttons/responsive-button/index.js

@@ -0,0 +1,2 @@
+import { ResponsiveButton } from "./responsive-button.js";
+export { ResponsiveButton };

package/dist/components/buttons/responsive-button/responsive-button.d.ts

@@ -0,0 +1,41 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { Breakpoint } from "../../../hooks/use-breakpoint.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+//#region src/components/buttons/responsive-button/responsive-button.d.ts
+export type ResponsiveButtonProps = MergeOverride<ButtonProps, {
+  /**
+   * Nome do botão abaixo do `breakpoint`, quando só o ícone fica. Sem ele, o nome é o
+   * `children`, se for texto; com um `children` que não é texto, passe o `aria-label`, ou o
+   * botão de ícone fica sem nome.
+   */
+  'aria-label'?: string;
+  /**
+   * A partir desta largura mostra o `Button` com texto; abaixo dela, só o `IconButton`.
+   *
+   * @default 'md'
+   */
+  breakpoint?: Breakpoint;
+  /**
+   * Ícone, mostrado nos dois formatos.
+   */
+  icon: NonNullable<ButtonProps['icon']>;
+}>;
+/**
+ * Botão com texto em telas largas e só com ícone nas estreitas.
+ *
+ * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o
+ * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o
+ * `breakpoint` (ao girar o celular, por exemplo), o foco se perde.
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveButton icon={<PlusIcon />}>Novo pedido</ResponsiveButton>
+ * ```
+ */
+export declare const ResponsiveButton: {
+  (props: ResponsiveButtonProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=responsive-button.d.ts.map

package/dist/components/buttons/responsive-button/responsive-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-button.d.ts","names":[],"sources":["../../../../src/components/buttons/responsive-button/responsive-button.tsx"],"mappings":";;;;;YAKY,wBAAwB,cAClC;;;;;;EAOE;;;;;;EAMA,aAAa;;;;EAIb,MAAM,YAAY;;;;;;;;;;;;;;qBAgBT;GAA2B,OAAA,wCAAqB,IAAA"}

package/dist/components/buttons/responsive-button/responsive-button.js

@@ -0,0 +1,35 @@
+import { useIsBreakpoint } from "../../../hooks/use-breakpoint.js";
+import { Button } from "../button/button.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/buttons/responsive-button/responsive-button.tsx
+/**
+* Botão com texto em telas largas e só com ícone nas estreitas.
+*
+* Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o
+* próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o
+* `breakpoint` (ao girar o celular, por exemplo), o foco se perde.
+*
+* @example
+* ```tsx
+* <ResponsiveButton icon={<PlusIcon />}>Novo pedido</ResponsiveButton>
+* ```
+*/
+const ResponsiveButton = (props) => {
+	const { breakpoint = "md", "aria-label": ariaLabel, ...rest } = props;
+	const isBreakpoint = useIsBreakpoint(breakpoint);
+	/**
+	* O `aria-label` só vai para o `IconButton`: no `Button`, ele substituiria o texto visível
+	* como nome, e quem usa controle por voz fala o que vê.
+	*/
+	const iconButtonLabel = ariaLabel ?? (typeof rest.children === "string" ? rest.children : "");
+	return isBreakpoint ? /* @__PURE__ */ jsx(Button, { ...rest }) : /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": iconButtonLabel,
+		...rest
+	});
+};
+ResponsiveButton.displayName = "ResponsiveButton";
+//#endregion
+export { ResponsiveButton };
+
+//# sourceMappingURL=responsive-button.js.map

package/dist/components/buttons/responsive-button/responsive-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-button.js","names":[],"sources":["../../../../src/components/buttons/responsive-button/responsive-button.tsx"],"sourcesContent":["import type { MergeOverride } from '@lucasbernardosn/utils';\nimport { Button, type ButtonProps } from '#components/buttons/button';\nimport { IconButton } from '#components/buttons/icon-button';\nimport { type Breakpoint, useIsBreakpoint } from '#hooks';\n\nexport type ResponsiveButtonProps = MergeOverride<\n  ButtonProps,\n  {\n    /**\n     * Nome do botão abaixo do `breakpoint`, quando só o ícone fica. Sem ele, o nome é o\n     * `children`, se for texto; com um `children` que não é texto, passe o `aria-label`, ou o\n     * botão de ícone fica sem nome.\n     */\n    'aria-label'?: string;\n    /**\n     * A partir desta largura mostra o `Button` com texto; abaixo dela, só o `IconButton`.\n     *\n     * @default 'md'\n     */\n    breakpoint?: Breakpoint;\n    /**\n     * Ícone, mostrado nos dois formatos.\n     */\n    icon: NonNullable<ButtonProps['icon']>;\n  }\n>;\n\n/**\n * Botão com texto em telas largas e só com ícone nas estreitas.\n *\n * Na tela larga, o nome do botão é o texto visível; na estreita, o `aria-label` ou, sem ele, o\n * próprio texto. A troca remonta o botão: se ele estiver focado quando a largura cruza o\n * `breakpoint` (ao girar o celular, por exemplo), o foco se perde.\n *\n * @example\n * ```tsx\n * <ResponsiveButton icon={<PlusIcon />}>Novo pedido</ResponsiveButton>\n * ```\n */\nexport const ResponsiveButton = (props: ResponsiveButtonProps) => {\n  const { breakpoint = 'md', 'aria-label': ariaLabel, ...rest } = props;\n\n  const isBreakpoint = useIsBreakpoint(breakpoint);\n\n  /**\n   * O `aria-label` só vai para o `IconButton`: no `Button`, ele substituiria o texto visível\n   * como nome, e quem usa controle por voz fala o que vê.\n   */\n  const iconButtonLabel =\n    ariaLabel ?? (typeof rest.children === 'string' ? rest.children : '');\n\n  return isBreakpoint ? (\n    <Button {...rest} />\n  ) : (\n    <IconButton\n      aria-label={iconButtonLabel}\n      {...rest}\n    />\n  );\n};\n\nResponsiveButton.displayName = 'ResponsiveButton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,aAAa,MAAM,cAAc,WAAW,GAAG,SAAS;CAEhE,MAAM,eAAe,gBAAgB,UAAU;;;;;CAM/C,MAAM,kBACJ,cAAc,OAAO,KAAK,aAAa,WAAW,KAAK,WAAW;CAEpE,OAAO,eACL,oBAAC,QAAD,EAAQ,GAAI,KAAO,CAAA,IAEnB,oBAAC,YAAD;EACE,cAAY;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/dist/components/collections/select/index.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Select };

package/dist/components/collections/select/index.js

@@ -0,0 +1,2 @@
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Select };

package/dist/components/collections/select/index.parts.d.ts

@@ -0,0 +1,27 @@
+import { SelectArrow, SelectArrowProps, SelectArrowState } from "./select-arrow.js";
+import { SelectBackdrop, SelectBackdropProps, SelectBackdropState } from "./select-backdrop.js";
+import { SelectVariants } from "./use-select-context.js";
+import { SelectContext, SelectContextProps } from "./select-context.js";
+import { SelectGroup, SelectGroupProps, SelectGroupState } from "./select-group.js";
+import { SelectGroupLabel, SelectGroupLabelProps, SelectGroupLabelState } from "./select-group-label.js";
+import { SelectIcon, SelectIconProps, SelectIconState } from "./select-icon.js";
+import { SelectItem, SelectItemProps, SelectItemState } from "./select-item.js";
+import { SelectItemIndicator, SelectItemIndicatorProps, SelectItemIndicatorState } from "./select-item-indicator.js";
+import { SelectItemText, SelectItemTextProps, SelectItemTextState } from "./select-item-text.js";
+import { SelectLabel, SelectLabelProps, SelectLabelState } from "./select-label.js";
+import { SelectList, SelectListProps, SelectListState } from "./select-list.js";
+import { SelectPopup, SelectPopupProps, SelectPopupState } from "./select-popup.js";
+import { SelectPortal, SelectPortalProps, SelectPortalState } from "./select-portal.js";
+import { SelectPositioner, SelectPositionerProps, SelectPositionerState } from "./select-positioner.js";
+import { SelectRoot, SelectRootActions, SelectRootChangeEventDetails, SelectRootChangeEventReason, SelectRootProps, SelectRootState } from "./select-root.js";
+import { SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollDownArrowState } from "./select-scroll-down-arrow.js";
+import { SelectScrollUpArrow, SelectScrollUpArrowProps, SelectScrollUpArrowState } from "./select-scroll-up-arrow.js";
+import { SelectSeparator, SelectSeparatorProps, SelectSeparatorState } from "./select-separator.js";
+import { SelectTrigger, SelectTriggerProps, SelectTriggerState } from "./select-trigger.js";
+import { SelectValue, SelectValueProps, SelectValueState } from "./select-value.js";
+declare namespace index_parts_d_exports {
+  export { SelectArrow as Arrow, SelectArrowProps as ArrowProps, SelectArrowState as ArrowState, SelectBackdrop as Backdrop, SelectBackdropProps as BackdropProps, SelectBackdropState as BackdropState, SelectContext as Context, SelectContextProps as ContextProps, SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectGroupLabelProps as GroupLabelProps, SelectGroupLabelState as GroupLabelState, SelectGroupProps as GroupProps, SelectGroupState as GroupState, SelectIcon as Icon, SelectIconProps as IconProps, SelectIconState as IconState, SelectItem as Item, SelectItemIndicator as ItemIndicator, SelectItemIndicatorProps as ItemIndicatorProps, SelectItemIndicatorState as ItemIndicatorState, SelectItemProps as ItemProps, SelectItemState as ItemState, SelectItemText as ItemText, SelectItemTextProps as ItemTextProps, SelectItemTextState as ItemTextState, SelectLabel as Label, SelectLabelProps as LabelProps, SelectLabelState as LabelState, SelectList as List, SelectListProps as ListProps, SelectListState as ListState, SelectPopup as Popup, SelectPopupProps as PopupProps, SelectPopupState as PopupState, SelectPortal as Portal, SelectPortalProps as PortalProps, SelectPortalState as PortalState, SelectPositioner as Positioner, SelectPositionerProps as PositionerProps, SelectPositionerState as PositionerState, SelectRoot as Root, SelectRootActions as RootActions, SelectRootChangeEventDetails as RootChangeEventDetails, SelectRootChangeEventReason as RootChangeEventReason, SelectRootProps as RootProps, SelectRootState as RootState, SelectScrollDownArrow as ScrollDownArrow, SelectScrollDownArrowProps as ScrollDownArrowProps, SelectScrollDownArrowState as ScrollDownArrowState, SelectScrollUpArrow as ScrollUpArrow, SelectScrollUpArrowProps as ScrollUpArrowProps, SelectScrollUpArrowState as ScrollUpArrowState, SelectSeparator as Separator, SelectSeparatorProps as SeparatorProps, SelectSeparatorState as SeparatorState, SelectTrigger as Trigger, SelectTriggerProps as TriggerProps, SelectTriggerState as TriggerState, SelectValue as Value, SelectValueProps as ValueProps, SelectValueState as ValueState, SelectVariants as Variants };
+}
+//#endregion
+export { SelectArrow as Arrow, type SelectArrowProps as ArrowProps, type SelectArrowState as ArrowState, SelectBackdrop as Backdrop, type SelectBackdropProps as BackdropProps, type SelectBackdropState as BackdropState, SelectContext as Context, type SelectContextProps as ContextProps, SelectGroup as Group, SelectGroupLabel as GroupLabel, type SelectGroupLabelProps as GroupLabelProps, type SelectGroupLabelState as GroupLabelState, type SelectGroupProps as GroupProps, type SelectGroupState as GroupState, SelectIcon as Icon, type SelectIconProps as IconProps, type SelectIconState as IconState, SelectItem as Item, SelectItemIndicator as ItemIndicator, type SelectItemIndicatorProps as ItemIndicatorProps, type SelectItemIndicatorState as ItemIndicatorState, type SelectItemProps as ItemProps, type SelectItemState as ItemState, SelectItemText as ItemText, type SelectItemTextProps as ItemTextProps, type SelectItemTextState as ItemTextState, SelectLabel as Label, type SelectLabelProps as LabelProps, type SelectLabelState as LabelState, SelectList as List, type SelectListProps as ListProps, type SelectListState as ListState, SelectPopup as Popup, type SelectPopupProps as PopupProps, type SelectPopupState as PopupState, SelectPortal as Portal, type SelectPortalProps as PortalProps, type SelectPortalState as PortalState, SelectPositioner as Positioner, type SelectPositionerProps as PositionerProps, type SelectPositionerState as PositionerState, SelectRoot as Root, type SelectRootActions as RootActions, type SelectRootChangeEventDetails as RootChangeEventDetails, type SelectRootChangeEventReason as RootChangeEventReason, type SelectRootProps as RootProps, type SelectRootState as RootState, SelectScrollDownArrow as ScrollDownArrow, type SelectScrollDownArrowProps as ScrollDownArrowProps, type SelectScrollDownArrowState as ScrollDownArrowState, SelectScrollUpArrow as ScrollUpArrow, type SelectScrollUpArrowProps as ScrollUpArrowProps, type SelectScrollUpArrowState as ScrollUpArrowState, SelectSeparator as Separator, type SelectSeparatorProps as SeparatorProps, type SelectSeparatorState as SeparatorState, SelectTrigger as Trigger, type SelectTriggerProps as TriggerProps, type SelectTriggerState as TriggerState, SelectValue as Value, type SelectValueProps as ValueProps, type SelectValueState as ValueState, type SelectVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/collections/select/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/components/collections/select/index.parts.ts"],"mappings":""}

package/dist/components/collections/select/index.parts.js

@@ -0,0 +1,48 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { SelectArrow } from "./select-arrow.js";
+import { SelectBackdrop } from "./select-backdrop.js";
+import { SelectContext } from "./select-context.js";
+import { SelectGroup } from "./select-group.js";
+import { SelectGroupLabel } from "./select-group-label.js";
+import { SelectIcon } from "./select-icon.js";
+import { SelectItem } from "./select-item.js";
+import { SelectItemIndicator } from "./select-item-indicator.js";
+import { SelectItemText } from "./select-item-text.js";
+import { SelectLabel } from "./select-label.js";
+import { SelectList } from "./select-list.js";
+import { SelectPopup } from "./select-popup.js";
+import { SelectPortal } from "./select-portal.js";
+import { SelectPositioner } from "./select-positioner.js";
+import { SelectRoot } from "./select-root.js";
+import { SelectScrollDownArrow } from "./select-scroll-down-arrow.js";
+import { SelectScrollUpArrow } from "./select-scroll-up-arrow.js";
+import { SelectSeparator } from "./select-separator.js";
+import { SelectTrigger } from "./select-trigger.js";
+import { SelectValue } from "./select-value.js";
+//#region src/components/collections/select/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => SelectArrow,
+	Backdrop: () => SelectBackdrop,
+	Context: () => SelectContext,
+	Group: () => SelectGroup,
+	GroupLabel: () => SelectGroupLabel,
+	Icon: () => SelectIcon,
+	Item: () => SelectItem,
+	ItemIndicator: () => SelectItemIndicator,
+	ItemText: () => SelectItemText,
+	Label: () => SelectLabel,
+	List: () => SelectList,
+	Popup: () => SelectPopup,
+	Portal: () => SelectPortal,
+	Positioner: () => SelectPositioner,
+	Root: () => SelectRoot,
+	ScrollDownArrow: () => SelectScrollDownArrow,
+	ScrollUpArrow: () => SelectScrollUpArrow,
+	Separator: () => SelectSeparator,
+	Trigger: () => SelectTrigger,
+	Value: () => SelectValue
+});
+//#endregion
+export { SelectArrow as Arrow, SelectBackdrop as Backdrop, SelectContext as Context, SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectIcon as Icon, SelectItem as Item, SelectItemIndicator as ItemIndicator, SelectItemText as ItemText, SelectLabel as Label, SelectList as List, SelectPopup as Popup, SelectPortal as Portal, SelectPositioner as Positioner, SelectRoot as Root, SelectScrollDownArrow as ScrollDownArrow, SelectScrollUpArrow as ScrollUpArrow, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/collections/select/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/collections/select/index.parts.ts"],"sourcesContent":["export { SelectArrow as Arrow } from './select-arrow';\nexport { SelectBackdrop as Backdrop } from './select-backdrop';\nexport { SelectContext as Context } from './select-context';\nexport { SelectGroup as Group } from './select-group';\nexport { SelectGroupLabel as GroupLabel } from './select-group-label';\nexport { SelectIcon as Icon } from './select-icon';\nexport { SelectItem as Item } from './select-item';\nexport { SelectItemIndicator as ItemIndicator } from './select-item-indicator';\nexport { SelectItemText as ItemText } from './select-item-text';\nexport { SelectLabel as Label } from './select-label';\nexport { SelectList as List } from './select-list';\nexport { SelectPopup as Popup } from './select-popup';\nexport { SelectPortal as Portal } from './select-portal';\nexport { SelectPositioner as Positioner } from './select-positioner';\nexport { SelectRoot as Root } from './select-root';\nexport { SelectScrollDownArrow as ScrollDownArrow } from './select-scroll-down-arrow';\nexport { SelectScrollUpArrow as ScrollUpArrow } from './select-scroll-up-arrow';\nexport { SelectSeparator as Separator } from './select-separator';\nexport { SelectTrigger as Trigger } from './select-trigger';\nexport { SelectValue as Value } from './select-value';\n\n/* types */\n\nexport type {\n  SelectArrowProps as ArrowProps,\n  SelectArrowState as ArrowState,\n} from './select-arrow';\nexport type {\n  SelectBackdropProps as BackdropProps,\n  SelectBackdropState as BackdropState,\n} from './select-backdrop';\nexport type { SelectContextProps as ContextProps } from './select-context';\nexport type {\n  SelectGroupProps as GroupProps,\n  SelectGroupState as GroupState,\n} from './select-group';\nexport type {\n  SelectGroupLabelProps as GroupLabelProps,\n  SelectGroupLabelState as GroupLabelState,\n} from './select-group-label';\nexport type {\n  SelectIconProps as IconProps,\n  SelectIconState as IconState,\n} from './select-icon';\nexport type {\n  SelectItemProps as ItemProps,\n  SelectItemState as ItemState,\n} from './select-item';\nexport type {\n  SelectItemIndicatorProps as ItemIndicatorProps,\n  SelectItemIndicatorState as ItemIndicatorState,\n} from './select-item-indicator';\nexport type {\n  SelectItemTextProps as ItemTextProps,\n  SelectItemTextState as ItemTextState,\n} from './select-item-text';\nexport type {\n  SelectLabelProps as LabelProps,\n  SelectLabelState as LabelState,\n} from './select-label';\nexport type {\n  SelectListProps as ListProps,\n  SelectListState as ListState,\n} from './select-list';\nexport type {\n  SelectPopupProps as PopupProps,\n  SelectPopupState as PopupState,\n} from './select-popup';\nexport type {\n  SelectPortalProps as PortalProps,\n  SelectPortalState as PortalState,\n} from './select-portal';\nexport type {\n  SelectPositionerProps as PositionerProps,\n  SelectPositionerState as PositionerState,\n} from './select-positioner';\nexport type {\n  SelectRootActions as RootActions,\n  SelectRootChangeEventDetails as RootChangeEventDetails,\n  SelectRootChangeEventReason as RootChangeEventReason,\n  SelectRootProps as RootProps,\n  SelectRootState as RootState,\n} from './select-root';\nexport type {\n  SelectScrollDownArrowProps as ScrollDownArrowProps,\n  SelectScrollDownArrowState as ScrollDownArrowState,\n} from './select-scroll-down-arrow';\nexport type {\n  SelectScrollUpArrowProps as ScrollUpArrowProps,\n  SelectScrollUpArrowState as ScrollUpArrowState,\n} from './select-scroll-up-arrow';\nexport type {\n  SelectSeparatorProps as SeparatorProps,\n  SelectSeparatorState as SeparatorState,\n} from './select-separator';\nexport type {\n  SelectTriggerProps as TriggerProps,\n  SelectTriggerState as TriggerState,\n} from './select-trigger';\nexport type {\n  SelectValueProps as ValueProps,\n  SelectValueState as ValueState,\n} from './select-value';\nexport type { SelectVariants as Variants } from './use-select-context';\n"],"mappings":""}

package/dist/components/collections/select/select-arrow.d.ts

@@ -0,0 +1,14 @@
+import { Select } from "@base-ui/react/select";
+//#region src/components/collections/select/select-arrow.d.ts
+export type SelectArrowProps = Select.Arrow.Props;
+export type SelectArrowState = Select.Arrow.State;
+/**
+ * Seta que aponta do popup para o trigger. Serve ao `alignItemWithTrigger={false}` no
+ * `Select.Positioner`: no modo padrão o popup cobre o trigger, e a seta não tem para onde apontar.
+ */
+export declare const SelectArrow: {
+  (props: SelectArrowProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=select-arrow.d.ts.map

package/dist/components/collections/select/select-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-arrow.d.ts","names":["BaseSelect"],"sources":["../../../../src/components/collections/select/select-arrow.tsx"],"mappings":";;YAGY,mBAAmBA,OAAW,MAAM;YAEpC,mBAAmBA,OAAW,MAAM;;;;;qBAMnC;GAAsB,OAAA,mCAAgB,IAAA"}

package/dist/components/collections/select/select-arrow.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/collections/select/select-arrow.tsx
+/**
+* Seta que aponta do popup para o trigger. Serve ao `alignItemWithTrigger={false}` no
+* `Select.Positioner`: no modo padrão o popup cobre o trigger, e a seta não tem para onde apontar.
+*/
+const SelectArrow = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Select.Arrow, {
+		"data-component": "Select.Arrow",
+		className: mergeStateClassNames([
+			"data-[side=right]:-left-3",
+			"data-[side=bottom]:-top-2",
+			"data-[side=left]:-right-3",
+			"data-[side=top]:-bottom-2",
+			"data-[side=right]:-rotate-90",
+			"data-[side=left]:rotate-90",
+			"data-[side=top]:rotate-180"
+		], className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("svg", {
+			width: "20",
+			height: "10",
+			viewBox: "0 0 20 10",
+			fill: "none",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+				className: "fill-white dark:fill-gray-2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+				className: "fill-gray-6"
+			})]
+		})
+	});
+};
+SelectArrow.displayName = "Select.Arrow";
+//#endregion
+export { SelectArrow };
+
+//# sourceMappingURL=select-arrow.js.map

package/dist/components/collections/select/select-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-arrow.js","names":["BaseSelect"],"sources":["../../../../src/components/collections/select/select-arrow.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { mergeStateClassNames } from '#utils';\n\nexport type SelectArrowProps = BaseSelect.Arrow.Props;\n\nexport type SelectArrowState = BaseSelect.Arrow.State;\n\n/**\n * Seta que aponta do popup para o trigger. Serve ao `alignItemWithTrigger={false}` no\n * `Select.Positioner`: no modo padrão o popup cobre o trigger, e a seta não tem para onde apontar.\n */\nexport const SelectArrow = (props: SelectArrowProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseSelect.Arrow\n      data-component=\"Select.Arrow\"\n      className={mergeStateClassNames(\n        [\n          'data-[side=right]:-left-3',\n          'data-[side=bottom]:-top-2',\n          'data-[side=left]:-right-3',\n          'data-[side=top]:-bottom-2',\n\n          'data-[side=right]:-rotate-90',\n          'data-[side=left]:rotate-90',\n          'data-[side=top]:rotate-180',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      <svg\n        width=\"20\"\n        height=\"10\"\n        viewBox=\"0 0 20 10\"\n        fill=\"none\"\n        aria-hidden={true}\n      >\n        <path\n          d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n          className=\"fill-white dark:fill-gray-2\"\n        />\n\n        <path\n          d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n          className=\"fill-gray-6\"\n        />\n      </svg>\n    </BaseSelect.Arrow>\n  );\n};\n\nSelectArrow.displayName = 'Select.Arrow';\n"],"mappings":";;;;;;;;AAWA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,OAAW,OAAZ;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GACE,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,eAAa;GALf,UAAA,CAOE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA,GAED,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA,CACE;;CACW,CAAA;AAEtB;AAEA,YAAY,cAAc"}

package/dist/components/collections/select/select-backdrop.d.ts

@@ -0,0 +1,16 @@
+import { Select } from "@base-ui/react/select";
+//#region src/components/collections/select/select-backdrop.d.ts
+export type SelectBackdropProps = Select.Backdrop.Props;
+export type SelectBackdropState = Select.Backdrop.State;
+/**
+ * Camada atrás do popup que cobre e escurece a página.
+ *
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
+ * de `overlays`).
+ */
+export declare const SelectBackdrop: {
+  (props: SelectBackdropProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=select-backdrop.d.ts.map

package/dist/components/collections/select/select-backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-backdrop.d.ts","names":["BaseSelect"],"sources":["../../../../src/components/collections/select/select-backdrop.tsx"],"mappings":";;YAGY,sBAAsBA,OAAW,SAAS;YAE1C,sBAAsBA,OAAW,SAAS;;;;;;;qBAQzC;GAAyB,OAAA,sCAAmB,IAAA"}