@uzum-tech/ui 0.1.2 → 1.0.1

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -22,17 +22,7 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  max-height: var(--u-height);
  `), (0, cssr_1.cB)('virtual-list', `
  max-height: var(--u-height);
- `), (0, cssr_1.cB)('base-select-option', `
- min-height: var(--u-option-height);
- font-size: var(--u-option-font-size);
- display: flex;
- align-items: center;
- `, [(0, cssr_1.cE)('content', `
- z-index: 1;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- `)]), (0, cssr_1.cB)('base-select-group-header', `
+ `), (0, cssr_1.cB)('base-select-group-header', `
  min-height: var(--u-option-height);
  font-size: calc(var(--u-option-font-size) - 2px);
  font-weight: 500;
@@ -64,6 +54,10 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  padding: var(--u-option-padding);
  color: var(--u-group-header-text-color);
  `), (0, cssr_1.cB)('base-select-option', `
+ min-height: var(--u-option-height);
+ font-size: var(--u-option-font-size);
+ display: flex;
+ align-items: center;
  cursor: pointer;
  position: relative;
  padding: var(--u-option-padding);
@@ -73,20 +67,32 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  box-sizing: border-box;
  color: var(--u-option-text-color);
  opacity: 1;
- `, [(0, cssr_1.cM)('show-checkmark', `
+ border-radius: var(--u-border-radius);
+ `, [(0, cssr_1.cE)('content', `
+ z-index: 1;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ `), (0, cssr_1.cM)('show-checkmark', `
  padding-right: calc(var(--u-option-padding-right) + 20px);
  `), (0, cssr_1.c)('&::before', `
  content: "";
  position: absolute;
- left: 4px;
- right: 4px;
- top: 4px;
- bottom: 4px;
- border-radius: calc(var(--u-border-radius) - 6px);
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: var(--u-option-border-radius);
  transition: background-color .3s var(--u-bezier);
  `), (0, cssr_1.c)('&:active', `
  color: var(--u-option-text-color-pressed);
- `), (0, cssr_1.cM)('grouped', `
+ `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.c)('&::before', `
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ `)]), (0, cssr_1.c)('&:first-child', [(0, cssr_1.c)('&::before', `
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
+ `)]), (0, cssr_1.cM)('grouped', `
  padding-left: var(--u-option-padding-left);
  `), (0, cssr_1.cM)('pending', [(0, cssr_1.c)('&::before', `
  background-color: var(--u-option-color-pending);

package/lib/_internal/select-menu/styles/light.d.ts

@@ -1,13 +1,20 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    optionPaddingSmall: string;
+    optionPaddingMedium: string;
+    optionPaddingLarge: string;
+    loadingSize: string;
     optionFontSizeSmall: string;
     optionFontSizeMedium: string;
     optionFontSizeLarge: string;
-    optionFontSizeHuge: string;
     optionHeightSmall: string;
     optionHeightMedium: string;
     optionHeightLarge: string;
-    optionHeightHuge: string;
+    optionBorderRadius: string;
     borderRadius: string;
     color: string;
     groupHeaderTextColor: string;
@@ -24,27 +31,24 @@ export declare const self: (vars: ThemeCommonVars) => {
     optionColorActivePending: string;
     actionTextColor: string;
     loadingColor: string;
+};
+export type InternalSelectMenuThemeVars = ReturnType<typeof self>;
+declare const internalSelectMenuLight: import("../../../_mixins").Theme<"InternalSelectMenu", {
     height: string;
     paddingSmall: string;
     paddingMedium: string;
     paddingLarge: string;
-    paddingHuge: string;
     optionPaddingSmall: string;
     optionPaddingMedium: string;
     optionPaddingLarge: string;
-    optionPaddingHuge: string;
     loadingSize: string;
-};
-export type InternalSelectMenuThemeVars = ReturnType<typeof self>;
-declare const internalSelectMenuLight: import("../../../_mixins").Theme<"InternalSelectMenu", {
     optionFontSizeSmall: string;
     optionFontSizeMedium: string;
     optionFontSizeLarge: string;
-    optionFontSizeHuge: string;
     optionHeightSmall: string;
     optionHeightMedium: string;
     optionHeightLarge: string;
-    optionHeightHuge: string;
+    optionBorderRadius: string;
     borderRadius: string;
     color: string;
     groupHeaderTextColor: string;
@@ -61,22 +65,16 @@ declare const internalSelectMenuLight: import("../../../_mixins").Theme<"Interna
     optionColorActivePending: string;
     actionTextColor: string;
     loadingColor: string;
-    height: string;
-    paddingSmall: string;
-    paddingMedium: string;
-    paddingLarge: string;
-    paddingHuge: string;
-    optionPaddingSmall: string;
-    optionPaddingMedium: string;
-    optionPaddingLarge: string;
-    optionPaddingHuge: string;
-    loadingSize: string;
 }, {
     Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
     }, any>;
     Empty: import("../../../_mixins").Theme<"Empty", {
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -84,10 +82,6 @@ declare const internalSelectMenuLight: import("../../../_mixins").Theme<"Interna
         textColor: string;
         iconColor: string;
         extraTextColor: string;
-        iconSizeSmall: string;
-        iconSizeMedium: string;
-        iconSizeLarge: string;
-        iconSizeHuge: string;
     }, any>;
 }>;
 export default internalSelectMenuLight;

package/lib/_internal/select-menu/styles/light.js

@@ -1,17 +1,45 @@
 "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 styles_1 = require("../../../empty/styles");
 const styles_2 = require("../../scrollbar/styles");
 const common_1 = require("../../../_styles/common");
-const _common_1 = __importDefault(require("./_common"));
 const _mixins_1 = require("../../../_mixins");
 const self = (vars) => {
-    const { borderRadius, popoverColor, textColor3, dividerColor, textColor2, primaryColorPressed, textColorDisabled, primaryColor, opacityDisabled, hoverColor, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeHuge, heightSmall, heightMedium, heightLarge, heightHuge } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, optionColorActive: 'rgba(0, 0, 0, 0)', optionGroupHeaderBorderColor: `0.5px solid ${primaryColor}`, optionColorActivePending: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor });
+    const { borderRadius, iconMedium, fontBodyMedium, fontBodyLarge, surfacePrimary, textPrimary, elementsQuaternary, textSecondary, brandPrimary500, transparencySecondary, heightMedium, heightLarge, heightSmall } = vars;
+    return {
+        height: 'calc(var(--u-option-height) * 7.6)',
+        paddingSmall: '0',
+        paddingMedium: '0',
+        paddingLarge: '0',
+        optionPaddingSmall: '0 24px',
+        optionPaddingMedium: '0 24px',
+        optionPaddingLarge: '0 24px',
+        loadingSize: iconMedium,
+        optionFontSizeSmall: fontBodyMedium,
+        optionFontSizeMedium: fontBodyMedium,
+        optionFontSizeLarge: fontBodyLarge,
+        optionHeightSmall: heightSmall,
+        optionHeightMedium: heightMedium,
+        optionHeightLarge: heightLarge,
+        optionBorderRadius: '0',
+        borderRadius,
+        color: surfacePrimary,
+        groupHeaderTextColor: textPrimary,
+        actionDividerColor: elementsQuaternary,
+        optionTextColor: textPrimary,
+        optionTextColorPressed: textPrimary,
+        optionTextColorDisabled: textSecondary,
+        optionTextColorActive: brandPrimary500,
+        optionOpacityDisabled: '0.5',
+        optionCheckColor: brandPrimary500,
+        optionColorPending: transparencySecondary,
+        optionColorActive: 'rgba(0, 0, 0, 0)',
+        optionGroupHeaderBorderColor: `1px solid ${elementsQuaternary}`,
+        optionColorActivePending: 'rgba(0, 0, 0, 0)',
+        actionTextColor: textPrimary,
+        loadingColor: brandPrimary500
+    };
 };
 exports.self = self;
 const internalSelectMenuLight = (0, _mixins_1.createTheme)({

package/lib/_internal/selection/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './src/Selection';
 export type { InternalSelectionInst } from './src/Selection';
+export type { SelectSize } from './src/interface';