@sytechui/link 2.2.26

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @sytechui/link
+
+Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.
+
+Please refer to the [documentation](https://heroui.com/docs/components/link) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/link
+# or
+npm i @sytechui/link
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-3YUB6UMD.mjs

@@ -0,0 +1,78 @@
+"use client";
+
+// src/use-link.ts
+import { link } from "@sytechui/theme";
+import { useAriaLink } from "@sytechui/use-aria-link";
+import { mapPropsVariants, useProviderContext } from "@sytechui/system";
+import { useDOMRef } from "@sytechui/react-utils";
+import { useFocusRing } from "@react-aria/focus";
+import { dataAttr, objectToDeps, mergeProps } from "@sytechui/shared-utils";
+import { useMemo, useCallback } from "react";
+function useLink(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = useProviderContext();
+  const [props, variantProps] = mapPropsVariants(originalProps, link.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    anchorIcon,
+    isExternal = false,
+    showAnchorIcon = false,
+    autoFocus = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onClick,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const domRef = useDOMRef(ref);
+  const disableAnimation = (_b = (_a = originalProps == null ? void 0 : originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const { linkProps } = useAriaLink(
+    {
+      ...otherProps,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      // @ts-ignore React Aria Link does accept onClick as a prop but it's not in the types
+      onClick,
+      isDisabled: originalProps.isDisabled,
+      elementType: `${as}`
+    },
+    domRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    autoFocus
+  });
+  if (isExternal) {
+    otherProps.rel = (_c = otherProps.rel) != null ? _c : "noopener noreferrer";
+    otherProps.target = (_d = otherProps.target) != null ? _d : "_blank";
+  }
+  const styles = useMemo(
+    () => link({
+      ...variantProps,
+      disableAnimation,
+      className
+    }),
+    [objectToDeps(variantProps), disableAnimation, className]
+  );
+  const getLinkProps = useCallback(() => {
+    return {
+      ref: domRef,
+      className: styles,
+      "data-focus": dataAttr(isFocused),
+      "data-disabled": dataAttr(originalProps.isDisabled),
+      "data-focus-visible": dataAttr(isFocusVisible),
+      ...mergeProps(focusProps, linkProps, otherProps, {
+        href: linkProps.href
+      })
+    };
+  }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
+  return { Component, children, anchorIcon, showAnchorIcon, getLinkProps };
+}
+
+export {
+  useLink
+};

package/dist/chunk-7LH7ZARU.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+// src/link-icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LinkIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className: "flex mx-1 text-current self-center",
+    fill: "none",
+    height: "1em",
+    shapeRendering: "geometricPrecision",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+      /* @__PURE__ */ jsx("path", { d: "M10 14L21 3" })
+    ]
+  }
+);
+
+export {
+  LinkIcon
+};

package/dist/chunk-N4RYZLGW.mjs

@@ -0,0 +1,32 @@
+"use client";
+import {
+  useLink
+} from "./chunk-3YUB6UMD.mjs";
+
+// src/link.tsx
+import { forwardRef } from "@sytechui/system";
+import { LinkIcon } from "@sytechui/shared-icons";
+import { linkAnchorClasses } from "@sytechui/theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Link = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = /* @__PURE__ */ jsx(LinkIcon, { className: linkAnchorClasses }),
+    getLinkProps
+  } = useLink({
+    ref,
+    ...props
+  });
+  return /* @__PURE__ */ jsx(Component, { ...getLinkProps(), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    showAnchorIcon && anchorIcon
+  ] }) });
+});
+Link.displayName = "HeroUI.Link";
+var link_default = Link;
+
+export {
+  link_default
+};

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+export { default as Link, LinkProps } from './link.mjs';
+export { useLink } from './use-link.mjs';
+export { LinkIcon } from './link-icon.mjs';
+import '@sytechui/system';
+import 'react';
+import '@react-types/link';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Link, LinkProps } from './link.js';
+export { useLink } from './use-link.js';
+export { LinkIcon } from './link-icon.js';
+import '@sytechui/system';
+import 'react';
+import '@react-types/link';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+import 'react/jsx-runtime';

package/dist/index.js

@@ -0,0 +1,157 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Link: () => link_default,
+  LinkIcon: () => LinkIcon2,
+  useLink: () => useLink
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/link.tsx
+var import_system2 = require("@sytechui/system");
+var import_shared_icons = require("@sytechui/shared-icons");
+var import_theme2 = require("@sytechui/theme");
+
+// src/use-link.ts
+var import_theme = require("@sytechui/theme");
+var import_use_aria_link = require("@sytechui/use-aria-link");
+var import_system = require("@sytechui/system");
+var import_react_utils = require("@sytechui/react-utils");
+var import_focus = require("@react-aria/focus");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+function useLink(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.link.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    anchorIcon,
+    isExternal = false,
+    showAnchorIcon = false,
+    autoFocus = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onClick,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const disableAnimation = (_b = (_a = originalProps == null ? void 0 : originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const { linkProps } = (0, import_use_aria_link.useAriaLink)(
+    {
+      ...otherProps,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      // @ts-ignore React Aria Link does accept onClick as a prop but it's not in the types
+      onClick,
+      isDisabled: originalProps.isDisabled,
+      elementType: `${as}`
+    },
+    domRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = (0, import_focus.useFocusRing)({
+    autoFocus
+  });
+  if (isExternal) {
+    otherProps.rel = (_c = otherProps.rel) != null ? _c : "noopener noreferrer";
+    otherProps.target = (_d = otherProps.target) != null ? _d : "_blank";
+  }
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.link)({
+      ...variantProps,
+      disableAnimation,
+      className
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, className]
+  );
+  const getLinkProps = (0, import_react.useCallback)(() => {
+    return {
+      ref: domRef,
+      className: styles,
+      "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+      "data-disabled": (0, import_shared_utils.dataAttr)(originalProps.isDisabled),
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+      ...(0, import_shared_utils.mergeProps)(focusProps, linkProps, otherProps, {
+        href: linkProps.href
+      })
+    };
+  }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
+  return { Component, children, anchorIcon, showAnchorIcon, getLinkProps };
+}
+
+// src/link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (0, import_system2.forwardRef)((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.LinkIcon, { className: import_theme2.linkAnchorClasses }),
+    getLinkProps
+  } = useLink({
+    ref,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...getLinkProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    children,
+    showAnchorIcon && anchorIcon
+  ] }) });
+});
+Link.displayName = "HeroUI.Link";
+var link_default = Link;
+
+// src/link-icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LinkIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className: "flex mx-1 text-current self-center",
+    fill: "none",
+    height: "1em",
+    shapeRendering: "geometricPrecision",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 3h6v6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 14L21 3" })
+    ]
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link,
+  LinkIcon,
+  useLink
+});

package/dist/index.mjs

@@ -0,0 +1,15 @@
+"use client";
+import {
+  LinkIcon
+} from "./chunk-7LH7ZARU.mjs";
+import {
+  link_default
+} from "./chunk-N4RYZLGW.mjs";
+import {
+  useLink
+} from "./chunk-3YUB6UMD.mjs";
+export {
+  link_default as Link,
+  LinkIcon,
+  useLink
+};

package/dist/link-icon.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const LinkIcon: () => react_jsx_runtime.JSX.Element;
+
+export { LinkIcon };

package/dist/link-icon.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const LinkIcon: () => react_jsx_runtime.JSX.Element;
+
+export { LinkIcon };

package/dist/link-icon.js

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/link-icon.tsx
+var link_icon_exports = {};
+__export(link_icon_exports, {
+  LinkIcon: () => LinkIcon
+});
+module.exports = __toCommonJS(link_icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var LinkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className: "flex mx-1 text-current self-center",
+    fill: "none",
+    height: "1em",
+    shapeRendering: "geometricPrecision",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3h6v6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 14L21 3" })
+    ]
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkIcon
+});

package/dist/link-icon.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  LinkIcon
+} from "./chunk-7LH7ZARU.mjs";
+export {
+  LinkIcon
+};

package/dist/link.d.mts

@@ -0,0 +1,12 @@
+import * as _sytechui_system from '@sytechui/system';
+import { UseLinkProps } from './use-link.mjs';
+import 'react';
+import '@react-types/link';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+
+interface LinkProps extends UseLinkProps {
+}
+declare const Link: _sytechui_system.InternalForwardRefRenderFunction<"a", LinkProps, never>;
+
+export { type LinkProps, Link as default };

package/dist/link.d.ts

@@ -0,0 +1,12 @@
+import * as _sytechui_system from '@sytechui/system';
+import { UseLinkProps } from './use-link.js';
+import 'react';
+import '@react-types/link';
+import '@sytechui/theme';
+import '@sytechui/react-utils';
+
+interface LinkProps extends UseLinkProps {
+}
+declare const Link: _sytechui_system.InternalForwardRefRenderFunction<"a", LinkProps, never>;
+
+export { type LinkProps, Link as default };

package/dist/link.js

@@ -0,0 +1,123 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/link.tsx
+var link_exports = {};
+__export(link_exports, {
+  default: () => link_default
+});
+module.exports = __toCommonJS(link_exports);
+var import_system2 = require("@sytechui/system");
+var import_shared_icons = require("@sytechui/shared-icons");
+var import_theme2 = require("@sytechui/theme");
+
+// src/use-link.ts
+var import_theme = require("@sytechui/theme");
+var import_use_aria_link = require("@sytechui/use-aria-link");
+var import_system = require("@sytechui/system");
+var import_react_utils = require("@sytechui/react-utils");
+var import_focus = require("@react-aria/focus");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+function useLink(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.link.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    anchorIcon,
+    isExternal = false,
+    showAnchorIcon = false,
+    autoFocus = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onClick,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const disableAnimation = (_b = (_a = originalProps == null ? void 0 : originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const { linkProps } = (0, import_use_aria_link.useAriaLink)(
+    {
+      ...otherProps,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      // @ts-ignore React Aria Link does accept onClick as a prop but it's not in the types
+      onClick,
+      isDisabled: originalProps.isDisabled,
+      elementType: `${as}`
+    },
+    domRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = (0, import_focus.useFocusRing)({
+    autoFocus
+  });
+  if (isExternal) {
+    otherProps.rel = (_c = otherProps.rel) != null ? _c : "noopener noreferrer";
+    otherProps.target = (_d = otherProps.target) != null ? _d : "_blank";
+  }
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.link)({
+      ...variantProps,
+      disableAnimation,
+      className
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, className]
+  );
+  const getLinkProps = (0, import_react.useCallback)(() => {
+    return {
+      ref: domRef,
+      className: styles,
+      "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+      "data-disabled": (0, import_shared_utils.dataAttr)(originalProps.isDisabled),
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+      ...(0, import_shared_utils.mergeProps)(focusProps, linkProps, otherProps, {
+        href: linkProps.href
+      })
+    };
+  }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
+  return { Component, children, anchorIcon, showAnchorIcon, getLinkProps };
+}
+
+// src/link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (0, import_system2.forwardRef)((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.LinkIcon, { className: import_theme2.linkAnchorClasses }),
+    getLinkProps
+  } = useLink({
+    ref,
+    ...props
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...getLinkProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    children,
+    showAnchorIcon && anchorIcon
+  ] }) });
+});
+Link.displayName = "HeroUI.Link";
+var link_default = Link;

package/dist/link.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  link_default
+} from "./chunk-N4RYZLGW.mjs";
+import "./chunk-3YUB6UMD.mjs";
+export {
+  link_default as default
+};

package/dist/use-link.d.mts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { MouseEventHandler } from 'react';
+import * as _sytechui_system from '@sytechui/system';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system';
+import { AriaLinkProps } from '@react-types/link';
+import { LinkVariantProps } from '@sytechui/theme';
+import { ReactRef } from '@sytechui/react-utils';
+
+interface Props extends HTMLHeroUIProps<"a">, LinkVariantProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLAnchorElement | null>;
+    /**
+     * Whether the link is external.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether to show the icon when the link is external.
+     * @default false
+     */
+    showAnchorIcon?: boolean;
+    /**
+     * The icon to display right after the link.
+     * @default <LinkIcon />
+     */
+    anchorIcon?: React.ReactNode;
+    /**
+     * The native link click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+type UseLinkProps = Props & AriaLinkProps;
+declare function useLink(originalProps: UseLinkProps): {
+    Component: _sytechui_system.As<any>;
+    children: react.ReactNode;
+    anchorIcon: react.ReactNode;
+    showAnchorIcon: boolean;
+    getLinkProps: PropGetter;
+};
+type UseLinkReturn = ReturnType<typeof useLink>;
+
+export { type UseLinkProps, type UseLinkReturn, useLink };

package/dist/use-link.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { MouseEventHandler } from 'react';
+import * as _sytechui_system from '@sytechui/system';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system';
+import { AriaLinkProps } from '@react-types/link';
+import { LinkVariantProps } from '@sytechui/theme';
+import { ReactRef } from '@sytechui/react-utils';
+
+interface Props extends HTMLHeroUIProps<"a">, LinkVariantProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLAnchorElement | null>;
+    /**
+     * Whether the link is external.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether to show the icon when the link is external.
+     * @default false
+     */
+    showAnchorIcon?: boolean;
+    /**
+     * The icon to display right after the link.
+     * @default <LinkIcon />
+     */
+    anchorIcon?: React.ReactNode;
+    /**
+     * The native link click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+type UseLinkProps = Props & AriaLinkProps;
+declare function useLink(originalProps: UseLinkProps): {
+    Component: _sytechui_system.As<any>;
+    children: react.ReactNode;
+    anchorIcon: react.ReactNode;
+    showAnchorIcon: boolean;
+    getLinkProps: PropGetter;
+};
+type UseLinkReturn = ReturnType<typeof useLink>;
+
+export { type UseLinkProps, type UseLinkReturn, useLink };

package/dist/use-link.js

@@ -0,0 +1,101 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-link.ts
+var use_link_exports = {};
+__export(use_link_exports, {
+  useLink: () => useLink
+});
+module.exports = __toCommonJS(use_link_exports);
+var import_theme = require("@sytechui/theme");
+var import_use_aria_link = require("@sytechui/use-aria-link");
+var import_system = require("@sytechui/system");
+var import_react_utils = require("@sytechui/react-utils");
+var import_focus = require("@react-aria/focus");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+function useLink(originalProps) {
+  var _a, _b, _c, _d;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.link.variantKeys);
+  const {
+    ref,
+    as,
+    children,
+    anchorIcon,
+    isExternal = false,
+    showAnchorIcon = false,
+    autoFocus = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onClick,
+    ...otherProps
+  } = props;
+  const Component = as || "a";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const disableAnimation = (_b = (_a = originalProps == null ? void 0 : originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const { linkProps } = (0, import_use_aria_link.useAriaLink)(
+    {
+      ...otherProps,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      // @ts-ignore React Aria Link does accept onClick as a prop but it's not in the types
+      onClick,
+      isDisabled: originalProps.isDisabled,
+      elementType: `${as}`
+    },
+    domRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = (0, import_focus.useFocusRing)({
+    autoFocus
+  });
+  if (isExternal) {
+    otherProps.rel = (_c = otherProps.rel) != null ? _c : "noopener noreferrer";
+    otherProps.target = (_d = otherProps.target) != null ? _d : "_blank";
+  }
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme.link)({
+      ...variantProps,
+      disableAnimation,
+      className
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, className]
+  );
+  const getLinkProps = (0, import_react.useCallback)(() => {
+    return {
+      ref: domRef,
+      className: styles,
+      "data-focus": (0, import_shared_utils.dataAttr)(isFocused),
+      "data-disabled": (0, import_shared_utils.dataAttr)(originalProps.isDisabled),
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
+      ...(0, import_shared_utils.mergeProps)(focusProps, linkProps, otherProps, {
+        href: linkProps.href
+      })
+    };
+  }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
+  return { Component, children, anchorIcon, showAnchorIcon, getLinkProps };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLink
+});

package/dist/use-link.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useLink
+} from "./chunk-3YUB6UMD.mjs";
+export {
+  useLink
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@sytechui/link",
+  "version": "2.2.26",
+  "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
+  "keywords": [
+    "link"
+  ],
+  "author": "HeroUI <support@heroui.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/components/link"
+  },
+  "bugs": {
+    "url": "https://github.com/heroui-inc/heroui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@sytechui/theme": ">=2.4.24",
+    "@sytechui/system": ">=2.4.18"
+  },
+  "dependencies": {
+    "@react-aria/focus": "3.21.5",
+    "@react-types/link": "3.6.7",
+    "@sytechui/shared-utils": "2.1.12",
+    "@sytechui/shared-icons": "2.1.10",
+    "@sytechui/react-utils": "2.1.14",
+    "@sytechui/use-aria-link": "2.2.23"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src"
+  }
+}