@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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?: "outline" | "subtle" | "solid" | 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 };

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

@@ -0,0 +1,10 @@
+import { CheckboxGroup, CheckboxGroupChangeEventDetails, CheckboxGroupChangeEventReason, CheckboxGroupProps, CheckboxGroupState } from "./checkbox-group.js";
+import { CheckboxIndicator, CheckboxIndicatorProps, CheckboxIndicatorState } from "./checkbox-indicator.js";
+import { CheckboxRootVariants } from "./checkbox-root-variants.js";
+import { CheckboxRoot, CheckboxRootChangeEventDetails, CheckboxRootChangeEventReason, CheckboxRootProps, CheckboxRootState } from "./checkbox-root.js";
+declare namespace index_parts_d_exports {
+  export { CheckboxGroup as Group, CheckboxGroupChangeEventDetails as GroupChangeEventDetails, CheckboxGroupChangeEventReason as GroupChangeEventReason, CheckboxGroupProps as GroupProps, CheckboxGroupState as GroupState, CheckboxIndicator as Indicator, CheckboxIndicatorProps as IndicatorProps, CheckboxIndicatorState as IndicatorState, CheckboxRoot as Root, CheckboxRootChangeEventDetails as RootChangeEventDetails, CheckboxRootChangeEventReason as RootChangeEventReason, CheckboxRootProps as RootProps, CheckboxRootState as RootState, CheckboxRootVariants as RootVariants };
+}
+//#endregion
+export { CheckboxGroup as Group, type CheckboxGroupChangeEventDetails as GroupChangeEventDetails, type CheckboxGroupChangeEventReason as GroupChangeEventReason, type CheckboxGroupProps as GroupProps, type CheckboxGroupState as GroupState, CheckboxIndicator as Indicator, type CheckboxIndicatorProps as IndicatorProps, type CheckboxIndicatorState as IndicatorState, CheckboxRoot as Root, type CheckboxRootChangeEventDetails as RootChangeEventDetails, type CheckboxRootChangeEventReason as RootChangeEventReason, type CheckboxRootProps as RootProps, type CheckboxRootState as RootState, type CheckboxRootVariants as RootVariants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/checkbox/index.parts.ts"],"sourcesContent":["export { CheckboxGroup as Group } from './checkbox-group';\nexport { CheckboxIndicator as Indicator } from './checkbox-indicator';\nexport { CheckboxRoot as Root } from './checkbox-root';\n\n/* types */\n\nexport type {\n  CheckboxGroupChangeEventDetails as GroupChangeEventDetails,\n  CheckboxGroupChangeEventReason as GroupChangeEventReason,\n  CheckboxGroupProps as GroupProps,\n  CheckboxGroupState as GroupState,\n} from './checkbox-group';\n\nexport type {\n  CheckboxIndicatorProps as IndicatorProps,\n  CheckboxIndicatorState as IndicatorState,\n} from './checkbox-indicator';\nexport type {\n  CheckboxRootChangeEventDetails as RootChangeEventDetails,\n  CheckboxRootChangeEventReason as RootChangeEventReason,\n  CheckboxRootProps as RootProps,\n  CheckboxRootState as RootState,\n} from './checkbox-root';\nexport type { CheckboxRootVariants as RootVariants } from './checkbox-root-variants';\n"],"mappings":""}

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.d.ts

@@ -0,0 +1,31 @@
+//#region src/components/fields/currency-brl-input/currency-brl-input-variants.d.ts
+export type CurrencyBrlInputVariants = {
+  /**
+   * Altura, padding e tamanho do texto, os mesmos do `Input`. Substitui o atributo nativo `size`:
+   * a largura vem do CSS. Em tela de toque, do `2xs` ao `md` o texto sobe para 16px, para o iPhone
+   * não dar zoom no foco.
+   *
+   * @default 'sm'
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * Fundo e borda do campo.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'subtle';
+};
+export declare const currencyBrlInputDefaultVariants: Required<CurrencyBrlInputVariants>;
+/**
+ * Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+ * mesmo jeito, explicados lá. As diferenças:
+ * - sem `data-placeholder`;
+ * - `tabular-nums`, que dá a mesma largura a todos os dígitos: o valor não muda de largura a cada
+ *   tecla nem quando o separador de milhar entra.
+ */
+export declare const currencyBrlInputVariants: (props?: ({
+  variant?: "outline" | "subtle" | null | undefined;
+  size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=currency-brl-input-variants.d.ts.map

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input-variants.d.ts","names":[],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input-variants.ts"],"mappings":";YAEY;;;;;;;;EAQV;;;;;;EAMA;;qBAGW,iCAAiC,SAAS;;;;;;;;qBAa1C,2BAAwB;;;6CAoIpC"}

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.js

@@ -0,0 +1,116 @@
+import { cva } from "class-variance-authority";
+//#region src/components/fields/currency-brl-input/currency-brl-input-variants.ts
+const currencyBrlInputDefaultVariants = {
+	size: "sm",
+	variant: "outline"
+};
+/**
+* Cópia de `inputVariants`, a origem do visual dos campos: o anel de foco e o inválido funcionam do
+* mesmo jeito, explicados lá. As diferenças:
+* - sem `data-placeholder`;
+* - `tabular-nums`, que dá a mesma largura a todos os dígitos: o valor não muda de largura a cada
+*   tecla nem quando o separador de milhar entra.
+*/
+const currencyBrlInputVariants = cva([
+	"relative",
+	"w-full",
+	"appearance-none",
+	"outline-none",
+	"text-start",
+	"font-normal",
+	"text-gray-12",
+	"tabular-nums",
+	"placeholder:text-gray-9/90",
+	"border",
+	"rounded-md",
+	"corner-squircle",
+	"[--currency-brl-input-focus-color:var(--color-black)]",
+	"dark:[--currency-brl-input-focus-color:var(--color-white)]",
+	"focus-visible:outline-1",
+	"focus-visible:outline-solid",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-(--currency-brl-input-focus-color)",
+	"focus-visible:border-(--currency-brl-input-focus-color)",
+	"data-focused:outline-1",
+	"data-focused:outline-solid",
+	"data-focused:-outline-offset-2",
+	"data-focused:outline-(--currency-brl-input-focus-color)",
+	"data-focused:border-(--currency-brl-input-focus-color)",
+	"disabled:opacity-50",
+	"disabled:cursor-not-allowed",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-invalid:border-red-9",
+	"data-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]",
+	"aria-invalid:border-red-9",
+	"aria-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]",
+	"user-invalid:border-red-9",
+	"user-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]"
+], {
+	variants: {
+		variant: {
+			outline: [
+				"bg-white/90",
+				"dark:bg-black/90",
+				"border-gray-alpha-7"
+			],
+			subtle: ["bg-gray-4", "border-transparent"]
+		},
+		size: {
+			"2xs": [
+				"h-7",
+				"min-w-7",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			xs: [
+				"h-8",
+				"min-w-8",
+				"px-2",
+				"text-xs",
+				"any-pointer-coarse:text-base"
+			],
+			sm: [
+				"h-9",
+				"min-w-9",
+				"px-2.5",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			md: [
+				"h-10",
+				"min-w-10",
+				"px-3",
+				"text-sm",
+				"any-pointer-coarse:text-base"
+			],
+			lg: [
+				"h-11",
+				"min-w-11",
+				"px-4",
+				"text-base"
+			],
+			xl: [
+				"h-12",
+				"min-w-12",
+				"px-4.5",
+				"text-base"
+			],
+			"2xl": [
+				"h-16",
+				"min-w-16",
+				"px-5",
+				"text-lg"
+			]
+		}
+	},
+	defaultVariants: {
+		size: currencyBrlInputDefaultVariants.size,
+		variant: currencyBrlInputDefaultVariants.variant
+	}
+});
+//#endregion
+export { currencyBrlInputDefaultVariants, currencyBrlInputVariants };
+
+//# sourceMappingURL=currency-brl-input-variants.js.map

package/dist/components/fields/currency-brl-input/currency-brl-input-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input-variants.js","names":[],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CurrencyBrlInputVariants = {\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 currencyBrlInputDefaultVariants: Required<CurrencyBrlInputVariants> =\n  {\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 valor não muda de largura a cada\n *   tecla nem quando o separador de milhar entra.\n */\nexport const currencyBrlInputVariants = 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-9/90',\n\n    'border',\n    'rounded-md',\n    'corner-squircle',\n\n    '[--currency-brl-input-focus-color:var(--color-black)]',\n    'dark:[--currency-brl-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-(--currency-brl-input-focus-color)',\n    'focus-visible:border-(--currency-brl-input-focus-color)',\n\n    'data-focused:outline-1',\n    'data-focused:outline-solid',\n    'data-focused:-outline-offset-2',\n    'data-focused:outline-(--currency-brl-input-focus-color)',\n    'data-focused:border-(--currency-brl-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:[--currency-brl-input-focus-color:var(--color-red-9)]',\n    'aria-invalid:border-red-9',\n    'aria-invalid:[--currency-brl-input-focus-color:var(--color-red-9)]',\n    'user-invalid:border-red-9',\n    'user-invalid:[--currency-brl-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: currencyBrlInputDefaultVariants.size,\n      variant: currencyBrlInputDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAmBA,MAAa,kCACX;CACE,MAAM;CACN,SAAS;AACX;;;;;;;;AASF,MAAa,2BAA2B,IACtC;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;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,gCAAgC;EACtC,SAAS,gCAAgC;CAC3C;AACF,CACF"}

package/dist/components/fields/currency-brl-input/currency-brl-input.d.ts

@@ -0,0 +1,72 @@
+import { CurrencyBrlInputVariants } from "./currency-brl-input-variants.js";
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { Input } from "@base-ui/react/input";
+import { NumberFormatBaseProps } from "react-number-format";
+//#region src/components/fields/currency-brl-input/currency-brl-input.d.ts
+export type CurrencyBrlInputProps = MergeOverride<Omit<NumberFormatBaseProps<Input.Props>, 'customInput' | 'displayType' | 'format' | 'getCaretBoundary' | 'getInputRef' | 'isCharacterSame' | 'isValidInputCharacter' | 'removeFormatting' | 'renderText' | 'valueIsNumericString'>, CurrencyBrlInputVariants & {
+  /**
+   * O valor em reais, para o modo controlado. `null` deixa o campo vazio.
+   */
+  value?: number | null;
+  /**
+   * O valor inicial em reais, para o modo não controlado.
+   */
+  defaultValue?: number | null;
+  /**
+   * Chamado a cada mudança feita pelo usuário, com o valor em reais, ou `null` com o campo
+   * vazio. Mudar o `value` por prop não o chama.
+   */
+  onValueChange?: (value: number | null, details: CurrencyBrlInputChangeEventDetails) => void;
+  /**
+   * Aceita valor negativo: o `-` alterna o sinal.
+   *
+   * @default false
+   */
+  allowNegative?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
+}>;
+export type CurrencyBrlInputState = Input.State;
+export type CurrencyBrlInputChangeEventDetails = {
+  /**
+   * O texto como aparece no campo (`"R$ 1.234,56"`).
+   */
+  formattedValue: string;
+  /**
+   * O evento da digitação.
+   */
+  event: React.SyntheticEvent<HTMLInputElement> | undefined;
+};
+/**
+ * Campo de valor em reais com a digitação de caixa eletrônico: cada dígito entra pelos centavos e
+ * empurra os anteriores para a esquerda ("1", "12", "123" → R$ 0,01, R$ 0,12, R$ 1,23). Sobre o
+ * `NumberFormatBase` do `react-number-format` e o `Input` do Base UI: liga-se sozinho ao `Field`
+ * quando está dentro de um, como o `Input` da lib.
+ *
+ * - O dígito entra sempre no fim, onde quer que esteja o cursor; o Backspace apaga o último.
+ * - Sem dígitos (ou só zeros), o campo fica vazio e o valor é `null`. Zero digitado não fica:
+ *   o zero vem pelo `value`.
+ * - O texto colado é lido como número em pt-BR: "1.234,5", "1234.5" e "1234" viram R$ 1.234,50,
+ *   R$ 1.234,50 e R$ 1.234,00.
+ * - No máximo 15 dígitos (R$ 9.999.999.999.999,99), dentro da precisão de um `number`.
+ *
+ * O valor sai pelo `onValueChange`. O campo guarda o texto formatado (`"R$ 1.234,56"`), e é ele
+ * que vai no `FormData`, no `onFormSubmit` do `Form` e no `validate` do `Field`.
+ *
+ * O teclado do celular é o numérico (`inputMode="numeric"`). No iPhone, ele não tem o sinal de
+ * menos; para digitar negativo lá, `inputMode="text"`.
+ *
+ * @example
+ * ```tsx
+ * <CurrencyBrlInput
+ *   aria-label="Valor do pedido"
+ *   onValueChange={(value) => setAmount(value)}
+ * />
+ * ```
+ */
+export declare const CurrencyBrlInput: {
+  (props: CurrencyBrlInputProps): React.JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=currency-brl-input.d.ts.map

package/dist/components/fields/currency-brl-input/currency-brl-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-brl-input.d.ts","names":["BaseInput"],"sources":["../../../../src/components/fields/currency-brl-input/currency-brl-input.tsx"],"mappings":";;;;;;YAcY,wBAAwB,cAClC,KACE,sBAAsBA,MAAU,mMAYlC;;;;EAIE;;;;EAIA;;;;;EAKA,iBACE,sBACA,SAAS;;;;;;EAOX;EACA,MAAM,MAAM,IAAI;;YAIR,wBAAwBA,MAAU;YAElC;;;;EAIV;;;;EAIA,OAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCjB;GAA2B,OAAA,wBAAqB,MAAA,IAAA"}