npm - @helpwave/hightide - Versions diffs - 0.1.7-alpha.1 → 0.1.8 - Mend

@helpwave/hightide 0.1.7-alpha.1 → 0.1.8

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 (189) hide show

package/dist/components/properties/TextProperty.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/properties/TextProperty.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Textarea.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Label.tsx","../../../src/components/properties/PropertyBase.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Text } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { Textarea } from '../user-action/Textarea'\nimport { noop } from '../../util/noop'\nimport type { PropertyBaseProps } from './PropertyBase'\nimport { PropertyBase } from './PropertyBase'\n\ntype TextPropertyTranslation = {\n value: string,\n}\n\nconst defaultTextPropertyTranslation: Record<Language, TextPropertyTranslation> = {\n en: {\n value: 'Text'\n },\n de: {\n value: 'Text'\n }\n}\n\nexport type TextPropertyProps = Omit<PropertyBaseProps, 'icon' \| 'input' \| 'hasValue'> & {\n value?: string,\n onChange?: (value: string) => void,\n onEditComplete?: (value: string) => void,\n}\n\n/*\n An Input for Text properties\n /\nexport const TextProperty = ({\n overwriteTranslation,\n value,\n readOnly,\n onChange = noop,\n onRemove = noop,\n onEditComplete = noop,\n ...baseProps\n }: PropsForTranslation<TextPropertyTranslation, TextPropertyProps>) => {\n const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation)\n const hasValue = value !== undefined\n\n return (\n <PropertyBase\n {...baseProps}\n onRemove={onRemove}\n hasValue={hasValue}\n icon={<Text size={16}/>}\n input={({ softRequired }) => (\n <div\n className={clsx('row grow pt-2 pb-1 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}\n >\n <Textarea\n className={clsx('ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue })}\n rows={5}\n defaultStyle={false}\n value={value ?? ''}\n readOnly={readOnly}\n placeholder={`${translation.value}...`}\n onChangeText={(value) => {\n if (!value) {\n onRemove()\n } else {\n onChange(value)\n }\n }}\n onEditCompleted={(value) => {\n if (!value) {\n onRemove()\n } else {\n onEditComplete(value)\n }\n }}\n />\n </div>\n )}\n />\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { TextareaHTMLAttributes } from 'react'\nimport { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type TextareaProps = {\n /* Outside the area /\n label?: Omit<LabelProps, 'id'>,\n /* Inside the area /\n headline?: string,\n value?: string,\n resizable?: boolean,\n onChangeText?: (text: string) => void,\n disclaimer?: string,\n onEditCompleted?: (text: string) => void,\n defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>\n\n/\n A Textarea component for inputting longer texts\n \n The State is managed by the parent\n /\nexport const Textarea = ({\n label,\n headline,\n id,\n resizable = false,\n onChange = noop,\n onChangeText = noop,\n disclaimer,\n onBlur = noop,\n onEditCompleted = noop,\n defaultStyle = true,\n className,\n ...props\n }: TextareaProps) => {\n const [hasFocus, setHasFocus] = useState(false)\n const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n const onEditCompletedWrapper = (text: string) => {\n onEditCompleted(text)\n clearUpdateTimer()\n }\n\n return (\n <div className=\"w-full\">\n {label && (\n <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}\n labelType={label.labelType ?? 'labelSmall'}/>\n )}\n <div\n className={`${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 border-gray-300 hover:border-primary rounded-lg': defaultStyle })}`}>\n {headline && (\n <span className=\"mx-3 mt-3 block text-gray-700 font-bold\">\n {headline}\n </span>\n )}\n <textarea\n id={id}\n className={clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', {\n 'resize-none': !resizable,\n 'h-32': defaultStyle,\n 'mt-3': !headline\n }, className)}\n onChange={(event) => {\n const value = event.target.value\n restartTimer(() => {\n onEditCompletedWrapper(value)\n })\n onChange(event)\n onChangeText(value)\n }}\n onFocus={() => {\n setHasFocus(true)\n }}\n onBlur={(event) => {\n onBlur(event)\n onEditCompletedWrapper(event.target.value)\n setHasFocus(false)\n }}\n {...props}\n >\n </textarea>\n </div>\n {(hasFocus && disclaimer) && (\n <label className=\"text-negative\">\n {disclaimer}\n </label>\n )}\n </div>\n )\n}\n\n/\n A Textarea component that is not controlled by its parent\n /\nexport const TextareaUncontrolled = ({\n value = '',\n onChangeText = noop,\n ...props\n }: TextareaProps) => {\n const [text, setText] = useState<string>(value)\n\n useEffect(() => {\n setText(value)\n }, [value])\n\n return (\n <Textarea\n {...props}\n value={text}\n onChangeText={text => {\n setText(text)\n onChangeText(text)\n }}\n />\n )\n}","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n","import type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Language } from '../../localization/util'\nimport { TextButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\n\ntype PropertyBaseTranslation = {\n remove: string,\n}\n\nconst defaultPropertyBaseTranslation: Record<Language, PropertyBaseTranslation> = {\n en: {\n remove: 'Remove'\n },\n de: {\n remove: 'Entfernen'\n }\n}\n\nexport type PropertyBaseProps = {\n name: string,\n input: (props: { softRequired: boolean, hasValue: boolean }) => ReactNode,\n onRemove?: () => void,\n hasValue: boolean,\n softRequired?: boolean,\n readOnly?: boolean,\n icon?: ReactNode,\n className?: string,\n}\n\n/\n A component for showing a properties with uniform styling\n /\nexport const PropertyBase = ({\n overwriteTranslation,\n name,\n input,\n softRequired = false,\n hasValue,\n icon,\n readOnly,\n onRemove,\n className = '',\n }: PropsForTranslation<PropertyBaseTranslation, PropertyBaseProps>) => {\n const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation)\n const requiredAndNoValue = softRequired && !hasValue\n return (\n <div className={clsx('row gap-x-0 group', className)}>\n <div\n className={\n clsx('row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0', {\n 'bg-gray-100 text-black group-hover:border-primary border-gray-400': !requiredAndNoValue,\n 'bg-warning text-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {icon}\n {name}\n </div>\n <div className={\n clsx('row grow justify-between items-center rounded-r-xl border-2 border-l-0', {\n 'bg-white group-hover:border-primary border-gray-400': !requiredAndNoValue,\n 'bg-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {input({ softRequired, hasValue })}\n {requiredAndNoValue && (\n <div className=\"text-warning pr-4\"><AlertTriangle size={24}/></div>\n )}\n {onRemove && (\n <TextButton\n onClick={onRemove}\n color=\"negative\"\n className={clsx('pr-4 items-center', { '!text-transparent': !hasValue \|\| readOnly })}\n disabled={!hasValue \|\| readOnly}\n >\n {translation.remove}\n </TextButton>\n )}\n </div>\n </div>\n )\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["clsx","useEffect","useState","useEffect","useState","clsx","useEffect","useState","jsx","jsx","useState","clsx","clsx","clsx","jsx","jsxs","jsxs","clsx","jsx","jsx","jsxs","clsx","jsx","clsx","value"]}
1	+ {"version":3,"sources":["../../../src/components/properties/TextProperty.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Textarea.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts","../../../src/components/user-action/Label.tsx","../../../src/components/properties/PropertyBase.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Text } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { Textarea } from '../user-action/Textarea'\nimport { noop } from '../../util/noop'\nimport type { PropertyBaseProps } from './PropertyBase'\nimport { PropertyBase } from './PropertyBase'\n\ntype TextPropertyTranslation = {\n value: string,\n}\n\nconst defaultTextPropertyTranslation: Record<Language, TextPropertyTranslation> = {\n en: {\n value: 'Text'\n },\n de: {\n value: 'Text'\n }\n}\n\nexport type TextPropertyProps = Omit<PropertyBaseProps, 'icon' \| 'input' \| 'hasValue'> & {\n value?: string,\n onChange?: (value: string) => void,\n onEditComplete?: (value: string) => void,\n}\n\n/*\n An Input for Text properties\n /\nexport const TextProperty = ({\n overwriteTranslation,\n value,\n readOnly,\n onChange = noop,\n onRemove = noop,\n onEditComplete = noop,\n ...baseProps\n }: PropsForTranslation<TextPropertyTranslation, TextPropertyProps>) => {\n const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation)\n const hasValue = value !== undefined\n\n return (\n <PropertyBase\n {...baseProps}\n onRemove={onRemove}\n hasValue={hasValue}\n icon={<Text size={16}/>}\n input={({ softRequired }) => (\n <div\n className={clsx('row grow pt-2 pb-1 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}\n >\n <Textarea\n className={clsx('ring-0 border-0 outline-0 p-0 m-0 shadow-none rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue })}\n rows={5}\n defaultStyle={false}\n value={value ?? ''}\n readOnly={readOnly}\n placeholder={`${translation.value}...`}\n onChangeText={(value) => {\n if (!value) {\n onRemove()\n } else {\n onChange(value)\n }\n }}\n onEditCompleted={(value) => {\n if (!value) {\n onRemove()\n } else {\n onEditComplete(value)\n }\n }}\n />\n </div>\n )}\n />\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { TextareaHTMLAttributes } from 'react'\nimport { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type TextareaProps = {\n /* Outside the area /\n label?: Omit<LabelProps, 'id'>,\n /* Inside the area /\n headline?: string,\n value?: string,\n resizable?: boolean,\n onChangeText?: (text: string) => void,\n disclaimer?: string,\n onEditCompleted?: (text: string) => void,\n defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>\n\n/\n A Textarea component for inputting longer texts\n \n The State is managed by the parent\n /\nexport const Textarea = ({\n label,\n headline,\n id,\n resizable = false,\n onChange = noop,\n onChangeText = noop,\n disclaimer,\n onBlur = noop,\n onEditCompleted = noop,\n defaultStyle = true,\n className,\n ...props\n }: TextareaProps) => {\n const [hasFocus, setHasFocus] = useState(false)\n const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n const onEditCompletedWrapper = (text: string) => {\n onEditCompleted(text)\n clearUpdateTimer()\n }\n\n return (\n <div className=\"w-full\">\n {label && (\n <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}\n labelType={label.labelType ?? 'labelSmall'}/>\n )}\n <div\n className={`${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 hover:border-primary rounded-lg': defaultStyle })}`}>\n {headline && (\n <span className=\"mx-3 mt-3 block textstyle-label-md\">\n {headline}\n </span>\n )}\n <textarea\n id={id}\n className={clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', {\n 'resize-none': !resizable,\n 'h-32': defaultStyle,\n 'mt-3': !headline\n }, className)}\n onChange={(event) => {\n const value = event.target.value\n restartTimer(() => {\n onEditCompletedWrapper(value)\n })\n onChange(event)\n onChangeText(value)\n }}\n onFocus={() => {\n setHasFocus(true)\n }}\n onBlur={(event) => {\n onBlur(event)\n onEditCompletedWrapper(event.target.value)\n setHasFocus(false)\n }}\n {...props}\n >\n </textarea>\n </div>\n {(hasFocus && disclaimer) && (\n <label className=\"text-negative\">\n {disclaimer}\n </label>\n )}\n </div>\n )\n}\n\n/\n A Textarea component that is not controlled by its parent\n /\nexport const TextareaUncontrolled = ({\n value = '',\n onChangeText = noop,\n ...props\n }: TextareaProps) => {\n const [text, setText] = useState<string>(value)\n\n useEffect(() => {\n setText(value)\n }, [value])\n\n return (\n <Textarea\n {...props}\n value={text}\n onChangeText={text => {\n setText(text)\n onChangeText(text)\n }}\n />\n )\n}","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout \| undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n /\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n","import type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Language } from '../../localization/util'\nimport { TextButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\n\ntype PropertyBaseTranslation = {\n remove: string,\n}\n\nconst defaultPropertyBaseTranslation: Record<Language, PropertyBaseTranslation> = {\n en: {\n remove: 'Remove'\n },\n de: {\n remove: 'Entfernen'\n }\n}\n\nexport type PropertyBaseProps = {\n name: string,\n input: (props: { softRequired: boolean, hasValue: boolean }) => ReactNode,\n onRemove?: () => void,\n hasValue: boolean,\n softRequired?: boolean,\n readOnly?: boolean,\n icon?: ReactNode,\n className?: string,\n}\n\n/\n A component for showing a properties with uniform styling\n /\nexport const PropertyBase = ({\n overwriteTranslation,\n name,\n input,\n softRequired = false,\n hasValue,\n icon,\n readOnly,\n onRemove,\n className = '',\n }: PropsForTranslation<PropertyBaseTranslation, PropertyBaseProps>) => {\n const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation)\n const requiredAndNoValue = softRequired && !hasValue\n return (\n <div className={clsx('row gap-x-0 group', className)}>\n <div\n className={\n clsx('row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0', {\n 'bg-property-title-background property-title-text group-hover:border-primary': !requiredAndNoValue,\n 'bg-warning text-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {icon}\n {name}\n </div>\n <div className={\n clsx('row gap-x-0 grow justify-between items-center rounded-r-xl border-2 border-l-0', {\n 'bg-surface group-hover:border-primary': !requiredAndNoValue,\n 'bg-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {input({ softRequired, hasValue })}\n {requiredAndNoValue && (\n <div className=\"text-warning pr-4\"><AlertTriangle size={24}/></div>\n )}\n {onRemove && (\n <TextButton\n onClick={onRemove}\n color=\"negative\"\n className={clsx('pr-4 items-center', { '!text-transparent': !hasValue \|\| readOnly })}\n disabled={!hasValue \|\| readOnly}\n >\n {translation.remove}\n </TextButton>\n )}\n </div>\n </div>\n )\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["clsx","useEffect","useState","useEffect","useState","clsx","useEffect","useState","jsx","jsx","useState","clsx","clsx","clsx","jsx","jsxs","jsxs","clsx","jsx","jsx","jsxs","clsx","jsx","clsx","value"]}

package/dist/components/user-action/Checkbox.js CHANGED Viewed

@@ -102,10 +102,10 @@ var Checkbox = ({
         disabled,
         id,
         className: (0, import_clsx2.default)(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
-          "text-disabled-text border-disabled-text": disabled,
-          "border-on-background": !disabled,
+          "text-disabled-text border-disabled-text bg-disabled-background": disabled,
+          "bg-surface": !disabled && !checked,
           "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
-          "hover:border-gray-400 focus:hover:border-primary": !checked
+          "hover:border-primary focus:hover:border-primary": !checked
         }, className),
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CheckboxPrimitive.Indicator, { children: [
           checked === true && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { className: innerIconSize }),

package/dist/components/user-action/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst Checkbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n '~~border~~-~~on-background~~': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-~~gray-400~~ focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label && (\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n onClick={changeValue}/>\n )}\n </div>\n )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n /\nconst CheckboxUncontrolled = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: CheckboxUncontrolledProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <Checkbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n CheckboxProps,\n CheckboxUncontrolled,\n Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,wBAAmC;AACnC,0BAA6B;AAC7B,IAAAA,eAAiB;;;ACHjB,kBAAiB;AA4Bb;AAxBJ,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAYO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAkB;AACtC,SACE,4CAAC,WAAO,GAAG,OAAO,eAAW,YAAAC,SAAK,aAAa,SAAS,GAAG,SAAS,GACjE,qBAAW,WAAW,MACzB;AAEJ;;;ADoDQ,IAAAC,sBAAA;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AACrC,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,mCAAmC,kBAAkB,GACxE;AAAA;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAW,aAAAA,SAAK,eAAe,mEAAmE;AAAA,UAChG,~~2CAA2C~~;AAAA,~~UAC3C~~,~~wBAAwB~~,CAAC;AAAA,~~UACzB~~,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,~~oDAAoD~~,CAAC;AAAA,~~QACvD~~,GAAG,SAAS;AAAA,QAEZ,wDAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,6CAAC,6BAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,6CAAC,6BAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,eAAW,aAAAA,SAAK,kBAAkB,MAAM,SAAS;AAAA,QAAG,SAAS;AAAA,QACxE,SAAS;AAAA;AAAA,IAAY;AAAA,KAEhC;AAEJ;AAcA,IAAM,uBAAuB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC7D,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,YAAY;AAEnD,QAAM,eAAe,CAACD,aAA0B;AAC9C,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AACA,eAAWA,QAAO;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,kBAAkB;AAAA;AAAA,EACpB;AAEJ;","names":["import_clsx","clsx","import_jsx_runtime","checked","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst Checkbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text bg-disabled-background': disabled,\n 'bg-surface': !disabled && !checked,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-primary focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label && (\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n onClick={changeValue}/>\n )}\n </div>\n )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n /\nconst CheckboxUncontrolled = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: CheckboxUncontrolledProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <Checkbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n CheckboxProps,\n CheckboxUncontrolled,\n Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,wBAAmC;AACnC,0BAA6B;AAC7B,IAAAA,eAAiB;;;ACHjB,kBAAiB;AA4Bb;AAxBJ,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAYO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAkB;AACtC,SACE,4CAAC,WAAO,GAAG,OAAO,eAAW,YAAAC,SAAK,aAAa,SAAS,GAAG,SAAS,GACjE,qBAAW,WAAW,MACzB;AAEJ;;;ADoDQ,IAAAC,sBAAA;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AACrC,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,8CAAC,SAAI,eAAW,aAAAC,SAAK,mCAAmC,kBAAkB,GACxE;AAAA;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAW,aAAAA,SAAK,eAAe,mEAAmE;AAAA,UAChG,kEAAkE;AAAA,UAClE,cAAc,CAAC,YAAY,CAAC;AAAA,UAC5B,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,mDAAmD,CAAC;AAAA,QACtD,GAAG,SAAS;AAAA,QAEZ,wDAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,6CAAC,6BAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,6CAAC,6BAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,eAAW,aAAAA,SAAK,kBAAkB,MAAM,SAAS;AAAA,QAAG,SAAS;AAAA,QACxE,SAAS;AAAA;AAAA,IAAY;AAAA,KAEhC;AAEJ;AAcA,IAAM,uBAAuB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC7D,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,YAAY;AAEnD,QAAM,eAAe,CAACD,aAA0B;AAC9C,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AACA,eAAWA,QAAO;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,kBAAkB;AAAA;AAAA,EACpB;AAEJ;","names":["import_clsx","clsx","import_jsx_runtime","checked","clsx"]}

package/dist/components/user-action/Checkbox.mjs CHANGED Viewed

@@ -68,10 +68,10 @@ var Checkbox = ({
         disabled,
         id,
         className: clsx2(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
-          "text-disabled-text border-disabled-text": disabled,
-          "border-on-background": !disabled,
+          "text-disabled-text border-disabled-text bg-disabled-background": disabled,
+          "bg-surface": !disabled && !checked,
           "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
-          "hover:border-gray-400 focus:hover:border-primary": !checked
+          "hover:border-primary focus:hover:border-primary": !checked
         }, className),
         children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { children: [
           checked === true && /* @__PURE__ */ jsx2(Check, { className: innerIconSize }),

package/dist/components/user-action/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst Checkbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text': disabled,\n '~~border~~-~~on-background~~': !disabled,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-~~gray-400~~ focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label && (\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n onClick={changeValue}/>\n )}\n </div>\n )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n /\nconst CheckboxUncontrolled = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: CheckboxUncontrolledProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <Checkbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n CheckboxProps,\n CheckboxUncontrolled,\n Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,YAAY,uBAAuB;AACnC,SAAS,OAAO,aAAa;AAC7B,OAAOA,WAAU;;;ACHjB,OAAO,UAAU;AA4Bb;AAxBJ,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAYO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAkB;AACtC,SACE,oBAAC,WAAO,GAAG,OAAO,WAAW,KAAK,aAAa,SAAS,GAAG,SAAS,GACjE,qBAAW,WAAW,MACzB;AAEJ;;;ADoDQ,SACuB,OAAAC,MADvB;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AACrC,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,qBAAC,SAAI,WAAWC,MAAK,mCAAmC,kBAAkB,GACxE;AAAA,oBAAAF;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAWE,MAAK,eAAe,mEAAmE;AAAA,UAChG,~~2CAA2C~~;AAAA,~~UAC3C~~,~~wBAAwB~~,CAAC;AAAA,~~UACzB~~,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,~~oDAAoD~~,CAAC;AAAA,~~QACvD~~,GAAG,SAAS;AAAA,QAEZ,+BAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,gBAAAF,KAAC,SAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,gBAAAA,KAAC,SAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,WAAWE,MAAK,kBAAkB,MAAM,SAAS;AAAA,QAAG,SAAS;AAAA,QACxE,SAAS;AAAA;AAAA,IAAY;AAAA,KAEhC;AAEJ;AAcA,IAAM,uBAAuB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AAEnD,QAAM,eAAe,CAACD,aAA0B;AAC9C,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AACA,eAAWA,QAAO;AAAA,EACpB;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,kBAAkB;AAAA;AAAA,EACpB;AAEJ;","names":["clsx","jsx","checked","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' \| 'medium' \| 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-4',\n medium: 'size-6',\n large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n small: 'size-3',\n medium: 'size-5',\n large: 'size-7',\n}\n\ntype CheckboxProps = {\n /** used for the label's `for` attribute /\n id?: string,\n label?: Omit<LabelProps, 'id'>,\n /\n @default false\n /\n checked: CheckedState,\n disabled?: boolean,\n onChange?: (checked: boolean) => void,\n onChangeTristate?: (checked: CheckedState) => void,\n size?: CheckBoxSize,\n className?: string,\n containerClassName?: string,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by the parent\n /\nconst Checkbox = ({\n id,\n label,\n checked,\n disabled,\n onChange,\n onChangeTristate,\n size = 'medium',\n className = '',\n containerClassName\n }: CheckboxProps) => {\n const usedSizeClass = checkboxSizeMapping[size]\n const innerIconSize = checkboxIconSizeMapping[size]\n\n const propagateChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n }\n\n const changeValue = () => {\n const newValue = checked === 'indeterminate' ? false : !checked\n propagateChange(newValue)\n }\n\n return (\n <div className={clsx('row justify-center items-center', containerClassName)}>\n <CheckboxPrimitive.Root\n onCheckedChange={propagateChange}\n checked={checked}\n disabled={disabled}\n id={id}\n className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n 'text-disabled-text border-disabled-text bg-disabled-background': disabled,\n 'bg-surface': !disabled && !checked,\n 'bg-primary/30 border-primary text-primary': checked === true \|\| checked === 'indeterminate',\n 'hover:border-primary focus:hover:border-primary': !checked\n }, className)}\n >\n <CheckboxPrimitive.Indicator>\n {checked === true && <Check className={innerIconSize}/>}\n {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n {label && (\n <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n onClick={changeValue}/>\n )}\n </div>\n )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' \| 'checked'> & {\n /\n @default false\n /\n defaultValue?: CheckedState,\n}\n\n/\n A Tristate checkbox\n \n The state is managed by this component\n /\nconst CheckboxUncontrolled = ({\n onChange,\n onChangeTristate,\n defaultValue = false,\n ...props\n }: CheckboxUncontrolledProps) => {\n const [checked, setChecked] = useState(defaultValue)\n\n const handleChange = (checked: CheckedState) => {\n if (onChangeTristate) {\n onChangeTristate(checked)\n }\n if (onChange) {\n onChange(checked === 'indeterminate' ? false : checked)\n }\n setChecked(checked)\n }\n\n return (\n <Checkbox\n {...props}\n checked={checked}\n onChangeTristate={handleChange}\n />\n )\n}\n\nexport {\n CheckboxProps,\n CheckboxUncontrolled,\n Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' \| 'labelMedium' \| 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n /* The text for the label /\n name?: string,\n /* The styling for the label /\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/\n A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n className,\n ...props\n }: LabelProps) => {\n return (\n <label {...props} className={clsx(styleMapping[labelType], className)}>\n {children ? children : name}\n </label>\n )\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,YAAY,uBAAuB;AACnC,SAAS,OAAO,aAAa;AAC7B,OAAOA,WAAU;;;ACHjB,OAAO,UAAU;AA4Bb;AAxBJ,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAYO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAkB;AACtC,SACE,oBAAC,WAAO,GAAG,OAAO,WAAW,KAAK,aAAa,SAAS,GAAG,SAAS,GACjE,qBAAW,WAAW,MACzB;AAEJ;;;ADoDQ,SACuB,OAAAC,MADvB;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AACrC,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,qBAAC,SAAI,WAAWC,MAAK,mCAAmC,kBAAkB,GACxE;AAAA,oBAAAF;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAWE,MAAK,eAAe,mEAAmE;AAAA,UAChG,kEAAkE;AAAA,UAClE,cAAc,CAAC,YAAY,CAAC;AAAA,UAC5B,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,mDAAmD,CAAC;AAAA,QACtD,GAAG,SAAS;AAAA,QAEZ,+BAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,gBAAAF,KAAC,SAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,gBAAAA,KAAC,SAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,WAAWE,MAAK,kBAAkB,MAAM,SAAS;AAAA,QAAG,SAAS;AAAA,QACxE,SAAS;AAAA;AAAA,IAAY;AAAA,KAEhC;AAEJ;AAcA,IAAM,uBAAuB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AAEnD,QAAM,eAAe,CAACD,aAA0B;AAC9C,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AACA,eAAWA,QAAO;AAAA,EACpB;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,kBAAkB;AAAA;AAAA,EACpB;AAEJ;","names":["clsx","jsx","checked","clsx"]}

package/dist/components/user-action/DateAndTimePicker.js CHANGED Viewed

@@ -494,8 +494,9 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -524,7 +525,7 @@ var Expandable = (0, import_react4.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx3.default)("col px-4 pb-2", contentClassName), children })
       ]
     }
   );
@@ -589,7 +590,8 @@ var YearMonthPicker = ({
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_clsx4.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row", children: monthList.map((month) => {
+        contentClassName: "gap-y-1",
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row gap-x-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -599,17 +601,12 @@ var YearMonthPicker = ({
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
           return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
+            SolidButton,
             {
               disabled: !isValid,
-              className: (0, import_clsx4.default)(
-                "chip hover:brightness-95 flex-1",
-                {
-                  "bg-gray-50 text-black": !selectedMonth && isValid,
-                  "bg-primary text-on-primary": selectedMonth && isValid,
-                  "bg-disabled-background text-disabled-text": !isValid
-                }
-              ),
+              color: selectedMonth && isValid ? "primary" : "neutral",
+              className: "flex-1",
+              size: "small",
               onClick: () => {
                 onChange(newDate);
               },
@@ -617,7 +614,7 @@ var YearMonthPicker = ({
             },
             month
           );
-        }) }, index)) })
+        }) }, index))
       },
       year
     );
@@ -653,14 +650,15 @@ var DayPicker = ({
         {
           disabled: !isDayValid,
           className: (0, import_clsx5.default)(
-            "flex-1 rounded-full border-2 border-transparent shadow-sm",
+            "flex-1 rounded-full border-2",
             {
-              "text-gray-700 bg-gray-100": !isSameMonth && isDayValid,
-              "text-black bg-white": !isSelected && isSameMonth && isDayValid,
-              "text-on-primary bg-primary": isSelected,
-              "border-black": isToday && markToday,
-              "hover:brightness-90 hover:bg-primary hover:text-on-primary": isDayValid,
-              "text-disabled-text bg-disabled-background": !isDayValid
+              "text-description": !isSameMonth && !isSelected && isDayValid,
+              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
+              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
+              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
+              "text-disabled-text bg-disabled-background cursor-not-allowed": !isDayValid,
+              "border-secondary": isToday && markToday,
+              "border-transparent": !isToday || !markToday
             }
           ),
           onClick: () => onChange(date),
@@ -771,6 +769,7 @@ var DatePicker = ({
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TextButton,
         {
+          color: "primary",
           onClick: () => {
             const newDate = /* @__PURE__ */ new Date();
             newDate.setHours(value.getHours(), value.getMinutes());