@uzum-tech/ui 1.11.2 → 1.12.0

package/es/header/styles/light.js

@@ -0,0 +1,45 @@
+import { commonLight } from '../../_styles/common';
+import { createTheme } from '../../_mixins';
+export const self = (vars) => {
+    const { containerPrimary, textPrimary, textSecondary, textTertiary, textQuaternary, borderRadiusLarge, shadowDepth2, fontBodyMedium, fontBodyLarge, fontTitleSmall, brandPrimary500, elementsPrimary, elementsTertiary, elementsQuaternary } = vars;
+    return {
+        fontSize: fontBodyMedium,
+        fontBodyLarge,
+        fontTitleSmall,
+        backgroundColor: containerPrimary,
+        textColor: textPrimary,
+        mutedTextColor: textSecondary,
+        borderRadius: borderRadiusLarge,
+        shadow: shadowDepth2,
+        navigationGap: '48px',
+        actionGap: '32px',
+        tabTextColor: textSecondary,
+        tabTextColorHover: textPrimary,
+        tabTextColorActive: textPrimary,
+        tabIndicatorColor: brandPrimary500,
+        cardBackgroundColor: containerPrimary,
+        cardShadow: shadowDepth2,
+        cardBorderRadius: borderRadiusLarge,
+        cardTitleColor: textPrimary,
+        cardItemColor: textSecondary,
+        cardItemHoverColor: textPrimary,
+        cardDividerColor: elementsQuaternary,
+        cardGap: '32px',
+        cardPadding: '32px 48px',
+        badgeBackgroundColor: elementsPrimary,
+        badgeTextColor: textQuaternary,
+        actionIconColor: textPrimary,
+        actionIconColorHover: textPrimary,
+        mobileBorderColor: elementsTertiary,
+        mobileItemHoverColor: 'rgba(0, 0, 0, 0.03)',
+        mobileItemPressedColor: 'rgba(0, 0, 0, 0.05)',
+        mobileItemActiveColor: 'rgba(99, 226, 183, 0.08)',
+        mobileGroupItemColor: textTertiary
+    };
+};
+const headerLight = createTheme({
+    name: 'Header',
+    common: commonLight,
+    self
+});
+export default headerLight;

package/es/icon/src/Icon.d.ts

@@ -6,6 +6,7 @@ export declare const iconProps: {
     readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -37,6 +38,7 @@ export declare const UIcon: import("vue").DefineComponent<{
     readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -79,6 +81,7 @@ export declare const UIcon: import("vue").DefineComponent<{
     readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
+    readonly onClick: PropType<(e: MouseEvent) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;

package/es/icon/src/Icon.js

@@ -3,7 +3,7 @@ import { useThemeClass, useConfig, useTheme } from '../../_mixins';
 import { formatLength, warn } from '../../_utils';
 import { iconLight } from '../styles';
 import style from './styles/index.cssr';
-export const iconProps = Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object });
+export const iconProps = Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object, onClick: Function });
 export const UIcon = defineComponent({
     _n_icon__: true,
     name: 'Icon',
@@ -63,7 +63,8 @@ export const UIcon = defineComponent({
                     [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
                 }
             ],
-            style: [this.cssVars, this.mergedStyle]
+            style: [this.cssVars, this.mergedStyle],
+            onClick: this.onClick
         }), component ? h(component) : this.$slots);
     }
 });

package/es/icon-bar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as UIconBar, iconBarProps } from './src/IconBar';
+export type { IconBarProps } from './src/IconBar';
+export { default as UIconBarItem, iconBarItemProps } from './src/IconBarItem';
+export type { IconBarItemProps } from './src/IconBarItem';

package/es/icon-bar/index.js

@@ -0,0 +1,2 @@
+export { default as UIconBar, iconBarProps } from './src/IconBar';
+export { default as UIconBarItem, iconBarItemProps } from './src/IconBarItem';

package/es/icon-bar/src/IconBar.d.ts

@@ -0,0 +1,175 @@
+import { ExtractPublicPropTypes, PropType } from 'vue';
+import { IconBarItemProps } from './IconBarItem';
+import { GridProps } from '../../grid';
+export declare const iconBarProps: {
+    readonly items: {
+        readonly type: PropType<IconBarItemProps[]>;
+        readonly default: () => never[];
+    };
+    readonly cols: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly gridProps: {
+        readonly type: PropType<Partial<GridProps>>;
+    };
+    readonly itemSize: PropType<number | string>;
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+};
+export type IconBarProps = ExtractPublicPropTypes<typeof iconBarProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly items: {
+        readonly type: PropType<IconBarItemProps[]>;
+        readonly default: () => never[];
+    };
+    readonly cols: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly gridProps: {
+        readonly type: PropType<Partial<GridProps>>;
+    };
+    readonly itemSize: PropType<number | string>;
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-icon-bar-cols': string;
+        '--u-icon-bar-item-size': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    renderIconBarItems: (items: IconBarItemProps[]) => JSX.Element[];
+    onRender: (() => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly items: {
+        readonly type: PropType<IconBarItemProps[]>;
+        readonly default: () => never[];
+    };
+    readonly cols: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly gridProps: {
+        readonly type: PropType<Partial<GridProps>>;
+    };
+    readonly itemSize: PropType<number | string>;
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+}>>, {
+    readonly cols: number;
+    readonly items: IconBarItemProps[];
+}, {}>;
+export default _default;

package/es/icon-bar/src/IconBar.js

@@ -0,0 +1,57 @@
+import { computed, defineComponent, h } from 'vue';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { iconBarLight } from '../styles';
+import style from './styles/index.cssr';
+import IconBarItem from './IconBarItem';
+import { UGrid, UGridItem } from '../../grid';
+import { resolveSize } from '../../_utils';
+export const iconBarProps = Object.assign(Object.assign({}, useTheme.props), { items: {
+        type: Array,
+        default: () => []
+    }, cols: {
+        type: Number,
+        default: 6
+    }, gridProps: {
+        type: Object
+    }, itemSize: [Number, String] });
+export default defineComponent({
+    name: 'IconBar',
+    props: iconBarProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('IconBar', '-icon-bar', style, iconBarLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { itemSize } } = themeRef.value;
+            return {
+                '--u-icon-bar-cols': String(props.cols),
+                '--u-icon-bar-item-size': resolveSize(props.itemSize, itemSize)
+            };
+        });
+        const renderIconBarItems = (items) => {
+            if (slots.default) {
+                return slots
+                    .default()
+                    .map((vnode, index) => h(UGridItem, { key: index }, vnode));
+            }
+            return items.map((item, index) => (h(UGridItem, { key: index, span: item.span },
+                h(IconBarItem, Object.assign({}, item)))));
+        };
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('icon-bar', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            renderIconBarItems,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { mergedClsPrefix, themeClass, cssVars, items, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h(UGrid, Object.assign({ class: [`${mergedClsPrefix}-icon-bar`, themeClass], style: cssVars, cols: this.cols, xGap: 20, yGap: 32 }, this.gridProps), {
+            default: () => this.renderIconBarItems(items)
+        }));
+    }
+});

package/es/icon-bar/src/IconBarItem.d.ts

@@ -0,0 +1,163 @@
+import { ExtractPublicPropTypes, PropType, VNodeChild } from 'vue';
+import { TextProps } from '../../typography';
+export declare const iconBarItemProps: {
+    readonly label: StringConstructor;
+    readonly icon: PropType<() => VNodeChild>;
+    readonly iconSize: PropType<number | string>;
+    readonly span: PropType<number | string>;
+    readonly typographyProps: {
+        readonly type: PropType<Partial<TextProps>>;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+};
+export type IconBarItemProps = ExtractPublicPropTypes<typeof iconBarItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly label: StringConstructor;
+    readonly icon: PropType<() => VNodeChild>;
+    readonly iconSize: PropType<number | string>;
+    readonly span: PropType<number | string>;
+    readonly typographyProps: {
+        readonly type: PropType<Partial<TextProps>>;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-icon-bar-item-color': string;
+        '--u-icon-bar-item-icon-size': string;
+        '--u-icon-bar-item-label-color': string;
+        '--u-icon-bar-item-label-size-hover': string;
+        '--u-icon-bar-item-label-color-hover': string;
+        '--u-icon-bar-item-color-hover': string;
+        '--u-icon-bar-item-box-shadow': string;
+        '--u-icon-bar-item-gap': string;
+        '--u-icon-bar-item-span': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly label: StringConstructor;
+    readonly icon: PropType<() => VNodeChild>;
+    readonly iconSize: PropType<number | string>;
+    readonly span: PropType<number | string>;
+    readonly typographyProps: {
+        readonly type: PropType<Partial<TextProps>>;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconBar", {
+        itemSize: string;
+        color: string;
+        colorHover: string;
+        itemGap: string;
+        iconSize: string;
+        labelColor: string;
+        labelSizeHover: string;
+        labelColorHover: string;
+        boxShadow: string;
+        span: number;
+        cols: number;
+    }, any>>>;
+}>>, {}, {}>;
+export default _default;

package/es/icon-bar/src/IconBarItem.js

@@ -0,0 +1,50 @@
+import { computed, defineComponent, h } from 'vue';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { iconBarLight } from '../styles';
+import style from './styles/index.cssr';
+import { UText } from '../../typography';
+import { resolveSize } from '../../_utils';
+export const iconBarItemProps = Object.assign(Object.assign({}, useTheme.props), { label: String, icon: Function, iconSize: [Number, String], span: [Number, String], typographyProps: {
+        type: Object
+    } });
+export default defineComponent({
+    name: 'IconBarItem',
+    props: iconBarItemProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('IconBar', '-icon-bar-item', style, iconBarLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { iconSize, labelColor, labelSizeHover, labelColorHover, color, colorHover, boxShadow, itemGap, span }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-icon-bar-item-color': color,
+                '--u-icon-bar-item-icon-size': resolveSize(props.iconSize, iconSize),
+                '--u-icon-bar-item-label-color': labelColor,
+                '--u-icon-bar-item-label-size-hover': labelSizeHover,
+                '--u-icon-bar-item-label-color-hover': labelColorHover,
+                '--u-icon-bar-item-color-hover': colorHover,
+                '--u-icon-bar-item-box-shadow': boxShadow,
+                '--u-icon-bar-item-gap': itemGap,
+                '--u-icon-bar-item-span': String(props.span || span)
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('icon-bar-item', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a, _b, _c, _d, _e;
+        const { mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [`${mergedClsPrefix}-icon-bar-item-wrapper`, this.themeClass], style: this.cssVars },
+            h("div", { class: `${mergedClsPrefix}-icon-bar-item`, style: this.cssVars },
+                h("div", { class: `${mergedClsPrefix}-icon-bar-item__icon` }, ((_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)) || ((_c = this.icon) === null || _c === void 0 ? void 0 : _c.call(this)))),
+            (this.$slots.label || this.label) && (h(UText, Object.assign({ class: `${mergedClsPrefix}-icon-bar-item-wrapper__label`, variant: "heading-s-bold" }, this.typographyProps), ((_e = (_d = this.$slots).label) === null || _e === void 0 ? void 0 : _e.call(_d)) || this.label))));
+    }
+});

package/es/icon-bar/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/icon-bar/src/styles/index.cssr.js

@@ -0,0 +1,62 @@
+import { c, cB, cE } from '../../../_utils/cssr';
+// vars
+// '--u-bezier'
+// '--u-icon-bar-item-size'
+// '--u-icon-bar-item-color'
+// '--u-icon-bar-item-icon-size'
+// '--u-icon-bar-item-label-color'
+// '--u-icon-bar-item-label-size-hover'
+// '--u-icon-bar-item-label-color-hover'
+// '--u-icon-bar-item-color-hover'
+// '--u-icon-bar-item-box-shadow'
+// '--u-icon-bar-item-span'
+// '--u-icon-bar-cols'
+export default c([cB('icon-bar', `
+ justify-content: space-between !important;
+ grid-template-columns: repeat(var(--u-icon-bar-cols), var(--u-icon-bar-item-size)) !important;
+ `), cB('icon-bar-item-wrapper', `
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
+ gap: var(--u-icon-bar-item-gap);
+ grid-column: span var(--u-icon-bar-item-span)
+ `, [cB('icon-bar-item', `
+ width: 100%;
+ height: var(--u-icon-bar-item-size);
+ background-color: var(--u-icon-bar-item-color);
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ justify-content: center;
+ box-shadow: var(--u-icon-bar-item-box-shadow);
+ transition:
+ background-color .3s var(--u-bezier),
+ transform .3s var(--u-bezier);
+ `, [cE('icon', `
+ width: var(--u-icon-bar-item-icon-size);
+ height: var(--u-icon-bar-item-icon-size);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ & > * {
+ width: 100%;
+ height: 100%;
+ }
+ `)]), cE('label', `
+ color: var(--u-icon-bar-item-label-color);
+ font-weight: 400;
+ text-align: center;
+ transition:
+ font-size .2s var(--u-bezier),
+ color .2s var(--u-bezier),
+ font-weight .2s var(--u-bezier);
+ `), c('&:hover', [cB('icon-bar-item', `
+ background-color: var(--u-icon-bar-item-color-hover);
+ transform: scale(1.04);
+ `), cE('label', `
+ font-size: var(--u-icon-bar-item-label-size-hover);
+ color: var(--u-icon-bar-item-label-color-hover);
+ font-weight: 500;
+ `)])])]);

package/es/icon-bar/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { IconBarTheme } from './light';
+declare const iconBarDark: IconBarTheme;
+export default iconBarDark;

package/es/icon-bar/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const iconBarDark = {
+    name: 'IconBar',
+    common: commonDark,
+    self
+};
+export default iconBarDark;

package/es/icon-bar/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as iconBarDark } from './dark';
+export { default as iconBarLight } from './light';
+export type { IconBarTheme, IconBarThemeVars } from './light';

package/es/icon-bar/styles/index.js

@@ -0,0 +1,2 @@
+export { default as iconBarDark } from './dark';
+export { default as iconBarLight } from './light';

package/es/icon-bar/styles/light.d.ts

@@ -0,0 +1,19 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    itemSize: string;
+    color: string;
+    colorHover: string;
+    itemGap: string;
+    iconSize: string;
+    labelColor: string;
+    labelSizeHover: string;
+    labelColorHover: string;
+    boxShadow: string;
+    span: number;
+    cols: number;
+};
+export type IconBarThemeVars = ReturnType<typeof self>;
+declare const iconBarLight: Theme<'IconBar', IconBarThemeVars>;
+export default iconBarLight;
+export type IconBarTheme = typeof iconBarLight;