@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/fields/radio-card/radio-card-title.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useRadioCardItemContext } from "./use-radio-card-item-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/radio-card/radio-card-title.tsx
+/**
+* O nome do cartão, em tamanho fixo. O `Item` o liga a si por `aria-labelledby`, usando o `id`
+* que gera: sem esse título, o nome acessível seria o texto inteiro do cartão. Com um `id` próprio,
+* passe o mesmo id ao `aria-labelledby` do `Item`.
+*/
+const RadioCardTitle = (props) => {
+	const { render, className, ...rest } = props;
+	const { titleId } = useRadioCardItemContext();
+	const baseProps = {
+		"data-component": "RadioCard.Title",
+		id: titleId,
+		className: mergeTwClassNames([
+			"text-sm",
+			"leading-5",
+			"font-medium",
+			"text-gray-12",
+			"text-balance"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+RadioCardTitle.displayName = "RadioCard.Title";
+//#endregion
+export { RadioCardTitle };
+
+//# sourceMappingURL=radio-card-title.js.map

package/dist/components/fields/radio-card/radio-card-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card-title.js","names":[],"sources":["../../../../src/components/fields/radio-card/radio-card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useRadioCardItemContext } from './use-radio-card-item-context';\n\nexport type RadioCardTitleProps = useRender.ComponentProps<'span'>;\n\n/**\n * O nome do cartão, em tamanho fixo. O `Item` o liga a si por `aria-labelledby`, usando o `id`\n * que gera: sem esse título, o nome acessível seria o texto inteiro do cartão. Com um `id` próprio,\n * passe o mesmo id ao `aria-labelledby` do `Item`.\n */\nexport const RadioCardTitle = (props: RadioCardTitleProps) => {\n  const { render, className, ...rest } = props;\n\n  const { titleId } = useRadioCardItemContext();\n\n  const baseProps = {\n    'data-component': 'RadioCard.Title',\n    id: titleId,\n    className: mergeTwClassNames(\n      ['text-sm', 'leading-5', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nRadioCardTitle.displayName = 'RadioCard.Title';\n"],"mappings":";;;;;;;;;AAWA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,EAAE,YAAY,wBAAwB;CAE5C,MAAM,YAAY;EAChB,kBAAkB;EAClB,IAAI;EACJ,WAAW,kBACT;GAAC;GAAW;GAAa;GAAe;GAAgB;EAAc,GACtE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/components/fields/radio-card/use-radio-card-context.d.ts

@@ -0,0 +1,25 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/fields/radio-card/use-radio-card-context.d.ts
+/**
+ * Variantes do RadioCard. Informadas no `RadioCard.Group` e repassadas aos `RadioCard.Item` por
+ * contexto.
+ */
+export type RadioCardVariants = {
+  /**
+   * Cor do cartão marcado, do `RadioCard.Indicator` e do anel de foco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Desenho do cartão marcado: `outline` pinta a borda e um anel de 1px; `surface` pinta o fundo e
+   * a borda.
+   *
+   * @default 'outline'
+   */
+  variant?: 'outline' | 'surface';
+};
+export declare const radioCardDefaultVariants: Required<RadioCardVariants>;
+export declare const RadioCardContextProvider: import("react").Provider<RadioCardVariants>, useRadioCardContext: () => RadioCardVariants;
+//#endregion
+//# sourceMappingURL=use-radio-card-context.d.ts.map

package/dist/components/fields/radio-card/use-radio-card-context.js

@@ -0,0 +1,14 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/fields/radio-card/use-radio-card-context.ts
+const radioCardDefaultVariants = {
+	colorScheme: "gray",
+	variant: "outline"
+};
+const [RadioCardContextProvider, useRadioCardContext] = createContext({
+	name: "RadioCardContext",
+	providers: ["RadioCard.Group"]
+});
+//#endregion
+export { RadioCardContextProvider, radioCardDefaultVariants, useRadioCardContext };
+
+//# sourceMappingURL=use-radio-card-context.js.map

package/dist/components/fields/radio-card/use-radio-card-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-radio-card-context.js","names":[],"sources":["../../../../src/components/fields/radio-card/use-radio-card-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ColorSchemeCore } from '#types';\n\n/**\n * Variantes do RadioCard. Informadas no `RadioCard.Group` e repassadas aos `RadioCard.Item` por\n * contexto.\n */\nexport type RadioCardVariants = {\n  /**\n   * Cor do cartão marcado, do `RadioCard.Indicator` e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Desenho do cartão marcado: `outline` pinta a borda e um anel de 1px; `surface` pinta o fundo e\n   * a borda.\n   *\n   * @default 'outline'\n   */\n  variant?: 'outline' | 'surface';\n};\n\nexport const radioCardDefaultVariants: Required<RadioCardVariants> = {\n  colorScheme: 'gray',\n  variant: 'outline',\n};\n\nexport const [RadioCardContextProvider, useRadioCardContext] =\n  createContext<RadioCardVariants>({\n    name: 'RadioCardContext',\n    providers: ['RadioCard.Group'],\n  });\n"],"mappings":";;AAuBA,MAAa,2BAAwD;CACnE,aAAa;CACb,SAAS;AACX;AAEA,MAAa,CAAC,0BAA0B,uBACtC,cAAiC;CAC/B,MAAM;CACN,WAAW,CAAC,iBAAiB;AAC/B,CAAC"}

package/dist/components/fields/radio-card/use-radio-card-item-context.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/fields/radio-card/use-radio-card-item-context.d.ts
+/**
+ * Ids que o `RadioCard.Item` gera para nomear e descrever o cartão. O `Title` e o `Description`
+ * os lêem e os aplicam ao próprio elemento.
+ */
+export type RadioCardItemContextValue = {
+  descriptionId: string;
+  titleId: string;
+};
+export declare const RadioCardItemContextProvider: import("react").Provider<RadioCardItemContextValue>, useRadioCardItemContext: () => RadioCardItemContextValue;
+//#endregion
+//# sourceMappingURL=use-radio-card-item-context.d.ts.map

package/dist/components/fields/radio-card/use-radio-card-item-context.js

@@ -0,0 +1,10 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/fields/radio-card/use-radio-card-item-context.ts
+const [RadioCardItemContextProvider, useRadioCardItemContext] = createContext({
+	name: "RadioCardItemContext",
+	providers: ["RadioCard.Item"]
+});
+//#endregion
+export { RadioCardItemContextProvider, useRadioCardItemContext };
+
+//# sourceMappingURL=use-radio-card-item-context.js.map

package/dist/components/fields/radio-card/use-radio-card-item-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-radio-card-item-context.js","names":[],"sources":["../../../../src/components/fields/radio-card/use-radio-card-item-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\n\n/**\n * Ids que o `RadioCard.Item` gera para nomear e descrever o cartão. O `Title` e o `Description`\n * os lêem e os aplicam ao próprio elemento.\n */\nexport type RadioCardItemContextValue = {\n  descriptionId: string;\n  titleId: string;\n};\n\nexport const [RadioCardItemContextProvider, useRadioCardItemContext] =\n  createContext<RadioCardItemContextValue>({\n    name: 'RadioCardItemContext',\n    providers: ['RadioCard.Item'],\n  });\n"],"mappings":";;AAWA,MAAa,CAAC,8BAA8B,2BAC1C,cAAyC;CACvC,MAAM;CACN,WAAW,CAAC,gBAAgB;AAC9B,CAAC"}

package/dist/components/fields/segmented-control/index.d.ts

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

package/dist/components/fields/segmented-control/index.js

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

package/dist/components/fields/segmented-control/index.parts.d.ts

@@ -0,0 +1,10 @@
+import { SegmentedControlIndicator, SegmentedControlIndicatorProps } from "./segmented-control-indicator.js";
+import { SegmentedControlItem, SegmentedControlItemProps, SegmentedControlItemState } from "./segmented-control-item.js";
+import { SegmentedControlVariants } from "./use-segmented-control-context.js";
+import { SegmentedControlRoot, SegmentedControlRootChangeEventDetails, SegmentedControlRootChangeEventReason, SegmentedControlRootProps, SegmentedControlRootState } from "./segmented-control-root.js";
+declare namespace index_parts_d_exports {
+  export { SegmentedControlIndicator as Indicator, SegmentedControlIndicatorProps as IndicatorProps, SegmentedControlItem as Item, SegmentedControlItemProps as ItemProps, SegmentedControlItemState as ItemState, SegmentedControlRoot as Root, SegmentedControlRootChangeEventDetails as RootChangeEventDetails, SegmentedControlRootChangeEventReason as RootChangeEventReason, SegmentedControlRootProps as RootProps, SegmentedControlRootState as RootState, SegmentedControlVariants as Variants };
+}
+//#endregion
+export { SegmentedControlIndicator as Indicator, type SegmentedControlIndicatorProps as IndicatorProps, SegmentedControlItem as Item, type SegmentedControlItemProps as ItemProps, type SegmentedControlItemState as ItemState, SegmentedControlRoot as Root, type SegmentedControlRootChangeEventDetails as RootChangeEventDetails, type SegmentedControlRootChangeEventReason as RootChangeEventReason, type SegmentedControlRootProps as RootProps, type SegmentedControlRootState as RootState, type SegmentedControlVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/fields/segmented-control/index.parts.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { SegmentedControlIndicator } from "./segmented-control-indicator.js";
+import { SegmentedControlItem } from "./segmented-control-item.js";
+import { SegmentedControlRoot } from "./segmented-control-root.js";
+//#region src/components/fields/segmented-control/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => SegmentedControlIndicator,
+	Item: () => SegmentedControlItem,
+	Root: () => SegmentedControlRoot
+});
+//#endregion
+export { SegmentedControlIndicator as Indicator, SegmentedControlItem as Item, SegmentedControlRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/fields/segmented-control/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/fields/segmented-control/index.parts.ts"],"sourcesContent":["export { SegmentedControlIndicator as Indicator } from './segmented-control-indicator';\nexport { SegmentedControlItem as Item } from './segmented-control-item';\nexport { SegmentedControlRoot as Root } from './segmented-control-root';\n\n/* types */\n\nexport type { SegmentedControlIndicatorProps as IndicatorProps } from './segmented-control-indicator';\nexport type {\n  SegmentedControlItemProps as ItemProps,\n  SegmentedControlItemState as ItemState,\n} from './segmented-control-item';\nexport type {\n  SegmentedControlRootChangeEventDetails as RootChangeEventDetails,\n  SegmentedControlRootChangeEventReason as RootChangeEventReason,\n  SegmentedControlRootProps as RootProps,\n  SegmentedControlRootState as RootState,\n} from './segmented-control-root';\nexport type { SegmentedControlVariants as Variants } from './use-segmented-control-context';\n"],"mappings":""}

package/dist/components/fields/segmented-control/segmented-control-indicator.d.ts

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/fields/segmented-control/segmented-control-indicator.d.ts
+export type SegmentedControlIndicatorProps = useRender.ComponentProps<'span'>;
+/**
+ * Camada que desliza atrás do item marcado. Monte dentro do `SegmentedControl.Root`, depois dos
+ * itens. Posição e tamanho vêm de `--segmented-control-indicator-*`, que o `Root` escreve a partir
+ * do item marcado. Fica escondido sem item marcado e até a primeira medida, e só anima depois
+ * dela (a transição fica sob `not-motion-reduced:`). Não entra na árvore de acessibilidade.
+ *
+ * Copia o `tabsIndicatorVariants` na `variant` `enclosed`, com a posição em
+ * `--segmented-control-indicator-*` no lugar das `--active-tab-*` do Base UI, a transição só
+ * depois da primeira medida, e o fundo `solid` do `colorScheme`, sem a sombra.
+ *
+ * O nome segue o `Tabs.Indicator`: não é o `Indicator` de ícone das outras partes da lib.
+ */
+export declare const SegmentedControlIndicator: {
+  (props: SegmentedControlIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=segmented-control-indicator.d.ts.map

package/dist/components/fields/segmented-control/segmented-control-indicator.js

@@ -0,0 +1,50 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/fields/segmented-control/segmented-control-indicator.tsx
+/**
+* Camada que desliza atrás do item marcado. Monte dentro do `SegmentedControl.Root`, depois dos
+* itens. Posição e tamanho vêm de `--segmented-control-indicator-*`, que o `Root` escreve a partir
+* do item marcado. Fica escondido sem item marcado e até a primeira medida, e só anima depois
+* dela (a transição fica sob `not-motion-reduced:`). Não entra na árvore de acessibilidade.
+*
+* Copia o `tabsIndicatorVariants` na `variant` `enclosed`, com a posição em
+* `--segmented-control-indicator-*` no lugar das `--active-tab-*` do Base UI, a transição só
+* depois da primeira medida, e o fundo `solid` do `colorScheme`, sem a sombra.
+*
+* O nome segue o `Tabs.Indicator`: não é o `Indicator` de ícone das outras partes da lib.
+*/
+const SegmentedControlIndicator = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "SegmentedControl.Indicator",
+		"aria-hidden": true,
+		className: mergeTwClassNames([
+			"absolute",
+			"top-0",
+			"left-0",
+			"-z-1",
+			"h-(--segmented-control-indicator-height)",
+			"w-(--segmented-control-indicator-width)",
+			"translate-x-(--segmented-control-indicator-left)",
+			"translate-y-(--segmented-control-indicator-top)",
+			"rounded-(--segmented-control-item-radius)",
+			"corner-squircle",
+			"bg-(--segmented-control-indicator-bg)",
+			"group-not-has-[[data-checked]]/segmented-control:hidden",
+			"group-not-data-measured/segmented-control:hidden",
+			"group-data-measured/segmented-control:not-motion-reduced:transition-[translate,width,height]",
+			"group-data-measured/segmented-control:not-motion-reduced:ease-move",
+			"group-data-measured/segmented-control:not-motion-reduced:duration-150"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, rest)
+	});
+};
+SegmentedControlIndicator.displayName = "SegmentedControl.Indicator";
+//#endregion
+export { SegmentedControlIndicator };
+
+//# sourceMappingURL=segmented-control-indicator.js.map

package/dist/components/fields/segmented-control/segmented-control-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-indicator.js","names":[],"sources":["../../../../src/components/fields/segmented-control/segmented-control-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type SegmentedControlIndicatorProps = useRender.ComponentProps<'span'>;\n\n/**\n * Camada que desliza atrás do item marcado. Monte dentro do `SegmentedControl.Root`, depois dos\n * itens. Posição e tamanho vêm de `--segmented-control-indicator-*`, que o `Root` escreve a partir\n * do item marcado. Fica escondido sem item marcado e até a primeira medida, e só anima depois\n * dela (a transição fica sob `not-motion-reduced:`). Não entra na árvore de acessibilidade.\n *\n * Copia o `tabsIndicatorVariants` na `variant` `enclosed`, com a posição em\n * `--segmented-control-indicator-*` no lugar das `--active-tab-*` do Base UI, a transição só\n * depois da primeira medida, e o fundo `solid` do `colorScheme`, sem a sombra.\n *\n * O nome segue o `Tabs.Indicator`: não é o `Indicator` de ícone das outras partes da lib.\n */\nexport const SegmentedControlIndicator = (\n  props: SegmentedControlIndicatorProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'SegmentedControl.Indicator',\n    'aria-hidden': true,\n    className: mergeTwClassNames(\n      [\n        'absolute',\n        'top-0',\n        'left-0',\n        '-z-1',\n\n        'h-(--segmented-control-indicator-height)',\n        'w-(--segmented-control-indicator-width)',\n        'translate-x-(--segmented-control-indicator-left)',\n        'translate-y-(--segmented-control-indicator-top)',\n\n        'rounded-(--segmented-control-item-radius)',\n        'corner-squircle',\n\n        'bg-(--segmented-control-indicator-bg)',\n\n        // Sem item marcado não há o que mostrar; antes da primeira medida, o item se pinta.\n        'group-not-has-[[data-checked]]/segmented-control:hidden',\n        'group-not-data-measured/segmented-control:hidden',\n\n        // A transição só liga depois da primeira medida: sem ela, o indicador deslizaria da origem.\n        'group-data-measured/segmented-control:not-motion-reduced:transition-[translate,width,height]',\n        'group-data-measured/segmented-control:not-motion-reduced:ease-move',\n        'group-data-measured/segmented-control:not-motion-reduced:duration-150',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSegmentedControlIndicator.displayName = 'SegmentedControl.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,eAAe;EACf,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;GAGA;GACA;GAGA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}

package/dist/components/fields/segmented-control/segmented-control-item-variants.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/fields/segmented-control/segmented-control-item-variants.d.ts
+/**
+ * Copia o `tabsTabVariants` na `variant` `enclosed`. Diferenças:
+ *
+ * - a altura desconta o `p-1` da trilha de `--segmented-control-height`, e o `size` define o
+ *   padding, o texto e o ícone;
+ * - o item marcado só pinta o próprio fundo enquanto o `Root` não mediu o `Indicator`
+ *   (`data-measured` ausente): é o primeiro desenho, sem o salto do indicador chegando;
+ * - o item é um radio (`data-checked`), não uma tab (`data-active`);
+ * - o texto marcado inverte sobre o `solid` (`--segmented-control-checked-fg`).
+ */
+export declare const segmentedControlItemVariants: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=segmented-control-item-variants.d.ts.map

package/dist/components/fields/segmented-control/segmented-control-item-variants.js

@@ -0,0 +1,72 @@
+import { segmentedControlDefaultVariants } from "./use-segmented-control-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/fields/segmented-control/segmented-control-item-variants.ts
+/**
+* Copia o `tabsTabVariants` na `variant` `enclosed`. Diferenças:
+*
+* - a altura desconta o `p-1` da trilha de `--segmented-control-height`, e o `size` define o
+*   padding, o texto e o ícone;
+* - o item marcado só pinta o próprio fundo enquanto o `Root` não mediu o `Indicator`
+*   (`data-measured` ausente): é o primeiro desenho, sem o salto do indicador chegando;
+* - o item é um radio (`data-checked`), não uma tab (`data-active`);
+* - o texto marcado inverte sobre o `solid` (`--segmented-control-checked-fg`).
+*/
+const segmentedControlItemVariants = cva([
+	"relative",
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"h-[calc(var(--segmented-control-height)-0.5rem)]",
+	"min-w-[calc(var(--segmented-control-height)-0.5rem)]",
+	"rounded-(--segmented-control-item-radius)",
+	"whitespace-nowrap",
+	"font-medium",
+	"text-gray-11",
+	"data-checked:text-(--segmented-control-checked-fg)",
+	"corner-squircle",
+	"select-none",
+	"cursor-pointer",
+	"transition-[color]",
+	"ring-gray-9",
+	"focus-ring-inside",
+	"[--focus-ring-width:2px]",
+	"focus-visible:z-10",
+	"data-readonly:cursor-default",
+	"group-not-data-disabled/segmented-control:data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"group-not-data-measured/segmented-control:data-checked:bg-(--segmented-control-indicator-bg)",
+	"[&_svg]:shrink-0"
+], {
+	variants: { size: {
+		xs: [
+			"px-2.5",
+			"gap-1.5",
+			"text-xs",
+			"[&_svg]:size-3.5"
+		],
+		sm: [
+			"px-3",
+			"gap-2",
+			"text-sm",
+			"[&_svg]:size-4"
+		],
+		md: [
+			"px-4",
+			"gap-2",
+			"text-sm",
+			"[&_svg]:size-4"
+		],
+		lg: [
+			"px-4",
+			"gap-2.5",
+			"text-base",
+			"[&_svg]:size-5"
+		]
+	} },
+	defaultVariants: { size: segmentedControlDefaultVariants.size }
+});
+//#endregion
+export { segmentedControlItemVariants };
+
+//# sourceMappingURL=segmented-control-item-variants.js.map

package/dist/components/fields/segmented-control/segmented-control-item-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-item-variants.js","names":[],"sources":["../../../../src/components/fields/segmented-control/segmented-control-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { segmentedControlDefaultVariants } from './use-segmented-control-context';\n\n/**\n * Copia o `tabsTabVariants` na `variant` `enclosed`. Diferenças:\n *\n * - a altura desconta o `p-1` da trilha de `--segmented-control-height`, e o `size` define o\n *   padding, o texto e o ícone;\n * - o item marcado só pinta o próprio fundo enquanto o `Root` não mediu o `Indicator`\n *   (`data-measured` ausente): é o primeiro desenho, sem o salto do indicador chegando;\n * - o item é um radio (`data-checked`), não uma tab (`data-active`);\n * - o texto marcado inverte sobre o `solid` (`--segmented-control-checked-fg`).\n */\nexport const segmentedControlItemVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n\n    // A trilha tem `p-1`: o item desconta os dois lados para a trilha ficar na altura do campo.\n    'h-[calc(var(--segmented-control-height)-0.5rem)]',\n    'min-w-[calc(var(--segmented-control-height)-0.5rem)]',\n\n    'rounded-(--segmented-control-item-radius)',\n\n    'whitespace-nowrap',\n    'font-medium',\n    'text-gray-11',\n    'data-checked:text-(--segmented-control-checked-fg)',\n\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'transition-[color]',\n\n    'ring-gray-9',\n    'focus-ring-inside',\n    '[--focus-ring-width:2px]',\n    'focus-visible:z-10',\n\n    'data-readonly:cursor-default',\n\n    // O Root já esmaece tudo quando o grupo é desabilitado; só o item desabilitado esmaece sozinho.\n    'group-not-data-disabled/segmented-control:data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    // Até o Root medir o Indicator, o item marcado se pinta.\n    'group-not-data-measured/segmented-control:data-checked:bg-(--segmented-control-indicator-bg)',\n\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      size: {\n        xs: ['px-2.5', 'gap-1.5', 'text-xs', '[&_svg]:size-3.5'],\n        sm: ['px-3', 'gap-2', 'text-sm', '[&_svg]:size-4'],\n        md: ['px-4', 'gap-2', 'text-sm', '[&_svg]:size-4'],\n        lg: ['px-4', 'gap-2.5', 'text-base', '[&_svg]:size-5'],\n      },\n    },\n    defaultVariants: {\n      size: segmentedControlDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,+BAA+B,IAC1C;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAGA;CACA;CAGA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAU;GAAW;GAAW;EAAkB;EACvD,IAAI;GAAC;GAAQ;GAAS;GAAW;EAAgB;EACjD,IAAI;GAAC;GAAQ;GAAS;GAAW;EAAgB;EACjD,IAAI;GAAC;GAAQ;GAAW;GAAa;EAAgB;CACvD,EACF;CACA,iBAAiB,EACf,MAAM,gCAAgC,KACxC;AACF,CACF"}

package/dist/components/fields/segmented-control/segmented-control-item.d.ts

@@ -0,0 +1,17 @@
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/segmented-control/segmented-control-item.d.ts
+export type SegmentedControlItemProps = Radio.Root.Props;
+export type SegmentedControlItemState = Radio.Root.State;
+/**
+ * Uma opção do controle: o próprio radio, com o texto (e o ícone) como filhos. Precisa de um
+ * `value` e fica dentro de um `SegmentedControl.Root`. Renderiza um `<button type="button">` com
+ * `role="radio"` (`nativeButton`), não o `<span>` do `Radio.Root`: o botão nativo dá o foco, o
+ * `:focus-visible` e o nome pelo conteúdo sem depender de um `<label>`, e o `type="button"` impede
+ * o envio do formulário. Com só um ícone, dê o nome com `aria-label`.
+ */
+export declare const SegmentedControlItem: {
+  (props: SegmentedControlItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=segmented-control-item.d.ts.map

package/dist/components/fields/segmented-control/segmented-control-item.js

@@ -0,0 +1,29 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useSegmentedControlContext } from "./use-segmented-control-context.js";
+import { segmentedControlItemVariants } from "./segmented-control-item-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/fields/segmented-control/segmented-control-item.tsx
+/**
+* Uma opção do controle: o próprio radio, com o texto (e o ícone) como filhos. Precisa de um
+* `value` e fica dentro de um `SegmentedControl.Root`. Renderiza um `<button type="button">` com
+* `role="radio"` (`nativeButton`), não o `<span>` do `Radio.Root`: o botão nativo dá o foco, o
+* `:focus-visible` e o nome pelo conteúdo sem depender de um `<label>`, e o `type="button"` impede
+* o envio do formulário. Com só um ícone, dê o nome com `aria-label`.
+*/
+const SegmentedControlItem = (props) => {
+	const { className, ...rest } = props;
+	const { size } = useSegmentedControlContext();
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-component": "SegmentedControl.Item",
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		className: mergeStateClassNames(segmentedControlItemVariants({ size }), className),
+		...rest
+	});
+};
+SegmentedControlItem.displayName = "SegmentedControl.Item";
+//#endregion
+export { SegmentedControlItem };
+
+//# sourceMappingURL=segmented-control-item.js.map

package/dist/components/fields/segmented-control/segmented-control-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-item.js","names":["BaseRadio"],"sources":["../../../../src/components/fields/segmented-control/segmented-control-item.tsx"],"sourcesContent":["import { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { mergeStateClassNames } from '#utils';\nimport { segmentedControlItemVariants } from './segmented-control-item-variants';\nimport { useSegmentedControlContext } from './use-segmented-control-context';\n\nexport type SegmentedControlItemProps = BaseRadio.Root.Props;\n\nexport type SegmentedControlItemState = BaseRadio.Root.State;\n\n/**\n * Uma opção do controle: o próprio radio, com o texto (e o ícone) como filhos. Precisa de um\n * `value` e fica dentro de um `SegmentedControl.Root`. Renderiza um `<button type=\"button\">` com\n * `role=\"radio\"` (`nativeButton`), não o `<span>` do `Radio.Root`: o botão nativo dá o foco, o\n * `:focus-visible` e o nome pelo conteúdo sem depender de um `<label>`, e o `type=\"button\"` impede\n * o envio do formulário. Com só um ícone, dê o nome com `aria-label`.\n */\nexport const SegmentedControlItem = (props: SegmentedControlItemProps) => {\n  const { className, ...rest } = props;\n\n  const { size } = useSegmentedControlContext();\n\n  return (\n    <BaseRadio.Root\n      data-component=\"SegmentedControl.Item\"\n      nativeButton={true}\n      render={<button type=\"button\" />}\n      className={mergeStateClassNames(\n        segmentedControlItemVariants({ size }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,wBAAwB,UAAqC;CACxE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,SAAS,2BAA2B;CAE5C,OACE,oBAACA,MAAU,MAAX;EACE,kBAAe;EACf,cAAc;EACd,QAAQ,oBAAC,UAAD,EAAQ,MAAK,SAAU,CAAA;EAC/B,WAAW,qBACT,6BAA6B,EAAE,KAAK,CAAC,GACrC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

package/dist/components/fields/segmented-control/segmented-control-root-variants.d.ts

@@ -0,0 +1,21 @@
+//#region src/components/fields/segmented-control/segmented-control-root-variants.d.ts
+/**
+ * Copia o `tabsListVariants` na `variant` `enclosed` (a trilha) e declara as variáveis
+ * `--segmented-control-*` que o `Item` e o `Indicator` leem. Diferenças:
+ *
+ * - o `size` declara `--segmented-control-height`, a altura TOTAL do controle (a mesma do
+ *   `Input` do mesmo `size`); o `Item` desconta o `p-1` da trilha;
+ * - não há `fitted` nem `justify`: o controle ocupa só o que os itens pedem;
+ * - o `colorScheme` declara a cor do item marcado, o `solid` do `Button` (no Tabs, ele é o fundo
+ *   claro da `--tabs-enclosed-bg`, com sombra);
+ * - o estado desabilitado e o inválido pintam a trilha inteira (`opacity-50`, anel vermelho);
+ * - o `Root` escreve, a partir do item marcado, as variáveis `--segmented-control-indicator-*`
+ *   (ver `useSegmentedControlIndicator`).
+ */
+export declare const segmentedControlRootVariants: (props?: ({
+  colorScheme?: "gray" | "accent" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=segmented-control-root-variants.d.ts.map

package/dist/components/fields/segmented-control/segmented-control-root-variants.js

@@ -0,0 +1,66 @@
+import { segmentedControlDefaultVariants } from "./use-segmented-control-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/fields/segmented-control/segmented-control-root-variants.ts
+/**
+* Copia o `tabsListVariants` na `variant` `enclosed` (a trilha) e declara as variáveis
+* `--segmented-control-*` que o `Item` e o `Indicator` leem. Diferenças:
+*
+* - o `size` declara `--segmented-control-height`, a altura TOTAL do controle (a mesma do
+*   `Input` do mesmo `size`); o `Item` desconta o `p-1` da trilha;
+* - não há `fitted` nem `justify`: o controle ocupa só o que os itens pedem;
+* - o `colorScheme` declara a cor do item marcado, o `solid` do `Button` (no Tabs, ele é o fundo
+*   claro da `--tabs-enclosed-bg`, com sombra);
+* - o estado desabilitado e o inválido pintam a trilha inteira (`opacity-50`, anel vermelho);
+* - o `Root` escreve, a partir do item marcado, as variáveis `--segmented-control-indicator-*`
+*   (ver `useSegmentedControlIndicator`).
+*/
+const segmentedControlRootVariants = cva([
+	"group/segmented-control",
+	"relative",
+	"isolate",
+	"inline-flex",
+	"rounded-md",
+	"corner-squircle",
+	"bg-gray-3",
+	"p-1",
+	"[--segmented-control-item-radius:var(--radius-md)]",
+	"data-disabled:opacity-50",
+	"data-disabled:cursor-not-allowed",
+	"data-invalid:ring-1",
+	"data-invalid:ring-inset",
+	"data-invalid:ring-red-9",
+	"aria-invalid:ring-1",
+	"aria-invalid:ring-inset",
+	"aria-invalid:ring-red-9"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--segmented-control-indicator-bg:var(--color-black)]",
+				"dark:[--segmented-control-indicator-bg:var(--color-white)]",
+				"[--segmented-control-checked-fg:var(--color-white)]",
+				"dark:[--segmented-control-checked-fg:var(--color-black)]"
+			],
+			accent: ["[--segmented-control-indicator-bg:var(--accent-9)]", "[--segmented-control-checked-fg:var(--color-white)]"]
+		},
+		orientation: {
+			horizontal: ["flex-row", "items-center"],
+			vertical: ["flex-col", "items-stretch"]
+		},
+		size: {
+			xs: ["[--segmented-control-height:--spacing(8)]"],
+			sm: ["[--segmented-control-height:--spacing(9)]"],
+			md: ["[--segmented-control-height:--spacing(10)]"],
+			lg: ["[--segmented-control-height:--spacing(11)]"]
+		}
+	},
+	defaultVariants: {
+		colorScheme: segmentedControlDefaultVariants.colorScheme,
+		orientation: segmentedControlDefaultVariants.orientation,
+		size: segmentedControlDefaultVariants.size
+	}
+});
+//#endregion
+export { segmentedControlRootVariants };
+
+//# sourceMappingURL=segmented-control-root-variants.js.map

package/dist/components/fields/segmented-control/segmented-control-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-root-variants.js","names":[],"sources":["../../../../src/components/fields/segmented-control/segmented-control-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { segmentedControlDefaultVariants } from './use-segmented-control-context';\n\n/**\n * Copia o `tabsListVariants` na `variant` `enclosed` (a trilha) e declara as variáveis\n * `--segmented-control-*` que o `Item` e o `Indicator` leem. Diferenças:\n *\n * - o `size` declara `--segmented-control-height`, a altura TOTAL do controle (a mesma do\n *   `Input` do mesmo `size`); o `Item` desconta o `p-1` da trilha;\n * - não há `fitted` nem `justify`: o controle ocupa só o que os itens pedem;\n * - o `colorScheme` declara a cor do item marcado, o `solid` do `Button` (no Tabs, ele é o fundo\n *   claro da `--tabs-enclosed-bg`, com sombra);\n * - o estado desabilitado e o inválido pintam a trilha inteira (`opacity-50`, anel vermelho);\n * - o `Root` escreve, a partir do item marcado, as variáveis `--segmented-control-indicator-*`\n *   (ver `useSegmentedControlIndicator`).\n */\nexport const segmentedControlRootVariants = cva(\n  [\n    // `group` lido pelo Item e pelo Indicator.\n    'group/segmented-control',\n\n    'relative',\n    'isolate',\n\n    'inline-flex',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'bg-gray-3',\n    'p-1',\n\n    '[--segmented-control-item-radius:var(--radius-md)]',\n\n    'data-disabled:opacity-50',\n    'data-disabled:cursor-not-allowed',\n\n    // Anel por dentro: o controle não cresce, e o erro de um grupo não é de um item só.\n    'data-invalid:ring-1',\n    'data-invalid:ring-inset',\n    'data-invalid:ring-red-9',\n    'aria-invalid:ring-1',\n    'aria-invalid:ring-inset',\n    'aria-invalid:ring-red-9',\n  ],\n  {\n    variants: {\n      // A trilha é neutra nas duas cores; o item marcado é o `solid` do `Button` da cor.\n      colorScheme: {\n        gray: [\n          '[--segmented-control-indicator-bg:var(--color-black)]',\n          'dark:[--segmented-control-indicator-bg:var(--color-white)]',\n          '[--segmented-control-checked-fg:var(--color-white)]',\n          'dark:[--segmented-control-checked-fg:var(--color-black)]',\n        ],\n        accent: [\n          '[--segmented-control-indicator-bg:var(--accent-9)]',\n          '[--segmented-control-checked-fg:var(--color-white)]',\n        ],\n      },\n      orientation: {\n        horizontal: ['flex-row', 'items-center'],\n        vertical: ['flex-col', 'items-stretch'],\n      },\n      size: {\n        xs: ['[--segmented-control-height:--spacing(8)]'],\n        sm: ['[--segmented-control-height:--spacing(9)]'],\n        md: ['[--segmented-control-height:--spacing(10)]'],\n        lg: ['[--segmented-control-height:--spacing(11)]'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: segmentedControlDefaultVariants.colorScheme,\n      orientation: segmentedControlDefaultVariants.orientation,\n      size: segmentedControlDefaultVariants.size,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,+BAA+B,IAC1C;CAEE;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EAER,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACA;GACF;GACA,QAAQ,CACN,sDACA,qDACF;EACF;EACA,aAAa;GACX,YAAY,CAAC,YAAY,cAAc;GACvC,UAAU,CAAC,YAAY,eAAe;EACxC;EACA,MAAM;GACJ,IAAI,CAAC,2CAA2C;GAChD,IAAI,CAAC,2CAA2C;GAChD,IAAI,CAAC,4CAA4C;GACjD,IAAI,CAAC,4CAA4C;EACnD;CACF;CACA,iBAAiB;EACf,aAAa,gCAAgC;EAC7C,aAAa,gCAAgC;EAC7C,MAAM,gCAAgC;CACxC;AACF,CACF"}

package/dist/components/fields/segmented-control/segmented-control-root.d.ts

@@ -0,0 +1,41 @@
+import { SegmentedControlVariants } from "./use-segmented-control-context.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/fields/segmented-control/segmented-control-root.d.ts
+export type SegmentedControlRootProps = MergeOverride<RadioGroup.Props, SegmentedControlVariants>;
+export type SegmentedControlRootState = RadioGroup.State;
+export type SegmentedControlRootChangeEventDetails = RadioGroup.ChangeEventDetails;
+export type SegmentedControlRootChangeEventReason = RadioGroup.ChangeEventReason;
+/**
+ * Escolha de uma opção entre poucas, num controle segmentado: o `RadioGroup` do Base UI, com a
+ * mesma API do `Radio.Group` (`value`, `defaultValue`, `onValueChange`, `name`, `disabled`,
+ * `readOnly`, `required`) e a mesma integração com `Field` e `Fieldset`. O valor sai no
+ * `FormData` pelo `name`.
+ *
+ * O `Item` é o próprio radio, e o `Indicator` é a camada que desliza atrás do item marcado.
+ * O `Root` mede o item marcado e escreve a posição do indicador em
+ * `--segmented-control-indicator-*`, no próprio elemento. Dê o nome ao grupo com `aria-label`,
+ * `aria-labelledby` ou, num formulário, pelo `Fieldset.Root`
+ * (`<Fieldset.Root render={<SegmentedControl.Root />}>`, dentro de um `Field.Root` com `name`).
+ *
+ * O item marcado e o indicador são o `solid` do `Button` na cor do `colorScheme`, sobre a trilha
+ * `gray-3`; o texto marcado inverte para contrastar.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl.Root
+ *   aria-label="Tipo de pessoa"
+ *   defaultValue="fisica"
+ * >
+ *   <SegmentedControl.Item value="fisica">Pessoa física</SegmentedControl.Item>
+ *   <SegmentedControl.Item value="juridica">Pessoa jurídica</SegmentedControl.Item>
+ *   <SegmentedControl.Indicator />
+ * </SegmentedControl.Root>
+ * ```
+ */
+export declare const SegmentedControlRoot: {
+  (props: SegmentedControlRootProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=segmented-control-root.d.ts.map

package/dist/components/fields/segmented-control/segmented-control-root.js

@@ -0,0 +1,65 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { SegmentedControlContextProvider, segmentedControlDefaultVariants } from "./use-segmented-control-context.js";
+import { segmentedControlRootVariants } from "./segmented-control-root-variants.js";
+import { useSegmentedControlIndicator } from "./use-segmented-control-indicator.js";
+import { mergeRefs } from "@lucasbernardosn/react-utils";
+import { useMemo } from "react";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/fields/segmented-control/segmented-control-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Escolha de uma opção entre poucas, num controle segmentado: o `RadioGroup` do Base UI, com a
+* mesma API do `Radio.Group` (`value`, `defaultValue`, `onValueChange`, `name`, `disabled`,
+* `readOnly`, `required`) e a mesma integração com `Field` e `Fieldset`. O valor sai no
+* `FormData` pelo `name`.
+*
+* O `Item` é o próprio radio, e o `Indicator` é a camada que desliza atrás do item marcado.
+* O `Root` mede o item marcado e escreve a posição do indicador em
+* `--segmented-control-indicator-*`, no próprio elemento. Dê o nome ao grupo com `aria-label`,
+* `aria-labelledby` ou, num formulário, pelo `Fieldset.Root`
+* (`<Fieldset.Root render={<SegmentedControl.Root />}>`, dentro de um `Field.Root` com `name`).
+*
+* O item marcado e o indicador são o `solid` do `Button` na cor do `colorScheme`, sobre a trilha
+* `gray-3`; o texto marcado inverte para contrastar.
+*
+* @example
+* ```tsx
+* <SegmentedControl.Root
+*   aria-label="Tipo de pessoa"
+*   defaultValue="fisica"
+* >
+*   <SegmentedControl.Item value="fisica">Pessoa física</SegmentedControl.Item>
+*   <SegmentedControl.Item value="juridica">Pessoa jurídica</SegmentedControl.Item>
+*   <SegmentedControl.Indicator />
+* </SegmentedControl.Root>
+* ```
+*/
+const SegmentedControlRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"orientation",
+		"size"
+	]);
+	const { className, ref, ...rest } = elementProps;
+	const { rootRef, isMeasured } = useSegmentedControlIndicator();
+	/** Estável entre renders: a ref de quem usa não é desligada e religada a cada render. */
+	const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [rootRef, ref]);
+	return /* @__PURE__ */ jsx(SegmentedControlContextProvider, {
+		value: variantProps,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			ref: mergedRef,
+			"data-component": "SegmentedControl.Root",
+			"data-orientation": variantProps.orientation ?? segmentedControlDefaultVariants.orientation,
+			"data-measured": isMeasured ? "" : void 0,
+			className: mergeStateClassNames(segmentedControlRootVariants(variantProps), className),
+			...rest
+		})
+	});
+};
+SegmentedControlRoot.displayName = "SegmentedControl.Root";
+//#endregion
+export { SegmentedControlRoot };
+
+//# sourceMappingURL=segmented-control-root.js.map

package/dist/components/fields/segmented-control/segmented-control-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-root.js","names":["BaseRadioGroup"],"sources":["../../../../src/components/fields/segmented-control/segmented-control-root.tsx"],"sourcesContent":["import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { mergeRefs } from '@lucasbernardosn/react-utils';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { useMemo } from 'react';\nimport { mergeStateClassNames } from '#utils';\nimport { segmentedControlRootVariants } from './segmented-control-root-variants';\nimport {\n  SegmentedControlContextProvider,\n  type SegmentedControlVariants,\n  segmentedControlDefaultVariants,\n} from './use-segmented-control-context';\nimport { useSegmentedControlIndicator } from './use-segmented-control-indicator';\n\nexport type SegmentedControlRootProps = MergeOverride<\n  BaseRadioGroup.Props,\n  SegmentedControlVariants\n>;\n\nexport type SegmentedControlRootState = BaseRadioGroup.State;\n\nexport type SegmentedControlRootChangeEventDetails =\n  BaseRadioGroup.ChangeEventDetails;\n\nexport type SegmentedControlRootChangeEventReason =\n  BaseRadioGroup.ChangeEventReason;\n\nconst splitVariantProps = createSplitProps<SegmentedControlVariants>();\n\n/**\n * Escolha de uma opção entre poucas, num controle segmentado: o `RadioGroup` do Base UI, com a\n * mesma API do `Radio.Group` (`value`, `defaultValue`, `onValueChange`, `name`, `disabled`,\n * `readOnly`, `required`) e a mesma integração com `Field` e `Fieldset`. O valor sai no\n * `FormData` pelo `name`.\n *\n * O `Item` é o próprio radio, e o `Indicator` é a camada que desliza atrás do item marcado.\n * O `Root` mede o item marcado e escreve a posição do indicador em\n * `--segmented-control-indicator-*`, no próprio elemento. Dê o nome ao grupo com `aria-label`,\n * `aria-labelledby` ou, num formulário, pelo `Fieldset.Root`\n * (`<Fieldset.Root render={<SegmentedControl.Root />}>`, dentro de um `Field.Root` com `name`).\n *\n * O item marcado e o indicador são o `solid` do `Button` na cor do `colorScheme`, sobre a trilha\n * `gray-3`; o texto marcado inverte para contrastar.\n *\n * @example\n * ```tsx\n * <SegmentedControl.Root\n *   aria-label=\"Tipo de pessoa\"\n *   defaultValue=\"fisica\"\n * >\n *   <SegmentedControl.Item value=\"fisica\">Pessoa física</SegmentedControl.Item>\n *   <SegmentedControl.Item value=\"juridica\">Pessoa jurídica</SegmentedControl.Item>\n *   <SegmentedControl.Indicator />\n * </SegmentedControl.Root>\n * ```\n */\nexport const SegmentedControlRoot = (props: SegmentedControlRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'orientation',\n    'size',\n  ]);\n\n  const { className, ref, ...rest } = elementProps;\n\n  const { rootRef, isMeasured } = useSegmentedControlIndicator();\n\n  /** Estável entre renders: a ref de quem usa não é desligada e religada a cada render. */\n  const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [rootRef, ref]);\n\n  return (\n    <SegmentedControlContextProvider value={variantProps}>\n      <BaseRadioGroup\n        ref={mergedRef}\n        data-component=\"SegmentedControl.Root\"\n        data-orientation={\n          variantProps.orientation ??\n          segmentedControlDefaultVariants.orientation\n        }\n        data-measured={isMeasured ? '' : undefined}\n        className={mergeStateClassNames(\n          segmentedControlRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </SegmentedControlContextProvider>\n  );\n};\n\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n"],"mappings":";;;;;;;;;;AA6BA,MAAM,oBAAoB,iBAA2C;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BrE,MAAa,wBAAwB,UAAqC;CACxE,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,KAAK,GAAG,SAAS;CAEpC,MAAM,EAAE,SAAS,eAAe,6BAA6B;;CAG7D,MAAM,YAAY,cAAc,UAAU,SAAS,GAAG,GAAG,CAAC,SAAS,GAAG,CAAC;CAEvE,OACE,oBAAC,iCAAD;EAAiC,OAAO;EACtC,UAAA,oBAACA,YAAD;GACE,KAAK;GACL,kBAAe;GACf,oBACE,aAAa,eACb,gCAAgC;GAElC,iBAAe,aAAa,KAAK,KAAA;GACjC,WAAW,qBACT,6BAA6B,YAAY,GACzC,SACF;GACA,GAAI;EACL,CAAA;CAC8B,CAAA;AAErC;AAEA,qBAAqB,cAAc"}