@companix/uikit 0.0.2 → 0.0.3

package/src/mixins.scss

@@ -1,99 +0,0 @@
-@use './theme.scss';
-@use './css.scss';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
-
-@mixin height($size) {
-  height: $size;
-  min-height: $size;
-  max-height: $size;
-}
-
-@mixin box($size) {
-  height: $size;
-  width: $size;
-  min-width: $size;
-}
-
-@mixin items-spacing($spacing) {
-  & > * {
-    margin-right: $spacing;
-  }
-
-  & > :last-child {
-    margin-right: 0;
-  }
-}
-
-@mixin truncate-text() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@function get-value($map, $keys...) {
-  $current: $map;
-
-  @each $key in $keys {
-    @if meta.type-of($current) != 'map' {
-      @return null;
-    }
-
-    $current: map.get($current, $key);
-
-    @if $current == null {
-      @return null;
-    }
-  }
-
-  @return $current;
-}
-
-@mixin set-style($property, $source, $keys...) {
-  $path: list.append($keys, $property);
-  $var-name: get-value($source, $path...);
-
-  @if $var-name != null {
-    @if meta.type-of($var-name) != 'map' {
-      #{$property}: $var-name;
-    }
-  }
-}
-
-@mixin use-styles($component, $keys...) {
-  $source: map.get(theme.$tokens, $component);
-
-  @each $property, $v in css.$properties {
-    @include set-style($property, $source, $keys...);
-  }
-}
-
-@mixin use-styles-debug($component, $keys...) {
-  $source: map.get(theme.$tokens, $component);
-
-  @debug $source;
-
-  @each $property, $v in css.$properties {
-    @include set-style($property, $source, $keys...);
-  }
-}
-
-@function get-var-name($component, $keys...) {
-  $source: map.get(theme.$tokens, $component);
-  $var-name: get-value($source, $keys...);
-
-  @return $var-name;
-}
-
-@mixin use-size($component, $keys...) {
-  $name: get-var-name($component, $keys...);
-
-  @if $name != null {
-    @if meta.type-of($name) != 'map' {
-      width: $name;
-      min-width: $name;
-      height: $name;
-    }
-  }
-}

package/src/theme.scss

@@ -1,103 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'sass:list';
-
-$button-appearances: ();
-
-$tokens: ();
-
-// changes
-@function str-split($string, $delimiter) {
-  $result: ();
-  $buffer: '';
-
-  @for $i from 1 through string.length($string) {
-    $char: string.slice($string, $i, $i);
-
-    @if ($char == $delimiter) {
-      $result: list.append($result, $buffer);
-      $buffer: '';
-    } @else {
-      $buffer: $buffer + $char;
-    }
-  }
-
-  $result: list.append($result, $buffer);
-
-  @return $result;
-}
-
-@function list-slice($list, $start, $end: list.length($list)) {
-  $new: ();
-
-  @for $i from $start through $end {
-    $new: list.append($new, list.nth($list, $i));
-  }
-
-  @return $new;
-}
-
-/// Добавляет значение в многоуровневую карту
-@function map-deep-set($map, $keys, $value) {
-  $current: $map;
-  $key: list.nth($keys, 1);
-
-  @if list.length($keys) == 1 {
-    @return map.merge(
-      $current,
-      (
-        $key: $value
-      )
-    );
-  }
-
-  $nested: map.get($current, $key);
-
-  @if $nested == null {
-    $nested: ();
-  }
-
-  $nested: map-deep-set($nested, list-slice($keys, 2), $value);
-
-  @return map.merge(
-    $current,
-    (
-      $key: $nested
-    )
-  );
-}
-
-@mixin use-button-properties($vars) {
-  @each $full-name, $v in $vars {
-    // Разбиваем путь: primary-default-enabled-background → ('primary', 'default', 'enabled', 'background')
-    $parts: str-split($full-name, '_');
-    // Создаём CSS переменную:
-    $css-var: string.unquote('var(--btn_#{$full-name})');
-    // Глубоко добавляем значение в структуру
-    $button-appearances: map-deep-set($button-appearances, $parts, $css-var) !global;
-  }
-}
-
-@mixin use-tokens($components) {
-  @each $component-name, $v in $components {
-    $component-vars: map.get($components, $component-name);
-
-    @each $path, $v in $component-vars {
-      $name: #{$component-name}_#{$path};
-      // Разбиваем путь: primary_default_enabled_background → ('primary', 'default', 'enabled', 'background')
-      $keys: str-split($name, '_');
-      // Создаём CSS переменную:
-      $css-var: string.unquote('var(--#{$name})');
-      // Глубоко добавляем значение в структуру
-      $tokens: map-deep-set($tokens, $keys, $css-var) !global;
-      // set scss var
-      --#{$name}: #{map.get($component-vars, $path)};
-    }
-  }
-}
-
-@mixin use-css-vars($prefix, $map) {
-  @each $name, $value in $map {
-    --#{$prefix}_#{$name}: #{$value};
-  }
-}

package/src/types.ts

@@ -1,14 +0,0 @@
-export interface Option<T> {
-  title: string
-  value: T
-  icon?: React.ReactNode
-  label?: string
-  disabled?: boolean
-  className?: string
-}
-
-export interface DateFormat {
-  month: number
-  year: number
-  day: number
-}

package/tailwind.config.js

@@ -1,91 +0,0 @@
-export default {
-  content: ['./index.html', './playground/*.{js,jsx,ts,tsx}', './playground/**/*.{js,jsx,ts,tsx}'],
-  corePlugins: {
-    preflight: false
-  },
-  theme: {
-    borderRadius: {
-      none: '0px',
-      sm: '3px',
-      DEFAULT: '4px',
-      md: '6px',
-      lg: '8px',
-      xl: '12px',
-      full: '9999px'
-    },
-    zIndex: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40'
-    },
-    fontSize: {
-      xs: ['12px', { lineHeight: '14px' }],
-      sm: ['14px', { lineHeight: '16.5px' }],
-      base: ['16px', { lineHeight: '19px' }],
-      lg: ['18px', { lineHeight: '21.5px' }],
-      xl: ['20px', { lineHeight: '23.5px' }],
-      '2xl': ['22px', { lineHeight: '26px' }],
-      '3xl': ['24px', { lineHeight: '28px' }]
-    },
-    spacing: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      3: '3px',
-      4: '4px',
-      5: '5px',
-      6: '6px',
-      7: '7px',
-      8: '8px',
-      9: '9px',
-      10: '10px',
-      11: '11px',
-      12: '12px',
-      13: '13px',
-      14: '14px',
-      15: '15px',
-      16: '16px',
-      17: '17px',
-      18: '18px',
-      19: '19px',
-      20: '20px',
-      21: '21px',
-      22: '22px',
-      23: '23px',
-      24: '24px',
-      25: '25px',
-      26: '26px',
-      27: '27px',
-      28: '28px',
-      29: '29px',
-      30: '30px',
-      31: '31px',
-      32: '32px',
-      33: '33px',
-      34: '34px',
-      35: '35px',
-      36: '36px',
-      37: '37px',
-      38: '38px',
-      39: '39px',
-      40: '40px',
-      44: '44px',
-      48: '48px',
-      52: '52px',
-      56: '56px',
-      60: '60px',
-      64: '64px',
-      72: '72px',
-      80: '80px',
-      96: '96px'
-    }
-  },
-  plugins: []
-}

package/themes/classic/animations.scss

@@ -1,179 +0,0 @@
-@keyframes popoverScaleIn {
-  from {
-    transform: scale(0.3);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-// out
-
-@keyframes popoverScaleOut {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.3);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes checkboxIn {
-  from {
-    transform: translateY(-5px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes checkboxOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-5px);
-  }
-}
-
-@keyframes checkboxInColor {
-  from {
-    color: transparent;
-  }
-  to {
-    color: #242429;
-  }
-}
-
-@keyframes checkboxOutColor {
-  from {
-    color: #242429;
-  }
-  to {
-    color: transparent;
-  }
-}
-
-// radio-mark
-
-@keyframes markScaleIn {
-  from {
-    transform: scale(0.1);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes markScaleOut {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.1);
-  }
-}
-
-// dialog
-
-@keyframes dialogIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialogOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
-// drawer
-
-@keyframes slideFromBottom {
-  from {
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToBottom {
-  to {
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes slideFromTop {
-  from {
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToTop {
-  to {
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-@keyframes slideFromLeft {
-  from {
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToLeft {
-  to {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes slideFromRight {
-  from {
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slideToRight {
-  to {
-    transform: translate3d(100%, 0, 0);
-  }
-}