@bonprix-ds/react-tab-group 1.0.2 → 1.1.1

package/dist/src/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","names":[],"sources":["../../src/TabGroup.tsx"],"sourcesContent":["import React from \"react\";\n\nimport TabGroupContent from \"./TabGroupContent\";\nimport TabGroupItem from \"./TabGroupItem/TabGroupItem\";\nimport TabGroupList from \"./TabGroupList/TabGroupList\";\nimport TabGroupRoot, { type TabGroupProps } from \"./TabGroupRoot\";\n\nexport type { TabGroupProps, TabGroupVariant } from \"./TabGroupRoot\";\n\nconst TabGroup = (props: TabGroupProps) => <TabGroupRoot {...props} />;\n\nTabGroup.displayName = \"TabGroup\";\n\nTabGroup.Item = TabGroupItem;\nTabGroup.Content = TabGroupContent;\nTabGroup.List = TabGroupList;\n\nexport default TabGroup;\n"],"mappings":";;;;;;;AASA,IAAM,KAAY,MAAyB,kBAAC,GAAD,EAAc,GAAI,EAAQ,CAAA;AAErE,EAAS,cAAc,YAEvB,EAAS,OAAO,GAChB,EAAS,UAAU,GACnB,EAAS,OAAO"}
+{"version":3,"file":"TabGroup.js","names":["TabGroupContent","TabGroupContent_default","TabGroupItem","TabGroupList","TabGroupRoot","TabGroup","props"],"sources":["../../src/TabGroup.tsx"],"sourcesContent":["import React from \"react\";\n\nimport TabGroupContent from \"./TabGroupContent\";\nimport TabGroupItem from \"./TabGroupItem/TabGroupItem\";\nimport TabGroupList from \"./TabGroupList/TabGroupList\";\nimport TabGroupRoot, { type TabGroupProps } from \"./TabGroupRoot\";\n\nexport type { TabGroupProps, TabGroupVariant } from \"./TabGroupRoot\";\n\nconst TabGroup = (props: TabGroupProps) => <TabGroupRoot {...props} />;\n\nTabGroup.displayName = \"TabGroup\";\n\nTabGroup.Item = TabGroupItem;\nTabGroup.Content = TabGroupContent;\nTabGroup.List = TabGroupList;\n\nexport default TabGroup;\n"],"mappings":";;;;;;;AASA,IAAMK,KAAY,MAAyB,kBAACD,GAAD,EAAc,GAAIE,EAAQ,CAAA;AAErE,EAAS,cAAc,YAEvB,EAAS,OAAOJ,GAChB,EAAS,UAAUF,GACnB,EAAS,OAAOG"}

package/dist/src/TabGroupContent/TabGroupContent.js.map

@@ -1 +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"}
+{"version":3,"file":"TabGroupContent.js","names":["TabsPrimitive","TabGroupContent"],"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,IAAMC,KAAmB,EAAE,aAAU,eAC5B,kBAACD,EAAc,SAAf;CAA8B;CAAQ;AAAgC,CAAA;AAG/E,EAAgB,cAAc"}

package/dist/src/TabGroupContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/TabGroupContent/index.ts"],"sourcesContent":["import TabGroupContent from \"./TabGroupContent\";\n\nexport default TabGroupContent;\n"],"mappings":";;AAEA,IAAA,IAAe"}
+{"version":3,"file":"index.js","names":["TabGroupContent","TabGroupContent_default"],"sources":["../../../src/TabGroupContent/index.ts"],"sourcesContent":["import TabGroupContent from \"./TabGroupContent\";\n\nexport default TabGroupContent;\n"],"mappings":";;AAEA,IAAAC,IAAeD"}

package/dist/src/TabGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroupContext.js","names":[],"sources":["../../src/TabGroupContext.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\n\nimport { TabGroupVariant } from \"./TabGroup\";\n\nexport interface TabGroupContextProps {\n  fullWidth?: boolean;\n  variant: TabGroupVariant;\n}\n\nconst TabGroupContext = createContext<TabGroupContextProps>({\n  fullWidth: false,\n  variant: \"tab\",\n});\n\nexport default TabGroupContext;\n"],"mappings":";;;AAWA,IAAM,IAAkB,EAAoC;CAC1D,WAAW;CACX,SAAS;AACX,CAAC"}
+{"version":3,"file":"TabGroupContext.js","names":["TabGroupContext","createContext"],"sources":["../../src/TabGroupContext.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\n\nimport { TabGroupVariant } from \"./TabGroup\";\n\nexport interface TabGroupContextProps {\n  fullWidth?: boolean;\n  variant: TabGroupVariant;\n}\n\nconst TabGroupContext = createContext<TabGroupContextProps>({\n  fullWidth: false,\n  variant: \"tab\",\n});\n\nexport default TabGroupContext;\n"],"mappings":";;;AAWA,IAAMA,IAAkBC,EAAoC;CAC1D,WAAW;CACX,SAAS;AACX,CAAC"}

package/dist/src/TabGroupItem/TabGroupItem.js

@@ -12,13 +12,13 @@ var u = i({
 			"preflight",
 			a,
 			"hover:after:border-b-2 hover:after:border-current",
-			"data-[state=active]:after:border-b-4 data-[state=active]:after:h-1 data-[state=active]:after:border-current",
+			"data-[state=active]:after:h-1 data-[state=active]:after:border-b-4 data-[state=active]:after:border-current",
 			"text-inherit"
 		],
-		iconContainer: "flex max-w-10 h-7",
+		iconContainer: "flex h-7 max-w-10",
 		labelContainer: c,
 		labelClass: s,
-		dummyBoldLabelClass: "h-0 font-bold invisible",
+		dummyBoldLabelClass: "invisible h-0 font-bold",
 		sublabelClass: "line-clamp-1"
 	},
 	variants: { variant: {
@@ -27,8 +27,8 @@ var u = i({
 			labelContainer: l
 		},
 		"tab-box": {
-			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"],
-			labelContainer: "items-center [overflow-wrap:anywhere] text-center hyphens-auto",
+			container: ["items-center px-1 py-4 outline-2 outline-offset-2 outline-current focus-visible:outline", "flex-auto border border-current after:absolute after:rounded-b-sm data-[state=active]:after:rounded-b-sm"],
+			labelContainer: "items-center hyphens-auto text-center [overflow-wrap:anywhere]",
 			labelClass: "group-data-[state=active]:font-bold"
 		}
 	} }

package/dist/src/TabGroupItem/TabGroupItem.js.map

@@ -1 +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"}
+{"version":3,"file":"TabGroupItem.js","names":["useTabGroup","Tabs","generateClasses","tv","tabStyleContainerBase","tabStyleLabelContainerBase","tabStyleLabelClass","tabStyleContainerVariant","tabStyleLabelContainerVariant","TabGroupItem","container","subLabel","icon","iconContainer","labelContainer","labelClass","label","variant","dummyBoldLabelClass","sublabelClass"],"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:h-1 data-[state=active]:after:border-b-4 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 h-7 max-w-10\",\n    labelContainer: tabStyleLabelContainerBase,\n    labelClass: tabStyleLabelClass,\n    dummyBoldLabelClass: \"invisible h-0 font-bold\",\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          \"items-center px-1 py-4 outline-2 outline-offset-2 outline-current focus-visible:outline\",\n          \"flex-auto border border-current after:absolute after:rounded-b-sm data-[state=active]:after:rounded-b-sm\",\n        ],\n        labelContainer: \"items-center hyphens-auto text-center [overflow-wrap:anywhere]\",\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,IAAME,IAAkBC,EAAG;CACzB,OAAO;EACL,WAAW;GACT;GACAC;GACA;GACA;GAGA;EACF;EACA,eAAe;EACf,gBAAgBC;EAChB,YAAYC;EACZ,qBAAqB;EACrB,eAAe;CACjB;CACA,UAAU,EACR,SAAS;EACP,KAAK;GACH,WAAWC;GACX,gBAAgBC;EAClB;EACA,WAAW;GACT,WAAW,CACT,2FACA,0GACF;GACA,gBAAgB;GAChB,YAAY;EACd;CACF,EACF;AACF,CAAC,GAaKC,KAAgB,EAAE,UAAO,aAAU,SAAM,eAA+B;CAC5E,IAAM,EAAE,eAAYT,EAAY,GAC1B,EAAE,cAAW,kBAAe,mBAAgB,eAAY,wBAAqB,qBAAkBE,EAAgB,EACnH,WACF,CAAC;CACD,OACE,kBAACD,EAAK,SAAN;EAAc,WAAWS,EAAU;EAAU;EAAO,0BAAwB,CAAC,CAACC;EAA9E,UAAA,CACGC,KAAQ,kBAAC,OAAD;GAAK,WAAWC,EAAc;GAAI,UAAAD;EAAU,CAAA,GACrD,kBAAC,OAAD;GAAK,WAAWE,EAAe;GAA/B,UAAA;IACE,kBAAC,KAAD;KAAG,WAAWC,EAAW;KAAI,UAAAC;IAAS,CAAA;IAGrCC,MAAY,aACX,kBAAC,KAAD;KAAG,WAAWC,EAAoB;KAAG,eAAY;KAC9C,UAAAF;IACA,CAAA;IAGJL,KAAY,kBAAC,KAAD;KAAG,WAAWQ,EAAc;KAAI,UAAAR;IAAY,CAAA;GACtD;EACO,CAAA,CAAA;;AAElB;AAEA,EAAa,cAAc"}

package/dist/src/TabGroupList/TabGroupList.js

@@ -10,7 +10,7 @@ var a = (e, t = !1) => e === "tab-box" ? `repeat(${t ? "auto-fit" : "auto-fill"}
 	base: ["[&:has(button_svg)_button:not(:has(svg))_p:first-child]:mt-7"],
 	variants: { variant: {
 		tab: i,
-		"tab-box": "text-clr-primary grid gap-x-3 gap-y-2 scrollbar-none"
+		"tab-box": "scrollbar-none grid gap-x-3 gap-y-2 text-clr-primary"
 	} }
 }), s = ({ children: r }) => {
 	let { variant: i, fullWidth: s } = e();

package/dist/src/TabGroupList/TabGroupList.js.map

@@ -1 +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"}
+{"version":3,"file":"TabGroupList.js","names":["useTabGroup","TabsPrimitive","getGridTemplateColumnsStyle","variant","fullWidth","generateClasses","tv","tabStyleList","TabGroupList"],"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\": \"scrollbar-none grid gap-x-3 gap-y-2 text-clr-primary\",\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,IAAME,KAA+B,GAA0B,IAAY,OAErEC,MAAY,YAGT,UAFaC,IAAY,aAAa,YACT,6BAFF,IAM9BC,IAAkBC,EAAG;CACzB,MAAM,CAEJ,8DACF;CACA,UAAU,EACR,SAAS;EACP,KAAKC;EACL,WAAW;CACb,EACF;AACF,CAAC,GAOKC,KAAgB,EAAE,kBAAkC;CACxD,IAAM,EAAE,YAAS,iBAAcR,EAAY;CAC3C,OACE,kBAACC,EAAc,MAAf;EACE,WAAWI,EAAgB,EAAE,WAAQ,CAAC;EACtC,OAAO,EAAE,qBAAqBH,EAA4BC,GAASC,CAAS,EAAE;EAE7E;CACiB,CAAA;AAExB;AAEA,EAAa,cAAc"}

package/dist/src/TabGroupRoot.d.ts

@@ -3,13 +3,25 @@ export type TabGroupVariant = "tab" | "tab-box";
 interface BaseProps {
     /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
     children: ReactNode;
-    /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
-    activeTab: string;
-    /** Callback function that is called when the active tab changes. */
+    /** Callback function that is called when the selected tab changes. */
     onChange: (value: string) => void;
     /** Sets "the variant.  */
     variant?: TabGroupVariant;
 }
+interface SelectedProps {
+    /** The value of the selected tab. Should be used in conjunction with the `onChange` prop. */
+    selected: string;
+    /** @deprecated [tab-group-active-tab] Use `selected` instead. */
+    activeTab?: never;
+}
+interface DeprecatedSelectedProps {
+    selected?: never;
+    /**
+     * The value of the selected tab. Should be used in conjunction with the `onChange` prop.
+     * @deprecated [tab-group-active-tab] Use `selected` instead.
+     */
+    activeTab: string;
+}
 interface TabBoxProps extends BaseProps {
     variant?: "tab-box";
     /** If true, the tab items will occupy the available width. */
@@ -19,9 +31,9 @@ interface TabProps extends BaseProps {
     variant?: "tab";
     fullWidth?: never;
 }
-export type TabGroupProps = TabBoxProps | TabProps;
+export type TabGroupProps = (TabBoxProps | TabProps) & (DeprecatedSelectedProps | SelectedProps);
 declare const TabGroupRoot: {
-    ({ children, activeTab, onChange, variant, fullWidth }: TabGroupProps): React.JSX.Element;
+    ({ children, selected: selectedProp, activeTab, onChange, variant, fullWidth }: TabGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default TabGroupRoot;

package/dist/src/TabGroupRoot.js

@@ -3,25 +3,31 @@ import e from "./TabGroupContext.js";
 import "react";
 import * as t from "@radix-ui/react-tabs";
 import { jsx as n } from "react/jsx-runtime";
+import { warnDeprecated as r } from "@bonprix-ds/utils/deprecation";
 //#region src/TabGroupRoot.tsx
-var r = ({ children: r, activeTab: i, onChange: a, variant: o = "tab", fullWidth: s }) => /* @__PURE__ */ n(t.Root, {
-	className: "preflight",
-	value: i,
-	onValueChange: a,
-	"data-bpds": "tab-group",
-	"data-bpds-active-tab": i,
-	"data-bpds-variant": o,
-	"data-bpds-full-width": s,
-	children: /* @__PURE__ */ n(e, {
-		value: {
-			fullWidth: s,
-			variant: o
-		},
-		children: r
-	})
-});
-r.displayName = "TabGroup";
+var i = ({ children: i, selected: a, activeTab: o, onChange: s, variant: c = "tab", fullWidth: l }) => {
+	o !== void 0 && r("tab-group-active-tab");
+	let u = a ?? o;
+	return /* @__PURE__ */ n(t.Root, {
+		className: "preflight",
+		value: u,
+		onValueChange: s,
+		"data-bpds": "tab-group",
+		"data-bpds-selected": u,
+		"data-bpds-active-tab": u,
+		"data-bpds-variant": c,
+		"data-bpds-full-width": l,
+		children: /* @__PURE__ */ n(e, {
+			value: {
+				fullWidth: l,
+				variant: c
+			},
+			children: i
+		})
+	});
+};
+i.displayName = "TabGroup";
 //#endregion
-export { r as default };
+export { i as default };
 
 //# sourceMappingURL=TabGroupRoot.js.map

package/dist/src/TabGroupRoot.js.map

@@ -1 +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"}
+{"version":3,"file":"TabGroupRoot.js","names":["TabGroupContext","TabsPrimitive","TabGroupRoot","selectedProp","activeTab","warnDeprecated","selected","onChange","variant","fullWidth"],"sources":["../../src/TabGroupRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport React, { ReactNode } from \"react\";\n\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\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  /** Callback function that is called when the selected tab changes. */\n  onChange: (value: string) => void;\n  /** Sets \"the variant.  */\n  variant?: TabGroupVariant;\n}\n\ninterface SelectedProps {\n  /** The value of the selected tab. Should be used in conjunction with the `onChange` prop. */\n  selected: string;\n  /** @deprecated [tab-group-active-tab] Use `selected` instead. */\n  activeTab?: never;\n}\n\ninterface DeprecatedSelectedProps {\n  selected?: never;\n  /**\n   * The value of the selected tab. Should be used in conjunction with the `onChange` prop.\n   * @deprecated [tab-group-active-tab] Use `selected` instead.\n   */\n  activeTab: string;\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) & (DeprecatedSelectedProps | SelectedProps);\n\nconst TabGroupRoot = ({ children, selected: selectedProp, activeTab, onChange, variant = \"tab\", fullWidth }: TabGroupProps) => {\n  if (activeTab !== undefined) warnDeprecated(\"tab-group-active-tab\");\n  const selected = selectedProp ?? activeTab;\n  return (\n    <TabsPrimitive.Root\n      className=\"preflight\"\n      value={selected}\n      onValueChange={onChange}\n      data-bpds=\"tab-group\"\n      data-bpds-selected={selected}\n      // @deprecated [tab-group-active-tab] data-bpds-active-tab goes in the major, use data-bpds-selected\n      data-bpds-active-tab={selected}\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":";;;;;;;AAiDA,IAAME,KAAgB,EAAE,aAAU,UAAUC,GAAc,cAAW,aAAU,aAAU,OAAO,mBAA+B;CAC7H,AAAIC,MAAc,KAAA,KAAWC,EAAe,sBAAsB;CAClE,IAAMC,IAAWH,KAAgBC;CACjC,OACE,kBAACH,EAAc,MAAf;EACE,WAAU;EACV,OAAOK;EACP,eAAeC;EACf,aAAU;EACV,sBAAoBD;EAEpB,wBAAsBA;EACtB,qBAAmBE;EACnB,wBAAsBC;EAEtB,UAAA,kBAACT,GAAD;GAAiB,OAAO;IAAE;IAAW;GAAQ;GAAI;EAA0B,CAAA;CACzD,CAAA;AAExB;AAEA,EAAa,cAAc"}

package/dist/src/useTabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabGroup.js","names":[],"sources":["../../src/useTabGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport TabGroupContext from \"./TabGroupContext\";\n\nconst useTabGroup = () => {\n  return useContext(TabGroupContext);\n};\n\nexport default useTabGroup;\n"],"mappings":";;;AAIA,IAAM,UACG,EAAW,CAAe"}
+{"version":3,"file":"useTabGroup.js","names":["TabGroupContext","useTabGroup","useContext"],"sources":["../../src/useTabGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport TabGroupContext from \"./TabGroupContext\";\n\nconst useTabGroup = () => {\n  return useContext(TabGroupContext);\n};\n\nexport default useTabGroup;\n"],"mappings":";;;AAIA,IAAMC,UACGC,EAAWF,CAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/react-tab-group",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "TabGroup component, implemented in React, for the Bonprix Design System.",
   "keywords": [],
   "license": "UNLICENSED",
@@ -33,17 +33,17 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "1.1.21",
-    "@bonprix-ds/internal-components": "0.2.1"
+    "@bonprix-ds/internal-components": "0.2.3",
+    "@bonprix-ds/utils": "0.4.0"
   },
   "devDependencies": {
     "@types/react": "19.3.0",
-    "@vitejs/plugin-react": "6.1.1",
-    "rollup-preserve-directives": "1.1.3",
-    "vite": "8.3.0"
+    "vite": "8.3.2",
+    "@bonprix-ds/vite-config": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "^19",
+    "react-dom": "^19",
     "tailwind-variants": "0.3.1"
   },
   "scripts": {