@canlooks/can-ui 0.0.43 → 0.0.45

package/dist/cjs/components/card/card.style.js

@@ -38,11 +38,11 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, bo
         `
             : (0, react_1.css) `
             &[data-elevation="0"] {
-                background-color: ${gray(.12)};
+                background-color: ${gray(.1)};
             }
 
             &[data-elevation="1"] {
-                background-color: ${gray(.17)};
+                background-color: ${gray(.14)};
             }
 
             &[data-elevation="2"] {

package/dist/cjs/components/form/form.d.ts

@@ -49,7 +49,7 @@ export type FormRef<V extends FormValue = FormValue> = {
     isFieldTouched(field: FieldPath): boolean;
 };
 export declare const Form: {
-    <V extends FormValue, C extends ElementType>(props: FormProps<V, C>): ReactElement;
+    <V extends FormValue, C extends ElementType = "form">(props: FormProps<V, C>): ReactElement;
     Item: typeof FormItem;
     Relatable: typeof FormRelatable;
 };

package/dist/cjs/components/placeholder/placeholder.js

@@ -15,15 +15,15 @@ exports.imagePreset = {
     info: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF7klEQVR4nO1dS28cRRAeY0GACA5IeYADp9iEEyIPEIcEBdmSY3vt6W5GSYTgyMVckj/g38HJCUg5jKd7RhayxD/AOXHgkt3p6dl1UA4cIzC3QbV+YByv7Xh6pqtn+5NKsrxjb3d9/aiuqq7xPAcHBwcHBwcHBwcHB0T4Ylm9Tnj+ri+eTrAkvUp4+iUT6haNZYvGOaNRdrsv8HMsW/3PEnUTnvWFnAh+Vuen19qnTPfDGgRhMUp4+4Ifp1dAmWwlvcuEKicr6V1fqFuE55eDsDcG32G6n8hQjARh+wzhvWuE51+VVvgRAt/hC/V5ED4Z84pixBtWBGE4SqN0nMbdVtVKHyT9pSxKx5eK4hVvWABLAF1Vl2isfFOKf5EI5dNIXWr88gTTnvBs3rTC2QDxRbawEHfe95qGqV+enaZJ74ZpBbPjzogouzG3+sebXhMAVg2YiaaVyk6wWQer8gPPVsDGtm1OGlcmK0VE75p1mzQcfgjvTplWHtMkNOlOBmHxmmcDgrD3Rv8QhUBxTOtMkLPo94Wvf2q/DZaEaWWxigT6Bn30sI58zCYm0yQLUcef+vG30x6+NV/OmlYOq0lorGbQ7AlgITRpw2XHFMLlFArriK2kV00rgxkSMLONKh+O7fWPvOxbX8iHhKsO4dk/W6I6lKsH8Fnd7THmugD3AuGycvcx2ys8XyRC5VSo4iAhXOXwTJ1tglO+kU0Z/CV1j3xyiPL3klD7TIi712v379Rvg8uHRyl/R5jIlutuXz/AU1/YsH57n3KVHpcAwrNO7e2Lu61a4gm+UB/V3TkGS5DIN49NgMg3TbQxSLIPK1U+2L00MhPJIi9DAM/+NhVZg1BrZQRA/NREx5gFS9DuLAg7FytSfzFiNIDO1QPMm/BuOyPZqkT9rUfynKlOsR0zlB/PDKVx9o3ZtqZntRPAkuwzk51iOwcxjusgdpD4Qn5agelZ86lXHCxboztbhnUeNuYtydrwO9Mj/3/xZJ0mqYmDF7Nc5pPue9oIaEJwndUtifpEGwFNjPGyioVwNa0tRVxLlvKQCeHqjpbUeMjPN90ZZqkEoTpfmoD+5QgEnWEWCo02xksTALdNTHeEWSp+3C0fsuxf+UHQGWah0EjdLE9ApGbQdUzI7wnP1gnPNkGoUI+DRN033a79AlejShOALdmKgvKFev5iDEA9Z1wuompr3C3vmKOxRJVaTni2PtAZx9Wvptu3T2h5AqLsNjICNrEFYgYJ6K5xBNAjYwFNIwDZEkQtIkDLEoRvE1bWEKBnE0ZmhlKLCNBihmI7iFGLCNByEMPmiqAWEaDFFYHNGUctIkCLMw6bO5paRIAWdzQEFTAFZKglBGgLyGALSVJ7CNATkgRAsSPTHWKWEaA1KA+Vpox3SNhFwPwjjWkpqBKzBH4CQFfa7wrMryBITRR2EKA9NRFA+LOzpjvGLCEgWGufqSg9vV8a0hEgDhv9+ZzXxAsazJIZUOEFDbNXlJgFBEA1lcrLF0B1QUeAGkDA0wmvqddUGfIZAFeTKr2gh8VBRw4JylOh/mrEfQCMpQrYfzPg8SACIGXFCAGxrLdUAQDqp5koRxkk6v7gxCx1r/YBEefMWC252fDJmBFXNZeLkIQFeUDbsm5C+dB3wjcueCYxzNeXCO9c9nCULJNDV7KMRnJyaQlByTLAdz8Ur0IKxtAoP0ZUtG/Yylb6IltAW8B1GAq3zid/vuVhBsyEJi5HNFYzaEf+fsD62KSNmUZyMgh/x7XmH4miGCF842NMKS3sJG9gitMraKydYXuBw1xo8Qsc9gLqapryHbGTSCyvW7Pev6zrwmTVLXaEQMi1dq9m3YB4AlQXhDLwDIHSd8xLaFNt/nwMABdGEHYuQiDDnOLzOWiD1ZusDgRh751tpx6tI2lq61WGGjKXm4YgDEdhDQYvIyS3QoZxeYWrO/C/IFcT0gWHapkpi+m19ikYqXDRAW6bwJUff/d1tnLP62xl/3W2/c/gmf6zG+Pwt+51tg4ODg4ODg4ODg4OHjL8C7/3bzba3Cw9AAAAAElFTkSuQmCC',
     searching: 'data:image/png;base64,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'
 };
-exports.Placeholder = (0, react_1.memo)(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
+exports.Placeholder = (0, react_1.memo)(({ slots, slotProps, status = 'empty', image, title = status === 'warning' ? '警告'
     : status === 'error' ? '出错啦'
         : status === 'success' ? '成功'
             : void 0, description = status === 'empty' ? '暂无数据'
     : status === 'searching' ? '搜索中...'
         : void 0, extra, ...props }) => {
     const { mode } = (0, theme_1.useTheme)();
-    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots;
-    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps;
+    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots || {};
+    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps || {};
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: placeholder_style_1.style, className: (0, utils_1.clsx)(placeholder_style_1.classes.root, props.className), children: [image ??
                 (0, jsx_runtime_1.jsx)("img", { className: placeholder_style_1.classes.image, src: status === 'empty'
                         ? (mode === 'light' ? exports.imagePreset.emptyLight : exports.imagePreset.emptyDark)

package/dist/cjs/components/segmented/segmented.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DivProps, Id, Obj, Size } from '../../types';
+import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
 export type ISegmentedOption = SegmentedOptionProps & Obj;
 export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
@@ -9,6 +9,8 @@ export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> e
     labelKey?: keyof O;
     primaryKey?: keyof O;
     fullWidth?: boolean;
+    /** 指示器的颜色，默认为`background.content` */
+    indicatorColor?: ColorPropsValue;
     defaultValue?: V;
     value?: V;
     onChange?(value: V): void;

package/dist/cjs/components/segmented/segmented.js

@@ -7,7 +7,7 @@ const segmented_style_1 = require("./segmented.style");
 const utils_1 = require("../../utils");
 const SegmentedOption_1 = require("./SegmentedOption");
 const theme_1 = require("../theme");
-exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [animating, setAnimating] = (0, react_1.useState)(false);
@@ -77,6 +77,6 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: segmented_style_1.style, className: (0, utils_1.clsx)(segmented_style_1.classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, segmented_style_1.useStyle)({ indicatorColor }), className: (0, utils_1.clsx)(segmented_style_1.classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 exports.Segmented.Option = SegmentedOption_1.SegmentedOption;

package/dist/cjs/components/segmented/segmented.style.d.ts

@@ -1,3 +1,4 @@
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     label: string;
     option: string;
@@ -7,4 +8,6 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useStyle({ indicatorColor }: {
+    indicatorColor: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/segmented/segmented.style.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.classes = void 0;
+exports.classes = void 0;
+exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
@@ -12,115 +13,118 @@ exports.classes = (0, utils_1.defineInnerClasses)('segmented', [
     'suffix',
     'indicator'
 ]);
-exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing, text }) => {
-    const bgColor = (0, color_1.default)(background.body);
-    const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
-    const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
-    return (0, react_1.css) `
-        display: inline-flex;
-        background-color: ${background.body};
-        border-radius: ${borderRadius}px;
-        padding: 2px;
-        position: relative;
-
-        .${exports.classes.option} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 4px 12px;
+function useStyle({ indicatorColor }) {
+    const indicatorColorValue = (0, utils_1.useColor)(indicatorColor);
+    return (0, utils_1.useCss)(({ mode, background, borderRadius, easing, text }) => {
+        const bgColor = (0, color_1.default)(background.body);
+        const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
+        const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
+        return (0, react_1.css) `
+            display: inline-flex;
+            background-color: ${background.body};
             border-radius: ${borderRadius}px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            z-index: 1;
-            transition: background-color .3s ${easing.easeOut};
-            -webkit-tap-highlight-color: transparent;
-
-            &[data-active=true] {
-                transition: background-color 0s;
-            }
+            padding: 2px;
+            position: relative;
 
-            &[data-orientation=vertical] {
-                flex-direction: column;
-            }
+            .${exports.classes.option} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                padding: 4px 12px;
+                border-radius: ${borderRadius}px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                z-index: 1;
+                transition: background-color .3s ${easing.easeOut};
+                -webkit-tap-highlight-color: transparent;
 
-            &[data-disabled=true] {
-                cursor: not-allowed;
-                color: ${text.disabled};
-            }
-        }
+                &[data-active=true] {
+                    transition: background-color 0s;
+                }
 
-        &[data-size=small] {
-            .${exports.classes.option} {
-                padding: 3px 12px;
-            }
-        }
+                &[data-orientation=vertical] {
+                    flex-direction: column;
+                }
 
-        &[data-size=large] {
-            .${exports.classes.option} {
-                padding: 11px 12px;
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                }
             }
-        }
 
-        &[data-full-width=true] {
-            display: flex;
+            &[data-size=small] {
+                .${exports.classes.option} {
+                    padding: 3px 12px;
+                }
+            }
 
-            .${exports.classes.option} {
-                flex: 1;
+            &[data-size=large] {
+                .${exports.classes.option} {
+                    padding: 11px 12px;
+                }
             }
-        }
 
-        &[data-orientation=vertical] {
-            flex-direction: column;
-        }
+            &[data-full-width=true] {
+                display: flex;
 
-        .${exports.classes.indicator} {
-            border-radius: ${borderRadius}px;
-            background-color: ${background.content};
-            box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
-            position: absolute;
-            transition: all .3s ${easing.bounce};
-        }
+                .${exports.classes.option} {
+                    flex: 1;
+                }
+            }
 
-        &[data-animating=true] {
-            .${exports.classes.option} {
-                transition: background-color 0s;
+            &[data-orientation=vertical] {
+                flex-direction: column;
             }
-        }
 
-        &:not([data-animating=true]) {
-            .${exports.classes.option}[data-active=true] {
-                background-color: ${background.content};
+            .${exports.classes.indicator} {
+                border-radius: ${borderRadius}px;
+                background-color: ${indicatorColorValue};
                 box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+                position: absolute;
+                transition: all .3s ${easing.bounce};
             }
-        }
 
-        &:not(:has([data-active=true])) {
-            .${exports.classes.indicator} {
-                display: none;
+            &[data-animating=true] {
+                .${exports.classes.option} {
+                    transition: background-color 0s;
+                }
             }
-        }
-
-        &:not([data-read-only=true]):not([data-disabled=true]) {
-            .${exports.classes.option}:not([data-disabled=true]) {
-                cursor: pointer;
-                
-                &:not([data-active=true]):hover {
-                    background-color: ${hoverBg};
+
+            &:not([data-animating=true]) {
+                .${exports.classes.option}[data-active=true] {
+                    background-color: ${indicatorColorValue};
+                    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
                 }
-            
-                &:not([data-active=true]):active {
-                    transition: background-color 0s;
-                    background-color: ${activeBg};
+            }
+
+            &:not(:has([data-active=true])) {
+                .${exports.classes.indicator} {
+                    display: none;
                 }
             }
-        }
 
-        &[data-disabled=true] {
-            .${exports.classes.option} {
-                cursor: not-allowed;
+            &:not([data-read-only=true]):not([data-disabled=true]) {
+                .${exports.classes.option}:not([data-disabled=true]) {
+                    cursor: pointer;
+
+                    &:not([data-active=true]):hover {
+                        background-color: ${hoverBg};
+                    }
+
+                    &:not([data-active=true]):active {
+                        transition: background-color 0s;
+                        background-color: ${activeBg};
+                    }
+                }
+            }
+
+            &[data-disabled=true] {
+                .${exports.classes.option} {
+                    cursor: not-allowed;
+                }
             }
-        }
-    `;
-});
+        `;
+    }, [indicatorColorValue]);
+}

package/dist/cjs/components/theme/themeVariables.js

@@ -185,15 +185,15 @@ exports.defaultLightTheme = {
 exports.defaultDarkTheme = {
     mode: 'dark',
     background: {
-        /* content: rGray(.2), */
-        content: '#333333',
-        /* body: rGray(.15), */
-        body: '#252525',
+        /* content: rGray(.14), */
+        content: '#242424',
+        /* body: rGray(.1), */
+        body: '#1a1a1a',
         fixed: 'rgba(255, 255, 255, .06)'
     },
     gray: rGray,
-    /* divider: rGray(.36), */
-    divider: '#5c5c5c',
+    /* divider: rGray(.28), */
+    divider: '#474747',
     colors: {
         /* primary: Color(defaultLightTheme.colors!.primary).lighten(.1).hex(), */
         primary: '#3780EE',

package/dist/cjs/types.d.ts

@@ -46,7 +46,7 @@ export type SlotsAndProps<Default extends Record<string, any>> = {
         [P in keyof Default]?: ElementType;
     };
     slotProps?: {
-        [P in keyof Default]?: Default[P] & Obj;
+        [P in keyof Default]?: Default[P] | Obj;
     };
 };
 /**

package/dist/cjs/utils/style.js

@@ -71,7 +71,7 @@ function useCss(callback, deps) {
  * @param theme
  */
 function colorTransfer(colorPropsValue, theme) {
-    const { colors, text } = theme;
+    const { colors, text, background } = theme;
     if (colorPropsValue in colors) {
         return colors[colorPropsValue].main;
     }
@@ -84,6 +84,10 @@ function colorTransfer(colorPropsValue, theme) {
             return text[member];
         }
     }
+    if (colorPropsValue.startsWith('background')) {
+        const [, member] = colorPropsValue.split('.');
+        return background[member];
+    }
     return colorPropsValue;
 }
 /**

package/dist/esm/components/card/card.style.js

@@ -35,11 +35,11 @@ export const style = defineCss(({ spacing, mode, background, divider, boxShadow,
         `
             : css `
             &[data-elevation="0"] {
-                background-color: ${gray(.12)};
+                background-color: ${gray(.1)};
             }
 
             &[data-elevation="1"] {
-                background-color: ${gray(.17)};
+                background-color: ${gray(.14)};
             }
 
             &[data-elevation="2"] {

package/dist/esm/components/form/form.d.ts

@@ -49,7 +49,7 @@ export type FormRef<V extends FormValue = FormValue> = {
     isFieldTouched(field: FieldPath): boolean;
 };
 export declare const Form: {
-    <V extends FormValue, C extends ElementType>(props: FormProps<V, C>): ReactElement;
+    <V extends FormValue, C extends ElementType = "form">(props: FormProps<V, C>): ReactElement;
     Item: typeof FormItem;
     Relatable: typeof FormRelatable;
 };

package/dist/esm/components/placeholder/placeholder.js

@@ -12,15 +12,15 @@ export const imagePreset = {
     info: 'data:image/png;base64,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',
     searching: 'data:image/png;base64,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'
 };
-export const Placeholder = memo(({ slots = {}, slotProps = {}, status = 'empty', image, title = status === 'warning' ? '警告'
+export const Placeholder = memo(({ slots, slotProps, status = 'empty', image, title = status === 'warning' ? '警告'
     : status === 'error' ? '出错啦'
         : status === 'success' ? '成功'
             : void 0, description = status === 'empty' ? '暂无数据'
     : status === 'searching' ? '搜索中...'
         : void 0, extra, ...props }) => {
     const { mode } = useTheme();
-    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots;
-    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps;
+    const { title: Title = 'div', description: Description = 'div', extra: Extra = 'div' } = slots || {};
+    const { title: titleProps, description: descriptionProps, extra: extraProps } = slotProps || {};
     return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [image ??
                 _jsx("img", { className: classes.image, src: status === 'empty'
                         ? (mode === 'light' ? imagePreset.emptyLight : imagePreset.emptyDark)

package/dist/esm/components/segmented/segmented.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { DivProps, Id, Obj, Size } from '../../types';
+import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
 export type ISegmentedOption = SegmentedOptionProps & Obj;
 export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
@@ -9,6 +9,8 @@ export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> e
     labelKey?: keyof O;
     primaryKey?: keyof O;
     fullWidth?: boolean;
+    /** 指示器的颜色，默认为`background.content` */
+    indicatorColor?: ColorPropsValue;
     defaultValue?: V;
     value?: V;
     onChange?(value: V): void;

package/dist/esm/components/segmented/segmented.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo, useEffect, useRef, useState } from 'react';
-import { classes, style } from './segmented.style';
+import { classes, useStyle } from './segmented.style';
 import { clsx, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
 import { SegmentedOption } from './SegmentedOption';
 import { useTheme } from '../theme';
-export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+export const Segmented = memo(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [animating, setAnimating] = useState(false);
@@ -74,6 +74,6 @@ export const Segmented = memo(({ options, orientation = 'horizontal', size, labe
             return c;
         });
     };
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return (_jsxs("div", { ...props, css: useStyle({ indicatorColor }), className: clsx(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 Segmented.Option = SegmentedOption;

package/dist/esm/components/segmented/segmented.style.d.ts

@@ -1,3 +1,4 @@
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     label: string;
     option: string;
@@ -7,4 +8,6 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useStyle({ indicatorColor }: {
+    indicatorColor: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;