@telegraph/link 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @telegraph/link
+
+## 0.1.1
+
+### Patch Changes
+
+- [#698](https://github.com/knocklabs/telegraph/pull/698) [`c2e8391`](https://github.com/knocklabs/telegraph/commit/c2e8391342a372b2bc6aa5e29a6c86f816491401) Thanks [@kylemcd](https://github.com/kylemcd)! - feat: first version of the link component

package/README.md

@@ -0,0 +1,96 @@
+# 🔗 Link
+
+> Polymorphic link component with Telegraph typography, color, and icon options.
+
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/link.svg)](https://www.npmjs.com/package/@telegraph/link)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/@telegraph/link)](https://bundlephobia.com/result?p=@telegraph/link)
+[![license](https://img.shields.io/npm/l/@telegraph/link)](https://github.com/knocklabs/telegraph/blob/main/LICENSE)
+
+## Installation
+
+```bash
+npm install @telegraph/link
+```
+
+### Add stylesheet
+
+Pick one:
+
+Via CSS (preferred):
+
+```css
+@import "@telegraph/link";
+```
+
+Via Javascript:
+
+```tsx
+import "@telegraph/link/default.css";
+```
+
+> Then, include `className="tgph"` on the farthest parent element wrapping Telegraph components.
+
+## Quick Start
+
+```tsx
+import { Link } from "@telegraph/link";
+
+export const Example = () => (
+  <Link href="/docs" size="2" color="blue" weight="regular">
+    Docs
+  </Link>
+);
+```
+
+## Props
+
+### `<Link>` (Default Component)
+
+| Prop        | Type                       | Default     | Description                 |
+| ----------- | -------------------------- | ----------- | --------------------------- |
+| `size`      | `"0" \| "1" \| "2" \| "3"` | `"2"`       | Size of link text + icon    |
+| `color`     | `TextColor`                | `"blue"`    | Link color (same as `Text`) |
+| `weight`    | `"regular" \| "medium"`    | `"regular"` | Link text weight            |
+| `icon`      | `IconProps`                | `undefined` | Trailing icon props         |
+| `textProps` | `LinkTextProps`            | `undefined` | Props passed to `Link.Text` |
+| `as`        | `TgphElement`              | `"a"`       | Render polymorphically      |
+
+`TextColor` supports all `@telegraph/typography` text colors: `default`, `gray`, `red`, `beige`, `blue`, `green`, `yellow`, `purple`, `accent`, `white`, `black`, and `disabled`.
+
+## Composition
+
+```tsx
+import { Link } from "@telegraph/link";
+import { ArrowUpRight } from "lucide-react";
+
+export const ComposedLink = () => (
+  <Link.Root href="/docs" color="accent" size="3">
+    <Link.Text>Read more</Link.Text>
+    <Link.Icon icon={ArrowUpRight} aria-hidden />
+  </Link.Root>
+);
+```
+
+## Interaction behavior
+
+`Link` underlines on hover/focus states by default, rather than exposing an `underlined` prop.
+
+## Using with Next.js
+
+```tsx
+import { Link } from "@telegraph/link";
+import { ArrowUpRight } from "lucide-react";
+import NextLink from "next/link";
+
+export const NextExample = () => (
+  <Link
+    as={NextLink}
+    href="/dashboard"
+    icon={{ icon: ArrowUpRight, "aria-hidden": true }}
+  >
+    Dashboard
+  </Link>
+);
+```

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("@telegraph/icon"),h=require("@telegraph/layout"),_=require("@telegraph/typography"),c=require("react"),I={0:"0",1:"1",2:"2",3:"3"},j={regular:"regular",medium:"medium"},L={0:"0",1:"1",2:"2",3:"3"},u={default:"gray-12",black:"black",white:"white",disabled:"gray-9"},b=t=>t in u?u[t]:`${t}-11`,l=c.createContext({size:"2",color:"blue",weight:"regular"}),g=({as:t,size:n="2",color:e="blue",weight:r="regular",...i})=>{const s=b(e);return o.jsx(l.Provider,{value:{size:n,color:e,weight:r},children:o.jsx(h.Stack,{as:t||"a",display:"inline-flex",align:"center",gap:"1",borderColor:s,"data-tgph-link":!0,"data-tgph-link-size":n,"data-tgph-link-color":e,"data-tgph-link-weight":r,...i})})},d=({as:t,size:n,color:e,weight:r,style:i,...s})=>{const a=c.useContext(l);return o.jsx(_.Text,{as:t||"span",size:n??I[a.size],color:e??a.color,weight:r??j[a.weight],internal_optionalAs:!0,"data-link-text":!0,style:{whiteSpace:"nowrap",...i},...s})},x=({icon:t,size:n,color:e,...r})=>{const i=c.useContext(l);return o.jsx(p.Icon,{icon:t,size:n??L[i.size],color:e??i.color,"data-link-icon":!0,...r})},k=({icon:t,textProps:n,children:e,...r})=>o.jsxs(g,{...r,children:[e&&o.jsx(d,{...n,children:e}),t&&o.jsx(x,{...t})]});Object.assign(k,{Root:g,Text:d,Icon:x});const y=k;exports.Link=y;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Link/Link.constants.ts","../../src/Link/Link.tsx"],"sourcesContent":["import type { TextProps as TypographyTextProps } from \"@telegraph/typography\";\n\nexport const LINK_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const LINK_WEIGHT_MAP = {\n  regular: \"regular\",\n  medium: \"medium\",\n} as const;\n\nexport const LINK_ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nconst LINK_SPECIAL_BORDER_COLOR_MAP = {\n  default: \"gray-12\",\n  black: \"black\",\n  white: \"white\",\n  disabled: \"gray-9\",\n} as const;\n\nexport const getLinkBorderColor = (\n  color: NonNullable<TypographyTextProps[\"color\"]>,\n) => {\n  if (color in LINK_SPECIAL_BORDER_COLOR_MAP) {\n    return LINK_SPECIAL_BORDER_COLOR_MAP[\n      color as keyof typeof LINK_SPECIAL_BORDER_COLOR_MAP\n    ];\n  }\n\n  return `${color}-11`;\n};\n","import type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport type { TextProps as TypographyTextProps } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport {\n  LINK_ICON_SIZE_MAP,\n  LINK_SIZE_MAP,\n  LINK_WEIGHT_MAP,\n  getLinkBorderColor,\n} from \"./Link.constants\";\n\ntype RootBaseProps = {\n  size?: keyof typeof LINK_SIZE_MAP;\n  color?: TypographyTextProps[\"color\"];\n  weight?: keyof typeof LINK_WEIGHT_MAP;\n};\n\ntype InternalProps = {\n  size: Required<RootBaseProps>[\"size\"];\n  color: Required<RootBaseProps>[\"color\"];\n  weight: Required<RootBaseProps>[\"weight\"];\n};\n\nexport type RootProps<T extends TgphElement = \"a\"> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"as\" | \"tgphRef\" | \"color\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLAnchorElement> &\n  RootBaseProps;\n\nconst LinkContext = React.createContext<InternalProps>({\n  size: \"2\",\n  color: \"blue\",\n  weight: \"regular\",\n});\n\nconst Root = <T extends TgphElement = \"a\">({\n  as,\n  size = \"2\",\n  color = \"blue\",\n  weight = \"regular\",\n  ...props\n}: RootProps<T>) => {\n  const borderColor = getLinkBorderColor(color);\n\n  return (\n    <LinkContext.Provider value={{ size, color, weight }}>\n      <Stack\n        as={(as || \"a\") as T}\n        display=\"inline-flex\"\n        align=\"center\"\n        gap=\"1\"\n        borderColor={borderColor}\n        data-tgph-link\n        data-tgph-link-size={size}\n        data-tgph-link-color={color}\n        data-tgph-link-weight={weight}\n        {...props}\n      />\n    </LinkContext.Provider>\n  );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n  as,\n  size,\n  color,\n  weight,\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(LinkContext);\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      size={size ?? LINK_SIZE_MAP[context.size]}\n      color={color ?? context.color}\n      weight={weight ?? LINK_WEIGHT_MAP[context.weight]}\n      internal_optionalAs={true}\n      data-link-text\n      style={{\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement = \"span\">({\n  icon,\n  size,\n  color,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(LinkContext);\n  return (\n    <TelegraphIcon\n      icon={icon}\n      size={size ?? LINK_ICON_SIZE_MAP[context.size]}\n      color={color ?? context.color}\n      data-link-icon\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\ntype DefaultTextProps = React.ComponentProps<typeof Text>;\nexport type DefaultProps<T extends TgphElement = \"a\"> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: DefaultIconProps;\n    textProps?: DefaultTextProps;\n  };\n\nconst Default = <T extends TgphElement = \"a\">({\n  icon,\n  textProps,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {children && <Text {...textProps}>{children}</Text>}\n      {icon && <Icon {...icon} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Text,\n  Icon,\n});\n\nconst Link = Default as typeof Default & {\n  Root: typeof Root;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Link };\n"],"names":["LINK_SIZE_MAP","LINK_WEIGHT_MAP","LINK_ICON_SIZE_MAP","LINK_SPECIAL_BORDER_COLOR_MAP","getLinkBorderColor","color","LinkContext","React","Root","as","size","weight","props","borderColor","jsx","Stack","Text","style","context","TelegraphText","Icon","icon","TelegraphIcon","Default","textProps","children","jsxs","Link"],"mappings":"uOAEaA,EAAgB,CAC3B,EAAK,IACL,EAAK,IACL,EAAK,IACL,EAAK,GACP,EAEaC,EAAkB,CAC7B,QAAS,UACT,OAAQ,QACV,EAEaC,EAAqB,CAChC,EAAK,IACL,EAAK,IACL,EAAK,IACL,EAAK,GACP,EAEMC,EAAgC,CACpC,QAAS,UACT,MAAO,QACP,MAAO,QACP,SAAU,QACZ,EAEaC,EACXC,GAEIA,KAASF,EACJA,EACLE,CACF,EAGK,GAAGA,CAAK,MCGXC,EAAcC,EAAM,cAA6B,CACrD,KAAM,IACN,MAAO,OACP,OAAQ,SACV,CAAC,EAEKC,EAAO,CAA8B,CACzC,GAAAC,EACA,KAAAC,EAAO,IACP,MAAAL,EAAQ,OACR,OAAAM,EAAS,UACT,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAcT,EAAmBC,CAAK,EAE5C,OACES,MAACR,EAAY,SAAZ,CAAqB,MAAO,CAAE,KAAAI,EAAM,MAAAL,EAAO,OAAAM,GAC1C,SAAAG,EAAAA,IAACC,EAAAA,MAAA,CACC,GAAKN,GAAM,IACX,QAAQ,cACR,MAAM,SACN,IAAI,IACJ,YAAAI,EACA,iBAAc,GACd,sBAAqBH,EACrB,uBAAsBL,EACtB,wBAAuBM,EACtB,GAAGC,CAAA,CAAA,EAER,CAEJ,EASMI,EAAO,CAAiC,CAC5C,GAAAP,EACA,KAAAC,EACA,MAAAL,EACA,OAAAM,EACA,MAAAM,EACA,GAAGL,CACL,IAAoB,CAClB,MAAMM,EAAUX,EAAM,WAAWD,CAAW,EAC5C,OACEQ,EAAAA,IAACK,EAAAA,KAAA,CACC,GAAKV,GAAM,OACX,KAAMC,GAAQV,EAAckB,EAAQ,IAAI,EACxC,MAAOb,GAASa,EAAQ,MACxB,OAAQP,GAAUV,EAAgBiB,EAAQ,MAAM,EAChD,oBAAqB,GACrB,iBAAc,GACd,MAAO,CACL,WAAY,SACZ,GAAGD,CAAA,EAEJ,GAAGL,CAAA,CAAA,CAGV,EAMMQ,EAAO,CAAiC,CAAA,KAC5CC,EACA,KAAAX,EACA,MAAAL,EACA,GAAGO,CACL,IAAoB,CAClB,MAAMM,EAAUX,EAAM,WAAWD,CAAW,EAC5C,OACEQ,EAAAA,IAACQ,EAAAA,KAAA,CAAA,KACCD,EACA,KAAMX,GAAQR,EAAmBgB,EAAQ,IAAI,EAC7C,MAAOb,GAASa,EAAQ,MACxB,iBAAc,GACb,GAAGN,CAAA,CAAA,CAGV,EAUMW,EAAU,CAA8B,CAC5C,KAAAF,EACA,UAAAG,EACA,SAAAC,EACA,GAAGb,CACL,IAEIc,EAAAA,KAAClB,EAAA,CAAM,GAAGI,EACP,SAAA,CAAAa,GAAYX,EAAAA,IAACE,EAAA,CAAM,GAAGQ,EAAY,SAAAC,CAAA,CAAS,EAC3CJ,GAAQP,EAAAA,IAACM,EAAA,CAAM,GAAGC,CAAA,CAAM,CAAA,EAC3B,EAIJ,OAAO,OAAOE,EAAS,CACrB,KAAAf,EACA,KAAAQ,EACA,KAAAI,CACF,CAAC,EAED,MAAMO,EAAOJ"}

package/dist/css/default.css

@@ -0,0 +1 @@
+[data-tgph-link]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease-in-out,border-color .2s ease-in-out,filter .2s ease-in-out}[data-tgph-link] [data-link-text]{text-decoration-line:none;text-underline-offset:2px;text-decoration-thickness:1px}[data-tgph-link]:hover,[data-tgph-link]:focus-visible{border-bottom-color:var(--border-color)}[data-tgph-link]:focus{filter:brightness(.8)}[data-tgph-link]:focus-visible{outline:2px solid var(--tgph-blue-8);outline-offset:2px;border-radius:var(--tgph-rounded-1);filter:brightness(.8)}

package/dist/esm/index.mjs

@@ -0,0 +1,111 @@
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { Icon as k } from "@telegraph/icon";
+import { Stack as I } from "@telegraph/layout";
+import { Text as _ } from "@telegraph/typography";
+import c from "react";
+const h = {
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3"
+}, f = {
+  regular: "regular",
+  medium: "medium"
+}, C = {
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3"
+}, u = {
+  default: "gray-12",
+  black: "black",
+  white: "white",
+  disabled: "gray-9"
+}, L = (t) => t in u ? u[t] : `${t}-11`, l = c.createContext({
+  size: "2",
+  color: "blue",
+  weight: "regular"
+}), g = ({
+  as: t,
+  size: r = "2",
+  color: e = "blue",
+  weight: n = "regular",
+  ...o
+}) => {
+  const i = L(e);
+  return /* @__PURE__ */ a(l.Provider, { value: { size: r, color: e, weight: n }, children: /* @__PURE__ */ a(
+    I,
+    {
+      as: t || "a",
+      display: "inline-flex",
+      align: "center",
+      gap: "1",
+      borderColor: i,
+      "data-tgph-link": !0,
+      "data-tgph-link-size": r,
+      "data-tgph-link-color": e,
+      "data-tgph-link-weight": n,
+      ...o
+    }
+  ) });
+}, d = ({
+  as: t,
+  size: r,
+  color: e,
+  weight: n,
+  style: o,
+  ...i
+}) => {
+  const s = c.useContext(l);
+  return /* @__PURE__ */ a(
+    _,
+    {
+      as: t || "span",
+      size: r ?? h[s.size],
+      color: e ?? s.color,
+      weight: n ?? f[s.weight],
+      internal_optionalAs: !0,
+      "data-link-text": !0,
+      style: {
+        whiteSpace: "nowrap",
+        ...o
+      },
+      ...i
+    }
+  );
+}, p = ({
+  icon: t,
+  size: r,
+  color: e,
+  ...n
+}) => {
+  const o = c.useContext(l);
+  return /* @__PURE__ */ a(
+    k,
+    {
+      icon: t,
+      size: r ?? C[o.size],
+      color: e ?? o.color,
+      "data-link-icon": !0,
+      ...n
+    }
+  );
+}, m = ({
+  icon: t,
+  textProps: r,
+  children: e,
+  ...n
+}) => /* @__PURE__ */ x(g, { ...n, children: [
+  e && /* @__PURE__ */ a(d, { ...r, children: e }),
+  t && /* @__PURE__ */ a(p, { ...t })
+] });
+Object.assign(m, {
+  Root: g,
+  Text: d,
+  Icon: p
+});
+const E = m;
+export {
+  E as Link
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Link/Link.constants.ts","../../src/Link/Link.tsx"],"sourcesContent":["import type { TextProps as TypographyTextProps } from \"@telegraph/typography\";\n\nexport const LINK_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const LINK_WEIGHT_MAP = {\n  regular: \"regular\",\n  medium: \"medium\",\n} as const;\n\nexport const LINK_ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nconst LINK_SPECIAL_BORDER_COLOR_MAP = {\n  default: \"gray-12\",\n  black: \"black\",\n  white: \"white\",\n  disabled: \"gray-9\",\n} as const;\n\nexport const getLinkBorderColor = (\n  color: NonNullable<TypographyTextProps[\"color\"]>,\n) => {\n  if (color in LINK_SPECIAL_BORDER_COLOR_MAP) {\n    return LINK_SPECIAL_BORDER_COLOR_MAP[\n      color as keyof typeof LINK_SPECIAL_BORDER_COLOR_MAP\n    ];\n  }\n\n  return `${color}-11`;\n};\n","import type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport type { TextProps as TypographyTextProps } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport {\n  LINK_ICON_SIZE_MAP,\n  LINK_SIZE_MAP,\n  LINK_WEIGHT_MAP,\n  getLinkBorderColor,\n} from \"./Link.constants\";\n\ntype RootBaseProps = {\n  size?: keyof typeof LINK_SIZE_MAP;\n  color?: TypographyTextProps[\"color\"];\n  weight?: keyof typeof LINK_WEIGHT_MAP;\n};\n\ntype InternalProps = {\n  size: Required<RootBaseProps>[\"size\"];\n  color: Required<RootBaseProps>[\"color\"];\n  weight: Required<RootBaseProps>[\"weight\"];\n};\n\nexport type RootProps<T extends TgphElement = \"a\"> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"as\" | \"tgphRef\" | \"color\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLAnchorElement> &\n  RootBaseProps;\n\nconst LinkContext = React.createContext<InternalProps>({\n  size: \"2\",\n  color: \"blue\",\n  weight: \"regular\",\n});\n\nconst Root = <T extends TgphElement = \"a\">({\n  as,\n  size = \"2\",\n  color = \"blue\",\n  weight = \"regular\",\n  ...props\n}: RootProps<T>) => {\n  const borderColor = getLinkBorderColor(color);\n\n  return (\n    <LinkContext.Provider value={{ size, color, weight }}>\n      <Stack\n        as={(as || \"a\") as T}\n        display=\"inline-flex\"\n        align=\"center\"\n        gap=\"1\"\n        borderColor={borderColor}\n        data-tgph-link\n        data-tgph-link-size={size}\n        data-tgph-link-color={color}\n        data-tgph-link-weight={weight}\n        {...props}\n      />\n    </LinkContext.Provider>\n  );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n  as,\n  size,\n  color,\n  weight,\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(LinkContext);\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      size={size ?? LINK_SIZE_MAP[context.size]}\n      color={color ?? context.color}\n      weight={weight ?? LINK_WEIGHT_MAP[context.weight]}\n      internal_optionalAs={true}\n      data-link-text\n      style={{\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement = \"span\">({\n  icon,\n  size,\n  color,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(LinkContext);\n  return (\n    <TelegraphIcon\n      icon={icon}\n      size={size ?? LINK_ICON_SIZE_MAP[context.size]}\n      color={color ?? context.color}\n      data-link-icon\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\ntype DefaultTextProps = React.ComponentProps<typeof Text>;\nexport type DefaultProps<T extends TgphElement = \"a\"> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: DefaultIconProps;\n    textProps?: DefaultTextProps;\n  };\n\nconst Default = <T extends TgphElement = \"a\">({\n  icon,\n  textProps,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {children && <Text {...textProps}>{children}</Text>}\n      {icon && <Icon {...icon} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Text,\n  Icon,\n});\n\nconst Link = Default as typeof Default & {\n  Root: typeof Root;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Link };\n"],"names":["LINK_SIZE_MAP","LINK_WEIGHT_MAP","LINK_ICON_SIZE_MAP","LINK_SPECIAL_BORDER_COLOR_MAP","getLinkBorderColor","color","LinkContext","React","Root","as","size","weight","props","borderColor","jsx","Stack","Text","style","context","TelegraphText","Icon","icon","TelegraphIcon","Default","textProps","children","jsxs","Link"],"mappings":"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"}

package/dist/types/Link/Link.constants.d.ts

@@ -0,0 +1,19 @@
+import { TextProps as TypographyTextProps } from '@telegraph/typography';
+export declare const LINK_SIZE_MAP: {
+    readonly "0": "0";
+    readonly "1": "1";
+    readonly "2": "2";
+    readonly "3": "3";
+};
+export declare const LINK_WEIGHT_MAP: {
+    readonly regular: "regular";
+    readonly medium: "medium";
+};
+export declare const LINK_ICON_SIZE_MAP: {
+    readonly "0": "0";
+    readonly "1": "1";
+    readonly "2": "2";
+    readonly "3": "3";
+};
+export declare const getLinkBorderColor: (color: NonNullable<TypographyTextProps["color"]>) => string;
+//# sourceMappingURL=Link.constants.d.ts.map

package/dist/types/Link/Link.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.constants.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AASX,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,WASjD,CAAC"}

package/dist/types/Link/Link.d.ts

@@ -0,0 +1,33 @@
+import { PolymorphicProps, PolymorphicPropsWithTgphRef, RemappedOmit, TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { Icon as TelegraphIcon } from '@telegraph/icon';
+import { Stack } from '@telegraph/layout';
+import { Text as TelegraphText, TextProps as TypographyTextProps } from '@telegraph/typography';
+import { default as React } from 'react';
+import { LINK_SIZE_MAP, LINK_WEIGHT_MAP } from './Link.constants';
+type RootBaseProps = {
+    size?: keyof typeof LINK_SIZE_MAP;
+    color?: TypographyTextProps["color"];
+    weight?: keyof typeof LINK_WEIGHT_MAP;
+};
+export type RootProps<T extends TgphElement = "a"> = Omit<TgphComponentProps<typeof Stack>, "as" | "tgphRef" | "color"> & PolymorphicPropsWithTgphRef<T, HTMLAnchorElement> & RootBaseProps;
+declare const Root: <T extends TgphElement = "a">({ as, size, color, weight, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type TextProps<T extends TgphElement = "span"> = RemappedOmit<TgphComponentProps<typeof TelegraphText<T>>, "as"> & {
+    as?: T;
+};
+declare const Text: <T extends TgphElement = "span">({ as, size, color, weight, style, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type IconProps<T extends TgphElement = "span"> = TgphComponentProps<typeof TelegraphIcon<T>>;
+declare const Icon: <T extends TgphElement = "span">({ icon, size, color, ...props }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;
+type DefaultIconProps = React.ComponentProps<typeof Icon>;
+type DefaultTextProps = React.ComponentProps<typeof Text>;
+export type DefaultProps<T extends TgphElement = "a"> = PolymorphicProps<T> & TgphComponentProps<typeof Root<T>> & {
+    icon?: DefaultIconProps;
+    textProps?: DefaultTextProps;
+};
+declare const Default: <T extends TgphElement = "a">({ icon, textProps, children, ...props }: DefaultProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Link: typeof Default & {
+    Root: typeof Root;
+    Text: typeof Text;
+    Icon: typeof Icon;
+};
+export { Link };
+//# sourceMappingURL=Link.d.ts.map

package/dist/types/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,2BAA2B,EAC3B,YAAY,EAEZ,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,aAAa,EACb,eAAe,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAClC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC;CACvC,CAAC;AAQF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,IAAI,CACvD,kBAAkB,CAAC,OAAO,KAAK,CAAC,EAChC,IAAI,GAAG,SAAS,GAAG,OAAO,CAC3B,GACC,2BAA2B,CAAC,CAAC,EAAE,iBAAiB,CAAC,GACjD,aAAa,CAAC;AAQhB,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,uCAMxC,SAAS,CAAC,CAAC,CAAC,4CAmBd,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,YAAY,CAClE,kBAAkB,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,EAC3C,IAAI,CACL,GAAG;IACF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,8CAO3C,SAAS,CAAC,CAAC,CAAC,4CAiBd,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,kBAAkB,CACxE,OAAO,aAAa,CAAC,CAAC,CAAC,CACxB,CAAC;AAEF,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,iCAK3C,SAAS,CAAC,CAAC,CAAC,4CAWd,CAAC;AAEF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAC1D,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAC1D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC,GACzE,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,yCAK3C,YAAY,CAAC,CAAC,CAAC,4CAOjB,CAAC;AAQF,QAAA,MAAM,IAAI,EAAc,OAAO,OAAO,GAAG;IACvC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/types/Link/index.d.ts

@@ -0,0 +1,3 @@
+export { Link } from './Link';
+export type { RootProps as LinkRootProps, TextProps as LinkTextProps, IconProps as LinkIconProps, DefaultProps as LinkProps, } from './Link';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,IAAI,aAAa,EAC1B,SAAS,IAAI,aAAa,EAC1B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,GAC1B,MAAM,QAAQ,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { Link } from './Link';
+export type { LinkRootProps, LinkTextProps, LinkIconProps, LinkProps, } from './Link';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,SAAS,GACV,MAAM,QAAQ,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@telegraph/link",
+  "version": "0.1.1",
+  "description": "Link component in Telegraph",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/link",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/css/default.css"
+    },
+    "./default.css": "./dist/css/default.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@telegraph/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@telegraph/helpers": "^0.0.15",
+    "@telegraph/icon": "^0.4.0",
+    "@telegraph/layout": "^0.4.0",
+    "@telegraph/typography": "^0.2.0",
+    "lucide-react": "^0.544.0"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.5",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.31",
+    "@telegraph/prettier-config": "^0.0.7",
+    "@telegraph/vite-config": "^0.0.15",
+    "@types/react": "^19.2.9",
+    "eslint": "^8.56.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}