@canlooks/can-ui 0.0.34 → 0.0.35

package/dist/esm/components/dateTimePicker/calendar.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
-export const classes = defineClasses('calendar', [
+export const classes = defineInnerClasses('calendar', [
     'calendarHead',
     'calendarHeadSide',
     'calendarHeadControl',

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

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { commonNativeInputStyle } from '../input/input.style';
 import { classes as calendarClasses } from './calendar.style';
 import { classes as timerClasses } from './timer.style';
 import { popperStyleCallback } from '../popper/popper.style';
-export const classes = defineClasses('date-time-picker', [
+export const classes = defineInnerClasses('date-time-picker', [
     'input',
     'container',
     'inputGroup',

package/dist/esm/components/dateTimePicker/timer.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
-export const classes = defineClasses('timer', [
+export const classes = defineInnerClasses('timer', [
     'selectItem',
     'selectItemTitle',
     'selectItemBody',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as dateTimePickerClasses } from '../dateTimePicker/dateTimePicker.style';
-export const classes = defineClasses('date-time-rage-picker');
+export const classes = defineInnerClasses('date-time-rage-picker');
 export const style = defineCss(({ spacing }) => css `
     display: flex;
     align-items: center;

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('descriptions', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('descriptions', [
     'item',
     'label',
     'colon',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('dialog', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('dialog', [
     'card',
     'icon',
     'content',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('divider', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('divider', [
     'line',
     'beforeLine',
     'afterLine',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables, useCss } from '../../utils';
-export const classes = defineClasses('drawer', [
+import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
+export const classes = defineInnerClasses('drawer', [
     'drawer',
     'drawerWrap',
     'titleRow',

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { popperArrowStyle } from '../popper/popper.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('dropdown', [
+export const classes = defineInnerClasses('dropdown', [
     'content'
 ]);
 export const style = defineCss(({ background, boxShadow, borderRadius }) => css `

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

@@ -1,2 +1,2 @@
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('flex');
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('flex');

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('form', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('form', [
     'item',
     'requiredMark',
     'helperText'

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables, useCss } from '../../utils';
-export const classes = defineClasses('grid', [
+import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
+export const classes = defineInnerClasses('grid', [
     'item'
 ]);
 export function useContainerStyle({ columnCount, columnGap, rowGap }) {

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('image', [
+export const classes = defineInnerClasses('image', [
     'img',
     'skeleton',
     'mask',

package/dist/esm/components/image/imagePreview.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as modalClasses } from '../modal/modal.style';
-export const classes = defineClasses('image-preview', [
+export const classes = defineInnerClasses('image-preview', [
     'button',
     'control',
     'swap',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('input', [
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('input', [
     'input',
     'adaptable'
 ]);

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

@@ -1,6 +1,6 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('input-base', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('input-base', [
     'prefix',
     'content',
     'suffix',
@@ -216,12 +216,12 @@ const borderAnim = keyframes `
     }
 
     50% {
-        width: calc(100% - 2px);
+        width: calc(100% + 2px);
         height: 0;
     }
 
     100% {
-        width: calc(100% - 2px);
-        height: calc(100% - 2px);
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
     }
 `;

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('loading', [
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('loading', [
     'container',
     'mask'
 ]);

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

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('loading-indicator', [
+export const classes = defineInnerClasses('loading-indicator', [
     'indicator'
 ]);
 export function useStyle({ color, width }) {

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

@@ -1,7 +1,7 @@
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { css } from '@emotion/react';
 import { classes as progressClasses } from '../progress/progress.style';
-export const classes = defineClasses('loading-mask', [
+export const classes = defineInnerClasses('loading-mask', [
     'indicator',
     'text',
     'progress'

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
+import { defineInnerClasses } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
-export const classes = defineClasses('menu');
+export const classes = defineInnerClasses('menu');
 export const style = css `
     padding: ${menuListPadding}px;
 `;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss, useColor, useCss } from '../../utils';
+import { defineInnerClasses, defineCss, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('menu-item', [
+export const classes = defineInnerClasses('menu-item', [
     'content',
     'checkbox',
     'prefix',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('modal', [
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('modal', [
     'modal'
 ]);
 export const style = css `

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('options-base', [
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('options-base', [
     'optionsList'
 ]);
 export const style = css `

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('overlay-base', [
+export const classes = defineInnerClasses('overlay-base', [
     'mask'
 ]);
 export const style = defineCss(theme => {

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as inputClasses } from '../input/input.style';
-export const classes = defineClasses('pagination', [
+export const classes = defineInnerClasses('pagination', [
     'button',
     'pager',
     'sizer',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as sliderClasses } from '../slider/slider.style';
-export const classes = defineClasses('palette', [
+export const classes = defineInnerClasses('palette', [
     'main',
     'mask',
     'handle',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as dividerClasses } from '../divider/divider.style';
-export const classes = defineClasses('picker-dialog', [
+export const classes = defineInnerClasses('picker-dialog', [
     'content',
     'selectedArea',
     'count',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('placeholder', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('placeholder', [
     'image',
     'title',
     'description',

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineCss, defineClasses } from '../../utils';
+import { defineCss, defineInnerClasses } from '../../utils';
 import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('popper', [
+export const classes = defineInnerClasses('popper', [
     'popper',
 ]);
 export const style = defineCss(theme => {

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

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('progress', [
+export const classes = defineInnerClasses('progress', [
     'info',
     'icon',
     'bar',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('rate', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('rate', [
     'star',
     'starBefore',
     'starAfter'

package/dist/esm/components/resizable/resizable.js

@@ -82,7 +82,9 @@ export const Resizable = (({ component: Component = 'div', slots = {}, slotProps
     return (_jsxs(Component, { ...props, ref: cloneRef(innerRef, props.ref), css: useStyle({ variant, handleSize, handleColor: handleColor || 'secondary' }), className: clsx(classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
             ...props.style,
             minWidth,
+            maxWidth,
             minHeight,
+            maxHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
         }, children: [_jsx(Container, { ...containerProps, className: clsx(classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => _jsx("div", { className: h.length === 1 ? classes.edge : classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('resizable', [
+export const classes = defineInnerClasses('resizable', [
     'container',
     'edge',
     'corner'

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

@@ -1,7 +1,7 @@
-import { defineClasses, useCss } from '../../utils';
+import { defineInnerClasses, useCss } from '../../utils';
 import { css } from '@emotion/react';
 import Color from 'color';
-export const classes = defineClasses('scrollbar', [
+export const classes = defineInnerClasses('scrollbar', [
     'scroller',
     'scrollerWrapper',
     'track',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('segmented', [
+export const classes = defineInnerClasses('segmented', [
     'option',
     'label',
     'prefix',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineCss, defineClasses } from '../../utils';
+import { defineCss, defineInnerClasses } from '../../utils';
 import { classes as tagClasses } from '../tag/tag.style';
-export const classes = defineClasses('select', [
+export const classes = defineInnerClasses('select', [
     'contentWrap',
     'placeholder',
     'arrow',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as alertClasses } from '../alert/alert.style';
-export const classes = defineClasses('selected-list', [
+export const classes = defineInnerClasses('selected-list', [
     'option',
     'optionWrap'
 ]);

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

@@ -1,6 +1,6 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('skeleton', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('skeleton', [
     'children',
     'artical',
     'avatar',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('slidable-actions', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('slidable-actions', [
     'content',
     'actions',
     'actionsLeft',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('slider', [
+export const classes = defineInnerClasses('slider', [
     'rail',
     'railWrap',
     'track',

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('snackbar-base', [
+export const classes = defineInnerClasses('snackbar-base', [
     'itemWrap',
     'item',
     'icon',

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

@@ -1,6 +1,6 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('status', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('status', [
     'icon',
     'label',
     'dot'

package/dist/esm/components/stepper/step.style.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('step', [
+export const classes = defineInnerClasses('step', [
     'indicatorWrap',
     'indicator',
     'label',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('stepper');
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('stepper');
 export const style = defineCss(() => css `
     display: flex;
 

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('switch', [
+export const classes = defineInnerClasses('switch', [
     'input',
     'track',
     'label',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('table', [
+export const classes = defineInnerClasses('table', [
     'container',
     'cell'
 ]);

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('tabs', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('tabs', [
     'scroll',
     'scrollWrap',
     'start',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('tag', [
+export const classes = defineInnerClasses('tag', [
     'content',
     'prefix',
     'suffix',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
-export const classes = defineClasses('textarea', [
+export const classes = defineInnerClasses('textarea', [
     'textarea'
 ]);
 export const style = defineCss(({ spacing }) => css `

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss, useColor, useCss } from '../../utils';
-export const classes = defineClasses('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
+import { defineInnerClasses, defineCss, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
 export const style = defineCss(() => css `
     display: flex;
     flex-direction: column;

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

@@ -1,2 +1,2 @@
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('buttonGroup');
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('buttonGroup');

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import { popperArrowStyle } from '../popper/popper.style';
 import Color from 'color';
 import { zIndex } from '../theme';
-export const classes = defineClasses('tooltip', [
+export const classes = defineInnerClasses('tooltip', [
     'title'
 ]);
 export function useStyle({ color }) {

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

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('touch-ripple', [
+export const classes = defineInnerClasses('touch-ripple', [
     'ripple'
 ]);
 export function useStyle({ color }) {

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
-export const classes = defineClasses('transfer', [
+export const classes = defineInnerClasses('transfer', [
     'panel',
     'header',
     'checkbox',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss, useCss } from '../../utils';
-export const classes = defineClasses('transition-base');
+import { defineInnerClasses, defineCss, useCss } from '../../utils';
+export const classes = defineInnerClasses('transition-base');
 export function useTransitionBaseStyle({ timeout }) {
     const timeoutIsNumber = typeof timeout === 'number';
     return useCss(() => css `