@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/fields/input-group/input-group.js

@@ -0,0 +1,164 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Group } from "../../layout/group/group.js";
+import { inputGroupAddonVariants, inputGroupElementVariants, inputGroupPaddingVariants, inputGroupVariants } from "./input-group-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/input-group/input-group.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Um campo com ícone, texto ou botão junto dele. O elemento (`startElement`, `endElement`) fica
+* dentro da borda do campo, como a lupa de uma busca ou a unidade de uma medida; o addon
+* (`startAddon`, `endAddon`) é um bloco colado ao campo, com a borda própria, como o `https://` de
+* uma URL.
+*
+* - O grupo desenha a borda, o fundo e o anel de foco do campo, e o `<input>` de dentro fica sem
+*   caixa. O foco, o inválido e o desabilitado vêm do campo: ele se liga ao `Field` como sempre,
+*   e o grupo reflete o estado dele. No addon, só a caixa do campo muda de cor; o desabilitado
+*   esmaece os dois.
+* - O `size` dá a altura: passe o mesmo `size` ao campo, para o texto dele bater com o do elemento
+*   e do addon. O `variant` fica só no grupo: o campo é transparente e o fundo vem dele.
+* - Um clique no elemento foca o campo, como no clique de um rótulo; um clique em `button`, `a`,
+*   `input`, `select` ou `textarea` dentro dele segue o próprio caminho.
+* - Um botão entra por composição, um `IconButton` com `variant="ghost"` no elemento, um ou dois
+*   passos de `size` abaixo do grupo para sobrar folga até a borda (`3xs` num grupo `2xs`, `2xs`
+*   num `sm`, `xs` num `md`, `sm` num `lg`, `md` num `xl`, `xl` num `2xl`).
+* - Com addon, o grupo é um `Group` com `attached` por fora, e a `className` e as demais props
+*   vão nele; sem addon, no `div` da caixa. Sem `role="group"`: o nome e a descrição acessíveis
+*   vêm do `Field` ligado ao `<input>`, e um grupo com nome próprio o anunciaria duas vezes.
+*
+* @example
+* ```tsx
+* <InputGroup startElement={<Icon render={<MagnifyingGlassIcon />} />}>
+*   <Input
+*     aria-label="Buscar"
+*     placeholder="Buscar pedido"
+*   />
+* </InputGroup>
+*
+* <InputGroup endElement="kg">
+*   <NumberInput aria-label="Peso" />
+* </InputGroup>
+*
+* <InputGroup
+*   startAddon="https://"
+*   endAddon=".com.br"
+* >
+*   <Input aria-label="Subdomínio" />
+* </InputGroup>
+*
+* <InputGroup
+*   endElement={
+*     <IconButton
+*       aria-label="Limpar"
+*       icon={<XIcon />}
+*       variant="ghost"
+*       size="2xs"
+*     />
+*   }
+* >
+*   <Input aria-label="Endereço" />
+* </InputGroup>
+* ```
+*/
+const InputGroup = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["size", "variant"]);
+	const { children, startElement, endElement, startAddon, endAddon, className, ...rest } = elementProps;
+	const { size, variant } = variantProps;
+	const hasAddon = hasContent(startAddon) || hasContent(endAddon);
+	/**
+	* Sem addon, a caixa é o elemento de fora e leva a `className`, o resto das props e o padding
+	* por `size`. Com addon, ela divide a linha com os addons e fica com a largura que sobra.
+	*/
+	const control = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "control",
+		"data-component": hasAddon ? void 0 : "InputGroup",
+		className: mergeTwClassNames(inputGroupVariants(variantProps), hasAddon ? ["flex-1", "min-w-0"] : [inputGroupPaddingVariants({ size }), className]),
+		...hasAddon ? void 0 : rest,
+		children: [
+			hasContent(startElement) && /* @__PURE__ */ jsx(InputGroupElement, {
+				placement: "start",
+				size,
+				children: startElement
+			}),
+			children,
+			hasContent(endElement) && /* @__PURE__ */ jsx(InputGroupElement, {
+				placement: "end",
+				size,
+				children: endElement
+			})
+		]
+	});
+	if (!hasAddon) return control;
+	return /* @__PURE__ */ jsxs(Group, {
+		attached: true,
+		"data-component": "InputGroup",
+		className: mergeTwClassNames([
+			"flex",
+			"w-full",
+			inputGroupPaddingVariants({ size }),
+			"has-[input:disabled]:[&>[data-slot=addon]]:opacity-50",
+			"has-[input:disabled]:[&>[data-slot=addon]]:cursor-not-allowed",
+			"has-[input[data-disabled]]:[&>[data-slot=addon]]:opacity-50",
+			"has-[input[data-disabled]]:[&>[data-slot=addon]]:cursor-not-allowed"
+		], className),
+		...rest,
+		children: [
+			hasContent(startAddon) && /* @__PURE__ */ jsx("div", {
+				"data-slot": "addon",
+				"data-placement": "start",
+				className: inputGroupAddonVariants({
+					variant,
+					size
+				}),
+				children: startAddon
+			}),
+			control,
+			hasContent(endAddon) && /* @__PURE__ */ jsx("div", {
+				"data-slot": "addon",
+				"data-placement": "end",
+				className: inputGroupAddonVariants({
+					variant,
+					size
+				}),
+				children: endAddon
+			})
+		]
+	});
+};
+InputGroup.displayName = "InputGroup";
+/** Se o nó renderiza algo: `null`, `undefined`, booleano e texto vazio não contam. */
+const hasContent = (node) => node !== null && node !== void 0 && typeof node !== "boolean" && node !== "";
+/**
+* Foca o campo da caixa no clique do elemento. O `preventDefault` impede o navegador de tirar o
+* foco do campo que já o tem; sem ele, clicar no ícone fecharia o teclado do celular. Um alvo
+* interativo do próprio elemento fica de fora, para o botão receber o foco e o clique dele.
+*/
+const handleElementMouseDown = (event) => {
+	const { target, currentTarget } = event;
+	if (!(target instanceof Element)) return;
+	const interactive = target.closest("button, a, input, select, textarea");
+	if (interactive && currentTarget.contains(interactive)) return;
+	event.preventDefault();
+	currentTarget.closest("[data-slot=\"control\"]")?.querySelector(":scope > input")?.focus();
+};
+/**
+* O elemento dentro da caixa. O `data-placement` é lido pela caixa para reduzir o padding do campo
+* daquele lado (ver `inputGroupVariants`).
+*/
+const InputGroupElement = (props) => {
+	const { placement, size, children } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "element",
+		"data-placement": placement,
+		className: inputGroupElementVariants({
+			placement,
+			size
+		}),
+		onMouseDown: handleElementMouseDown,
+		children
+	});
+};
+//#endregion
+export { InputGroup };
+
+//# sourceMappingURL=input-group.js.map

package/dist/components/fields/input-group/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../../src/components/fields/input-group/input-group.tsx"],"sourcesContent":["import {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport type React from 'react';\nimport { Group } from '#components/layout/group';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type InputGroupVariants,\n  inputGroupAddonVariants,\n  inputGroupElementVariants,\n  inputGroupPaddingVariants,\n  inputGroupVariants,\n} from './input-group-variants';\n\nexport type InputGroupProps = MergeOverride<\n  React.ComponentProps<'div'>,\n  InputGroupVariants & {\n    /**\n     * O campo: qualquer componente da lib que renderiza um `<input>` direto (`Input`,\n     * `NumberInput`, `PatternInput`, `CurrencyBrlInput`).\n     */\n    children: React.ReactNode;\n    /**\n     * Ícone, texto ou botão dentro da borda, antes do campo.\n     */\n    startElement?: React.ReactNode;\n    /**\n     * Ícone, texto ou botão dentro da borda, depois do campo.\n     */\n    endElement?: React.ReactNode;\n    /**\n     * Bloco colado ao campo, fora da borda dele, antes do campo.\n     */\n    startAddon?: React.ReactNode;\n    /**\n     * Bloco colado ao campo, fora da borda dele, depois do campo.\n     */\n    endAddon?: React.ReactNode;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<InputGroupVariants>();\n\n/**\n * Um campo com ícone, texto ou botão junto dele. O elemento (`startElement`, `endElement`) fica\n * dentro da borda do campo, como a lupa de uma busca ou a unidade de uma medida; o addon\n * (`startAddon`, `endAddon`) é um bloco colado ao campo, com a borda própria, como o `https://` de\n * uma URL.\n *\n * - O grupo desenha a borda, o fundo e o anel de foco do campo, e o `<input>` de dentro fica sem\n *   caixa. O foco, o inválido e o desabilitado vêm do campo: ele se liga ao `Field` como sempre,\n *   e o grupo reflete o estado dele. No addon, só a caixa do campo muda de cor; o desabilitado\n *   esmaece os dois.\n * - O `size` dá a altura: passe o mesmo `size` ao campo, para o texto dele bater com o do elemento\n *   e do addon. O `variant` fica só no grupo: o campo é transparente e o fundo vem dele.\n * - Um clique no elemento foca o campo, como no clique de um rótulo; um clique em `button`, `a`,\n *   `input`, `select` ou `textarea` dentro dele segue o próprio caminho.\n * - Um botão entra por composição, um `IconButton` com `variant=\"ghost\"` no elemento, um ou dois\n *   passos de `size` abaixo do grupo para sobrar folga até a borda (`3xs` num grupo `2xs`, `2xs`\n *   num `sm`, `xs` num `md`, `sm` num `lg`, `md` num `xl`, `xl` num `2xl`).\n * - Com addon, o grupo é um `Group` com `attached` por fora, e a `className` e as demais props\n *   vão nele; sem addon, no `div` da caixa. Sem `role=\"group\"`: o nome e a descrição acessíveis\n *   vêm do `Field` ligado ao `<input>`, e um grupo com nome próprio o anunciaria duas vezes.\n *\n * @example\n * ```tsx\n * <InputGroup startElement={<Icon render={<MagnifyingGlassIcon />} />}>\n *   <Input\n *     aria-label=\"Buscar\"\n *     placeholder=\"Buscar pedido\"\n *   />\n * </InputGroup>\n *\n * <InputGroup endElement=\"kg\">\n *   <NumberInput aria-label=\"Peso\" />\n * </InputGroup>\n *\n * <InputGroup\n *   startAddon=\"https://\"\n *   endAddon=\".com.br\"\n * >\n *   <Input aria-label=\"Subdomínio\" />\n * </InputGroup>\n *\n * <InputGroup\n *   endElement={\n *     <IconButton\n *       aria-label=\"Limpar\"\n *       icon={<XIcon />}\n *       variant=\"ghost\"\n *       size=\"2xs\"\n *     />\n *   }\n * >\n *   <Input aria-label=\"Endereço\" />\n * </InputGroup>\n * ```\n */\nexport const InputGroup = (props: InputGroupProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'size',\n    'variant',\n  ]);\n\n  const {\n    children,\n    startElement,\n    endElement,\n    startAddon,\n    endAddon,\n    className,\n    ...rest\n  } = elementProps;\n\n  const { size, variant } = variantProps;\n\n  const hasAddon = hasContent(startAddon) || hasContent(endAddon);\n\n  /**\n   * Sem addon, a caixa é o elemento de fora e leva a `className`, o resto das props e o padding\n   * por `size`. Com addon, ela divide a linha com os addons e fica com a largura que sobra.\n   */\n  const control = (\n    <div\n      data-slot=\"control\"\n      data-component={hasAddon ? undefined : 'InputGroup'}\n      className={mergeTwClassNames(\n        inputGroupVariants(variantProps),\n        hasAddon\n          ? ['flex-1', 'min-w-0']\n          : [inputGroupPaddingVariants({ size }), className],\n      )}\n      {...(hasAddon ? undefined : rest)}\n    >\n      {hasContent(startElement) && (\n        <InputGroupElement\n          placement=\"start\"\n          size={size}\n        >\n          {startElement}\n        </InputGroupElement>\n      )}\n\n      {children}\n\n      {hasContent(endElement) && (\n        <InputGroupElement\n          placement=\"end\"\n          size={size}\n        >\n          {endElement}\n        </InputGroupElement>\n      )}\n    </div>\n  );\n\n  if (!hasAddon) {\n    return control;\n  }\n\n  return (\n    <Group\n      attached={true}\n      data-component=\"InputGroup\"\n      className={mergeTwClassNames(\n        [\n          'flex',\n          'w-full',\n\n          inputGroupPaddingVariants({ size }),\n\n          // O addon esmaece junto com a caixa; a opacidade do campo desabilitado é da caixa\n          'has-[input:disabled]:[&>[data-slot=addon]]:opacity-50',\n          'has-[input:disabled]:[&>[data-slot=addon]]:cursor-not-allowed',\n          'has-[input[data-disabled]]:[&>[data-slot=addon]]:opacity-50',\n          'has-[input[data-disabled]]:[&>[data-slot=addon]]:cursor-not-allowed',\n        ],\n        className,\n      )}\n      {...rest}\n    >\n      {hasContent(startAddon) && (\n        <div\n          data-slot=\"addon\"\n          data-placement=\"start\"\n          className={inputGroupAddonVariants({ variant, size })}\n        >\n          {startAddon}\n        </div>\n      )}\n\n      {control}\n\n      {hasContent(endAddon) && (\n        <div\n          data-slot=\"addon\"\n          data-placement=\"end\"\n          className={inputGroupAddonVariants({ variant, size })}\n        >\n          {endAddon}\n        </div>\n      )}\n    </Group>\n  );\n};\n\nInputGroup.displayName = 'InputGroup';\n\n/** Se o nó renderiza algo: `null`, `undefined`, booleano e texto vazio não contam. */\nconst hasContent = (node: React.ReactNode) =>\n  node !== null &&\n  node !== undefined &&\n  typeof node !== 'boolean' &&\n  node !== '';\n\n/**\n * Foca o campo da caixa no clique do elemento. O `preventDefault` impede o navegador de tirar o\n * foco do campo que já o tem; sem ele, clicar no ícone fecharia o teclado do celular. Um alvo\n * interativo do próprio elemento fica de fora, para o botão receber o foco e o clique dele.\n */\nconst handleElementMouseDown = (event: React.MouseEvent<HTMLElement>) => {\n  const { target, currentTarget } = event;\n\n  if (!(target instanceof Element)) {\n    return;\n  }\n\n  const interactive = target.closest('button, a, input, select, textarea');\n\n  if (interactive && currentTarget.contains(interactive)) {\n    return;\n  }\n\n  event.preventDefault();\n\n  currentTarget\n    .closest('[data-slot=\"control\"]')\n    ?.querySelector<HTMLInputElement>(':scope > input')\n    ?.focus();\n};\n\ntype InputGroupElementProps = {\n  placement: 'start' | 'end';\n  size: InputGroupVariants['size'];\n  children: React.ReactNode;\n};\n\n/**\n * O elemento dentro da caixa. O `data-placement` é lido pela caixa para reduzir o padding do campo\n * daquele lado (ver `inputGroupVariants`).\n */\nconst InputGroupElement = (props: InputGroupElementProps) => {\n  const { placement, size, children } = props;\n\n  return (\n    // O clique só repassa o foco ao campo, que já é alcançável pelo teclado: o elemento não é\n    // um controle e não ganha `role` nem `tabIndex`.\n    // biome-ignore lint/a11y/noStaticElementInteractions: ver o comentário acima\n    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: ver o comentário acima\n    <div\n      data-slot=\"element\"\n      data-placement={placement}\n      className={inputGroupElementVariants({ placement, size })}\n      onMouseDown={handleElementMouseDown}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AA0CA,MAAM,oBAAoB,iBAAqC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyD/D,MAAa,cAAc,UAA2B;CACpD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,QACA,SACF,CAAC;CAED,MAAM,EACJ,UACA,cACA,YACA,YACA,UACA,WACA,GAAG,SACD;CAEJ,MAAM,EAAE,MAAM,YAAY;CAE1B,MAAM,WAAW,WAAW,UAAU,KAAK,WAAW,QAAQ;;;;;CAM9D,MAAM,UACJ,qBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,WAAW,KAAA,IAAY;EACvC,WAAW,kBACT,mBAAmB,YAAY,GAC/B,WACI,CAAC,UAAU,SAAS,IACpB,CAAC,0BAA0B,EAAE,KAAK,CAAC,GAAG,SAAS,CACrD;EACA,GAAK,WAAW,KAAA,IAAY;EAT9B,UAAA;GAWG,WAAW,YAAY,KACtB,oBAAC,mBAAD;IACE,WAAU;IACJ;IAEL,UAAA;GACgB,CAAA;GAGpB;GAEA,WAAW,UAAU,KACpB,oBAAC,mBAAD;IACE,WAAU;IACJ;IAEL,UAAA;GACgB,CAAA;EAElB;;CAGP,IAAI,CAAC,UACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,UAAU;EACV,kBAAe;EACf,WAAW,kBACT;GACE;GACA;GAEA,0BAA0B,EAAE,KAAK,CAAC;GAGlC;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;EAlBN,UAAA;GAoBG,WAAW,UAAU,KACpB,oBAAC,OAAD;IACE,aAAU;IACV,kBAAe;IACf,WAAW,wBAAwB;KAAE;KAAS;IAAK,CAAC;IAEnD,UAAA;GACE,CAAA;GAGN;GAEA,WAAW,QAAQ,KAClB,oBAAC,OAAD;IACE,aAAU;IACV,kBAAe;IACf,WAAW,wBAAwB;KAAE;KAAS;IAAK,CAAC;IAEnD,UAAA;GACE,CAAA;EAEF;;AAEX;AAEA,WAAW,cAAc;;AAGzB,MAAM,cAAc,SAClB,SAAS,QACT,SAAS,KAAA,KACT,OAAO,SAAS,aAChB,SAAS;;;;;;AAOX,MAAM,0BAA0B,UAAyC;CACvE,MAAM,EAAE,QAAQ,kBAAkB;CAElC,IAAI,EAAE,kBAAkB,UACtB;CAGF,MAAM,cAAc,OAAO,QAAQ,oCAAoC;CAEvE,IAAI,eAAe,cAAc,SAAS,WAAW,GACnD;CAGF,MAAM,eAAe;CAErB,cACG,QAAQ,yBAAuB,CAAC,EAC/B,cAAgC,gBAAgB,CAAC,EACjD,MAAM;AACZ;;;;;AAYA,MAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,WAAW,MAAM,aAAa;CAEtC,OAKE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB;EAChB,WAAW,0BAA0B;GAAE;GAAW;EAAK,CAAC;EACxD,aAAa;EAEZ;CACE,CAAA;AAET"}

package/dist/components/fields/number-input/number-input-variants.js

@@ -41,16 +41,16 @@ const numberInputVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--number-input-focus-color:var(--color-red-9)]",
+	"data-invalid:[--number-input-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--number-input-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--number-input-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

package/dist/components/fields/number-input/number-input-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-input-variants.js","names":[],"sources":["../../../../src/components/fields/number-input/number-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type NumberInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const numberInputDefaultVariants: Required<NumberInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o número não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const numberInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'tabular-nums',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--number-input-focus-color:var(--color-black)]',\n    'dark:[--number-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--number-input-focus-color)',\n    'focus-visible:border-(--number-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--number-input-focus-color)',\n    'data-focused:border-(--number-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--number-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--number-input-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\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        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: numberInputDefaultVariants.size,\n      variant: numberInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,6BAA4D;CACvE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,sBAAsB,IACjC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,2BAA2B;EACjC,SAAS,2BAA2B;CACtC;AACF,CACF"}
+{"version":3,"file":"number-input-variants.js","names":[],"sources":["../../../../src/components/fields/number-input/number-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type NumberInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const numberInputDefaultVariants: Required<NumberInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o número não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const numberInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'tabular-nums',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--number-input-focus-color:var(--color-black)]',\n    'dark:[--number-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--number-input-focus-color)',\n    'focus-visible:border-(--number-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--number-input-focus-color)',\n    'data-focused:border-(--number-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--number-input-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--number-input-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\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        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: numberInputDefaultVariants.size,\n      variant: numberInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,6BAA4D;CACvE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,sBAAsB,IACjC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,2BAA2B;EACjC,SAAS,2BAA2B;CACtC;AACF,CACF"}

package/dist/components/fields/pattern-input/pattern-input-variants.js

@@ -41,16 +41,16 @@ const patternInputVariants = cva([
 	"data-disabled:opacity-50",
 	"data-disabled:cursor-not-allowed",
 	"data-invalid:border-red-9",
-	"data-invalid:[--pattern-input-focus-color:var(--color-red-9)]",
+	"data-invalid:[--pattern-input-focus-color:var(--red-9)]",
 	"aria-invalid:border-red-9",
-	"aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]"
+	"aria-invalid:[--pattern-input-focus-color:var(--red-9)]"
 ], {
 	variants: {
 		variant: {
 			outline: [
 				"bg-white/90",
 				"dark:bg-black/90",
-				"border-gray-alpha-7"
+				"border-gray-7"
 			],
 			subtle: ["bg-gray-4", "border-transparent"]
 		},

package/dist/components/fields/pattern-input/pattern-input-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"pattern-input-variants.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PatternInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const patternInputDefaultVariants: Required<PatternInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e\n *   literais): o texto não se mexe quando uma posição vazia é preenchida.\n */\nexport const patternInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'font-mono',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--pattern-input-focus-color:var(--color-black)]',\n    'dark:[--pattern-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--pattern-input-focus-color)',\n    'focus-visible:border-(--pattern-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--pattern-input-focus-color)',\n    'data-focused:border-(--pattern-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--pattern-input-focus-color:var(--color-red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-alpha-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\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        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: patternInputDefaultVariants.size,\n      variant: patternInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,8BAA8D;CACzE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}
+{"version":3,"file":"pattern-input-variants.js","names":[],"sources":["../../../../src/components/fields/pattern-input/pattern-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type PatternInputVariants = {\n  /**\n   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:\n   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone\n   * não dar zoom no foco.\n   *\n   * @default 'sm'\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /**\n   * Fundo e borda do campo.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'subtle';\n};\n\nexport const patternInputDefaultVariants: Required<PatternInputVariants> = {\n  size: 'sm',\n  variant: 'outline',\n};\n\n/**\n * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do\n * mesmo jeito, explicados lá. As diferenças:\n * - sem `data-placeholder`;\n * - `font-mono`, que dá a mesma largura a todos os caracteres (dígitos, letras, marcador e\n *   literais): o texto não se mexe quando uma posição vazia é preenchida.\n */\nexport const patternInputVariants = cva(\n  [\n    'relative',\n    'w-full',\n\n    'appearance-none',\n    'outline-none',\n\n    'text-start',\n    'font-normal', // Sem isto, herda o peso do `<label>` em volta\n    'text-gray-12',\n\n    'font-mono',\n\n    'placeholder:text-gray-11/80',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--pattern-input-focus-color:var(--color-black)]',\n    'dark:[--pattern-input-focus-color:var(--color-white)]',\n\n    'focus-visible:outline-1',\n    'focus-visible:outline-solid',\n    'focus-visible:-outline-offset-2', // Offset = borda + anel: o campo não cresce no foco\n    'focus-visible:outline-(--pattern-input-focus-color)',\n    'focus-visible:border-(--pattern-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--pattern-input-focus-color)',\n    'data-focused:border-(--pattern-input-focus-color)',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-invalid:border-red-9',\n    'data-invalid:[--pattern-input-focus-color:var(--red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--pattern-input-focus-color:var(--red-9)]',\n  ],\n  {\n    variants: {\n      variant: {\n        outline: [\n          'bg-white/90',\n          'dark:bg-black/90',\n\n          'border-gray-7',\n        ],\n        subtle: [\n          'bg-gray-4',\n\n          'border-transparent',\n        ],\n      },\n      size: {\n        '2xs': [\n          'h-7',\n          'min-w-7',\n\n          'px-2',\n\n          'text-xs',\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        xs: [\n          'h-8',\n          'min-w-8',\n\n          'px-2',\n\n          'text-xs',\n          'any-pointer-coarse:text-base',\n        ],\n        sm: [\n          'h-9',\n          'min-w-9',\n\n          'px-2.5',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        md: [\n          'h-10',\n          'min-w-10',\n\n          'px-3',\n\n          'text-sm',\n          'any-pointer-coarse:text-base',\n        ],\n        lg: [\n          'h-11',\n          'min-w-11',\n\n          'px-4',\n\n          'text-base',\n        ],\n        xl: [\n          'h-12',\n          'min-w-12',\n\n          'px-4.5',\n\n          'text-base',\n        ],\n        '2xl': [\n          'h-16',\n          'min-w-16',\n\n          'px-5',\n\n          'text-lg',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: patternInputDefaultVariants.size,\n      variant: patternInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,8BAA8D;CACzE,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;CACE;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IAEA;GACF;GACA,QAAQ,CACN,aAEA,oBACF;EACF;EACA,MAAM;GACJ,OAAO;IACL;IACA;IAEA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;IACA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;IAEA;GACF;GACA,OAAO;IACL;IACA;IAEA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/fields/radio/index.d.ts

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

package/dist/components/fields/radio/index.js

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

package/dist/components/fields/radio/index.parts.d.ts

@@ -0,0 +1,10 @@
+import { RadioGroup, RadioGroupChangeEventDetails, RadioGroupChangeEventReason, RadioGroupProps, RadioGroupState } from "./radio-group.js";
+import { RadioIndicator, RadioIndicatorProps, RadioIndicatorState } from "./radio-indicator.js";
+import { RadioRootVariants } from "./radio-root-variants.js";
+import { RadioRoot, RadioRootProps, RadioRootState } from "./radio-root.js";
+declare namespace index_parts_d_exports {
+  export { RadioGroup as Group, RadioGroupChangeEventDetails as GroupChangeEventDetails, RadioGroupChangeEventReason as GroupChangeEventReason, RadioGroupProps as GroupProps, RadioGroupState as GroupState, RadioIndicator as Indicator, RadioIndicatorProps as IndicatorProps, RadioIndicatorState as IndicatorState, RadioRoot as Root, RadioRootProps as RootProps, RadioRootState as RootState, RadioRootVariants as RootVariants };
+}
+//#endregion
+export { RadioGroup as Group, type RadioGroupChangeEventDetails as GroupChangeEventDetails, type RadioGroupChangeEventReason as GroupChangeEventReason, type RadioGroupProps as GroupProps, type RadioGroupState as GroupState, RadioIndicator as Indicator, type RadioIndicatorProps as IndicatorProps, type RadioIndicatorState as IndicatorState, RadioRoot as Root, type RadioRootProps as RootProps, type RadioRootState as RootState, type RadioRootVariants as RootVariants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/fields/radio/index.parts.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { RadioGroup } from "./radio-group.js";
+import { RadioIndicator } from "./radio-indicator.js";
+import { RadioRoot } from "./radio-root.js";
+//#region src/components/fields/radio/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => RadioGroup,
+	Indicator: () => RadioIndicator,
+	Root: () => RadioRoot
+});
+//#endregion
+export { RadioGroup as Group, RadioIndicator as Indicator, RadioRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/fields/radio/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/radio/index.parts.ts"],"sourcesContent":["export { RadioGroup as Group } from './radio-group';\nexport { RadioIndicator as Indicator } from './radio-indicator';\nexport { RadioRoot as Root } from './radio-root';\n\n/* types */\n\nexport type {\n  RadioGroupChangeEventDetails as GroupChangeEventDetails,\n  RadioGroupChangeEventReason as GroupChangeEventReason,\n  RadioGroupProps as GroupProps,\n  RadioGroupState as GroupState,\n} from './radio-group';\n\nexport type {\n  RadioIndicatorProps as IndicatorProps,\n  RadioIndicatorState as IndicatorState,\n} from './radio-indicator';\nexport type {\n  RadioRootProps as RootProps,\n  RadioRootState as RootState,\n} from './radio-root';\nexport type { RadioRootVariants as RootVariants } from './radio-root-variants';\n"],"mappings":""}

package/dist/components/fields/radio/radio-group.d.ts

@@ -0,0 +1,40 @@
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/components/fields/radio/radio-group.d.ts
+export type RadioGroupProps = RadioGroup$1.Props;
+export type RadioGroupState = RadioGroup$1.State;
+export type RadioGroupChangeEventDetails = RadioGroup$1.ChangeEventDetails;
+export type RadioGroupChangeEventReason = RadioGroup$1.ChangeEventReason;
+/**
+ * Guarda o `value` do `Radio.Root` marcado dentro dele: só um fica marcado por vez. Sem estilo de
+ * layout: a disposição vem por `className`.
+ *
+ * O Base UI não tem orientação: as setas andam entre as opções nas duas direções, qualquer que
+ * seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,
+ * pelo `Fieldset.Root` (`<Fieldset.Root render={<Radio.Group />}>`, dentro de um `Field.Root`
+ * com `name`).
+ *
+ * @example
+ * ```tsx
+ * <Radio.Group
+ *   aria-labelledby="storage-label"
+ *   defaultValue="ssd"
+ *   className="flex flex-col gap-3"
+ * >
+ *   <span id="storage-label">Armazenamento</span>
+ *
+ *   <label>
+ *     <Radio.Root value="ssd">
+ *       <Radio.Indicator />
+ *     </Radio.Root>
+ *     SSD
+ *   </label>
+ *   …
+ * </Radio.Group>
+ * ```
+ */
+export declare const RadioGroup: {
+  (props: RadioGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/fields/radio/radio-group.js

@@ -0,0 +1,45 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+//#region src/components/fields/radio/radio-group.tsx
+/**
+* Guarda o `value` do `Radio.Root` marcado dentro dele: só um fica marcado por vez. Sem estilo de
+* layout: a disposição vem por `className`.
+*
+* O Base UI não tem orientação: as setas andam entre as opções nas duas direções, qualquer que
+* seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,
+* pelo `Fieldset.Root` (`<Fieldset.Root render={<Radio.Group />}>`, dentro de um `Field.Root`
+* com `name`).
+*
+* @example
+* ```tsx
+* <Radio.Group
+*   aria-labelledby="storage-label"
+*   defaultValue="ssd"
+*   className="flex flex-col gap-3"
+* >
+*   <span id="storage-label">Armazenamento</span>
+*
+*   <label>
+*     <Radio.Root value="ssd">
+*       <Radio.Indicator />
+*     </Radio.Root>
+*     SSD
+*   </label>
+*   …
+* </Radio.Group>
+* ```
+*/
+const RadioGroup = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-component": "Radio.Group",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+RadioGroup.displayName = "Radio.Group";
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/components/fields/radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["BaseRadioGroup"],"sources":["../../../../src/components/fields/radio/radio-group.tsx"],"sourcesContent":["import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { mergeStateClassNames } from '#utils';\n\nexport type RadioGroupProps = BaseRadioGroup.Props;\n\nexport type RadioGroupState = BaseRadioGroup.State;\n\nexport type RadioGroupChangeEventDetails = BaseRadioGroup.ChangeEventDetails;\n\nexport type RadioGroupChangeEventReason = BaseRadioGroup.ChangeEventReason;\n\n/**\n * Guarda o `value` do `Radio.Root` marcado dentro dele: só um fica marcado por vez. Sem estilo de\n * layout: a disposição vem por `className`.\n *\n * O Base UI não tem orientação: as setas andam entre as opções nas duas direções, qualquer que\n * seja a disposição. Dê o nome ao grupo com `aria-labelledby` ou `aria-label`, ou, num formulário,\n * pelo `Fieldset.Root` (`<Fieldset.Root render={<Radio.Group />}>`, dentro de um `Field.Root`\n * com `name`).\n *\n * @example\n * ```tsx\n * <Radio.Group\n *   aria-labelledby=\"storage-label\"\n *   defaultValue=\"ssd\"\n *   className=\"flex flex-col gap-3\"\n * >\n *   <span id=\"storage-label\">Armazenamento</span>\n *\n *   <label>\n *     <Radio.Root value=\"ssd\">\n *       <Radio.Indicator />\n *     </Radio.Root>\n *     SSD\n *   </label>\n *   …\n * </Radio.Group>\n * ```\n */\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseRadioGroup\n      data-component=\"Radio.Group\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nRadioGroup.displayName = 'Radio.Group';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,cAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/components/fields/radio/radio-indicator.d.ts

@@ -0,0 +1,14 @@
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio/radio-indicator.d.ts
+export type RadioIndicatorProps = Radio.Indicator.Props;
+export type RadioIndicatorState = Radio.Indicator.State;
+/**
+ * O ponto dentro do círculo, na cor do texto do `Radio.Root`. Só existe no DOM marcado (ou com
+ * `keepMounted`). O `Radio.Root` define o tamanho do ponto pelo `size`, em `--radio-dot-size`.
+ */
+export declare const RadioIndicator: {
+  (props: RadioIndicatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=radio-indicator.d.ts.map

package/dist/components/fields/radio/radio-indicator.js

@@ -0,0 +1,33 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/radio/radio-indicator.tsx
+/**
+* O ponto dentro do círculo, na cor do texto do `Radio.Root`. Só existe no DOM marcado (ou com
+* `keepMounted`). O `Radio.Root` define o tamanho do ponto pelo `size`, em `--radio-dot-size`.
+*/
+const RadioIndicator = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		"data-component": "Radio.Indicator",
+		className: mergeStateClassNames([
+			"block",
+			"size-(--radio-dot-size)",
+			"rounded-full",
+			"bg-current",
+			"not-motion-reduced:transition-transform",
+			"not-motion-reduced:ease-enter",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:data-starting-style:scale-0",
+			"not-motion-reduced:data-ending-style:scale-0",
+			"not-motion-reduced:data-ending-style:ease-exit",
+			"not-motion-reduced:data-ending-style:duration-100"
+		], className),
+		...rest
+	});
+};
+RadioIndicator.displayName = "Radio.Indicator";
+//#endregion
+export { RadioIndicator };
+
+//# sourceMappingURL=radio-indicator.js.map

package/dist/components/fields/radio/radio-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-indicator.js","names":["BaseRadio"],"sources":["../../../../src/components/fields/radio/radio-indicator.tsx"],"sourcesContent":["import { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { mergeStateClassNames } from '#utils';\n\nexport type RadioIndicatorProps = BaseRadio.Indicator.Props;\n\nexport type RadioIndicatorState = BaseRadio.Indicator.State;\n\n/**\n * O ponto dentro do círculo, na cor do texto do `Radio.Root`. Só existe no DOM marcado (ou com\n * `keepMounted`). O `Radio.Root` define o tamanho do ponto pelo `size`, em `--radio-dot-size`.\n */\nexport const RadioIndicator = (props: RadioIndicatorProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseRadio.Indicator\n      data-component=\"Radio.Indicator\"\n      className={mergeStateClassNames(\n        [\n          'block',\n          'size-(--radio-dot-size)',\n          'rounded-full',\n          'bg-current',\n\n          // O ponto cresce de 0 ao marcar e sai mais curto ao desmarcar.\n          'not-motion-reduced:transition-transform',\n          'not-motion-reduced:ease-enter',\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-starting-style:scale-0',\n          'not-motion-reduced:data-ending-style:scale-0',\n          'not-motion-reduced:data-ending-style:ease-exit',\n          'not-motion-reduced:data-ending-style:duration-100',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nRadioIndicator.displayName = 'Radio.Indicator';\n"],"mappings":";;;;;;;;AAWA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,MAAU,WAAX;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/fields/radio/radio-root-variants.d.ts

@@ -0,0 +1,41 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/fields/radio/radio-root-variants.d.ts
+export type RadioRootVariants = {
+  /**
+   * Cor do círculo marcado, do ponto e do anel de foco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Tamanho do círculo. O ponto do `Radio.Indicator` acompanha.
+   *
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /**
+   * Desenho do círculo marcado.
+   *
+   * @default 'solid'
+   */
+  variant?: 'solid' | 'outline' | 'subtle';
+};
+export declare const radioRootDefaultVariants: Required<RadioRootVariants>;
+/**
+ * O `RadioCard.Indicator` copia o círculo e o ponto (`solid`, `size="sm"`), e o
+ * `RadioCard.Item` copia as classes de estado (foco, desabilitado, somente leitura e inválido).
+ *
+ * Copia o `checkboxRootVariants`, com as variáveis `--radio-*`. Diferenças:
+ *
+ * - o círculo é `rounded-full`, sem `corner-squircle`;
+ * - não há `indeterminate`;
+ * - o `size` declara `--radio-dot-size`, que o `Radio.Indicator` lê para dimensionar o ponto,
+ *   em vez de dimensionar um svg.
+ */
+export declare const radioRootVariants: (props?: ({
+  colorScheme?: "gray" | "accent" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+  variant?: "solid" | "subtle" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=radio-root-variants.d.ts.map

package/dist/components/fields/radio/radio-root-variants.js

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/radio/radio-root-variants.ts
+const radioRootDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "solid"
+};
+/**
+* O `RadioCard.Indicator` copia o círculo e o ponto (`solid`, `size="sm"`), e o
+* `RadioCard.Item` copia as classes de estado (foco, desabilitado, somente leitura e inválido).
+*
+* Copia o `checkboxRootVariants`, com as variáveis `--radio-*`. Diferenças:
+*
+* - o círculo é `rounded-full`, sem `corner-squircle`;
+* - não há `indeterminate`;
+* - o `size` declara `--radio-dot-size`, que o `Radio.Indicator` lê para dimensionar o ponto,
+*   em vez de dimensionar um svg.
+*/
+const radioRootVariants = cva([
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"align-middle",
+	"border",
+	"rounded-full",
+	"cursor-pointer",
+	"select-none",
+	"focus-ring-outside",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-readonly:cursor-default",
+	"data-invalid:not-data-checked:border-red-9",
+	"aria-invalid:not-data-checked:border-red-9",
+	"data-invalid:ring-red-9",
+	"aria-invalid:ring-red-9"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--radio-solid-bg:var(--color-black)]",
+				"dark:[--radio-solid-bg:var(--color-white)]",
+				"[--radio-subtle-bg:var(--gray-4)]",
+				"[--radio-fg:var(--gray-12)]",
+				"ring-gray-9"
+			],
+			accent: [
+				"[--radio-solid-bg:var(--accent-9)]",
+				"[--radio-subtle-bg:var(--accent-4)]",
+				"[--radio-fg:var(--accent-11)]",
+				"ring-accent-9"
+			]
+		},
+		size: {
+			xs: ["size-3", "[--radio-dot-size:--spacing(1)]"],
+			sm: ["size-4", "[--radio-dot-size:--spacing(1.5)]"],
+			md: ["size-5", "[--radio-dot-size:--spacing(2)]"],
+			lg: ["size-6", "[--radio-dot-size:--spacing(2.5)]"]
+		},
+		variant: {
+			solid: [
+				"border-gray-7",
+				"data-checked:border-(--radio-solid-bg)",
+				"data-checked:bg-(--radio-solid-bg)",
+				"text-white"
+			],
+			outline: [
+				"border-gray-7",
+				"data-checked:border-(--radio-solid-bg)",
+				"text-(--radio-fg)"
+			],
+			subtle: [
+				"border-(--radio-subtle-bg)",
+				"bg-(--radio-subtle-bg)",
+				"text-(--radio-fg)"
+			]
+		}
+	},
+	compoundVariants: [{
+		variant: "solid",
+		colorScheme: "gray",
+		className: ["text-white", "dark:text-black"]
+	}],
+	defaultVariants: {
+		colorScheme: radioRootDefaultVariants.colorScheme,
+		size: radioRootDefaultVariants.size,
+		variant: radioRootDefaultVariants.variant
+	}
+});
+//#endregion
+export { radioRootDefaultVariants, radioRootVariants };
+
+//# sourceMappingURL=radio-root-variants.js.map

package/dist/components/fields/radio/radio-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-root-variants.js","names":[],"sources":["../../../../src/components/fields/radio/radio-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type RadioRootVariants = {\n  /**\n   * Cor do círculo marcado, do ponto e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho do círculo. O ponto do `Radio.Indicator` acompanha.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Desenho do círculo marcado.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline' | 'subtle';\n};\n\nexport const radioRootDefaultVariants: Required<RadioRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * O `RadioCard.Indicator` copia o círculo e o ponto (`solid`, `size=\"sm\"`), e o\n * `RadioCard.Item` copia as classes de estado (foco, desabilitado, somente leitura e inválido).\n *\n * Copia o `checkboxRootVariants`, com as variáveis `--radio-*`. Diferenças:\n *\n * - o círculo é `rounded-full`, sem `corner-squircle`;\n * - não há `indeterminate`;\n * - o `size` declara `--radio-dot-size`, que o `Radio.Indicator` lê para dimensionar o ponto,\n *   em vez de dimensionar um svg.\n */\nexport const radioRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'align-middle',\n\n    'border',\n    'rounded-full',\n\n    'cursor-pointer',\n    'select-none',\n\n    'focus-ring-outside',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    'data-readonly:cursor-default',\n\n    // Só o círculo desmarcado muda: o erro de um radio quase sempre é \"não marcado\".\n    'data-invalid:not-data-checked:border-red-9',\n    'aria-invalid:not-data-checked:border-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--radio-solid-bg:var(--color-black)]',\n          'dark:[--radio-solid-bg:var(--color-white)]',\n          '[--radio-subtle-bg:var(--gray-4)]',\n          '[--radio-fg:var(--gray-12)]',\n          'ring-gray-9',\n        ],\n        accent: [\n          '[--radio-solid-bg:var(--accent-9)]',\n          '[--radio-subtle-bg:var(--accent-4)]',\n          '[--radio-fg:var(--accent-11)]',\n          'ring-accent-9',\n        ],\n      },\n      size: {\n        xs: ['size-3', '[--radio-dot-size:--spacing(1)]'],\n        sm: ['size-4', '[--radio-dot-size:--spacing(1.5)]'],\n        md: ['size-5', '[--radio-dot-size:--spacing(2)]'],\n        lg: ['size-6', '[--radio-dot-size:--spacing(2.5)]'],\n      },\n      variant: {\n        // Borda neutra desmarcado; marcado, o círculo inteiro na cor.\n        solid: [\n          'border-gray-7',\n\n          'data-checked:border-(--radio-solid-bg)',\n          'data-checked:bg-(--radio-solid-bg)',\n\n          'text-white',\n        ],\n        // Borda neutra desmarcado; marcado, só a borda e o ponto na cor.\n        outline: [\n          'border-gray-7',\n\n          'data-checked:border-(--radio-solid-bg)',\n\n          'text-(--radio-fg)',\n        ],\n        // Fundo claro da cor nos dois estados; marcado, o ponto na cor.\n        subtle: [\n          'border-(--radio-subtle-bg)',\n          'bg-(--radio-subtle-bg)',\n\n          'text-(--radio-fg)',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'solid',\n        colorScheme: 'gray',\n        className: ['text-white', 'dark:text-black'],\n      },\n    ],\n    defaultVariants: {\n      colorScheme: radioRootDefaultVariants.colorScheme,\n      size: radioRootDefaultVariants.size,\n      variant: radioRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,2BAAwD;CACnE,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;;;;;AAaA,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CAGA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,UAAU,iCAAiC;GAChD,IAAI,CAAC,UAAU,mCAAmC;GAClD,IAAI,CAAC,UAAU,iCAAiC;GAChD,IAAI,CAAC,UAAU,mCAAmC;EACpD;EACA,SAAS;GAEP,OAAO;IACL;IAEA;IACA;IAEA;GACF;GAEA,SAAS;IACP;IAEA;IAEA;GACF;GAEA,QAAQ;IACN;IACA;IAEA;GACF;EACF;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,aAAa;EACb,WAAW,CAAC,cAAc,iBAAiB;CAC7C,CACF;CACA,iBAAiB;EACf,aAAa,yBAAyB;EACtC,MAAM,yBAAyB;EAC/B,SAAS,yBAAyB;CACpC;AACF,CACF"}