@lucasbernardosn/react-ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,50 @@
+import { LinkVariants } from "./link-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { useRender } from "@base-ui/react";
+//#region src/components/typography/link/link.d.ts
+/**
+ * Props do `Link`: as variantes visuais, o `external` e as props do elemento renderizado.
+ */
+export type LinkProps = MergeOverride<useRender.ComponentProps<'a'>, LinkVariants & {
+  /**
+   * Abre o link em nova aba: acrescenta `target="_blank"` e `rel="noopener noreferrer"` (as props
+   * recebidas vencem), o ícone de link externo e o aviso "(abre em nova aba)" para o leitor de
+   * tela.
+   *
+   * @default false
+   */
+  external?: boolean;
+}>;
+/**
+ * Link de texto: cor, sublinhado, foco e, no `external`, o ícone de link externo. Herda o tamanho e
+ * o peso do texto ao redor e quebra de linha junto com ele.
+ *
+ * Renderiza um `<a>`. A navegação de um router vem pelo `render`
+ * (`render={<RouterLink to="…" />}`); um app que navega muito pode montar o próprio wrapper (um
+ * `AppLink` com o `to` e o `render` num lugar só). Para uma ação que não navega, o `render` é um
+ * `<button>`. O `external` abre em nova aba e avisa o leitor de tela.
+ *
+ * @example
+ * ```tsx
+ * <Link href="mailto:contato@exemplo.com.br">contato@exemplo.com.br</Link>
+ *
+ * <Link render={<RouterLink to="/clientes/42" />}>Cardoso Couros</Link>
+ *
+ * <Link render={<button type="button" onClick={openCustomer} />}>
+ *   Cardoso Couros
+ * </Link>
+ *
+ * <Link
+ *   href="https://exemplo.com.br"
+ *   external
+ * >
+ *   exemplo.com.br
+ * </Link>
+ * ```
+ */
+export declare const Link: {
+  (props: LinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=link.d.ts.map

package/dist/components/typography/link/link.js

@@ -0,0 +1,74 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { linkVariants } from "./link-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { mergeProps, useRender } from "@base-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
+//#region src/components/typography/link/link.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Link de texto: cor, sublinhado, foco e, no `external`, o ícone de link externo. Herda o tamanho e
+* o peso do texto ao redor e quebra de linha junto com ele.
+*
+* Renderiza um `<a>`. A navegação de um router vem pelo `render`
+* (`render={<RouterLink to="…" />}`); um app que navega muito pode montar o próprio wrapper (um
+* `AppLink` com o `to` e o `render` num lugar só). Para uma ação que não navega, o `render` é um
+* `<button>`. O `external` abre em nova aba e avisa o leitor de tela.
+*
+* @example
+* ```tsx
+* <Link href="mailto:contato@exemplo.com.br">contato@exemplo.com.br</Link>
+*
+* <Link render={<RouterLink to="/clientes/42" />}>Cardoso Couros</Link>
+*
+* <Link render={<button type="button" onClick={openCustomer} />}>
+*   Cardoso Couros
+* </Link>
+*
+* <Link
+*   href="https://exemplo.com.br"
+*   external
+* >
+*   exemplo.com.br
+* </Link>
+* ```
+*/
+const Link = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme", "variant"]);
+	const { render, className, children, external = false, ...rest } = elementProps;
+	const baseProps = {
+		"data-component": "Link",
+		className: mergeTwClassNames(linkVariants(variantProps), className),
+		...external && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		children: external ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children,
+			/* @__PURE__ */ jsx(Icon, {
+				render: /* @__PURE__ */ jsx(ArrowSquareOutIcon, {}),
+				className: mergeTwClassNames([
+					"inline-block",
+					"align-[-0.125em]",
+					"ms-0.5"
+				])
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: mergeTwClassNames(["sr-only"]),
+				children: "(abre em nova aba)"
+			})
+		] }) : children
+	};
+	return useRender({
+		render,
+		defaultTagName: "a",
+		props: mergeProps(baseProps, rest)
+	});
+};
+Link.displayName = "Link";
+//#endregion
+export { Link };
+
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../../src/components/typography/link/link.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { ArrowSquareOutIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeTwClassNames } from '#utils';\nimport { type LinkVariants, linkVariants } from './link-variants';\n\n/**\n * Props do `Link`: as variantes visuais, o `external` e as props do elemento renderizado.\n */\nexport type LinkProps = MergeOverride<\n  useRender.ComponentProps<'a'>,\n  LinkVariants & {\n    /**\n     * Abre o link em nova aba: acrescenta `target=\"_blank\"` e `rel=\"noopener noreferrer\"` (as props\n     * recebidas vencem), o ícone de link externo e o aviso \"(abre em nova aba)\" para o leitor de\n     * tela.\n     *\n     * @default false\n     */\n    external?: boolean;\n  }\n>;\n\nconst splitVariantProps = createSplitProps<LinkVariants>();\n\n/**\n * Link de texto: cor, sublinhado, foco e, no `external`, o ícone de link externo. Herda o tamanho e\n * o peso do texto ao redor e quebra de linha junto com ele.\n *\n * Renderiza um `<a>`. A navegação de um router vem pelo `render`\n * (`render={<RouterLink to=\"…\" />}`); um app que navega muito pode montar o próprio wrapper (um\n * `AppLink` com o `to` e o `render` num lugar só). Para uma ação que não navega, o `render` é um\n * `<button>`. O `external` abre em nova aba e avisa o leitor de tela.\n *\n * @example\n * ```tsx\n * <Link href=\"mailto:contato@exemplo.com.br\">contato@exemplo.com.br</Link>\n *\n * <Link render={<RouterLink to=\"/clientes/42\" />}>Cardoso Couros</Link>\n *\n * <Link render={<button type=\"button\" onClick={openCustomer} />}>\n *   Cardoso Couros\n * </Link>\n *\n * <Link\n *   href=\"https://exemplo.com.br\"\n *   external\n * >\n *   exemplo.com.br\n * </Link>\n * ```\n */\nexport const Link = (props: LinkProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'variant',\n  ]);\n\n  const {\n    render,\n    className,\n    children,\n    external = false,\n    ...rest\n  } = elementProps;\n\n  const baseProps = {\n    'data-component': 'Link',\n    className: mergeTwClassNames(linkVariants(variantProps), className),\n    ...(external && {\n      target: '_blank',\n      rel: 'noopener noreferrer',\n    }),\n    children: external ? (\n      <>\n        {children}\n        <Icon\n          render={<ArrowSquareOutIcon />}\n          className={mergeTwClassNames([\n            'inline-block',\n            // O link é inline e quebra junto com o texto: o ícone acompanha a linha de base sem\n            // transformar o link em flex.\n            'align-[-0.125em]',\n\n            'ms-0.5',\n          ])}\n        />{' '}\n        <span className={mergeTwClassNames(['sr-only'])}>\n          (abre em nova aba)\n        </span>\n      </>\n    ) : (\n      children\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'a',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nLink.displayName = 'Link';\n"],"mappings":";;;;;;;;AA2BA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BzD,MAAa,QAAQ,UAAqB;CACxC,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,eACA,SACF,CAAC;CAED,MAAM,EACJ,QACA,WACA,UACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBAAkB,aAAa,YAAY,GAAG,SAAS;EAClE,GAAI,YAAY;GACd,QAAQ;GACR,KAAK;EACP;EACA,UAAU,WACR,qBAAA,UAAA,EAAA,UAAA;GACG;GACD,oBAAC,MAAD;IACE,QAAQ,oBAAC,oBAAD,CAAqB,CAAA;IAC7B,WAAW,kBAAkB;KAC3B;KAGA;KAEA;IACF,CAAC;GACF,CAAA;GAAE;GACH,oBAAC,QAAD;IAAM,WAAW,kBAAkB,CAAC,SAAS,CAAC;IAAG,UAAA;GAE3C,CAAA;EACN,EAAA,CAAA,IAEF;CAEJ;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,KAAK,cAAc"}

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

@@ -26,7 +26,7 @@ export declare const markDefaultVariants: Required<MarkVariants>;
  */
 export declare const markVariants: (props?: ({
   colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
-  variant?: "text" | "solid" | "subtle" | "plain" | null | undefined;
+  variant?: "solid" | "subtle" | "plain" | "text" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=mark-variants.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucasbernardosn/react-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A React component library built with TypeScript and Tailwind CSS, designed to provide a comprehensive set of customizable UI components for modern web applications.",
   "type": "module",
   "imports": {
@@ -34,7 +34,7 @@
   "dependencies": {
     "@base-ui/react": "1.9.0",
     "@base-ui/utils": "0.5.0",
-    "@lucasbernardosn/ts-utils": "^0.3.0",
+    "@lucasbernardosn/ts-utils": "^0.4.0",
     "@phosphor-icons/react": "2.1.10",
     "@zag-js/clipboard": "1.44.0",
     "@zag-js/collection": "1.44.0",
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.3",
-    "@lucasbernardosn/react-utils": "0.3.0",
+    "@lucasbernardosn/react-utils": "0.4.0",
     "@lucasbernardosn/ts-config": "0.2.0",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
@@ -70,7 +70,7 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@lucasbernardosn/react-utils": "^0.3.0",
+    "@lucasbernardosn/react-utils": "^0.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0"