npm - @bonprix-ds/internal-components - Versions diffs - 0.1.2 → 0.1.3 - Mend

@bonprix-ds/internal-components 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import { ButtonSize } from '@bonprix-ds/utils';
 import { ComponentProps } from 'react';
 import { default as default_2 } from 'react';
 import { ElementType } from 'react';
-import { FC } from 'react';
 import { IconType } from '@bonprix-ds/react-icon';
 import { Ref } from 'react';
 import { ControlGroupProps as SelectionControlGroupProps } from '@bonprix-ds/utils';
@@ -54,7 +53,7 @@ declare interface BaseProps_2 {
     describedBy?: string;
 }
-export declare const CheckboxBase: FC<CheckboxBaseProps & AllyIds>;
+export declare const CheckboxBase: ({ label, name, onChange, onBlur, id, value, required, disabled, error, errorText, helperText, helperTextId, errorTextId, rootRef, describedBy, ...props }: CheckboxBaseProps & AllyIds) => default_2.JSX.Element;
 export declare type CheckboxBaseProps = ControlledInputProps | UncontrolledInputProps;
@@ -67,7 +66,7 @@ declare interface ControlledInputProps extends BaseProps_2 {
     onChange: (value: boolean) => void;
 }
-export declare const InputHelperText: FC<InputHelperTextProps>;
+export declare const InputHelperText: ({ id, children, type }: InputHelperTextProps) => default_2.JSX.Element;
 export declare interface InputHelperTextProps {
     id: string;
@@ -75,7 +74,7 @@ export declare interface InputHelperTextProps {
     type?: "description" | "error";
 }
-export declare const InputHelperTextSection: FC<InputHelperTextSectionProps>;
+export declare const InputHelperTextSection: ({ helperText, helperTextId, error, errorText, errorTextId, className }: InputHelperTextSectionProps) => default_2.JSX.Element;
 export declare interface InputHelperTextSectionProps {
     helperText: string;
@@ -86,7 +85,7 @@ export declare interface InputHelperTextSectionProps {
     className?: string;
 }
-export declare const InputWrapper: FC<InputWrapperProps>;
+export declare const InputWrapper: ({ children, id, label, labelFloated, disabled, required, componentName, helperText, helperTextId, error, errorText, errorTextId, labelClassName, }: InputWrapperProps) => default_2.JSX.Element;
 export declare interface InputWrapperProps {
     children: default_2.ReactNode;
@@ -104,7 +103,7 @@ export declare interface InputWrapperProps {
     labelClassName?: string;
 }
-export declare const SelectionControlGroup: FC<SelectionControlGroupProps>;
+export declare const SelectionControlGroup: ({ label, children, error, errorText, disabled, helperText, required, divider, horizontalPadding, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, componentName, }: SelectionControlGroupProps) => default_2.JSX.Element;
 export { SelectionControlGroupProps }

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../src/BaseButton.tsx","../src/CheckboxBase.tsx","../src/InputHelperText.tsx","../src/InputHelperTextSection.tsx","../src/InputWrapper.tsx","../src/SelectionControlGroup.tsx"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Spinner from \"@bonprix-ds/react-spinner\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: [\n \"preflight rounded typography-button relative flex items-center justify-center gap-2 border border-transparent group/button\",\n \"focus-visible:outline outline-1 outline-offset-1 outline-clr-primary\",\n ],\n slots: {\n icon: \"\",\n loader: \"absolute\",\n contentWrapper: \"flex items-center justify-center gap-2\",\n },\n variants: {\n variant: { primary: {}, secondary: {}, tertiary: {} },\n disabled: { true: \"\", false: \"\" },\n contentWidth: { true: \"\", false: \"\" },\n size: { small: \"\", medium: \"\", large: \"\" },\n link: { true: \"\", false: \"\" },\n inverted: { true: \"\", false: \"\" },\n iconPosition: {\n start: \"\",\n end: \"flex-row-reverse\",\n },\n loading: {\n true: {\n contentWrapper: \"invisible\",\n },\n false: \"\",\n },\n iconButton: {\n true: \"\",\n false: \"py-[0.4375rem]\",\n },\n },\n compoundVariants: [\n {\n variant: \"primary\",\n inverted: false,\n class: {\n base: \"bg-clr-primary text-clr-on-primary-high\",\n icon: \"fill-clr-on-primary-high\",\n },\n },\n {\n variant: \"primary\",\n inverted: true,\n class: {\n base: \"bg-clr-primary-inverse text-clr-on-primary-high-inverse\",\n icon: \"fill-clr-on-primary-high-inverse\",\n },\n },\n {\n variant: \"primary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled bg-clr-bg-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"primary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:bg-clr-on-bg-low active:bg-clr-on-bg-low\",\n },\n },\n {\n variant: \"primary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse bg-clr-bg-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"primary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:bg-clr-on-bg-low-inverse active:bg-clr-on-bg-low-inverse\",\n },\n },\n {\n variant: \"secondary\",\n inverted: false,\n class: {\n base: \"text-clr-primary border-clr-primary\",\n icon: \"fill-clr-primary\",\n },\n },\n {\n variant: \"secondary\",\n inverted: true,\n class: {\n base: \"text-clr-primary-inverse border-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n },\n },\n {\n variant: \"secondary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled border-clr-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"secondary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:text-clr-on-bg-low hover:border-clr-on-bg-low active:text-clr-on-bg-low active:border-clr-on-bg-low\",\n icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n },\n },\n {\n variant: \"secondary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse border-clr-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"secondary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:text-clr-on-bg-low-inverse hover:border-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse active:border-clr-on-bg-low-inverse\",\n icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n inverted: false,\n class: {\n base: \"text-clr-primary\",\n icon: \"fill-clr-primary\",\n },\n },\n {\n variant: \"tertiary\",\n inverted: true,\n class: {\n base: \"text-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:text-clr-on-bg-low active:text-clr-on-bg-low\",\n icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:text-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse\",\n icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n },\n },\n {\n contentWidth: false,\n iconButton: false,\n class: \"w-full\",\n },\n {\n contentWidth: true,\n link: true,\n class: \"w-fit\",\n },\n {\n iconButton: false,\n variant: [\"primary\", \"secondary\"],\n class: \"px-4\",\n },\n // Regular Button sizes\n {\n iconButton: false,\n size: \"medium\",\n class: {\n icon: \"w-4 h-4\",\n },\n },\n {\n iconButton: false,\n size: \"large\",\n class: {\n base: \"py-[0.9375rem]\",\n icon: \"w-4 h-4\",\n },\n },\n // Icon Button sizes\n {\n iconButton: true,\n size: \"small\",\n class: {\n base: \"p-[0.1875rem]\",\n icon: \"w-4 h-4\",\n },\n },\n {\n iconButton: true,\n size: \"medium\",\n variant: [\"primary\", \"secondary\"],\n class: {\n base: \"p-[0.4375rem]\",\n icon: \"w-4 h-4\", // we currently predefine the fill color in the icon, so we cannot inherit the fill from base and instead have to set it directly\n },\n },\n {\n iconButton: true,\n size: \"medium\",\n variant: \"tertiary\",\n class: {\n base: \"p-[0.1875rem]\",\n icon: \"w-6 h-6\",\n },\n },\n {\n iconButton: true,\n size: \"large\",\n class: {\n base: \"p-[0.6875rem]\",\n icon: \"w-6 h-6\",\n },\n },\n ],\n});\n\ninterface BaseProps {\n children: string;\n size?: ButtonSize;\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n contentWidth?: boolean;\n loading?: boolean;\n icon?: IconType;\n iconPosition?: \"start\" \| \"end\";\n componentName?: \"button\" \| \"icon-button\" \| \"badge-icon-button\";\n inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps \| \"component\">;\n\nconst BaseButton = <C extends ElementType = \"button\">({\n children,\n size = \"medium\",\n variant = \"primary\",\n contentWidth = false,\n loading = false,\n icon,\n iconPosition = \"start\",\n componentName,\n inverted = false,\n component = \"button\" as C,\n ...props\n}: Props<C>) => {\n const Component: ElementType = component;\n const { disabled = false, className = \"\", ...otherProps } = props;\n const isDisabled = disabled \|\| loading;\n const iconButton = componentName === \"icon-button\";\n const link = component !== \"button\";\n\n const {\n base,\n icon: iconClass,\n contentWrapper,\n loader,\n } = generateClasses({\n size,\n contentWidth,\n disabled: isDisabled,\n iconButton,\n iconPosition,\n variant,\n loading,\n link,\n inverted,\n });\n\n const actualContent = (\n <>\n {icon && <Icon variant={icon} className={iconClass()} />}\n {iconButton ? undefined : children}\n </>\n );\n\n let content: ReactNode = actualContent;\n\n if (loading) {\n content = (\n <>\n <span className={contentWrapper()}>{actualContent}</span>\n <span className={loader()}>\n <Spinner edgeLength={iconButton ? \"1.25rem\" : \"1rem\"} />\n </span>\n </>\n );\n }\n\n let ariaLabel = undefined;\n if (iconButton) {\n if (children) {\n ariaLabel = children;\n } else {\n ariaLabel = \"Icon\";\n }\n }\n\n return (\n <Component\n className={twMerge(base(), className)}\n disabled={component === \"button\" ? isDisabled : undefined}\n {...otherProps}\n aria-label={ariaLabel}\n data-bpds={componentName}\n data-bpds-icon={icon}\n data-bpds-size={size}\n data-bpds-content-width={componentName !== \"icon-button\" ? contentWidth : undefined}\n data-bpds-inverted={inverted}\n data-bpds-variant={variant}\n >\n {content}\n </Component>\n );\n};\n\nexport default BaseButton;\n","\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport React, { ChangeEvent, FC, FocusEvent, Ref, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: \"preflight typography-input-text flex gap-2 items-start py-3 text-clr-on-bg-high relative\",\n slots: {\n input: [\n \"appearance-none relative w-6 h-6 rounded-sm border text-current cursor-pointer shrink-0\",\n \"focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2\",\n ],\n icon: \"w-[1.125rem] h-[1.125rem] absolute m-0.75 fill-current\",\n },\n variants: {\n disabled: {\n true: {\n base: \"text-clr-disabled border-clr-disabled\",\n input: \"bg-clr-bg-disabled\",\n icon: \"fill-clr-disabled\",\n },\n false: {\n base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n },\n },\n error: {\n true: {\n input: \"border-clr-fg-error bg-clr-bg-error [&:checked::after]:bg-clr-fg-error\",\n icon: \"fill-clr-fg-error\",\n },\n },\n },\n});\n\ninterface BaseProps {\n label: string;\n /** The name of the checkbox. Will be submitted with the form. /\n name: string;\n /* Callback function that is called when the checkbox loses focus. /\n onBlur?: () => void;\n /* The id of the checkbox. /\n id?: string;\n /* Value that will be submitted when the form is submitted. /\n value?: string;\n /* If set to `true`, the checkbox will be marked as required. /\n required?: boolean;\n /* If set to `true`, the checkbox will be disabled. /\n disabled?: boolean;\n /* If set to `true`, the checkbox will be marked as erroneous. /\n error?: boolean;\n errorText?: string;\n helperText?: string;\n /* A reference to the root element of the checkbox. Helpful for intergrating with 3rd party form libraries like react-hook-form. /\n rootRef?: Ref<HTMLInputElement>;\n /* <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> /\n describedBy?: string;\n}\n\ninterface ControlledInputProps extends BaseProps {\n /* Controls, whether the checkbox is checked or not. Should be used in conjunction with `onChange`. /\n checked: boolean;\n /* Initial value of the checkbox. Should be used for uncontrolled variant of the component. /\n defaultChecked?: never;\n /* Callback function that is called when the checkbox state changes. `checked` should be adjusted appropriately. /\n onChange: (value: boolean) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n checked?: never;\n defaultChecked: boolean;\n onChange?: (value: boolean) => void;\n}\nexport interface AllyIds {\n errorTextId: string;\n helperTextId: string;\n}\nexport type Props = ControlledInputProps \| UncontrolledInputProps;\n\nconst CheckboxItem: FC<Props & AllyIds> = ({\n label,\n name,\n onChange,\n onBlur,\n id,\n value = label,\n required,\n disabled,\n error,\n errorText,\n helperText,\n helperTextId,\n errorTextId,\n rootRef,\n describedBy,\n ...props\n}) => {\n const { base, input, icon } = generateClasses({ disabled, error });\n\n const isUncontrolled = \"defaultChecked\" in props;\n const controlledChecked = props.checked;\n\n const [internalChecked, setInternalChecked] = useState(() => (isUncontrolled ? props.defaultChecked : controlledChecked));\n\n const checked = isUncontrolled ? internalChecked : controlledChecked;\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n if (describedBy) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n }\n\n const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {\n const checked = ev.currentTarget.checked;\n\n if (isUncontrolled) {\n setInternalChecked(checked);\n }\n onChange?.(checked);\n };\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n if (!onBlur) return;\n // prevent blur triggers if clicking in label instead input\n if (event.relatedTarget?.contains(event.currentTarget)) {\n event.preventDefault();\n return;\n }\n onBlur();\n };\n return (\n // Label causes inconsistent blur event when interacts with input.\n // -1 tabIndex makes 'relatedTarget' not being always null and helps detecting correct blur event\n <label className={base()} tabIndex={-1}>\n <input\n className={input()}\n type=\"checkbox\"\n checked={checked}\n onChange={handleChange}\n onBlur={handleBlur}\n value={value}\n id={id}\n name={name}\n disabled={disabled}\n ref={rootRef}\n required={required}\n aria-invalid={error ? \"true\" : undefined}\n aria-describedby={ariaDescribedBy}\n />\n {label}\n {checked && <Icon variant=\"check-bold\" className={icon()} />}\n </label>\n );\n};\n\nexport default CheckboxItem;\n","import React, { FC } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: \"preflight typography-input-helper-text w-full inline-block\",\n variants: {\n type: {\n description: \"text-clr-on-bg-mid\",\n error: \"text-clr-fg-error\",\n },\n },\n});\n\nexport interface Props {\n id: string;\n children: string;\n type?: \"description\" \| \"error\";\n}\n\nconst InputHelperText: FC<Props> = ({ id, children, type = \"description\" }) => {\n const className = generateClasses({ type });\n return (\n <p id={id} className={className}>\n {children}\n </p>\n );\n};\n\nexport default InputHelperText;\n","\"use client\";\n\nimport React, { FC } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperText from \"./InputHelperText\";\n\nconst generateClasses = tv({\n base: \"preflight flex flex-col gap-1 w-full\",\n});\n\nexport interface Props {\n helperText: string;\n helperTextId: string;\n error: boolean;\n errorText: string;\n errorTextId: string;\n className?: string;\n}\n\nconst InputHelperTextSection: FC<Props> = ({ helperText, helperTextId, error = false, errorText, errorTextId, className = \"\" }) => {\n return (\n <div className={`${generateClasses()} ${className}`}>\n {helperText && <InputHelperText id={helperTextId}>{helperText}</InputHelperText>}\n {error && errorText && (\n <InputHelperText id={errorTextId} type=\"error\">\n {errorText}\n </InputHelperText>\n )}\n </div>\n );\n};\n\nexport default InputHelperTextSection;\n","// floating label inspired by https://flowbite.com/docs/forms/floating-label/\nimport React, { FC } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport as Label from \"@radix-ui/react-label\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nconst generateClasses = tv({\n slots: {\n root: [\n \"preflight relative text-clr-primary fill-clr-primary pt-5\",\n \"[&_.input]:placeholder:typography-caption [&_.input]:text-ellipsis\",\n \"[&_.input]:placeholder:text-clr-on-bg-mid [&_.input]:placeholder:truncate\", //input's placeholder\n \"[&_.input]:caret-clr-primary\", // caret\n \"group\", // needed for autofill selector on `inputLabel`\n ],\n inputWrapper: \"relative border border-clr-primary rounded-sm group/input-wrapper\",\n inputLabel: [\n \"absolute start-0 duration-300 px-1.5 mx-1.5\",\n \"top-[2.0625rem]\", // 20px padding + 13px ((48px - 22px) / 2)\n \"inline-block truncate max-w-[calc(100%-0.75rem)]\",\n \"pointer-events-none\", // allows dropdown menu in select to open instantly on first click\n // Caution: When changing these, make sure to also adjust the corresponding Chrome fix styles (search for \"[data-fix-chrome-page-load-autofill]\").\n \"group-has-[input:autofill]:-translate-y-8\",\n \"group-has-[input:autofill]:typography-input-label\",\n ],\n helperTextSection: \"\",\n stateIndicator: [\n \"hidden absolute bottom-0 start-0 w-full bg-clr-primary\",\n \"group-focus-within/input-wrapper:h-0.75 group-focus-within/input-wrapper:block\",\n ],\n },\n variants: {\n labelFloated: {\n true: {\n inputLabel: \"typography-input-label -translate-y-8\",\n },\n false: {\n inputLabel: \"typography-input-text\",\n },\n },\n disabled: {\n true: {\n root: \"text-clr-disabled fill-clr-disabled pointer-events-none [&_.input]:placeholder:text-clr-disabled\",\n inputWrapper: \"border-clr-disabled\",\n inputLabel: \"text-clr-disabled\",\n },\n false: {\n stateIndicator: [\n \"group-hover/input-wrapper:h-0.25 group-hover/input-wrapper:block\",\n \"group-hover:group-focus-within/input-wrapper:h-0.75 group-hover:group-focus-within/input-wrapper:block\",\n ],\n },\n },\n error: {\n true: {\n root: \"text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error\",\n inputWrapper: \"border-clr-fg-error\",\n inputLabel: \"text-clr-fg-error\",\n stateIndicator: \"bg-clr-fg-error\",\n },\n },\n componentName: {\n select: {\n inputWrapper: \"has-[[data-radix-popper-side=top]]:rounded-t-none has-[[data-radix-popper-side=bottom]]:rounded-b-none\",\n },\n [\"password-field\"]: \"\",\n [\"text-field\"]: \"\",\n [\"search-field\"]: \"\",\n [\"email-field\"]: \"\",\n textarea: \"\",\n },\n helperTextSectionVisible: {\n true: {\n helperTextSection: \"mt-1 px-3\",\n },\n false: {},\n },\n },\n compoundVariants: [\n {\n labelFloated: false,\n componentName: [\"select\", \"search-field\", \"password-field\"],\n class: {\n inputLabel: \"pe-7\", // Do not cover chevron/search icons\n },\n },\n ],\n});\n\nexport interface Props {\n children: React.ReactNode;\n id: string;\n labelFloated: boolean;\n disabled: boolean;\n required: boolean;\n componentName: \"select\" \| \"password-field\" \| \"text-field\" \| \"search-field\" \| \"email-field\" \| \"textarea\";\n label?: string;\n helperText: string;\n helperTextId: string;\n error: boolean;\n errorText: string;\n errorTextId: string;\n labelClassName?: string;\n}\n\nconst InputWrapper: FC<Props> = ({\n children,\n id,\n label,\n labelFloated,\n disabled,\n required,\n componentName,\n helperText,\n helperTextId,\n error,\n errorText,\n errorTextId,\n labelClassName = \"\",\n}) => {\n const helperTextSectionVisible = Boolean(helperText \|\| (error && errorText));\n const {\n root,\n inputWrapper,\n inputLabel,\n helperTextSection: helperTextSectionClass,\n stateIndicator,\n } = generateClasses({\n labelFloated,\n disabled,\n error,\n componentName,\n helperTextSectionVisible,\n });\n return (\n <div className={root()} data-bpds={componentName}>\n <div className={inputWrapper()} aria-disabled={disabled}>\n {children}\n <div className={stateIndicator()}></div>\n </div>\n <Label.Root htmlFor={id} className={`${inputLabel()} ${labelClassName}`}>\n {label}\n {required && <span aria-hidden=\"true\"></span>}\n </Label.Root>\n <InputHelperTextSection\n className={helperTextSectionClass()}\n helperText={helperText}\n helperTextId={helperTextId}\n error={error}\n errorText={errorText}\n errorTextId={errorTextId}\n />\n </div>\n );\n};\n\nexport default InputWrapper;\n","\"use client\";\n\nimport type { ControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { FC, useId } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nexport type { ControlGroupProps as Props } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n // min-w-0 is required because of the weird fieldset behavior\n // fieldset will be placed in some fixed width container or flexbox\n // we need to make sure that the helper texts are truncated with ellipsis and not extending the fieldset\n // https://stackoverflow.com/questions/7434756/overflow-and-text-overflow-within-fieldsets\n base: \"preflight min-w-0\",\n slots: {\n label: \"typography-input-label text-clr-on-bg-mid truncate inline-block w-full\",\n },\n variants: {\n horizontalPadding: {\n true: {\n base: \"px-3\",\n },\n },\n },\n});\n\nconst SelectionControlGroup: FC<ControlGroupProps> = ({\n label,\n children,\n error = false,\n errorText = \"\",\n disabled = false,\n helperText = \"\",\n required = false,\n divider = false,\n horizontalPadding = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n componentName,\n}) => {\n const { base, label: labelClasses } = generateClasses({ horizontalPadding });\n const helperTextId = useId();\n const errorTextId = useId();\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n return (\n <fieldset\n className={base()}\n disabled={disabled}\n data-bpds={componentName}\n data-bpds-has-divider={divider ? \"true\" : \"false\"}\n data-bpds-has-horizontal-padding={horizontalPadding ? \"true\" : \"false\"}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {label && (\n <legend className={labelClasses()}>\n {label}\n {required && <span></span>}\n </legend>\n )}\n {children}\n <InputHelperTextSection\n helperText={helperText}\n error={error}\n errorText={errorText}\n helperTextId={helperTextId}\n errorTextId={errorTextId}\n />\n </fieldset>\n );\n};\n\nexport default SelectionControlGroup;\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAkB,EAAG;CACzB,MAAM,CACJ,8HACA,sEACF;CACA,OAAO;EACL,MAAM;EACN,QAAQ;EACR,gBAAgB;CAClB;CACA,UAAU;EACR,SAAS;GAAE,SAAS,CAAC;GAAG,WAAW,CAAC;GAAG,UAAU,CAAC;EAAE;EACpD,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GAAE,MAAM;GAAI,OAAO;EAAG;EACpC,MAAM;GAAE,OAAO;GAAI,QAAQ;GAAI,OAAO;EAAG;EACzC,MAAM;GAAE,MAAM;GAAI,OAAO;EAAG;EAC5B,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GACZ,OAAO;GACP,KAAK;EACP;EACA,SAAS;GACP,MAAM,EACJ,gBAAgB,YAClB;GACA,OAAO;EACT;EACA,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iDACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iEACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,cAAc;GACd,YAAY;GACZ,OAAO;EACT;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;EACT;EACA;GACE,YAAY;GACZ,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;EACT;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,EACL,MAAM,UACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS;GACT,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;CACF;AACF,CAAC,GAkBK,KAAgD,EACpD,aACA,UAAO,UACP,aAAU,WACV,kBAAe,IACf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"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../src/BaseButton.tsx","../src/CheckboxBase.tsx","../src/InputHelperText.tsx","../src/InputHelperTextSection.tsx","../src/InputWrapper.tsx","../src/SelectionControlGroup.tsx"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Spinner from \"@bonprix-ds/react-spinner\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: [\n \"preflight rounded typography-button relative flex items-center justify-center gap-2 border border-transparent group/button\",\n \"focus-visible:outline outline-1 outline-offset-1 outline-clr-primary\",\n ],\n slots: {\n icon: \"\",\n loader: \"absolute\",\n contentWrapper: \"flex items-center justify-center gap-2\",\n },\n variants: {\n variant: { primary: {}, secondary: {}, tertiary: {} },\n disabled: { true: \"\", false: \"\" },\n contentWidth: { true: \"\", false: \"\" },\n size: { small: \"\", medium: \"\", large: \"\" },\n link: { true: \"\", false: \"\" },\n inverted: { true: \"\", false: \"\" },\n iconPosition: {\n start: \"\",\n end: \"flex-row-reverse\",\n },\n loading: {\n true: {\n contentWrapper: \"invisible\",\n },\n false: \"\",\n },\n iconButton: {\n true: \"\",\n false: \"py-[0.4375rem]\",\n },\n },\n compoundVariants: [\n {\n variant: \"primary\",\n inverted: false,\n class: {\n base: \"bg-clr-primary text-clr-on-primary-high\",\n icon: \"fill-clr-on-primary-high\",\n },\n },\n {\n variant: \"primary\",\n inverted: true,\n class: {\n base: \"bg-clr-primary-inverse text-clr-on-primary-high-inverse\",\n icon: \"fill-clr-on-primary-high-inverse\",\n },\n },\n {\n variant: \"primary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled bg-clr-bg-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"primary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:bg-clr-on-bg-low active:bg-clr-on-bg-low\",\n },\n },\n {\n variant: \"primary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse bg-clr-bg-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"primary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:bg-clr-on-bg-low-inverse active:bg-clr-on-bg-low-inverse\",\n },\n },\n {\n variant: \"secondary\",\n inverted: false,\n class: {\n base: \"text-clr-primary border-clr-primary\",\n icon: \"fill-clr-primary\",\n },\n },\n {\n variant: \"secondary\",\n inverted: true,\n class: {\n base: \"text-clr-primary-inverse border-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n },\n },\n {\n variant: \"secondary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled border-clr-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"secondary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:text-clr-on-bg-low hover:border-clr-on-bg-low active:text-clr-on-bg-low active:border-clr-on-bg-low\",\n icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n },\n },\n {\n variant: \"secondary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse border-clr-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"secondary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:text-clr-on-bg-low-inverse hover:border-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse active:border-clr-on-bg-low-inverse\",\n icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n inverted: false,\n class: {\n base: \"text-clr-primary\",\n icon: \"fill-clr-primary\",\n },\n },\n {\n variant: \"tertiary\",\n inverted: true,\n class: {\n base: \"text-clr-primary-inverse\",\n icon: \"fill-clr-primary-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: true,\n inverted: false,\n class: {\n base: \"text-clr-disabled\",\n icon: \"fill-clr-disabled\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: false,\n inverted: false,\n class: {\n base: \"hover:text-clr-on-bg-low active:text-clr-on-bg-low\",\n icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: true,\n inverted: true,\n class: {\n base: \"text-clr-disabled-inverse\",\n icon: \"fill-clr-disabled-inverse\",\n },\n },\n {\n variant: \"tertiary\",\n disabled: false,\n inverted: true,\n class: {\n base: \"hover:text-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse\",\n icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n },\n },\n {\n contentWidth: false,\n iconButton: false,\n class: \"w-full\",\n },\n {\n contentWidth: true,\n link: true,\n class: \"w-fit\",\n },\n {\n iconButton: false,\n variant: [\"primary\", \"secondary\"],\n class: \"px-4\",\n },\n // Regular Button sizes\n {\n iconButton: false,\n size: \"medium\",\n class: {\n icon: \"w-4 h-4\",\n },\n },\n {\n iconButton: false,\n size: \"large\",\n class: {\n base: \"py-[0.9375rem]\",\n icon: \"w-4 h-4\",\n },\n },\n // Icon Button sizes\n {\n iconButton: true,\n size: \"small\",\n class: {\n base: \"p-[0.1875rem]\",\n icon: \"w-4 h-4\",\n },\n },\n {\n iconButton: true,\n size: \"medium\",\n variant: [\"primary\", \"secondary\"],\n class: {\n base: \"p-[0.4375rem]\",\n icon: \"w-4 h-4\", // we currently predefine the fill color in the icon, so we cannot inherit the fill from base and instead have to set it directly\n },\n },\n {\n iconButton: true,\n size: \"medium\",\n variant: \"tertiary\",\n class: {\n base: \"p-[0.1875rem]\",\n icon: \"w-6 h-6\",\n },\n },\n {\n iconButton: true,\n size: \"large\",\n class: {\n base: \"p-[0.6875rem]\",\n icon: \"w-6 h-6\",\n },\n },\n ],\n});\n\ninterface BaseProps {\n children: string;\n size?: ButtonSize;\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n contentWidth?: boolean;\n loading?: boolean;\n icon?: IconType;\n iconPosition?: \"start\" \| \"end\";\n componentName?: \"button\" \| \"icon-button\" \| \"badge-icon-button\";\n inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps \| \"component\">;\n\nconst BaseButton = <C extends ElementType = \"button\">({\n children,\n size = \"medium\",\n variant = \"primary\",\n contentWidth = false,\n loading = false,\n icon,\n iconPosition = \"start\",\n componentName,\n inverted = false,\n component = \"button\" as C,\n ...props\n}: Props<C>) => {\n const Component: ElementType = component;\n const { disabled = false, className = \"\", ...otherProps } = props;\n const isDisabled = disabled \|\| loading;\n const iconButton = componentName === \"icon-button\";\n const link = component !== \"button\";\n\n const {\n base,\n icon: iconClass,\n contentWrapper,\n loader,\n } = generateClasses({\n size,\n contentWidth,\n disabled: isDisabled,\n iconButton,\n iconPosition,\n variant,\n loading,\n link,\n inverted,\n });\n\n const actualContent = (\n <>\n {icon && <Icon variant={icon} className={iconClass()} />}\n {iconButton ? undefined : children}\n </>\n );\n\n let content: ReactNode = actualContent;\n\n if (loading) {\n content = (\n <>\n <span className={contentWrapper()}>{actualContent}</span>\n <span className={loader()}>\n <Spinner edgeLength={iconButton ? \"1.25rem\" : \"1rem\"} />\n </span>\n </>\n );\n }\n\n let ariaLabel = undefined;\n if (iconButton) {\n if (children) {\n ariaLabel = children;\n } else {\n ariaLabel = \"Icon\";\n }\n }\n\n return (\n <Component\n className={twMerge(base(), className)}\n disabled={component === \"button\" ? isDisabled : undefined}\n {...otherProps}\n aria-label={ariaLabel}\n data-bpds={componentName}\n data-bpds-icon={icon}\n data-bpds-size={size}\n data-bpds-content-width={componentName !== \"icon-button\" ? contentWidth : undefined}\n data-bpds-inverted={inverted}\n data-bpds-variant={variant}\n >\n {content}\n </Component>\n );\n};\n\nexport default BaseButton;\n","\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport React, { ChangeEvent, FocusEvent, Ref, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: \"preflight typography-input-text flex gap-2 items-start py-3 text-clr-on-bg-high relative\",\n slots: {\n input: [\n \"appearance-none relative w-6 h-6 rounded-sm border text-current cursor-pointer shrink-0\",\n \"focus-visible:outline focus-visible:outline-current focus-visible:outline-1 focus-visible:outline-offset-2\",\n ],\n icon: \"w-[1.125rem] h-[1.125rem] absolute m-0.75 fill-current\",\n },\n variants: {\n disabled: {\n true: {\n base: \"text-clr-disabled border-clr-disabled\",\n input: \"bg-clr-bg-disabled\",\n icon: \"fill-clr-disabled\",\n },\n false: {\n base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n },\n },\n error: {\n true: {\n input: \"border-clr-fg-error bg-clr-bg-error [&:checked::after]:bg-clr-fg-error\",\n icon: \"fill-clr-fg-error\",\n },\n },\n },\n});\n\ninterface BaseProps {\n label: string;\n /** The name of the checkbox. Will be submitted with the form. /\n name: string;\n /* Callback function that is called when the checkbox loses focus. /\n onBlur?: () => void;\n /* The id of the checkbox. /\n id?: string;\n /* Value that will be submitted when the form is submitted. /\n value?: string;\n /* If set to `true`, the checkbox will be marked as required. /\n required?: boolean;\n /* If set to `true`, the checkbox will be disabled. /\n disabled?: boolean;\n /* If set to `true`, the checkbox will be marked as erroneous. /\n error?: boolean;\n errorText?: string;\n helperText?: string;\n /* A reference to the root element of the checkbox. Helpful for intergrating with 3rd party form libraries like react-hook-form. /\n rootRef?: Ref<HTMLInputElement>;\n /* <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> /\n describedBy?: string;\n}\n\ninterface ControlledInputProps extends BaseProps {\n /* Controls, whether the checkbox is checked or not. Should be used in conjunction with `onChange`. /\n checked: boolean;\n /* Initial value of the checkbox. Should be used for uncontrolled variant of the component. /\n defaultChecked?: never;\n /* Callback function that is called when the checkbox state changes. `checked` should be adjusted appropriately. /\n onChange: (value: boolean) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n checked?: never;\n defaultChecked: boolean;\n onChange?: (value: boolean) => void;\n}\nexport interface AllyIds {\n errorTextId: string;\n helperTextId: string;\n}\nexport type Props = ControlledInputProps \| UncontrolledInputProps;\n\nconst CheckboxItem = ({\n label,\n name,\n onChange,\n onBlur,\n id,\n value = label,\n required,\n disabled,\n error,\n errorText,\n helperText,\n helperTextId,\n errorTextId,\n rootRef,\n describedBy,\n ...props\n}: Props & AllyIds) => {\n const { base, input, icon } = generateClasses({ disabled, error });\n\n const isUncontrolled = \"defaultChecked\" in props;\n const controlledChecked = props.checked;\n\n const [internalChecked, setInternalChecked] = useState(() => (isUncontrolled ? props.defaultChecked : controlledChecked));\n\n const checked = isUncontrolled ? internalChecked : controlledChecked;\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n if (describedBy) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n }\n\n const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {\n const checked = ev.currentTarget.checked;\n\n if (isUncontrolled) {\n setInternalChecked(checked);\n }\n onChange?.(checked);\n };\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n if (!onBlur) return;\n // prevent blur triggers if clicking in label instead input\n if (event.relatedTarget?.contains(event.currentTarget)) {\n event.preventDefault();\n return;\n }\n onBlur();\n };\n return (\n // Label causes inconsistent blur event when interacts with input.\n // -1 tabIndex makes 'relatedTarget' not being always null and helps detecting correct blur event\n <label className={base()} tabIndex={-1}>\n <input\n className={input()}\n type=\"checkbox\"\n checked={checked}\n onChange={handleChange}\n onBlur={handleBlur}\n value={value}\n id={id}\n name={name}\n disabled={disabled}\n ref={rootRef}\n required={required}\n aria-invalid={error ? \"true\" : undefined}\n aria-describedby={ariaDescribedBy}\n />\n {label}\n {checked && <Icon variant=\"check-bold\" className={icon()} />}\n </label>\n );\n};\n\nexport default CheckboxItem;\n","import React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n base: \"preflight typography-input-helper-text w-full inline-block\",\n variants: {\n type: {\n description: \"text-clr-on-bg-mid\",\n error: \"text-clr-fg-error\",\n },\n },\n});\n\nexport interface Props {\n id: string;\n children: string;\n type?: \"description\" \| \"error\";\n}\n\nconst InputHelperText = ({ id, children, type = \"description\" }: Props) => {\n const className = generateClasses({ type });\n return (\n <p id={id} className={className}>\n {children}\n </p>\n );\n};\n\nexport default InputHelperText;\n","\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperText from \"./InputHelperText\";\n\nconst generateClasses = tv({\n base: \"preflight flex flex-col gap-1 w-full\",\n});\n\nexport interface Props {\n helperText: string;\n helperTextId: string;\n error: boolean;\n errorText: string;\n errorTextId: string;\n className?: string;\n}\n\nconst InputHelperTextSection = ({ helperText, helperTextId, error = false, errorText, errorTextId, className = \"\" }: Props) => {\n return (\n <div className={`${generateClasses()} ${className}`}>\n {helperText && <InputHelperText id={helperTextId}>{helperText}</InputHelperText>}\n {error && errorText && (\n <InputHelperText id={errorTextId} type=\"error\">\n {errorText}\n </InputHelperText>\n )}\n </div>\n );\n};\n\nexport default InputHelperTextSection;\n","// floating label inspired by https://flowbite.com/docs/forms/floating-label/\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport as Label from \"@radix-ui/react-label\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nconst generateClasses = tv({\n slots: {\n root: [\n \"preflight relative text-clr-primary fill-clr-primary pt-5\",\n \"[&_.input]:placeholder:typography-caption [&_.input]:text-ellipsis\",\n \"[&_.input]:placeholder:text-clr-on-bg-mid [&_.input]:placeholder:truncate\", //input's placeholder\n \"[&_.input]:caret-clr-primary\", // caret\n \"group\", // needed for autofill selector on `inputLabel`\n ],\n inputWrapper: \"relative border border-clr-primary rounded-sm group/input-wrapper\",\n inputLabel: [\n \"absolute start-0 duration-300 px-1.5 mx-1.5\",\n \"top-[2.0625rem]\", // 20px padding + 13px ((48px - 22px) / 2)\n \"inline-block truncate max-w-[calc(100%-0.75rem)]\",\n \"pointer-events-none\", // allows dropdown menu in select to open instantly on first click\n // Caution: When changing these, make sure to also adjust the corresponding Chrome fix styles (search for \"[data-fix-chrome-page-load-autofill]\").\n \"group-has-[input:autofill]:-translate-y-8\",\n \"group-has-[input:autofill]:typography-input-label\",\n ],\n helperTextSection: \"\",\n stateIndicator: [\n \"hidden absolute bottom-0 start-0 w-full bg-clr-primary\",\n \"group-focus-within/input-wrapper:h-0.75 group-focus-within/input-wrapper:block\",\n ],\n },\n variants: {\n labelFloated: {\n true: {\n inputLabel: \"typography-input-label -translate-y-8\",\n },\n false: {\n inputLabel: \"typography-input-text\",\n },\n },\n disabled: {\n true: {\n root: \"text-clr-disabled fill-clr-disabled pointer-events-none [&_.input]:placeholder:text-clr-disabled\",\n inputWrapper: \"border-clr-disabled\",\n inputLabel: \"text-clr-disabled\",\n },\n false: {\n stateIndicator: [\n \"group-hover/input-wrapper:h-0.25 group-hover/input-wrapper:block\",\n \"group-hover:group-focus-within/input-wrapper:h-0.75 group-hover:group-focus-within/input-wrapper:block\",\n ],\n },\n },\n error: {\n true: {\n root: \"text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error\",\n inputWrapper: \"border-clr-fg-error\",\n inputLabel: \"text-clr-fg-error\",\n stateIndicator: \"bg-clr-fg-error\",\n },\n },\n componentName: {\n select: {\n inputWrapper: \"has-[[data-radix-popper-side=top]]:rounded-t-none has-[[data-radix-popper-side=bottom]]:rounded-b-none\",\n },\n [\"password-field\"]: \"\",\n [\"text-field\"]: \"\",\n [\"search-field\"]: \"\",\n [\"email-field\"]: \"\",\n textarea: \"\",\n },\n helperTextSectionVisible: {\n true: {\n helperTextSection: \"mt-1 px-3\",\n },\n false: {},\n },\n },\n compoundVariants: [\n {\n labelFloated: false,\n componentName: [\"select\", \"search-field\", \"password-field\"],\n class: {\n inputLabel: \"pe-7\", // Do not cover chevron/search icons\n },\n },\n ],\n});\n\nexport interface Props {\n children: React.ReactNode;\n id: string;\n labelFloated: boolean;\n disabled: boolean;\n required: boolean;\n componentName: \"select\" \| \"password-field\" \| \"text-field\" \| \"search-field\" \| \"email-field\" \| \"textarea\";\n label?: string;\n helperText: string;\n helperTextId: string;\n error: boolean;\n errorText: string;\n errorTextId: string;\n labelClassName?: string;\n}\n\nconst InputWrapper = ({\n children,\n id,\n label,\n labelFloated,\n disabled,\n required,\n componentName,\n helperText,\n helperTextId,\n error,\n errorText,\n errorTextId,\n labelClassName = \"\",\n}: Props) => {\n const helperTextSectionVisible = Boolean(helperText \|\| (error && errorText));\n const {\n root,\n inputWrapper,\n inputLabel,\n helperTextSection: helperTextSectionClass,\n stateIndicator,\n } = generateClasses({\n labelFloated,\n disabled,\n error,\n componentName,\n helperTextSectionVisible,\n });\n return (\n <div className={root()} data-bpds={componentName}>\n <div className={inputWrapper()} aria-disabled={disabled}>\n {children}\n <div className={stateIndicator()}></div>\n </div>\n <Label.Root htmlFor={id} className={`${inputLabel()} ${labelClassName}`}>\n {label}\n {required && <span aria-hidden=\"true\"></span>}\n </Label.Root>\n <InputHelperTextSection\n className={helperTextSectionClass()}\n helperText={helperText}\n helperTextId={helperTextId}\n error={error}\n errorText={errorText}\n errorTextId={errorTextId}\n />\n </div>\n );\n};\n\nexport default InputWrapper;\n","\"use client\";\n\nimport type { ControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { useId } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nexport type { ControlGroupProps as Props } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n // min-w-0 is required because of the weird fieldset behavior\n // fieldset will be placed in some fixed width container or flexbox\n // we need to make sure that the helper texts are truncated with ellipsis and not extending the fieldset\n // https://stackoverflow.com/questions/7434756/overflow-and-text-overflow-within-fieldsets\n base: \"preflight min-w-0\",\n slots: {\n label: \"typography-input-label text-clr-on-bg-mid truncate inline-block w-full\",\n },\n variants: {\n horizontalPadding: {\n true: {\n base: \"px-3\",\n },\n },\n },\n});\n\nconst SelectionControlGroup = ({\n label,\n children,\n error = false,\n errorText = \"\",\n disabled = false,\n helperText = \"\",\n required = false,\n divider = false,\n horizontalPadding = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n componentName,\n}: ControlGroupProps) => {\n const { base, label: labelClasses } = generateClasses({ horizontalPadding });\n const helperTextId = useId();\n const errorTextId = useId();\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n return (\n <fieldset\n className={base()}\n disabled={disabled}\n data-bpds={componentName}\n data-bpds-has-divider={divider ? \"true\" : \"false\"}\n data-bpds-has-horizontal-padding={horizontalPadding ? \"true\" : \"false\"}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error ? \"true\" : undefined}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n {label && (\n <legend className={labelClasses()}>\n {label}\n {required && <span></span>}\n </legend>\n )}\n {children}\n <InputHelperTextSection\n helperText={helperText}\n error={error}\n errorText={errorText}\n helperTextId={helperTextId}\n errorTextId={errorTextId}\n />\n </fieldset>\n );\n};\n\nexport default SelectionControlGroup;\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAkB,EAAG;CACzB,MAAM,CACJ,8HACA,sEACF;CACA,OAAO;EACL,MAAM;EACN,QAAQ;EACR,gBAAgB;CAClB;CACA,UAAU;EACR,SAAS;GAAE,SAAS,CAAC;GAAG,WAAW,CAAC;GAAG,UAAU,CAAC;EAAE;EACpD,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GAAE,MAAM;GAAI,OAAO;EAAG;EACpC,MAAM;GAAE,OAAO;GAAI,QAAQ;GAAI,OAAO;EAAG;EACzC,MAAM;GAAE,MAAM;GAAI,OAAO;EAAG;EAC5B,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GACZ,OAAO;GACP,KAAK;EACP;EACA,SAAS;GACP,MAAM,EACJ,gBAAgB,YAClB;GACA,OAAO;EACT;EACA,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iDACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iEACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,cAAc;GACd,YAAY;GACZ,OAAO;EACT;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;EACT;EACA;GACE,YAAY;GACZ,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;EACT;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,EACL,MAAM,UACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS;GACT,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;CACF;AACF,CAAC,GAkBK,KAAgD,EACpD,aACA,UAAO,UACP,aAAU,WACV,kBAAe,IACf,aAAU,IACV,SACA,kBAAe,SACf,kBACA,cAAW,IACX,eAAY,UACZ,GAAG,QACW;CACd,IAAM,IAAyB,GACzB,EAAE,cAAW,IAAO,eAAY,IAAI,GAAG,MAAe,GACtD,IAAa,KAAY,GACzB,IAAa,MAAkB,eAG/B,EACJ,SACA,MAAM,GACN,mBACA,cACE,EAAgB;EAClB;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACA,MAfW,MAAc;EAgBzB;CACF,CAAC,GAEK,IACJ,kBAAA,GAAA,EAAA,UAAA,CACG,KAAQ,kBAAC,GAAD;EAAM,SAAS;EAAM,WAAW,EAAU;CAAI,CAAA,GACtD,IAAa,KAAA,IAAY,CAC1B,EAAA,CAAA,GAGA,IAAqB;CAEzB,AAAI,MACF,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EAAM,WAAW,EAAe;EAAI,UAAA;CAAoB,CAAA,GACxD,kBAAC,QAAD;EAAM,WAAW,EAAO;EACtB,UAAA,kBAAC,GAAD,EAAS,YAAY,IAAa,YAAY,OAAS,CAAA;CACnD,CAAA,CACN,EAAA,CAAA;CAIN,IAAI;CASJ,OARI,MACF,AAGE,IAHE,KAGU,SAKd,kBAAC,GAAD;EACE,WAAW,EAAQ,EAAK,GAAG,CAAS;EACpC,UAAU,MAAc,WAAW,IAAa,KAAA;EAChD,GAAI;EACJ,cAAY;EACZ,aAAW;EACX,kBAAgB;EAChB,kBAAgB;EAChB,2BAAyB,MAAkB,gBAA+B,KAAA,IAAf;EAC3D,sBAAoB;EACpB,qBAAmB;EAElB,UAAA;CACQ,CAAA;AAEf,GClWM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO;EACL,OAAO,CACL,2FACA,4GACF;EACA,MAAM;CACR;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,OAAO,EACL,MAAM,gDACR;EACF;EACA,OAAO,EACL,MAAM;GACJ,OAAO;GACP,MAAM;EACR,EACF;CACF;AACF,CAAC,GA8CK,KAAgB,EACpB,UACA,SACA,aACA,WACA,OACA,WAAQ,GACR,aACA,aACA,UACA,cACA,eACA,iBACA,gBACA,YACA,gBACA,GAAG,QACkB;CACrB,IAAM,EAAE,SAAM,UAAO,YAAS,EAAgB;EAAE;EAAU;CAAM,CAAC,GAE3D,IAAiB,oBAAoB,GACrC,IAAoB,EAAM,SAE1B,CAAC,GAAiB,KAAsB,QAAgB,IAAiB,EAAM,iBAAiB,CAAkB,GAElH,IAAU,IAAiB,IAAkB,GAC/C;CA4BJ,OA3BI,MACF,IAAkB,IAEhB,KAAS,MACX,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAExE,MACF,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAuB1E,kBAAC,SAAD;EAAO,WAAW,EAAK;EAAG,UAAU;EAApC,UAAA;GACE,kBAAC,SAAD;IACE,WAAW,EAAM;IACjB,MAAK;IACI;IACT,WAzBgB,MAAsC;KAC1D,IAAM,IAAU,EAAG,cAAc;KAKjC,AAHI,KACF,EAAmB,CAAO,GAE5B,IAAW,CAAO;IACpB;IAmBM,SAlBc,MAAwC;KACrD,OAEL;UAAI,EAAM,eAAe,SAAS,EAAM,aAAa,GAAG;OACtD,EAAM,eAAe;OACrB;MACF;MACA,EAAO;KADP;IAEF;IAWa;IACH;IACE;IACI;IACV,KAAK;IACK;IACV,gBAAc,IAAQ,SAAS,KAAA;IAC/B,oBAAkB;GACnB,CAAA;GACA;GACA,KAAW,kBAAC,GAAD;IAAM,SAAQ;IAAa,WAAW,EAAK;GAAI,CAAA;EACtD;;AAEX,GCzJM,IAAkB,EAAG;CACzB,MAAM;CACN,UAAU,EACR,MAAM;EACJ,aAAa;EACb,OAAO;CACT,EACF;AACF,CAAC,GAQK,KAAmB,EAAE,OAAI,aAAU,UAAO,oBAA2B;CACzE,IAAM,IAAY,EAAgB,EAAE,QAAK,CAAC;CAC1C,OACE,kBAAC,KAAD;EAAO;EAAe;EACnB;CACA,CAAA;AAEP,GCnBM,IAAkB,EAAG,EACzB,MAAM,uCACR,CAAC,GAWK,KAA0B,EAAE,eAAY,iBAAc,WAAQ,IAAO,cAAW,gBAAa,eAAY,SAE3G,kBAAC,OAAD;CAAK,WAAW,GAAG,EAAgB,EAAE,GAAG;CAAxC,UAAA,CACG,KAAc,kBAAC,GAAD;EAAiB,IAAI;EAAe,UAAA;CAA4B,CAAA,GAC9E,KAAS,KACR,kBAAC,GAAD;EAAiB,IAAI;EAAa,MAAK;EACpC,UAAA;CACc,CAAA,CAEhB;ICtBH,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,cAAc;EACd,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;EACF;EACA,mBAAmB;EACnB,gBAAgB,CACd,0DACA,gFACF;CACF;CACA,UAAU;EACR,cAAc;GACZ,MAAM,EACJ,YAAY,wCACd;GACA,OAAO,EACL,YAAY,wBACd;EACF;EACA,UAAU;GACR,MAAM;IACJ,MAAM;IACN,cAAc;IACd,YAAY;GACd;GACA,OAAO,EACL,gBAAgB,CACd,oEACA,wGACF,EACF;EACF;EACA,OAAO,EACL,MAAM;GACJ,MAAM;GACN,cAAc;GACd,YAAY;GACZ,gBAAgB;EAClB,EACF;EACA,eAAe;GACb,QAAQ,EACN,cAAc,yGAChB;GACC,kBAAmB;GACnB,cAAe;GACf,gBAAiB;GACjB,eAAgB;GACjB,UAAU;EACZ;EACA,0BAA0B;GACxB,MAAM,EACJ,mBAAmB,YACrB;GACA,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,cAAc;EACd,eAAe;GAAC;GAAU;GAAgB;EAAgB;EAC1D,OAAO,EACL,YAAY,OACd;CACF,CACF;AACF,CAAC,GAkBK,KAAgB,EACpB,aACA,OACA,UACA,iBACA,aACA,aACA,kBACA,eACA,iBACA,UACA,cACA,gBACA,oBAAiB,SACN;CAEX,IAAM,EACJ,SACA,iBACA,eACA,mBAAmB,GACnB,sBACE,EAAgB;EAClB;EACA;EACA;EACA;EACA,0BAZ+B,GAAQ,KAAe,KAAS;CAajE,CAAC;CACD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK;EAAG,aAAW;EAAnC,UAAA;GACE,kBAAC,OAAD;IAAK,WAAW,EAAa;IAAG,iBAAe;IAA/C,UAAA,CACG,GACD,kBAAC,OAAD,EAAK,WAAW,EAAe,EAAQ,CAAA,CACpC;;GACL,kBAAC,EAAM,MAAP;IAAY,SAAS;IAAI,WAAW,GAAG,EAAW,EAAE,GAAG;IAAvD,UAAA,CACG,GACA,KAAY,kBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAO,CAAA,CACnC;;GACZ,kBAAC,GAAD;IACE,WAAW,EAAuB;IACtB;IACE;IACP;IACI;IACE;GACd,CAAA;EACE;;AAET,GCjJM,IAAkB,EAAG;CAKzB,MAAM;CACN,OAAO,EACL,OAAO,yEACT;CACA,UAAU,EACR,mBAAmB,EACjB,MAAM,EACJ,MAAM,OACR,EACF,EACF;AACF,CAAC,GAEK,KAAyB,EAC7B,UACA,aACA,WAAQ,IACR,eAAY,IACZ,cAAW,IACX,gBAAa,IACb,cAAW,IACX,aAAU,IACV,uBAAoB,IACpB,cAAc,GACd,mBAAmB,GACnB,uBACuB;CACvB,IAAM,EAAE,SAAM,OAAO,MAAiB,EAAgB,EAAE,qBAAkB,CAAC,GACrE,IAAe,EAAM,GACrB,IAAc,EAAM,GACtB;CAOJ,OANI,MACF,IAAkB,IAEhB,KAAS,MACX,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAG1E,kBAAC,YAAD;EACE,WAAW,EAAK;EACN;EACV,aAAW;EACX,yBAAuB,IAAU,SAAS;EAC1C,oCAAkC,IAAoB,SAAS;EAC/D,oBAAkB;EAClB,gBAAc,IAAQ,SAAS,KAAA;EAC/B,cAAY;EACZ,mBAAiB;EATnB,UAAA;GAWG,KACC,kBAAC,UAAD;IAAQ,WAAW,EAAa;IAAhC,UAAA,CACG,GACA,KAAY,kBAAC,QAAD,EAAA,UAAM,IAAO,CAAA,CACpB;;GAET;GACD,kBAAC,GAAD;IACc;IACL;IACI;IACG;IACD;GACd,CAAA;EACO;;AAEd"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/internal-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Internal react components, which really shouldn't be used directly.",
   "module": "./dist/index.js",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "tailwind-merge": "2.6.1",
     "tailwind-variants": "0.3.1",
     "@bonprix-ds/react-icon": "1.1.2",
-    "@bonprix-ds/react-spinner": "1.0.2",
+    "@bonprix-ds/react-spinner": "1.0.3",
     "@bonprix-ds/utils": "0.2.0"
   },
   "peerDependencies": {