@vodafone_de/brix-components 7.0.18 → 7.0.19

package/dist/components/TabGroup/index.js

@@ -5,7 +5,6 @@ import { I as IconLoader } from "../../index-BdUFiKHr.js";
 import { b as iconSizeSm, d as iconSizeLg } from "../../props-7dcsjRUx.js";
 import "../../styled-RnVr222F.js";
 import styled from "styled-components";
-import Container from "../Container/index.js";
 import Flex from "../Flex/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
@@ -22,11 +21,11 @@ import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
 import { a as colorObjectBrand } from "../../ObjectColor-0RAzLGI5.js";
-import { a as spacingMd, c as spacingSm, b as spacingXs, e as spacing2Xs } from "../../Spacing-BMQelJYr.js";
+import { a as spacingMd, c as spacingSm, b as spacingXs, e as spacing2Xs, d as spacingXl } from "../../Spacing-BMQelJYr.js";
 import { a as filterProps } from "../../filterProps-CTn92eZw.js";
 import { d as flexJustifyCenter } from "../../styled-CyZvsdJs.js";
-const tabOrientationHorizontal = "horizontal";
-const tabOrientationVertical = "vertical";
+const iconPositionLeft = "left";
+const iconPositionTop = "top";
 const tabGroupWidthFull = "full";
 const tabGroupWidthAuto = "auto";
 const TabGroupContainerStyled = styled.div.withConfig({
@@ -74,7 +73,7 @@ const TabGroupTabsStyled = styled(Flex).withConfig({
   })
 });
 const TabStyled = styled.button.withConfig({
-  shouldForwardProp: filterProps(["tabOrientation", "width"]),
+  shouldForwardProp: filterProps(["iconPosition", "width"]),
   displayName: "TabStyled",
   componentId: "sc-qawwg-3"
 })({
@@ -105,10 +104,10 @@ const TabStyled = styled.button.withConfig({
     })
   }
 }, ({
-  tabOrientation
+  iconPosition
 }) => ({
-  flexDirection: tabOrientation === tabOrientationVertical ? "column" : "row",
-  gap: tabOrientation === tabOrientationVertical ? getSpacing(spacingXs) : getSpacing(spacing2Xs)
+  flexDirection: iconPosition === iconPositionTop ? "column" : "row",
+  gap: iconPosition === iconPositionTop ? getSpacing(spacingXs) : getSpacing(spacing2Xs)
 }), ({
   width
 }) => ({
@@ -139,10 +138,11 @@ const TabGroupIndicatorStyled = styled.div.withConfig({
     background: "SelectedItem"
   })
 });
-const PanelStyled = styled(Container).withConfig({
+const PanelStyled = styled.div.withConfig({
   displayName: "PanelStyled",
   componentId: "sc-qawwg-6"
 })({
+  marginTop: getSpacing(spacingXl),
   background: "transparent",
   "&:focus-visible": {
     outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
@@ -154,7 +154,7 @@ const PanelStyled = styled(Container).withConfig({
 });
 const TabGroup = ({
   tabs,
-  tabOrientation = tabOrientationHorizontal,
+  iconPosition = iconPositionLeft,
   value,
   width = tabGroupWidthFull,
   "aria-label": ariaLabel,
@@ -294,10 +294,10 @@ const TabGroup = ({
   const getTabs = tabs.map((tab, tabIndex) => {
     const tabValue = tab.value;
     const isActive = tabValue === activeTab;
-    return /* @__PURE__ */ jsxs(TabStyled, { tabOrientation, width, type: "button", ref: (el) => {
+    return /* @__PURE__ */ jsxs(TabStyled, { iconPosition, width, type: "button", ref: (el) => {
       tabRefs.current[tabValue] = el;
     }, onClick: () => handleTabClick(tabValue), "aria-selected": isActive, tabIndex: isActive ? 0 : -1, role: "tab", id: `tab-${tabValue}`, "aria-controls": `tabpanel-${tabValue}`, onKeyDown: (e) => handleKeyDown(e, tabIndex), children: [
-      tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: tabOrientation === tabOrientationHorizontal ? iconSizeSm : iconSizeLg }) : null,
+      tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: iconPosition === iconPositionLeft ? iconSizeSm : iconSizeLg }) : null,
       /* @__PURE__ */ jsx(TabLabelStyled, { children: tab.label })
     ] }, `tab-${tabIndex}`);
   });
@@ -323,8 +323,8 @@ export {
   TabLabelStyled,
   TabStyled,
   TabGroup as default,
+  iconPositionLeft,
+  iconPositionTop,
   tabGroupWidthAuto,
-  tabGroupWidthFull,
-  tabOrientationHorizontal,
-  tabOrientationVertical
+  tabGroupWidthFull
 };

package/dist/components/TabGroup/props.d.ts

@@ -1,75 +1,70 @@
 import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-export declare const tabOrientationHorizontal = "horizontal";
-export declare const tabOrientationVertical = "vertical";
+export declare const iconPositionLeft = "left";
+export declare const iconPositionTop = "top";
 export declare const tabGroupWidthFull = "full";
 export declare const tabGroupWidthAuto = "auto";
-export type TabOrientation = typeof tabOrientationHorizontal | typeof tabOrientationVertical;
+export type IconPosition = typeof iconPositionLeft | typeof iconPositionTop;
 export type TabGroupWidth = typeof tabGroupWidthFull | typeof tabGroupWidthAuto;
-interface TabBaseProps extends ButtonHTMLAttributes<HTMLInputElement> {
+interface TabBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
-     * Label for the tab
+     * Text label for the tab
      */
     label: string;
     /**
-     * Unique tab value
+     * Unique value used to identify the tab
      */
     value?: string;
     /**
-     * Content of the tab
+     * Content rendered in the associated tab panel
      */
     panelContent: ReactNode;
 }
-/** Horizontal Tab: icon is optional */
-export type TabPropsHorizontal = TabBaseProps & {
+/** Tab with optional icon */
+type TabWithOptionalIcon = TabBaseProps & {
     /**
-     * Optional leading icon (horizontal TabGroup only)
+     * Optional icon (when `iconPosition` is omitted. Defaults to "left")
      */
     icon?: IconName;
 };
-/** Vertical Tab: icon is required */
-export type TabPropsVertical = TabBaseProps & {
+/** Tab with required icon */
+type TabWithRequiredIcon = TabBaseProps & {
     /**
-     * Required leading icon (vertical TabGroup)
+     * Required icon (when `iconPosition` is "left" or "top")
      */
     icon: IconName;
 };
 interface TabGroupBaseProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
     /**
-     * Pin component's name from string to the concrete name
+     * Component name
      */
     component?: 'TabGroup';
     /**
-     * TabGroup width, when it's Auto, the TabGroup is scrollable horizontally
+     * TabGroup width
+     * - `"auto"` makes the tab list horizontally scrollable
+     * - `"full"` stretches tabs to the container width
      */
     width?: TabGroupWidth;
     /**
-     * Controlled value of the selected tab
+     * Controlled value of the currently selected tab
      */
     value: string;
     /**
-     * Callback when a tab is selected
+     * Callback invoked when a tab is selected
      */
     onTabChange?: (value: string) => void;
 }
 /**
- * Horizontal variant:
- * - `tabOrientation` is optional (treat missing as horizontal)
- * - `icon` on each tab is optional
+ * TabGroup props:
+ * - If `iconPosition` is omitted, `icon` on each tab is optional.
+ * - If `iconPosition` is provided ("left" | "top"), `icon` on each tab is required.
  */
-export interface TabGroupHorizontalProps extends TabGroupBaseProps {
-    tabs: TabPropsHorizontal[];
-    tabOrientation?: typeof tabOrientationHorizontal;
-}
-/**
- * Vertical variant:
- * - `tabOrientation` must be "vertical"
- * - `icon` on each tab is required
- */
-export interface TabGroupVerticalProps extends TabGroupBaseProps {
-    tabs: TabPropsVertical[];
-    tabOrientation: typeof tabOrientationVertical;
-}
-export type TabGroupProps = TabGroupHorizontalProps | TabGroupVerticalProps;
+export type TabGroupProps = (TabGroupBaseProps & {
+    tabs: TabWithOptionalIcon[];
+    iconPosition?: undefined;
+}) | (TabGroupBaseProps & {
+    tabs: TabWithRequiredIcon[];
+    iconPosition: IconPosition;
+});
 export {};

package/dist/components/TabGroup/styled.d.ts

@@ -2,7 +2,7 @@ import { TabGroupProps } from './props';
 export declare const TabGroupContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<TabGroupProps, "bottomSpacing">>> & string;
 export declare const TabGroupTabsScrollableContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<TabGroupProps, "width">>> & string;
 export declare const TabGroupTabsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never>> & string & Omit<import('react').FC<import('../Flex').FlexProps>, keyof import('react').Component<any, {}, any>>;
-export declare const TabStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<TabGroupProps, "width" | "tabOrientation">>> & string;
+export declare const TabStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<TabGroupProps, "width" | "iconPosition">>> & string;
 export declare const TabLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const TabGroupIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PanelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Container').ContainerProps, never>> & string & Omit<import('react').FC<import('../Container').ContainerProps>, keyof import('react').Component<any, {}, any>>;
+export declare const PanelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/TextList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-Cy0Uf6Y5.js";
+import { a, T } from "../../index-CVHmFLr5.js";
 import "../../tags-38kBhOn6.js";
 import "../../Spacing-BMQelJYr.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";