@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,4 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { Skeleton, SkeletonProps } from "./skeleton.js";
+import { SkeletonText, SkeletonTextProps } from "./skeleton-text.js";
+export { Skeleton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariants };

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

@@ -0,0 +1,3 @@
+import { Skeleton } from "./skeleton.js";
+import { SkeletonText } from "./skeleton-text.js";
+export { Skeleton, SkeletonText };

package/dist/components/feedback/skeleton/skeleton-text.d.ts

@@ -0,0 +1,35 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/skeleton/skeleton-text.d.ts
+export type SkeletonTextProps = MergeOverride<Omit<useRender.ComponentProps<'div'>, 'children'>, Pick<SkeletonVariants, 'variant'> & {
+  /**
+   * Quantidade de linhas. Com mais de uma, a última fica mais curta, como o fim de um
+   * parágrafo.
+   *
+   * @default 3
+   */
+  lines?: number;
+}>;
+/**
+ * Placeholder de um parágrafo: uma barra por linha.
+ *
+ * Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.
+ * Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a
+ * medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).
+ *
+ * Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).
+ *
+ * Fica fora de um namespace: o uso principal do `Skeleton` é avulso.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={2} className="text-sm/5" />
+ * ```
+ */
+export declare const SkeletonText: {
+  (props: SkeletonTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=skeleton-text.d.ts.map

package/dist/components/feedback/skeleton/skeleton-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-text.tsx"],"mappings":";;;;YAMY,oBAAoB,cAC9B,KAAK,UAAU,oCACf,KAAK;;;;;;;EAOH;;;;;;;;;;;;;;;;;;qBAsBS;GAAuB,OAAA,oCAAiB,+CAAA"}

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

@@ -0,0 +1,53 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Skeleton } from "./skeleton.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/skeleton/skeleton-text.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Placeholder de um parágrafo: uma barra por linha.
+*
+* Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.
+* Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a
+* medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).
+*
+* Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).
+*
+* Fica fora de um namespace: o uso principal do `Skeleton` é avulso.
+*
+* @example
+* ```tsx
+* <SkeletonText lines={2} className="text-sm/5" />
+* ```
+*/
+const SkeletonText = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["variant"]);
+	const { lines = 3, render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "SkeletonText",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"w-full"
+		], className),
+		children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(Skeleton, {
+			variant: variantProps.variant,
+			className: mergeTwClassNames([
+				"h-[0.75lh]",
+				"my-[0.125lh]",
+				"last:not-only:w-4/5"
+			])
+		}, index))
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+SkeletonText.displayName = "SkeletonText";
+//#endregion
+export { SkeletonText };
+
+//# sourceMappingURL=skeleton-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-text.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { Skeleton } from './skeleton';\nimport type { SkeletonVariants } from './skeleton-variants';\n\nexport type SkeletonTextProps = MergeOverride<\n  Omit<useRender.ComponentProps<'div'>, 'children'>,\n  Pick<SkeletonVariants, 'variant'> & {\n    /**\n     * Quantidade de linhas. Com mais de uma, a última fica mais curta, como o fim de um\n     * parágrafo.\n     *\n     * @default 3\n     */\n    lines?: number;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<Pick<SkeletonVariants, 'variant'>>();\n\n/**\n * Placeholder de um parágrafo: uma barra por linha.\n *\n * Cada linha mede `1lh`, a entrelinha do texto, com a barra mais fina centralizada pela margem.\n * Assim o bloco tem a altura que o texto terá, e a troca não move o layout. Para acertar a\n * medida, passe na `className` o tamanho e a entrelinha do texto que vai entrar (`text-sm/5`).\n *\n * Só ocupa o lugar do texto: a troca pelo conteúdo fica com quem usa (`Show`, ternário).\n *\n * Fica fora de um namespace: o uso principal do `Skeleton` é avulso.\n *\n * @example\n * ```tsx\n * <SkeletonText lines={2} className=\"text-sm/5\" />\n * ```\n */\nexport const SkeletonText = (props: SkeletonTextProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { lines = 3, render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'SkeletonText',\n    className: mergeTwClassNames(['flex', 'flex-col', 'w-full'], className),\n    children: Array.from({ length: lines }, (_, index) => (\n      <Skeleton\n        // As linhas são iguais e só mudam pela quantidade: o índice é a identidade.\n        key={index}\n        variant={variantProps.variant}\n        className={mergeTwClassNames([\n          'h-[0.75lh]',\n          'my-[0.125lh]',\n\n          'last:not-only:w-4/5',\n        ])}\n      />\n    )),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nSkeletonText.displayName = 'SkeletonText';\n"],"mappings":";;;;;;AAmBA,MAAM,oBAAoB,iBAAoD;;;;;;;;;;;;;;;;;AAkB9E,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB;GAAC;GAAQ;GAAY;EAAQ,GAAG,SAAS;EACtE,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UAC1C,oBAAC,UAAD;GAGE,SAAS,aAAa;GACtB,WAAW,kBAAkB;IAC3B;IACA;IAEA;GACF,CAAC;EACF,GARM,KAQN,CACF;CACH;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,29 @@
+//#region src/components/feedback/skeleton/skeleton-variants.d.ts
+export type SkeletonVariants = {
+  /**
+   * Mostra o bloco no lugar do conteúdo. Com `false`, os filhos aparecem com um fade.
+   *
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * Animação do bloco enquanto carrega: `pulse` varia a opacidade, `shine` passa um brilho da
+   * esquerda para a direita. Para um bloco parado, passe `animate-none` na `className`.
+   *
+   * @default 'pulse'
+   */
+  variant?: 'pulse' | 'shine';
+};
+export declare const skeletonDefaultVariants: Required<SkeletonVariants>;
+/**
+ * Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco
+ * mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica
+ * nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o
+ * gradiente: parado, ele seria só uma faixa clara fora de lugar.
+ */
+export declare const skeletonVariants: (props?: ({
+  loading?: boolean | null | undefined;
+  variant?: "pulse" | "shine" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=skeleton-variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-variants.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-variants.ts"],"mappings":";YAEY;;;;;;EAMV;;;;;;;EAOA;;qBAGW,yBAAyB,SAAS;;;;;;;qBAWlC,mBAAgB;;;6CAoD3B"}

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

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+//#region src/components/feedback/skeleton/skeleton-variants.ts
+const skeletonDefaultVariants = {
+	loading: true,
+	variant: "pulse"
+};
+/**
+* Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco
+* mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica
+* nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o
+* gradiente: parado, ele seria só uma faixa clara fora de lugar.
+*/
+const skeletonVariants = cva([], {
+	variants: {
+		loading: {
+			true: [
+				"shrink-0",
+				"rounded-md",
+				"corner-squircle",
+				"bg-gray-6",
+				"text-transparent",
+				"**:invisible",
+				"pointer-events-none",
+				"select-none"
+			],
+			false: ["animate-fade-in"]
+		},
+		variant: {
+			pulse: [],
+			shine: []
+		}
+	},
+	compoundVariants: [{
+		loading: true,
+		variant: "pulse",
+		className: ["not-motion-reduced:animate-skeleton-pulse"]
+	}, {
+		loading: true,
+		variant: "shine",
+		className: [
+			"bg-linear-to-r",
+			"from-gray-5",
+			"from-25%",
+			"via-gray-7",
+			"via-50%",
+			"to-gray-5",
+			"to-75%",
+			"bg-size-[400%_100%]",
+			"motion-reduced:bg-none",
+			"not-motion-reduced:animate-skeleton-shine"
+		]
+	}],
+	defaultVariants: {
+		loading: skeletonDefaultVariants.loading,
+		variant: skeletonDefaultVariants.variant
+	}
+});
+//#endregion
+export { skeletonDefaultVariants, skeletonVariants };
+
+//# sourceMappingURL=skeleton-variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-variants.js","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type SkeletonVariants = {\n  /**\n   * Mostra o bloco no lugar do conteúdo. Com `false`, os filhos aparecem com um fade.\n   *\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Animação do bloco enquanto carrega: `pulse` varia a opacidade, `shine` passa um brilho da\n   * esquerda para a direita. Para um bloco parado, passe `animate-none` na `className`.\n   *\n   * @default 'pulse'\n   */\n  variant?: 'pulse' | 'shine';\n};\n\nexport const skeletonDefaultVariants: Required<SkeletonVariants> = {\n  loading: true,\n  variant: 'pulse',\n};\n\n/**\n * Enquanto carrega, os filhos ficam `invisible` e o texto direto fica transparente: o bloco\n * mantém o tamanho do conteúdo sem mostrá-lo. A animação só existe nesse estado, por isso fica\n * nas `compoundVariants`. Com movimento reduzido, o bloco fica parado, e o `shine` perde o\n * gradiente: parado, ele seria só uma faixa clara fora de lugar.\n */\nexport const skeletonVariants = cva([], {\n  variants: {\n    loading: {\n      true: [\n        'shrink-0',\n\n        'rounded-md',\n        'corner-squircle',\n\n        'bg-gray-6',\n        'text-transparent',\n        '**:invisible',\n\n        'pointer-events-none',\n        'select-none',\n      ],\n      false: ['animate-fade-in'],\n    },\n    variant: {\n      pulse: [],\n      shine: [],\n    },\n  },\n  compoundVariants: [\n    {\n      loading: true,\n      variant: 'pulse',\n      className: ['not-motion-reduced:animate-skeleton-pulse'],\n    },\n    {\n      loading: true,\n      variant: 'shine',\n      className: [\n        // Pontas lisas até 25% e a partir de 75%: o loop emenda sem corte (ver o keyframe).\n        'bg-linear-to-r',\n        'from-gray-5',\n        'from-25%',\n        'via-gray-7',\n        'via-50%',\n        'to-gray-5',\n        'to-75%',\n        'bg-size-[400%_100%]',\n        'motion-reduced:bg-none',\n\n        'not-motion-reduced:animate-skeleton-shine',\n      ],\n    },\n  ],\n  defaultVariants: {\n    loading: skeletonDefaultVariants.loading,\n    variant: skeletonDefaultVariants.variant,\n  },\n});\n"],"mappings":";;AAkBA,MAAa,0BAAsD;CACjE,SAAS;CACT,SAAS;AACX;;;;;;;AAQA,MAAa,mBAAmB,IAAI,CAAC,GAAG;CACtC,UAAU;EACR,SAAS;GACP,MAAM;IACJ;IAEA;IACA;IAEA;IACA;IACA;IAEA;IACA;GACF;GACA,OAAO,CAAC,iBAAiB;EAC3B;EACA,SAAS;GACP,OAAO,CAAC;GACR,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,SAAS;EACT,WAAW,CAAC,2CAA2C;CACzD,GACA;EACE,SAAS;EACT,SAAS;EACT,WAAW;GAET;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;EACF;CACF,CACF;CACA,iBAAiB;EACf,SAAS,wBAAwB;EACjC,SAAS,wBAAwB;CACnC;AACF,CAAC"}

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

@@ -0,0 +1,33 @@
+import { SkeletonVariants } from "./skeleton-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/feedback/skeleton/skeleton.d.ts
+export type SkeletonProps = MergeOverride<useRender.ComponentProps<'div'>, SkeletonVariants>;
+/**
+ * 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>
+ * ```
+ */
+export declare const Skeleton: {
+  (props: SkeletonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../../src/components/feedback/skeleton/skeleton.tsx"],"mappings":";;;;YASY,gBAAgB,cAC1B,UAAU,uBACV;;;;;;;;;;;;;;;;;;;;;;;qBA2BW;GAAmB,OAAA,gCAAa,+CAAA"}

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