@ttoss/components 2.6.0 → 2.6.2

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.
Files changed (4) hide show
  1. package/README.md +22 -0
  2. package/dist/NavList/index.d.ts +8 -7
  3. package/dist/esm/NavList/index.js +32 -21
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -224,6 +224,28 @@ import NextLink from 'next/link';
224
224
  LinkComponent={NextLink}
225
225
  onItemClick={(item) => console.log('Clicked:', item)}
226
226
  />
227
+
228
+ // Custom Link Component
229
+ // IMPORTANT: Always spread {...props} to preserve styling
230
+ // React Router example (uses 'to' instead of 'href')
231
+ import { Link as RouterLink } from 'react-router-dom';
232
+
233
+ const ReactRouterLink = ({
234
+ href,
235
+ children,
236
+ ...props
237
+ }: React.PropsWithChildren<LinkComponentProps>) => {
238
+ return (
239
+ <RouterLink
240
+ to={href}
241
+ {...props} // Required to preserve NavList styles
242
+ >
243
+ {children}
244
+ </RouterLink>
245
+ );
246
+ };
247
+
248
+ <NavList items={items} LinkComponent={ReactRouterLink} />
227
249
  ```
228
250
 
229
251
  **Variants:**
package/dist/NavList/index.d.ts CHANGED
@@ -18,6 +18,12 @@ type NavListGroup = {
18
18
  items: NavListItem[];
19
19
  divider?: boolean;
20
20
  };
21
+ type LinkComponentProps = {
22
+ href: string;
23
+ onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
24
+ children: React.ReactNode;
25
+ [key: string]: unknown;
26
+ };
21
27
  type NavListProps = {
22
28
  items?: NavListItem[];
23
29
  groups?: NavListGroup[];
@@ -39,16 +45,11 @@ type NavListProps = {
39
45
  * import { Link as RouterLink } from 'react-router-dom';
40
46
  * <NavList LinkComponent={RouterLink} ... />
41
47
  */
42
- LinkComponent?: React.ComponentType<{
43
- href: string;
44
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
45
- children: React.ReactNode;
46
- [key: string]: unknown;
47
- }>;
48
+ LinkComponent?: React.ComponentType<LinkComponentProps>;
48
49
  };
49
50
  declare const NavList: {
50
51
  ({ items, groups, variant, onItemClick, sx, iconSize, LinkComponent, }: NavListProps): react_jsx_runtime.JSX.Element;
51
52
  displayName: string;
52
53
  };
53
54
 
54
- export { NavList, type NavListGroup, type NavListItem, type NavListProps };
55
+ export { type LinkComponentProps, NavList, type NavListGroup, type NavListItem, type NavListProps };
package/dist/esm/NavList/index.js CHANGED
@@ -11,24 +11,25 @@ var getVariantStyles = /* @__PURE__ */__name(variant => {
11
11
  return {
12
12
  container: {
13
13
  flexDirection: "column",
14
- gap: "6",
14
+ gap: "1",
15
15
  width: "full"
16
16
  },
17
17
  item: {
18
- padding: "4",
18
+ backgroundColor: "transparent",
19
+ padding: "3",
19
20
  borderRadius: "none",
20
21
  fontSize: "md",
21
22
  transition: "background-color 0.15s ease",
22
23
  "&:hover": {
23
- backgroundColor: "navigation.background.muted.default",
24
+ backgroundColor: "navigation.background.muted.hover",
24
25
  textDecoration: "none"
25
26
  }
26
27
  },
27
28
  activeItem: {
28
- backgroundColor: "navigation.background.primary.default",
29
+ backgroundColor: "navigation.background.muted.default",
29
30
  borderLeft: "4px solid",
30
31
  borderColor: "navigation.border.primary.default",
31
- paddingLeft: "calc(1rem - 4px)"
32
+ paddingLeft: "calc(0.75rem - 4px)"
32
33
  },
33
34
  icon: {
34
35
  size: 20
@@ -46,17 +47,17 @@ var getVariantStyles = /* @__PURE__ */__name(variant => {
46
47
  return {
47
48
  container: {
48
49
  flexDirection: "column",
49
- gap: "3",
50
+ gap: "1",
50
51
  width: "full"
51
52
  },
52
53
  item: {
53
- backgroundColor: "display.background.secondary.default",
54
+ backgroundColor: "transparent",
54
55
  borderRadius: "md",
55
- padding: "3",
56
+ padding: "2",
56
57
  fontSize: "md",
57
58
  transition: "all 0.2s ease",
58
59
  "&:hover": {
59
- backgroundColor: "navigation.background.muted.default",
60
+ backgroundColor: "navigation.background.muted.hover",
60
61
  transform: "translateX(4px)",
61
62
  textDecoration: "none"
62
63
  }
@@ -84,18 +85,19 @@ var getVariantStyles = /* @__PURE__ */__name(variant => {
84
85
  width: "full"
85
86
  },
86
87
  item: {
88
+ backgroundColor: "transparent",
87
89
  padding: "2",
88
90
  fontSize: "sm",
89
91
  borderBottom: "sm",
90
92
  borderColor: "display.border.muted.default",
91
93
  transition: "background-color 0.1s ease",
92
94
  "&:hover": {
93
- backgroundColor: "display.background.secondary.default",
95
+ backgroundColor: "navigation.background.muted.hover",
94
96
  textDecoration: "none"
95
97
  }
96
98
  },
97
99
  activeItem: {
98
- backgroundColor: "display.background.secondary.default",
100
+ backgroundColor: "navigation.background.muted.default",
99
101
  fontWeight: "semibold"
100
102
  },
101
103
  icon: {
@@ -139,15 +141,8 @@ var NavListItemComponent = /* @__PURE__ */__name(({
139
141
  pointerEvents: "none"
140
142
  } : {})
141
143
  };
142
- const linkProps = {
143
- href: item.href,
144
- onClick: handleClick,
145
- sx: itemStyles,
146
- "aria-disabled": item.disabled,
147
- "aria-current": item.active ? "page" : void 0,
148
- quiet: true
149
- };
150
- return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(LinkComponent, linkProps, /* @__PURE__ */React.createElement(Flex, {
144
+ const isDefaultLink = LinkComponent === Link;
145
+ const linkContent = /* @__PURE__ */React.createElement(Flex, {
151
146
  sx: {
152
147
  alignItems: "center",
153
148
  gap: "2",
@@ -157,7 +152,23 @@ var NavListItemComponent = /* @__PURE__ */__name(({
157
152
  icon: item.icon,
158
153
  width: iconSize ?? variantStyles.icon.size,
159
154
  height: iconSize ?? variantStyles.icon.size
160
- }), /* @__PURE__ */React.createElement(Text, null, item.label))), showDivider && /* @__PURE__ */React.createElement(Divider, {
155
+ }), /* @__PURE__ */React.createElement(Text, null, item.label));
156
+ return /* @__PURE__ */React.createElement(React.Fragment, null, isDefaultLink ? /* @__PURE__ */React.createElement(LinkComponent, {
157
+ href: item.href,
158
+ onClick: handleClick,
159
+ sx: itemStyles,
160
+ "aria-disabled": item.disabled,
161
+ "aria-current": item.active ? "page" : void 0,
162
+ quiet: true
163
+ }, linkContent) : /* @__PURE__ */React.createElement(Link, {
164
+ as: LinkComponent,
165
+ href: item.href,
166
+ onClick: handleClick,
167
+ sx: itemStyles,
168
+ "aria-disabled": item.disabled,
169
+ "aria-current": item.active ? "page" : void 0,
170
+ quiet: true
171
+ }, linkContent), showDivider && /* @__PURE__ */React.createElement(Divider, {
161
172
  sx: {
162
173
  marginY: "2"
163
174
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "2.6.0",
3
+ "version": "2.6.2",
4
4
  "description": "React components for ttoss ecosystem.",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -118,11 +118,11 @@
118
118
  "tsx": "^4.19.2",
119
119
  "@ttoss/config": "^1.35.9",
120
120
  "@ttoss/react-hooks": "^2.1.5",
121
- "@ttoss/i18n-cli": "^0.7.35",
122
121
  "@ttoss/react-i18n": "^2.0.19",
123
122
  "@ttoss/react-icons": "^0.5.0",
124
- "@ttoss/ui": "^5.10.4",
125
- "@ttoss/test-utils": "^3.0.1"
123
+ "@ttoss/i18n-cli": "^0.7.35",
124
+ "@ttoss/test-utils": "^3.0.1",
125
+ "@ttoss/ui": "^5.10.4"
126
126
  },
127
127
  "keywords": [
128
128
  "React",