@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/styles/Ui/Input.css

@@ -1,467 +0,0 @@
-:is(.ui-input, .ui-select) {
-  --ui-input-height: 3rem;
-  --ui-input-height-textarea: 8rem;
-  --ui-input-py: 0.75rem;
-  --ui-input-px: 1rem;
-  --ui-input-size: 0.875rem;
-  --ui-input-icon-size: 1.25rem;
-  --ui-input-icon-spacing: 0.5rem;
-  --ui-input-weight: var(--font-medium);
-  --ui-input-border-color: var(--color-current);
-  --ui-input-border-opacity: 0.15;
-  --ui-input-radius: var(--radius);
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--ui-input-size);
-
-  @media (--media-d) {
-    --ui-input-height-textarea: 12rem;
-  }
-
-  &:--size-lg {
-    --ui-input-height: 3rem;
-  }
-
-  & svg {
-    width: 1em;
-    height: 1em;
-    display: block;
-  }
-
-  & > label {
-    display: block;
-    position: absolute;
-    z-index: 1;
-    pointer-events: none;
-    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color);
-    transform-origin: 0 50%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    transform: perspective(100px);
-    will-change: transform;
-    font-weight: var(--ui-input-weight);
-    left: var(--ui-input-px);
-    right: var(--ui-input-px);
-    top: calc(var(--ui-input-height) / 2);
-    line-height: var(--ui-input-size);
-    margin-top: calc(var(--ui-input-size) / 2 * -1);
-    order: -1;
-
-    @nest :has(.icon-l)& {
-      left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
-    }
-
-    @nest :has(.icon-r)& {
-      right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
-    }
-  }
-
-  & > :where(input, textarea, select, .input) {
-    width: 100%;
-    transition: var(--transition-border), var(--transition-shadow);
-    box-shadow: none;
-    line-height: normal;
-    background-color: transparent;
-    font-size: inherit;
-    height: var(--ui-input-height);
-    font-weight: var(--ui-input-weight);
-    border-radius: var(--ui-input-radius);
-    padding: var(--ui-input-py) var(--ui-input-px);
-    color: inherit;
-    border: 1px solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
-
-    @nest :has(label)& {
-      padding-top: calc(var(--ui-input-py) * 1.75);
-      padding-bottom: calc(var(--ui-input-py) * 0.5);
-    }
-
-    &[disabled] {
-      cursor: default;
-      background-color: rgb(var(--color-background-100));
-    }
-
-    &[required] {
-      & ~ label {
-        &::after {
-          color: rgb(var(--color-error));
-          content: " *";
-        }
-      }
-    }
-
-    &:focus {
-      --ui-input-border-opacity: 1;
-      --ui-input-border-color: var(--color-accent);
-
-      box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 3px rgb(var(--color-accent) / 0.15),
-        0 1px 2px 0 rgb(var(--color-current) / 0.05);
-
-      @nest .dark & {
-        box-shadow:
-          0 0 0 0 rgb(var(--color-current)),
-          0 0 0 3px rgb(var(--color-accent) / 0.3),
-          0 1px 2px 0 rgb(var(--color-current) / 0.05);
-      }
-    }
-
-    @nest :--state-invalid& {
-      border-color: rgb(var(--color-error));
-      box-shadow: none;
-
-      &:focus {
-        box-shadow:
-          0 0 0 0 rgb(var(--color-current)),
-          0 0 0 3px rgb(var(--color-error) / 0.1),
-          0 1px 2px 0 rgb(var(--color-current) / 0.05);
-
-        @nest .dark & {
-          box-shadow:
-            0 0 0 0 rgb(var(--color-current)),
-            0 0 0 3px rgb(var(--color-error) / 0.2),
-            0 1px 2px 0 rgb(var(--color-current) / 0.05);
-        }
-      }
-    }
-
-    @nest :has(.icon-l)& {
-      padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
-    }
-
-    @nest :has(.icon-r)&, :--state-invalid& {
-      padding-right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
-    }
-  }
-
-  & > input {
-    &::-ms-clear {
-      display: none;
-    }
-
-    &[type="number"] {
-      -moz-appearance: textfield;
-
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-      }
-
-      & ~ .icon {
-        position: absolute;
-        right: calc(var(--ui-input-height) / 4 - 0.25rem);
-        color: rgb(var(--color-primary));
-        cursor: pointer;
-        user-select: none;
-        font-size: 1.25rem;
-        top: auto;
-        margin-top: auto;
-        width: 1em;
-        height: 1em;
-        background-color: rgb(var(--color-accent));
-
-        &.icon-angle-up {
-          top: calc((var(--ui-input-height) / 2) - 1.25rem + 0.1875rem);
-          mask: var(--icon-angle-up);
-        }
-
-        &.icon-angle-down {
-          top: calc((var(--ui-input-height) / 2) - 0.1875rem);
-          mask: var(--icon-angle-down);
-        }
-      }
-
-      & ~ .icon-r {
-        margin-right: calc(var(--ui-input-height) / 4 + var(--ui-input-icon-spacing));
-      }
-    }
-
-    &[type^="date"] {
-      appearance: none;
-
-      &::-webkit-date-and-time-value {
-        text-align: left;
-      }
-
-      @nest :not(:--state-active)&, html:not(.mobile) & {
-        font-size: 0;
-      }
-
-      @nest html.mobile:not(.safari) & {
-        padding-left: calc(var(--ui-input-px) - 0.3125rem);
-      }
-    }
-
-    &[type="time"] {
-      &::-webkit-calendar-picker-indicator {
-        display: none;
-      }
-
-      @nest :not(:--state-active)& {
-        &:not([placeholder], :focus) {
-          font-size: 0;
-        }
-      }
-
-      @nest html.mobile:not(.safari) & {
-        padding-left: calc(var(--ui-input-px) - 0.3125rem);
-        appearance: none;
-      }
-    }
-  }
-
-  & > textarea {
-    resize: vertical;
-    overflow: hidden;
-    min-height: var(--ui-input-height-textarea);
-  }
-
-  & > :where(input, textarea) {
-    background-clip: padding-box;
-    cursor: text;
-
-    &:invalid {
-      box-shadow: none;
-    }
-
-    @nest &:focus, :--state-active&, :has([placeholder] ~ label)& {
-      & ~ label {
-        transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
-      }
-    }
-  }
-
-  & > .input {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-
-    & span {
-      color: transparent;
-    }
-  }
-
-  & > [class^="icon-"] {
-    font-weight: var(--font-medium);
-    position: absolute;
-    z-index: 10;
-    transition: var(--transition-opacity);
-    content: "";
-    top: calc(var(--ui-input-height) / 2);
-    margin-top: calc(var(--ui-input-icon-size) / -2);
-    font-size: var(--ui-input-icon-size);
-    width: 1em;
-    height: 1em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.icon-r {
-      right: calc(var(--ui-input-px));
-
-      & + .icon-r {
-        right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
-      }
-    }
-
-    &.icon-l {
-      left: calc(var(--ui-input-px));
-
-      & + .icon-l {
-        left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
-      }
-    }
-
-    &[aria-label]:not([class*="lib-hint"]) {
-      &::after {
-        content: attr(aria-label);
-        font-size: var(--ui-input-size);
-        display: block;
-        margin-top: -1px;
-      }
-    }
-
-    &[class*="lib-hint"] {
-      &::after {
-        white-space: normal;
-        line-height: 1.5;
-        word-wrap: normal;
-        width: 10rem;
-        font-weight: var(--font-normal);
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  &:--type-color {
-    & .color {
-      width: var(--ui-input-icon-size);
-      height: var(--ui-input-icon-size);
-      border-radius: 50%;
-      left: calc(var(--ui-input-px) / 1.25);
-      overflow: hidden;
-      position: absolute;
-      display: block;
-      top: calc(var(--ui-input-height) / 2);
-      margin-top: calc(var(--ui-input-icon-size) / -2);
-      border: 1px solid rgb(0 0 0 / 0.15);
-    }
-
-    & input {
-      padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
-    }
-  }
-
-  &:--type-file {
-    color: rgb(var(--color-current));
-    font-weight: var(--font-normal);
-    border-radius: var(--ui-input-radius);
-    transition: var(--transition-border);
-    position: relative;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    line-height: normal;
-    height: var(--ui-input-height);
-    background-color: rgb(var(--color-background));
-    border: 1px solid rgb(var(--color-current) / 0.15);
-
-    &:--state-invalid {
-      border-color: rgb(var(--color-error));
-    }
-
-    & [type="file"] {
-      cursor: pointer;
-      opacity: 0;
-      font-size: 0;
-      display: block;
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 10;
-
-      & + .icon {
-        font-size: var(--ui-input-size);
-        display: flex;
-        align-items: center;
-        padding: 0.5625rem 1.25rem 0.5625rem 2.75rem;
-        color: rgb(var(--color-current) / 0.75);
-        white-space: nowrap;
-        background-color: rgb(var(--color-current) / 0.05);
-        border-top-left-radius: var(--ui-input-radius);
-        border-bottom-left-radius: var(--ui-input-radius);
-
-        @media (--media-t) {
-          padding-top: 0.875rem;
-          padding-bottom: 0.875rem;
-          line-height: 1rem;
-        }
-
-        &::before {
-          position: absolute;
-          left: 1rem;
-          top: 50%;
-          font-size: 1.125rem;
-          margin-top: -0.5625rem;
-          content: "";
-          width: 1em;
-          height: 1em;
-          mask: var(--icon-upload);
-          background-color: currentColor;
-        }
-      }
-
-      & ~ span:not([class^="icon"]) {
-        font-size: var(--ui-input-size);
-        padding: 0.5625rem 1rem;
-        align-self: center;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        @media (--media-touch) {
-          padding-top: 0.875rem;
-          padding-bottom: 0.875rem;
-        }
-
-        &[data-placeholder]::before {
-          content: attr(data-placeholder);
-          color: rgb(var(--color-current) / 0.6);
-        }
-      }
-    }
-
-    &:focus-within {
-      border-color: rgb(var(--color-current) / 0.25);
-    }
-  }
-}
-
-:is(.ui-input, .ui-select, .ui-input-group) {
-  --ui-input-validity-size: 0.875rem;
-  --ui-input-validity-offset: 0.375rem;
-
-  & em {
-    display: block;
-    font-size: var(--ui-input-validity-size);
-    color: rgb(var(--color-error));
-    font-style: normal;
-    margin-top: var(--ui-input-validity-offset);
-  }
-}
-
-.ui-input-group {
-  display: flex;
-
-  & .ui-btn {
-    height: auto;
-
-    & + .ui-input {
-      z-index: 1;
-    }
-  }
-
-  & > * {
-    & + :is(.ui-input, .ui-select) {
-      margin-left: -1px;
-
-      & :is(input, select):not(:focus) {
-        border-left-color: transparent;
-      }
-    }
-
-    &:not(:first-child) {
-      &, & :is(input, select) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:not(:last-child) {
-      &, & :is(input, select) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-}
-
-.pcr-app {
-  border-radius: var(--radius);
-  overflow: hidden;
-
-  @nest .dark & {
-    background: rgb(var(--color-background-200));
-
-    & .pcr-interaction input {
-      background: rgb(var(--color-background-100));
-      box-shadow: none !important;
-    }
-  }
-}

package/src/styles/Ui/Radio.css

@@ -1,4 +0,0 @@
-.ui-radio {
-  --ui-checkbox-icon: var(--icon-radio);
-  --ui-checkbox-radius: 50%;
-}

package/src/styles/Ui/Select.css

@@ -1,137 +0,0 @@
-.ui-select {
-  &:--state-active {
-    & label {
-      transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
-    }
-  }
-
-  &::after {
-    width: 1em;
-    height: 1em;
-    background-color: currentColor;
-    content: "";
-    position: absolute;
-    z-index: 1;
-    font-size: 1.5rem;
-    right: calc(var(--ui-input-height) / 4);
-    top: calc(var(--ui-input-height) / 2);
-    margin-top: -0.75rem;
-    will-change: transform;
-    transition: transform 200ms;
-    mask: var(--icon-angle-down);
-    pointer-events: none;
-
-    @nest :--state-focus& {
-      @nest .no-touch:not(.macintel) & {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  & select {
-    position: relative;
-    z-index: 1;
-    text-overflow: ellipsis;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    cursor: pointer;
-    user-select: none;
-
-    @nest [tabindex]& {
-      pointer-events: none;
-    }
-
-    @nest [tabindex]:--state-focus& {
-      --ui-input-border-opacity: 1;
-      --ui-input-border-color: var(--color-accent);
-
-      box-shadow:
-        0 0 0 0 rgb(var(--color-current)),
-        0 0 0 3px rgb(var(--color-accent) / 0.15),
-        0 1px 2px 0 rgb(var(--color-current) / 0.05);
-
-      @nest .dark & {
-        box-shadow:
-          0 0 0 0 rgb(var(--color-current)),
-          0 0 0 3px rgb(var(--color-accent) / 0.3),
-          0 1px 2px 0 rgb(var(--color-current) / 0.05);
-      }
-    }
-
-    @nest :not(:--state-active)& {
-      &:not([data-placeholder]) {
-        font-size: 0;
-      }
-    }
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:-moz-focusring {
-      color: inherit;
-      text-shadow: 0 0 0 #000;
-    }
-  }
-
-  & option {
-    font-size: var(--ui-input-size);
-    color: rgb(var(--color-default));
-    background-color: rgb(var(--color-background));
-
-    &[disabled] {
-      opacity: 0.5;
-    }
-  }
-
-  & > [class^="icon-"] {
-    &.icon-r {
-      right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
-    }
-  }
-
-  & > div[aria-hidden] {
-    --color-current: var(--color-default);
-
-    will-change: transform;
-    border-radius: var(--ui-input-radius);
-    position: absolute;
-    background-color: rgb(var(--color-background));
-    z-index: 100;
-    left: 0;
-    right: 0;
-    top: 100%;
-    margin-top: 0.5rem;
-    border: 1px solid rgb(var(--color-current) / 0.075);
-    transform: scaleY(0);
-    opacity: 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-    transition-duration: 200ms;
-    backface-visibility: hidden;
-    transform-origin: center top;
-    user-select: none;
-    max-height: 12rem;
-    overflow-y: auto;
-    box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark) / 0.05), 0 0 1em 0 rgb(var(--color-dark) / 0.05);
-    padding: 0.375rem;
-    color: rgb(var(--color-current));
-
-    @nest [data-state*="focus"]& {
-      opacity: 1;
-      transform: none;
-    }
-
-    & [data-option] {
-      padding: calc(var(--ui-input-px) / 1.5) var(--ui-input-px);
-      cursor: pointer;
-      transition: var(--transition-background);
-      font-size: var(--ui-input-size);
-      border-radius: var(--radius);
-
-      @nest .no-touch &:is(:hover, :focus-visible) {
-        background-color: rgb(var(--color-accent) / 0.1);
-      }
-    }
-  }
-}