@cuby-ui/core 0.0.5 → 0.0.7

package/index.d.ts

@@ -1,2 +1,4 @@
-export * from './components';
-export * from './types';
+export * from './components';
+export * from './types';
+export * from './utils';
+export * from './interfaces';

package/interfaces/context-menu-item.d.ts

@@ -0,0 +1,6 @@
+import { CuiIcon } from '@cuby-ui/icons';
+export interface CuiContextMenuItem {
+    readonly label: string;
+    readonly icon?: CuiIcon | string;
+    readonly command?: () => void;
+}

package/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './context-menu-item';

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@cuby-ui/core",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "peerDependencies": {
     "@angular/common": ">=15.0.0",
     "@angular/core": ">=15.0.0",
-    "@cuby-ui/icons": "^0.0.5"
+    "@angular/forms": ">=15.0.0",
+    "@cuby-ui/icons": "^0.0.7",
+    "@cuby-ui/cdk": "^0.0.7"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/fonts.scss

@@ -0,0 +1,51 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/Inter-Regular.eot');
+  src: url('../fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/Inter-Regular.woff2') format('woff2'),
+       url('../fonts/Inter-Regular.woff') format('woff'),
+       url('../fonts/Inter-Regular.ttf') format('truetype'),
+       url('../fonts/Inter-Regular.svg#Inter-Regular') format('svg'),
+       url('../fonts/Inter-Regular.otf') format('otf');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/Inter-Medium.eot');
+  src: url('../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/Inter-Medium.woff2') format('woff2'),
+       url('../fonts/Inter-Medium.woff') format('woff'),
+       url('../fonts/Inter-Medium.ttf') format('truetype'),
+       url('../fonts/Inter-Medium.svg#Inter-Medium') format('svg'),
+       url('../fonts/Inter-Medium.otf') format('otf');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/Inter-SemiBold.eot');
+  src: url('../fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/Inter-SemiBold.woff2') format('woff2'),
+       url('../fonts/Inter-SemiBold.woff') format('woff'),
+       url('../fonts/Inter-SemiBold.ttf') format('truetype'),
+       url('../fonts/Inter-SemiBold.svg#Inter-SemiBold') format('svg'),
+       url('../fonts/Inter-SemiBold.otf') format('otf');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/Inter-Bold.eot');
+  src: url('../fonts/Inter-Bold.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/Inter-Bold.woff2') format('woff2'),
+       url('../fonts/Inter-Bold.woff') format('woff'),
+       url('../fonts/Inter-Bold.ttf') format('truetype'),
+       url('../fonts/Inter-Bold.svg#Inter-Bold') format('svg'),
+       url('../fonts/Inter-Bold.otf') format('otf');
+}

package/styles/global.scss

@@ -0,0 +1,8 @@
+@forward 'variables/colors';
+@forward 'variables/fonts';
+@forward 'mixins/texts';
+@forward 'mixins/buttons';
+@forward 'mixins/shadows';
+@forward 'mixins/paddings';
+@forward 'mixins/inputs';
+@forward 'mixins/lists';

package/styles/mixins/buttons.scss

@@ -0,0 +1,10 @@
+@mixin cui-clear-button() {
+  padding: 0;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  background: inherit;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}

package/styles/mixins/inputs.scss

@@ -0,0 +1,77 @@
+@use '../variables/colors' as colors;
+@use '../variables/fonts' as fonts;
+@use './texts' as texts;
+@use './paddings' as paddings;
+@use './shadows' as shadows;
+
+@mixin cui-clear-input() {
+  padding: 0;
+  outline: none;
+  margin: 0;
+  border-width: 0;
+  appearance: none;
+  caret-color: currentColor;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+}
+
+@mixin cui-default-input() {
+  :host {
+    $border-width: 1px;
+
+    @include paddings.cui-padding(vertical, 1.125, $border-width);
+    @include paddings.cui-padding(horizontal, 1.75, $border-width);
+    @include texts.cui-text-sm-regular();
+
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: $border-width solid colors.$cui-base-200;
+    border-radius: 8px;
+    cursor: text;
+    background: colors.$cui-base-10;
+    color: colors.$cui-base-900;
+    font-family: fonts.$cui-main-font;
+
+    &:hover {
+      border-color: colors.$cui-base-300;
+    }
+
+    &:focus-within {
+      @include shadows.cui-shadow-focused();
+
+      border-color: colors.$cui-info-600;
+    }
+
+    &._disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background: colors.$cui-base-50;
+      border-color: colors.$cui-base-200;
+    }
+
+    &._with-error {
+      border-color: colors.$cui-error-500;
+
+      &:focus-within {
+        @include shadows.cui-shadow-error-focused();
+      }
+    }
+  }
+
+  .c-input {
+    @include cui-clear-input();
+
+    width: 100%;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &::placeholder {
+      color: colors.$cui-base-400;
+    }
+  }
+}

package/styles/mixins/lists.scss

@@ -0,0 +1,5 @@
+@mixin cui-clear-list() {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/styles/mixins/paddings.scss

@@ -0,0 +1,35 @@
+$space: 8px;
+
+@mixin cui-padding($direction, $size, $offset: 0) {
+  $padding: $space * $size - $offset;
+
+  @if ($direction == all) {
+    padding: $padding;
+  }
+
+  @if ($direction == top) {
+    padding-top: $padding;
+  }
+
+  @if ($direction == bottom) {
+    padding-bottom: $padding;
+  }
+
+  @if ($direction == vertical) {
+    padding-top: $padding;
+    padding-bottom: $padding;
+  }
+
+  @if ($direction == left) {
+    padding-left: $padding;
+  }
+
+  @if ($direction == right) {
+    padding-right: $padding;
+  }
+
+  @if ($direction == horizontal) {
+    padding-right: $padding;
+    padding-left: $padding;
+  }
+}

package/styles/mixins/shadows.scss

@@ -0,0 +1,37 @@
+// TODO: вынести все цвета в перемнные
+
+@mixin cui-shadow-10() {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04),
+              0 1px 4px 0 rgba(0, 0, 0, 0.04);
+}
+
+@mixin cui-shadow-15() {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+              0 1px 3px 0 rgba(0, 0, 0, 0.10);
+}
+
+@mixin cui-shadow-20() {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06),
+              0 4px 6px -1px rgba(0, 0, 0, 0.10);
+}
+
+@mixin cui-shadow-25() {
+  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
+              0 10px 15px -3px rgba(0, 0, 0, 0.10);
+}
+
+@mixin cui-shadow-right() {
+  box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+@mixin cui-shadow-left() {
+  box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+@mixin cui-shadow-focused() {
+  box-shadow: 0 0 0 2px #E5ECFF;
+}
+
+@mixin cui-shadow-error-focused() {
+  box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
+}

package/styles/mixins/texts.scss

@@ -1,15 +1,219 @@
-@mixin text-xxs() {
-  font-size: 12px;
-  line-height: 14px;
-}
-
-@mixin text-xs() {
-  font-size: 13px;
-  line-height: 16px;
-}
-
-@mixin text-sm-medium() {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-}
+@mixin cui-text-regular() {
+  font-weight: 400;
+}
+
+@mixin cui-text-medium() {
+  font-weight: 500;
+}
+
+@mixin cui-text-semi-bold() {
+  font-weight: 600;
+}
+
+@mixin cui-text-bold() {
+  font-weight: 700;
+}
+
+@mixin cui-text-xxxs() {
+  font-size: 10px;
+  line-height: 12px;
+}
+
+@mixin cui-text-xxxs-regular() {
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+@mixin cui-text-xxxs-medium() {
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+@mixin cui-text-xxxs-semi-bold() {
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+@mixin cui-text-xxxs-bold() {
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 12px;
+}
+
+
+@mixin cui-text-xxs() {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin cui-text-xxs-regular() {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin cui-text-xxs-medium() {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin cui-text-xxs-semi-bold() {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin cui-text-xxs-bold() {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+@mixin cui-text-xs() {
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin cui-text-xs-regular() {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin cui-text-xs-medium() {
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin cui-text-xs-semi-bold() {
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin cui-text-xs-bold() {
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin cui-text-sm() {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin cui-text-sm-regular() {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin cui-text-sm-medium() {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin cui-text-sm-semi-bold() {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin cui-text-sm-bold() {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin cui-text-md() {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin cui-text-md-regular() {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin cui-text-md-medium() {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin cui-text-md-semi-bold() {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin cui-text-md-bold() {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+@mixin cui-text-lg() {
+  font-size: 18px;
+  line-height: 28px;
+}
+
+@mixin cui-text-lg-regular() {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+@mixin cui-text-lg-medium() {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+@mixin cui-text-lg-semi-bold() {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+@mixin cui-text-lg-bold() {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+@mixin cui-text-xl() {
+  font-size: 20px;
+  line-height: 30px;
+}
+
+@mixin cui-text-xl-regular() {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+@mixin cui-text-xl-medium() {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+@mixin cui-text-xl-semi-bold() {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+@mixin cui-text-xl-bold() {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 30px;
+}

package/styles/{cui-ui-theme.scss → theme.scss}

@@ -1,37 +1,49 @@
-:root {
-  --cui-main-font: Inter, sans-serif;
-
-  --cui-gray-0: #FFFFFF;
-  --cui-gray-10: #F9FAFB;
-  --cui-gray-50: #F5F6F8;
-  --cui-gray-100: #E9EBEE;
-  --cui-gray-200: #E2E4E9;
-  --cui-gray-500: #6B7280;
-  --cui-gray-900: #111827;
-
-  --cui-cyan-800: #297F7E;
-  --cui-cyan-900: #1A6B6A;
-
-  --cui-red-800: #D92D20;
-  --cui-red-900: #B41308;
-
-  --cui-blue-600: #1570EF;
-  --cui-blue-900: #00429D;
-
-  --cui-base-0: var(--cui-gray-0);
-  --cui-base-10: var(--cui-gray-10);
-  --cui-base-50: var(--cui-gray-50);
-  --cui-base-100: var(--cui-gray-100);
-  --cui-base-200: var(--cui-gray-200);
-  --cui-base-500: var(--cui-gray-500);
-  --cui-base-900: var(--cui-gray-900);
-
-  --cui-primary-800: var(--cui-cyan-800);
-  --cui-primary-900: var(--cui-cyan-900);
-
-  --cui-error-800: var(--cui-red-800);
-  --cui-error-900: var(--cui-red-900);
-
-  --cui-info-600: var(--cui-blue-600);
-  --cui-info-900: var(--cui-blue-900);
-}
+:root {
+  --cui-main-font: Inter, sans-serif;
+
+  --cui-gray-0: #FFFFFF;
+  --cui-gray-10: #F9FAFB;
+  --cui-gray-50: #F5F6F8;
+  --cui-gray-100: #E9EBEE;
+  --cui-gray-200: #E2E4E9;
+  --cui-gray-300: #B4B9C1;
+  --cui-gray-400: #8A95A3;
+  --cui-gray-500: #6B7280;
+  --cui-gray-600: #4B5563;
+  --cui-gray-900: #111827;
+
+  --cui-cyan-800: #297F7E;
+  --cui-cyan-900: #1A6B6A;
+
+  --cui-green-600: #17C174;
+  --cui-green-700: #039855;
+
+  --cui-red-500: #D92D20;
+  --cui-red-600: #B82E2E;
+
+  --cui-blue-600: #1570EF;
+  --cui-blue-900: #00429D;
+
+  --cui-base-0: var(--cui-gray-0);
+  --cui-base-10: var(--cui-gray-10);
+  --cui-base-50: var(--cui-gray-50);
+  --cui-base-100: var(--cui-gray-100);
+  --cui-base-200: var(--cui-gray-200);
+  --cui-base-300: var(--cui-gray-300);
+  --cui-base-400: var(--cui-gray-400);
+  --cui-base-500: var(--cui-gray-500);
+  --cui-base-600: var(--cui-gray-600);
+  --cui-base-900: var(--cui-gray-900);
+
+  --cui-accent-800: var(--cui-cyan-800);
+  --cui-accent-900: var(--cui-cyan-900);
+
+  --cui-success-600: var(--cui-green-600);
+  --cui-success-700: var(--cui-green-700);
+
+  --cui-error-500: var(--cui-red-500);
+  --cui-error-600: var(--cui-red-600);
+
+  --cui-info-600: var(--cui-blue-600);
+  --cui-info-900: var(--cui-blue-900);
+}

package/styles/variables/colors.scss

@@ -1,33 +1,45 @@
-$cui-gray-0: var(--cui-gray-0);
-$cui-gray-10: var(--cui-gray-10);
-$cui-gray-50: var(--cui-gray-50);
-$cui-gray-100: var(--cui-gray-100);
-$cui-gray-200: var(--cui-gray-200);
-$cui-gray-500: var(--cui-gray-500);
-$cui-gray-900: var(--cui-gray-900);
-
-$cui-cyan-800: var(--cui-cyan-800);
-$cui-cyan-900: var(--cui-cyan-900);
-
-$cui-red-800: var(--cui-red-800);
-$cui-red-900: var(--cui-red-900);
-
-$cui-blue-600: var(--cui-blue-600);
-$cui-blue-900: var(--cui-blue-900);
-
-$cui-base-0: var(--cui-base-0);
-$cui-base-10: var(--cui-base-10);
-$cui-base-50: var(--cui-base-50);
-$cui-base-100: var(--cui-base-100);
-$cui-base-200: var(--cui-base-200);
-$cui-base-500: var(--cui-base-500);
-$cui-base-900: var(--cui-base-900);
-
-$cui-primary-800: var(--cui-primary-800);
-$cui-primary-900: var(--cui-primary-900);
-
-$cui-error-800: var(--cui-error-800);
-$cui-error-900: var(--cui-error-900);
-
-$cui-info-600: var(--cui-info-600);
-$cui-info-900: var(--cui-info-900);
+$cui-gray-0: var(--cui-gray-0);
+$cui-gray-10: var(--cui-gray-10);
+$cui-gray-50: var(--cui-gray-50);
+$cui-gray-100: var(--cui-gray-100);
+$cui-gray-200: var(--cui-gray-200);
+$cui-gray-300: var(--cui-gray-300);
+$cui-gray-400: var(--cui-gray-400);
+$cui-gray-500: var(--cui-gray-500);
+$cui-gray-600: var(--cui-gray-600);
+$cui-gray-900: var(--cui-gray-900);
+
+$cui-cyan-800: var(--cui-cyan-800);
+$cui-cyan-900: var(--cui-cyan-900);
+
+$cui-green-600: var(--cui-green-600);
+$cui-green-700: var(--cui-green-700);
+
+$cui-red-500: var(--cui-red-500);
+$cui-red-600: var(--cui-red-600);
+
+$cui-blue-600: var(--cui-blue-600);
+$cui-blue-900: var(--cui-blue-900);
+
+$cui-base-0: var(--cui-base-0);
+$cui-base-10: var(--cui-base-10);
+$cui-base-50: var(--cui-base-50);
+$cui-base-100: var(--cui-base-100);
+$cui-base-200: var(--cui-base-200);
+$cui-base-300: var(--cui-base-300);
+$cui-base-400: var(--cui-base-400);
+$cui-base-500: var(--cui-base-500);
+$cui-base-600: var(--cui-base-600);
+$cui-base-900: var(--cui-base-900);
+
+$cui-accent-800: var(--cui-accent-800);
+$cui-accent-900: var(--cui-accent-900);
+
+$cui-success-600: var(--cui-success-600);
+$cui-success-700: var(--cui-success-700);
+
+$cui-error-500: var(--cui-error-500);
+$cui-error-600: var(--cui-error-600);
+
+$cui-info-600: var(--cui-info-600);
+$cui-info-900: var(--cui-info-900);

package/types/appearance.d.ts

@@ -1,7 +1,7 @@
-export type CuiAppearancePrimary = 'primary';
-export type CuiAppearanceSecondary = 'secondary';
-export type CuiAppearanceOutlined = 'outlined';
-export type CuiAppearanceOutlinedGray = 'outlined-gray';
-export type CuiAppearanceGhost = 'ghost';
-export type CuiAppearanceDestructive = 'destructive';
-export type CuiAppearanceLink = 'link';
+export type CuiAppearanceAccent = 'accent';
+export type CuiAppearanceSecondary = 'secondary';
+export type CuiAppearanceOutlined = 'outlined';
+export type CuiAppearanceOutlinedGray = 'outlined-gray';
+export type CuiAppearanceGhost = 'ghost';
+export type CuiAppearanceDestructive = 'destructive';
+export type CuiAppearanceLink = 'link';