linear-react-components-ui 1.1.24-beta.4 → 1.1.25-rc.1

package/lib/assets/styles/selectfield.scss

@@ -1,409 +0,0 @@
-@import "commons.scss";
-@import "colors.scss";
-@import "effects.scss";
-@import "fonts.scss";
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.select-field-root {
-  display: flex;
-  flex-direction: column;
-  text-align: start;
-  .root-label {
-    display: inline-flex;
-    padding: 0;
-    margin-bottom: 3px;
-    gap: 5px;
-    align-items: center;
-    flex-direction: row;
-    justify-content: flex-start;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      .label {
-        color: transparent;
-      }
-    }
-    .label {
-      @extend %input-label;
-      font-size: 0.875rem;
-      line-height: normal;
-      color: $font-color-default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &[data-state-input-required=true]::after {
-        content: "*";
-        color: $font-color-default;
-      }
-      &[data-state-uppercase=true] {
-        text-transform: uppercase;
-      }
-      &[data-state-required-label=true] {
-        color: $error-color;
-        font-weight: 600;
-        font-size: 0.875rem;
-        margin-left: 1px;
-      }
-      &[aria-disabled=true], &[aria-readonly=true] {
-        pointer-events: none;
-      }
-    }
-    >button {
-      width: 20px;
-      height: auto;
-      margin: 0px !important;
-    }
-  }
-  .container {
-    position: relative;
-    width: 100%;
-    min-height: 32px;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    gap: 0;
-    justify-content: space-between;
-    border-radius: 2px;
-    border: 1px solid $component-border-color;
-    background-color: $component-bg-default;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-      border: 1px solid transparent;
-      background-color: transparent;
-    }
-    &:has(input[data-state-undigitable=true], input[data-state-multiple-with-checkboxes=true]) {
-      caret-color: transparent;
-      background-color: #f9fcf7;
-      background: -moz-linear-gradient(top, #f6f6f6 0%, #fafafa 100%);
-      background: -webkit-linear-gradient(top, #f6f6f6 0%,#fafafa 100%);
-      background: linear-gradient(to bottom, #f6f6f6 0%,#fafafa 100%);
-    }
-    &:has(input[data-state-read-only=true]) {
-      cursor: default;
-      pointer-events: none;
-      background: $input-read-only-bg-color;
-    }
-    &:has(input[data-state-error=true]):has(input[data-state-skeletonize=false]) {
-      border-color: $input-error-border-color;
-      background: $input-error-bg-color;
-    }
-    &:has(input:focus) {
-      box-shadow: 0 3px 0 $component-selected-color;
-      transition: box-shadow 250ms cubic-bezier(.19, .62, .58, .98) 100ms;
-    }
-    &:has(input:disabled) {
-      input {
-        color: $font-color-disabled;
-      }
-      transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-      background-color: $input-disabled-bg-color;
-      cursor: not-allowed;
-    }
-    .input-root {
-      flex: 1;
-      display: flex;
-      flex-direction: column-reverse;
-      justify-content: start;
-      gap: 1px;
-      .input {
-        @extend %input-placeholder;
-        @extend %component-fonts;
-        flex-grow: 1;
-        padding: 6px;
-        font-size: 0.875rem;
-        text-indent: 0.375rem;
-        line-height: 0.875rem;
-        border: none;
-        background-color: transparent;
-        &[data-state-text-align=left] {
-          text-align: left;
-        }
-        &[data-state-text-align=right] {
-          text-align: right;
-        }
-        &[data-state-text-align=center] {
-          text-align: center;
-        }
-        &[data-state-skeletonize=true] {
-          @extend %input-placeholder-transparent;
-        }
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-      .selections {
-        visibility: hidden;
-        display: none;
-        &[data-state-multiple-selections=true] {
-          visibility: initial;
-          display: flex;
-          flex-direction: row;
-          justify-content: start;
-          flex-wrap: wrap;
-          gap: 5px;
-          text-indent: 0.375rem;
-          padding: 4px 6px;
-          .selected {
-            height: 18px;
-            padding: 0px 5px;
-            background-color: $selectfield-bg-selected;
-            border: 1px solid $selectfield-border-color;
-            border-radius: 3px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 5px;
-            .label {
-              pointer-events: none;
-              user-select: text;
-              color: $primary-actived-color;
-              font-size: 0.75rem;
-              line-height: 14px;
-            }
-            .remove {
-              all: unset;
-              cursor: pointer;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              svg {
-                width: 12px;
-                height: 12px;
-                pointer-events: none;
-                fill: $primary-actived-color;
-              }
-              &:disabled {
-                cursor: not-allowed;
-                svg {
-                  fill: $font-color-disabled;
-                }
-              }
-              &[data-state-read-only=true] {
-                svg {
-                  visibility: hidden;
-                  display: none;
-                }
-              }
-            }
-            &[data-state-disabled=true] {
-              @extend %component-disabled;
-              opacity: 0.7;
-              border: solid 1px $font-color-disabled;
-              .label {
-                color: $font-color-disabled;
-              }
-            }
-            &[data-state-read-only=true] {
-              background-color: $input-read-only-bg-color;
-              border-color: $component-border-color;
-              .label {
-                color: $placeholder-color;
-              }
-            }
-          }
-        }
-      }
-    }
-    .triggers {
-      display: inline-flex;
-      padding: 0;
-      margin: 0;
-      align-items: center;
-      flex-direction: row;
-      justify-content: flex-end;
-      &[data-state-skeletonize=true] {
-        @extend %skeleton-component;
-        display: none;
-        visibility: hidden;
-      }
-      button {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 100%;
-        padding: 0;
-        margin: 0px 4px;
-        outline: none;
-        border: none;
-        vertical-align: bottom;
-        color: inherit;
-        background-color: inherit;
-        cursor: pointer;
-        &.open-listbox[aria-expanded="true"] svg {
-          transform: rotate(180deg) translate(0, 0px);
-          transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        }
-        &.open-listbox[aria-expanded="false"] svg {
-          transform: rotate(0deg) translate(0, 0px);
-          transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        }
-        &.open-listbox {
-          svg {
-            pointer-events: none;
-            width: 80%;
-            height: 80%;
-          }
-        }
-        &.clear[data-state-visible=true] {
-          display: inherit;
-          visibility: initial;
-          svg {
-            pointer-events: none;
-            width: 70%;
-            height: 70%;
-          }
-        }
-        &.clear[data-state-visible=false] {
-          display: none;
-          visibility: hidden;
-        }
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-      &[data-state-read-only=true], 
-      &[data-state-disabled=true] {
-        button {
-          opacity: 0.5;
-        }
-      }
-      &[data-state-read-only=true] {
-        display: none;
-        visibility: hidden;
-      }
-    }
-  }
-  .hint {
-    span {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-  .error {
-    width: 100%;
-    color: $error-color;
-    margin-top: 5px;
-    font-size: 0.8125rem;
-    line-height: 0.8125rem;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-    }
-  }
-}
-
-.select-field-listbox[aria-expanded=true] {
-  z-index: auto;
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  max-height: calc(34px * 15);
-  margin: 5px 0px;
-  border: 1px solid $component-border-color;
-  animation: 0.3s ease-in 0s 1 slideDown, revealelement 0.3s forwards ease-in-out;
-  box-shadow: -6px 6px 50px -12px rgba(51, 51, 51, 0.4);
-}
-
-.select-field-listbox {
-  display: none;
-  ul[role="listbox"] {
-    @extend %component-fonts;
-    display: block;
-    width: 100%;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    font-size: 87.5%;
-    list-style: none;
-    background-color: $component-bg-default;
-    overflow: scroll;
-    overflow-x: hidden;
-  }
-  ul[role="listbox"] li[role="option"] {
-    margin: 0;
-    padding: 6px 10px;
-    display: flex;
-    cursor: pointer;
-    justify-content: stretch;
-    color: $font-color-soft;
-    svg {
-      pointer-events: none;
-    }
-    &:hover,
-    &[data-state-in-focus="true"],
-    &[data-state-in-focus="true"]:hover {
-      background-color: $component-bg-selected-color !important;
-    }
-    &:hover {
-      transition: background-color 0.1s;
-    }
-    &:not(:last-child) {
-      border-bottom: 1px solid $component-border-color;
-    }
-    &.not-found-values {
-      text-indent: 10px;
-      font-size: 85%;
-      color: $font-color-soft;
-      font-style: italic;
-      user-select: none;
-      cursor: not-allowed;
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-    &[data-state-striped="true"]:nth-child(even) {
-      background-color: $list-striped-bg;
-    }
-    &[data-state-multiple-with-checkboxes=true] {
-      align-items: center;
-      justify-content: start;
-      gap: 6px;
-      > div {
-        margin: 0px;
-        div {
-          margin: 0px;
-          width: fit-content;
-          height: fit-content;
-        }
-      }
-    }
-  }
-  li[role="option"][data-state-multiple-with-default=true][aria-selected="true"]  {
-    color: rgba(0, 0, 0, 0.35);
-    cursor: not-allowed;
-  }
-  [role="listbox"] [role="option"][aria-selected="true"],
-  [role="listbox"] [role="option"][aria-selected="true"]:hover {
-    background-color: $default-hover-color !important;
-  }
-  [role="listbox"] [role="option"][data-state-filtered="false"] {
-    display: none;
-    visibility: hidden;
-  }
-  .select-field-search {
-    width: 100%;
-    display: inline-flex;
-    padding: 5px;
-    list-style: none;
-    background-color: $component-bg-default;
-    border-bottom: 1px solid $component-border-color;
-    div.grid-container {
-      width: 100%;
-      margin: 0;
-    }
-    .select-field-search-input {
-      width: 100%;
-    }
-  }
-}

package/lib/assets/styles/slot.scss

@@ -1,34 +0,0 @@
-@import "colors.scss";
-@import "colors.scss";
-@import "effects.scss";
-@import "fonts.scss";
-
-.field-slot {
-  overflow: hidden;
-
-  >* {
-    height: 100%;
-  }
-
-  &[data-state-position=left] {
-    margin-right: 0px;
-    border-top-left-radius: 1px;
-    border-bottom-left-radius: 1px;
-
-    :last-child {
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
-
-  &[data-state-position=right] {
-    margin-left: 0px;
-    border-top-right-radius: 1px;
-    border-bottom-right-radius: 1px;
-
-    :first-child {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-    }
-  }
-}

package/lib/assets/styles/textfield.scss

@@ -1,147 +0,0 @@
-@import "colors.scss";
-@import "effects.scss";
-@import "commons.scss";
-@import "fonts.scss";
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  appearance: textfield;
-}
-
-.text-field-root {
-  display: flex;
-  flex-direction: column;
-  text-align: start;
-  .root-label {
-    display: inline-flex;
-    padding: 0;
-    margin-bottom: 3px;
-    gap: 5px;
-    align-items: center;
-    flex-direction: row;
-    justify-content: flex-start;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      .label {
-        color: transparent;
-      }
-    }
-    .label {
-      font-size: 0.875rem;
-      line-height: normal;
-      color: $font-color-default;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &[data-state-input-required=true]::after {
-        content: "*";
-        color: $font-color-default;
-      }
-      &[data-state-uppercase=true] {
-        text-transform: uppercase;
-      }
-      &[data-state-required-label=true] {
-        color: $error-color;
-        font-weight: 600;
-        font-size: 0.875rem;
-        margin-left: 1px;
-      }
-      &[data-state-read-only=true], &[data-state-disabled=true] {
-        pointer-events: none;
-      }
-    }
-    >button {
-      width: 20px;
-      height: auto;
-      margin: 0px !important;
-    }
-  }
-  .container {
-    width: 100%;
-    height: 32px;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    gap: 0;
-    justify-content: space-between;
-    border-radius: 2px;
-    border: 1px solid $component-border-color;
-    background-color: $component-bg-default;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-      border: 1px solid transparent;
-      background-color: transparent;
-    }
-    &:has(input[data-state-error=true]):has(input[data-state-skeletonize=false]) {
-      border-color: $input-error-border-color;
-      background-color: $input-error-bg-color;
-    }
-    &:has(input[data-state-read-only=true]) {
-      cursor: default;
-      pointer-events: none;
-      background-color: $input-read-only-bg-color;
-    }
-    &:has(input:focus) {
-      box-shadow: 0 3px 0 $component-selected-color;
-      transition: box-shadow 250ms cubic-bezier(.19, .62, .58, .98) 100ms;
-    }
-    &:has(input:disabled) {
-      color: $font-color-disabled;
-      transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-      background-color: $input-disabled-bg-color;
-    }
-    .input {
-      @extend %input-placeholder;
-      @extend %component-fonts;
-      flex-grow: 1;
-      padding: 6px;
-      font-size: 0.875rem;
-      text-indent: 0.375rem;
-      line-height: 0.875rem;
-      border: none;
-      background-color: transparent;
-      &[data-state-text-align=left] {
-        text-align: left;
-      }
-      &[data-state-text-align=right] {
-        text-align: right;
-      }
-      &[data-state-text-align=center] {
-        text-align: center;
-      }
-      &[data-state-skeletonize=true] {
-        @extend %input-placeholder-transparent;
-      }
-      &:disabled {
-        cursor: not-allowed;
-      }
-    }
-  }
-  .hint {
-    span {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-  .error {
-    width: 100%;
-    color: $error-color;
-    margin-top: 5px;
-    font-size: 0.8125rem;
-    line-height: 0.8125rem;
-    &[data-state-skeletonize=true] {
-      @extend %skeleton-component;
-      color: transparent;
-    }
-  }
-}

package/lib/calendar/base/Day.d.ts

@@ -1,8 +0,0 @@
-import { IDayProps } from '../types.js';
-import 'react';
-import 'moment';
-import '../../@types/ColorStyles.js';
-
-declare const Day: ({ currentDate, day }: IDayProps) => JSX.Element;
-
-export { Day as default };

package/lib/calendar/base/Day.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _uuid = require("uuid");
-var _helpers = require("./helpers");
-var _buttons = _interopRequireDefault(require("../../buttons"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Day = _ref => {
-  let {
-    currentDate,
-    day
-  } = _ref;
-  const {
-    handleDateChange
-  } = (0, _react.useContext)(_helpers.CalendarContext);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers.getDayContainerCssClass)(currentDate, day)
-  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    id: (0, _uuid.v1)(),
-    type: "button",
-    tabIndex: (0, _helpers.dateIsEquals)(currentDate, day) ? 0 : -1,
-    boxShadow: false,
-    label: day.format('D'),
-    onClick: () => {
-      if (handleDateChange) handleDateChange(day);
-    },
-    customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, day)} numberdaycalendar`
-  }));
-};
-var _default = exports.default = Day;

package/lib/calendar/base/Month.d.ts

@@ -1,8 +0,0 @@
-import { IMonthProps } from '../types.js';
-import 'react';
-import 'moment';
-import '../../@types/ColorStyles.js';
-
-declare const Month: ({ monthRef, currentDate }: IMonthProps) => JSX.Element;
-
-export { Month as default };

package/lib/calendar/base/Month.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Week = _interopRequireDefault(require("./Week"));
-var _helpers = require("./helpers");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Month = _ref => {
-  let {
-    monthRef,
-    currentDate
-  } = _ref;
-  const renderWeeks = () => {
-    const date = currentDate.clone();
-    let weeks = [];
-    let weekIndex = 0;
-    let startOfWeek = (0, _helpers.getStartOfWeek)((0, _helpers.getStartOfMonth)(date));
-    while (weekIndex < 6) {
-      const week = /*#__PURE__*/_react.default.createElement(_Week.default, {
-        currentDate: currentDate,
-        weekStartDate: startOfWeek,
-        key: `week-${startOfWeek.format('YYYYMMDD')}`
-      });
-      weeks = [...weeks, week];
-      weekIndex += 1;
-      startOfWeek = startOfWeek.clone().add(1, 'weeks');
-      startOfWeek = (0, _helpers.getStartOfWeek)(startOfWeek);
-    }
-    return weeks;
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: monthRef,
-    className: "calendarmonth"
-  }, renderWeeks());
-};
-var _default = exports.default = Month;

package/lib/calendar/base/Week.d.ts

@@ -1,8 +0,0 @@
-import { IWeekProps } from '../types.js';
-import 'react';
-import 'moment';
-import '../../@types/ColorStyles.js';
-
-declare const Week: ({ weekStartDate, currentDate }: IWeekProps) => JSX.Element;
-
-export { Week as default };