@ttoss/components 2.6.1 → 2.7.0
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.
- package/README.md +22 -0
- package/dist/NavList/index.d.ts +1 -1
- package/dist/esm/Tabs/index.js +6 -3
- package/package.json +5 -5
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
package/dist/esm/Tabs/index.js
CHANGED
|
@@ -24,7 +24,8 @@ var Tabs = /* @__PURE__ */__name(props => {
|
|
|
24
24
|
},
|
|
25
25
|
".react-tabs__tab-list": {
|
|
26
26
|
borderBottom: "md",
|
|
27
|
-
borderColor: themeColors?.input?.border?.muted?.default
|
|
27
|
+
borderColor: themeColors?.input?.border?.muted?.default,
|
|
28
|
+
paddingLeft: 0
|
|
28
29
|
},
|
|
29
30
|
".react-tabs__tab--selected": {
|
|
30
31
|
backgroundColor: "transparent",
|
|
@@ -34,7 +35,9 @@ var Tabs = /* @__PURE__ */__name(props => {
|
|
|
34
35
|
},
|
|
35
36
|
".react-tabs__tab": {
|
|
36
37
|
color: themeColors?.input?.text?.secondary?.default,
|
|
37
|
-
display: "inline-
|
|
38
|
+
display: "inline-flex",
|
|
39
|
+
alignItems: "center",
|
|
40
|
+
gap: "2",
|
|
38
41
|
padding: "3",
|
|
39
42
|
cursor: "pointer",
|
|
40
43
|
position: "relative",
|
|
@@ -64,7 +67,7 @@ var Tabs = /* @__PURE__ */__name(props => {
|
|
|
64
67
|
};
|
|
65
68
|
}, "sx"),
|
|
66
69
|
...restProps
|
|
67
|
-
}, /* @__PURE__ */React.createElement(ReactTabs,
|
|
70
|
+
}, /* @__PURE__ */React.createElement(ReactTabs, restProps, props.children));
|
|
68
71
|
}, "Tabs");
|
|
69
72
|
Tabs.TabList = TabList;
|
|
70
73
|
Tabs.Tab = Tab;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.7.0",
|
|
4
4
|
"description": "React components for ttoss ecosystem.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -106,8 +106,8 @@
|
|
|
106
106
|
"peerDependencies": {
|
|
107
107
|
"react": ">=16.8.0",
|
|
108
108
|
"@ttoss/react-hooks": "^2.1.5",
|
|
109
|
-
"@ttoss/
|
|
110
|
-
"@ttoss/
|
|
109
|
+
"@ttoss/ui": "^5.10.4",
|
|
110
|
+
"@ttoss/react-i18n": "^2.0.19"
|
|
111
111
|
},
|
|
112
112
|
"devDependencies": {
|
|
113
113
|
"@types/jest": "^30.0.0",
|
|
@@ -116,11 +116,11 @@
|
|
|
116
116
|
"react": "^19.2.0",
|
|
117
117
|
"tsup": "^8.5.0",
|
|
118
118
|
"tsx": "^4.19.2",
|
|
119
|
-
"@ttoss/react-hooks": "^2.1.5",
|
|
120
119
|
"@ttoss/config": "^1.35.9",
|
|
120
|
+
"@ttoss/react-hooks": "^2.1.5",
|
|
121
|
+
"@ttoss/react-i18n": "^2.0.19",
|
|
121
122
|
"@ttoss/i18n-cli": "^0.7.35",
|
|
122
123
|
"@ttoss/react-icons": "^0.5.0",
|
|
123
|
-
"@ttoss/react-i18n": "^2.0.19",
|
|
124
124
|
"@ttoss/test-utils": "^3.0.1",
|
|
125
125
|
"@ttoss/ui": "^5.10.4"
|
|
126
126
|
},
|