@lucasbernardosn/react-ui 0.0.0-stage → 0.1.0

package/dist/components/typography/heading/heading.d.ts

@@ -0,0 +1,40 @@
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/heading/heading.d.ts
+/**
+ * Props do `Heading`.
+ */
+export type HeadingProps = MergeOverride<useRender.ComponentProps<'h2'>, {
+  /**
+   * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência:
+   * o tamanho vem por `className`. Com `render`, a tag do `render` prevalece.
+   *
+   * @default 2
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+/**
+ * Título de seção.
+ *
+ * O nível do título é uma decisão de estrutura do documento, não de
+ * aparência: escolha o `level` pela hierarquia da página e ajuste o tamanho
+ * por `className`.
+ *
+ * @example
+ * ```tsx
+ * <Heading>Configurações</Heading>
+ *
+ * <Heading
+ *   level={1}
+ *   className="text-2xl"
+ * >
+ *   Título da página
+ * </Heading>
+ * ```
+ */
+export declare const Heading: {
+  (props: HeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=heading.d.ts.map

package/dist/components/typography/heading/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","names":[],"sources":["../../../../src/components/typography/heading/heading.tsx"],"mappings":";;;;;;YAOY,eAAe,cACzB,UAAU;;;;;;;EAQR;;;;;;;;;;;;;;;;;;;;;qBAuBS;GAAkB,OAAA,+BAAY,+CAAA"}

package/dist/components/typography/heading/heading.js

@@ -0,0 +1,44 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/heading/heading.tsx
+/**
+* Título de seção.
+*
+* O nível do título é uma decisão de estrutura do documento, não de
+* aparência: escolha o `level` pela hierarquia da página e ajuste o tamanho
+* por `className`.
+*
+* @example
+* ```tsx
+* <Heading>Configurações</Heading>
+*
+* <Heading
+*   level={1}
+*   className="text-2xl"
+* >
+*   Título da página
+* </Heading>
+* ```
+*/
+const Heading = (props) => {
+	const { level = 2, render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Heading",
+		className: mergeTwClassNames([
+			"text-gray-12",
+			"text-xl",
+			"font-semibold",
+			"text-balance"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: `h${level}`,
+		props: mergeProps(baseProps, rest)
+	});
+};
+Heading.displayName = "Heading";
+//#endregion
+export { Heading };
+
+//# sourceMappingURL=heading.js.map

package/dist/components/typography/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","names":[],"sources":["../../../../src/components/typography/heading/heading.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `Heading`.\n */\nexport type HeadingProps = MergeOverride<\n  useRender.ComponentProps<'h2'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência:\n     * o tamanho vem por `className`. Com `render`, a tag do `render` prevalece.\n     *\n     * @default 2\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título de seção.\n *\n * O nível do título é uma decisão de estrutura do documento, não de\n * aparência: escolha o `level` pela hierarquia da página e ajuste o tamanho\n * por `className`.\n *\n * @example\n * ```tsx\n * <Heading>Configurações</Heading>\n *\n * <Heading\n *   level={1}\n *   className=\"text-2xl\"\n * >\n *   Título da página\n * </Heading>\n * ```\n */\nexport const Heading = (props: HeadingProps) => {\n  const { level = 2, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Heading',\n    className: mergeTwClassNames(\n      ['text-gray-12', 'text-xl', 'font-semibold', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nHeading.displayName = 'Heading';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAgB;GAAW;GAAiB;EAAc,GAC3D,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,QAAQ,cAAc"}

package/dist/components/typography/heading/index.d.ts

@@ -0,0 +1,2 @@
+import { Heading, HeadingProps } from "./heading.js";
+export { Heading, type HeadingProps };

package/dist/components/typography/heading/index.js

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

package/dist/components/typography/kbd/index.d.ts

@@ -0,0 +1,4 @@
+import { KbdVariants } from "./kbd-variants.js";
+import { Kbd, KbdProps } from "./kbd.js";
+import { KbdGroup, KbdGroupProps } from "./kbd-group.js";
+export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdVariants };

package/dist/components/typography/kbd/index.js

@@ -0,0 +1,3 @@
+import { Kbd } from "./kbd.js";
+import { KbdGroup } from "./kbd-group.js";
+export { Kbd, KbdGroup };

package/dist/components/typography/kbd/kbd-group.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/kbd/kbd-group.d.ts
+/**
+ * Props do `KbdGroup`.
+ */
+export type KbdGroupProps = useRender.ComponentProps<'kbd'>;
+/**
+ * Atalho de várias teclas: um `Kbd` por tecla, com o separador escrito entre
+ * eles. O `kbd` externo é a marcação de combinação de teclas do HTML.
+ *
+ * Fica fora de um namespace: o uso principal do `Kbd` é avulso, e um
+ * `Kbd.Key` alongaria o caso comum. As variantes ficam em cada `Kbd`.
+ *
+ * @example
+ * ```tsx
+ * <KbdGroup>
+ *   <Kbd>Ctrl</Kbd>+<Kbd>Shift</Kbd>+<Kbd>Del</Kbd>
+ * </KbdGroup>
+ * ```
+ */
+export declare const KbdGroup: {
+  (props: KbdGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=kbd-group.d.ts.map

package/dist/components/typography/kbd/kbd-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-group.d.ts","names":[],"sources":["../../../../src/components/typography/kbd/kbd-group.tsx"],"mappings":";;;;;YAMY,gBAAgB,UAAU;;;;;;;;;;;;;;;qBAgBzB;GAAmB,OAAA,gCAAa,+CAAA"}

package/dist/components/typography/kbd/kbd-group.js

@@ -0,0 +1,40 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/kbd/kbd-group.tsx
+/**
+* Atalho de várias teclas: um `Kbd` por tecla, com o separador escrito entre
+* eles. O `kbd` externo é a marcação de combinação de teclas do HTML.
+*
+* Fica fora de um namespace: o uso principal do `Kbd` é avulso, e um
+* `Kbd.Key` alongaria o caso comum. As variantes ficam em cada `Kbd`.
+*
+* @example
+* ```tsx
+* <KbdGroup>
+*   <Kbd>Ctrl</Kbd>+<Kbd>Shift</Kbd>+<Kbd>Del</Kbd>
+* </KbdGroup>
+* ```
+*/
+const KbdGroup = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "KbdGroup",
+		className: mergeTwClassNames([
+			"inline-flex",
+			"items-center",
+			"gap-1",
+			"text-gray-11",
+			"text-sm"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "kbd",
+		props: mergeProps(baseProps, rest)
+	});
+};
+KbdGroup.displayName = "KbdGroup";
+//#endregion
+export { KbdGroup };
+
+//# sourceMappingURL=kbd-group.js.map

package/dist/components/typography/kbd/kbd-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-group.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd-group.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `KbdGroup`.\n */\nexport type KbdGroupProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * Atalho de várias teclas: um `Kbd` por tecla, com o separador escrito entre\n * eles. O `kbd` externo é a marcação de combinação de teclas do HTML.\n *\n * Fica fora de um namespace: o uso principal do `Kbd` é avulso, e um\n * `Kbd.Key` alongaria o caso comum. As variantes ficam em cada `Kbd`.\n *\n * @example\n * ```tsx\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>+<Kbd>Shift</Kbd>+<Kbd>Del</Kbd>\n * </KbdGroup>\n * ```\n */\nexport const KbdGroup = (props: KbdGroupProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'KbdGroup',\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-1',\n\n        // Cor e tamanho do separador (\"+\", \"então\") entre as teclas.\n        'text-gray-11',\n        'text-sm',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'kbd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nKbdGroup.displayName = 'KbdGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAGA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/typography/kbd/kbd-variants.d.ts

@@ -0,0 +1,36 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/typography/kbd/kbd-variants.d.ts
+export type KbdVariants = {
+  /**
+   * Cor do texto e, em `raised` e `subtle`, do fundo e da borda da tecla.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Altura, largura mínima e tamanho do texto. O `md` tem a altura da linha de um `text-sm`,
+   * então cabe numa frase sem aumentar a entrelinha.
+   *
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Desenho da tecla: `raised` com relevo, `outline` só contorno, `subtle` com fundo suave e
+   * `plain` sem fundo nem borda.
+   *
+   * @default 'raised'
+   */
+  variant?: 'raised' | 'outline' | 'subtle' | 'plain';
+};
+export declare const kbdDefaultVariants: Required<KbdVariants>;
+/**
+ * A cor só declara `--kbd-border`, `--kbd-raised-bg` e `--kbd-subtle-bg`, e a `variant` decide
+ * onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+ */
+export declare const kbdVariants: (props?: ({
+  colorScheme?: "gray" | "brand" | null | undefined;
+  variant?: "outline" | "subtle" | "plain" | "raised" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=kbd-variants.d.ts.map

package/dist/components/typography/kbd/kbd-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-variants.d.ts","names":[],"sources":["../../../../src/components/typography/kbd/kbd-variants.ts"],"mappings":";;YAGY;;;;;;EAMV,cAAc;;;;;;;EAOd;;;;;;;EAOA;;qBAGW,oBAAoB,SAAS;;;;;qBAU7B,cAAW;;;;6CAoFvB"}

package/dist/components/typography/kbd/kbd-variants.js

@@ -0,0 +1,81 @@
+import { cva } from "class-variance-authority";
+//#region src/components/typography/kbd/kbd-variants.ts
+const kbdDefaultVariants = {
+	colorScheme: "gray",
+	size: "md",
+	variant: "raised"
+};
+/**
+* A cor só declara `--kbd-border`, `--kbd-raised-bg` e `--kbd-subtle-bg`, e a `variant` decide
+* onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.
+*/
+const kbdVariants = cva([
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"shrink-0",
+	"px-1",
+	"rounded-md",
+	"corner-squircle",
+	"font-medium",
+	"font-mono",
+	"whitespace-nowrap"
+], {
+	variants: {
+		colorScheme: {
+			gray: [
+				"[--kbd-border:var(--color-gray-6)]",
+				"[--kbd-raised-bg:var(--color-gray-3)]",
+				"[--kbd-subtle-bg:var(--color-gray-4)]",
+				"text-gray-12"
+			],
+			brand: [
+				"[--kbd-border:var(--color-brand-6)]",
+				"[--kbd-raised-bg:var(--color-brand-3)]",
+				"[--kbd-subtle-bg:var(--color-brand-4)]",
+				"text-brand-12"
+			]
+		},
+		variant: {
+			raised: [
+				"bg-(--kbd-raised-bg)",
+				"border",
+				"border-b-2",
+				"border-(--kbd-border)"
+			],
+			outline: [
+				"bg-transparent",
+				"border",
+				"border-gray-alpha-7"
+			],
+			subtle: ["bg-(--kbd-subtle-bg)/75"],
+			plain: ["bg-transparent"]
+		},
+		size: {
+			sm: [
+				"h-4.5",
+				"min-w-4.5",
+				"text-xs"
+			],
+			md: [
+				"h-5",
+				"min-w-5",
+				"text-sm"
+			],
+			lg: [
+				"h-6",
+				"min-w-6",
+				"text-base"
+			]
+		}
+	},
+	defaultVariants: {
+		colorScheme: kbdDefaultVariants.colorScheme,
+		size: kbdDefaultVariants.size,
+		variant: kbdDefaultVariants.variant
+	}
+});
+//#endregion
+export { kbdDefaultVariants, kbdVariants };
+
+//# sourceMappingURL=kbd-variants.js.map

package/dist/components/typography/kbd/kbd-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-variants.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type KbdVariants = {\n  /**\n   * Cor do texto e, em `raised` e `subtle`, do fundo e da borda da tecla.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Altura, largura mínima e tamanho do texto. O `md` tem a altura da linha de um `text-sm`,\n   * então cabe numa frase sem aumentar a entrelinha.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Desenho da tecla: `raised` com relevo, `outline` só contorno, `subtle` com fundo suave e\n   * `plain` sem fundo nem borda.\n   *\n   * @default 'raised'\n   */\n  variant?: 'raised' | 'outline' | 'subtle' | 'plain';\n};\n\nexport const kbdDefaultVariants: Required<KbdVariants> = {\n  colorScheme: 'gray',\n  size: 'md',\n  variant: 'raised',\n};\n\n/**\n * A cor só declara `--kbd-border`, `--kbd-raised-bg` e `--kbd-subtle-bg`, e a `variant` decide\n * onde cada uma entra. Assim não há um bloco por combinação de cor e `variant`.\n */\nexport const kbdVariants = cva(\n  [\n    'inline-flex',\n    'items-center',\n    // Com a largura mínima igual à altura, a tecla de um caractere fica\n    // quadrada.\n    'justify-center',\n    'shrink-0',\n\n    'px-1',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'font-medium',\n    'font-mono',\n    'whitespace-nowrap',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--kbd-border:var(--color-gray-6)]',\n          '[--kbd-raised-bg:var(--color-gray-3)]',\n          '[--kbd-subtle-bg:var(--color-gray-4)]',\n\n          'text-gray-12',\n        ],\n        brand: [\n          '[--kbd-border:var(--color-brand-6)]',\n          '[--kbd-raised-bg:var(--color-brand-3)]',\n          '[--kbd-subtle-bg:var(--color-brand-4)]',\n\n          'text-brand-12',\n        ],\n      },\n      variant: {\n        raised: [\n          'bg-(--kbd-raised-bg)',\n\n          'border',\n          // A borda inferior mais grossa é o que dá o relevo de tecla.\n          'border-b-2',\n          'border-(--kbd-border)',\n        ],\n        outline: [\n          'bg-transparent',\n\n          'border',\n          // Borda neutra de propósito: contornada na cor do esquema, a tecla\n          // passa a ler como estado em vez de tecla. O esquema segue tingindo\n          // só o texto. Mesmo token do `--button-outline-border` do `Button`.\n          'border-gray-alpha-7',\n        ],\n        subtle: ['bg-(--kbd-subtle-bg)/75'],\n        plain: ['bg-transparent'],\n      },\n      size: {\n        sm: [\n          'h-4.5',\n          'min-w-4.5',\n\n          'text-xs',\n        ],\n        md: [\n          'h-5',\n          'min-w-5',\n\n          'text-sm',\n        ],\n        lg: [\n          'h-6',\n          'min-w-6',\n\n          'text-base',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: kbdDefaultVariants.colorScheme,\n      size: kbdDefaultVariants.size,\n      variant: kbdDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AA0BA,MAAa,qBAA4C;CACvD,aAAa;CACb,MAAM;CACN,SAAS;AACX;;;;;AAMA,MAAa,cAAc,IACzB;CACE;CACA;CAGA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM;IACJ;IACA;IACA;IAEA;GACF;GACA,OAAO;IACL;IACA;IACA;IAEA;GACF;EACF;EACA,SAAS;GACP,QAAQ;IACN;IAEA;IAEA;IACA;GACF;GACA,SAAS;IACP;IAEA;IAIA;GACF;GACA,QAAQ,CAAC,yBAAyB;GAClC,OAAO,CAAC,gBAAgB;EAC1B;EACA,MAAM;GACJ,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;GACA,IAAI;IACF;IACA;IAEA;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa,mBAAmB;EAChC,MAAM,mBAAmB;EACzB,SAAS,mBAAmB;CAC9B;AACF,CACF"}

package/dist/components/typography/kbd/kbd.d.ts

@@ -0,0 +1,32 @@
+import { KbdVariants } from "./kbd-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/kbd/kbd.d.ts
+/**
+ * Props do `Kbd`: as variantes visuais e as props do elemento renderizado.
+ */
+export type KbdProps = MergeOverride<useRender.ComponentProps<'kbd'>, KbdVariants>;
+/**
+ * Tecla ou atalho de teclado.
+ *
+ * Renderiza um `kbd` com o desenho de tecla. Um atalho de várias teclas tem
+ * dois formatos: compacto, num `Kbd` só e sem espaços (`Shift+Tab`), ou
+ * separado, com um `Kbd` por tecla dentro do `KbdGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>Esc</Kbd>
+ *
+ * <Kbd>Shift+Tab</Kbd>
+ *
+ * <KbdGroup>
+ *   <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>
+ * </KbdGroup>
+ * ```
+ */
+export declare const Kbd: {
+  (props: KbdProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/typography/kbd/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","names":[],"sources":["../../../../src/components/typography/kbd/kbd.tsx"],"mappings":";;;;;;;YAQY,WAAW,cACrB,UAAU,uBACV;;;;;;;;;;;;;;;;;;;qBAuBW;GAAc,OAAA,2BAAQ,+CAAA"}

package/dist/components/typography/kbd/kbd.js

@@ -0,0 +1,46 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { kbdVariants } from "./kbd-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/kbd/kbd.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Tecla ou atalho de teclado.
+*
+* Renderiza um `kbd` com o desenho de tecla. Um atalho de várias teclas tem
+* dois formatos: compacto, num `Kbd` só e sem espaços (`Shift+Tab`), ou
+* separado, com um `Kbd` por tecla dentro do `KbdGroup`.
+*
+* @example
+* ```tsx
+* <Kbd>Esc</Kbd>
+*
+* <Kbd>Shift+Tab</Kbd>
+*
+* <KbdGroup>
+*   <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>
+* </KbdGroup>
+* ```
+*/
+const Kbd = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"size",
+		"variant"
+	]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Kbd",
+		className: mergeTwClassNames(kbdVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "kbd",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Kbd.displayName = "Kbd";
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/typography/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../../src/components/typography/kbd/kbd.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type KbdVariants, kbdVariants } from './kbd-variants';\n\n/**\n * Props do `Kbd`: as variantes visuais e as props do elemento renderizado.\n */\nexport type KbdProps = MergeOverride<\n  useRender.ComponentProps<'kbd'>,\n  KbdVariants\n>;\n\nconst splitVariantProps = createSplitProps<KbdVariants>();\n\n/**\n * Tecla ou atalho de teclado.\n *\n * Renderiza um `kbd` com o desenho de tecla. Um atalho de várias teclas tem\n * dois formatos: compacto, num `Kbd` só e sem espaços (`Shift+Tab`), ou\n * separado, com um `Kbd` por tecla dentro do `KbdGroup`.\n *\n * @example\n * ```tsx\n * <Kbd>Esc</Kbd>\n *\n * <Kbd>Shift+Tab</Kbd>\n *\n * <KbdGroup>\n *   <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>\n * </KbdGroup>\n * ```\n */\nexport const Kbd = (props: KbdProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'size',\n    'variant',\n  ]);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Kbd',\n    className: mergeTwClassNames(kbdVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'kbd',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nKbd.displayName = 'Kbd';\n"],"mappings":";;;;;AAaA,MAAM,oBAAoB,iBAA8B;;;;;;;;;;;;;;;;;;;AAoBxD,MAAa,OAAO,UAAoB;CACtC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,YAAY,YAAY,GAAG,SAAS;CACnE;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,IAAI,cAAc"}

package/dist/components/typography/list/index.d.ts

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

package/dist/components/typography/list/index.js

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

package/dist/components/typography/list/index.parts.d.ts

@@ -0,0 +1,10 @@
+import { ListItem, ListItemProps } from "./list-item.js";
+import { ListOrdered, ListOrderedProps } from "./list-ordered.js";
+import { ListUnordered, ListUnorderedProps } from "./list-unordered.js";
+import { ListUnstyled, ListUnstyledProps } from "./list-unstyled.js";
+declare namespace index_parts_d_exports {
+  export { ListItem as Item, ListItemProps as ItemProps, ListOrdered as Ordered, ListOrderedProps as OrderedProps, ListUnordered as Unordered, ListUnorderedProps as UnorderedProps, ListUnstyled as Unstyled, ListUnstyledProps as UnstyledProps };
+}
+//#endregion
+export { ListItem as Item, type ListItemProps as ItemProps, ListOrdered as Ordered, type ListOrderedProps as OrderedProps, ListUnordered as Unordered, type ListUnorderedProps as UnorderedProps, ListUnstyled as Unstyled, type ListUnstyledProps as UnstyledProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/typography/list/index.parts.d.ts.map

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

package/dist/components/typography/list/index.parts.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ListItem } from "./list-item.js";
+import { ListOrdered } from "./list-ordered.js";
+import { ListUnordered } from "./list-unordered.js";
+import { ListUnstyled } from "./list-unstyled.js";
+//#region src/components/typography/list/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => ListItem,
+	Ordered: () => ListOrdered,
+	Unordered: () => ListUnordered,
+	Unstyled: () => ListUnstyled
+});
+//#endregion
+export { ListItem as Item, ListOrdered as Ordered, ListUnordered as Unordered, ListUnstyled as Unstyled, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/typography/list/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/typography/list/index.parts.ts"],"sourcesContent":["export { ListItem as Item } from './list-item';\nexport { ListOrdered as Ordered } from './list-ordered';\nexport { ListUnordered as Unordered } from './list-unordered';\nexport { ListUnstyled as Unstyled } from './list-unstyled';\n\n/* types */\n\nexport type { ListItemProps as ItemProps } from './list-item';\nexport type { ListOrderedProps as OrderedProps } from './list-ordered';\nexport type { ListUnorderedProps as UnorderedProps } from './list-unordered';\nexport type { ListUnstyledProps as UnstyledProps } from './list-unstyled';\n"],"mappings":""}

package/dist/components/typography/list/list-item.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-item.d.ts
+/**
+ * Props do `List.Item`.
+ */
+export type ListItemProps = useRender.ComponentProps<'li'>;
+/**
+ * Item de uma lista.
+ *
+ * O espaçamento e o marcador vêm da lista que o contém, então o item não
+ * declara estilo próprio.
+ *
+ * @example
+ * ```tsx
+ * <List.Unordered>
+ *   <List.Item>Primeiro</List.Item>
+ *   <List.Item>Segundo</List.Item>
+ * </List.Unordered>
+ * ```
+ */
+export declare const ListItem: {
+  (props: ListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-item.d.ts.map

package/dist/components/typography/list/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-item.tsx"],"mappings":";;;;;YAMY,gBAAgB,UAAU;;;;;;;;;;;;;;;qBAgBzB;GAAmB,OAAA,gCAAa,+CAAA"}

package/dist/components/typography/list/list-item.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-item.tsx
+/**
+* Item de uma lista.
+*
+* O espaçamento e o marcador vêm da lista que o contém, então o item não
+* declara estilo próprio.
+*
+* @example
+* ```tsx
+* <List.Unordered>
+*   <List.Item>Primeiro</List.Item>
+*   <List.Item>Segundo</List.Item>
+* </List.Unordered>
+* ```
+*/
+const ListItem = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Item",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "li",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListItem.displayName = "List.Item";
+//#endregion
+export { ListItem };
+
+//# sourceMappingURL=list-item.js.map

package/dist/components/typography/list/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","names":[],"sources":["../../../../src/components/typography/list/list-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Item`.\n */\nexport type ListItemProps = useRender.ComponentProps<'li'>;\n\n/**\n * Item de uma lista.\n *\n * O espaçamento e o marcador vêm da lista que o contém, então o item não\n * declara estilo próprio.\n *\n * @example\n * ```tsx\n * <List.Unordered>\n *   <List.Item>Primeiro</List.Item>\n *   <List.Item>Segundo</List.Item>\n * </List.Unordered>\n * ```\n */\nexport const ListItem = (props: ListItemProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Item',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'li',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListItem.displayName = 'List.Item';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/typography/list/list-ordered.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-ordered.d.ts
+/**
+ * Props do `List.Ordered`.
+ */
+export type ListOrderedProps = useRender.ComponentProps<'ol'>;
+/**
+ * Lista ordenada, com marcador numérico.
+ *
+ * O marcador fica fora do texto, então as linhas de um item que quebra
+ * alinham entre si.
+ *
+ * @example
+ * ```tsx
+ * <List.Ordered>
+ *   <List.Item>Emitir a nota</List.Item>
+ *   <List.Item>Enviar ao cliente</List.Item>
+ * </List.Ordered>
+ * ```
+ */
+export declare const ListOrdered: {
+  (props: ListOrderedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-ordered.d.ts.map

package/dist/components/typography/list/list-ordered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-ordered.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-ordered.tsx"],"mappings":";;;;;YAMY,mBAAmB,UAAU;;;;;;;;;;;;;;;qBAgB5B;GAAsB,OAAA,mCAAgB,+CAAA"}

package/dist/components/typography/list/list-ordered.js

@@ -0,0 +1,42 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-ordered.tsx
+/**
+* Lista ordenada, com marcador numérico.
+*
+* O marcador fica fora do texto, então as linhas de um item que quebra
+* alinham entre si.
+*
+* @example
+* ```tsx
+* <List.Ordered>
+*   <List.Item>Emitir a nota</List.Item>
+*   <List.Item>Enviar ao cliente</List.Item>
+* </List.Ordered>
+* ```
+*/
+const ListOrdered = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "List.Ordered",
+		className: mergeTwClassNames([
+			"space-y-1",
+			"pl-6",
+			"text-gray-12",
+			"text-sm",
+			"list-outside",
+			"list-decimal",
+			"marker:text-gray-11"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "ol",
+		props: mergeProps(baseProps, rest)
+	});
+};
+ListOrdered.displayName = "List.Ordered";
+//#endregion
+export { ListOrdered };
+
+//# sourceMappingURL=list-ordered.js.map

package/dist/components/typography/list/list-ordered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-ordered.js","names":[],"sources":["../../../../src/components/typography/list/list-ordered.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\n/**\n * Props do `List.Ordered`.\n */\nexport type ListOrderedProps = useRender.ComponentProps<'ol'>;\n\n/**\n * Lista ordenada, com marcador numérico.\n *\n * O marcador fica fora do texto, então as linhas de um item que quebra\n * alinham entre si.\n *\n * @example\n * ```tsx\n * <List.Ordered>\n *   <List.Item>Emitir a nota</List.Item>\n *   <List.Item>Enviar ao cliente</List.Item>\n * </List.Ordered>\n * ```\n */\nexport const ListOrdered = (props: ListOrderedProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'List.Ordered',\n    className: mergeTwClassNames(\n      [\n        'space-y-1',\n        // O número de dois dígitos (\"10.\") pede mais espaço que o ponto.\n        'pl-6',\n\n        'text-gray-12',\n        'text-sm',\n\n        'list-outside',\n        'list-decimal',\n        'marker:text-gray-11',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'ol',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nListOrdered.displayName = 'List.Ordered';\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GAEA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/components/typography/list/list-unordered.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/list/list-unordered.d.ts
+/**
+ * Props do `List.Unordered`.
+ */
+export type ListUnorderedProps = useRender.ComponentProps<'ul'>;
+/**
+ * Lista não ordenada, com marcador de ponto.
+ *
+ * O marcador fica fora do texto, então as linhas de um item que quebra
+ * alinham entre si.
+ *
+ * @example
+ * ```tsx
+ * <List.Unordered>
+ *   <List.Item>Boleto</List.Item>
+ *   <List.Item>Pix</List.Item>
+ * </List.Unordered>
+ * ```
+ */
+export declare const ListUnordered: {
+  (props: ListUnorderedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=list-unordered.d.ts.map

package/dist/components/typography/list/list-unordered.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-unordered.d.ts","names":[],"sources":["../../../../src/components/typography/list/list-unordered.tsx"],"mappings":";;;;;YAMY,qBAAqB,UAAU;;;;;;;;;;;;;;;qBAgB9B;GAAwB,OAAA,qCAAkB,+CAAA"}