@janbox/storefront-ui 6.0.7 → 6.0.8

package/README.md

@@ -519,7 +519,6 @@ Mọi component đều có README riêng với API reference, examples, và usag
 - [Marquee](./dist/lib/marquee/README.md)
 - [Menu](./dist/lib/menu/README.md)
 - [MultipleSelect](./dist/lib/multiple-select/README.md)
-- [NavLink](./dist/lib/nav-link/README.md)
 - [Notifications](./dist/lib/notifications/README.md)
 - [OtpInput](./dist/lib/otp-input/README.md)
 - [Pagination](./dist/lib/pagination/README.md)

package/dist/assets/svg/minus.svg.js

@@ -1,4 +1,5 @@
-const MinusIcon = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"></path></svg>';
+import * as React from "react";
+const SvgMinus = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z" }));
 export {
-  MinusIcon as default
+  SvgMinus as default
 };

package/dist/assets/svg/minus2.svg.js

@@ -1,5 +1,4 @@
-import * as React from "react";
-const SvgMinus = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", width: 24, height: 24, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z" }));
+const MinusIcon = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H5a1,1,0,0,1,0-2H19a1,1,0,0,1,0,2Z"></path></svg>';
 export {
-  SvgMinus as default
+  MinusIcon as default
 };

package/dist/index.js

@@ -64,7 +64,6 @@ import { MenuList } from "./lib/menu/menu-list/menu-list.js";
 import { MenuListDataAttributes } from "./lib/menu/menu-list/types.js";
 import { MenuTrigger } from "./lib/menu/menu-trigger/menu-trigger.js";
 import { MultipleSelect } from "./lib/multiple-select/multiple-select.js";
-import { NavLink } from "./lib/nav-link/nav-link.js";
 import { Notifications } from "./lib/notifications/notifications.js";
 import { OtpInput } from "./lib/otp-input/otp-input.js";
 import { Pagination } from "./lib/pagination/pagination.js";
@@ -112,6 +111,8 @@ import { getAccordionContentProps } from "./lib/accordion/accordion-content/help
 import { getAccordionSummaryProps } from "./lib/accordion/accordion-summary/helpers.js";
 import { getBadgeProps } from "./lib/badge/helpers.js";
 import { getBoxProps } from "./lib/box/helpers.js";
+import { getBreadcrumbItemProps } from "./lib/breadcrumbs/breadcrumb-item/helpers.js";
+import { getBreadcrumbsProps } from "./lib/breadcrumbs/breadcrumbs/helpers.js";
 import { getButtonCssBySize, getButtonProps } from "./lib/button/helpers.js";
 import { getCellProps } from "./lib/grid/cell/helpers.js";
 import { getChipProps, getChipSizeState } from "./lib/chip/helpers.js";
@@ -214,7 +215,6 @@ export {
   MenuListDataAttributes,
   MenuTrigger,
   MultipleSelect,
-  NavLink,
   Notifications,
   OtpInput,
   Pagination,
@@ -266,6 +266,8 @@ export {
   getAccordionSummaryProps,
   getBadgeProps,
   getBoxProps,
+  getBreadcrumbItemProps,
+  getBreadcrumbsProps,
   getButtonCssBySize,
   getButtonProps,
   getCellProps,

package/dist/lib/breadcrumbs/README.md

@@ -1,11 +1,11 @@
 # Breadcrumbs
 
-A navigation aid component that displays a hierarchy of links showing the user's current location within the app. It renders BreadcrumbItem children separated by a configurable separator and supports color theming for hover states.
+A navigation aid component that displays a hierarchy of links showing the user's current location within the app. It renders `<nav><ol>` with `BreadcrumbItem` children (`<li>`) separated by a configurable separator, and supports color theming for link hover states.
 
 ## Import
 
 ```tsx
-import { Breadcrumbs } from '@janbox/storefront-ui';
+import { Breadcrumbs, BreadcrumbItem } from '@janbox/storefront-ui';
 ```
 
 ## Props
@@ -13,12 +13,22 @@ import { Breadcrumbs } from '@janbox/storefront-ui';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `separator` | `string \| IconProps` | `'>'` | The separator rendered between each breadcrumb item. Can be a plain string (e.g. `'>'` or `'/'`) or an IconProps object to render an icon. |
-| `color` | `ColorScale` | `'primary'` | Controls the hover color of breadcrumb items. Accepts any ColorScale: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
-| `children` | `React.ReactNode` | - | BreadcrumbItem elements to render as the navigation trail. Flattened automatically to support wrapping in Fragments. |
-| `BreadcrumbItem.to` | `ReactRouterLinkProps['to']` | - | (BreadcrumbItem prop) The route target passed to react-router Link. |
-| `BreadcrumbItem.icon` | `IconProps` | - | (BreadcrumbItem prop) An optional icon rendered before the item label. |
-| `BreadcrumbItem.underline` | `boolean` | - | (BreadcrumbItem prop, inherited from Link) Whether to show an underline on the link. |
-| `BreadcrumbItem.textVariant` | `TypographySizeVariant` | - | (BreadcrumbItem prop, inherited from Link) Typography size variant for the link text. |
+| `color` | `ColorScale` | `'primary'` | Controls the hover color of links (`<a>`) inside breadcrumb items. Accepts any ColorScale: `'primary' \| 'secondary' \| 'green' \| 'red' \| 'orange' \| 'blue' \| 'neutral'`. |
+| `children` | `React.ReactNode` | - | `BreadcrumbItem` elements to render as the navigation trail. Flattened automatically to support wrapping in Fragments. |
+| `spaceBetween` | `number` | `8` | Gap (px) between items and separators. Responsive via `sm` / `md` / `lg` (e.g. `md={{ spaceBetween: 16 }}`). Takes precedence over `sx.gap`. |
+| `sm` / `md` / `lg` | `{ spaceBetween?: number }` | - | Responsive overrides applied from that breakpoint up. |
+
+### BreadcrumbItem
+
+`BreadcrumbItem` renders a plain `<li>` (via `Primitive`) and accepts all `<li>` attributes plus `sx`. Its content is free-form: put an `<a>` (or any link component, e.g. `Link`) inside for navigable items, or plain text for the current page.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Item content, typically an `<a>` or plain text. |
+| `sx` | `ToResponsiveProps<StyledCSS>` | - | Style overrides for the `<li>`. Base style: `display: flex; align-items: center; gap: 6px`. |
+| `ref` | `Ref<HTMLLIElement>` | - | Ref to the `<li>` element. |
+
+> ⚠️ **Breaking change**: `BreadcrumbItem` no longer renders a `Link` and no longer accepts `to`, `icon`, `underline`, or `textVariant`. Put an `<a>` (or `Link`) inside instead (see examples below).
 
 ## Examples
 
@@ -26,9 +36,13 @@ import { Breadcrumbs } from '@janbox/storefront-ui';
 
 ```tsx
 <Breadcrumbs>
-  <BreadcrumbItem to="/">Home</BreadcrumbItem>
-  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
-  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/">Home</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/products">Products</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem aria-current="page">Detail</BreadcrumbItem>
 </Breadcrumbs>
 ```
 
@@ -36,31 +50,76 @@ import { Breadcrumbs } from '@janbox/storefront-ui';
 
 ```tsx
 <Breadcrumbs separator="/">
-  <BreadcrumbItem to="/">Home</BreadcrumbItem>
-  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
-  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/">Home</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/products">Products</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem aria-current="page">Detail</BreadcrumbItem>
 </Breadcrumbs>
 ```
 
 ### WithColor
 
 ```tsx
-<Breadcrumbs color="primary">
-  <BreadcrumbItem to="/">Home</BreadcrumbItem>
-  <BreadcrumbItem to="/products">Products</BreadcrumbItem>
-  <BreadcrumbItem to="/products/detail">Detail</BreadcrumbItem>
+<Breadcrumbs color="red">
+  <BreadcrumbItem>
+    <a href="/">Home</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/products">Products</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem aria-current="page">Detail</BreadcrumbItem>
+</Breadcrumbs>
+```
+
+### WithSpaceBetween
+
+```tsx
+<Breadcrumbs spaceBetween={4} md={{ spaceBetween: 16 }}>
+  <BreadcrumbItem>
+    <a href="/">Home</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/products">Products</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem aria-current="page">Detail</BreadcrumbItem>
+</Breadcrumbs>
+```
+
+### WithIcon
+
+```tsx
+import HomeIcon from '@/assets/svg/earth-home-world.svg?raw';
+
+<Breadcrumbs>
+  <BreadcrumbItem>
+    <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <Icon source={HomeIcon} size={20} />
+      Home
+    </a>
+  </BreadcrumbItem>
+  <BreadcrumbItem>
+    <a href="/products">Products</a>
+  </BreadcrumbItem>
+  <BreadcrumbItem aria-current="page">Detail</BreadcrumbItem>
 </Breadcrumbs>
 ```
 
+## Accessibility
+
+- Renders `<nav>` → `<ol>` → `<li>`. Pass `aria-label="Breadcrumb"` to `Breadcrumbs` to label the landmark.
+- Separators are rendered as `<li aria-hidden="true">`, so screen readers skip them.
+- Mark the current page with `aria-current="page"` (on the `BreadcrumbItem` or on its inner `<a>`).
+
 ## Related Components
 
-- [Link](../link/README.md)
 - [Icon](../icon/README.md)
 
 ## Dependencies
 
 - lodash-es
-- react-router
 - @emotion/react
 
 ## See Also

package/dist/lib/breadcrumbs/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,2 +1,2 @@
 import { BreadcrumbItemProps } from './types';
-export declare const BreadcrumbItem: ({ children, icon, ...props }: BreadcrumbItemProps) => import("react").JSX.Element;
+export declare const BreadcrumbItem: ({ ref, children, ..._props }: BreadcrumbItemProps) => import("react").JSX.Element;

package/dist/lib/breadcrumbs/breadcrumb-item/breadcrumb-item.js

@@ -1,11 +1,9 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Link } from "../../link/link.js";
-import { Icon } from "../../icon/icon.js";
-const BreadcrumbItem = ({ children, icon, ...props }) => {
-  return /* @__PURE__ */ jsxs(Link, { ...props, sx: { display: "flex", width: "fit-content", alignItems: "center", gap: 6, ...props.sx }, children: [
-    icon && /* @__PURE__ */ jsx(Icon, { ...icon }),
-    children
-  ] });
+import { jsx } from "react/jsx-runtime";
+import { getBreadcrumbItemProps } from "./helpers.js";
+import { Primitive } from "../../primitive/primitive.js";
+const BreadcrumbItem = ({ ref, children, ..._props }) => {
+  const props = getBreadcrumbItemProps(_props);
+  return /* @__PURE__ */ jsx(Primitive, { ...props, ref, as: "li", children });
 };
 export {
   BreadcrumbItem

package/dist/lib/breadcrumbs/breadcrumb-item/helpers.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbItemProps } from './types';
+export declare const getBreadcrumbItemProps: (extended: BreadcrumbItemProps) => BreadcrumbItemProps;

package/dist/lib/breadcrumbs/breadcrumb-item/helpers.js

@@ -0,0 +1,14 @@
+import { mergeComponentProps } from "../../../utils/index.js";
+const defaultProps = {
+  sx: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  }
+};
+const getBreadcrumbItemProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getBreadcrumbItemProps
+};

package/dist/lib/breadcrumbs/breadcrumb-item/index.d.ts

@@ -1,2 +1,3 @@
 export * from './breadcrumb-item';
 export * from './types';
+export * from './helpers';

package/dist/lib/breadcrumbs/breadcrumb-item/types.d.ts

@@ -1,6 +1,3 @@
-import { IconProps } from '../../icon';
-import { LinkProps } from '../../link';
-import { ShallowMerge } from '../../../types';
-export type BreadcrumbItemProps = ShallowMerge<LinkProps, {
-    icon?: IconProps;
-}>;
+import { JSX } from 'react';
+import { PrimitiveProps } from '../../primitive';
+export type BreadcrumbItemProps = PrimitiveProps<JSX.IntrinsicElements['li']>;

package/dist/lib/breadcrumbs/breadcrumbs/breadcrumbs.d.ts

@@ -1,2 +1,2 @@
 import { BreadcrumbsProps } from './types';
-export declare const Breadcrumbs: ({ separator, children, color, ...props }: BreadcrumbsProps) => import("react").JSX.Element;
+export declare const Breadcrumbs: ({ separator, children, color, ..._props }: BreadcrumbsProps) => import("react").JSX.Element;

package/dist/lib/breadcrumbs/breadcrumbs/breadcrumbs.js

@@ -1,32 +1,45 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { isString } from "lodash-es";
+import { isString, isNumber } from "lodash-es";
+import { getBreadcrumbsProps } from "./helpers.js";
 import { flattenChildren, getColorShadesByVariant } from "../../../utils/index.js";
 import { getColorVar } from "../../../theme/palette.js";
 import { Primitive } from "../../primitive/primitive.js";
 import { Icon } from "../../icon/icon.js";
-const Breadcrumbs = ({ separator = ">", children, color = "primary", ...props }) => {
+const Breadcrumbs = ({ separator = ">", children, color = "primary", ..._props }) => {
+  var _a, _b, _c;
+  const { spaceBetween, sm, md, lg, ...props } = getBreadcrumbsProps(_props);
   const flattenedChildren = flattenChildren(children);
   const { main } = getColorShadesByVariant(color);
-  return /* @__PURE__ */ jsx(Primitive, { ...props, sx: { display: "inline-flex", flexWrap: "wrap", gap: 8, ...props.sx }, children: flattenedChildren.map((child, index, array) => {
-    const isLast = index === array.length - 1;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Primitive,
-        {
-          sx: {
-            display: "contents",
-            color: getColorVar("neutral.500"),
-            ":hover": {
-              color: main
-            }
-          },
-          children: child
-        }
-      ),
-      !isLast && /* @__PURE__ */ jsx(Fragment$1, { children: isString(separator) ? /* @__PURE__ */ jsx(Primitive, { as: "span", sx: { color: getColorVar("neutral.500") }, children: separator }) : /* @__PURE__ */ jsx(Icon, { ...separator }) })
-    ] }, index);
-  }) });
+  return /* @__PURE__ */ jsx(Primitive, { as: "nav", ...props, children: /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      sx: {
+        display: "flex",
+        flexWrap: "wrap",
+        color: getColorVar("neutral.500"),
+        "& a:hover": {
+          color: main
+        },
+        ...props.sx,
+        ...createStyle({ spaceBetween }),
+        sm: { ...(_a = props.sx) == null ? void 0 : _a.sm, ...createStyle(sm) },
+        md: { ...(_b = props.sx) == null ? void 0 : _b.md, ...createStyle(md) },
+        lg: { ...(_c = props.sx) == null ? void 0 : _c.lg, ...createStyle(lg) }
+      },
+      as: "ol",
+      children: flattenedChildren.map((child, index, array) => {
+        const isLast = index === array.length - 1;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          child,
+          !isLast && /* @__PURE__ */ jsx(Primitive, { as: "li", "aria-hidden": true, sx: { display: "flex", alignItems: "center" }, children: isString(separator) ? separator : /* @__PURE__ */ jsx(Icon, { ...separator }) })
+        ] }, index);
+      })
+    }
+  ) });
+};
+const createStyle = ({ spaceBetween } = {}) => {
+  return isNumber(spaceBetween) ? { gap: spaceBetween } : {};
 };
 export {
   Breadcrumbs

package/dist/lib/breadcrumbs/breadcrumbs/helpers.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbsProps } from './types';
+export declare const getBreadcrumbsProps: (extended: BreadcrumbsProps) => BreadcrumbsProps;

package/dist/lib/breadcrumbs/breadcrumbs/helpers.js

@@ -0,0 +1,10 @@
+import { mergeComponentProps } from "../../../utils/index.js";
+const defaultProps = {
+  spaceBetween: 8
+};
+const getBreadcrumbsProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getBreadcrumbsProps
+};

package/dist/lib/breadcrumbs/breadcrumbs/index.d.ts

@@ -1 +1,3 @@
 export * from './breadcrumbs';
+export * from './types';
+export * from './helpers';

package/dist/lib/breadcrumbs/breadcrumbs/types.d.ts

@@ -1,11 +1,14 @@
 import { JSX } from 'react';
 import { IconProps } from '../../icon';
 import { ColorScale } from '../../../theme';
-import { ShallowMerge } from '../../../types';
+import { ShallowMerge, ToResponsiveProps } from '../../../types';
 import { PrimitiveProps } from '../../primitive';
 type BreadcrumbsSeparator = string | IconProps;
-export type BreadcrumbsProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['div'], {
+export type BreadcrumbsResponsiveProps = {
+    spaceBetween?: number;
+};
+export type BreadcrumbsProps = PrimitiveProps<ShallowMerge<JSX.IntrinsicElements['nav'], {
     separator?: BreadcrumbsSeparator;
     color?: ColorScale;
-}>, 'div'>;
+} & ToResponsiveProps<BreadcrumbsResponsiveProps>>, 'nav'>;
 export {};

package/dist/lib/checkbox/checkbox.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useMergeRefs } from "@floating-ui/react";
 import SvgDoneCheck from "../../assets/svg/done-check.svg.js";
-import SvgMinus from "../../assets/svg/minus2.svg.js";
+import SvgMinus from "../../assets/svg/minus.svg.js";
 import { getColorShadesByVariant } from "../../utils/index.js";
 import "lodash-es";
 import { getColorVar } from "../../theme/palette.js";

package/dist/lib/index.d.ts

@@ -31,7 +31,6 @@ export * from './dialog';
 export * from './loading';
 export * from './link';
 export * from './count-up';
-export * from './nav-link';
 export * from './breadcrumbs';
 export * from './phone-input';
 export * from './form-helper-text';

package/dist/lib/input-number/input-number.js

@@ -4,7 +4,7 @@ import { useMergeRefs } from "@floating-ui/react";
 import { isNil } from "lodash-es";
 import { Input } from "../input/input.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
-import MinusIcon from "../../assets/svg/minus.svg.js";
+import MinusIcon from "../../assets/svg/minus2.svg.js";
 import PlusIcon from "../../assets/svg/plus.svg.js";
 import { IconButton } from "../icon-button/icon-button.js";
 const MAX_FRACTION_DIGITS = 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "6.0.7",
+  "version": "6.0.8",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [

package/dist/lib/nav-link/README.md

@@ -1,61 +0,0 @@
-# NavLink
-
-A wrapper around React Router's NavLink component that adds safe handling for undefined `to` prop. When `to` is nil, the link prevents navigation and treats itself as inactive, making it safe to render navigation items that may not yet have a destination.
-
-## Import
-
-```tsx
-import { NavLink } from '@janbox/storefront-ui';
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `to` | `ReactRouterNavLinkProps['to'] \| undefined` | - | Đường dẫn hoặc location object. Khi `undefined` hoặc `null`, link sẽ ngăn navigation và được coi là inactive (`isActive = false`). |
-| `children` | `React.ReactNode \| ((props: NavLinkRenderProps) => React.ReactNode)` | - | Nội dung bên trong link. Có thể là render function nhận NavLink render props gồm `isActive`, `isPending`, `isTransitioning`. Khi `to` là nil, `isActive` luôn là `false`. |
-| `className` | `string \| ((props: NavLinkRenderProps) => string \| undefined)` | - | Class name hoặc function nhận render props để tính class động. `isActive` trong render props tuân theo nil-to override. |
-| `style` | `React.CSSProperties \| ((props: NavLinkRenderProps) => React.CSSProperties \| undefined)` | - | Inline styles hoặc function nhận render props để tính styles động. `isActive` trong render props tuân theo nil-to override. |
-| `end` | `boolean` | - | Khi `true`, active class/style chỉ được áp dụng khi URL hiện tại khớp chính xác với `to` (không partial matching). |
-| `ref` | `Ref<HTMLAnchorElement>` | - | Forwarded ref đến anchor element bên dưới. |
-| `onClick` | `(event: React.MouseEvent<HTMLAnchorElement>) => void` | - | Click handler. Navigation tự động bị ngăn khi `to` là nil hoặc khi `aria-disabled` là `true`. |
-
-## Examples
-
-### Basic navigation link
-
-```tsx
-<NavLink to="/home">Home</NavLink>
-```
-
-### Active state with exact match and dynamic class
-
-```tsx
-<NavLink
-  to="/dashboard"
-  end
-  className={({ isActive }) => isActive ? 'nav-item nav-item--active' : 'nav-item'}
->
-  Dashboard
-</NavLink>
-```
-
-### Placeholder link with no destination (disabled navigation)
-
-```tsx
-<NavLink to={undefined} aria-disabled="true">
-  {({ isActive }) => (
-    <span style={{ opacity: isActive ? 1 : 0.5 }}>Coming Soon</span>
-  )}
-</NavLink>
-```
-
-## Dependencies
-
-- react-router
-
-## See Also
-
-- [Component Source](./index.ts)
-- [Storybook Stories](./navlink.stories.tsx)
-- [Main README](../../README.md)

package/dist/lib/nav-link/index.d.ts

@@ -1,2 +0,0 @@
-export * from './nav-link';
-export * from './types';

package/dist/lib/nav-link/nav-link.d.ts

@@ -1,2 +0,0 @@
-import { NavLinkProps } from './types';
-export declare const NavLink: ({ children, style, className, to, ref, ...props }: NavLinkProps) => import("react").JSX.Element;

package/dist/lib/nav-link/nav-link.js

@@ -1,37 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { isFunction, isNil } from "lodash-es";
-import { NavLink as NavLink$1 } from "react-router";
-import { Booleanish } from "../../constants/index.js";
-const NavLink = ({ children, style, className, to, ref, ...props }) => {
-  const styleFn = (renderProps) => {
-    return isFunction(style) ? style({
-      ...renderProps,
-      isActive: renderProps.isActive && !isNil(to)
-    }) : style;
-  };
-  const classNameFn = (renderProps) => {
-    return isFunction(className) ? className({
-      ...renderProps,
-      isActive: renderProps.isActive && !isNil(to)
-    }) : className;
-  };
-  const onClick = (e) => {
-    var _a;
-    if (e.currentTarget.getAttribute("aria-disabled") === Booleanish.True) {
-      e.preventDefault();
-    }
-    if (isNil(to)) {
-      e.preventDefault();
-    }
-    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-  };
-  return /* @__PURE__ */ jsx(NavLink$1, { ...props, style: styleFn, className: classNameFn, to: to ?? "#", ref, onClick, children: (renderProps) => {
-    return /* @__PURE__ */ jsx(Fragment, { children: isFunction(children) ? children({
-      ...renderProps,
-      isActive: renderProps.isActive && !isNil(to)
-    }) : children });
-  } });
-};
-export {
-  NavLink
-};

package/dist/lib/nav-link/types.d.ts

@@ -1,7 +0,0 @@
-import { NavLinkProps as ReactRouterNavLinkProps } from 'react-router';
-import { ShallowMerge } from '../../types';
-import { Ref } from 'react';
-export type NavLinkProps = ShallowMerge<ReactRouterNavLinkProps, {
-    to?: ReactRouterNavLinkProps['to'];
-    ref?: Ref<HTMLAnchorElement>;
-}>;