@bonprix-ds/react-tab-group 1.0.0 → 1.0.1
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
CHANGED
|
@@ -36,14 +36,14 @@ declare const TabGroup: {
|
|
|
36
36
|
};
|
|
37
37
|
export default TabGroup;
|
|
38
38
|
|
|
39
|
-
declare interface TabGroupContentProps {
|
|
39
|
+
export declare interface TabGroupContentProps {
|
|
40
40
|
/** The unique identifier for the tab content. With its help the tab content can be referenced programmatically. */
|
|
41
41
|
value: string;
|
|
42
42
|
/** The content of the tab content. */
|
|
43
43
|
children: ReactNode;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
declare interface TabGroupItemProps {
|
|
46
|
+
export declare interface TabGroupItemProps {
|
|
47
47
|
/** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */
|
|
48
48
|
value: string;
|
|
49
49
|
/** The label of the tab item. */
|
|
@@ -54,7 +54,7 @@ declare interface TabGroupItemProps {
|
|
|
54
54
|
icon?: ReactNode;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
declare interface TabGroupListProps {
|
|
57
|
+
export declare interface TabGroupListProps {
|
|
58
58
|
/** Here, the TabGroup.Item subcomponents should be placed. */
|
|
59
59
|
children: ReactNode;
|
|
60
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabGroupItem.js","names":[],"sources":["../../../src/TabGroupItem/TabGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n tabStyleContainerBase,\n tabStyleContainerVariant,\n tabStyleLabelClass,\n tabStyleLabelContainerBase,\n tabStyleLabelContainerVariant,\n} from \"@bonprix-ds/internal-components\";\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\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-
|
|
1
|
+
{"version":3,"file":"TabGroupItem.js","names":[],"sources":["../../../src/TabGroupItem/TabGroupItem.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n tabStyleContainerBase,\n tabStyleContainerVariant,\n tabStyleLabelClass,\n tabStyleLabelContainerBase,\n tabStyleLabelContainerVariant,\n} from \"@bonprix-ds/internal-components\";\nimport React, { ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\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":";;;;;;;;AAeA,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-tab-group",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "TabGroup component, implemented in React, for the Bonprix Design System.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@radix-ui/react-tabs": "1.1.21",
|
|
33
|
-
"@bonprix-ds/internal-components": "0.
|
|
33
|
+
"@bonprix-ds/internal-components": "0.2.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^19.0.0",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"@types/react": "19.2.18",
|
|
43
43
|
"@vitejs/plugin-react": "6.1.1",
|
|
44
44
|
"rollup-preserve-directives": "1.1.3",
|
|
45
|
-
"unplugin-dts": "1.0
|
|
46
|
-
"@microsoft/api-extractor": "7.59.
|
|
45
|
+
"unplugin-dts": "1.1.0",
|
|
46
|
+
"@microsoft/api-extractor": "7.59.1"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "vite build"
|