@companix/uikit 0.0.3 → 0.0.4

package/dist/Form/Input.scss

@@ -0,0 +1,24 @@
+.form-input-base {
+  padding: 0px var(--form_space, 0);
+  border-radius: var(--form_border-radius);
+
+  &-left-element {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+
+  &-right-element {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/Icon/icon.scss

@@ -0,0 +1,18 @@
+@use '../mixins.scss';
+
+$icon-sizes: xxxs, xxs, xs, s, m, l, xl, xxl, xxxl;
+
+@each $size in $icon-sizes {
+  .icon-size-#{$size} {
+    @include mixins.use-size(icon, size, $size);
+  }
+}
+
+:where(svg:not([fill])) {
+  fill: currentcolor;
+}
+
+.icon {
+  // display: inline-block;
+  flex-shrink: 0;
+}

package/dist/OptionItem/Option.scss

@@ -0,0 +1,89 @@
+@use '../mixins.scss';
+
+.option-list {
+  display: flex;
+  flex-direction: column;
+
+  @include mixins.use-styles(option, list);
+}
+
+.option {
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(option);
+
+  &-icon {
+    @include mixins.use-styles(option, icon);
+
+    svg {
+      @include mixins.use-size(option, icon, size);
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+
+    &-inner {
+      @include mixins.use-styles(option, content, layout);
+    }
+  }
+
+  &-title {
+    word-break: break-word;
+  }
+
+  &-label {
+    @include mixins.use-styles(option, label);
+  }
+
+  &-check {
+    @include mixins.use-styles(option, check);
+
+    svg {
+      @include mixins.use-size(option, check, size);
+    }
+  }
+
+  & > * {
+    margin-right: 8px;
+  }
+
+  & > :last-child {
+    margin-right: 0;
+  }
+
+  &:not([data-disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      @include mixins.use-styles(option, hover);
+    }
+
+    &:active {
+      @include mixins.use-styles(option, active);
+    }
+  }
+
+  &[data-selected] {
+    @include mixins.use-styles(option, selected);
+  }
+
+  &[data-disabled] {
+    user-select: none;
+
+    @include mixins.use-styles(option, disabled);
+  }
+
+  &[data-minimal] {
+    @include mixins.use-styles(option, minimal);
+
+    &[data-selected] {
+      @include mixins.use-styles(option, minimal, selected);
+    }
+  }
+}

package/dist/Popover/Popover.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.popover {
+  outline: none;
+  @include mixins.use-styles(popover);
+
+  &[data-match-target='width'] {
+    width: var(--radix-popover-trigger-width);
+  }
+
+  &[data-match-target='min-width'] {
+    min-width: var(--radix-popover-trigger-width);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &[data-fit-max-height] {
+      max-height: var(--radix-popover-content-available-height);
+    }
+
+    @include mixins.use-styles(popover, content);
+  }
+
+  &-arrow {
+    position: relative;
+
+    &-icon {
+      position: relative;
+    }
+
+    &-border {
+      fill: #111418;
+      fill-opacity: 0.1;
+    }
+
+    &-fill {
+      fill: mixins.get-var-name(popover, content, background);
+    }
+
+    &:before {
+      border-radius: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      transform: rotate(45deg);
+      height: 20px;
+      margin: 5px;
+      width: 20px;
+      box-shadow: 1px 1px 6px rgba(17, 20, 24, 0.2);
+      margin-top: -14px;
+    }
+  }
+
+  &[data-appearance='default'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, default, out);
+    }
+  }
+
+  &[data-appearance='minimal'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(popover, minimal, out);
+    }
+  }
+}

package/dist/Radio/Radio.scss

@@ -0,0 +1,148 @@
+@use '../mixins.scss';
+
+.radio {
+  display: inline-table;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  @include mixins.use-styles(radio);
+
+  &:not([data-required]):not([data-disabled]):hover {
+    .radio-box[data-state='unchecked'] {
+      @include mixins.use-styles(radio, box, hover);
+    }
+  }
+
+  &:not([data-required]):not([data-disabled]):active {
+    .radio-box[data-state='unchecked'] {
+      @include mixins.use-styles(radio, box, active);
+    }
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(radio, disabled);
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(radio, required);
+
+    .radio-box {
+      &::before {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+
+        @include mixins.use-styles(radio, required, box);
+        border-radius: mixins.get-var-name(radio, box, border-radius);
+      }
+    }
+  }
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(radio, size, sm);
+
+    .radio-box {
+      @include mixins.use-size(radio, size, sm, box);
+    }
+
+    .radio-mark {
+      @include mixins.use-size(radio, size, sm, mark);
+    }
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(radio, size, md);
+
+    .radio-box {
+      @include mixins.use-size(radio, size, md, box);
+    }
+
+    .radio-mark {
+      @include mixins.use-size(radio, size, md, mark);
+    }
+  }
+
+  &-box {
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.1s linear;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(radio, box);
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(radio, box, checked);
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    @include mixins.use-styles(radio, mark);
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(radio, mark, in);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(radio, mark, out);
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    @include mixins.use-styles(radio, label);
+  }
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  @include mixins.use-styles(radio, group);
+}
+
+// .radio-icon {
+//   width: 16px;
+//   height: 16px;
+//   background-color: transparent;
+//   border: 1px solid #ffffff75;
+//   border-radius: 100px;
+
+//   &[data-checked] {
+//     background-color: #fff;
+//   }
+// }
+
+// .radio {
+//   display: flex;
+//   align-items: center;
+//   outline: none;
+//   cursor: pointer;
+//   gap: 6px;
+// }

package/dist/Scrollable/Scrollable.scss

@@ -0,0 +1,50 @@
+.scrollable::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  border: var(--thumb-padding) solid transparent;
+  border-radius: 999px;
+  background-color: var(--thumb-color);
+}
+
+.scrollable::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.scrollable-hover-interaction::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction::-webkit-scrollbar-track {
+  visibility: hidden;
+}
+.scrollable-hover-interaction:hover::-webkit-scrollbar-thumb,
+.scrollable-hover-interaction:hover::-webkit-scrollbar-track {
+  visibility: visible;
+}
+
+.scrollable-border-position::-webkit-scrollbar-thumb {
+  border-radius: 0px;
+
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+
+  border-left-width: calc(var(--thumb-padding) * 2);
+  border-top-width: calc(var(--thumb-padding) * 2);
+}
+
+.hidden-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-thumb {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-track {
+  display: none;
+}
+
+.hidden-scroll::-webkit-scrollbar-corner {
+  display: none;
+}

package/dist/Select/Select.scss

@@ -0,0 +1,80 @@
+@use '../mixins.scss';
+
+.select {
+  cursor: pointer;
+  max-width: 100%;
+
+  &-layout {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: inherit;
+  }
+
+  &-placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+
+  &-content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+
+    &:first-child {
+      padding-left: var(--form_space, 0);
+    }
+
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &-element {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &-close-button {
+    pointer-events: auto;
+    cursor: pointer;
+    padding: 0px var(--form_space, 0);
+    height: 100%;
+    outline: none;
+    color: var(--select_clean_color);
+
+    &:hover {
+      color: var(--select_clean_hover_color);
+    }
+  }
+
+  &-expand {
+    margin-right: var(--form_space, 0);
+
+    &:first-child {
+      margin-left: var(--form_space, 0);
+    }
+  }
+}
+
+// expand icon
+
+.expand-icon {
+  color: var(--select_expand_color);
+  transition: transform 0.2s;
+}
+
+.form {
+  &[data-state='open'] {
+    .expand-icon {
+      transform: rotate(180deg);
+    }
+  }
+}

package/dist/SelectTags/SelectTags.scss

@@ -0,0 +1,66 @@
+@use '../mixins.scss';
+
+.select-tags {
+  display: flex;
+  flex-direction: column;
+
+  .form-input {
+    padding-left: var(--form_space, 0);
+  }
+
+  &-empty {
+    @include mixins.use-styles(tag, empty);
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    cursor: text;
+
+    .expand-icon {
+      margin: 0px var(--form_space, 0);
+    }
+  }
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+
+  @include mixins.use-styles(tag);
+
+  &-name {
+    @include mixins.use-styles(tag, name);
+  }
+
+  &-close-button {
+    cursor: pointer;
+    @include mixins.use-styles(tag, close);
+
+    &:hover {
+      @include mixins.use-styles(tag, close, hover);
+    }
+  }
+
+  &-close-icon {
+    @include mixins.use-size(tag, close, size);
+  }
+
+  &-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+    flex-wrap: wrap;
+    min-width: 0;
+    position: relative;
+
+    @include mixins.use-styles(tag, container);
+
+    &:not([data-readonly]) {
+      padding-bottom: 0;
+    }
+  }
+}

package/dist/Spinner/Spinner.scss

@@ -0,0 +1,14 @@
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-border {
+  display: inline-block;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: 0.75s linear infinite spinner-border;
+}

package/dist/Stepper/StepperInput.scss

@@ -0,0 +1,35 @@
+.number-input-container {
+  display: flex;
+  gap: 4px;
+}
+
+.number-stepper {
+  display: flex;
+  flex-direction: column;
+  height: 30px;
+  min-height: 30px;
+  line-height: 30px;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 47%);
+  border-radius: 4px;
+
+  &-splitter {
+    height: 1px;
+    background-color: var(--border-color);
+  }
+
+  &-slot {
+    border-radius: 0px;
+    height: 13.5px;
+
+    &[data-slot='decrement'] {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    &[data-slot='increment'] {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+  }
+}

package/dist/Switch/Switch.scss

@@ -0,0 +1,102 @@
+@use '../mixins.scss';
+
+.switch {
+  display: inline-table;
+  user-select: none;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  &[data-disabled] {
+    @include mixins.use-styles(switch, disabled);
+  }
+
+  &-track {
+    cursor: pointer;
+    outline: none;
+    position: relative;
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, track, disabled);
+    }
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(switch, track, checked);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(switch, track, unchecked);
+    }
+
+    @include mixins.use-styles(switch, track);
+  }
+
+  &-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    @include mixins.use-styles(switch, thumb);
+    @include mixins.use-size(switch, thumb, size);
+
+    border-radius: 9999px;
+
+    &[data-state='unchecked'] {
+      transform: translate(
+        var(--switch_track_outline_width),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, unchecked);
+      }
+    }
+
+    &[data-state='checked'] {
+      transform: translate(
+        calc(var(--switch_track_width) - var(--switch_thumb_size) - var(--switch_track_outline_width)),
+        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
+      );
+
+      .switch-thumb-icon {
+        @include mixins.use-styles(switch, icon, checked);
+      }
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      inset: 0;
+
+      @include mixins.use-styles(switch, icon);
+
+      &[data-visible] {
+        @include mixins.use-styles(switch, icon, visible);
+      }
+
+      svg {
+        @include mixins.use-size(switch, icon, size);
+      }
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+      @include mixins.use-styles(switch, label, disabled);
+    }
+
+    @include mixins.use-styles(switch, label);
+  }
+}