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

package/CHANGELOG.md

@@ -2,14 +2,29 @@
 
 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.1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.0...v2.2.1) (2025-07-18)
 
-### [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)
+
+### Bug Fixes
+
+* set IconButton as 'use client' to fix import problems ([6a1c421](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/6a1c42100b9f38fd3b6ed7c9b8d931afe4774b7c))
+
+## [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)
+
+
+### 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))
+* 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 +61,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.1",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",

package/src/components/core/Calendar/Calendar.tsx

@@ -2,19 +2,23 @@
 
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { DayPicker, Matcher } from 'react-day-picker';
+import {
+  DayPicker,
+  DayPickerBase,
+  DayPickerMultipleProps,
+  DayPickerRangeProps,
+  DayPickerSingleProps,
+  Matcher,
+} from 'react-day-picker';
 import { de, enGB } from 'date-fns/locale';
 
 import { twJoin } from 'tailwind-merge';
-import { Icon } from '../../core/Icon';
+import { Icon } from '../Icon';
 import { Locale as I18nLocale } from '@tuic/i18n';
-import { TextButton } from '../../core/TextButton';
+import { TextButton } from '../TextButton';
 import { differenceInMonths } from 'date-fns';
 
-export type CalendarProps = Omit<
-  React.ComponentProps<typeof DayPicker>,
-  'locale' | 'fromDate'
-> & {
+type BaseProps = Omit<DayPickerBase, 'locale' | 'fromDate'> & {
   localeCode?: I18nLocale;
   useShowMoreButtonOnMobile?: boolean;
   showPrevMonthsButtonLabel?: string;
@@ -23,6 +27,11 @@ export type CalendarProps = Omit<
   pastIsPickable?: boolean;
 };
 
+export type CalendarProps =
+  | (BaseProps & DayPickerSingleProps)
+  | (BaseProps & DayPickerMultipleProps)
+  | (BaseProps & DayPickerRangeProps);
+
 const DEFAULT_LOCALE: I18nLocale = 'de';
 
 /**
@@ -243,7 +252,7 @@ function Calendar({
           cell: twJoin(
             'relative w-1/7 p-0 text-center text-xs focus-within:relative focus-within:z-20' +
               '[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected])]:bg-surface-secondary-7 [&:has([aria-selected].day-outside)]:bg-surface-secondary-7',
-            props.mode === 'range'
+            (props.mode as string) === 'range'
               ? '[&:has(>.day-range-end)]:rounded-r-lg [&:has(>.day-range-start)]:rounded-l-lg first:[&:has([aria-selected])]:rounded-l-lg last:[&:has([aria-selected])]:rounded-r-lg'
               : '[&:has([aria-selected])]:rounded-sm',
           ),

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/IconButton/IconButton.tsx

@@ -1,4 +1,6 @@
-import { Icon, IconName } from '../../core/Icon';
+'use client'
+
+import { Icon, IconName } from '../Icon';
 import {
   ButtonHTMLAttributes,
   forwardRef,

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',
                       )}
                     >