@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/display/card/card-root.d.ts

@@ -0,0 +1,26 @@
+import { CardVariants } from "./card-root-variants.js";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-root.d.ts
+export type CardRootProps = MergeOverride<useRender.ComponentProps<'div'>, CardVariants>;
+/**
+ * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.
+ *
+ * @example
+ * ```tsx
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Plano Pro</Card.Title>
+ *     <Card.Description>Cobrança mensal</Card.Description>
+ *   </Card.Header>
+ *   <Card.Body>…</Card.Body>
+ *   <Card.Footer>…</Card.Footer>
+ * </Card.Root>
+ * ```
+ */
+export declare const CardRoot: {
+  (props: CardRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-root.d.ts.map

package/dist/components/display/card/card-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-root.d.ts","names":[],"sources":["../../../../src/components/display/card/card-root.tsx"],"mappings":";;;;YAKY,gBAAgB,cAC1B,UAAU,uBACV;;;;;;;;;;;;;;;;qBAoBW;GAAmB,OAAA,gCAAa,+CAAA"}

package/dist/components/display/card/card-root.js

@@ -0,0 +1,39 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { cardRootVariants } from "./card-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.
+*
+* @example
+* ```tsx
+* <Card.Root>
+*   <Card.Header>
+*     <Card.Title>Plano Pro</Card.Title>
+*     <Card.Description>Cobrança mensal</Card.Description>
+*   </Card.Header>
+*   <Card.Body>…</Card.Body>
+*   <Card.Footer>…</Card.Footer>
+* </Card.Root>
+* ```
+*/
+const CardRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["variant"]);
+	const { render, className, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Card.Root",
+		className: mergeTwClassNames(cardRootVariants(variantProps), className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardRoot.displayName = "Card.Root";
+//#endregion
+export { CardRoot };
+
+//# sourceMappingURL=card-root.js.map

package/dist/components/display/card/card-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-root.js","names":[],"sources":["../../../../src/components/display/card/card-root.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\nimport { type CardVariants, cardRootVariants } from './card-root-variants';\n\nexport type CardRootProps = MergeOverride<\n  useRender.ComponentProps<'div'>,\n  CardVariants\n>;\n\nconst splitVariantProps = createSplitProps<CardVariants>();\n\n/**\n * Contêiner que agrupa conteúdo e ações sobre um mesmo assunto.\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Plano Pro</Card.Title>\n *     <Card.Description>Cobrança mensal</Card.Description>\n *   </Card.Header>\n *   <Card.Body>…</Card.Body>\n *   <Card.Footer>…</Card.Footer>\n * </Card.Root>\n * ```\n */\nexport const CardRoot = (props: CardRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, ['variant']);\n\n  const { render, className, ...rest } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Card.Root',\n    className: mergeTwClassNames(cardRootVariants(variantProps), className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardRoot.displayName = 'Card.Root';\n"],"mappings":";;;;;AAUA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;AAiBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAAC,SAAS,CAAC;CAEzE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;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/display/card/card-title.d.ts

@@ -0,0 +1,24 @@
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-title.d.ts
+export type CardTitleProps = MergeOverride<useRender.ComponentProps<'h3'>, {
+  /**
+   * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag
+   * do `render` prevalece.
+   *
+   * @default 3
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+/**
+ * Título do card, em tamanho fixo.
+ *
+ * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+ * cópia na mesma rodada.
+ */
+export declare const CardTitle: {
+  (props: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-title.d.ts.map

package/dist/components/display/card/card-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.d.ts","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"mappings":";;;YAIY,iBAAiB,cAC3B,UAAU;;;;;;;EAQR;;;;;;;;qBAUS;GAAoB,OAAA,iCAAc,+CAAA"}

package/dist/components/display/card/card-title.js

@@ -0,0 +1,32 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-title.tsx
+/**
+* Título do card, em tamanho fixo.
+*
+* O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+* cópia na mesma rodada.
+*/
+const CardTitle = (props) => {
+	const { level = 3, render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Card.Title",
+		className: mergeTwClassNames([
+			"text-base",
+			"leading-6",
+			"font-medium",
+			"text-gray-12",
+			"text-balance"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: `h${level}`,
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardTitle.displayName = "Card.Title";
+//#endregion
+export { CardTitle };
+
+//# sourceMappingURL=card-title.js.map

package/dist/components/display/card/card-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.js","names":[],"sources":["../../../../src/components/display/card/card-title.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardTitleProps = MergeOverride<\n  useRender.ComponentProps<'h3'>,\n  {\n    /**\n     * Nível do título, que define a tag (`h1` a `h6`). Não muda a aparência. Com `render`, a tag\n     * do `render` prevalece.\n     *\n     * @default 3\n     */\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n  }\n>;\n\n/**\n * Título do card, em tamanho fixo.\n *\n * O `Dialog.Title` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardTitle = (props: CardTitleProps) => {\n  const { level = 3, render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Title',\n    className: mergeTwClassNames(\n      ['text-base', 'leading-6', 'font-medium', 'text-gray-12', 'text-balance'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: `h${level}`,\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardTitle.displayName = 'Card.Title';\n"],"mappings":";;;;;;;;;AAuBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,QAAQ,GAAG,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAa;GAAa;GAAe;GAAgB;EAAc,GACxE,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB,IAAI;EACpB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,UAAU,cAAc"}

package/dist/components/display/card/index.d.ts

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

package/dist/components/display/card/index.js

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

package/dist/components/display/card/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { CardBody, CardBodyProps } from "./card-body.js";
+import { CardDescription, CardDescriptionProps } from "./card-description.js";
+import { CardFooter, CardFooterProps } from "./card-footer.js";
+import { CardHeader, CardHeaderProps } from "./card-header.js";
+import { CardVariants } from "./card-root-variants.js";
+import { CardRoot, CardRootProps } from "./card-root.js";
+import { CardTitle, CardTitleProps } from "./card-title.js";
+declare namespace index_parts_d_exports {
+  export { CardBody as Body, CardBodyProps as BodyProps, CardDescription as Description, CardDescriptionProps as DescriptionProps, CardFooter as Footer, CardFooterProps as FooterProps, CardHeader as Header, CardHeaderProps as HeaderProps, CardRoot as Root, CardRootProps as RootProps, CardTitle as Title, CardTitleProps as TitleProps, CardVariants as Variants };
+}
+//#endregion
+export { CardBody as Body, type CardBodyProps as BodyProps, CardDescription as Description, type CardDescriptionProps as DescriptionProps, CardFooter as Footer, type CardFooterProps as FooterProps, CardHeader as Header, type CardHeaderProps as HeaderProps, CardRoot as Root, type CardRootProps as RootProps, CardTitle as Title, type CardTitleProps as TitleProps, type CardVariants as Variants, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/components/display/card/index.parts.d.ts.map

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

package/dist/components/display/card/index.parts.js

@@ -0,0 +1,20 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { CardBody } from "./card-body.js";
+import { CardDescription } from "./card-description.js";
+import { CardFooter } from "./card-footer.js";
+import { CardHeader } from "./card-header.js";
+import { CardRoot } from "./card-root.js";
+import { CardTitle } from "./card-title.js";
+//#region src/components/display/card/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => CardBody,
+	Description: () => CardDescription,
+	Footer: () => CardFooter,
+	Header: () => CardHeader,
+	Root: () => CardRoot,
+	Title: () => CardTitle
+});
+//#endregion
+export { CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/components/display/card/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/components/display/card/index.parts.ts"],"sourcesContent":["export { CardBody as Body } from './card-body';\nexport { CardDescription as Description } from './card-description';\nexport { CardFooter as Footer } from './card-footer';\nexport { CardHeader as Header } from './card-header';\nexport { CardRoot as Root } from './card-root';\nexport { CardTitle as Title } from './card-title';\n\n/* types */\n\nexport type { CardBodyProps as BodyProps } from './card-body';\nexport type { CardDescriptionProps as DescriptionProps } from './card-description';\nexport type { CardFooterProps as FooterProps } from './card-footer';\nexport type { CardHeaderProps as HeaderProps } from './card-header';\nexport type { CardRootProps as RootProps } from './card-root';\nexport type { CardVariants as Variants } from './card-root-variants';\nexport type { CardTitleProps as TitleProps } from './card-title';\n"],"mappings":""}

package/dist/components/display/clipboard/clipboard-announcer.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/display/clipboard/clipboard-announcer.d.ts
+/**
+ * Região viva que anuncia a cópia ao leitor de tela; interna, renderizada pelo `Clipboard.Root` e
+ * pelo `Clipboard.RootProvider` depois dos filhos. Existe desde o início e só o texto muda, que é
+ * a condição para o anúncio funcionar.
+ */
+export declare const ClipboardAnnouncer: () => import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=clipboard-announcer.d.ts.map

package/dist/components/display/clipboard/clipboard-announcer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-announcer.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-announcer.tsx"],"mappings":";;;;;;qBAQa,0CAAkB,IAAA"}

package/dist/components/display/clipboard/clipboard-announcer.js

@@ -0,0 +1,27 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useClipboardContext } from "./use-clipboard-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/display/clipboard/clipboard-announcer.tsx
+/**
+* Região viva que anuncia a cópia ao leitor de tela; interna, renderizada pelo `Clipboard.Root` e
+* pelo `Clipboard.RootProvider` depois dos filhos. Existe desde o início e só o texto muda, que é
+* a condição para o anúncio funcionar.
+*/
+const ClipboardAnnouncer = () => {
+	const clipboard = useClipboardContext();
+	/**
+	* O texto é o `aria-label` que o Zag calcula para o trigger: o `triggerLabel(copied)` com as
+	* `translations` já mescladas. Lido daqui, vale também no `RootProvider`, que não recebe as
+	* props do `useClipboard`.
+	*/
+	const announcement = clipboard.copied ? clipboard.getTriggerProps()["aria-label"] : null;
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: mergeTwClassNames(["sr-only"]),
+		children: announcement
+	});
+};
+//#endregion
+export { ClipboardAnnouncer };
+
+//# sourceMappingURL=clipboard-announcer.js.map

package/dist/components/display/clipboard/clipboard-announcer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-announcer.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-announcer.tsx"],"sourcesContent":["import { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\n/**\n * Região viva que anuncia a cópia ao leitor de tela; interna, renderizada pelo `Clipboard.Root` e\n * pelo `Clipboard.RootProvider` depois dos filhos. Existe desde o início e só o texto muda, que é\n * a condição para o anúncio funcionar.\n */\nexport const ClipboardAnnouncer = () => {\n  const clipboard = useClipboardContext();\n\n  /**\n   * O texto é o `aria-label` que o Zag calcula para o trigger: o `triggerLabel(copied)` com as\n   * `translations` já mescladas. Lido daqui, vale também no `RootProvider`, que não recebe as\n   * props do `useClipboard`.\n   */\n  const announcement = clipboard.copied\n    ? clipboard.getTriggerProps()['aria-label']\n    : null;\n\n  return (\n    <span\n      role=\"status\"\n      className={mergeTwClassNames(['sr-only'])}\n    >\n      {announcement}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,2BAA2B;CACtC,MAAM,YAAY,oBAAoB;;;;;;CAOtC,MAAM,eAAe,UAAU,SAC3B,UAAU,gBAAgB,CAAC,CAAC,gBAC5B;CAEJ,OACE,oBAAC,QAAD;EACE,MAAK;EACL,WAAW,kBAAkB,CAAC,SAAS,CAAC;EAEvC,UAAA;CACG,CAAA;AAEV"}

package/dist/components/display/clipboard/clipboard-context.d.ts

@@ -0,0 +1,35 @@
+import { UseClipboardReturn } from "./use-clipboard.js";
+import React from "react";
+//#region src/components/display/clipboard/clipboard-context.d.ts
+/**
+ * Props do `Clipboard.Context`.
+ */
+export type ClipboardContextProps = {
+  /**
+   * Função que recebe a API do Clipboard e devolve o conteúdo a renderizar.
+   */
+  children: (context: UseClipboardReturn) => React.ReactNode;
+};
+/**
+ * Expõe a API do Clipboard por render prop, sem criar um componente só para
+ * chamar o hook `useClipboardContext`.
+ *
+ * @example
+ * ```tsx
+ * <Clipboard.Root value="https://github.com">
+ *   <Clipboard.Context>
+ *     {(clipboard) => (
+ *       <Button onClick={() => clipboard.copy()}>
+ *         {clipboard.copied ? 'Copiado!' : 'Copiar'}
+ *       </Button>
+ *     )}
+ *   </Clipboard.Context>
+ * </Clipboard.Root>
+ * ```
+ */
+export declare const ClipboardContext: {
+  (props: ClipboardContextProps): React.ReactNode;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-context.d.ts.map

package/dist/components/display/clipboard/clipboard-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-context.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-context.tsx"],"mappings":";;;;;;YAOY;;;;EAIV,WAAW,SAAS,uBAAuB,MAAM;;;;;;;;;;;;;;;;;;;qBAoBtC;GAA2B,OAAA,wBAAqB,MAAA"}

package/dist/components/display/clipboard/clipboard-context.js

@@ -0,0 +1,25 @@
+import { useClipboardContext } from "./use-clipboard-context.js";
+//#region src/components/display/clipboard/clipboard-context.tsx
+/**
+* Expõe a API do Clipboard por render prop, sem criar um componente só para
+* chamar o hook `useClipboardContext`.
+*
+* @example
+* ```tsx
+* <Clipboard.Root value="https://github.com">
+*   <Clipboard.Context>
+*     {(clipboard) => (
+*       <Button onClick={() => clipboard.copy()}>
+*         {clipboard.copied ? 'Copiado!' : 'Copiar'}
+*       </Button>
+*     )}
+*   </Clipboard.Context>
+* </Clipboard.Root>
+* ```
+*/
+const ClipboardContext = (props) => props.children(useClipboardContext());
+ClipboardContext.displayName = "Clipboard.Context";
+//#endregion
+export { ClipboardContext };
+
+//# sourceMappingURL=clipboard-context.js.map

package/dist/components/display/clipboard/clipboard-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-context.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-context.tsx"],"sourcesContent":["import type React from 'react';\nimport type { UseClipboardReturn } from './use-clipboard';\nimport { useClipboardContext } from './use-clipboard-context';\n\n/**\n * Props do `Clipboard.Context`.\n */\nexport type ClipboardContextProps = {\n  /**\n   * Função que recebe a API do Clipboard e devolve o conteúdo a renderizar.\n   */\n  children: (context: UseClipboardReturn) => React.ReactNode;\n};\n\n/**\n * Expõe a API do Clipboard por render prop, sem criar um componente só para\n * chamar o hook `useClipboardContext`.\n *\n * @example\n * ```tsx\n * <Clipboard.Root value=\"https://github.com\">\n *   <Clipboard.Context>\n *     {(clipboard) => (\n *       <Button onClick={() => clipboard.copy()}>\n *         {clipboard.copied ? 'Copiado!' : 'Copiar'}\n *       </Button>\n *     )}\n *   </Clipboard.Context>\n * </Clipboard.Root>\n * ```\n */\nexport const ClipboardContext = (props: ClipboardContextProps) =>\n  props.children(useClipboardContext());\n\nClipboardContext.displayName = 'Clipboard.Context';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAa,oBAAoB,UAC/B,MAAM,SAAS,oBAAoB,CAAC;AAEtC,iBAAiB,cAAc"}

package/dist/components/display/clipboard/clipboard-control.d.ts

@@ -0,0 +1,18 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-control.d.ts
+/**
+ * Props do `Clipboard.Control`.
+ */
+export type ClipboardControlProps = useRender.ComponentProps<'div'>;
+/**
+ * Caixa que agrupa o campo e o gatilho de cópia.
+ *
+ * Recebe `data-copied` enquanto a cópia está em destaque, o que permite
+ * estilizar o grupo inteiro durante o feedback.
+ */
+export declare const ClipboardControl: {
+  (props: ClipboardControlProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-control.d.ts.map

package/dist/components/display/clipboard/clipboard-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-control.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-control.tsx"],"mappings":";;;;;YAOY,wBAAwB,UAAU;;;;;;;qBAQjC;GAA2B,OAAA,wCAAqB,+CAAA"}

package/dist/components/display/clipboard/clipboard-control.js

@@ -0,0 +1,28 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useClipboardContext } from "./use-clipboard-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-control.tsx
+/**
+* Caixa que agrupa o campo e o gatilho de cópia.
+*
+* Recebe `data-copied` enquanto a cópia está em destaque, o que permite
+* estilizar o grupo inteiro durante o feedback.
+*/
+const ClipboardControl = (props) => {
+	const { render, className, ...rest } = props;
+	const zagProps = useClipboardContext().getControlProps();
+	const baseProps = {
+		"data-component": "Clipboard.Control",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+ClipboardControl.displayName = "Clipboard.Control";
+//#endregion
+export { ClipboardControl };
+
+//# sourceMappingURL=clipboard-control.js.map

package/dist/components/display/clipboard/clipboard-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-control.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-control.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\n/**\n * Props do `Clipboard.Control`.\n */\nexport type ClipboardControlProps = useRender.ComponentProps<'div'>;\n\n/**\n * Caixa que agrupa o campo e o gatilho de cópia.\n *\n * Recebe `data-copied` enquanto a cópia está em destaque, o que permite\n * estilizar o grupo inteiro durante o feedback.\n */\nexport const ClipboardControl = (props: ClipboardControlProps) => {\n  const { render, className, ...rest } = props;\n\n  const clipboard = useClipboardContext();\n\n  const zagProps = clipboard.getControlProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.Control',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardControl.displayName = 'Clipboard.Control';\n"],"mappings":";;;;;;;;;;AAeA,MAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFY,oBAEO,CAAC,CAAC,gBAAgB;CAE3C,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/components/display/clipboard/clipboard-copy-text.d.ts

@@ -0,0 +1,18 @@
+import { ClipboardIndicatorProps } from "./clipboard-indicator.js";
+//#region src/components/display/clipboard/clipboard-copy-text.d.ts
+/**
+ * Props do `Clipboard.CopyText`.
+ */
+export type ClipboardCopyTextProps = ClipboardIndicatorProps;
+/**
+ * Indicador em texto, com os rótulos de cópia já preenchidos.
+ *
+ * É um atalho para o `Clipboard.Indicator` com `children` e `copied` textuais.
+ * Os dois rótulos continuam sobrescrevíveis.
+ */
+export declare const ClipboardCopyText: {
+  (props: ClipboardCopyTextProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-copy-text.d.ts.map

package/dist/components/display/clipboard/clipboard-copy-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-copy-text.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-copy-text.tsx"],"mappings":";;;;;YAQY,yBAAyB;;;;;;;qBAQxB;GAA4B,OAAA,yCAAsB,IAAA"}

package/dist/components/display/clipboard/clipboard-copy-text.js

@@ -0,0 +1,22 @@
+import { ClipboardIndicator } from "./clipboard-indicator.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/display/clipboard/clipboard-copy-text.tsx
+/**
+* Indicador em texto, com os rótulos de cópia já preenchidos.
+*
+* É um atalho para o `Clipboard.Indicator` com `children` e `copied` textuais.
+* Os dois rótulos continuam sobrescrevíveis.
+*/
+const ClipboardCopyText = (props) => {
+	const { children = "Copiar", copied = "Copiado", ...rest } = props;
+	return /* @__PURE__ */ jsx(ClipboardIndicator, {
+		copied,
+		...rest,
+		children
+	});
+};
+ClipboardCopyText.displayName = "Clipboard.CopyText";
+//#endregion
+export { ClipboardCopyText };
+
+//# sourceMappingURL=clipboard-copy-text.js.map

package/dist/components/display/clipboard/clipboard-copy-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-copy-text.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-copy-text.tsx"],"sourcesContent":["import {\n  ClipboardIndicator,\n  type ClipboardIndicatorProps,\n} from './clipboard-indicator';\n\n/**\n * Props do `Clipboard.CopyText`.\n */\nexport type ClipboardCopyTextProps = ClipboardIndicatorProps;\n\n/**\n * Indicador em texto, com os rótulos de cópia já preenchidos.\n *\n * É um atalho para o `Clipboard.Indicator` com `children` e `copied` textuais.\n * Os dois rótulos continuam sobrescrevíveis.\n */\nexport const ClipboardCopyText = (props: ClipboardCopyTextProps) => {\n  const { children = 'Copiar', copied = 'Copiado', ...rest } = props;\n\n  return (\n    <ClipboardIndicator\n      copied={copied}\n      {...rest}\n    >\n      {children}\n    </ClipboardIndicator>\n  );\n};\n\nClipboardCopyText.displayName = 'Clipboard.CopyText';\n"],"mappings":";;;;;;;;;AAgBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,UAAU,SAAS,WAAW,GAAG,SAAS;CAE7D,OACE,oBAAC,oBAAD;EACU;EACR,GAAI;EAEH;CACiB,CAAA;AAExB;AAEA,kBAAkB,cAAc"}

package/dist/components/display/clipboard/clipboard-indicator.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MergeOverride } from "@lucasbernardosn/utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-indicator.d.ts
+type IndicatorProps = {
+  /**
+   * Conteúdo exibido enquanto a cópia está em destaque.
+   *
+   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.
+   *
+   * @default <Icon render={<CheckIcon />} />
+   */
+  copied?: React.ReactNode;
+};
+/**
+ * Props do `Clipboard.Indicator`.
+ */
+export type ClipboardIndicatorProps = MergeOverride<useRender.ComponentProps<'span'>, IndicatorProps>;
+/**
+ * Conteúdo que alterna entre os estados de repouso e de cópia.
+ *
+ * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm
+ * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.
+ *
+ * Renderiza um `span` por padrão para ser válido dentro do
+ * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o
+ * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como
+ * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não
+ * encolhe o ícone, que fica centralizado pelo botão.
+ */
+export declare const ClipboardIndicator: {
+  (props: ClipboardIndicatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-indicator.d.ts.map

package/dist/components/display/clipboard/clipboard-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-indicator.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"mappings":";;;;KAQK;;;;;;;;EAQH,SAAS,MAAM;;;;;YAML,0BAA0B,cACpC,UAAU,wBACV;;;;;;;;;;;;;qBAeW;GAA6B,OAAA,0BAAuB,MAAA,+BAAA,MAAA"}

package/dist/components/display/clipboard/clipboard-indicator.js

@@ -0,0 +1,39 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../icon/icon.js";
+import { useClipboardContext } from "./use-clipboard-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, ClipboardIcon } from "@phosphor-icons/react";
+//#region src/components/display/clipboard/clipboard-indicator.tsx
+/**
+* Conteúdo que alterna entre os estados de repouso e de cópia.
+*
+* Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm
+* ícone padrão, então a forma mais curta de usar é sem nenhuma prop.
+*
+* Renderiza um `span` por padrão para ser válido dentro do
+* `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o
+* ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como
+* `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não
+* encolhe o ícone, que fica centralizado pelo botão.
+*/
+const ClipboardIndicator = (props) => {
+	const { render, className, children = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(ClipboardIcon, {}) }), copied = /* @__PURE__ */ jsx(Icon, { render: /* @__PURE__ */ jsx(CheckIcon, {}) }), ...rest } = props;
+	const clipboard = useClipboardContext();
+	const zagProps = clipboard.getIndicatorProps({ copied: clipboard.copied });
+	const baseProps = {
+		"data-component": "Clipboard.Indicator",
+		className: mergeTwClassNames(["contents"], className),
+		children: clipboard.copied ? copied : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+ClipboardIndicator.displayName = "Clipboard.Indicator";
+//#endregion
+export { ClipboardIndicator };
+
+//# sourceMappingURL=clipboard-indicator.js.map

package/dist/components/display/clipboard/clipboard-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-indicator.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-indicator.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport type { MergeOverride } from '@lucasbernardosn/utils';\nimport { CheckIcon, ClipboardIcon } from '@phosphor-icons/react';\nimport type React from 'react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\ntype IndicatorProps = {\n  /**\n   * Conteúdo exibido enquanto a cópia está em destaque.\n   *\n   * O destaque dura o tempo definido em `timeout` no `Clipboard.Root`.\n   *\n   * @default <Icon render={<CheckIcon />} />\n   */\n  copied?: React.ReactNode;\n};\n\n/**\n * Props do `Clipboard.Indicator`.\n */\nexport type ClipboardIndicatorProps = MergeOverride<\n  useRender.ComponentProps<'span'>,\n  IndicatorProps\n>;\n\n/**\n * Conteúdo que alterna entre os estados de repouso e de cópia.\n *\n * Renderiza `children` normalmente e `copied` logo após a cópia. Os dois têm\n * ícone padrão, então a forma mais curta de usar é sem nenhuma prop.\n *\n * Renderiza um `span` por padrão para ser válido dentro do\n * `Clipboard.Trigger`, que é um `button`, e sem caixa própria (`contents`): o\n * ícone ou texto de dentro é que ocupa o lugar no layout. Assim, passado como\n * `icon` de um `IconButton`, o tamanho que o `Icon` aplica ao invólucro não\n * encolhe o ícone, que fica centralizado pelo botão.\n */\nexport const ClipboardIndicator = (props: ClipboardIndicatorProps) => {\n  const {\n    render,\n    className,\n    children = <Icon render={<ClipboardIcon />} />,\n    copied = <Icon render={<CheckIcon />} />,\n    ...rest\n  } = props;\n\n  const clipboard = useClipboardContext();\n\n  // O Zag esconde o indicador quando o `copied` informado não bate com o\n  // estado atual. Aqui os dois conteúdos vivem no mesmo elemento, então o\n  // estado real é repassado para que o indicador nunca seja escondido.\n  const zagProps = clipboard.getIndicatorProps({\n    copied: clipboard.copied,\n  });\n\n  const baseProps = {\n    'data-component': 'Clipboard.Indicator',\n    className: mergeTwClassNames(['contents'], className),\n    children: clipboard.copied ? copied : children,\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'span',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardIndicator.displayName = 'Clipboard.Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAa,sBAAsB,UAAmC;CACpE,MAAM,EACJ,QACA,WACA,WAAW,oBAAC,MAAD,EAAM,QAAQ,oBAAC,eAAD,CAAgB,CAAA,EAAI,CAAA,GAC7C,SAAS,oBAAC,MAAD,EAAM,QAAQ,oBAAC,WAAD,CAAY,CAAA,EAAI,CAAA,GACvC,GAAG,SACD;CAEJ,MAAM,YAAY,oBAAoB;CAKtC,MAAM,WAAW,UAAU,kBAAkB,EAC3C,QAAQ,UAAU,OACpB,CAAC;CAED,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,UAAU,GAAG,SAAS;EACpD,UAAU,UAAU,SAAS,SAAS;CACxC;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/components/display/clipboard/clipboard-input.d.ts

@@ -0,0 +1,19 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-input.d.ts
+/**
+ * Props do `Clipboard.Input`.
+ */
+export type ClipboardInputProps = useRender.ComponentProps<'input'>;
+/**
+ * Campo somente leitura que exibe o valor a ser copiado.
+ *
+ * O conteúdo é selecionado ao receber foco, e copiar pelo teclado
+ * (`Ctrl`/`Cmd` + `C`) também dispara o feedback de cópia. O valor é
+ * sincronizado pela máquina de estados, então acompanha um `value` controlado.
+ */
+export declare const ClipboardInput: {
+  (props: ClipboardInputProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-input.d.ts.map

package/dist/components/display/clipboard/clipboard-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-input.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-input.tsx"],"mappings":";;;;;YAOY,sBAAsB,UAAU;;;;;;;;qBAS/B;GAAyB,OAAA,sCAAmB,+CAAA"}

package/dist/components/display/clipboard/clipboard-input.js

@@ -0,0 +1,29 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useClipboardContext } from "./use-clipboard-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-input.tsx
+/**
+* Campo somente leitura que exibe o valor a ser copiado.
+*
+* O conteúdo é selecionado ao receber foco, e copiar pelo teclado
+* (`Ctrl`/`Cmd` + `C`) também dispara o feedback de cópia. O valor é
+* sincronizado pela máquina de estados, então acompanha um `value` controlado.
+*/
+const ClipboardInput = (props) => {
+	const { render, className, ...rest } = props;
+	const zagProps = useClipboardContext().getInputProps();
+	const baseProps = {
+		"data-component": "Clipboard.Input",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+ClipboardInput.displayName = "Clipboard.Input";
+//#endregion
+export { ClipboardInput };
+
+//# sourceMappingURL=clipboard-input.js.map

package/dist/components/display/clipboard/clipboard-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-input.js","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-input.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\nimport { useClipboardContext } from './use-clipboard-context';\n\n/**\n * Props do `Clipboard.Input`.\n */\nexport type ClipboardInputProps = useRender.ComponentProps<'input'>;\n\n/**\n * Campo somente leitura que exibe o valor a ser copiado.\n *\n * O conteúdo é selecionado ao receber foco, e copiar pelo teclado\n * (`Ctrl`/`Cmd` + `C`) também dispara o feedback de cópia. O valor é\n * sincronizado pela máquina de estados, então acompanha um `value` controlado.\n */\nexport const ClipboardInput = (props: ClipboardInputProps) => {\n  const { render, className, ...rest } = props;\n\n  const clipboard = useClipboardContext();\n\n  const zagProps = clipboard.getInputProps();\n\n  const baseProps = {\n    'data-component': 'Clipboard.Input',\n    className: mergeTwClassNames([], className),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'input',\n    props: mergeProps(baseProps, zagProps, rest),\n  });\n};\n\nClipboardInput.displayName = 'Clipboard.Input';\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAIvC,MAAM,WAFY,oBAEO,CAAC,CAAC,cAAc;CAEzC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,CAAC,GAAG,SAAS;CAC5C;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,UAAU,IAAI;CAC7C,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/components/display/clipboard/clipboard-label.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-label.d.ts
+/**
+ * Props do `Clipboard.Label`.
+ */
+export type ClipboardLabelProps = useRender.ComponentProps<'label'>;
+/**
+ * Rótulo do Clipboard, associado ao `Clipboard.Input` pelo `htmlFor`.
+ */
+export declare const ClipboardLabel: {
+  (props: ClipboardLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=clipboard-label.d.ts.map

package/dist/components/display/clipboard/clipboard-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-label.d.ts","names":[],"sources":["../../../../src/components/display/clipboard/clipboard-label.tsx"],"mappings":";;;;;YAOY,sBAAsB,UAAU;;;;qBAK/B;GAAyB,OAAA,sCAAmB,+CAAA"}

package/dist/components/display/clipboard/clipboard-label.js

@@ -0,0 +1,25 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { useClipboardContext } from "./use-clipboard-context.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/clipboard/clipboard-label.tsx
+/**
+* Rótulo do Clipboard, associado ao `Clipboard.Input` pelo `htmlFor`.
+*/
+const ClipboardLabel = (props) => {
+	const { render, className, ...rest } = props;
+	const zagProps = useClipboardContext().getLabelProps();
+	const baseProps = {
+		"data-component": "Clipboard.Label",
+		className: mergeTwClassNames([], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "label",
+		props: mergeProps(baseProps, zagProps, rest)
+	});
+};
+ClipboardLabel.displayName = "Clipboard.Label";
+//#endregion
+export { ClipboardLabel };
+
+//# sourceMappingURL=clipboard-label.js.map