@bonprix-ds/react-tab-group 1.0.0 → 1.0.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.
- package/dist/index.d.ts +5 -71
- package/dist/src/TabGroup.d.ts +20 -0
- package/dist/src/TabGroupContent/TabGroupContent.d.ts +12 -0
- package/dist/src/TabGroupContent/TabGroupContent.js.map +1 -1
- package/dist/src/TabGroupContent/index.d.ts +2 -0
- package/dist/src/TabGroupContext.d.ts +7 -0
- package/dist/src/TabGroupItem/TabGroupItem.d.ts +16 -0
- package/dist/src/TabGroupItem/TabGroupItem.js +8 -9
- package/dist/src/TabGroupItem/TabGroupItem.js.map +1 -1
- package/dist/src/TabGroupList/TabGroupList.d.ts +10 -0
- package/dist/src/TabGroupList/TabGroupList.js +4 -4
- package/dist/src/TabGroupList/TabGroupList.js.map +1 -1
- package/dist/src/TabGroupRoot.d.ts +27 -0
- package/dist/src/TabGroupRoot.js.map +1 -1
- package/dist/src/useTabGroup.d.ts +2 -0
- package/package.json +28 -27
package/dist/index.d.ts
CHANGED
|
@@ -1,71 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
/** The currently active tab. Should be used in conjunction with the `onChange` prop. */
|
|
8
|
-
activeTab: string;
|
|
9
|
-
/** Callback function that is called when the active tab changes. */
|
|
10
|
-
onChange: (value: string) => void;
|
|
11
|
-
/** Sets "the variant. */
|
|
12
|
-
variant?: TabGroupVariant;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
declare interface TabBoxProps extends BaseProps {
|
|
16
|
-
variant?: "tab-box";
|
|
17
|
-
/** If true, the tab items will occupy the available width. */
|
|
18
|
-
fullWidth?: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
declare const TabGroup: {
|
|
22
|
-
(props: TabGroupProps): default_2.JSX.Element;
|
|
23
|
-
displayName: string;
|
|
24
|
-
Item: {
|
|
25
|
-
({ label, subLabel, icon, value }: TabGroupItemProps): default_2.JSX.Element;
|
|
26
|
-
displayName: string;
|
|
27
|
-
};
|
|
28
|
-
Content: {
|
|
29
|
-
({ children, value }: TabGroupContentProps): default_2.JSX.Element;
|
|
30
|
-
displayName: string;
|
|
31
|
-
};
|
|
32
|
-
List: {
|
|
33
|
-
({ children }: TabGroupListProps): default_2.JSX.Element;
|
|
34
|
-
displayName: string;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
export default TabGroup;
|
|
38
|
-
|
|
39
|
-
declare interface TabGroupContentProps {
|
|
40
|
-
/** The unique identifier for the tab content. With its help the tab content can be referenced programmatically. */
|
|
41
|
-
value: string;
|
|
42
|
-
/** The content of the tab content. */
|
|
43
|
-
children: ReactNode;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
declare interface TabGroupItemProps {
|
|
47
|
-
/** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */
|
|
48
|
-
value: string;
|
|
49
|
-
/** The label of the tab item. */
|
|
50
|
-
label: string;
|
|
51
|
-
/** The sublabel of the tab item. */
|
|
52
|
-
subLabel?: string;
|
|
53
|
-
/** The icon of the tab item. */
|
|
54
|
-
icon?: ReactNode;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
declare interface TabGroupListProps {
|
|
58
|
-
/** Here, the TabGroup.Item subcomponents should be placed. */
|
|
59
|
-
children: ReactNode;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export declare type TabGroupProps = TabBoxProps | TabProps;
|
|
63
|
-
|
|
64
|
-
declare type TabGroupVariant = "tab" | "tab-box";
|
|
65
|
-
|
|
66
|
-
declare interface TabProps extends BaseProps {
|
|
67
|
-
variant?: "tab";
|
|
68
|
-
fullWidth?: never;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export { }
|
|
1
|
+
export { default } from "./src/TabGroup";
|
|
2
|
+
export type { TabGroupProps } from "./src/TabGroup";
|
|
3
|
+
export type { TabGroupContentProps } from "./src/TabGroupContent/TabGroupContent";
|
|
4
|
+
export type { TabGroupItemProps } from "./src/TabGroupItem/TabGroupItem";
|
|
5
|
+
export type { TabGroupListProps } from "./src/TabGroupList/TabGroupList";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type TabGroupProps } from "./TabGroupRoot";
|
|
3
|
+
export type { TabGroupProps, TabGroupVariant } from "./TabGroupRoot";
|
|
4
|
+
declare const TabGroup: {
|
|
5
|
+
(props: TabGroupProps): React.JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
Item: {
|
|
8
|
+
({ label, subLabel, icon, value }: import("..").TabGroupItemProps): React.JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
11
|
+
Content: {
|
|
12
|
+
({ children, value }: import("..").TabGroupContentProps): React.JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
List: {
|
|
16
|
+
({ children }: import("..").TabGroupListProps): React.JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export default TabGroup;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface TabGroupContentProps {
|
|
3
|
+
/** The unique identifier for the tab content. With its help the tab content can be referenced programmatically. */
|
|
4
|
+
value: string;
|
|
5
|
+
/** The content of the tab content. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const TabGroupContent: {
|
|
9
|
+
({ children, value }: TabGroupContentProps): React.JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
12
|
+
export default TabGroupContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupContent.js","names":[],"sources":["../../../src/TabGroupContent/TabGroupContent.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"TabGroupContent.js","names":[],"sources":["../../../src/TabGroupContent/TabGroupContent.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, { ReactNode } from \"react\";\n\nexport interface TabGroupContentProps {\n /** The unique identifier for the tab content. With its help the tab content can be referenced programmatically. */\n value: string;\n /** The content of the tab content. */\n children: ReactNode;\n}\n\nconst TabGroupContent = ({ children, value }: TabGroupContentProps) => {\n return <TabsPrimitive.Content value={value}>{children}</TabsPrimitive.Content>;\n};\n\nTabGroupContent.displayName = \"TabGroup.Content\";\n\nexport default TabGroupContent;\n"],"mappings":";;;;;AAYA,IAAM,KAAmB,EAAE,aAAU,eAC5B,kBAAC,EAAc,SAAf;CAA8B;CAAQ;AAAgC,CAAA;AAG/E,EAAgB,cAAc"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface TabGroupItemProps {
|
|
3
|
+
/** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */
|
|
4
|
+
value: string;
|
|
5
|
+
/** The label of the tab item. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** The sublabel of the tab item. */
|
|
8
|
+
subLabel?: string;
|
|
9
|
+
/** The icon of the tab item. */
|
|
10
|
+
icon?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
declare const TabGroupItem: {
|
|
13
|
+
({ label, subLabel, icon, value }: TabGroupItemProps): React.JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
export default TabGroupItem;
|
|
@@ -3,28 +3,28 @@ import e from "../useTabGroup.js";
|
|
|
3
3
|
import "react";
|
|
4
4
|
import * as t from "@radix-ui/react-tabs";
|
|
5
5
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { tv as i } from "tailwind-variants";
|
|
7
|
+
import { tabStyleContainerBase as a, tabStyleContainerVariant as o, tabStyleLabelClass as s, tabStyleLabelContainerBase as c, tabStyleLabelContainerVariant as l } from "@bonprix-ds/internal-components";
|
|
8
8
|
//#region src/TabGroupItem/TabGroupItem.tsx
|
|
9
|
-
var u =
|
|
9
|
+
var u = i({
|
|
10
10
|
slots: {
|
|
11
11
|
container: [
|
|
12
12
|
"preflight",
|
|
13
|
-
|
|
13
|
+
a,
|
|
14
14
|
"hover:after:border-b-2 hover:after:border-current",
|
|
15
15
|
"data-[state=active]:after:border-b-4 data-[state=active]:after:h-1 data-[state=active]:after:border-current",
|
|
16
16
|
"text-inherit"
|
|
17
17
|
],
|
|
18
18
|
iconContainer: "flex max-w-10 h-7",
|
|
19
|
-
labelContainer:
|
|
20
|
-
labelClass:
|
|
19
|
+
labelContainer: c,
|
|
20
|
+
labelClass: s,
|
|
21
21
|
dummyBoldLabelClass: "h-0 font-bold invisible",
|
|
22
22
|
sublabelClass: "line-clamp-1"
|
|
23
23
|
},
|
|
24
24
|
variants: { variant: {
|
|
25
25
|
tab: {
|
|
26
|
-
container:
|
|
27
|
-
labelContainer:
|
|
26
|
+
container: o,
|
|
27
|
+
labelContainer: l
|
|
28
28
|
},
|
|
29
29
|
"tab-box": {
|
|
30
30
|
container: ["px-1 py-4 items-center focus-visible:outline outline-2 outline-offset-2 outline-current", "border-current border after:absolute data-[state=active]:after:rounded-b-sm after:rounded-b-sm flex-auto"],
|
|
@@ -37,7 +37,6 @@ var u = l({
|
|
|
37
37
|
return /* @__PURE__ */ r(t.Trigger, {
|
|
38
38
|
className: l(),
|
|
39
39
|
value: s,
|
|
40
|
-
"data-bpds-icon": o,
|
|
41
40
|
"data-bpds-has-sublabel": !!a,
|
|
42
41
|
children: [o && /* @__PURE__ */ n("div", {
|
|
43
42
|
className: d(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupItem.js","names":[],"sources":["../../../src/TabGroupItem/TabGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"TabGroupItem.js","names":[],"sources":["../../../src/TabGroupItem/TabGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport {\n tabStyleContainerBase,\n tabStyleContainerVariant,\n tabStyleLabelClass,\n tabStyleLabelContainerBase,\n tabStyleLabelContainerVariant,\n} from \"@bonprix-ds/internal-components\";\n\nimport useTabGroup from \"../useTabGroup\";\n\nconst generateClasses = tv({\n slots: {\n container: [\n \"preflight\",\n tabStyleContainerBase,\n \"hover:after:border-b-2 hover:after:border-current\",\n \"data-[state=active]:after:border-b-4 data-[state=active]:after:h-1 data-[state=active]:after:border-current\",\n // in order to use 'current' as color values, we need to inherit the color (primary) from TabGroupList,\n // because <button> is given a User Agent propietary color (black, not our primary)\n \"text-inherit\",\n ],\n iconContainer: \"flex max-w-10 h-7\",\n labelContainer: tabStyleLabelContainerBase,\n labelClass: tabStyleLabelClass,\n dummyBoldLabelClass: \"h-0 font-bold invisible\",\n sublabelClass: \"line-clamp-1\",\n },\n variants: {\n variant: {\n tab: {\n container: tabStyleContainerVariant,\n labelContainer: tabStyleLabelContainerVariant,\n },\n \"tab-box\": {\n container: [\n \"px-1 py-4 items-center focus-visible:outline outline-2 outline-offset-2 outline-current\",\n \"border-current border after:absolute data-[state=active]:after:rounded-b-sm after:rounded-b-sm flex-auto\",\n ],\n labelContainer: \"items-center [overflow-wrap:anywhere] text-center hyphens-auto\",\n labelClass: \"group-data-[state=active]:font-bold\",\n },\n },\n },\n});\n\nexport interface TabGroupItemProps {\n /** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */\n value: string;\n /** The label of the tab item. */\n label: string;\n /** The sublabel of the tab item. */\n subLabel?: string;\n /** The icon of the tab item. */\n icon?: ReactNode;\n}\n\nconst TabGroupItem = ({ label, subLabel, icon, value }: TabGroupItemProps) => {\n const { variant } = useTabGroup();\n const { container, iconContainer, labelContainer, labelClass, dummyBoldLabelClass, sublabelClass } = generateClasses({\n variant,\n });\n return (\n <Tabs.Trigger className={container()} value={value} data-bpds-has-sublabel={!!subLabel}>\n {icon && <div className={iconContainer()}>{icon}</div>}\n <div className={labelContainer()}>\n <p className={labelClass()}>{label}</p>\n {/* When label gets bold in active state, its box takes up more space and causes a layout shift (button gets bigger).\n By adding the 'physical copy of the label text in bold, but invisible, the space is already created and therefore layout is consistent*/}\n {variant === \"tab-box\" && (\n <p className={dummyBoldLabelClass()} aria-hidden=\"true\">\n {label}\n </p>\n )}\n\n {subLabel && <p className={sublabelClass()}>{subLabel}</p>}\n </div>\n </Tabs.Trigger>\n );\n};\n\nTabGroupItem.displayName = \"TabGroup.Item\";\n\nexport default TabGroupItem;\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,WAAW;GACT;GACA;GACA;GACA;GAGA;EACF;EACA,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,qBAAqB;EACrB,eAAe;CACjB;CACA,UAAU,EACR,SAAS;EACP,KAAK;GACH,WAAW;GACX,gBAAgB;EAClB;EACA,WAAW;GACT,WAAW,CACT,2FACA,0GACF;GACA,gBAAgB;GAChB,YAAY;EACd;CACF,EACF;AACF,CAAC,GAaK,KAAgB,EAAE,UAAO,aAAU,SAAM,eAA+B;CAC5E,IAAM,EAAE,eAAY,EAAY,GAC1B,EAAE,cAAW,kBAAe,mBAAgB,eAAY,wBAAqB,qBAAkB,EAAgB,EACnH,WACF,CAAC;CACD,OACE,kBAAC,EAAK,SAAN;EAAc,WAAW,EAAU;EAAU;EAAO,0BAAwB,CAAC,CAAC;EAA9E,UAAA,CACG,KAAQ,kBAAC,OAAD;GAAK,WAAW,EAAc;GAAI,UAAA;EAAU,CAAA,GACrD,kBAAC,OAAD;GAAK,WAAW,EAAe;GAA/B,UAAA;IACE,kBAAC,KAAD;KAAG,WAAW,EAAW;KAAI,UAAA;IAAS,CAAA;IAGrC,MAAY,aACX,kBAAC,KAAD;KAAG,WAAW,EAAoB;KAAG,eAAY;KAC9C,UAAA;IACA,CAAA;IAGJ,KAAY,kBAAC,KAAD;KAAG,WAAW,EAAc;KAAI,UAAA;IAAY,CAAA;GACtD;EACO,CAAA,CAAA;;AAElB;AAEA,EAAa,cAAc"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface TabGroupListProps {
|
|
3
|
+
/** Here, the TabGroup.Item subcomponents should be placed. */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const TabGroupList: {
|
|
7
|
+
({ children }: TabGroupListProps): React.JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
export default TabGroupList;
|
|
@@ -3,13 +3,13 @@ import e from "../useTabGroup.js";
|
|
|
3
3
|
import "react";
|
|
4
4
|
import * as t from "@radix-ui/react-tabs";
|
|
5
5
|
import { jsx as n } from "react/jsx-runtime";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { tv as r } from "tailwind-variants";
|
|
7
|
+
import { tabStyleList as i } from "@bonprix-ds/internal-components";
|
|
8
8
|
//#region src/TabGroupList/TabGroupList.tsx
|
|
9
|
-
var a = (e, t = !1) => e === "tab-box" ? `repeat(${t ? "auto-fit" : "auto-fill"}, minmax(4.6875rem, 1fr))` : "", o =
|
|
9
|
+
var a = (e, t = !1) => e === "tab-box" ? `repeat(${t ? "auto-fit" : "auto-fill"}, minmax(4.6875rem, 1fr))` : "", o = r({
|
|
10
10
|
base: ["[&:has(button_svg)_button:not(:has(svg))_p:first-child]:mt-7"],
|
|
11
11
|
variants: { variant: {
|
|
12
|
-
tab:
|
|
12
|
+
tab: i,
|
|
13
13
|
"tab-box": "text-clr-primary grid gap-x-3 gap-y-2 scrollbar-none"
|
|
14
14
|
} }
|
|
15
15
|
}), s = ({ children: r }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupList.js","names":[],"sources":["../../../src/TabGroupList/TabGroupList.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"TabGroupList.js","names":[],"sources":["../../../src/TabGroupList/TabGroupList.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { tabStyleList } from \"@bonprix-ds/internal-components\";\n\nimport { TabGroupVariant } from \"../TabGroup\";\nimport useTabGroup from \"../useTabGroup\";\n\nconst getGridTemplateColumnsStyle = (variant: TabGroupVariant, fullWidth = false) => {\n const BOX_ITEM_MIN_WIDTH = \"4.6875rem\";\n if (variant !== \"tab-box\") return \"\";\n const repeatCount = fullWidth ? \"auto-fit\" : \"auto-fill\";\n const style = `repeat(${repeatCount}, minmax(${BOX_ITEM_MIN_WIDTH}, 1fr))`;\n return style;\n};\n\nconst generateClasses = tv({\n base: [\n // Following rule allows to align 'label' in a button with no SVG only if other buttons contain an SVG (logo or icon), according to design\n \"[&:has(button_svg)_button:not(:has(svg))_p:first-child]:mt-7\",\n ],\n variants: {\n variant: {\n tab: tabStyleList,\n \"tab-box\": \"text-clr-primary grid gap-x-3 gap-y-2 scrollbar-none\",\n },\n },\n});\n\nexport interface TabGroupListProps {\n /** Here, the TabGroup.Item subcomponents should be placed. */\n children: ReactNode;\n}\n\nconst TabGroupList = ({ children }: TabGroupListProps) => {\n const { variant, fullWidth } = useTabGroup();\n return (\n <TabsPrimitive.List\n className={generateClasses({ variant })}\n style={{ gridTemplateColumns: getGridTemplateColumnsStyle(variant, fullWidth) }}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nTabGroupList.displayName = \"TabGroup.List\";\n\nexport default TabGroupList;\n"],"mappings":";;;;;;;;AAWA,IAAM,KAA+B,GAA0B,IAAY,OAErE,MAAY,YAGT,UAFa,IAAY,aAAa,YACT,6BAFF,IAM9B,IAAkB,EAAG;CACzB,MAAM,CAEJ,8DACF;CACA,UAAU,EACR,SAAS;EACP,KAAK;EACL,WAAW;CACb,EACF;AACF,CAAC,GAOK,KAAgB,EAAE,kBAAkC;CACxD,IAAM,EAAE,YAAS,iBAAc,EAAY;CAC3C,OACE,kBAAC,EAAc,MAAf;EACE,WAAW,EAAgB,EAAE,WAAQ,CAAC;EACtC,OAAO,EAAE,qBAAqB,EAA4B,GAAS,CAAS,EAAE;EAE7E;CACiB,CAAA;AAExB;AAEA,EAAa,cAAc"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export type TabGroupVariant = "tab" | "tab-box";
|
|
3
|
+
interface BaseProps {
|
|
4
|
+
/** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** The currently active tab. Should be used in conjunction with the `onChange` prop. */
|
|
7
|
+
activeTab: string;
|
|
8
|
+
/** Callback function that is called when the active tab changes. */
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
/** Sets "the variant. */
|
|
11
|
+
variant?: TabGroupVariant;
|
|
12
|
+
}
|
|
13
|
+
interface TabBoxProps extends BaseProps {
|
|
14
|
+
variant?: "tab-box";
|
|
15
|
+
/** If true, the tab items will occupy the available width. */
|
|
16
|
+
fullWidth?: boolean;
|
|
17
|
+
}
|
|
18
|
+
interface TabProps extends BaseProps {
|
|
19
|
+
variant?: "tab";
|
|
20
|
+
fullWidth?: never;
|
|
21
|
+
}
|
|
22
|
+
export type TabGroupProps = TabBoxProps | TabProps;
|
|
23
|
+
declare const TabGroupRoot: {
|
|
24
|
+
({ children, activeTab, onChange, variant, fullWidth }: TabGroupProps): React.JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
27
|
+
export default TabGroupRoot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupRoot.js","names":[],"sources":["../../src/TabGroupRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"TabGroupRoot.js","names":[],"sources":["../../src/TabGroupRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, { ReactNode } from \"react\";\n\nimport TabGroupContext from \"./TabGroupContext\";\n\nexport type TabGroupVariant = \"tab\" | \"tab-box\";\n\ninterface BaseProps {\n /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */\n children: ReactNode;\n /** The currently active tab. Should be used in conjunction with the `onChange` prop. */\n activeTab: string;\n /** Callback function that is called when the active tab changes. */\n onChange: (value: string) => void;\n /** Sets \"the variant. */\n variant?: TabGroupVariant;\n}\n\ninterface TabBoxProps extends BaseProps {\n variant?: \"tab-box\";\n /** If true, the tab items will occupy the available width. */\n fullWidth?: boolean;\n}\n\ninterface TabProps extends BaseProps {\n variant?: \"tab\";\n fullWidth?: never;\n}\n\nexport type TabGroupProps = TabBoxProps | TabProps;\n\nconst TabGroupRoot = ({ children, activeTab, onChange, variant = \"tab\", fullWidth }: TabGroupProps) => {\n return (\n <TabsPrimitive.Root\n className=\"preflight\"\n value={activeTab}\n onValueChange={onChange}\n data-bpds=\"tab-group\"\n data-bpds-active-tab={activeTab}\n data-bpds-variant={variant}\n data-bpds-full-width={fullWidth}\n >\n <TabGroupContext value={{ fullWidth, variant }}>{children}</TabGroupContext>\n </TabsPrimitive.Root>\n );\n};\n\nTabGroupRoot.displayName = \"TabGroup\";\n\nexport default TabGroupRoot;\n"],"mappings":";;;;;;AAiCA,IAAM,KAAgB,EAAE,aAAU,cAAW,aAAU,aAAU,OAAO,mBAEpE,kBAAC,EAAc,MAAf;CACE,WAAU;CACV,OAAO;CACP,eAAe;CACf,aAAU;CACV,wBAAsB;CACtB,qBAAmB;CACnB,wBAAsB;CAEtB,UAAA,kBAAC,GAAD;EAAiB,OAAO;GAAE;GAAW;EAAQ;EAAI;CAA0B,CAAA;AACzD,CAAA;AAIxB,EAAa,cAAc"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-tab-group",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "TabGroup component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react/tab-group"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": false,
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
12
23
|
"exports": {
|
|
13
24
|
".": {
|
|
14
25
|
"import": "./dist/index.js",
|
|
@@ -16,34 +27,24 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [],
|
|
24
|
-
"author": "",
|
|
25
|
-
"license": "UNLICENSED",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
29
|
-
"directory": "packages/react/tab-group"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
35
|
"@radix-ui/react-tabs": "1.1.21",
|
|
33
|
-
"@bonprix-ds/internal-components": "0.1
|
|
34
|
-
},
|
|
35
|
-
"peerDependencies": {
|
|
36
|
-
"react": "^19.0.0",
|
|
37
|
-
"react-dom": "^19.0.0",
|
|
38
|
-
"tailwind-variants": "0.3.1"
|
|
36
|
+
"@bonprix-ds/internal-components": "0.2.1"
|
|
39
37
|
},
|
|
40
38
|
"devDependencies": {
|
|
41
|
-
"
|
|
42
|
-
"@types/react": "19.2.18",
|
|
39
|
+
"@types/react": "19.3.0",
|
|
43
40
|
"@vitejs/plugin-react": "6.1.1",
|
|
44
41
|
"rollup-preserve-directives": "1.1.3",
|
|
45
|
-
"
|
|
46
|
-
|
|
42
|
+
"vite": "8.3.0"
|
|
43
|
+
},
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"react": "^19.3.0",
|
|
46
|
+
"react-dom": "^19.3.0",
|
|
47
|
+
"tailwind-variants": "0.3.1"
|
|
47
48
|
},
|
|
48
49
|
"scripts": {
|
|
49
50
|
"build": "vite build"
|