@uzum-tech/ui 1.11.1 → 1.12.0

package/lib/header/styles/light.d.ts

@@ -0,0 +1,72 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    fontSize: string;
+    fontBodyLarge: string;
+    fontTitleSmall: string;
+    backgroundColor: string;
+    textColor: string;
+    mutedTextColor: string;
+    borderRadius: string;
+    shadow: string;
+    navigationGap: string;
+    actionGap: string;
+    tabTextColor: string;
+    tabTextColorHover: string;
+    tabTextColorActive: string;
+    tabIndicatorColor: string;
+    cardBackgroundColor: string;
+    cardShadow: string;
+    cardBorderRadius: string;
+    cardTitleColor: string;
+    cardItemColor: string;
+    cardItemHoverColor: string;
+    cardDividerColor: string;
+    cardGap: string;
+    cardPadding: string;
+    badgeBackgroundColor: string;
+    badgeTextColor: string;
+    actionIconColor: string;
+    actionIconColorHover: string;
+    mobileBorderColor: string;
+    mobileItemHoverColor: string;
+    mobileItemPressedColor: string;
+    mobileItemActiveColor: string;
+    mobileGroupItemColor: string;
+};
+declare const headerLight: import("../../_mixins").Theme<"Header", {
+    fontSize: string;
+    fontBodyLarge: string;
+    fontTitleSmall: string;
+    backgroundColor: string;
+    textColor: string;
+    mutedTextColor: string;
+    borderRadius: string;
+    shadow: string;
+    navigationGap: string;
+    actionGap: string;
+    tabTextColor: string;
+    tabTextColorHover: string;
+    tabTextColorActive: string;
+    tabIndicatorColor: string;
+    cardBackgroundColor: string;
+    cardShadow: string;
+    cardBorderRadius: string;
+    cardTitleColor: string;
+    cardItemColor: string;
+    cardItemHoverColor: string;
+    cardDividerColor: string;
+    cardGap: string;
+    cardPadding: string;
+    badgeBackgroundColor: string;
+    badgeTextColor: string;
+    actionIconColor: string;
+    actionIconColorHover: string;
+    mobileBorderColor: string;
+    mobileItemHoverColor: string;
+    mobileItemPressedColor: string;
+    mobileItemActiveColor: string;
+    mobileGroupItemColor: string;
+}, unknown>;
+export default headerLight;
+export type HeaderThemeVars = ReturnType<typeof self>;
+export type HeaderTheme = typeof headerLight;

package/lib/header/styles/light.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const _mixins_1 = require("../../_mixins");
+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
+    };
+};
+exports.self = self;
+const headerLight = (0, _mixins_1.createTheme)({
+    name: 'Header',
+    common: common_1.commonLight,
+    self: exports.self
+});
+exports.default = headerLight;

package/lib/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/lib/icon/src/Icon.js

@@ -9,7 +9,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.iconProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object });
+exports.iconProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object, onClick: Function });
 exports.UIcon = (0, vue_1.defineComponent)({
     _n_icon__: true,
     name: 'Icon',
@@ -69,7 +69,8 @@ exports.UIcon = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
                 }
             ],
-            style: [this.cssVars, this.mergedStyle]
+            style: [this.cssVars, this.mergedStyle],
+            onClick: this.onClick
         }), component ? (0, vue_1.h)(component) : this.$slots);
     }
 });

package/lib/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/lib/icon-bar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconBarItemProps = exports.UIconBarItem = exports.iconBarProps = exports.UIconBar = void 0;
+var IconBar_1 = require("./src/IconBar");
+Object.defineProperty(exports, "UIconBar", { enumerable: true, get: function () { return __importDefault(IconBar_1).default; } });
+Object.defineProperty(exports, "iconBarProps", { enumerable: true, get: function () { return IconBar_1.iconBarProps; } });
+var IconBarItem_1 = require("./src/IconBarItem");
+Object.defineProperty(exports, "UIconBarItem", { enumerable: true, get: function () { return __importDefault(IconBarItem_1).default; } });
+Object.defineProperty(exports, "iconBarItemProps", { enumerable: true, get: function () { return IconBarItem_1.iconBarItemProps; } });

package/lib/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/lib/icon-bar/src/IconBar.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconBarProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const IconBarItem_1 = __importDefault(require("./IconBarItem"));
+const grid_1 = require("../../grid");
+const _utils_1 = require("../../_utils");
+exports.iconBarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { items: {
+        type: Array,
+        default: () => []
+    }, cols: {
+        type: Number,
+        default: 6
+    }, gridProps: {
+        type: Object
+    }, itemSize: [Number, String] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'IconBar',
+    props: exports.iconBarProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('IconBar', '-icon-bar', index_cssr_1.default, styles_1.iconBarLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { itemSize } } = themeRef.value;
+            return {
+                '--u-icon-bar-cols': String(props.cols),
+                '--u-icon-bar-item-size': (0, _utils_1.resolveSize)(props.itemSize, itemSize)
+            };
+        });
+        const renderIconBarItems = (items) => {
+            if (slots.default) {
+                return slots
+                    .default()
+                    .map((vnode, index) => (0, vue_1.h)(grid_1.UGridItem, { key: index }, vnode));
+            }
+            return items.map((item, index) => ((0, vue_1.h)(grid_1.UGridItem, { key: index, span: item.span },
+                (0, vue_1.h)(IconBarItem_1.default, Object.assign({}, item)))));
+        };
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.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 ((0, vue_1.h)(grid_1.UGrid, Object.assign({ class: [`${mergedClsPrefix}-icon-bar`, themeClass], style: cssVars, cols: this.cols, xGap: 20, yGap: 32 }, this.gridProps), {
+            default: () => this.renderIconBarItems(items)
+        }));
+    }
+});

package/lib/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/lib/icon-bar/src/IconBarItem.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconBarItemProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const typography_1 = require("../../typography");
+const _utils_1 = require("../../_utils");
+exports.iconBarItemProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { label: String, icon: Function, iconSize: [Number, String], span: [Number, String], typographyProps: {
+        type: Object
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'IconBarItem',
+    props: exports.iconBarItemProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('IconBar', '-icon-bar-item', index_cssr_1.default, styles_1.iconBarLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.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': (0, _utils_1.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
+            ? (0, _mixins_1.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 ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-icon-bar-item-wrapper`, this.themeClass], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-icon-bar-item`, style: this.cssVars },
+                (0, vue_1.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) && ((0, vue_1.h)(typography_1.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/lib/icon-bar/src/styles/index.cssr.d.ts

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