@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/feedback/skeleton/skeleton.js

@@ -0,0 +1,49 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { skeletonDefaultVariants, skeletonVariants } from "./skeleton-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/feedback/skeleton/skeleton.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Bloco que ocupa o lugar do conteúdo enquanto ele carrega. Altura, largura e forma vêm pela
+* `className` (`h-5 w-4/5`). O canto sai em `corner-squircle`, que deforma o `rounded-full`: o
+* círculo leva `corner-round` junto (`size-10 rounded-full corner-round`).
+*
+* Com filhos, o bloco toma o tamanho deles e os esconde até `loading` virar `false`. Passe o
+* componente como filho, não pelo `render`: pelo `render`, as classes dele concorrem com as do
+* bloco, e o fundo ou o texto dele podem aparecer.
+*
+* Enquanto carrega, recebe `inert`: o texto direto, que só fica transparente, sai da árvore de
+* acessibilidade, e o elemento sai do foco. O anúncio da espera fica com o contêiner que está
+* carregando, por `aria-busy`.
+*
+* @example
+* ```tsx
+* <Skeleton className="h-5 w-4/5" />
+*
+* <Skeleton loading={isLoading} className="w-fit">
+*   <Badge>Pago</Badge>
+* </Skeleton>
+* ```
+*/
+const Skeleton = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["loading", "variant"]);
+	const { render, className, ...rest } = elementProps;
+	const { loading = skeletonDefaultVariants.loading } = variantProps;
+	const baseProps = {
+		"data-component": "Skeleton",
+		"data-loading": loading ? "" : void 0,
+		inert: loading || void 0,
+		className: mergeTwClassNames(skeletonVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/feedback/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport {\n  type SkeletonVariants,\n  skeletonDefaultVariants,\n  skeletonVariants,\n} from './skeleton-variants';\n\nexport type SkeletonProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  SkeletonVariants\n>;\n\nconst splitVariantProps = createSplitProps<SkeletonVariants>();\n\n/**\n * Bloco que ocupa o lugar do conteúdo enquanto ele carrega. Altura, largura e forma vêm pela\n * `className` (`h-5 w-4/5`). O canto sai em `corner-squircle`, que deforma o `rounded-full`: o\n * círculo leva `corner-round` junto (`size-10 rounded-full corner-round`).\n *\n * Com filhos, o bloco toma o tamanho deles e os esconde até `loading` virar `false`. Passe o\n * componente como filho, não pelo `render`: pelo `render`, as classes dele concorrem com as do\n * bloco, e o fundo ou o texto dele podem aparecer.\n *\n * Enquanto carrega, recebe `inert`: o texto direto, que só fica transparente, sai da árvore de\n * acessibilidade, e o elemento sai do foco. O anúncio da espera fica com o contêiner que está\n * carregando, por `aria-busy`.\n *\n * @example\n * ```tsx\n * <Skeleton className=\"h-5 w-4/5\" />\n *\n * <Skeleton loading={isLoading} className=\"w-fit\">\n *   <Badge>Pago</Badge>\n * </Skeleton>\n * ```\n */\nexport const Skeleton = (props: SkeletonProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'loading',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const { loading = skeletonDefaultVariants.loading } = variantProps;\n\n  const baseProps = {\n    'data-component': 'Skeleton',\n    'data-loading': loading ? '' : undefined,\n    inert: loading || undefined,\n    className: mergeTwClassNames(skeletonVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSkeleton.displayName = 'Skeleton';\n"],"mappings":";;;;;AAcA,MAAM,oBAAoB,iBAAmC;;;;;;;;;;;;;;;;;;;;;;;AAwB7D,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,WACA,SACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,UAAU,wBAAwB,YAAY;CAEtD,MAAM,YAAY;EAChB,kBAAkB;EAClB,gBAAgB,UAAU,KAAK,KAAA;EAC/B,OAAO,WAAW,KAAA;EAClB,WAAW,kBAAkB,iBAAiB,YAAY,GAAG,SAAS;CACxE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/feedback/spinner/index.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerVariants } from "./spinner-variants.js";
+import { Spinner, SpinnerProps } from "./spinner.js";
+export { Spinner, type SpinnerProps, type SpinnerVariants };

package/dist/components/feedback/spinner/index.js

@@ -0,0 +1,2 @@
+import { Spinner } from "./spinner.js";
+export { Spinner };

package/dist/components/feedback/spinner/spinner-variants.d.ts

@@ -0,0 +1,17 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/feedback/spinner/spinner-variants.d.ts
+export type SpinnerVariants = {
+  /**
+   * Cor do arco. Para herdar a cor do texto (sobre um fundo colorido, por exemplo), passe
+   * `border-r-current border-b-current` na `className`.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+};
+export declare const spinnerDefaultVariants: Required<SpinnerVariants>;
+export declare const spinnerVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=spinner-variants.d.ts.map

package/dist/components/feedback/spinner/spinner-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-variants.d.ts","names":[],"sources":["../../../../src/components/feedback/spinner/spinner-variants.ts"],"mappings":";;YAGY;;;;;;;EAOV,cAAc;;qBAGH,wBAAwB,SAAS;qBAIjC,kBAAe;;6CA+B3B"}

package/dist/components/feedback/spinner/spinner-variants.js

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/spinner/spinner-variants.ts
+const spinnerDefaultVariants = { colorScheme: "gray" };
+const spinnerVariants = cva([
+	"inline-block",
+	"shrink-0",
+	"size-[1em]",
+	"rounded-full",
+	"border-2",
+	"border-solid",
+	"border-current",
+	"border-t-transparent",
+	"border-l-transparent",
+	"animate-[spin_350ms_linear_infinite]",
+	"motion-reduced:animate-[spin_600ms_linear_infinite]"
+], {
+	variants: { colorScheme: {
+		gray: ["border-r-gray-9", "border-b-gray-9"],
+		brand: ["border-r-brand-9", "border-b-brand-9"]
+	} },
+	defaultVariants: { colorScheme: spinnerDefaultVariants.colorScheme }
+});
+//#endregion
+export { spinnerDefaultVariants, spinnerVariants };
+
+//# sourceMappingURL=spinner-variants.js.map

package/dist/components/feedback/spinner/spinner-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-variants.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SpinnerVariants = {\n  /**\n   * Cor do arco. Para herdar a cor do texto (sobre um fundo colorido, por exemplo), passe\n   * `border-r-current border-b-current` na `className`.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n};\n\nexport const spinnerDefaultVariants: Required<SpinnerVariants> = {\n  colorScheme: 'gray',\n};\n\nexport const spinnerVariants = cva(\n  [\n    'inline-block',\n    'shrink-0',\n\n    // Acompanha o `font-size` de onde está: texto, botão, célula.\n    'size-[1em]',\n\n    'rounded-full',\n    'border-2',\n    'border-solid',\n    'border-current',\n    'border-t-transparent',\n    'border-l-transparent',\n\n    'animate-[spin_350ms_linear_infinite]',\n    // Com movimento reduzido, desacelera em vez de parar: parado, o spinner\n    // passaria por um ícone.\n    'motion-reduced:animate-[spin_600ms_linear_infinite]',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-r-gray-9', 'border-b-gray-9'],\n        brand: ['border-r-brand-9', 'border-b-brand-9'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: spinnerDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;AAaA,MAAa,yBAAoD,EAC/D,aAAa,OACf;AAEA,MAAa,kBAAkB,IAC7B;CACE;CACA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CAGA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CAAC,mBAAmB,iBAAiB;EAC3C,OAAO,CAAC,oBAAoB,kBAAkB;CAChD,EACF;CACA,iBAAiB,EACf,aAAa,uBAAuB,YACtC;AACF,CACF"}

package/dist/components/feedback/spinner/spinner.d.ts

@@ -0,0 +1,40 @@
+import { SpinnerVariants } from "./spinner-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/spinner/spinner.d.ts
+export type SpinnerProps = MergeOverride<useRender.ComponentProps<'span'>, SpinnerVariants & {
+  /**
+   * Texto lido pelo leitor de tela, escondido da tela. Diga o que está carregando.
+   *
+   * @default 'Carregando'
+   */
+  label?: string;
+}>;
+/**
+ * Indicador circular de carregamento.
+ *
+ * Mede `1em`, então acompanha o tamanho do texto ao redor; para um tamanho fixo, passe `size-*`
+ * na `className`, e para outra espessura, `border-*`.
+ *
+ * Vem com `role="status"` e o `label` como texto `sr-only`, para o leitor de tela anunciar a
+ * espera. O anúncio mais confiável é o do contêiner que está carregando, com `aria-busy`. Dentro
+ * de um controle que já comunica o próprio estado (um botão com `loading`), passe `aria-hidden`
+ * para não anunciar duas vezes.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ *
+ * <Spinner
+ *   colorScheme="brand"
+ *   label="Emitindo a nota fiscal"
+ *   className="size-8"
+ * />
+ * ```
+ */
+export declare const Spinner: {
+  (props: SpinnerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/feedback/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","names":[],"sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"mappings":";;;;YAKY,eAAe,cACzB,UAAU,wBACV;;;;;;EAME;;;;;;;;;;;;;;;;;;;;;;;;qBA4BS;GAAkB,OAAA,+BAAY,+CAAA"}

package/dist/components/feedback/spinner/spinner.js

@@ -0,0 +1,52 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { spinnerVariants } from "./spinner-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/spinner/spinner.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Indicador circular de carregamento.
+*
+* Mede `1em`, então acompanha o tamanho do texto ao redor; para um tamanho fixo, passe `size-*`
+* na `className`, e para outra espessura, `border-*`.
+*
+* Vem com `role="status"` e o `label` como texto `sr-only`, para o leitor de tela anunciar a
+* espera. O anúncio mais confiável é o do contêiner que está carregando, com `aria-busy`. Dentro
+* de um controle que já comunica o próprio estado (um botão com `loading`), passe `aria-hidden`
+* para não anunciar duas vezes.
+*
+* @example
+* ```tsx
+* <Spinner />
+*
+* <Spinner
+*   colorScheme="brand"
+*   label="Emitindo a nota fiscal"
+*   className="size-8"
+* />
+* ```
+*/
+const Spinner = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme"]);
+	const { label = "Carregando", render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Spinner",
+		role: "status",
+		className: mergeTwClassNames(spinnerVariants(variantProps), className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: mergeTwClassNames(["sr-only"]),
+			children: label
+		})
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Spinner.displayName = "Spinner";
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/feedback/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../../src/components/feedback/spinner/spinner.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type SpinnerVariants, spinnerVariants } from './spinner-variants';\n\nexport type SpinnerProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  SpinnerVariants & {\n    /**\n     * Texto lido pelo leitor de tela, escondido da tela. Diga o que está carregando.\n     *\n     * @default 'Carregando'\n     */\n    label?: string;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<SpinnerVariants>();\n\n/**\n * Indicador circular de carregamento.\n *\n * Mede `1em`, então acompanha o tamanho do texto ao redor; para um tamanho fixo, passe `size-*`\n * na `className`, e para outra espessura, `border-*`.\n *\n * Vem com `role=\"status\"` e o `label` como texto `sr-only`, para o leitor de tela anunciar a\n * espera. O anúncio mais confiável é o do contêiner que está carregando, com `aria-busy`. Dentro\n * de um controle que já comunica o próprio estado (um botão com `loading`), passe `aria-hidden`\n * para não anunciar duas vezes.\n *\n * @example\n * ```tsx\n * <Spinner />\n *\n * <Spinner\n *   colorScheme=\"brand\"\n *   label=\"Emitindo a nota fiscal\"\n *   className=\"size-8\"\n * />\n * ```\n */\nexport const Spinner = (props: SpinnerProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n  ]);\n\n  const { label = 'Carregando', render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Spinner',\n    role: 'status',\n    className: mergeTwClassNames(spinnerVariants(variantProps), className),\n    children: <span className={mergeTwClassNames(['sr-only'])}>{label}</span>,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;AAiBA,MAAM,oBAAoB,iBAAkC;;;;;;;;;;;;;;;;;;;;;;;AAwB5D,MAAa,WAAW,UAAwB;CAC9C,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,QAAQ,cAAc,QAAQ,WAAW,GAAG,SAAS;CAE7D,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBAAkB,gBAAgB,YAAY,GAAG,SAAS;EACrE,UAAU,oBAAC,QAAD;GAAM,WAAW,kBAAkB,CAAC,SAAS,CAAC;GAAI,UAAA;EAAY,CAAA;CAC1E;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}

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

@@ -0,0 +1,44 @@
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/components/fields/checkbox/checkbox-group.d.ts
+export type CheckboxGroupProps = CheckboxGroup$1.Props;
+export type CheckboxGroupState = CheckboxGroup$1.State;
+export type CheckboxGroupChangeEventDetails = CheckboxGroup$1.ChangeEventDetails;
+export type CheckboxGroupChangeEventReason = CheckboxGroup$1.ChangeEventReason;
+/**
+ * Guarda num array o `value` dos `Checkbox.Root` marcados dentro dele. Sem estilo de layout: a
+ * disposição vem por `className`.
+ *
+ * Para um "selecionar tudo", passe `allValues` com o `value` de todos os filhos e marque o
+ * checkbox pai com `parent`: ele fica misto com parte marcada e alterna todos de uma vez, sem
+ * `checked` nem `indeterminate` à mão.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox.Group
+ *   aria-labelledby="reports-label"
+ *   allValues={['invoices', 'bills']}
+ *   defaultValue={['invoices']}
+ * >
+ *   <label id="reports-label">
+ *     <Checkbox.Root parent>
+ *       <Checkbox.Indicator />
+ *     </Checkbox.Root>
+ *     Todos os relatórios
+ *   </label>
+ *
+ *   <label>
+ *     <Checkbox.Root value="invoices">
+ *       <Checkbox.Indicator />
+ *     </Checkbox.Root>
+ *     Notas fiscais
+ *   </label>
+ *   …
+ * </Checkbox.Group>
+ * ```
+ */
+export declare const CheckboxGroup: {
+  (props: CheckboxGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/fields/checkbox/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","names":["BaseCheckboxGroup"],"sources":["../../../../src/components/fields/checkbox/checkbox-group.tsx"],"mappings":";;YAGY,qBAAqBA,gBAAkB;YAEvC,qBAAqBA,gBAAkB;YAEvC,kCACVA,gBAAkB;YAER,iCACVA,gBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCP;GAAwB,OAAA,qCAAkB,IAAA"}

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

@@ -0,0 +1,49 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+//#region src/components/fields/checkbox/checkbox-group.tsx
+/**
+* Guarda num array o `value` dos `Checkbox.Root` marcados dentro dele. Sem estilo de layout: a
+* disposição vem por `className`.
+*
+* Para um "selecionar tudo", passe `allValues` com o `value` de todos os filhos e marque o
+* checkbox pai com `parent`: ele fica misto com parte marcada e alterna todos de uma vez, sem
+* `checked` nem `indeterminate` à mão.
+*
+* @example
+* ```tsx
+* <Checkbox.Group
+*   aria-labelledby="reports-label"
+*   allValues={['invoices', 'bills']}
+*   defaultValue={['invoices']}
+* >
+*   <label id="reports-label">
+*     <Checkbox.Root parent>
+*       <Checkbox.Indicator />
+*     </Checkbox.Root>
+*     Todos os relatórios
+*   </label>
+*
+*   <label>
+*     <Checkbox.Root value="invoices">
+*       <Checkbox.Indicator />
+*     </Checkbox.Root>
+*     Notas fiscais
+*   </label>
+*   …
+* </Checkbox.Group>
+* ```
+*/
+const CheckboxGroup = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(CheckboxGroup$1, {
+		"data-component": "Checkbox.Group",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+CheckboxGroup.displayName = "Checkbox.Group";
+//#endregion
+export { CheckboxGroup };
+
+//# sourceMappingURL=checkbox-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","names":["BaseCheckboxGroup"],"sources":["../../../../src/components/fields/checkbox/checkbox-group.tsx"],"sourcesContent":["import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport { mergeStateClassNames } from '#utils';\n\nexport type CheckboxGroupProps = BaseCheckboxGroup.Props;\n\nexport type CheckboxGroupState = BaseCheckboxGroup.State;\n\nexport type CheckboxGroupChangeEventDetails =\n  BaseCheckboxGroup.ChangeEventDetails;\n\nexport type CheckboxGroupChangeEventReason =\n  BaseCheckboxGroup.ChangeEventReason;\n\n/**\n * Guarda num array o `value` dos `Checkbox.Root` marcados dentro dele. Sem estilo de layout: a\n * disposição vem por `className`.\n *\n * Para um \"selecionar tudo\", passe `allValues` com o `value` de todos os filhos e marque o\n * checkbox pai com `parent`: ele fica misto com parte marcada e alterna todos de uma vez, sem\n * `checked` nem `indeterminate` à mão.\n *\n * @example\n * ```tsx\n * <Checkbox.Group\n *   aria-labelledby=\"reports-label\"\n *   allValues={['invoices', 'bills']}\n *   defaultValue={['invoices']}\n * >\n *   <label id=\"reports-label\">\n *     <Checkbox.Root parent>\n *       <Checkbox.Indicator />\n *     </Checkbox.Root>\n *     Todos os relatórios\n *   </label>\n *\n *   <label>\n *     <Checkbox.Root value=\"invoices\">\n *       <Checkbox.Indicator />\n *     </Checkbox.Root>\n *     Notas fiscais\n *   </label>\n *   …\n * </Checkbox.Group>\n * ```\n */\nexport const CheckboxGroup = (props: CheckboxGroupProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseCheckboxGroup\n      data-component=\"Checkbox.Group\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,iBAAD;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,15 @@
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/fields/checkbox/checkbox-indicator.d.ts
+export type CheckboxIndicatorProps = Checkbox.Indicator.Props;
+export type CheckboxIndicatorState = Checkbox.Indicator.State;
+/**
+ * O ícone dentro da caixa: check quando marcado, traço no `indeterminate`. Só
+ * existe no DOM nesses dois estados. O `Checkbox.Root` centraliza e dimensiona
+ * o svg pelo `size`. Com `children`, o conteúdo substitui o ícone.
+ */
+export declare const CheckboxIndicator: {
+  (props: CheckboxIndicatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=checkbox-indicator.d.ts.map

package/dist/components/fields/checkbox/checkbox-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-indicator.d.ts","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-indicator.tsx"],"mappings":";;YAKY,yBAAyBA,SAAa,UAAU;YAEhD,yBAAyBA,SAAa,UAAU;;;;;;qBAO/C;GAA4B,OAAA,yCAAsB,IAAA"}

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

@@ -0,0 +1,28 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckFatIcon, MinusIcon } from "@phosphor-icons/react";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/fields/checkbox/checkbox-indicator.tsx
+/**
+* O ícone dentro da caixa: check quando marcado, traço no `indeterminate`. Só
+* existe no DOM nesses dois estados. O `Checkbox.Root` centraliza e dimensiona
+* o svg pelo `size`. Com `children`, o conteúdo substitui o ícone.
+*/
+const CheckboxIndicator = (props) => {
+	const { className, children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		"data-component": "Checkbox.Indicator",
+		className: mergeStateClassNames(["flex"], className),
+		render: (renderProps, state) => /* @__PURE__ */ jsx("span", {
+			...renderProps,
+			children: children ?? /* @__PURE__ */ jsx(Icon, { render: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckFatIcon, { weight: "fill" }) })
+		}),
+		...rest
+	});
+};
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+//#endregion
+export { CheckboxIndicator };
+
+//# sourceMappingURL=checkbox-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-indicator.js","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-indicator.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { CheckFatIcon, MinusIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames } from '#utils';\n\nexport type CheckboxIndicatorProps = BaseCheckbox.Indicator.Props;\n\nexport type CheckboxIndicatorState = BaseCheckbox.Indicator.State;\n\n/**\n * O ícone dentro da caixa: check quando marcado, traço no `indeterminate`. Só\n * existe no DOM nesses dois estados. O `Checkbox.Root` centraliza e dimensiona\n * o svg pelo `size`. Com `children`, o conteúdo substitui o ícone.\n */\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => {\n  const { className, children, ...rest } = props;\n\n  return (\n    <BaseCheckbox.Indicator\n      data-component=\"Checkbox.Indicator\"\n      className={mergeStateClassNames(['flex'], className)}\n      // Função, para o ícone seguir o estado: o Base UI só expõe o `indeterminate` por aqui.\n      render={(renderProps, state) => (\n        <span {...renderProps}>\n          {children ?? (\n            <Icon\n              render={\n                state.indeterminate ? (\n                  <MinusIcon />\n                ) : (\n                  <CheckFatIcon weight=\"fill\" />\n                )\n              }\n            />\n          )}\n        </span>\n      )}\n      {...rest}\n    />\n  );\n};\n\nCheckboxIndicator.displayName = 'Checkbox.Indicator';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,UAAU,GAAG,SAAS;CAEzC,OACE,oBAACA,SAAa,WAAd;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,MAAM,GAAG,SAAS;EAEnD,SAAS,aAAa,UACpB,oBAAC,QAAD;GAAM,GAAI;GACP,UAAA,YACC,oBAAC,MAAD,EACE,QACE,MAAM,gBACJ,oBAAC,WAAD,CAAY,CAAA,IAEZ,oBAAC,cAAD,EAAc,QAAO,OAAQ,CAAA,EAGlC,CAAA;EAEC,CAAA;EAER,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc"}

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

@@ -0,0 +1,37 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/fields/checkbox/checkbox-root-variants.d.ts
+export type CheckboxRootVariants = {
+  /**
+   * Cor da caixa marcada, do ícone e do anel de foco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Tamanho da caixa. O ícone do `Checkbox.Indicator` acompanha.
+   *
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /**
+   * Desenho da caixa marcada.
+   *
+   * @default 'solid'
+   */
+  variant?: 'solid' | 'outline' | 'subtle';
+};
+export declare const checkboxRootDefaultVariants: Required<CheckboxRootVariants>;
+/**
+ * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas
+ * entram. Assim não há um bloco por combinação de cor e `variant`.
+ *
+ * Marcado e `indeterminate` pintam igual: o Base UI marca o segundo com `data-indeterminate`, sem
+ * `data-checked`, então cada regra vem nos dois.
+ */
+export declare const checkboxRootVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | 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=checkbox-root-variants.d.ts.map

package/dist/components/fields/checkbox/checkbox-root-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-root-variants.d.ts","names":[],"sources":["../../../../src/components/fields/checkbox/checkbox-root-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;EAMd;;;;;;EAMA;;qBAGW,6BAA6B,SAAS;;;;;;;;qBAatC,uBAAoB;;;;6CA8FhC"}

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

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/checkbox/checkbox-root-variants.ts
+const checkboxRootDefaultVariants = {
+	colorScheme: "gray",
+	size: "sm",
+	variant: "solid"
+};
+/**
+* Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas
+* entram. Assim não há um bloco por combinação de cor e `variant`.
+*
+* Marcado e `indeterminate` pintam igual: o Base UI marca o segundo com `data-indeterminate`, sem
+* `data-checked`, então cada regra vem nos dois.
+*/
+const checkboxRootVariants = cva([
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"align-middle",
+	"border",
+	"rounded-sm",
+	"corner-squircle",
+	"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:not-data-indeterminate:border-red-9",
+	"aria-invalid:not-data-checked:not-data-indeterminate:border-red-9",
+	"data-invalid:ring-red-9",
+	"aria-invalid:ring-red-9"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--checkbox-solid-bg:var(--color-black)]",
+				"dark:[--checkbox-solid-bg:var(--color-white)]",
+				"[--checkbox-subtle-bg:var(--color-gray-4)]",
+				"[--checkbox-fg:var(--color-gray-12)]",
+				"ring-gray-9"
+			],
+			brand: [
+				"[--checkbox-solid-bg:var(--color-brand-9)]",
+				"[--checkbox-subtle-bg:var(--color-brand-4)]",
+				"[--checkbox-fg:var(--color-brand-11)]",
+				"ring-brand-9"
+			]
+		},
+		size: {
+			xs: ["size-3", "[&_svg]:size-2"],
+			sm: ["size-4", "[&_svg]:size-2.5"],
+			md: ["size-5", "[&_svg]:size-3.5"],
+			lg: ["size-6", "[&_svg]:size-4.5"]
+		},
+		variant: {
+			solid: [
+				"border-gray-alpha-7",
+				"data-checked:border-(--checkbox-solid-bg)",
+				"data-checked:bg-(--checkbox-solid-bg)",
+				"data-indeterminate:border-(--checkbox-solid-bg)",
+				"data-indeterminate:bg-(--checkbox-solid-bg)",
+				"text-white"
+			],
+			outline: [
+				"border-gray-alpha-7",
+				"data-checked:border-(--checkbox-solid-bg)",
+				"data-indeterminate:border-(--checkbox-solid-bg)",
+				"text-(--checkbox-fg)"
+			],
+			subtle: [
+				"border-(--checkbox-subtle-bg)",
+				"bg-(--checkbox-subtle-bg)",
+				"text-(--checkbox-fg)"
+			]
+		}
+	},
+	compoundVariants: [{
+		variant: "solid",
+		colorScheme: "gray",
+		className: ["text-white", "dark:text-black"]
+	}],
+	defaultVariants: {
+		colorScheme: checkboxRootDefaultVariants.colorScheme,
+		size: checkboxRootDefaultVariants.size,
+		variant: checkboxRootDefaultVariants.variant
+	}
+});
+//#endregion
+export { checkboxRootDefaultVariants, checkboxRootVariants };
+
+//# sourceMappingURL=checkbox-root-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-root-variants.js","names":[],"sources":["../../../../src/components/fields/checkbox/checkbox-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type CheckboxRootVariants = {\n  /**\n   * Cor da caixa marcada, do ícone e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Tamanho da caixa. O ícone do `Checkbox.Indicator` acompanha.\n   *\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da caixa marcada.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline' | 'subtle';\n};\n\nexport const checkboxRootDefaultVariants: Required<CheckboxRootVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\n/**\n * Cada `colorScheme` só declara as variáveis `--checkbox-*`, e a `variant` decide onde elas\n * entram. Assim não há um bloco por combinação de cor e `variant`.\n *\n * Marcado e `indeterminate` pintam igual: o Base UI marca o segundo com `data-indeterminate`, sem\n * `data-checked`, então cada regra vem nos dois.\n */\nexport const checkboxRootVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'align-middle',\n\n    'border',\n    'rounded-sm',\n    'corner-squircle',\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ó a caixa desmarcada muda: o erro de um checkbox quase sempre é \"não marcado\".\n    'data-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'aria-invalid:not-data-checked:not-data-indeterminate:border-red-9',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--checkbox-solid-bg:var(--color-black)]',\n          'dark:[--checkbox-solid-bg:var(--color-white)]',\n          '[--checkbox-subtle-bg:var(--color-gray-4)]',\n          '[--checkbox-fg:var(--color-gray-12)]',\n          'ring-gray-9',\n        ],\n        brand: [\n          '[--checkbox-solid-bg:var(--color-brand-9)]',\n          '[--checkbox-subtle-bg:var(--color-brand-4)]',\n          '[--checkbox-fg:var(--color-brand-11)]',\n          'ring-brand-9',\n        ],\n      },\n      size: {\n        xs: ['size-3', '[&_svg]:size-2'],\n        sm: ['size-4', '[&_svg]:size-2.5'],\n        md: ['size-5', '[&_svg]:size-3.5'],\n        lg: ['size-6', '[&_svg]:size-4.5'],\n      },\n      variant: {\n        // Borda neutra desmarcado; marcado, a caixa inteira na cor.\n        solid: [\n          'border-gray-alpha-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-checked:bg-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n          'data-indeterminate:bg-(--checkbox-solid-bg)',\n\n          'text-white',\n        ],\n        // Borda neutra desmarcado; marcado, só a borda e o ícone na cor.\n        outline: [\n          'border-gray-alpha-7',\n\n          'data-checked:border-(--checkbox-solid-bg)',\n          'data-indeterminate:border-(--checkbox-solid-bg)',\n\n          'text-(--checkbox-fg)',\n        ],\n        // Fundo claro da cor nos dois estados; marcado, o ícone na cor.\n        subtle: [\n          'border-(--checkbox-subtle-bg)',\n          'bg-(--checkbox-subtle-bg)',\n\n          'text-(--checkbox-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: checkboxRootDefaultVariants.colorScheme,\n      size: checkboxRootDefaultVariants.size,\n      variant: checkboxRootDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,8BAA8D;CACzE,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;;;;AASA,MAAa,uBAAuB,IAClC;CACE;CACA;CACA;CACA;CACA;CAEA;CACA;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,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,UAAU,gBAAgB;GAC/B,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;GACjC,IAAI,CAAC,UAAU,kBAAkB;EACnC;EACA,SAAS;GAEP,OAAO;IACL;IAEA;IACA;IACA;IACA;IAEA;GACF;GAEA,SAAS;IACP;IAEA;IACA;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,4BAA4B;EACzC,MAAM,4BAA4B;EAClC,SAAS,4BAA4B;CACvC;AACF,CACF"}

package/dist/components/fields/checkbox/checkbox-root.d.ts

@@ -0,0 +1,32 @@
+import { CheckboxRootVariants } from "./checkbox-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/fields/checkbox/checkbox-root.d.ts
+export type CheckboxRootProps = MergeOverride<Checkbox.Root.Props, CheckboxRootVariants>;
+export type CheckboxRootState = Checkbox.Root.State;
+export type CheckboxRootChangeEventDetails = Checkbox.Root.ChangeEventDetails;
+export type CheckboxRootChangeEventReason = Checkbox.Root.ChangeEventReason;
+/**
+ * A caixa do checkbox, com um `<input>` escondido ao lado para o formulário.
+ * Renderiza um `<span>`, para caber dentro de um `<label>`: é o jeito mais
+ * simples de dar nome acessível. Sem rótulo visível, use `aria-label`.
+ *
+ * `indeterminate` mostra o estado misto (o traço do `Checkbox.Indicator`), como
+ * num "selecionar tudo" com parte marcada; ele não muda `checked`.
+ *
+ * @example
+ * ```tsx
+ * <label>
+ *   <Checkbox.Root>
+ *     <Checkbox.Indicator />
+ *   </Checkbox.Root>
+ *   Aceito os termos
+ * </label>
+ * ```
+ */
+export declare const CheckboxRoot: {
+  (props: CheckboxRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=checkbox-root.d.ts.map

package/dist/components/fields/checkbox/checkbox-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-root.d.ts","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-root.tsx"],"mappings":";;;;YAQY,oBAAoB,cAC9BA,SAAa,KAAK,OAClB;YAGU,oBAAoBA,SAAa,KAAK;YAEtC,iCACVA,SAAa,KAAK;YAER,gCAAgCA,SAAa,KAAK;;;;;;;;;;;;;;;;;;;qBAsBjD;GAAuB,OAAA,oCAAiB,IAAA"}

package/dist/components/fields/checkbox/checkbox-root.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { checkboxRootVariants } from "./checkbox-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/fields/checkbox/checkbox-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* A caixa do checkbox, com um `<input>` escondido ao lado para o formulário.
+* Renderiza um `<span>`, para caber dentro de um `<label>`: é o jeito mais
+* simples de dar nome acessível. Sem rótulo visível, use `aria-label`.
+*
+* `indeterminate` mostra o estado misto (o traço do `Checkbox.Indicator`), como
+* num "selecionar tudo" com parte marcada; ele não muda `checked`.
+*
+* @example
+* ```tsx
+* <label>
+*   <Checkbox.Root>
+*     <Checkbox.Indicator />
+*   </Checkbox.Root>
+*   Aceito os termos
+* </label>
+* ```
+*/
+const CheckboxRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-component": "Checkbox.Root",
+		className: mergeStateClassNames(checkboxRootVariants(variantProps), className),
+		...rest
+	});
+};
+CheckboxRoot.displayName = "Checkbox.Root";
+//#endregion
+export { CheckboxRoot };
+
+//# sourceMappingURL=checkbox-root.js.map

package/dist/components/fields/checkbox/checkbox-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-root.js","names":["BaseCheckbox"],"sources":["../../../../src/components/fields/checkbox/checkbox-root.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport {\n  type CheckboxRootVariants,\n  checkboxRootVariants,\n} from './checkbox-root-variants';\n\nexport type CheckboxRootProps = MergeOverride<\n  BaseCheckbox.Root.Props,\n  CheckboxRootVariants\n>;\n\nexport type CheckboxRootState = BaseCheckbox.Root.State;\n\nexport type CheckboxRootChangeEventDetails =\n  BaseCheckbox.Root.ChangeEventDetails;\n\nexport type CheckboxRootChangeEventReason = BaseCheckbox.Root.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<CheckboxRootVariants>();\n\n/**\n * A caixa do checkbox, com um `<input>` escondido ao lado para o formulário.\n * Renderiza um `<span>`, para caber dentro de um `<label>`: é o jeito mais\n * simples de dar nome acessível. Sem rótulo visível, use `aria-label`.\n *\n * `indeterminate` mostra o estado misto (o traço do `Checkbox.Indicator`), como\n * num \"selecionar tudo\" com parte marcada; ele não muda `checked`.\n *\n * @example\n * ```tsx\n * <label>\n *   <Checkbox.Root>\n *     <Checkbox.Indicator />\n *   </Checkbox.Root>\n *   Aceito os termos\n * </label>\n * ```\n */\nexport const CheckboxRoot = (props: CheckboxRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseCheckbox.Root\n      data-component=\"Checkbox.Root\"\n      className={mergeStateClassNames(\n        checkboxRootVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nCheckboxRoot.displayName = 'Checkbox.Root';\n"],"mappings":";;;;;;AAoBA,MAAM,oBAAoB,iBAAuC;;;;;;;;;;;;;;;;;;;AAoBjE,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,SAAa,MAAd;EACE,kBAAe;EACf,WAAW,qBACT,qBAAqB,YAAY,GACjC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

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

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

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

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