@max-ts/kit 1.5.1 → 1.5.3

package/lib/components/DataGrid/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type DataGridColumn<TRow> = {
-    title: string;
+    label: string;
     field?: keyof TRow;
     width?: number | string;
     align?: 'left' | 'center' | 'right' | 'justify';

package/lib/components/DataGridSortHeader/DataGridSortHeader.d.ts

@@ -6,5 +6,5 @@ export type DataGridSortHeaderProps<TData> = {
     setSorting: (sorting: DataGridSorting<TData>) => void;
     className?: string;
 };
-export declare function DataGridSortHeader<TData>({ sorting, setSorting, column: { title, field, align }, className, }: DataGridSortHeaderProps<TData>): import("react").JSX.Element | null;
+export declare function DataGridSortHeader<TData>({ sorting, setSorting, column: { label, field, align }, className, }: DataGridSortHeaderProps<TData>): import("react").JSX.Element | null;
 //# sourceMappingURL=DataGridSortHeader.d.ts.map

package/lib/components/Select/Select.d.ts

@@ -1,8 +1,8 @@
 import type { SelectProps } from './types';
-declare function Select<Value = string, Multiple extends boolean | undefined = false>({ onValueChange, ...props }: SelectProps.Root<Value, Multiple>): import("react").JSX.Element;
+declare function Select<Value = string, Multiple extends boolean | undefined = false>({ defaultValue, disabled, isItemEqualToValue, itemToStringLabel, items, multiple, onValueChange, value: valueProp, ...props }: SelectProps.Root<Value, Multiple>): import("react").JSX.Element;
 declare namespace Select {
-    var Trigger: ({ className, children, size, ...props }: SelectProps.Trigger) => import("react").JSX.Element;
-    var Value: ({ ...props }: SelectProps.Value) => import("react").JSX.Element;
+    var Trigger: ({ className, children, render, size, ...props }: SelectProps.Trigger) => import("react").JSX.Element;
+    var Value: ({ className, children, placeholder, ...props }: SelectProps.Value) => import("react").JSX.Element;
     var Content: ({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, position, ...props }: SelectProps.Content) => import("react").JSX.Element;
     var Group: ({ ...props }: SelectProps.Group) => import("react").JSX.Element;
     var Label: ({ className, ...props }: SelectProps.Label) => import("react").JSX.Element;

package/lib/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,iBAAS,MAAM,CAAC,KAAK,GAAG,MAAM,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,EAC7E,aAAa,EACb,GAAG,KAAK,EACR,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,+BAYnC;kBAfQ,MAAM;2DA8BZ,WAAW,CAAC,OAAO;8BATO,WAAW,CAAC,KAAK;2HA+D3C,WAAW,CAAC,OAAO;8BAnEO,WAAW,CAAC,KAAK;yCAoGN,WAAW,CAAC,KAAK;kDAUR,WAAW,CAAC,IAAI;oDAjE9D,WAAW,CAAC,gBAAgB;kDAfkB,WAAW,CAAC,cAAc;6CAoG/B,WAAW,CAAC,SAAS;;AAoBjE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAS3C,iBAAS,MAAM,CAAC,KAAK,GAAG,MAAM,EAAE,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAAE,EAC7E,YAAY,EACZ,QAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EAAE,SAAS,EAChB,GAAG,KAAK,EACR,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,+BA+BnC;kBAzCQ,MAAM;mEA8FZ,WAAW,CAAC,OAAO;gEA1CnB,WAAW,CAAC,KAAK;2HAkGjB,WAAW,CAAC,OAAO;8BA3GO,WAAW,CAAC,KAAK;yCA4IN,WAAW,CAAC,KAAK;kDAUR,WAAW,CAAC,IAAI;oDAjE9D,WAAW,CAAC,gBAAgB;kDAfkB,WAAW,CAAC,cAAc;6CAoG/B,WAAW,CAAC,SAAS;;AAoGjE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/components/Select/styles.css.d.ts

@@ -1,4 +1,10 @@
 export declare const trigger: string;
+export declare const value: string;
+export declare const chipsValue: string;
+export declare const chipsMeasure: string;
+export declare const chip: string;
+export declare const chipLabel: string;
+export declare const chipRemove: string;
 export declare const scrollButton: string;
 export declare const positioner: string;
 export declare const content: string;

package/lib/components/Select/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,OAAO,QAwClB,CAAC;AAQH,eAAO,MAAM,YAAY,QAMvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,OAAO,QAgClB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAInB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAsBf,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAQ/B,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,OAAO,QA4ClB,CAAC;AAQH,eAAO,MAAM,KAAK,QAMhB,CAAC;AAEH,eAAO,MAAM,UAAU,QAQrB,CAAC;AAEH,eAAO,MAAM,YAAY,QASvB,CAAC;AAEH,eAAO,MAAM,IAAI,QAef,CAAC;AAMH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,UAAU,QAwBrB,CAAC;AAQH,eAAO,MAAM,YAAY,QAMvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,OAAO,QAgClB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAInB,CAAC;AAEH,eAAO,MAAM,KAAK,QAIhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAsBf,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAQ/B,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC"}

package/lib/components/Select/useLogic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useLogic';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Select/useLogic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/useLogic/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/lib/components/Select/useLogic/useLogic.d.ts

@@ -0,0 +1,28 @@
+import type { Select as SelectPrimitive } from '@base-ui/react/select';
+import { type MouseEvent, type ReactNode } from 'react';
+import type { SelectProps } from '../types';
+type SelectContextValue = {
+    disabled: boolean;
+    getLabel: (value: unknown) => ReactNode;
+    multiple: boolean;
+    removeValue: (value: unknown, event: MouseEvent<HTMLButtonElement>) => void;
+    value: unknown;
+};
+declare const SelectContext: import("react").Context<SelectContextValue | null>;
+export declare function getValueKey(value: unknown): string;
+export declare function useSelectContext(): SelectContextValue;
+export declare function useRootLogic<Value = string, Multiple extends boolean | undefined = false>({ defaultValue, disabled, isItemEqualToValue, itemToStringLabel, items, multiple, onValueChange, value: valueProp, }: SelectProps.Root<Value, Multiple>): {
+    contextValue: SelectContextValue;
+    handleValueChange: (nextValue: unknown, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void;
+    value: unknown;
+};
+export declare function useChipsValueLogic(values: unknown[]): {
+    containerRef: import("react").RefObject<HTMLSpanElement | null>;
+    getLabel: (value: unknown) => ReactNode;
+    hiddenCount: number;
+    measureRef: import("react").RefObject<HTMLSpanElement | null>;
+    overflowMeasureRef: import("react").RefObject<HTMLSpanElement | null>;
+    visibleValues: unknown[];
+};
+export { SelectContext };
+//# sourceMappingURL=useLogic.d.ts.map

package/lib/components/Select/useLogic/useLogic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/useLogic/useLogic.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAEN,KAAK,UAAU,EACf,KAAK,SAAS,EAQd,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,SAAS,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC5E,KAAK,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,aAAa,oDAAiD,CAAC;AAUrE,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,UAEzC;AAED,wBAAgB,gBAAgB,uBAQ/B;AAED,wBAAgB,YAAY,CAC3B,KAAK,GAAG,MAAM,EACd,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC3C,EACD,YAAY,EACZ,QAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EAAE,SAAS,GAChB,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC;;mCAStB,OAAO,gBACJ,eAAe,CAAC,IAAI,CAAC,kBAAkB;;EAyDvD;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE;;sBA/GjC,OAAO,KAAK,SAAS;;;;;EAwLvC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/index.mjs

@@ -25,7 +25,10 @@ import { Toaster, toast } from "sonner";
 import { RadioGroup as radio_group_RadioGroup } from "@base-ui/react/radio-group";
 import { Radio } from "@base-ui/react/radio";
 import { Slider } from "@base-ui/react/slider";
+import { resolveSelectedLabel, stringifyAsLabel } from "@base-ui/react/internals/resolveValueLabel";
 import { Select } from "@base-ui/react/select";
+import { createChangeEventDetails } from "@base-ui/react/internals/createBaseUIEventDetails";
+import { REASONS } from "@base-ui/react/internals/reasons";
 import { Tabs } from "@base-ui/react/tabs";
 import * as __rspack_external_react from "react";
 var __webpack_require__ = {};
@@ -2095,7 +2098,7 @@ function Row({ row, rowHeight, onRowClick, columns, rowIndex, rowId }) {
         })
     });
 }
-var container = 'style__15m2ib80';
+var styles_css_container = 'style__15m2ib80';
 var loader = 'style__15m2ib81';
 function State({ isLoading, isEmpty, columnsLength, emptyState = {
     text: 'Нет данных'
@@ -2103,7 +2106,7 @@ function State({ isLoading, isEmpty, columnsLength, emptyState = {
     text: 'Произошла ошибка'
 }, isError, onRetry }) {
     const Container = ({ children })=>/*#__PURE__*/ jsx("tr", {
-            className: container,
+            className: styles_css_container,
             children: /*#__PURE__*/ jsx("td", {
                 colSpan: columnsLength,
                 align: "center",
@@ -2143,12 +2146,12 @@ function State({ isLoading, isEmpty, columnsLength, emptyState = {
     }
     return null;
 }
-var styles_css_container = 'style__82af400';
+var Body_styles_css_container = 'style__82af400';
 function Body({ isError, isLoading, emptyState, errorState, columns, rows, rowHeight, keyId, onRowClick }) {
     const isEmpty = 0 === rows.length;
     const isStateVisible = isError || isLoading || isEmpty;
     return isStateVisible ? /*#__PURE__*/ jsx("tbody", {
-        className: styles_css_container,
+        className: Body_styles_css_container,
         children: /*#__PURE__*/ jsx(State, {
             emptyState: emptyState,
             errorState: errorState,
@@ -2158,7 +2161,7 @@ function Body({ isError, isLoading, emptyState, errorState, columns, rows, rowHe
             columnsLength: columns.length
         })
     }) : /*#__PURE__*/ jsx("tbody", {
-        className: styles_css_container,
+        className: Body_styles_css_container,
         children: rows.map((row, index)=>{
             const rowId = String(row[keyId]);
             return /*#__PURE__*/ jsx(Row, {
@@ -2188,9 +2191,9 @@ function HeaderCell({ column, height, width }) {
             width
         },
         align: column.align ?? 'left',
-        title: column.title,
+        title: column.label,
         className: headerCellClass,
-        children: column.renderHeaderCell?.(column) || column.title
+        children: column.renderHeaderCell?.(column) || column.label
     });
 }
 var headerRow = 'style__fkgoub0';
@@ -2202,7 +2205,7 @@ function Header_Header({ columns, height }) {
                     column: col,
                     height: height,
                     width: col.width
-                }, col.title))
+                }, col.label))
         })
     });
 }
@@ -2607,7 +2610,7 @@ var styles_css_alignments = {
     justify: 'justify__o752f04'
 };
 var DataGridSortHeader_styles_css_wrapper = 'style__o752f00';
-function DataGridSortHeader({ sorting, setSorting, column: { title, field, align = 'left' }, className }) {
+function DataGridSortHeader({ sorting, setSorting, column: { label, field, align = 'left' }, className }) {
     if (!field) return null;
     const handleClick = ()=>{
         sorting.key === field ? setSorting({
@@ -2623,7 +2626,7 @@ function DataGridSortHeader({ sorting, setSorting, column: { title, field, align
         className: clsx(DataGridSortHeader_styles_css_wrapper, styles_css_alignments[align], className),
         onClick: handleClick,
         children: [
-            title,
+            label,
             sorting.key === field ? 'asc' === sorting.order ? /*#__PURE__*/ jsx(ArrowDownNarrowWide, {
                 size: 16
             }) : /*#__PURE__*/ jsx(ArrowDownWideNarrow, {
@@ -4274,24 +4277,161 @@ function ScrollTopButton({ onClick, variant = 'outline', ...props }) {
         children: /*#__PURE__*/ jsx(ChevronUp, {})
     });
 }
-var chevron = 'style__5ilg7oc';
-var Select_styles_css_content = 'style__5ilg7o5';
-var Select_styles_css_icon = 'style__5ilg7ob';
-var Select_styles_css_item = 'style__5ilg7o8';
-var itemIndicatorWrapper = 'style__5ilg7o9';
-var Select_styles_css_label = 'style__5ilg7o7';
-var Select_styles_css_positioner = 'style__5ilg7o4';
-var scrollButton = 'style__5ilg7o3';
-var Select_styles_css_separator = 'style__5ilg7oa';
+var chevron = 'style__5ilg7oi';
+var styles_css_chip = 'style__5ilg7o6';
+var chipLabel = 'style__5ilg7o7';
+var styles_css_chipRemove = 'style__5ilg7o8';
+var chipsMeasure = 'style__5ilg7o5';
+var chipsValue = 'style__5ilg7o4';
+var Select_styles_css_content = 'style__5ilg7ob';
+var Select_styles_css_icon = 'style__5ilg7oh';
+var Select_styles_css_item = 'style__5ilg7oe';
+var itemIndicatorWrapper = 'style__5ilg7of';
+var Select_styles_css_label = 'style__5ilg7od';
+var Select_styles_css_positioner = 'style__5ilg7oa';
+var scrollButton = 'style__5ilg7o9';
+var Select_styles_css_separator = 'style__5ilg7og';
 var Select_styles_css_trigger = 'style__5ilg7o2';
-var Select_styles_css_viewport = 'style__5ilg7o6';
-function Select_Select({ onValueChange, ...props }) {
-    return /*#__PURE__*/ jsx(Select.Root, {
-        "data-slot": "select",
-        ...props,
-        onValueChange: (value, eventDetails)=>{
-            if (null !== value) onValueChange?.(value, eventDetails);
+var styles_css_value = 'style__5ilg7o3';
+var Select_styles_css_viewport = 'style__5ilg7oc';
+const SelectContext = createContext(null);
+function getInitialValue({ defaultValue, multiple }) {
+    if (void 0 !== defaultValue) return defaultValue;
+    return multiple ? [] : null;
+}
+function getValueKey(value) {
+    return stringifyAsLabel(value);
+}
+function useSelectContext() {
+    const context = useContext(SelectContext);
+    if (!context) throw new Error('useSelectContext must be used within a <Select />');
+    return context;
+}
+function useRootLogic({ defaultValue, disabled = false, isItemEqualToValue, itemToStringLabel, items, multiple, onValueChange, value: valueProp }) {
+    const isControlled = void 0 !== valueProp;
+    const [internalValue, setInternalValue] = useState(()=>getInitialValue({
+            defaultValue,
+            multiple
+        }));
+    const value = isControlled ? valueProp : internalValue;
+    const handleValueChange = useCallback((nextValue, eventDetails)=>{
+        if (!isControlled) setInternalValue(nextValue);
+        onValueChange?.(nextValue, eventDetails);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const contextValue = useMemo(()=>({
+            disabled,
+            getLabel: (itemValue)=>resolveSelectedLabel(itemValue, items, itemToStringLabel),
+            multiple: Boolean(multiple),
+            removeValue: (itemValue, event)=>{
+                event.preventDefault();
+                event.stopPropagation();
+                const currentValue = Array.isArray(value) ? value : [];
+                const nextValue = currentValue.filter((selectedValue)=>{
+                    const isEqual = isItemEqualToValue ?? Object.is;
+                    return !isEqual(itemValue, selectedValue);
+                });
+                handleValueChange(nextValue, createChangeEventDetails(REASONS.chipRemovePress, event.nativeEvent, event.currentTarget));
+            },
+            value
+        }), [
+        disabled,
+        handleValueChange,
+        isItemEqualToValue,
+        itemToStringLabel,
+        items,
+        multiple,
+        value
+    ]);
+    return {
+        contextValue,
+        handleValueChange,
+        value
+    };
+}
+function useChipsValueLogic(values) {
+    const { getLabel } = useSelectContext();
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
+    const overflowMeasureRef = useRef(null);
+    const [visibleCount, setVisibleCount] = useState(values.length);
+    const updateVisibleCount = useCallback(()=>{
+        const container = containerRef.current;
+        const measure = measureRef.current;
+        const overflowMeasure = overflowMeasureRef.current;
+        if (!container || !measure || !overflowMeasure) return;
+        const chipElements = Array.from(measure.querySelectorAll('[data-chip-measure="chip"]'));
+        const stylesDeclaration = window.getComputedStyle(measure);
+        const gap = Number.parseFloat(stylesDeclaration.columnGap || '0') || 0;
+        const availableWidth = container.clientWidth;
+        const chipWidths = chipElements.map((element)=>element.offsetWidth);
+        const totalWidth = chipWidths.reduce((total, width, index)=>total + width + (index > 0 ? gap : 0), 0);
+        if (totalWidth <= availableWidth) return void setVisibleCount(values.length);
+        const overflowWidth = overflowMeasure.offsetWidth;
+        const availableForChips = Math.max(0, availableWidth - overflowWidth - gap);
+        let nextVisibleCount = 0;
+        let usedWidth = 0;
+        for (const chipWidth of chipWidths){
+            const nextWidth = usedWidth + chipWidth + (nextVisibleCount > 0 ? gap : 0);
+            if (nextWidth > availableForChips) break;
+            usedWidth = nextWidth;
+            nextVisibleCount += 1;
         }
+        setVisibleCount(nextVisibleCount);
+    }, [
+        values.length
+    ]);
+    useLayoutEffect(()=>{
+        updateVisibleCount();
+    }, [
+        updateVisibleCount
+    ]);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container || "u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(updateVisibleCount);
+        observer.observe(container);
+        return ()=>observer.disconnect();
+    }, [
+        updateVisibleCount
+    ]);
+    return {
+        containerRef,
+        getLabel,
+        hiddenCount: Math.max(0, values.length - visibleCount),
+        measureRef,
+        overflowMeasureRef,
+        visibleValues: values.slice(0, visibleCount)
+    };
+}
+function Select_Select({ defaultValue, disabled = false, isItemEqualToValue, itemToStringLabel, items, multiple, onValueChange, value: valueProp, ...props }) {
+    const { contextValue, handleValueChange, value } = useRootLogic({
+        defaultValue,
+        disabled,
+        isItemEqualToValue,
+        itemToStringLabel,
+        items,
+        multiple,
+        onValueChange,
+        value: valueProp
+    });
+    return /*#__PURE__*/ jsx(SelectContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Select.Root, {
+            "data-slot": "select",
+            disabled: disabled,
+            isItemEqualToValue: isItemEqualToValue,
+            itemToStringLabel: itemToStringLabel,
+            items: items,
+            multiple: multiple,
+            value: value,
+            ...props,
+            onValueChange: (nextValue, eventDetails)=>{
+                if (null !== nextValue) handleValueChange(nextValue, eventDetails);
+            }
+        })
     });
 }
 function Select_Group({ ...props }) {
@@ -4300,16 +4440,35 @@ function Select_Group({ ...props }) {
         ...props
     });
 }
-function Select_Value({ ...props }) {
+function Select_Value({ className, children, placeholder, ...props }) {
+    const context = useSelectContext();
+    if (!context.multiple || children) return /*#__PURE__*/ jsx(Select.Value, {
+        "data-slot": "select-value",
+        className: clsx(styles_css_value, className),
+        placeholder: placeholder,
+        ...props,
+        children: children
+    });
     return /*#__PURE__*/ jsx(Select.Value, {
         "data-slot": "select-value",
-        ...props
+        className: clsx(styles_css_value, className),
+        placeholder: placeholder,
+        ...props,
+        children: (selectedValue)=>{
+            const values = Array.isArray(selectedValue) ? selectedValue : [];
+            if (0 === values.length) return placeholder;
+            return /*#__PURE__*/ jsx(ChipsValue, {
+                values: values
+            });
+        }
     });
 }
-function Select_Trigger({ className, children, size = 'medium', ...props }) {
+function Select_Trigger({ className, children, render, size = 'medium', ...props }) {
     return /*#__PURE__*/ jsxs(Select.Trigger, {
         "data-slot": "select-trigger",
         "data-size": size,
+        nativeButton: false,
+        render: render ?? /*#__PURE__*/ jsx("div", {}),
         className: clsx(Select_styles_css_trigger, className),
         ...props,
         children: [
@@ -4405,6 +4564,82 @@ function Select_Separator({ className, ...props }) {
         ...props
     });
 }
+function Select_Chip({ count, value }) {
+    const { disabled, getLabel, removeValue } = useSelectContext();
+    const label = count ? `+${count}` : getLabel(value);
+    const removeLabel = stringifyAsLabel(value);
+    const handlePointerDown = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ jsxs("span", {
+        className: styles_css_chip,
+        "data-slot": "select-value-chip",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: chipLabel,
+                children: label
+            }),
+            !count && /*#__PURE__*/ jsx("button", {
+                "aria-label": `Remove ${removeLabel}`,
+                className: styles_css_chipRemove,
+                "data-slot": "select-value-chip-remove",
+                disabled: disabled,
+                onClick: (event)=>removeValue(value, event),
+                onPointerDown: handlePointerDown,
+                type: "button",
+                children: /*#__PURE__*/ jsx(XIcon, {})
+            })
+        ]
+    });
+}
+function ChipsValue({ values }) {
+    const { containerRef, getLabel, hiddenCount, measureRef, overflowMeasureRef, visibleValues } = useChipsValueLogic(values);
+    return /*#__PURE__*/ jsxs("span", {
+        className: chipsValue,
+        "data-slot": "select-value-chips",
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                "aria-hidden": "true",
+                className: chipsMeasure,
+                "data-slot": "select-value-chips-measure",
+                ref: measureRef,
+                children: [
+                    values.map((value)=>/*#__PURE__*/ jsxs("span", {
+                            className: styles_css_chip,
+                            "data-chip-measure": "chip",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: chipLabel,
+                                    children: getLabel(value)
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: styles_css_chipRemove,
+                                    children: /*#__PURE__*/ jsx(XIcon, {})
+                                })
+                            ]
+                        }, getValueKey(value))),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: styles_css_chip,
+                        "data-chip-measure": "overflow",
+                        ref: overflowMeasureRef,
+                        children: [
+                            "+",
+                            values.length
+                        ]
+                    })
+                ]
+            }),
+            visibleValues.map((value)=>/*#__PURE__*/ jsx(Select_Chip, {
+                    value: value
+                }, getValueKey(value))),
+            hiddenCount > 0 && /*#__PURE__*/ jsx(Select_Chip, {
+                count: hiddenCount
+            })
+        ]
+    });
+}
 Select_Select.Trigger = Select_Trigger;
 Select_Select.Value = Select_Value;
 Select_Select.Content = Select_Content;
@@ -4526,7 +4761,7 @@ var Sidebar_styles_css_container = 'style__1xiua9n4';
 var Sidebar_styles_css_content = 'style__1xiua9nh';
 var desktopSidebar = 'style__1xiua9n2';
 var Sidebar_styles_css_footer = 'style__1xiua9nf';
-var gap = 'style__1xiua9n3';
+var styles_css_gap = 'style__1xiua9n3';
 var Sidebar_styles_css_group = 'style__1xiua9ni';
 var groupAction = 'style__1xiua9nk';
 var groupContent = 'style__1xiua9nl';
@@ -4692,7 +4927,7 @@ function SidebarRoot({ side = 'left', variant = 'sidebar', collapsible = 'offcan
         children: [
             /*#__PURE__*/ jsx("div", {
                 "data-slot": "sidebar-gap",
-                className: gap
+                className: styles_css_gap
             }),
             /*#__PURE__*/ jsx("div", {
                 "data-slot": "sidebar-container",

package/lib/stories/Select.stories.d.ts

@@ -11,6 +11,7 @@ export default _default;
 export declare function Demo(): import("react").JSX.Element;
 export declare function Sizes(): import("react").JSX.Element;
 export declare function Multiple(): import("react").JSX.Element;
+export declare function MultipleOverflow(): import("react").JSX.Element;
 export declare function MultipleControlled(): import("react").JSX.Element;
 export declare function Scrollable(): import("react").JSX.Element;
 //# sourceMappingURL=Select.stories.d.ts.map

package/lib/stories/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAsBtC,wBAOgC;AAehC,wBAAgB,IAAI,gCAWnB;AAED,wBAAgB,KAAK,gCAepB;AAED,wBAAgB,QAAQ,gCAiBvB;AAED,wBAAgB,kBAAkB,gCA4BjC;AAED,wBAAgB,UAAU,gCAgEzB"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Select.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAkBtC,wBAOgC;AAehC,wBAAgB,IAAI,gCAWnB;AAED,wBAAgB,KAAK,gCAepB;AAED,wBAAgB,QAAQ,gCAWvB;AAED,wBAAgB,gBAAgB,gCAe/B;AAED,wBAAgB,kBAAkB,gCAoBjC;AAED,wBAAgB,UAAU,gCAgEzB"}

package/lib/styles.css

@@ -4262,7 +4262,7 @@ a.outline__1af895x4:hover {
   outline: none;
 }
 
-.style__5ilg7o2:disabled {
+.style__5ilg7o2:disabled, .style__5ilg7o2[aria-disabled="true"] {
   cursor: not-allowed;
   opacity: .5;
 }
@@ -4292,6 +4292,93 @@ a.outline__1af895x4:hover {
 }
 
 .style__5ilg7o3 {
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.style__5ilg7o4 {
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.style__5ilg7o5 {
+  gap: var(--spacing-1);
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.style__5ilg7o6 {
+  width: fit-content;
+  height: var(--spacing-5);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-1);
+  border-radius: var(--borderRadius-sm);
+  background-color: var(--colors-background-element);
+  padding: 0 var(--spacing-2);
+  color: var(--colors-text-primary);
+  font-size: var(--fontSize-xs);
+  font-weight: var(--fontWeight-medium);
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.style__5ilg7o6:has(button) {
+  padding-right: 0;
+}
+
+.style__5ilg7o7 {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.style__5ilg7o8 {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  margin-right: -var(--spacing-2);
+  border-radius: var(--borderRadius-sm);
+  color: inherit;
+  cursor: pointer;
+  opacity: .5;
+  background-color: #0000;
+  border: 0;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.style__5ilg7o8:hover {
+  opacity: 1;
+}
+
+.style__5ilg7o8:disabled {
+  cursor: not-allowed;
+}
+
+.style__5ilg7o8 svg {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  pointer-events: none;
+}
+
+.style__5ilg7o9 {
   cursor: default;
   padding: var(--spacing-1) 0;
   justify-content: center;
@@ -4299,12 +4386,12 @@ a.outline__1af895x4:hover {
   display: flex;
 }
 
-.style__5ilg7o4 {
+.style__5ilg7oa {
   isolation: isolate;
   z-index: 5000;
 }
 
-.style__5ilg7o5 {
+.style__5ilg7ob {
   z-index: 5000;
   max-height: var(--available-height, 24rem);
   border-radius: var(--borderRadius-md);
@@ -4317,43 +4404,43 @@ a.outline__1af895x4:hover {
   box-shadow: 0 2px 4px #0000001a;
 }
 
-.style__5ilg7o5[data-open] {
+.style__5ilg7ob[data-open] {
   animation: .15s ease-out style__5ilg7o0;
 }
 
-.style__5ilg7o5[data-closed] {
+.style__5ilg7ob[data-closed] {
   animation: .15s ease-in style__5ilg7o1;
 }
 
-.style__5ilg7o5[data-side="bottom"] {
+.style__5ilg7ob[data-side="bottom"] {
   transform: translateY(4px);
 }
 
-.style__5ilg7o5[data-side="top"] {
+.style__5ilg7ob[data-side="top"] {
   transform: translateY(-4px);
 }
 
-.style__5ilg7o5[data-side="left"] {
+.style__5ilg7ob[data-side="left"] {
   transform: translateX(-4px);
 }
 
-.style__5ilg7o5[data-side="right"] {
+.style__5ilg7ob[data-side="right"] {
   transform: translateX(4px);
 }
 
-.style__5ilg7o6 {
+.style__5ilg7oc {
   padding: var(--spacing-1);
   width: 100%;
   min-width: var(--anchor-width, 100%);
 }
 
-.style__5ilg7o7 {
+.style__5ilg7od {
   padding: var(--spacing-1) var(--spacing-2);
   font-size: var(--fontSize-sm);
   font-weight: var(--fontWeight-semibold);
 }
 
-.style__5ilg7o8 {
+.style__5ilg7oe {
   cursor: default;
   -webkit-user-select: none;
   user-select: none;
@@ -4367,17 +4454,17 @@ a.outline__1af895x4:hover {
   position: relative;
 }
 
-.style__5ilg7o8[data-highlighted] {
+.style__5ilg7oe[data-highlighted] {
   background-color: var(--colors-background-elementHover);
   color: var(--colors-text-primary);
 }
 
-.style__5ilg7o8[data-disabled] {
+.style__5ilg7oe[data-disabled] {
   pointer-events: none;
   opacity: .5;
 }
 
-.style__5ilg7o9 {
+.style__5ilg7of {
   right: var(--spacing-2);
   justify-content: center;
   align-items: center;
@@ -4387,18 +4474,18 @@ a.outline__1af895x4:hover {
   position: absolute;
 }
 
-.style__5ilg7oa {
+.style__5ilg7og {
   margin: var(--spacing-1) calc(-1 * var(--spacing-1));
   background-color: var(--colors-background-element);
   height: 1px;
 }
 
-.style__5ilg7ob {
+.style__5ilg7oh {
   width: 1rem;
   height: 1rem;
 }
 
-.style__5ilg7oc {
+.style__5ilg7oi {
   opacity: .5;
   width: 1rem;
   height: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/kit",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",