@kazee-ds/react 0.10.3 → 0.11.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 +3 -3
- package/dist/index.js +7 -2
- package/dist/index.js.map +1 -1
- package/dist/types/Tabs.d.ts +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @kazee-ds/react
|
|
2
2
|
|
|
3
|
-
Prepared **0.
|
|
3
|
+
Prepared **0.11.0** adds the `enclosed` Tabs variant (folder tabs) and keeps a nested Tabs independent of its ancestor's variant. Use React **0.11.0** or Vue **0.11.0** with styles **0.12.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
|
|
4
4
|
|
|
5
|
-
The prepared styles **0.
|
|
5
|
+
The prepared styles **0.12.0** bundle tokens **0.8.0**, which add the `cool-gray-300` palette color (`#B0B3C4`), and style the `enclosed` Tabs variant. Tabs root modifiers are scoped with CSS `@scope`, so nested Tabs keep their own variant (Chrome/Edge 118, Safari 17.4, Firefox 146). Published styles **0.11.0** / tokens **0.7.0** added the AA `--ds-color-text-secondary` text role, which remains unchanged.
|
|
6
6
|
Accessible Kazee React components, including Toast, built on React Aria Components. Requires React/React DOM 19+ and ESM.
|
|
7
7
|
|
|
8
8
|
Version **0.10.1** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
|
|
@@ -15,7 +15,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
|
|
|
15
15
|
After the prepared versions are published and verified, public npm installation requires no read token or login. Until then use matching local packed artifacts. Preserve the application's package manager and lockfile.
|
|
16
16
|
|
|
17
17
|
```sh
|
|
18
|
-
npm install --save-exact @kazee-ds/react@0.
|
|
18
|
+
npm install --save-exact @kazee-ds/react@0.11.0 @kazee-ds/styles@0.12.0
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Use
|
package/dist/index.js
CHANGED
|
@@ -2324,6 +2324,11 @@ function mountTabsIndicator(container) {
|
|
|
2324
2324
|
}
|
|
2325
2325
|
//#endregion
|
|
2326
2326
|
//#region src/Tabs.tsx
|
|
2327
|
+
function variantClass(variant, orientation) {
|
|
2328
|
+
if (variant === "default") return "tabs--primary";
|
|
2329
|
+
if (variant === "enclosed" && orientation === "vertical") return "tabs--secondary";
|
|
2330
|
+
return `tabs--${variant}`;
|
|
2331
|
+
}
|
|
2327
2332
|
function CompactTabs({ className, style, classNames, label, variant = "primary", size = "md", indicatorShadow = true, orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
|
|
2328
2333
|
const container = useRef(null);
|
|
2329
2334
|
const hasToolbar = !!(extras || actions);
|
|
@@ -2390,7 +2395,7 @@ function CompactTabs({ className, style, classNames, label, variant = "primary",
|
|
|
2390
2395
|
"tabs",
|
|
2391
2396
|
classNames?.root,
|
|
2392
2397
|
className,
|
|
2393
|
-
|
|
2398
|
+
variantClass(variant, orientation),
|
|
2394
2399
|
`tabs--align-${align}`,
|
|
2395
2400
|
fullWidth && "tabs--full-width",
|
|
2396
2401
|
inset === "none" && "tabs--flush",
|
|
@@ -2442,7 +2447,7 @@ function TabsRoot({ className, classNames, value, defaultValue, onChange, varian
|
|
|
2442
2447
|
onSelectionChange: onChange ? (key) => onChange(String(key)) : void 0,
|
|
2443
2448
|
className: [
|
|
2444
2449
|
"tabs",
|
|
2445
|
-
|
|
2450
|
+
variantClass(variant, props.orientation),
|
|
2446
2451
|
`tabs--align-${align}`,
|
|
2447
2452
|
size !== "md" && `tabs--${size}`,
|
|
2448
2453
|
fullWidth && "tabs--full-width",
|