@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/overlays/tooltip/tooltip-root.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-root.d.ts
+export type TooltipRootProps<Payload = unknown> = Tooltip.Root.Props<Payload>;
+export type TooltipRootState = Tooltip.Root.State;
+export type TooltipRootActions = Tooltip.Root.Actions;
+export type TooltipRootChangeEventDetails = Tooltip.Root.ChangeEventDetails;
+export type TooltipRootChangeEventReason = Tooltip.Root.ChangeEventReason;
+/**
+ * Estado da dica. Não renderiza elemento.
+ */
+export declare const TooltipRoot: {
+  <Payload extends unknown = unknown>(props: TooltipRootProps<Payload>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tooltip-root.d.ts.map

package/dist/components/overlays/tooltip/tooltip-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.d.ts","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-root.tsx"],"mappings":";;YAGY,iBAAiB,qBAC3BA,QAAY,KAAK,MAAM;YAEb,mBAAmBA,QAAY,KAAK;YAEpC,qBAAqBA,QAAY,KAAK;YAEtC,gCAAgCA,QAAY,KAAK;YAEjD,+BAA+BA,QAAY,KAAK;;;;qBAK/C;GAAe,mCAAO,OAC1B,iBAAiB,2BAAQ,IAAA"}

package/dist/components/overlays/tooltip/tooltip-root.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-root.tsx
+/**
+* Estado da dica. Não renderiza elemento.
+*/
+const TooltipRoot = (props) => {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+};
+TooltipRoot.displayName = "Tooltip.Root";
+//#endregion
+export { TooltipRoot };
+
+//# sourceMappingURL=tooltip-root.js.map

package/dist/components/overlays/tooltip/tooltip-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-root.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/utils';\n\nexport type TooltipRootProps<Payload = unknown> =\n  BaseTooltip.Root.Props<Payload>;\n\nexport type TooltipRootState = BaseTooltip.Root.State;\n\nexport type TooltipRootActions = BaseTooltip.Root.Actions;\n\nexport type TooltipRootChangeEventDetails = BaseTooltip.Root.ChangeEventDetails;\n\nexport type TooltipRootChangeEventReason = BaseTooltip.Root.ChangeEventReason;\n\n/**\n * Estado da dica. Não renderiza elemento.\n */\nexport const TooltipRoot = <Payload extends AnyType = unknown>(\n  props: TooltipRootProps<Payload>,\n) => {\n  return <BaseTooltip.Root {...props} />;\n};\n\nTooltipRoot.displayName = 'Tooltip.Root';\n"],"mappings":";;;;;;AAiBA,MAAa,eACX,UACG;CACH,OAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,YAAY,cAAc"}

package/dist/components/overlays/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1,14 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-trigger.d.ts
+export type TooltipTriggerProps<Payload = unknown> = Tooltip.Trigger.Props<Payload>;
+export type TooltipTriggerState = Tooltip.Trigger.State;
+/**
+ * Elemento que abre a dica no hover e no foco. Sem estilo próprio; passe o elemento em
+ * `render`.
+ */
+export declare const TooltipTrigger: {
+  <Payload extends unknown = unknown>(props: TooltipTriggerProps<Payload>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tooltip-trigger.d.ts.map

package/dist/components/overlays/tooltip/tooltip-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.d.ts","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-trigger.tsx"],"mappings":";;YAIY,oBAAoB,qBAC9BA,QAAY,QAAQ,MAAM;YAEhB,sBAAsBA,QAAY,QAAQ;;;;;qBAMzC;GAAkB,mCAAO,OAC7B,oBAAoB,2BAAQ,IAAA"}

package/dist/components/overlays/tooltip/tooltip-trigger.js

@@ -0,0 +1,21 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-trigger.tsx
+/**
+* Elemento que abre a dica no hover e no foco. Sem estilo próprio; passe o elemento em
+* `render`.
+*/
+const TooltipTrigger = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-component": "Tooltip.Trigger",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+TooltipTrigger.displayName = "Tooltip.Trigger";
+//#endregion
+export { TooltipTrigger };
+
+//# sourceMappingURL=tooltip-trigger.js.map

package/dist/components/overlays/tooltip/tooltip-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-trigger.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { AnyType } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipTriggerProps<Payload = unknown> =\n  BaseTooltip.Trigger.Props<Payload>;\n\nexport type TooltipTriggerState = BaseTooltip.Trigger.State;\n\n/**\n * Elemento que abre a dica no hover e no foco. Sem estilo próprio; passe o elemento em\n * `render`.\n */\nexport const TooltipTrigger = <Payload extends AnyType = unknown>(\n  props: TooltipTriggerProps<Payload>,\n) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseTooltip.Trigger\n      data-component=\"Tooltip.Trigger\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n"],"mappings":";;;;;;;;AAaA,MAAa,kBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,SAAb;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/tooltip/tooltip-viewport.d.ts

@@ -0,0 +1,19 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-viewport.d.ts
+export type TooltipViewportProps = Tooltip.Viewport.Props;
+export type TooltipViewportState = Tooltip.Viewport.State;
+/**
+ * Área que anima a troca de conteúdo quando a mesma dica serve a mais de um trigger (com
+ * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.
+ *
+ * Cópia de `PopoverViewport`, a origem do viewport dos popups. A diferença: o `--popup-width` é a
+ * largura do popup com o padding, que no Tooltip fica no próprio popup (`--tooltip-padding-x`), e
+ * não numa parte interna. Os conteúdos descontam esse padding; sem isso, ficam mais largos que o
+ * espaço visível durante a troca, cortados à direita, e quebram as linhas de novo no fim.
+ */
+export declare const TooltipViewport: {
+  (props: TooltipViewportProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tooltip-viewport.d.ts.map

package/dist/components/overlays/tooltip/tooltip-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-viewport.d.ts","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-viewport.tsx"],"mappings":";;YAGY,uBAAuBA,QAAY,SAAS;YAE5C,uBAAuBA,QAAY,SAAS;;;;;;;;;;qBAW3C;GAA0B,OAAA,uCAAoB,IAAA"}

package/dist/components/overlays/tooltip/tooltip-viewport.js

@@ -0,0 +1,45 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/overlays/tooltip/tooltip-viewport.tsx
+/**
+* Área que anima a troca de conteúdo quando a mesma dica serve a mais de um trigger (com
+* `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.
+*
+* Cópia de `PopoverViewport`, a origem do viewport dos popups. A diferença: o `--popup-width` é a
+* largura do popup com o padding, que no Tooltip fica no próprio popup (`--tooltip-padding-x`), e
+* não numa parte interna. Os conteúdos descontam esse padding; sem isso, ficam mais largos que o
+* espaço visível durante a troca, cortados à direita, e quebram as linhas de novo no fim.
+*/
+const TooltipViewport = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Tooltip.Viewport, {
+		"data-component": "Tooltip.Viewport",
+		className: mergeStateClassNames([
+			"relative",
+			"w-full",
+			"h-full",
+			"overflow-clip",
+			"data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0",
+			"data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0",
+			"**:data-current:w-[calc(var(--popup-width)-2*var(--tooltip-padding-x))]",
+			"**:data-current:opacity-100",
+			"not-motion-reduced:**:data-current:transition-opacity",
+			"not-motion-reduced:**:data-current:duration-300",
+			"not-motion-reduced:**:data-current:ease-enter",
+			"data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0",
+			"data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0",
+			"**:data-previous:w-[calc(var(--popup-width)-2*var(--tooltip-padding-x))]",
+			"**:data-previous:opacity-100",
+			"not-motion-reduced:**:data-previous:transition-opacity",
+			"not-motion-reduced:**:data-previous:duration-100",
+			"not-motion-reduced:**:data-previous:ease-exit"
+		], className),
+		...rest
+	});
+};
+TooltipViewport.displayName = "Tooltip.Viewport";
+//#endregion
+export { TooltipViewport };
+
+//# sourceMappingURL=tooltip-viewport.js.map

package/dist/components/overlays/tooltip/tooltip-viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-viewport.js","names":["BaseTooltip"],"sources":["../../../../src/components/overlays/tooltip/tooltip-viewport.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { mergeStateClassNames } from '#utils';\n\nexport type TooltipViewportProps = BaseTooltip.Viewport.Props;\n\nexport type TooltipViewportState = BaseTooltip.Viewport.State;\n\n/**\n * Área que anima a troca de conteúdo quando a mesma dica serve a mais de um trigger (com\n * `handle`). O Base UI marca o conteúdo que entra e o que sai com `data-current` e `data-previous`.\n *\n * Cópia de `PopoverViewport`, a origem do viewport dos popups. A diferença: o `--popup-width` é a\n * largura do popup com o padding, que no Tooltip fica no próprio popup (`--tooltip-padding-x`), e\n * não numa parte interna. Os conteúdos descontam esse padding; sem isso, ficam mais largos que o\n * espaço visível durante a troca, cortados à direita, e quebram as linhas de novo no fim.\n */\nexport const TooltipViewport = (props: TooltipViewportProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseTooltip.Viewport\n      data-component=\"Tooltip.Viewport\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'w-full',\n          'h-full',\n\n          'overflow-clip',\n\n          \"data-[activation-direction~='left']:[&_[data-current][data-starting-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-current][data-starting-style]]:opacity-0\",\n\n          '**:data-current:w-[calc(var(--popup-width)-2*var(--tooltip-padding-x))]',\n          '**:data-current:opacity-100',\n\n          'not-motion-reduced:**:data-current:transition-opacity',\n          'not-motion-reduced:**:data-current:duration-300',\n          'not-motion-reduced:**:data-current:ease-enter',\n\n          \"data-[activation-direction~='left']:[&_[data-previous][data-ending-style]]:opacity-0\",\n          \"data-[activation-direction~='right']:[&_[data-previous][data-ending-style]]:opacity-0\",\n\n          '**:data-previous:w-[calc(var(--popup-width)-2*var(--tooltip-padding-x))]',\n          '**:data-previous:opacity-100',\n\n          'not-motion-reduced:**:data-previous:transition-opacity',\n          'not-motion-reduced:**:data-previous:duration-100',\n          'not-motion-reduced:**:data-previous:ease-exit',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nTooltipViewport.displayName = 'Tooltip.Viewport';\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,QAAY,UAAb;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

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-medium",
+			"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-medium', '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;GAAe;EAAc,GACzD,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?: "subtle" | "outline" | "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",
+				"min-w-4",
+				"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',\n          'min-w-4',\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":""}