@companix/uikit 0.0.3 → 0.0.4

package/dist/Button/Button.scss

@@ -0,0 +1,128 @@
+@use '../mixins.scss';
+
+// scheme: bth-[appearance]-[mode]-[property]--[state]
+//
+// appearance:  primary, neutral, positive, negative
+// mode: default, outline, minimal
+// state: enabled, hovered, pressed, disabled, loading
+// property: text, background, shadow, border
+
+@mixin use-mode($appearance, $mode) {
+  @include mixins.use-styles(button, $appearance, $mode, enabled);
+
+  &:hover {
+    @include mixins.use-styles(button, $appearance, $mode, hovered);
+  }
+
+  &[data-active],
+  &:active {
+    @include mixins.use-styles(button, $appearance, $mode, pressed);
+  }
+
+  &[data-loading] {
+    @include mixins.use-styles(button, $appearance, $mode, loading);
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    @include mixins.use-styles(button, $appearance, $mode, disabled);
+  }
+}
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    &[data-mode='default'] {
+      @include use-mode($appearance, default);
+    }
+
+    &[data-mode='outline'] {
+      @include use-mode($appearance, outline);
+    }
+
+    &[data-mode='minimal'] {
+      @include use-mode($appearance, minimal);
+    }
+  }
+}
+
+.button {
+  overflow: visible;
+  box-sizing: border-box;
+  -moz-user-focus: ignore;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(button);
+  @include mixins.items-spacing(8px);
+
+  // fill
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  // align
+
+  &[data-align='center'] {
+    justify-content: center;
+
+    & > .button-text {
+      text-align: center;
+    }
+  }
+
+  &[data-align='left'] {
+    justify-content: left;
+
+    & > .button-text {
+      flex: 1 1 auto;
+      text-align: left;
+    }
+  }
+
+  &[data-align='right'] {
+    justify-content: right;
+
+    & > .button-text {
+      flex: 1 1 auto;
+      text-align: right;
+    }
+  }
+
+  // sizes
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(button, size, sm);
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(button, size, md);
+  }
+
+  &[data-size='lg'] {
+    @include mixins.use-styles(button, size, lg);
+  }
+
+  // text
+
+  &-text {
+    @include mixins.truncate-text();
+  }
+
+  // appearance
+
+  @include use-appearance(primary);
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+}

package/dist/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,18 @@
+.button-group {
+  display: flex;
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  & > .button:not(:first-child) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  & > .button:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: -1px;
+  }
+}

package/dist/Checkbox/Checkbox.scss

@@ -0,0 +1,115 @@
+@use '../mixins.scss';
+
+.checkbox {
+  display: inline-table;
+  user-select: none;
+  touch-action: manipulation;
+  max-width: max-content;
+
+  @include mixins.use-styles(checkbox);
+
+  &:not([data-disabled]):not([data-required]):hover {
+    .checkbox-box[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, box, hover);
+    }
+  }
+
+  &:not([data-disabled]):not([data-required]):active {
+    .checkbox-box[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, box, active);
+    }
+  }
+
+  &:not([data-disabled]) {
+    .checkbox-box[data-state='checked'] {
+      @include mixins.use-styles(checkbox, box, checked);
+    }
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(checkbox, disabled);
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(checkbox, required);
+
+    .checkbox-box::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+
+      @include mixins.use-styles(checkbox, required, box);
+
+      border-radius: mixins.get-var-name(checkbox, box, border-radius);
+    }
+  }
+
+  &[data-size='sm'] {
+    @include mixins.use-styles(checkbox, size, sm);
+
+    .checkbox-box {
+      @include mixins.use-size(checkbox, size, sm, box);
+    }
+  }
+
+  &[data-size='md'] {
+    @include mixins.use-styles(checkbox, size, md);
+
+    .checkbox-box {
+      @include mixins.use-size(checkbox, size, md, box);
+    }
+  }
+
+  &-box {
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.1s linear;
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+
+    @include mixins.use-styles(checkbox, box);
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    &:after {
+      visibility: hidden;
+      content: '\00A0';
+    }
+  }
+
+  &-label {
+    cursor: pointer;
+    display: table-cell;
+    word-break: break-word;
+
+    &[data-disabled] {
+      cursor: default;
+    }
+
+    @include mixins.use-styles(checkbox, label);
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+
+    &[data-state='checked'] {
+      @include mixins.use-styles(checkbox, icon, in);
+    }
+
+    &[data-state='unchecked'] {
+      @include mixins.use-styles(checkbox, icon, out);
+    }
+  }
+}

package/dist/DateInput/DateInput.scss

@@ -0,0 +1,11 @@
+.data-input {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+
+  .form {
+    input {
+      width: 100%;
+    }
+  }
+}

package/dist/DatePicker/Calendar.scss

@@ -0,0 +1,125 @@
+@use '../mixins.scss';
+
+.calendar {
+  @include mixins.use-styles(calendar);
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(calendar, header);
+  }
+
+  &-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    outline: none;
+    cursor: pointer;
+
+    @include mixins.use-styles(calendar, navigation);
+    @include mixins.use-size(calendar, navigation, size);
+
+    &[data-side='left'] {
+      left: 0;
+    }
+
+    &[data-side='right'] {
+      right: 0;
+    }
+
+    &:hover {
+      @include mixins.use-styles(calendar, navigation, hover);
+    }
+
+    &:active {
+      @include mixins.use-styles(calendar, navigation, active);
+    }
+
+    svg {
+      @include mixins.use-size(calendar, navigation, icon, size);
+    }
+  }
+
+  &-pickers {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &-names {
+    display: flex;
+  }
+
+  &-name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include mixins.use-styles(calendar, name);
+  }
+
+  &-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    @include mixins.use-styles(calendar, day);
+
+    &:not([data-disabled]) {
+      cursor: pointer;
+
+      &:hover {
+        @include mixins.use-styles(calendar, day, hover);
+      }
+
+      &[data-active] {
+        @include mixins.use-styles(calendar, day, active);
+      }
+
+      &[data-selected] {
+        @include mixins.use-styles(calendar, day, selected);
+
+        .calendar-day-number::after {
+          background-color: #ffffff;
+        }
+      }
+
+      &[data-void] {
+        background-color: unset;
+        cursor: default;
+      }
+    }
+
+    &[data-disabled] {
+      @include mixins.use-styles(calendar, day, disabled);
+    }
+
+    &[data-today] {
+      .calendar-day-number {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          height: 2px;
+          border-radius: 10px;
+          content: '';
+          display: block;
+          width: 100%;
+          bottom: 0px;
+          right: 0;
+          background-color: #529ef4;
+        }
+      }
+    }
+  }
+}

package/dist/Dialog/Dialog.scss

@@ -0,0 +1,25 @@
+@use '../mixins.scss';
+
+.dialog {
+  &-container {
+    @include mixins.use-styles(dialog, container);
+  }
+
+  &-overlay {
+    @include mixins.use-styles(dialog, overlay);
+  }
+
+  @include mixins.use-styles(dialog);
+}
+
+.dialog-container {
+  @each $size, $v in (xxs, xs, s, m, l, xl, xxl, full) {
+    &[data-size='#{$size}'] {
+      @include mixins.use-styles(dialog, size, $size, container);
+
+      .dialog {
+        @include mixins.use-styles(dialog, size, $size);
+      }
+    }
+  }
+}

package/dist/Dialog/Popup.scss

@@ -0,0 +1,55 @@
+@use '../mixins.scss';
+
+.popup {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  z-index: 1000;
+  outline: none;
+  pointer-events: auto;
+  position: relative;
+  width: 100%;
+
+  @include mixins.use-styles(popup);
+
+  &-overlay {
+    inset: 0;
+    overflow: auto;
+    position: fixed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    z-index: 9999;
+
+    @include mixins.use-styles(popup, overlay);
+
+    &[data-state='open'] {
+      @include mixins.use-styles(popup, overlay, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(popup, overlay, out);
+    }
+  }
+
+  &-container {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none !important;
+    outline: none;
+
+    &[data-state='open'] {
+      @include mixins.use-styles(popup, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(popup, out);
+    }
+  }
+}

package/dist/DialogAlert/Alert.scss

@@ -0,0 +1,52 @@
+@use '../mixins.scss';
+
+.alert {
+  max-height: max-content;
+
+  @include mixins.use-styles(alert);
+
+  &-container {
+    @include mixins.use-styles(alert, container);
+  }
+
+  &-overlay {
+    @include mixins.use-styles(alert, overlay);
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: row;
+
+    @include mixins.use-styles(alert, body);
+  }
+
+  &-title {
+    @include mixins.use-styles(alert, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(alert, description);
+  }
+
+  &-icon {
+    @include mixins.use-styles(alert, icon);
+
+    svg {
+      @include mixins.use-size(alert, icon, size);
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    @include mixins.use-styles(alert, content);
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: end;
+
+    @include mixins.use-styles(alert, footer);
+  }
+}

package/dist/Drawer/Drawer.scss

@@ -0,0 +1,112 @@
+@use '../mixins.scss';
+
+.drawer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  z-index: 1000;
+  outline: none;
+  pointer-events: auto;
+  position: fixed;
+  z-index: 9999;
+
+  @include mixins.use-styles(drawer);
+
+  &-overlay {
+    inset: 0;
+    overflow: auto;
+    position: fixed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    z-index: 9999;
+
+    @include mixins.use-styles(drawer, overlay);
+
+    &[data-state='open'] {
+      @include mixins.use-styles(drawer, overlay, in);
+    }
+
+    &[data-state='closed'] {
+      @include mixins.use-styles(drawer, overlay, out);
+    }
+  }
+
+  // animations
+
+  &[data-state='open'] {
+    &[data-direction='left'] {
+      @include mixins.use-styles(drawer, in, left);
+    }
+
+    &[data-direction='right'] {
+      @include mixins.use-styles(drawer, in, right);
+    }
+
+    &[data-direction='top'] {
+      @include mixins.use-styles(drawer, in, top);
+    }
+
+    &[data-direction='bottom'] {
+      @include mixins.use-styles(drawer, in, bottom);
+    }
+  }
+
+  &[data-state='closed'] {
+    &[data-direction='left'] {
+      @include mixins.use-styles(drawer, out, left);
+    }
+
+    &[data-direction='right'] {
+      @include mixins.use-styles(drawer, out, right);
+    }
+
+    &[data-direction='top'] {
+      @include mixins.use-styles(drawer, out, top);
+    }
+
+    &[data-direction='bottom'] {
+      @include mixins.use-styles(drawer, out, bottom);
+    }
+  }
+
+  // placement
+
+  &[data-direction='left'] {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--drawer-size, 50%);
+    border-top-right-radius: var(--drawer_radius, 0);
+    border-bottom-right-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='right'] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--drawer-size, 50%);
+    border-top-left-radius: var(--drawer_radius, 0);
+    border-bottom-left-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='bottom'] {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--drawer-size, 50%);
+    border-top-right-radius: var(--drawer_radius, 0);
+    border-top-left-radius: var(--drawer_radius, 0);
+  }
+
+  &[data-direction='top'] {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: var(--drawer-size, 50%);
+    border-bottom-right-radius: var(--drawer_radius, 0);
+    border-bottom-left-radius: var(--drawer_radius, 0);
+  }
+}

package/dist/Form/Form.scss

@@ -0,0 +1,70 @@
+@use '../mixins.scss';
+
+@mixin use-size($size) {
+  &[data-size='#{$size}'] {
+    .form-input {
+      @include mixins.use-styles(form, size, $size);
+    }
+  }
+}
+
+.form {
+  position: relative;
+
+  @include mixins.use-styles(form);
+
+  @include use-size(sm);
+  @include use-size(md);
+  @include use-size(lg);
+
+  &-space-margin {
+    margin: 0px var(--form_space, 0);
+  }
+
+  &:hover {
+    @include mixins.use-styles(form, hover);
+  }
+
+  &:active {
+    @include mixins.use-styles(form, active);
+  }
+
+  &[data-fill] {
+    width: 100%;
+
+    .form-input {
+      width: 100%;
+    }
+  }
+
+  &[data-required] {
+    @include mixins.use-styles(form, required);
+  }
+
+  &[data-disabled] {
+    @include mixins.use-styles(form, disabled);
+
+    .form-input {
+      cursor: inherit;
+    }
+  }
+
+  &:focus-within {
+    @include mixins.use-styles(form, focus);
+  }
+}
+
+.form-input {
+  outline: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &::placeholder {
+    user-select: none;
+
+    @include mixins.use-styles(form, placeholder);
+  }
+}