@caseparts-org/caseblocks 0.0.27 → 0.0.29

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,6 +1,5 @@
1
1
  import { default as React } from 'react';
2
2
  import { HideAtProps } from '../HideAt';
3
- /** A link element. */
4
3
  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, HideAtProps {
5
4
  href: string;
6
5
  children: React.ReactNode;
@@ -12,4 +11,92 @@ export declare function LinkProvider({ component, children, }: {
12
11
  component: LinkComponent;
13
12
  children: React.ReactNode;
14
13
  }): import("react/jsx-runtime").JSX.Element;
14
+ /**
15
+ *
16
+ * Framework‑agnostic link component with an injectable routing implementation.
17
+ *
18
+ * By default it renders a styled `<a>`. Consumers (e.g. a Next.js or React Router app)
19
+ * can wrap their application in a <LinkProvider /> to override navigation while
20
+ * preserving styling, accessibility, disabled handling, and responsive visibility logic.
21
+ *
22
+ * ## Why a provider?
23
+ * Central injection means every internal usage of <Link /> inside the design system
24
+ * (e.g. in CategoryNav, MainNav, etc.) automatically adopts the host app's router
25
+ * without changing those components or sprinkling `as` props everywhere.
26
+ *
27
+ * ## Disabled behavior
28
+ * - Adds `aria-disabled`
29
+ * - Prevents default navigation & stops propagation
30
+ * - Removes from tab order (tabIndex = -1)
31
+ * - Applies a disabled style
32
+ *
33
+ * ## Responsive visibility
34
+ * Accepts `hideAt?: Breakpoint[]` (see HideAt) to conditionally hide via utility classes.
35
+ *
36
+ * ## Usage (Default / No Provider)
37
+ * ```tsx
38
+ * <Link href="/parts/123">View Part</Link>
39
+ * ```
40
+ *
41
+ * ## Usage (Next.js)
42
+ * Create an app-level provider so all CaseBlocks links use Next.js client navigation & prefetch.
43
+ *
44
+ * ```tsx
45
+ * // app/providers.tsx (or pages/_app.tsx)
46
+ * import React from 'react';
47
+ * import NextLink from 'next/link';
48
+ * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
49
+ *
50
+ * export function AppProviders({ children }: { children: React.ReactNode }) {
51
+ * return (
52
+ * <LinkProvider
53
+ * component={(p: LinkProps) => (
54
+ * // Next.js <Link> accepts anchor props like className, onClick, etc.
55
+ * <NextLink href={p.href} className={p.className} prefetch>
56
+ * {p.children}
57
+ * </NextLink>
58
+ * )}
59
+ * >
60
+ * {children}
61
+ * </LinkProvider>
62
+ * );
63
+ * }
64
+ * ```
65
+ *
66
+ * Now every internal <Link /> (e.g. in <CategoryNav />) uses Next.js routing automatically.
67
+ *
68
+ * ## Usage (react-router-dom)
69
+ * ```tsx
70
+ * import { Link as RouterLink } from 'react-router-dom';
71
+ * import { LinkProvider, LinkProps } from 'atoms/Link/Link';
72
+ *
73
+ * function AppProviders({ children }: { children: React.ReactNode }) {
74
+ * return (
75
+ * <LinkProvider
76
+ * component={({ href, children, className, ...rest }: LinkProps) => (
77
+ * <RouterLink to={href} className={className} {...rest}>
78
+ * {children}
79
+ * </RouterLink>
80
+ * )}
81
+ * >
82
+ * {children}
83
+ * </LinkProvider>
84
+ * );
85
+ * }
86
+ * ```
87
+ *
88
+ * ## Supplying a custom implementation
89
+ * The injected component receives already-prepared props:
90
+ * - className (merged styles + responsive + disabled)
91
+ * - href (or "#" when disabled)
92
+ * - aria-disabled / tabIndex adjustments
93
+ * - onClick handler (prevents navigation when disabled)
94
+ *
95
+ * You normally just map `href` to your router's expected prop (`href` for Next.js, `to` for react-router).
96
+ *
97
+ * ## Edge cases / Notes
98
+ * - If your router component must wrap an <a>, you can still do so; styling is already on the outer element.
99
+ * - Do not reimplement disabled logic in the injected component (already handled).
100
+ * - If you need additional router-only props (e.g. prefetch={false}), extend in the adapter inside your app, not here.
101
+ */
15
102
  export declare function Link({ href, children, disabled, hideAt, className, onClick, ...otherProps }: LinkProps): import("react/jsx-runtime").JSX.Element;
@@ -1,32 +1,32 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import c from "react";
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import f from "react";
3
3
  import { t as k } from "../../Text.module-smM1g1J4.js";
4
4
  import { c as y } from "../../clsx-OuTLNxxd.js";
5
5
  import { getHideAtStyles as _ } from "../HideAt.js";
6
- import '../../assets/Link.css';const g = "_link_ygp31_1", v = "_disabled_ygp31_14", f = {
6
+ import '../../assets/Link.css';const g = "_link_ygp31_1", v = "_disabled_ygp31_14", m = {
7
7
  link: g,
8
8
  disabled: v
9
- }, p = c.createContext(null);
9
+ }, c = f.createContext(null);
10
10
  function P({
11
11
  component: n,
12
12
  children: e
13
13
  }) {
14
- return /* @__PURE__ */ a(p.Provider, { value: n, children: e });
14
+ return /* @__PURE__ */ i(c.Provider, { value: n, children: e });
15
15
  }
16
16
  function S({
17
17
  href: n,
18
18
  children: e,
19
19
  disabled: t = !1,
20
- hideAt: i,
20
+ hideAt: p,
21
21
  className: u,
22
22
  onClick: r,
23
23
  ...o
24
24
  }) {
25
- const l = c.useContext(p), x = y(
25
+ const a = f.useContext(c), x = y(
26
26
  k["text-body"],
27
- f.link,
28
- t && f.disabled,
29
- _(i),
27
+ m.link,
28
+ t && m.disabled,
29
+ _(p),
30
30
  u
31
31
  );
32
32
  function d(s) {
@@ -36,19 +36,18 @@ function S({
36
36
  }
37
37
  r == null || r(s);
38
38
  }
39
- const m = {
39
+ const l = {
40
40
  ...o,
41
41
  href: t ? "#" : n,
42
42
  className: x,
43
43
  children: e,
44
44
  disabled: t,
45
- hideAt: i,
46
45
  onClick: d,
47
46
  "aria-disabled": t || void 0,
48
47
  tabIndex: t ? -1 : o.tabIndex,
49
48
  role: t ? "link" : o.role
50
49
  };
51
- return l ? /* @__PURE__ */ a(l, { ...m }) : /* @__PURE__ */ a("a", { ...m, children: e });
50
+ return a ? /* @__PURE__ */ i(a, { ...l }) : /* @__PURE__ */ i("a", { ...l, children: e });
52
51
  }
53
52
  export {
54
53
  S as Link,
@@ -0,0 +1,16 @@
1
+ export * from './main-server';
2
+ export { Link, LinkProvider } from './atoms/Link/Link';
3
+ export type { LinkProps } from './atoms/Link/Link';
4
+ export { Tooltip } from './molecules/Tooltip/Tooltip';
5
+ export { Account } from './molecules/Account/Account';
6
+ export type { AccountProps } from './molecules/Account/Account';
7
+ export { Avatar } from './molecules/Avatar/Avatar';
8
+ export type { AvatarProps } from './molecules/Avatar/Avatar';
9
+ export { Chip } from './molecules/Chip/Chip';
10
+ export type { ChipProps } from './molecules/Chip/Chip';
11
+ export { ToggleView } from './molecules/ToggleView/ToggleView';
12
+ export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
13
+ export { MainNav } from './organisms/MainNav/MainNav';
14
+ export type { MainCategory, Category } from './organisms/MainNav/MainNav';
15
+ export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
16
+ export type { ChipSelectorProps } from './organisms/ChipSelector/ChipSelector';
@@ -0,0 +1,42 @@
1
+ import { Button as e } from "./atoms/Button/Button.js";
2
+ import { Flex as p } from "./atoms/Flex/Flex.js";
3
+ import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
4
+ import { Head as a } from "./atoms/Root/Head.js";
5
+ import { Icon as c } from "./atoms/Icon/Icon.js";
6
+ import { Root as u } from "./atoms/Root/Root.js";
7
+ import { Separator as g } from "./atoms/Separator/Separator.js";
8
+ import { Text as v } from "./atoms/Text/Text.js";
9
+ import { Input as L } from "./atoms/Input/Input.js";
10
+ import { Logo as T } from "./molecules/Logo/Logo.js";
11
+ import { SearchBox as A } from "./molecules/SearchBox/SearchBox.js";
12
+ import { Link as I, LinkProvider as w } from "./atoms/Link/Link.js";
13
+ import { Tooltip as G } from "./molecules/Tooltip/Tooltip.js";
14
+ import { Account as M } from "./molecules/Account/Account.js";
15
+ import { Avatar as P } from "./molecules/Avatar/Avatar.js";
16
+ import { Chip as V } from "./molecules/Chip/Chip.js";
17
+ import { ToggleView as j } from "./molecules/ToggleView/ToggleView.js";
18
+ import { MainNav as s } from "./organisms/MainNav/MainNav.js";
19
+ import { ChipSelector as z } from "./organisms/ChipSelector/ChipSelector.js";
20
+ export {
21
+ M as Account,
22
+ P as Avatar,
23
+ e as Button,
24
+ V as Chip,
25
+ z as ChipSelector,
26
+ m as Column,
27
+ p as Flex,
28
+ f as Grid,
29
+ a as Head,
30
+ c as Icon,
31
+ L as Input,
32
+ I as Link,
33
+ w as LinkProvider,
34
+ T as Logo,
35
+ s as MainNav,
36
+ u as Root,
37
+ A as SearchBox,
38
+ g as Separator,
39
+ v as Text,
40
+ j as ToggleView,
41
+ G as Tooltip
42
+ };
@@ -0,0 +1,18 @@
1
+ export { Button } from './atoms/Button/Button';
2
+ export type { ButtonProps } from './atoms/Button/Button';
3
+ export { Flex } from './atoms/Flex/Flex';
4
+ export type { FlexProps } from './atoms/Flex/Flex';
5
+ export { Grid, Column } from './atoms/Grid/Grid';
6
+ export type { GridProps, ColumnProps } from './atoms/Grid/Grid';
7
+ export { Head } from './atoms/Root/Head';
8
+ export { Icon } from './atoms/Icon/Icon';
9
+ export { Root } from './atoms/Root/Root';
10
+ export { Separator } from './atoms/Separator/Separator';
11
+ export type { SeparatorProps } from './atoms/Separator/Separator';
12
+ export { Text } from './atoms/Text/Text';
13
+ export type { TextProps } from './atoms/Text/Text';
14
+ export { Input } from './atoms/Input/Input';
15
+ export type { InputProps } from './atoms/Input/Input';
16
+ export { Logo } from './molecules/Logo/Logo';
17
+ export { SearchBox } from './molecules/SearchBox/SearchBox';
18
+ export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
@@ -0,0 +1,25 @@
1
+ import { Button as t } from "./atoms/Button/Button.js";
2
+ import { Flex as x } from "./atoms/Flex/Flex.js";
3
+ import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
4
+ import { Head as n } from "./atoms/Root/Head.js";
5
+ import { Icon as c } from "./atoms/Icon/Icon.js";
6
+ import { Root as l } from "./atoms/Root/Root.js";
7
+ import { Separator as I } from "./atoms/Separator/Separator.js";
8
+ import { Text as g } from "./atoms/Text/Text.js";
9
+ import { Input as i } from "./atoms/Input/Input.js";
10
+ import { Logo as F } from "./molecules/Logo/Logo.js";
11
+ import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
12
+ export {
13
+ t as Button,
14
+ m as Column,
15
+ x as Flex,
16
+ f as Grid,
17
+ n as Head,
18
+ c as Icon,
19
+ i as Input,
20
+ F as Logo,
21
+ l as Root,
22
+ H as SearchBox,
23
+ I as Separator,
24
+ g as Text
25
+ };
@@ -1,12 +1,7 @@
1
1
  import { jsxs as Z, jsx as ee } from "react/jsx-runtime";
2
2
  import m, { useEffect as j, useState as te } from "react";
3
3
  import { c as K } from "../../clsx-OuTLNxxd.js";
4
- import '../../assets/Tooltip.css';const re = "_wrapper_ogovb_12", ne = "_tooltip_ogovb_17", ie = "_open_ogovb_30", I = {
5
- wrapper: re,
6
- tooltip: ne,
7
- open: ie
8
- };
9
- var U = { exports: {} }, g = {};
4
+ import '../../assets/Tooltip.css';var U = { exports: {} }, g = {};
10
5
  /**
11
6
  * @license React
12
7
  * react-dom.production.js
@@ -17,7 +12,7 @@ var U = { exports: {} }, g = {};
17
12
  * LICENSE file in the root directory of this source tree.
18
13
  */
19
14
  var Y;
20
- function oe() {
15
+ function re() {
21
16
  if (Y) return g;
22
17
  Y = 1;
23
18
  var s = m;
@@ -160,7 +155,7 @@ var y = {};
160
155
  * LICENSE file in the root directory of this source tree.
161
156
  */
162
157
  var z;
163
- function ae() {
158
+ function ne() {
164
159
  return z || (z = 1, process.env.NODE_ENV !== "production" && function() {
165
160
  function s() {
166
161
  }
@@ -383,9 +378,13 @@ function $() {
383
378
  }
384
379
  }
385
380
  }
386
- process.env.NODE_ENV === "production" ? ($(), U.exports = oe()) : U.exports = ae();
381
+ process.env.NODE_ENV === "production" ? ($(), U.exports = re()) : U.exports = ne();
387
382
  var A = U.exports;
388
- const fe = ({
383
+ const ie = "_wrapper_ogovb_12", oe = "_tooltip_ogovb_17", ae = "_open_ogovb_30", I = {
384
+ wrapper: ie,
385
+ tooltip: oe,
386
+ open: ae
387
+ }, fe = ({
389
388
  trigger: s,
390
389
  children: O,
391
390
  position: a = "top",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@caseparts-org/caseblocks",
3
3
  "private": false,
4
- "version": "0.0.27",
4
+ "version": "0.0.29",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -10,24 +10,24 @@
10
10
  ],
11
11
  "exports": {
12
12
  ".": {
13
- "types": "./dist/main.d.ts",
14
- "import": "./dist/main.js"
13
+ "import": "./dist/main-server.js",
14
+ "types": "./dist/main-server.d.ts"
15
15
  },
16
- "./link": {
17
- "types": "./dist/atoms/Link/Link.d.ts",
18
- "import": "./dist/atoms/Link/Link.js"
16
+ "./client": {
17
+ "import": "./dist/main-client.js",
18
+ "types": "./dist/main-client.d.ts"
19
19
  },
20
20
  "./atoms/*": {
21
- "types": "./dist/atoms/*.d.ts",
22
- "import": "./dist/atoms/*.js"
21
+ "import": "./dist/atoms/*.js",
22
+ "types": "./dist/atoms/*.d.ts"
23
23
  },
24
24
  "./molecules/*": {
25
- "types": "./dist/molecules/*.d.ts",
26
- "import": "./dist/molecules/*.js"
25
+ "import": "./dist/molecules/*.js",
26
+ "types": "./dist/molecules/*.d.ts"
27
27
  },
28
28
  "./organisms/*": {
29
- "types": "./dist/organisms/*.d.ts",
30
- "import": "./dist/organisms/*.js"
29
+ "import": "./dist/organisms/*.js",
30
+ "types": "./dist/organisms/*.d.ts"
31
31
  },
32
32
  "./styles/*": {
33
33
  "default": "./dist/styles/*"