@caseparts-org/caseblocks 0.0.72 → 0.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,105 +1,17 @@
1
1
  import { default as React } from 'react';
2
2
  import { HideAtProps } from '../HideAt';
3
3
  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, HideAtProps {
4
- external?: boolean;
5
4
  href: string;
6
- children: React.ReactNode;
7
5
  disabled?: boolean;
8
- /** Skip default link styling (still applies responsive + disabled adjustments). */
9
6
  unstyled?: boolean;
10
- }
11
- /** Signature an external router link (e.g. next/link) must satisfy */
12
- export type LinkComponent = (_props: LinkProps) => JSX.Element;
13
- export declare function LinkProvider({ component, children, }: {
14
- component: LinkComponent;
7
+ external?: boolean;
15
8
  children: React.ReactNode;
16
- }): import("react/jsx-runtime").JSX.Element;
17
- /**
18
- *
19
- * Framework‑agnostic link component with an injectable routing implementation.
20
- *
21
- * By default it renders a styled `<a>`. Consumers (e.g. a Next.js or React Router app)
22
- * can wrap their application in a <LinkProvider /> to override navigation while
23
- * preserving styling, accessibility, disabled handling, and responsive visibility logic.
24
- *
25
- * ## Why a provider?
26
- * Central injection means every internal usage of <Link /> inside the design system
27
- * (e.g. in CategoryNav, MainNav, etc.) automatically adopts the host app's router
28
- * without changing those components or sprinkling `as` props everywhere.
29
- *
30
- * ## Disabled behavior
31
- * - Adds `aria-disabled`
32
- * - Prevents default navigation & stops propagation
33
- * - Removes from tab order (tabIndex = -1)
34
- * - Applies a disabled style
35
- *
36
- * ## Responsive visibility
37
- * Accepts `hideAt?: Breakpoint[]` (see HideAt) to conditionally hide via utility classes.
38
- *
39
- * ## Usage (Default / No Provider)
40
- * ```tsx
41
- * <Link href="/parts/123">View Part</Link>
42
- * ```
43
- *
44
- * ## Usage (Next.js)
45
- * Create an app-level provider so all CaseBlocks links use Next.js client navigation & prefetch.
46
- *
47
- * ```tsx
48
- * // app/providers.tsx (or pages/_app.tsx)
49
- * import React from 'react';
50
- * import NextLink from 'next/link';
51
- * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
52
- *
53
- * export function AppProviders({ children }: { children: React.ReactNode }) {
54
- * return (
55
- * <LinkProvider
56
- * component={(p: LinkProps) => (
57
- * // Next.js <Link> accepts anchor props like className, onClick, etc.
58
- * <NextLink href={p.href} className={p.className} prefetch>
59
- * {p.children}
60
- * </NextLink>
61
- * )}
62
- * >
63
- * {children}
64
- * </LinkProvider>
65
- * );
66
- * }
67
- * ```
68
- *
69
- * Now every internal <Link /> (e.g. in <CategoryNav />) uses Next.js routing automatically.
70
- *
71
- * ## Usage (react-router-dom)
72
- * ```tsx
73
- * import { Link as RouterLink } from 'react-router-dom';
74
- * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
75
- *
76
- * function AppProviders({ children }: { children: React.ReactNode }) {
77
- * return (
78
- * <LinkProvider
79
- * component={({ href, children, className, ...rest }: LinkProps) => (
80
- * <RouterLink to={href} className={className} {...rest}>
81
- * {children}
82
- * </RouterLink>
83
- * )}
84
- * >
85
- * {children}
86
- * </LinkProvider>
87
- * );
88
- * }
89
- * ```
90
- *
91
- * ## Supplying a custom implementation
92
- * The injected component receives already-prepared props:
93
- * - className (merged styles + responsive + disabled)
94
- * - href (or "#" when disabled)
95
- * - aria-disabled / tabIndex adjustments
96
- * - onClick handler (prevents navigation when disabled)
97
- *
98
- * You normally just map `href` to your router's expected prop (`href` for Next.js, `to` for react-router).
99
- *
100
- * ## Edge cases / Notes
101
- * - If your router component must wrap an <a>, you can still do so; styling is already on the outer element.
102
- * - Do not reimplement disabled logic in the injected component (already handled).
103
- * - If you need additional router-only props (e.g. prefetch={false}), extend in the adapter inside your app, not here.
104
- */
105
- export declare function Link({ external, href, children, disabled, unstyled, hideAt, className, onClick, ...otherProps }: LinkProps): import("react/jsx-runtime").JSX.Element;
9
+ }
10
+ export declare function linkClassName({ className, unstyled, disabled, hideAt }: {
11
+ className?: string;
12
+ unstyled?: boolean;
13
+ disabled?: boolean;
14
+ hideAt?: HideAtProps["hideAt"];
15
+ }): string;
16
+ /** SSR‑safe base link primitive */
17
+ export declare function Link({ href, disabled, unstyled, external, hideAt, className, children, onClick, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
@@ -1,57 +1,55 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import p from "react";
3
- import { t as g } from "../../Text.module-Dzhzk2fH.js";
4
- import { c as v } from "../../clsx-OuTLNxxd.js";
5
- import { getHideAtStyles as y } from "../HideAt.js";
6
- import '../../assets/Link.css';const I = "_link_ygp31_1", L = "_disabled_ygp31_14", c = {
7
- link: I,
8
- disabled: L
9
- }, u = p.createContext(null);
10
- function j({
11
- component: n,
12
- children: r
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { t as u } from "../../Text.module-Dzhzk2fH.js";
3
+ import { c as _ } from "../../clsx-OuTLNxxd.js";
4
+ import { getHideAtStyles as g } from "../HideAt.js";
5
+ import '../../assets/Link.css';const k = "_link_ygp31_1", y = "_disabled_ygp31_14", i = {
6
+ link: k,
7
+ disabled: y
8
+ };
9
+ function b({
10
+ className: e,
11
+ unstyled: t,
12
+ disabled: n,
13
+ hideAt: s
13
14
  }) {
14
- return /* @__PURE__ */ e(u.Provider, { value: n, children: r });
15
+ return _(
16
+ e,
17
+ !t && u["text-body"],
18
+ !t && i.link,
19
+ n && i.disabled,
20
+ g(s)
21
+ );
15
22
  }
16
- function A({
17
- external: n,
18
- href: r,
19
- children: o,
23
+ function S({
24
+ href: e,
20
25
  disabled: t = !1,
21
- unstyled: l = !1,
22
- hideAt: x,
23
- className: k,
24
- onClick: a,
25
- ...s
26
+ unstyled: n = !1,
27
+ external: s,
28
+ hideAt: l,
29
+ className: f,
30
+ children: m,
31
+ onClick: r,
32
+ ...o
26
33
  }) {
27
- const m = p.useContext(u), _ = v(
28
- k,
29
- !l && g["text-body"],
30
- !l && c.link,
31
- t && c.disabled,
32
- y(x)
33
- );
34
- function d(f) {
34
+ function p(a) {
35
35
  if (t) {
36
- f.preventDefault(), f.stopPropagation();
36
+ a.preventDefault(), a.stopPropagation();
37
37
  return;
38
38
  }
39
- a == null || a(f);
39
+ r == null || r(a);
40
40
  }
41
- const i = {
42
- ...s,
43
- href: t ? "#" : r,
44
- className: _,
45
- children: o,
46
- disabled: t,
47
- onClick: d,
41
+ const c = b({ className: f, unstyled: n, disabled: t, hideAt: l }), x = {
42
+ ...o,
43
+ href: t ? "#" : e,
44
+ className: c,
45
+ onClick: p,
48
46
  "aria-disabled": t || void 0,
49
- tabIndex: t ? -1 : s.tabIndex,
50
- role: t ? "link" : s.role
47
+ tabIndex: t ? -1 : o.tabIndex,
48
+ role: t ? "link" : o.role
51
49
  };
52
- return n ? /* @__PURE__ */ e("a", { ...i, children: o }) : m ? /* @__PURE__ */ e(m, { ...i }) : /* @__PURE__ */ e("a", { ...i, children: o });
50
+ return /* @__PURE__ */ d("a", { ...x, children: m });
53
51
  }
54
52
  export {
55
- A as Link,
56
- j as LinkProvider
53
+ S as Link,
54
+ b as linkClassName
57
55
  };
@@ -0,0 +1,10 @@
1
+ import { default as React } from 'react';
2
+ import { LinkProps } from './Link';
3
+ /** Minimal contract a router link should satisfy */
4
+ export type RouterLike = React.ComponentType<{
5
+ href: string;
6
+ className?: string;
7
+ children: React.ReactNode;
8
+ } & React.AnchorHTMLAttributes<HTMLAnchorElement>>;
9
+ /** Build a styled, disabled-aware Link that delegates navigation to RouterLike */
10
+ export declare function createLinkAdapter(RouterComponent: RouterLike): ({ href, disabled, unstyled, hideAt, className, children, onClick, ...rest }: LinkProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,39 @@
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { linkClassName as x } from "./Link.js";
3
+ function k(a) {
4
+ return function({
5
+ href: o,
6
+ disabled: r = !1,
7
+ unstyled: f = !1,
8
+ hideAt: p,
9
+ className: i,
10
+ children: m,
11
+ onClick: t,
12
+ ...n
13
+ }) {
14
+ function u(e) {
15
+ if (r) {
16
+ e.preventDefault(), e.stopPropagation();
17
+ return;
18
+ }
19
+ t == null || t(e);
20
+ }
21
+ const c = x({ className: i, unstyled: f, disabled: r, hideAt: p });
22
+ return /* @__PURE__ */ l(
23
+ a,
24
+ {
25
+ ...n,
26
+ href: r ? "#" : o,
27
+ className: c,
28
+ onClick: u,
29
+ "aria-disabled": r || void 0,
30
+ tabIndex: r ? -1 : n.tabIndex,
31
+ role: r ? "link" : n.role,
32
+ children: m
33
+ }
34
+ );
35
+ };
36
+ }
37
+ export {
38
+ k as createLinkAdapter
39
+ };
@@ -1,6 +1,4 @@
1
1
  export * from './main-server';
2
- export { Link, LinkProvider } from './atoms/Link/Link';
3
- export type { LinkProps } from './atoms/Link/Link';
4
2
  export { LinkButton } from './atoms/LinkButton/LinkButton';
5
3
  export type { LinkButtonProps } from './atoms/LinkButton/LinkButton';
6
4
  export { Image, ImageProvider } from './atoms/Image/Image';
@@ -1,69 +1,70 @@
1
1
  import { Button as t } from "./atoms/Button/Button.js";
2
2
  import { Flex as p } from "./atoms/Flex/Flex.js";
3
3
  import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
4
- import { Head as i } from "./atoms/Root/Head.js";
4
+ import { Head as n } from "./atoms/Root/Head.js";
5
5
  import { Icon as u } from "./atoms/Icon/Icon.js";
6
- import { Root as l } from "./atoms/Root/Root.js";
6
+ import { Root as c } from "./atoms/Root/Root.js";
7
7
  import { Separator as C } from "./atoms/Separator/Separator.js";
8
- import { Text as k } from "./atoms/Text/Text.js";
9
- import { Input as A } from "./atoms/Input/Input.js";
10
- import { Logo as I } from "./molecules/Logo/Logo.js";
11
- import { SearchBox as L } from "./molecules/SearchBox/SearchBox.js";
12
- import { QuantityInput as S } from "./molecules/QuantityInput/QuantityInput.js";
13
- import { Pricing as F } from "./molecules/Pricing/Pricing.js";
14
- import { Link as M, LinkProvider as N } from "./atoms/Link/Link.js";
15
- import { LinkButton as s } from "./atoms/LinkButton/LinkButton.js";
16
- import { Image as G, ImageProvider as H } from "./atoms/Image/Image.js";
17
- import { Tooltip as R } from "./molecules/Tooltip/Tooltip.js";
18
- import { Account as j } from "./molecules/Account/Account.js";
19
- import { Avatar as z } from "./molecules/Avatar/Avatar.js";
20
- import { Chip as E } from "./molecules/Chip/Chip.js";
21
- import { ToggleView as K } from "./molecules/ToggleView/ToggleView.js";
22
- import { StatefulButton as U } from "./molecules/StatefulButton/StatefulButton.js";
23
- import { AnimatedCheckMark as X } from "./molecules/StatefulButton/AnimatedCheckmark.js";
24
- import { AddToCart as Z } from "./molecules/AddToCart/AddToCart.js";
25
- import { Availability as $ } from "./molecules/Availability/Availability.js";
26
- import { BannerCard as ro } from "./molecules/BannerCard/BannerCard.js";
27
- import { MainNav as eo } from "./organisms/MainNav/MainNav.js";
28
- import { ChipSelector as mo } from "./organisms/ChipSelector/ChipSelector.js";
29
- import { Product as fo } from "./organisms/Product/Product.js";
8
+ import { Text as A } from "./atoms/Text/Text.js";
9
+ import { Input as B } from "./atoms/Input/Input.js";
10
+ import { Link as h } from "./atoms/Link/Link.js";
11
+ import { createLinkAdapter as L } from "./atoms/Link/createLinkAdapter.js";
12
+ import { Logo as T } from "./molecules/Logo/Logo.js";
13
+ import { SearchBox as P } from "./molecules/SearchBox/SearchBox.js";
14
+ import { QuantityInput as M } from "./molecules/QuantityInput/QuantityInput.js";
15
+ import { Pricing as b } from "./molecules/Pricing/Pricing.js";
16
+ import { LinkButton as w } from "./atoms/LinkButton/LinkButton.js";
17
+ import { Image as H, ImageProvider as Q } from "./atoms/Image/Image.js";
18
+ import { Tooltip as V } from "./molecules/Tooltip/Tooltip.js";
19
+ import { Account as q } from "./molecules/Account/Account.js";
20
+ import { Avatar as D } from "./molecules/Avatar/Avatar.js";
21
+ import { Chip as J } from "./molecules/Chip/Chip.js";
22
+ import { ToggleView as O } from "./molecules/ToggleView/ToggleView.js";
23
+ import { StatefulButton as W } from "./molecules/StatefulButton/StatefulButton.js";
24
+ import { AnimatedCheckMark as Y } from "./molecules/StatefulButton/AnimatedCheckmark.js";
25
+ import { AddToCart as _ } from "./molecules/AddToCart/AddToCart.js";
26
+ import { Availability as oo } from "./molecules/Availability/Availability.js";
27
+ import { BannerCard as to } from "./molecules/BannerCard/BannerCard.js";
28
+ import { MainNav as po } from "./organisms/MainNav/MainNav.js";
29
+ import { ChipSelector as xo } from "./organisms/ChipSelector/ChipSelector.js";
30
+ import { Product as ao } from "./organisms/Product/Product.js";
30
31
  import { NotFound as io } from "./organisms/NotFound/NotFound.js";
31
- import { Carousel as uo } from "./organisms/Carousel/Carousel.js";
32
- import { Footer as co } from "./organisms/Footer/Footer.js";
32
+ import { Carousel as co } from "./organisms/Carousel/Carousel.js";
33
+ import { Footer as Co } from "./organisms/Footer/Footer.js";
33
34
  export {
34
- j as Account,
35
- Z as AddToCart,
36
- X as AnimatedCheckMark,
37
- $ as Availability,
38
- z as Avatar,
39
- ro as BannerCard,
35
+ q as Account,
36
+ _ as AddToCart,
37
+ Y as AnimatedCheckMark,
38
+ oo as Availability,
39
+ D as Avatar,
40
+ to as BannerCard,
40
41
  t as Button,
41
- uo as Carousel,
42
- E as Chip,
43
- mo as ChipSelector,
42
+ co as Carousel,
43
+ J as Chip,
44
+ xo as ChipSelector,
44
45
  x as Column,
45
46
  p as Flex,
46
- co as Footer,
47
+ Co as Footer,
47
48
  f as Grid,
48
- i as Head,
49
+ n as Head,
49
50
  u as Icon,
50
- G as Image,
51
- H as ImageProvider,
52
- A as Input,
53
- M as Link,
54
- s as LinkButton,
55
- N as LinkProvider,
56
- I as Logo,
57
- eo as MainNav,
51
+ H as Image,
52
+ Q as ImageProvider,
53
+ B as Input,
54
+ h as Link,
55
+ w as LinkButton,
56
+ T as Logo,
57
+ po as MainNav,
58
58
  io as NotFound,
59
- F as Pricing,
60
- fo as Product,
61
- S as QuantityInput,
62
- l as Root,
63
- L as SearchBox,
59
+ b as Pricing,
60
+ ao as Product,
61
+ M as QuantityInput,
62
+ c as Root,
63
+ P as SearchBox,
64
64
  C as Separator,
65
- U as StatefulButton,
66
- k as Text,
67
- K as ToggleView,
68
- R as Tooltip
65
+ W as StatefulButton,
66
+ A as Text,
67
+ O as ToggleView,
68
+ V as Tooltip,
69
+ L as createLinkAdapter
69
70
  };
@@ -13,6 +13,10 @@ export { Text } from './atoms/Text/Text';
13
13
  export type { TextProps } from './atoms/Text/Text';
14
14
  export { Input } from './atoms/Input/Input';
15
15
  export type { InputProps } from './atoms/Input/Input';
16
+ export { Link } from './atoms/Link/Link';
17
+ export type { LinkProps } from './atoms/Link/Link';
18
+ export { createLinkAdapter } from './atoms/Link/createLinkAdapter';
19
+ export type { RouterLike } from './atoms/Link/createLinkAdapter';
16
20
  export { Logo } from './molecules/Logo/Logo';
17
21
  export type { LogoProps } from './molecules/Logo/Logo';
18
22
  export { SearchBox } from './molecules/SearchBox/SearchBox';
@@ -2,28 +2,32 @@ import { Button as t } from "./atoms/Button/Button.js";
2
2
  import { Flex as p } from "./atoms/Flex/Flex.js";
3
3
  import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
4
4
  import { Head as a } from "./atoms/Root/Head.js";
5
- import { Icon as i } from "./atoms/Icon/Icon.js";
6
- import { Root as I } from "./atoms/Root/Root.js";
7
- import { Separator as g } from "./atoms/Separator/Separator.js";
8
- import { Text as B } from "./atoms/Text/Text.js";
9
- import { Input as h } from "./atoms/Input/Input.js";
10
- import { Logo as C } from "./molecules/Logo/Logo.js";
11
- import { SearchBox as G } from "./molecules/SearchBox/SearchBox.js";
12
- import { QuantityInput as L } from "./molecules/QuantityInput/QuantityInput.js";
13
- import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
5
+ import { Icon as u } from "./atoms/Icon/Icon.js";
6
+ import { Root as d } from "./atoms/Root/Root.js";
7
+ import { Separator as L } from "./atoms/Separator/Separator.js";
8
+ import { Text as k } from "./atoms/Text/Text.js";
9
+ import { Input as B } from "./atoms/Input/Input.js";
10
+ import { Link as h } from "./atoms/Link/Link.js";
11
+ import { createLinkAdapter as A } from "./atoms/Link/createLinkAdapter.js";
12
+ import { Logo as F } from "./molecules/Logo/Logo.js";
13
+ import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
14
+ import { QuantityInput as Q } from "./molecules/QuantityInput/QuantityInput.js";
15
+ import { Pricing as T } from "./molecules/Pricing/Pricing.js";
14
16
  export {
15
17
  t as Button,
16
18
  m as Column,
17
19
  p as Flex,
18
20
  f as Grid,
19
21
  a as Head,
20
- i as Icon,
21
- h as Input,
22
- C as Logo,
23
- Q as Pricing,
24
- L as QuantityInput,
25
- I as Root,
26
- G as SearchBox,
27
- g as Separator,
28
- B as Text
22
+ u as Icon,
23
+ B as Input,
24
+ h as Link,
25
+ F as Logo,
26
+ T as Pricing,
27
+ Q as QuantityInput,
28
+ d as Root,
29
+ H as SearchBox,
30
+ L as Separator,
31
+ k as Text,
32
+ A as createLinkAdapter
29
33
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@caseparts-org/caseblocks",
3
3
  "private": false,
4
- "version": "0.0.72",
4
+ "version": "0.0.73",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",