@tui-cruises/mein-schiff-web-react-component-library 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -2,14 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [2.1.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.5...v2.1.0) (2025-06-19)
+## [2.2.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.1.0...v2.2.0) (2025-07-15)
 
-### [2.0.4](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.3...v2.0.4) (2025-06-19)
+
+### Features
+
+* **Tabs:** add `on` prop to control background context ([127dd83](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/127dd8319d205d6ec84c85c89e3b1959f3bfa9d7))
 
 
 ### Bug Fixes
 
-* **release:** replace local file dependencies with versions for npm pack ([eac75a6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/eac75a6d83efec0906037fbc536f8bcca8ab2336))
+* **OM-2207:** form label with error style for data-invalid attribute ([285587c](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/285587cee026b4dc5c9d9ca5efa8fc87080244c8))
+
+### [2.1.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.5...v2.1.0) (2025-06-19)
+
+* **Release:** replace local file dependencies with versions for npm pack ([eac75a6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/eac75a6d83efec0906037fbc536f8bcca8ab2336))
+
 
 ### [2.0.3](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.2...v2.0.3) (2025-06-05)
 
@@ -46,4 +54,6 @@ All notable changes to this project will be documented in this file. See [standa
 * **PasswordField:** focus border radius update ([1694e4b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/1694e4b9f74aed973ef4e0315dcfc9bf428486bb))
 * **pictograms:** remove yellow from badge pictograms per brand guidelines ([62f8655](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/62f8655f021fb7a47ed7d9881c89820c63605548))
 
-### [2.0.0-rc.1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.0...v2.0.0-rc.1) (2025-04-29)
+### [2.0.0-rc.1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.0.0...v2.0.0-rc.1) (2025-04-29)
+
+* **Release:** initial release candidate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",

package/src/components/core/FormLabel/FormLabel.tsx

@@ -10,6 +10,7 @@ export type FormLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   asChild?: boolean;
   /** Indicates if the associated field is required. */
   required?: boolean;
+  'data-invalid'?: boolean;
 };
 
 const FormLabelImplementation: ForwardRefRenderFunction<
@@ -25,7 +26,7 @@ const FormLabelImplementation: ForwardRefRenderFunction<
       {...args}
       ref={ref}
       className={twJoin(
-        'block cursor-pointer text-base font-semibold text-marine-high-emphasis',
+        'block cursor-pointer text-base font-semibold text-marine-high-emphasis data-[invalid]:text-error-100',
         className,
       )}
     >

package/src/components/core/Tabs/Tabs.tsx

@@ -1,7 +1,13 @@
 'use client';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { ComponentProps, FC, forwardRef } from 'react';
+import {
+  ComponentProps,
+  createContext,
+  FC,
+  forwardRef,
+  useContext,
+} from 'react';
 import { IconButton } from '../IconButton';
 import {
   CarouselInterface,
@@ -11,7 +17,24 @@ import {
 import { twJoin } from 'tailwind-merge';
 import { Pictogram, PictogramName } from '../Pictogram';
 
-const Tabs = TabsPrimitive.Root;
+type TabsContextType = {
+  on?: 'white' | 'gray';
+};
+
+const TabsContext = createContext<TabsContextType>({});
+
+type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  on?: 'white' | 'gray';
+};
+
+const Tabs = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(
+  ({ on = 'white', ...props }, ref) => (
+    <TabsContext.Provider value={{ on }}>
+      <TabsPrimitive.Root {...props} ref={ref} />
+    </TabsContext.Provider>
+  ),
+);
+Tabs.displayName = TabsPrimitive.Root.displayName;
 
 const TabsContent = TabsPrimitive.Content;
 
@@ -21,6 +44,7 @@ type Props = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
 
 const TabsList = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, Props>(
   ({ className, centerTabItems, ...props }, ref) => {
+    const { on } = useContext(TabsContext);
     return (
       <TabsPrimitive.List
         className="relative flex items-center justify-between gap-1"
@@ -47,7 +71,9 @@ const TabsList = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, Props>(
                   <>
                     <div
                       className={twJoin(
-                        'pointer-events-none absolute left-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-r from-white from-50% pr-4',
+                        `pointer-events-none absolute left-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-r from-50% pr-4`,
+                        on === 'white' && 'from-white',
+                        on === 'gray' && 'from-gray',
                         visibleIndexes[0] === 0 && 'hidden',
                       )}
                     >
@@ -64,7 +90,9 @@ const TabsList = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, Props>(
 
                     <div
                       className={twJoin(
-                        'pointer-events-none absolute right-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-l from-white from-50% pl-4',
+                        `pointer-events-none absolute right-0 top-1/2 flex h-full -translate-y-1/2 items-center bg-gradient-to-l from-50% pl-4`,
+                        on === 'white' && 'from-white',
+                        on === 'gray' && 'from-gray',
                         visibleIndexes.includes(lastIndex) && 'hidden',
                       )}
                     >