@uzum-tech/ui 0.1.2 → 1.0.0

package/lib/time-picker/src/TimePicker.js

@@ -584,12 +584,13 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('time-picker-trigger', undefined, triggerCssVarsRef, props)
             : undefined;
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemFontWeight, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border-radius': borderRadius,
                 '--u-item-color-hover': itemColorHover,
                 '--u-item-font-size': itemFontSize,
+                '--u-item-font-weight': itemFontWeight,
                 '--u-item-height': itemHeight,
                 '--u-item-opacity-disabled': itemOpacityDisabled,
                 '--u-item-text-color': itemTextColor,

package/lib/time-picker/src/interface.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from 'vue';
 import { type ScrollbarInst } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { TimePickerTheme } from '../styles';
+import { InputSize } from '../../input';
 export type ItemValue = number | 'am' | 'pm';
 export interface Item {
     label: string;
@@ -27,7 +28,7 @@ export type OnUpdateFormattedValueImpl = (value: string | null, timestampValue:
 export type IsHourDisabled = (hour: number) => boolean;
 export type IsMinuteDisabled = (minute: number, hour: number | null) => boolean;
 export type IsSecondDisabled = (second: number, minute: number | null, hour: number | null) => boolean;
-export type Size = 'small' | 'medium' | 'large';
+export type Size = InputSize;
 export interface TimePickerInst {
     focus: () => void;
     blur: () => void;

package/lib/time-picker/src/styles/index.cssr.js

@@ -36,6 +36,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('time-picker', `
  background-color .3s var(--u-bezier);
  outline: none;
  font-size: var(--u-item-font-size);
+ font-weight: var(--u-item-font-weight);
  border-radius: var(--u-border-radius);
  margin: 4px 0;
  min-width: 104px;

package/lib/time-picker/styles/light.d.ts

@@ -1,5 +1,10 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
+    itemFontSize: string;
+    itemFontWeight: string;
+    itemHeight: string;
+    itemWidth: string;
+    panelActionPadding: string;
     panelColor: string;
     panelBoxShadow: string;
     panelDividerColor: string;
@@ -11,13 +16,14 @@ export declare const self: (vars: ThemeCommonVars) => {
     borderRadius: string;
     iconColor: string;
     iconColorDisabled: string;
+};
+export type TimePickerThemeVars = ReturnType<typeof self>;
+declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
     itemFontSize: string;
+    itemFontWeight: string;
     itemHeight: string;
     itemWidth: string;
     panelActionPadding: string;
-};
-export type TimePickerThemeVars = ReturnType<typeof self>;
-declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
     panelColor: string;
     panelBoxShadow: string;
     panelDividerColor: string;
@@ -29,10 +35,6 @@ declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
     borderRadius: string;
     iconColor: string;
     iconColorDisabled: string;
-    itemFontSize: string;
-    itemHeight: string;
-    itemWidth: string;
-    panelActionPadding: string;
 }, {
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;
@@ -64,7 +66,7 @@ declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -250,21 +252,28 @@ declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
         rippleDuration: string;
     }, any>;
     Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -304,11 +313,7 @@ declare const timePickerLight: import("../../_mixins").Theme<"TimePicker", {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>;
 }>;
 export default timePickerLight;

package/lib/time-picker/styles/light.js

@@ -1,20 +1,31 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
-const _common_1 = __importDefault(require("./_common"));
 const styles_1 = require("../../_internal/scrollbar/styles");
 const common_1 = require("../../_styles/common");
 const styles_2 = require("../../button/styles");
 const _mixins_1 = require("../../_mixins");
 const styles_3 = require("../../input/styles");
 const self = (vars) => {
-    const { popoverColor, textColor2, primaryColor, hoverColor, dividerColor, opacityDisabled, boxShadow2, borderRadius, iconColor, iconColorDisabled } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { panelColor: popoverColor, panelBoxShadow: boxShadow2, panelDividerColor: dividerColor, itemTextColor: textColor2, itemTextColorActive: primaryColor, itemColorHover: hoverColor, itemOpacityDisabled: opacityDisabled, itemBorderRadius: borderRadius, borderRadius,
-        iconColor,
-        iconColorDisabled });
+    const { opacityDisabled, borderRadius, fontBodyMedium, fontWeight, containerPrimary, shadowDepth2, elementsQuaternary, textPrimary, brandPrimary500, elementsTertiary, elementsPrimary, elementsQuinary } = vars;
+    return {
+        itemFontSize: fontBodyMedium,
+        itemFontWeight: fontWeight,
+        itemHeight: '36px',
+        itemWidth: '52px',
+        panelActionPadding: '8px 0',
+        panelColor: containerPrimary,
+        panelBoxShadow: shadowDepth2,
+        panelDividerColor: elementsQuaternary,
+        itemTextColor: textPrimary,
+        itemTextColorActive: brandPrimary500,
+        itemColorHover: elementsTertiary,
+        itemOpacityDisabled: opacityDisabled,
+        itemBorderRadius: borderRadius,
+        borderRadius,
+        iconColor: elementsPrimary,
+        iconColorDisabled: elementsQuinary
+    };
 };
 exports.self = self;
 const timePickerLight = (0, _mixins_1.createTheme)({

package/lib/timeline/src/Timeline.d.ts

@@ -14,6 +14,12 @@ export declare const timelineProps: {
     };
     readonly iconSize: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Timeline", {
+        titleMarginMedium: string;
+        titleMarginLarge: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -30,14 +36,14 @@ export declare const timelineProps: {
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -54,14 +60,14 @@ export declare const timelineProps: {
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -78,12 +84,6 @@ export declare const timelineProps: {
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
-        titleMarginMedium: string;
-        titleMarginLarge: string;
-        titleFontSizeMedium: string;
-        titleFontSizeLarge: string;
-        iconSizeMedium: string;
-        iconSizeLarge: string;
     }, any>>>;
 };
 export interface TimelineInjection {
@@ -105,6 +105,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly iconSize: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Timeline", {
+        titleMarginMedium: string;
+        titleMarginLarge: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -121,14 +127,14 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -145,14 +151,14 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -169,12 +175,6 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
-        titleMarginMedium: string;
-        titleMarginLarge: string;
-        titleFontSizeMedium: string;
-        titleFontSizeLarge: string;
-        iconSizeMedium: string;
-        iconSizeLarge: string;
     }, any>>>;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly horizontal: BooleanConstructor;
@@ -188,6 +188,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly iconSize: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Timeline", {
+        titleMarginMedium: string;
+        titleMarginLarge: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -204,14 +210,14 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>;
-    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -228,14 +234,14 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         titleMarginMedium: string;
         titleMarginLarge: string;
         titleFontSizeMedium: string;
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>>>;
-    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -252,12 +258,6 @@ declare const _default: import("vue").DefineComponent<{
         contentTextColor: string;
         metaTextColor: string;
         lineColor: string;
-        titleMarginMedium: string;
-        titleMarginLarge: string;
-        titleFontSizeMedium: string;
-        titleFontSizeLarge: string;
-        iconSizeMedium: string;
-        iconSizeLarge: string;
     }, any>>>;
 }>>, {
     readonly size: "medium" | "large";

package/lib/timeline/styles/dark.js

@@ -1,16 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
 const timelineDark = {
     name: 'Timeline',
     common: common_1.commonDark,
-    self(vars) {
-        const { textColor3, infoColorSuppl, errorColorSuppl, successColorSuppl, warningColorSuppl, textColor1, textColor2, railColor, fontWeightStrong, fontSize } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { contentFontSize: fontSize, titleFontWeight: fontWeightStrong, circleBorder: `2px solid ${textColor3}`, circleBorderInfo: `2px solid ${infoColorSuppl}`, circleBorderError: `2px solid ${errorColorSuppl}`, circleBorderSuccess: `2px solid ${successColorSuppl}`, circleBorderWarning: `2px solid ${warningColorSuppl}`, iconColor: textColor3, iconColorInfo: infoColorSuppl, iconColorError: errorColorSuppl, iconColorSuccess: successColorSuppl, iconColorWarning: warningColorSuppl, titleTextColor: textColor1, contentTextColor: textColor2, metaTextColor: textColor3, lineColor: railColor });
-    }
+    self: light_1.self
 };
 exports.default = timelineDark;

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

@@ -1,6 +1,12 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    titleMarginMedium: string;
+    titleMarginLarge: string;
+    titleFontSizeMedium: string;
+    titleFontSizeLarge: string;
+    iconSizeMedium: string;
+    iconSizeLarge: string;
     contentFontSize: string;
     titleFontWeight: string;
     circleBorder: string;
@@ -17,12 +23,6 @@ declare const self: (vars: ThemeCommonVars) => {
     contentTextColor: string;
     metaTextColor: string;
     lineColor: string;
-    titleMarginMedium: string;
-    titleMarginLarge: string;
-    titleFontSizeMedium: string;
-    titleFontSizeLarge: string;
-    iconSizeMedium: string;
-    iconSizeLarge: string;
 };
 export type TimelineThemeVars = ReturnType<typeof self>;
 declare const timelineLight: Theme<'Timeline', TimelineThemeVars>;

package/lib/timeline/styles/light.js

@@ -1,17 +1,38 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
+exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textColor3, infoColor, errorColor, successColor, warningColor, textColor1, textColor2, railColor, fontWeightStrong, fontSize } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { contentFontSize: fontSize, titleFontWeight: fontWeightStrong, circleBorder: `2px solid ${textColor3}`, circleBorderInfo: `2px solid ${infoColor}`, circleBorderError: `2px solid ${errorColor}`, circleBorderSuccess: `2px solid ${successColor}`, circleBorderWarning: `2px solid ${warningColor}`, iconColor: textColor3, iconColorInfo: infoColor, iconColorError: errorColor, iconColorSuccess: successColor, iconColorWarning: warningColor, titleTextColor: textColor1, contentTextColor: textColor2, metaTextColor: textColor3, lineColor: railColor });
+    const { fontWeightStrong, fontBodyLarge, fontBodyMedium, brandQuaternary500, staticRed, staticGreen, staticOrange, textPrimary, textSecondary, elementsQuinary } = vars;
+    return {
+        titleMarginMedium: '0 0 6px 0',
+        titleMarginLarge: '-2px 0 6px 0',
+        titleFontSizeMedium: fontBodyMedium,
+        titleFontSizeLarge: fontBodyLarge,
+        iconSizeMedium: fontBodyMedium,
+        iconSizeLarge: fontBodyLarge,
+        contentFontSize: fontBodyMedium,
+        titleFontWeight: fontWeightStrong,
+        circleBorder: `2px solid ${elementsQuinary}`,
+        circleBorderInfo: `2px solid ${brandQuaternary500}`,
+        circleBorderError: `2px solid ${staticRed}`,
+        circleBorderSuccess: `2px solid ${staticGreen}`,
+        circleBorderWarning: `2px solid ${staticOrange}`,
+        iconColor: elementsQuinary,
+        iconColorInfo: brandQuaternary500,
+        iconColorError: staticRed,
+        iconColorSuccess: staticGreen,
+        iconColorWarning: staticOrange,
+        titleTextColor: textPrimary,
+        contentTextColor: textSecondary,
+        metaTextColor: textSecondary,
+        lineColor: elementsQuinary
+    };
 };
+exports.self = self;
 const timelineLight = {
     name: 'Timeline',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };
 exports.default = timelineLight;

package/lib/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UToggleButton, toggleButtonProps } from './src/ToggleButton';
+export type { ToggleButtonProps } from './src/ToggleButton';

package/lib/toggle-button/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleButtonProps = exports.UToggleButton = void 0;
+var ToggleButton_1 = require("./src/ToggleButton");
+Object.defineProperty(exports, "UToggleButton", { enumerable: true, get: function () { return __importDefault(ToggleButton_1).default; } });
+Object.defineProperty(exports, "toggleButtonProps", { enumerable: true, get: function () { return ToggleButton_1.toggleButtonProps; } });