@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/Textarea/index.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useImperativeHandle } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { c as spacingSm, s as spacingMd, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { a as colorBackgroundNeutral, d as colorBackgroundSubtle } from "../../BackgroundColor-Ba4D10TC.js";
+import { a as colorBorderNeutral, c as colorBorderFocus, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BACbvI20.js";
+import { b as borderRadiusMd } from "../../BorderRadius-0jhn76gB.js";
+import { t as textHeadingXs } from "../../HeadingSize-O__w72MO.js";
+import { c as colorTextPlaceholder, a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const TextareaWrapperStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "TextareaWrapperStyled",
+  componentId: "sc-oioier-0"
+})({
+  position: "relative",
+  width: "100%"
+}, getBottomSpacing, ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const TextareaStyled = styled.textarea.withConfig({
+  shouldForwardProp,
+  displayName: "TextareaStyled",
+  componentId: "sc-oioier-1"
+})({
+  ...forcedColors({
+    backgroundColor: "Field",
+    border: "1px solid FieldText"
+  }),
+  display: "block",
+  width: "100%",
+  resize: "vertical",
+  borderRadius: getBorderRadius(borderRadiusMd),
+  border: "none",
+  fontFamily: getCssVar("font-family"),
+  color: getTextColor(colorTextNeutral),
+  backgroundColor: getBackgroundColor(colorBackgroundNeutral),
+  minHeight: `calc((${getHeadingSize(textHeadingXs).fontSize} * ${getHeadingSize(textHeadingXs).lineHeight}) + (2 * ${getSpacing(spacingSm)}))`,
+  "&:placeholder-shown": {
+    color: getTextColor(colorTextPlaceholder)
+  }
+}, ({
+  status
+}) => {
+  if (!status) {
+    return {
+      border: `1px solid ${getBorderColor(colorBorderUnselected)}`,
+      padding: getSpacing(spacingSm),
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `1px solid ${getBorderColor(colorBorderNeutral)}`
+      }
+    };
+  }
+  if ("success" === status) {
+    return {
+      border: `2px solid ${getBorderColor(colorBorderSuccess)}`,
+      padding: getSpacing(spacingSm),
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `2px solid ${getBorderColor(colorBorderSuccess)}`
+      }
+    };
+  }
+  if ("error" === status) {
+    return {
+      border: `2px solid ${getBorderColor(colorBorderCritical)}`,
+      padding: getSpacing(spacingSm),
+      "&:focus-visible": {
+        ...forcedColors({
+          outline: "4px solid CanvasText"
+        }),
+        outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+        border: `2px solid ${getBorderColor(colorBorderCritical)}`
+      }
+    };
+  }
+}, ({
+  resizable
+}) => {
+  return {
+    resize: resizable ? "vertical" : "none"
+  };
+}, ({
+  readOnly
+}) => ({
+  ...readOnly && {
+    backgroundColor: getBackgroundColor(colorBackgroundSubtle)
+  }
+}), ({
+  disabled
+}) => ({
+  ...disabled && {
+    backgroundColor: getBackgroundColor(colorBackgroundSubtle),
+    cursor: "not-allowed"
+  }
+}), getHeadingSize(textHeadingXs));
+const Textarea = ({
+  uid,
+  helperText,
+  errorMessage,
+  status,
+  label,
+  rows = 4,
+  placeholder,
+  resizable = false,
+  bottomSpacing = spacingMd,
+  disabled,
+  ref: outerRef,
+  ...props
+}) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(outerRef, () => innerRef.current, []);
+  const messageId = `text-${uid}`;
+  const textAreaProps = {
+    ...props,
+    id: uid,
+    disabled,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : props["aria-describedby"],
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled, layout: props.layout, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsx(TextareaWrapperStyled, { bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: /* @__PURE__ */ jsx(TextareaStyled, { ...textAreaProps, rows, status, placeholder, resizable, ref: innerRef }) }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+};
+export {
+  Textarea as default
+};

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

@@ -0,0 +1,26 @@
+import { Ref, TextareaHTMLAttributes } from 'react';
+import { InputSharedProps } from '../Input/props';
+import { textareaComponentName } from './componentName';
+/**
+ * Props for the Textarea component.
+ * Renders a multi-line text input with label, validation states, and optional resizing.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/input-and-selection-textarea--docs} Textarea stories
+ */
+export interface TextareaProps extends InputSharedProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    ref?: Ref<HTMLTextAreaElement>;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof textareaComponentName;
+    /**
+     * When `true`, the user can vertically resize the textarea to fit their content.
+     * Horizontal resizing is not supported. A scrollbar appears when content exceeds the height.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Number of visible text lines (rows), controlling the initial height of the textarea.
+     * @default 4
+     */
+    rows?: number;
+}

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

@@ -0,0 +1,9 @@
+import { InputStatus } from '../Input/props';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { TextareaProps } from './props';
+export declare const TextareaWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BrixComponentProps | "status"> & BrixComponentProps & {
+    status?: InputStatus;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BrixComponentProps | "status"> & BrixComponentProps & {
+    status?: InputStatus;
+}, never>>> & string;
+export declare const TextareaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "hidden" | "color" | "content" | "layout" | "style" | "wrap" | "translate" | "disabled" | "key" | "component" | "bottomSpacing" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "form" | "ref" | "status" | "value" | "name" | "autoComplete" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "required" | "errorMessage" | "helperText" | "inputGroupMode" | "cols" | "dirName" | "rows" | "resizable"> & Omit<TextareaProps, "uid" | "label">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "hidden" | "color" | "content" | "layout" | "style" | "wrap" | "translate" | "disabled" | "key" | "component" | "bottomSpacing" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "form" | "ref" | "status" | "value" | "name" | "autoComplete" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "required" | "errorMessage" | "helperText" | "inputGroupMode" | "cols" | "dirName" | "rows" | "resizable"> & Omit<TextareaProps, "uid" | "label">, never>>> & string;

package/dist/components/Textarea/validate.d.ts

@@ -0,0 +1,149 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { TextareaProps } from './props';
+export type TextareaCmsProps = CmsProps<TextareaProps>;
+export declare const textareaSchema: z.ZodObject<{
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    uid: z.ZodString;
+    label: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+        uid: z.ZodString;
+        sysId: z.ZodString;
+        customId: z.ZodOptional<z.ZodString>;
+        enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+        tracking: z.ZodOptional<z.ZodObject<{
+            contact_action: z.ZodOptional<z.ZodString>;
+            contact_subject: z.ZodOptional<z.ZodString>;
+            contact_available_tools: z.ZodOptional<z.ZodString>;
+            contact_tool: z.ZodOptional<z.ZodString>;
+            contact_trigger: z.ZodOptional<z.ZodString>;
+            contact_variant: z.ZodOptional<z.ZodString>;
+            information_action: z.ZodOptional<z.ZodString>;
+            information_name: z.ZodOptional<z.ZodString>;
+            information_ui_type: z.ZodOptional<z.ZodString>;
+            information_trigger: z.ZodOptional<z.ZodString>;
+            information_ui_location: z.ZodOptional<z.ZodString>;
+            information_id: z.ZodOptional<z.ZodString>;
+            information_ui_size: z.ZodOptional<z.ZodString>;
+            error_action: z.ZodOptional<z.ZodString>;
+            error_type: z.ZodOptional<z.ZodString>;
+            error_message: z.ZodOptional<z.ZodString>;
+            error_ui_type: z.ZodOptional<z.ZodString>;
+            error_trigger: z.ZodOptional<z.ZodString>;
+            error_trigger_name: z.ZodOptional<z.ZodString>;
+            error_code: z.ZodOptional<z.ZodString>;
+            error_details: z.ZodOptional<z.ZodString>;
+            error_location: z.ZodOptional<z.ZodString>;
+        }, z.core.$loose>>;
+        bottomSpacing: z.ZodOptional<z.ZodEnum<{
+            sm: "sm";
+            md: "md";
+            lg: "lg";
+            none: "none";
+            "2xs": "2xs";
+            xs: "xs";
+            xl: "xl";
+            "2xl": "2xl";
+            "3xl": "3xl";
+            "4xl": "4xl";
+            "5xl": "5xl";
+            "6xl": "6xl";
+            "7xl": "7xl";
+            None: "None";
+            "2Xs": "2Xs";
+            Xs: "Xs";
+            Sm: "Sm";
+            Md: "Md";
+            Lg: "Lg";
+            Xl: "Xl";
+            "2Xl": "2Xl";
+            "3Xl": "3Xl";
+            "4Xl": "4Xl";
+            "5Xl": "5Xl";
+            "6Xl": "6Xl";
+            "7Xl": "7Xl";
+        }>>;
+        layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+            sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+            md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+            lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        }, z.core.$strip>]>>>;
+        component: z.ZodLiteral<"Label">;
+        children: z.ZodUnknown;
+        disabled: z.ZodOptional<z.ZodBoolean>;
+        htmlFor: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>]>;
+    status: z.ZodOptional<z.ZodEnum<{
+        error: "error";
+        success: "success";
+    }>>;
+    errorMessage: z.ZodOptional<z.ZodString>;
+    helperText: z.ZodOptional<z.ZodString>;
+    disabled: z.ZodOptional<z.ZodBoolean>;
+    required: z.ZodOptional<z.ZodBoolean>;
+    component: z.ZodLiteral<"Textarea">;
+    resizable: z.ZodOptional<z.ZodBoolean>;
+    rows: z.ZodOptional<z.ZodNumber>;
+    onUpdate: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateTextareaProps: (props: unknown) => ValidationResult<TextareaCmsProps>;
+export declare const isTextareaProps: (props: unknown) => props is TextareaCmsProps;

package/dist/components/Textarea/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimeInput/componentName.d.ts

@@ -0,0 +1 @@
+export declare const timeInputComponentName: "TimeInput";

package/dist/components/TimeInput/index.d.ts

@@ -0,0 +1,4 @@
+import { TimeInputProps } from './props';
+declare const TimeInput: ({ uid, status, errorMessage, helperText, label, onUpdate, bottomSpacing, ref: outerRef, ...props }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeInput;
+export * from './props';

package/dist/components/TimeInput/index.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useImperativeHandle, useEffect } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import { s as spacingMd, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-BkCUjXbJ.js";
+import { i as iconSizeSm } from "../../IconSize-Da9zhR76.js";
+import { bm as ClockIcon } from "../../_5gPlusIcon-CuQyn-Mb.js";
+import styled from "styled-components";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+const ClockIconStyled = styled(ClockIcon).withConfig({
+  displayName: "ClockIconStyled",
+  componentId: "sc-bhq5z8-0"
+})(({
+  browserSupportsPicker
+}) => {
+  return {
+    cursor: browserSupportsPicker ? "pointer" : "default",
+    "&:focus": {
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`
+    }
+  };
+});
+const TimeInputStyled = styled(InputStyled).withConfig({
+  displayName: "TimeInputStyled",
+  componentId: "sc-bhq5z8-1"
+})({
+  "&::-webkit-calendar-picker-indicator": {
+    display: "none"
+  }
+});
+function isChromium() {
+  const ua = navigator.userAgent;
+  if ("userAgentData" in navigator) {
+    return navigator.userAgentData.brands.some((b) => /Chromium|Chrome/i.test(b.brand));
+  }
+  return /Chrome/.test(ua) && !/Edg|OPR|Brave|Firefox|Safari/.test(ua);
+}
+const TimeInput = ({
+  uid,
+  status,
+  errorMessage,
+  helperText,
+  label,
+  onUpdate,
+  bottomSpacing = spacingMd,
+  ref: outerRef,
+  ...props
+}) => {
+  const [internalStatus, setInternalStatus] = useState(status);
+  const innerRef = useRef(null);
+  const [browserSupportsPicker, setBrowserSupportsPicker] = useState(false);
+  useImperativeHandle(outerRef, () => innerRef.current, []);
+  const messageId = `text-${uid}`;
+  const internalStatusIsError = inputStateError === internalStatus;
+  const inputProps = {
+    ...props,
+    id: uid,
+    "aria-describedby": !internalStatusIsError && helperText || internalStatusIsError && errorMessage ? messageId : void 0,
+    "aria-invalid": internalStatusIsError ? true : void 0
+  };
+  useEffect(() => {
+    setInternalStatus(status);
+  }, [status]);
+  useEffect(() => {
+    typeof window !== "undefined" && setBrowserSupportsPicker(isChromium());
+  }, []);
+  const handleUpdate = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(event.target.value);
+  };
+  const handlePickerInteraction = () => {
+    if (innerRef.current) {
+      innerRef.current.showPicker();
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, layout: props.layout, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status: internalStatus, readOnly: props.readOnly, bottomSpacing: inputStateError !== internalStatus && helperText || inputStateError === internalStatus && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(TimeInputStyled, { ...inputProps, ref: innerRef, type: "time", onBlur: handleUpdate }),
+      /* @__PURE__ */ jsx(ClockIconStyled, { size: iconSizeSm, onClick: handlePickerInteraction, onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handlePickerInteraction();
+        }
+      }, browserSupportsPicker, role: browserSupportsPicker ? "button" : void 0, tabIndex: browserSupportsPicker ? 0 : void 0, "aria-label": "Zeitauswahl anzeigen" })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status: internalStatus, message: inputStateError === internalStatus ? errorMessage : helperText })
+  ] });
+};
+export {
+  TimeInput as default
+};

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

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes, Ref } from 'react';
+import { InputSharedProps } from '../Input';
+import { timeInputComponentName } from './componentName';
+/**
+ * Props for the TimeInput component.
+ * A time input field with label and validation.
+ */
+export interface TimeInputProps extends InputSharedProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * function that is called on every update. While input[type=time] is special,
+     * this os fired on blur
+     */
+    onUpdate?: (a: string) => void;
+    /**
+     * Pin component's name
+     */
+    component?: typeof timeInputComponentName;
+}

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

@@ -0,0 +1,14 @@
+import { ClockIcon } from '@vfde-react/inline-icon-library/ClockIcon';
+import { ComponentProps, InputHTMLAttributes } from 'react';
+import { IStyledComponent } from 'styled-components';
+import { InlineIconProps } from '../InlineIcon';
+export declare const ClockIconStyled: IStyledComponent<'web', ComponentProps<typeof ClockIcon> & InlineIconProps & {
+    browserSupportsPicker: boolean;
+}>;
+export declare const TimeInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>> & string;