@lmb-it/kitsconcerto-native 0.1.284 → 0.1.285

package/form/selects/AutoComplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/AutoComplete/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {AutoComplete, useSeparator} from \"@lmb-it/kitsconcertomobile\";\nimport type { IAutoCompleteElement } from \"@lmb-it/kitsconcerto-types\";\nimport { useAutoCompleteLogic } from \"../hooks/useAutoCompleteLogic\";\nimport { useComponentDefaults, useResolvedStyle } from \"../../../hooks\";\nimport { useKitsTheme } from \"../../../contexts/Theme\";\n\nconst KitsAutoComplete = ({ ref, ...rawProps }: IAutoCompleteElement) => {\n    const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults('AutoComplete', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        hideError,\n        disabled,\n        required,\n        isFloatedLabel,\n        inputSize = \"md\",\n        forceSelection,\n        completeMethod,\n        helperText,\n        withArrow,\n        placeholder,\n        isMultiple,\n        localProps,\n        delay,\n        minLength,\n        selectionLimit,\n        showEmptyMessage,\n        emptyMessage,\n        attached,\n        containerStyle,\n    } = props;\n\n    const { nativeProps } = useSeparator<HTMLSelectElement>(props);\n\n    const { resolveToken } = useKitsTheme();\n    const primaryColor = resolveToken('primary');\n    const borderColor = resolveToken('border');\n\n    const {\n        inputValue,\n        setInputValue,\n        filteredList,\n        search,\n        handleOnChange,\n        list,\n        childrenKey,\n        labelKey,\n    } = useAutoCompleteLogic({ isMultiple, forceSelection, completeMethod, ref });\n\n    const hasThemeStyle = Object.keys(themeStyle).length > 0;\n\n\n    const Element = <AutoComplete\n        disabled={disabled}\n        placeholder={placeholder}\n        value={inputValue}\n        forceSelection={forceSelection}\n        suggestions={Array.isArray(filteredList) ? filteredList : list}\n        completeMethod={search}\n        dropdown={withArrow}\n        multiple={isMultiple}\n        field={labelKey}\n        invalid={!!invalid}\n        emptyMessage={emptyMessage ?? \"No results found\"}\n        {...(delay != null ? { delay } : {})}\n        {...(minLength != null ? { minLength } : {})}\n        {...(selectionLimit != null ? { selectionLimit } : {})}\n        showEmptyMessage={showEmptyMessage ?? true}\n        optionGroupChildren={childrenKey ?? undefined}\n        optionGroupLabel={childrenKey ? labelKey : undefined}\n        style={{ width: \"100%\", borderRadius: 0, border:'none', backgroundColor:'transparent' }}\n        inputStyle={{ flexDirection: \"row\", borderRadius: 0, border:'none', width: \"100%\",backgroundColor:'transparent', ...(resolvedRootStyle || resolvedThemeStyle) }}\n        onChange={(event) => {\n            setInputValue(event.value);\n            handleOnChange(event);\n        }}\n        {...(localProps ?? {})}\n    />\n\n    if (attached) {\n        return Element;\n    }\n\n    // KitsContainer's `inputGroup` wrapper defaults to `overflow: 'hidden'`\n    // (so rounded borders clip the input cleanly). For AutoComplete that\n    // would clip the floating suggestions panel back to the input's bounds\n    // — the panel renders but is invisible, which is the \"list never\n    // appears\" symptom on mobile. Force `overflow: 'visible'` on the\n    // container chain so the panel can escape.\n    const overflowEscape = {\n        ...elementStyles,\n        container: {\n            ...(elementStyles?.container || {}),\n            overflow: 'visible' as const,\n        },\n        inputGroup: {\n            ...(elementStyles?.inputGroup || {}),\n            overflow: 'visible' as const,\n        },\n    };\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            hideError={hideError}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            helperText={helperText}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={overflowEscape}\n        >\n            {Element}\n        </KitsContainer>\n    );\n};\n\nexport default KitsAutoComplete;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/AutoComplete/index.native.tsx"],"sourcesContent":["import React from \"react\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport {AutoComplete, useSeparator} from \"@lmb-it/kitsconcertomobile\";\nimport type { IAutoCompleteElement } from \"@lmb-it/kitsconcerto-types\";\nimport { useAutoCompleteLogic } from \"../hooks/useAutoCompleteLogic\";\nimport { useComponentDefaults, useResolvedStyle } from \"../../../hooks\";\nimport { splitTextStyle } from \"../../../hooks/useResolvedStyle\";\nimport { useKitsTheme } from \"../../../contexts/Theme\";\n\nconst KitsAutoComplete = ({ ref, ...rawProps }: IAutoCompleteElement) => {\n    const { mergedProps: props, themeStyle, elementStyles, elementProps } = useComponentDefaults('AutoComplete', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* ─── Chips field slots — the native half of the same contract ──────────\n       `tokenContainer` is the field wrapper View that holds the chips and the\n       TextInput (web: `ul.p-autocomplete-multiple-container`). `token` splits\n       in two on native, because a React Native `View` cannot carry `color` or\n       `fontSize` — the text half goes to the chip's `Text`, which is what the\n       CSS cascade does for free on web.                                     */\n    const resolvedTokenContainer = useResolvedStyle(elementStyles?.tokenContainer || {});\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        rightAddon,\n        leftAddon,\n        errors,\n        invalid,\n        label,\n        hideError,\n        disabled,\n        required,\n        isFloatedLabel,\n        inputSize = \"md\",\n        forceSelection,\n        completeMethod,\n        helperText,\n        withArrow,\n        placeholder,\n        isMultiple,\n        localProps,\n        delay,\n        minLength,\n        selectionLimit,\n        showEmptyMessage,\n        emptyMessage,\n        attached,\n        containerStyle,\n    } = props;\n\n    const { nativeProps } = useSeparator<HTMLSelectElement>(props);\n\n    const { resolveToken } = useKitsTheme();\n    const primaryColor = resolveToken('primary');\n    const borderColor = resolveToken('border');\n\n    const {\n        inputValue,\n        setInputValue,\n        filteredList,\n        search,\n        handleOnChange,\n        list,\n        childrenKey,\n        labelKey,\n    } = useAutoCompleteLogic({ isMultiple, forceSelection, completeMethod, ref });\n\n    const hasThemeStyle = Object.keys(themeStyle).length > 0;\n\n\n    const Element = <AutoComplete\n        disabled={disabled}\n        placeholder={placeholder}\n        value={inputValue}\n        forceSelection={forceSelection}\n        suggestions={Array.isArray(filteredList) ? filteredList : list}\n        completeMethod={search}\n        dropdown={withArrow}\n        multiple={isMultiple}\n        field={labelKey}\n        invalid={!!invalid}\n        emptyMessage={emptyMessage ?? \"No results found\"}\n        {...(delay != null ? { delay } : {})}\n        {...(minLength != null ? { minLength } : {})}\n        {...(selectionLimit != null ? { selectionLimit } : {})}\n        showEmptyMessage={showEmptyMessage ?? true}\n        optionGroupChildren={childrenKey ?? undefined}\n        optionGroupLabel={childrenKey ? labelKey : undefined}\n        style={{ width: \"100%\", borderRadius: 0, border:'none', backgroundColor:'transparent' }}\n        inputStyle={{ flexDirection: \"row\", borderRadius: 0, border:'none', width: \"100%\",backgroundColor:'transparent', ...(resolvedRootStyle || resolvedThemeStyle) }}\n        tokenContainerStyle={resolvedTokenContainer}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        onChange={(event) => {\n            setInputValue(event.value);\n            handleOnChange(event);\n        }}\n        {...(localProps ?? {})}\n    />\n\n    if (attached) {\n        return Element;\n    }\n\n    // KitsContainer's `inputGroup` wrapper defaults to `overflow: 'hidden'`\n    // (so rounded borders clip the input cleanly). For AutoComplete that\n    // would clip the floating suggestions panel back to the input's bounds\n    // — the panel renders but is invisible, which is the \"list never\n    // appears\" symptom on mobile. Force `overflow: 'visible'` on the\n    // container chain so the panel can escape.\n    const overflowEscape = {\n        ...elementStyles,\n        container: {\n            ...(elementStyles?.container || {}),\n            overflow: 'visible' as const,\n        },\n        inputGroup: {\n            ...(elementStyles?.inputGroup || {}),\n            overflow: 'visible' as const,\n        },\n    };\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            hideError={hideError}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            helperText={helperText}\n            errors={errors}\n            invalid={invalid}\n            label={label}\n            containerStyle={containerStyle}\n            elementStyles={overflowEscape}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n};\n\nexport default KitsAutoComplete;\n"],"names":[],"mappings":"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"}

package/form/selects/MultiSelect/index.cjs

@@ -98,9 +98,12 @@ var useThemedFont = require('../../../hooks/useThemedFont.cjs');
 var SelectPopupOverlay_native = require('../helpers/SelectPopupOverlay.cjs');
 
 const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
-  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults.default("MultiSelect", rawProps, "Select");
+  const { mergedProps: props, themeStyle, elementStyles, elementProps } = useComponentDefaults.default("MultiSelect", rawProps, "Select");
   const resolvedThemeStyle = useResolvedStyle.default(themeStyle);
   const resolvedRootStyle = useResolvedStyle.default(elementStyles?.root || {});
+  const resolvedToken = useResolvedStyle.default(elementStyles?.token || {});
+  const resolvedTokenIcon = useResolvedStyle.default(elementStyles?.tokenIcon || {});
+  const { wrapper: tokenBoxStyle, text: tokenLabelStyle } = useResolvedStyle.splitTextStyle(resolvedToken);
   const {
     id,
     disabled,
@@ -167,6 +170,9 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
       maxSelectedLabels: selectionLimit ?? localProps?.maxSelectedLabels ?? 10,
       className: `w-full ${ClState}`,
       style: { borderRadius: 0, ...resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle },
+      tokenStyle: tokenBoxStyle,
+      tokenLabelStyle,
+      tokenIconStyle: resolvedTokenIcon,
       ...localProps ? localProps : {}
     }
   );
@@ -185,6 +191,7 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
       invalid,
       label,
       elementStyles,
+      elementProps,
       children: Element
     }
   );

package/form/selects/MultiSelect/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","useSelectBase","useLanguage","useThemedFont","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","SelectPopupOverlay","KitsContainer"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":["useComponentDefaults","useResolvedStyle","splitTextStyle","useSelectBase","useLanguage","useThemedFont","useEffect","checkKeys","ClHelper","useCallback","jsx","MultiSelect","SelectPopupOverlay","KitsContainer"],"mappings":"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"}

package/form/selects/MultiSelect/index.js

@@ -89,14 +89,17 @@ import '../../../contexts/DialogContext.js';
 import '../../../contexts/PermissionsContext.js';
 import '../../../contexts/BreadcrumbContext.js';
 import useComponentDefaults from '../../../hooks/useComponentDefaults.js';
-import useResolvedStyle from '../../../hooks/useResolvedStyle.js';
+import useResolvedStyle, { splitTextStyle } from '../../../hooks/useResolvedStyle.js';
 import useThemedFont from '../../../hooks/useThemedFont.js';
 import SelectPopupOverlay from '../helpers/SelectPopupOverlay.js';
 
 const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
-  const { mergedProps: props, themeStyle, elementStyles } = useComponentDefaults("MultiSelect", rawProps, "Select");
+  const { mergedProps: props, themeStyle, elementStyles, elementProps } = useComponentDefaults("MultiSelect", rawProps, "Select");
   const resolvedThemeStyle = useResolvedStyle(themeStyle);
   const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});
+  const resolvedToken = useResolvedStyle(elementStyles?.token || {});
+  const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});
+  const { wrapper: tokenBoxStyle, text: tokenLabelStyle } = splitTextStyle(resolvedToken);
   const {
     id,
     disabled,
@@ -163,6 +166,9 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
       maxSelectedLabels: selectionLimit ?? localProps?.maxSelectedLabels ?? 10,
       className: `w-full ${ClState}`,
       style: { borderRadius: 0, ...resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle },
+      tokenStyle: tokenBoxStyle,
+      tokenLabelStyle,
+      tokenIconStyle: resolvedTokenIcon,
       ...localProps ? localProps : {}
     }
   );
@@ -181,6 +187,7 @@ const KitsMultiSelect = ({ className, ref, ...rawProps }) => {
       invalid,
       label,
       elementStyles,
+      elementProps,
       children: Element
     }
   );

package/form/selects/MultiSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form/selects/MultiSelect/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect} from \"react\";\nimport {MultiSelect} from \"@lmb-it/kitsconcertomobile\";\nimport KitsContainer from \"../../helpers/FormContainer\";\nimport type {IMultiSelect} from \"@lmb-it/kitsconcerto-types\";\nimport {ClHelper} from \"../../helpers/Functions\";\nimport {checkKeys} from \"../helper\";\nimport {useSelectBase} from \"../hooks/useSelectBase\";\nimport {useComponentDefaults, useLanguage, useResolvedStyle} from \"@lmb-it/kitsconcerto/hooks\";\nimport {splitTextStyle} from \"@lmb-it/kitsconcerto/hooks/useResolvedStyle\";\nimport SelectPopupOverlay from \"../helpers/SelectPopupOverlay\";\nimport useThemedFont from \"@lmb-it/kitsconcerto/hooks/useThemedFont\";\n\nconst KitsMultiSelect = ({ className, ref, ...rawProps }: IMultiSelect) => {\n    const {mergedProps: props, themeStyle, elementStyles, elementProps} = useComponentDefaults('MultiSelect', rawProps, 'Select');\n    const resolvedThemeStyle = useResolvedStyle(themeStyle);\n    const resolvedRootStyle = useResolvedStyle(elementStyles?.root || {});\n    /* Chip slots — the same `Select.token` / `Select.tokenIcon` the web build\n       reads and the same the native Tags field reads. Split because a React\n       Native `View` cannot carry `color` / `fontSize`. */\n    const resolvedToken = useResolvedStyle(elementStyles?.token || {});\n    const resolvedTokenIcon = useResolvedStyle(elementStyles?.tokenIcon || {});\n    const {wrapper: tokenBoxStyle, text: tokenLabelStyle} = splitTextStyle(resolvedToken);\n    const {\n        id,\n        disabled,\n        isFloatedLabel,\n        rightAddon,\n        leftAddon,\n        required,\n        errors,\n        invalid,\n        placeholder,\n        virtualScroll,\n        label,\n        inputSize,\n        helperText,\n        emptyFilterMessage,\n        selectionLimit,\n        localProps,\n        hideError,\n        withFilter,\n        loading,\n        showClear,\n        valueMode,\n        popup,\n    } = props;\n\n    const { list, keys, onChange, selectedValue, childrenKey, labelKey, valueKey } = useSelectBase();\n\n    /* Same rule as the Dropdown's panel — see that file. The sentence and the\n       edge are resolved here, where LocaleContext is, and passed down. */\n    const { t, isRTL } = useLanguage();\n    const bodyFont = useThemedFont('body');\n\n    useEffect(() => {\n        checkKeys(list, labelKey, !childrenKey ? valueKey : undefined);\n    }, [list]);\n\n    const ClState = ClHelper({\n        inputSize: inputSize ?? \"\",\n        isChecked: false,\n        isInvalid: !!invalid,\n        isDisabled: !!disabled,\n    });\n\n    const handleChange = useCallback((e: any, items: any) => {\n        if (selectionLimit && Array.isArray(e?.target?.value) && e.target.value.length > selectionLimit) {\n            return;\n        }\n        onChange && onChange(e, items);\n    }, [selectionLimit, onChange]);\n\n    const Element = <MultiSelect\n        emptyFilterMessage={emptyFilterMessage ?? t('emptyFilterMessage')}\n        filterPlaceholder={t('searchPlaceholder')}\n        isRTL={isRTL}\n        fontFamily={bodyFont}\n        popup={popup}\n        popupTitle={label ?? placeholder}\n        renderPopup={({visible, onClose, title, children}: {\n                visible: boolean;\n                onClose: () => void;\n                title?: React.ReactNode;\n                children: React.ReactNode;\n            }) => (\n            <SelectPopupOverlay visible={visible} onClose={onClose} title={title}>\n                {children}\n            </SelectPopupOverlay>\n        )}\n        value={selectedValue}\n        onChange={handleChange}\n        disabled={disabled}\n        loading={loading}\n        showClear={showClear}\n        options={typeof list !== \"function\" ? list : []}\n        placeholder={placeholder}\n        {...keys}\n        filter={withFilter !== false}\n        selectionLimit={selectionLimit}\n        display={valueMode === \"comma\" ? \"comma\" : (localProps?.maxSelectedLabels ? undefined : \"chip\")}\n        maxSelectedLabels={selectionLimit ?? localProps?.maxSelectedLabels ?? 10}\n        className={`w-full ${ClState}`}\n        style={{ borderRadius: 0, ...(resolvedRootStyle && Object.keys(resolvedRootStyle).length > 0 ? resolvedRootStyle : resolvedThemeStyle) }}\n        tokenStyle={tokenBoxStyle}\n        tokenLabelStyle={tokenLabelStyle}\n        tokenIconStyle={resolvedTokenIcon}\n        {...(localProps ? localProps : {})}\n    />\n\n    return (\n        <KitsContainer\n            id={id}\n            inputSize={inputSize}\n            isFloatedLabel={isFloatedLabel}\n            rightAddon={rightAddon}\n            leftAddon={leftAddon}\n            required={required}\n            hideError={hideError}\n            errors={errors}\n            helperText={helperText}\n            invalid={invalid}\n            label={label}\n            elementStyles={elementStyles}\n            elementProps={elementProps}\n        >\n            {Element}\n        </KitsContainer>\n    );\n}\n\nKitsMultiSelect.displayName = \"MultiSelect\";\nexport default KitsMultiSelect;\n"],"names":[],"mappings":"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"}

package/hooks/useComponentDefaults.cjs

@@ -27,9 +27,14 @@ const ELEMENT_SLOT_KEYS = /* @__PURE__ */ new Set([
   "itemHover",
   "itemDisabled",
   "itemInvalid",
-  // MultiSelect specific (IMultiSelectSlots — chips + per-item checkbox)
+  // Chip-bearing selects (IChipInputSlots — MultiSelect display="chip"
+  // AND AutoComplete/Tags with isMultiple). `tokenContainer` is the
+  // bordered box that holds the chips and the caret — see the docblock
+  // on IChipInputSlots for why it is neither `root` nor `container`.
+  "tokenContainer",
   "token",
   "tokenIcon",
+  // MultiSelect specific (IMultiSelectSlots — per-item checkbox)
   "checkboxBox",
   "checkboxBoxChecked",
   "checkboxIcon",
@@ -147,6 +152,25 @@ const ELEMENT_SLOT_KEYS = /* @__PURE__ */ new Set([
   "avatarButton",
   "breadcrumb"
 ]);
+function mergeSlotProps(layers) {
+  const out = {};
+  const classes = [];
+  for (const layer of layers) {
+    if (!layer) continue;
+    for (const [key, value] of Object.entries(layer)) {
+      if (value === void 0) continue;
+      if (key === "className") {
+        if (value) classes.push(String(value));
+      } else {
+        out[key] = value;
+      }
+    }
+  }
+  if (classes.length) {
+    out.className = Array.from(new Set(classes.join(" ").split(/\s+/).filter(Boolean))).join(" ");
+  }
+  return out;
+}
 function useComponentDefaults(componentName, props, baseGroup) {
   const { theme } = KitsThemeProvider_native.useKitsTheme();
   const formElementConfig = theme.components.FormElement;
@@ -155,23 +179,31 @@ function useComponentDefaults(componentName, props, baseGroup) {
   return React.useMemo(() => {
     const instanceSlots = props.slots;
     if (!config && !baseConfig && !instanceSlots && !formElementConfig) {
-      return { mergedProps: props, themeStyle: {}, elementStyles: {}, elementConfigs: {} };
+      return { mergedProps: props, themeStyle: {}, elementStyles: {}, elementProps: {}, elementConfigs: {} };
     }
     const formBase = formElementConfig || {};
     const base = baseConfig || {};
     const comp = config || {};
-    const merged = {
-      ...formBase.root?.props || {},
-      ...base.root?.props || {},
-      ...comp.root?.props || {},
-      ...instanceSlots?.root?.props || {}
-    };
+    const merged = mergeSlotProps([
+      formBase.root?.props,
+      base.root?.props,
+      comp.root?.props,
+      instanceSlots?.root?.props
+    ]);
+    const userClassName = typeof props.className === "string" ? props.className : void 0;
     for (const key of Object.keys(props)) {
       if (key === "slots") continue;
+      if (key === "className") continue;
       if (props[key] !== void 0) {
         merged[key] = props[key];
       }
     }
+    if (userClassName || merged.className) {
+      merged.className = mergeSlotProps([
+        { className: merged.className },
+        { className: userClassName }
+      ]).className;
+    }
     const allSlotKeys = /* @__PURE__ */ new Set();
     for (const key of Object.keys(formBase)) {
       if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);
@@ -188,6 +220,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       }
     }
     const elementStyles = {};
+    const elementProps = {};
     const elementConfigs = {};
     for (const slotKey of allSlotKeys) {
       const style = {
@@ -197,6 +230,13 @@ function useComponentDefaults(componentName, props, baseGroup) {
         ...instanceSlots?.[slotKey]?.style || {}
       };
       elementStyles[slotKey] = style;
+      const slotProps = mergeSlotProps([
+        formBase[slotKey]?.props,
+        base[slotKey]?.props,
+        comp[slotKey]?.props,
+        instanceSlots?.[slotKey]?.props
+      ]);
+      elementProps[slotKey] = slotProps;
       const pseudoMerged = {
         ...formBase[slotKey]?.pseudo || {},
         ...base[slotKey]?.pseudo || {},
@@ -205,6 +245,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       };
       elementConfigs[slotKey] = {
         style,
+        props: slotProps,
         important: instanceSlots?.[slotKey]?.important ?? comp[slotKey]?.important ?? base[slotKey]?.important ?? formBase[slotKey]?.important,
         pseudo: Object.keys(pseudoMerged).length > 0 ? pseudoMerged : void 0
       };
@@ -214,6 +255,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       mergedProps: merged,
       themeStyle,
       elementStyles,
+      elementProps,
       elementConfigs
     };
   }, [formElementConfig, baseConfig, config, props]);

package/hooks/useComponentDefaults.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentDefaults.cjs","sources":["../../../src/hooks/useComponentDefaults.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\n\n/**\n * Known element slot keys. When a config key matches one of these\n * AND the value has `props` or `style`, it is treated as an element slot.\n *\n * To add a new slot: add the key here AND to the relevant slot interface\n * in packages/types/src/Theme/types.ts (and to the `AllSlotKeys` union).\n *\n * The order below mirrors the typed slot hierarchy in\n * `packages/types/src/Theme/types.ts`.\n */\nconst ELEMENT_SLOT_KEYS = new Set([\n    // ── Form-element slots ──────────────────────────────────\n    // Base (all form elements — IFormElementBaseSlots)\n    'label', 'helperText', 'error',\n    // Text input specific (ITextInputSlots — also shared by ISelectSlots)\n    'root', 'container', 'inputGroup', 'leftAddon', 'rightAddon',\n    // Select specific (ISelectSlots — option-list popover)\n    // Radio / Checkbox also use `item` / `itemSelected` / `itemDisabled` /\n    // `itemHover` for the per-list-item wrapper, plus `itemInvalid`.\n    'panel', 'item', 'itemSelected', 'itemFocused', 'itemHover', 'itemDisabled', 'itemInvalid',\n    // MultiSelect specific (IMultiSelectSlots — chips + per-item checkbox)\n    'token', 'tokenIcon',\n    'checkboxBox', 'checkboxBoxChecked', 'checkboxIcon',\n    // Datepicker specific (IDatepickerSlots — calendar popup; `panel` shared with Select)\n    'calendarHeader', 'calendarNavButton', 'weekDay',\n    'dayCell', 'daySelected', 'dayToday', 'dayDisabled',\n    // Switch specific (ISwitchSlots) — RENAMED from slider/sliderChecked/thumbChecked\n    'track', 'trackOn', 'thumb', 'thumbOn',\n    // Checkbox specific (ICheckboxSlots)\n    'box', 'boxChecked', 'checkIcon',\n    // Radio specific (IRadioSlots)\n    'circle', 'circleInner',\n    // Radio + Checkbox: wrapper Flex around all list items\n    'itemsContainer',\n\n    // ── Non-form component slots (untouched by the form-element refactor) ──\n    // Card / Button / generic\n    'icon', 'header', 'title', 'subTitle', 'content', 'footer',\n    // Button variants — `text` applies only to buttons with a label,\n    // `iconOnly` applies only to icon-only buttons (so styling one never\n    // affects the other).\n    'text', 'iconOnly',\n    // Table\n    'th', 'headerRow', 'headerCell', 'body', 'bodyRow', 'bodyCell',\n    'wrapper', 'table', 'tbody',\n    'filterRow', 'filterCell', 'filterClearButton',\n    'columnFilter', 'columnFilterInput',\n    'tfoot', 'footerRow', 'footerCell', 'footer', 'paginator', 'emptyMessage',\n    'loadingOverlay', 'loadingIcon',\n    'rowGroupHeader', 'rowGroupHeaderName', 'rowExpansion', 'rowGroupFooter',\n    'rowGroupToggler', 'rowGroupTogglerIcon',\n    'resizeHelper',\n    'reorderIndicatorUp', 'reorderIndicatorUpIcon',\n    'reorderIndicatorDown', 'reorderIndicatorDownIcon',\n    'tableHeader', 'searchInput',\n    'paginatorPageButton', 'paginatorPageLink', 'paginatorActivePageButton',\n    'paginatorPageReport', 'paginatorRowsPerPage', 'paginatorRowsPerPageDropdown',\n    'paginatorPages',\n    'sortedColumn', 'stripedRow', 'selectedRow', 'selectedRowAccent',\n    'filterBar', 'filterInput', 'filterLabel',\n    'toolbarRight', 'toolbarButton', 'clearFilterButton', 'columnPicker',\n    // Toolbar sizing + placeholder, and the chrome the table renders itself.\n    // NOTE: a slot missing from this allowlist is silently dropped — theming\n    // it has no effect at all — so every new slot must be listed here as\n    // well as in its component's ITableElementSlots.\n    'toolbarControl', 'filterPlaceholder',\n    'topBar', 'bulkBar', 'bulkBarText',\n    // Accordion\n    'headerActive', 'headerHover',\n    // Sidebar/Drawer\n    'headerTitle', 'closeButton', 'mask',\n    // Group (repeatable field array)\n    'row', 'addButton', 'removeButton',\n    // Header (app-shell top bar)\n    'toggleModeButton', 'avatarButton', 'breadcrumb',\n]);\n\nexport interface IElementConfig {\n    style: Record<string, any>;\n    important?: boolean | string[];\n    pseudo?: Record<string, Record<string, any>>;\n}\n\nexport interface UseComponentDefaultsResult<T> {\n    /** Props with theme defaults merged in (user props always win) */\n    mergedProps: T;\n    /**\n     * CSS style from root slot — backwards compat for components\n     * that read themeStyle instead of elementStyles.root\n     */\n    themeStyle: Record<string, any>;\n    /**\n     * Per-element style maps. Each key is a slot name, value is the\n     * merged IStyleClasses (not yet resolved to CSSProperties).\n     * Use `useResolvedElementStyles(elementStyles)` to resolve.\n     */\n    elementStyles: Record<string, Record<string, any>>;\n    /**\n     * Full slot configs including `important` and `pseudo` fields.\n     * Use this instead of `elementStyles` when you need those fields.\n     */\n    elementConfigs: Record<string, IElementConfig>;\n}\n\n/**\n * Merges theme-level component defaults with user-supplied props.\n *\n * Resolution chain (lowest → highest priority):\n *   FormElement[slot] < baseGroup[slot] < component[slot] < instanceSlots[slot] < user props\n *\n * `FormElement` is the global base group for every form element\n * (label / helperText / error live there by default). It is applied\n * to every component regardless of whether a `baseGroup` is provided\n * — for non-form components like Button or Card, FormElement slots\n * are no-ops in practice because those components don't read\n * `elementStyles.label` / `helperText` / `error`.\n *\n * Element slots (`root`, `label`, `container`, etc.) are direct keys\n * on the component config. Each slot accepts `{ props?, style? }`.\n *\n * The `root` slot's `props` are merged into `mergedProps` alongside\n * user props (user always wins). The `root` slot's `style` is returned\n * as both `themeStyle` (backwards compat) and `elementStyles.root`.\n *\n * Supports base-group inheritance: e.g. `useComponentDefaults('InputText', rawProps, 'Input')`\n * merges FormElement first, then Input base, then InputText overrides,\n * then per-instance slots, then user props.\n *\n * @example\n * const { mergedProps, themeStyle, elementStyles } = useComponentDefaults('InputText', rawProps, 'Input');\n * // mergedProps   → FormElement.root.props < Input.root.props < InputText.root.props < instanceSlots < user props\n * // elementStyles.label     → FormElement.label.style < Input.label.style < InputText.label.style < instance label\n * // elementStyles.root      → root element style (FormElement → Input → InputText → instance)\n * // elementStyles.container → container element style\n */\nexport default function useComponentDefaults<T extends Record<string, any>>(\n    componentName: string,\n    props: T,\n    baseGroup?: string,\n): UseComponentDefaultsResult<T> {\n    const {theme} = useKitsTheme();\n    // Global base for every form element. Always looked up — if not\n    // configured it is `undefined` and the merge contributes nothing.\n    const formElementConfig = theme.components.FormElement;\n    const baseConfig = baseGroup ? theme.components[baseGroup] : undefined;\n    const config = theme.components[componentName];\n\n    return useMemo(() => {\n        // Extract per-instance slot overrides from props (IFormElement.slots passed through)\n        const instanceSlots = (props as any).slots as Record<string, { props?: any; style?: any; important?: boolean | string[]; pseudo?: Record<string, Record<string, any>> }> | undefined;\n\n        if (!config && !baseConfig && !instanceSlots && !formElementConfig) {\n            return {mergedProps: props, themeStyle: {}, elementStyles: {}, elementConfigs: {}};\n        }\n\n        const formBase = (formElementConfig || {}) as Record<string, any>;\n        const base = (baseConfig || {}) as Record<string, any>;\n        const comp = (config || {}) as Record<string, any>;\n\n        // --- Props merge: FormElement.root.props < base.root.props < config.root.props < instanceSlots.root.props < user props ---\n        const merged = {\n            ...(formBase.root?.props || {}),\n            ...(base.root?.props || {}),\n            ...(comp.root?.props || {}),\n            ...(instanceSlots?.root?.props || {}),\n        } as Record<string, any>;\n\n        for (const key of Object.keys(props)) {\n            // Skip 'slots' — it is consumed here, not forwarded\n            if (key === 'slots') continue;\n            if (props[key] !== undefined) {\n                merged[key] = props[key];\n            }\n        }\n\n        // --- Element styles merge: FormElement[slot] < base[slot] < config[slot] < instanceSlots[slot] ---\n        const allSlotKeys = new Set<string>();\n        for (const key of Object.keys(formBase)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        for (const key of Object.keys(base)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        for (const key of Object.keys(comp)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        if (instanceSlots) {\n            for (const key of Object.keys(instanceSlots)) {\n                if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n            }\n        }\n\n        const elementStyles: Record<string, Record<string, any>> = {};\n        const elementConfigs: Record<string, IElementConfig> = {};\n        for (const slotKey of allSlotKeys) {\n            const style = {\n                ...(formBase[slotKey]?.style || {}),\n                ...(base[slotKey]?.style || {}),\n                ...(comp[slotKey]?.style || {}),\n                ...(instanceSlots?.[slotKey]?.style || {}),\n            };\n            elementStyles[slotKey] = style;\n\n            const pseudoMerged = {\n                ...(formBase[slotKey]?.pseudo || {}),\n                ...(base[slotKey]?.pseudo || {}),\n                ...(comp[slotKey]?.pseudo || {}),\n                ...(instanceSlots?.[slotKey]?.pseudo || {}),\n            };\n            elementConfigs[slotKey] = {\n                style,\n                important:\n                    instanceSlots?.[slotKey]?.important ??\n                    comp[slotKey]?.important ??\n                    base[slotKey]?.important ??\n                    formBase[slotKey]?.important,\n                pseudo: Object.keys(pseudoMerged).length > 0 ? pseudoMerged : undefined,\n            };\n        }\n\n        // themeStyle = root element style (backwards compat)\n        const themeStyle = elementStyles.root || {};\n\n        return {\n            mergedProps: merged as T,\n            themeStyle,\n            elementStyles,\n            elementConfigs,\n        };\n    }, [formElementConfig, baseConfig, config, props]);\n}\n"],"names":["useKitsTheme","useMemo"],"mappings":"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"}
+{"version":3,"file":"useComponentDefaults.cjs","sources":["../../../src/hooks/useComponentDefaults.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\n\n/**\n * Known element slot keys. When a config key matches one of these\n * AND the value has `props` or `style`, it is treated as an element slot.\n *\n * To add a new slot: add the key here AND to the relevant slot interface\n * in packages/types/src/Theme/types.ts (and to the `AllSlotKeys` union).\n *\n * The order below mirrors the typed slot hierarchy in\n * `packages/types/src/Theme/types.ts`.\n */\nconst ELEMENT_SLOT_KEYS = new Set([\n    // ── Form-element slots ──────────────────────────────────\n    // Base (all form elements — IFormElementBaseSlots)\n    'label', 'helperText', 'error',\n    // Text input specific (ITextInputSlots — also shared by ISelectSlots)\n    'root', 'container', 'inputGroup', 'leftAddon', 'rightAddon',\n    // Select specific (ISelectSlots — option-list popover)\n    // Radio / Checkbox also use `item` / `itemSelected` / `itemDisabled` /\n    // `itemHover` for the per-list-item wrapper, plus `itemInvalid`.\n    'panel', 'item', 'itemSelected', 'itemFocused', 'itemHover', 'itemDisabled', 'itemInvalid',\n    // Chip-bearing selects (IChipInputSlots — MultiSelect display=\"chip\"\n    // AND AutoComplete/Tags with isMultiple). `tokenContainer` is the\n    // bordered box that holds the chips and the caret — see the docblock\n    // on IChipInputSlots for why it is neither `root` nor `container`.\n    'tokenContainer', 'token', 'tokenIcon',\n    // MultiSelect specific (IMultiSelectSlots — per-item checkbox)\n    'checkboxBox', 'checkboxBoxChecked', 'checkboxIcon',\n    // Datepicker specific (IDatepickerSlots — calendar popup; `panel` shared with Select)\n    'calendarHeader', 'calendarNavButton', 'weekDay',\n    'dayCell', 'daySelected', 'dayToday', 'dayDisabled',\n    // Switch specific (ISwitchSlots) — RENAMED from slider/sliderChecked/thumbChecked\n    'track', 'trackOn', 'thumb', 'thumbOn',\n    // Checkbox specific (ICheckboxSlots)\n    'box', 'boxChecked', 'checkIcon',\n    // Radio specific (IRadioSlots)\n    'circle', 'circleInner',\n    // Radio + Checkbox: wrapper Flex around all list items\n    'itemsContainer',\n\n    // ── Non-form component slots (untouched by the form-element refactor) ──\n    // Card / Button / generic\n    'icon', 'header', 'title', 'subTitle', 'content', 'footer',\n    // Button variants — `text` applies only to buttons with a label,\n    // `iconOnly` applies only to icon-only buttons (so styling one never\n    // affects the other).\n    'text', 'iconOnly',\n    // Table\n    'th', 'headerRow', 'headerCell', 'body', 'bodyRow', 'bodyCell',\n    'wrapper', 'table', 'tbody',\n    'filterRow', 'filterCell', 'filterClearButton',\n    'columnFilter', 'columnFilterInput',\n    'tfoot', 'footerRow', 'footerCell', 'footer', 'paginator', 'emptyMessage',\n    'loadingOverlay', 'loadingIcon',\n    'rowGroupHeader', 'rowGroupHeaderName', 'rowExpansion', 'rowGroupFooter',\n    'rowGroupToggler', 'rowGroupTogglerIcon',\n    'resizeHelper',\n    'reorderIndicatorUp', 'reorderIndicatorUpIcon',\n    'reorderIndicatorDown', 'reorderIndicatorDownIcon',\n    'tableHeader', 'searchInput',\n    'paginatorPageButton', 'paginatorPageLink', 'paginatorActivePageButton',\n    'paginatorPageReport', 'paginatorRowsPerPage', 'paginatorRowsPerPageDropdown',\n    'paginatorPages',\n    'sortedColumn', 'stripedRow', 'selectedRow', 'selectedRowAccent',\n    'filterBar', 'filterInput', 'filterLabel',\n    'toolbarRight', 'toolbarButton', 'clearFilterButton', 'columnPicker',\n    // Toolbar sizing + placeholder, and the chrome the table renders itself.\n    // NOTE: a slot missing from this allowlist is silently dropped — theming\n    // it has no effect at all — so every new slot must be listed here as\n    // well as in its component's ITableElementSlots.\n    'toolbarControl', 'filterPlaceholder',\n    'topBar', 'bulkBar', 'bulkBarText',\n    // Accordion\n    'headerActive', 'headerHover',\n    // Sidebar/Drawer\n    'headerTitle', 'closeButton', 'mask',\n    // Group (repeatable field array)\n    'row', 'addButton', 'removeButton',\n    // Header (app-shell top bar)\n    'toggleModeButton', 'avatarButton', 'breadcrumb',\n]);\n\nexport interface IElementConfig {\n    style: Record<string, any>;\n    /**\n     * Extra attributes for this slot's element — `className`, `data-*`,\n     * `aria-*`, anything the platform element accepts. Merged across the\n     * whole chain (FormElement < baseGroup < component < instance slots),\n     * with `className` CONCATENATED rather than replaced.\n     */\n    props: Record<string, any>;\n    important?: boolean | string[];\n    pseudo?: Record<string, Record<string, any>>;\n}\n\nexport interface UseComponentDefaultsResult<T> {\n    /** Props with theme defaults merged in (user props always win) */\n    mergedProps: T;\n    /**\n     * CSS style from root slot — backwards compat for components\n     * that read themeStyle instead of elementStyles.root\n     */\n    themeStyle: Record<string, any>;\n    /**\n     * Per-element style maps. Each key is a slot name, value is the\n     * merged IStyleClasses (not yet resolved to CSSProperties).\n     * Use `useResolvedElementStyles(elementStyles)` to resolve.\n     */\n    elementStyles: Record<string, Record<string, any>>;\n    /**\n     * Per-element extra attributes. Each key is a slot name, value is the\n     * merged `props` for that slot (`className`, `data-*`, `aria-*`, …).\n     *\n     * ⛔ EVERY SLOT, NOT JUST `root` — THAT WAS THE BUG. `IElementSlotConfig`\n     * has advertised `props` on every slot since the slot system landed, but\n     * only `root.props` was ever read (it is folded into `mergedProps`).\n     * Anything a consumer put on another slot — the class a portal needs on a\n     * tags field's outer box to make it match a text input — was parsed,\n     * merged, and then thrown away with no warning and no type error.\n     * Components apply `elementProps[slot]` to the matching element.\n     */\n    elementProps: Record<string, Record<string, any>>;\n    /**\n     * Full slot configs including `props`, `important` and `pseudo` fields.\n     * Use this instead of `elementStyles` when you need those fields.\n     */\n    elementConfigs: Record<string, IElementConfig>;\n}\n\n/**\n * Merges slot `props` layers. Everything is last-wins EXCEPT `className`,\n * which is concatenated — a theme-level class and a consumer's class are\n * additive by nature, and dropping one of them is exactly the fault this\n * whole plumbing exists to fix.\n */\nfunction mergeSlotProps(layers: Array<Record<string, any> | undefined>): Record<string, any> {\n    const out: Record<string, any> = {};\n    const classes: string[] = [];\n    for (const layer of layers) {\n        if (!layer) continue;\n        for (const [key, value] of Object.entries(layer)) {\n            if (value === undefined) continue;\n            if (key === 'className') {\n                if (value) classes.push(String(value));\n            } else {\n                out[key] = value;\n            }\n        }\n    }\n    if (classes.length) {\n        // De-duplicated, so a class repeated down the chain lands once.\n        out.className = Array.from(new Set(classes.join(' ').split(/\\s+/).filter(Boolean))).join(' ');\n    }\n    return out;\n}\n\n/**\n * Merges theme-level component defaults with user-supplied props.\n *\n * Resolution chain (lowest → highest priority):\n *   FormElement[slot] < baseGroup[slot] < component[slot] < instanceSlots[slot] < user props\n *\n * `FormElement` is the global base group for every form element\n * (label / helperText / error live there by default). It is applied\n * to every component regardless of whether a `baseGroup` is provided\n * — for non-form components like Button or Card, FormElement slots\n * are no-ops in practice because those components don't read\n * `elementStyles.label` / `helperText` / `error`.\n *\n * Element slots (`root`, `label`, `container`, etc.) are direct keys\n * on the component config. Each slot accepts `{ props?, style? }`.\n *\n * The `root` slot's `props` are merged into `mergedProps` alongside\n * user props (user always wins, except `className`, which concatenates).\n * The `root` slot's `style` is returned as both `themeStyle` (backwards\n * compat) and `elementStyles.root`.\n *\n * EVERY OTHER slot's `props` come back on `elementProps[slot]` — the\n * component is responsible for spreading them onto the element that slot\n * names. Before that existed, `props` on a non-root slot was silently\n * discarded, which is how a consumer's class on a tags field's outer box\n * disappeared without a single error.\n *\n * Supports base-group inheritance: e.g. `useComponentDefaults('InputText', rawProps, 'Input')`\n * merges FormElement first, then Input base, then InputText overrides,\n * then per-instance slots, then user props.\n *\n * @example\n * const { mergedProps, themeStyle, elementStyles } = useComponentDefaults('InputText', rawProps, 'Input');\n * // mergedProps   → FormElement.root.props < Input.root.props < InputText.root.props < instanceSlots < user props\n * // elementStyles.label     → FormElement.label.style < Input.label.style < InputText.label.style < instance label\n * // elementStyles.root      → root element style (FormElement → Input → InputText → instance)\n * // elementStyles.container → container element style\n */\nexport default function useComponentDefaults<T extends Record<string, any>>(\n    componentName: string,\n    props: T,\n    baseGroup?: string,\n): UseComponentDefaultsResult<T> {\n    const {theme} = useKitsTheme();\n    // Global base for every form element. Always looked up — if not\n    // configured it is `undefined` and the merge contributes nothing.\n    const formElementConfig = theme.components.FormElement;\n    const baseConfig = baseGroup ? theme.components[baseGroup] : undefined;\n    const config = theme.components[componentName];\n\n    return useMemo(() => {\n        // Extract per-instance slot overrides from props (IFormElement.slots passed through)\n        const instanceSlots = (props as any).slots as Record<string, { props?: any; style?: any; important?: boolean | string[]; pseudo?: Record<string, Record<string, any>> }> | undefined;\n\n        if (!config && !baseConfig && !instanceSlots && !formElementConfig) {\n            return {mergedProps: props, themeStyle: {}, elementStyles: {}, elementProps: {}, elementConfigs: {}};\n        }\n\n        const formBase = (formElementConfig || {}) as Record<string, any>;\n        const base = (baseConfig || {}) as Record<string, any>;\n        const comp = (config || {}) as Record<string, any>;\n\n        // --- Props merge: FormElement.root.props < base.root.props < config.root.props < instanceSlots.root.props < user props ---\n        const merged = mergeSlotProps([\n            formBase.root?.props,\n            base.root?.props,\n            comp.root?.props,\n            instanceSlots?.root?.props,\n        ]);\n\n        const userClassName = typeof (props as any).className === 'string' ? (props as any).className : undefined;\n        for (const key of Object.keys(props)) {\n            // Skip 'slots' — it is consumed here, not forwarded\n            if (key === 'slots') continue;\n            // className is additive, not a replacement: a theme-level class on\n            // `root.props` and the consumer's own class both have to survive.\n            if (key === 'className') continue;\n            if (props[key] !== undefined) {\n                merged[key] = props[key];\n            }\n        }\n        if (userClassName || merged.className) {\n            merged.className = mergeSlotProps([\n                {className: merged.className},\n                {className: userClassName},\n            ]).className;\n        }\n\n        // --- Element styles merge: FormElement[slot] < base[slot] < config[slot] < instanceSlots[slot] ---\n        const allSlotKeys = new Set<string>();\n        for (const key of Object.keys(formBase)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        for (const key of Object.keys(base)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        for (const key of Object.keys(comp)) {\n            if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n        }\n        if (instanceSlots) {\n            for (const key of Object.keys(instanceSlots)) {\n                if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);\n            }\n        }\n\n        const elementStyles: Record<string, Record<string, any>> = {};\n        const elementProps: Record<string, Record<string, any>> = {};\n        const elementConfigs: Record<string, IElementConfig> = {};\n        for (const slotKey of allSlotKeys) {\n            const style = {\n                ...(formBase[slotKey]?.style || {}),\n                ...(base[slotKey]?.style || {}),\n                ...(comp[slotKey]?.style || {}),\n                ...(instanceSlots?.[slotKey]?.style || {}),\n            };\n            elementStyles[slotKey] = style;\n\n            const slotProps = mergeSlotProps([\n                formBase[slotKey]?.props,\n                base[slotKey]?.props,\n                comp[slotKey]?.props,\n                instanceSlots?.[slotKey]?.props,\n            ]);\n            elementProps[slotKey] = slotProps;\n\n            const pseudoMerged = {\n                ...(formBase[slotKey]?.pseudo || {}),\n                ...(base[slotKey]?.pseudo || {}),\n                ...(comp[slotKey]?.pseudo || {}),\n                ...(instanceSlots?.[slotKey]?.pseudo || {}),\n            };\n            elementConfigs[slotKey] = {\n                style,\n                props: slotProps,\n                important:\n                    instanceSlots?.[slotKey]?.important ??\n                    comp[slotKey]?.important ??\n                    base[slotKey]?.important ??\n                    formBase[slotKey]?.important,\n                pseudo: Object.keys(pseudoMerged).length > 0 ? pseudoMerged : undefined,\n            };\n        }\n\n        // themeStyle = root element style (backwards compat)\n        const themeStyle = elementStyles.root || {};\n\n        return {\n            mergedProps: merged as T,\n            themeStyle,\n            elementStyles,\n            elementProps,\n            elementConfigs,\n        };\n    }, [formElementConfig, baseConfig, config, props]);\n}\n"],"names":["useKitsTheme","useMemo"],"mappings":"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"}

package/hooks/useComponentDefaults.js

@@ -23,9 +23,14 @@ const ELEMENT_SLOT_KEYS = /* @__PURE__ */ new Set([
   "itemHover",
   "itemDisabled",
   "itemInvalid",
-  // MultiSelect specific (IMultiSelectSlots — chips + per-item checkbox)
+  // Chip-bearing selects (IChipInputSlots — MultiSelect display="chip"
+  // AND AutoComplete/Tags with isMultiple). `tokenContainer` is the
+  // bordered box that holds the chips and the caret — see the docblock
+  // on IChipInputSlots for why it is neither `root` nor `container`.
+  "tokenContainer",
   "token",
   "tokenIcon",
+  // MultiSelect specific (IMultiSelectSlots — per-item checkbox)
   "checkboxBox",
   "checkboxBoxChecked",
   "checkboxIcon",
@@ -143,6 +148,25 @@ const ELEMENT_SLOT_KEYS = /* @__PURE__ */ new Set([
   "avatarButton",
   "breadcrumb"
 ]);
+function mergeSlotProps(layers) {
+  const out = {};
+  const classes = [];
+  for (const layer of layers) {
+    if (!layer) continue;
+    for (const [key, value] of Object.entries(layer)) {
+      if (value === void 0) continue;
+      if (key === "className") {
+        if (value) classes.push(String(value));
+      } else {
+        out[key] = value;
+      }
+    }
+  }
+  if (classes.length) {
+    out.className = Array.from(new Set(classes.join(" ").split(/\s+/).filter(Boolean))).join(" ");
+  }
+  return out;
+}
 function useComponentDefaults(componentName, props, baseGroup) {
   const { theme } = useKitsTheme();
   const formElementConfig = theme.components.FormElement;
@@ -151,23 +175,31 @@ function useComponentDefaults(componentName, props, baseGroup) {
   return useMemo(() => {
     const instanceSlots = props.slots;
     if (!config && !baseConfig && !instanceSlots && !formElementConfig) {
-      return { mergedProps: props, themeStyle: {}, elementStyles: {}, elementConfigs: {} };
+      return { mergedProps: props, themeStyle: {}, elementStyles: {}, elementProps: {}, elementConfigs: {} };
     }
     const formBase = formElementConfig || {};
     const base = baseConfig || {};
     const comp = config || {};
-    const merged = {
-      ...formBase.root?.props || {},
-      ...base.root?.props || {},
-      ...comp.root?.props || {},
-      ...instanceSlots?.root?.props || {}
-    };
+    const merged = mergeSlotProps([
+      formBase.root?.props,
+      base.root?.props,
+      comp.root?.props,
+      instanceSlots?.root?.props
+    ]);
+    const userClassName = typeof props.className === "string" ? props.className : void 0;
     for (const key of Object.keys(props)) {
       if (key === "slots") continue;
+      if (key === "className") continue;
       if (props[key] !== void 0) {
         merged[key] = props[key];
       }
     }
+    if (userClassName || merged.className) {
+      merged.className = mergeSlotProps([
+        { className: merged.className },
+        { className: userClassName }
+      ]).className;
+    }
     const allSlotKeys = /* @__PURE__ */ new Set();
     for (const key of Object.keys(formBase)) {
       if (ELEMENT_SLOT_KEYS.has(key)) allSlotKeys.add(key);
@@ -184,6 +216,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       }
     }
     const elementStyles = {};
+    const elementProps = {};
     const elementConfigs = {};
     for (const slotKey of allSlotKeys) {
       const style = {
@@ -193,6 +226,13 @@ function useComponentDefaults(componentName, props, baseGroup) {
         ...instanceSlots?.[slotKey]?.style || {}
       };
       elementStyles[slotKey] = style;
+      const slotProps = mergeSlotProps([
+        formBase[slotKey]?.props,
+        base[slotKey]?.props,
+        comp[slotKey]?.props,
+        instanceSlots?.[slotKey]?.props
+      ]);
+      elementProps[slotKey] = slotProps;
       const pseudoMerged = {
         ...formBase[slotKey]?.pseudo || {},
         ...base[slotKey]?.pseudo || {},
@@ -201,6 +241,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       };
       elementConfigs[slotKey] = {
         style,
+        props: slotProps,
         important: instanceSlots?.[slotKey]?.important ?? comp[slotKey]?.important ?? base[slotKey]?.important ?? formBase[slotKey]?.important,
         pseudo: Object.keys(pseudoMerged).length > 0 ? pseudoMerged : void 0
       };
@@ -210,6 +251,7 @@ function useComponentDefaults(componentName, props, baseGroup) {
       mergedProps: merged,
       themeStyle,
       elementStyles,
+      elementProps,
       elementConfigs
     };
   }, [formElementConfig, baseConfig, config, props]);