@newlogic-digital/ui 3.4.2 → 3.5.0

package/src/styles/Ui/Btn.css

@@ -1,226 +1,13 @@
-.ui-btn {
-  --ui-btn-width: auto;
-  --ui-btn-height: 2.375rem;
-  --ui-btn-py: 0.375rem;
-  --ui-btn-px: 1rem;
-  --ui-btn-size: 0.875rem;
-  --ui-btn-radius: var(--radius);
-  --ui-btn-weight: var(--font-medium);
-  --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-btn-text-opacity: var(--tw-text-opacity, 1);
-  --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
-  --ui-btn-color: rgb(var(--color-light) / var(--ui-btn-text-opacity));
-  --ui-btn-hover-opacity: 0.2;
-  --ui-btn-outline-width: 2px;
-  --ui-btn-outline-opacity: 0.5;
-  --ui-btn-icon-size: 1.125rem;
-  --ui-btn-icon-offset: calc((var(--ui-btn-py) / 1) * -1);
-
-  display: inline-flex;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-size: var(--ui-btn-size);
-  font-weight: var(--ui-btn-weight);
-  width: var(--ui-btn-width);
-  height: var(--ui-btn-height);
-  padding: var(--ui-btn-py) var(--ui-btn-px);
-  border-radius: var(--ui-btn-radius);
-  transition: var(--transition-opacity), var(--transition-background), var(--transition-color);
-  background-color: var(--ui-btn-bg);
-  color: var(--ui-btn-color);
-
-  @nest .dark &.accent-dark {
-    --ui-btn-color: rgb(var(--color-dark));
-    --color-accent: var(--color-light);
-  }
-
-  &:--theme-light {
-    --ui-btn-color: rgb(var(--color-light) / var(--tw-text-opacity, 1));
-  }
-
-  &:--theme-dark {
-    --ui-btn-color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
-  }
-
-  &::before {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background-color: var(--ui-btn-color);
-    z-index: -1;
-    opacity: 0;
-    transition: var(--transition-opacity);
-
-    @nest .no-touch :is(:hover, :focus-visible)&, :is(:--state-active)& {
-      opacity: var(--ui-btn-hover-opacity);
-    }
-  }
-
-  & > svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  & > [class^="icon"] {
-    font-size: var(--ui-btn-icon-size);
-
-    &.icon-l {
-      &:not([class*="mr-"]) {
-        margin-right: var(--ui-btn-py);
-        margin-left: var(--ui-btn-icon-offset);
-      }
-    }
-
-    &.icon-r {
-      &:not([class*="ml-"]) {
-        margin-left: var(--ui-btn-py);
-        margin-right: var(--ui-btn-icon-offset);
-      }
-
-      order: 1;
-    }
-  }
-
-  &[disabled] {
-    pointer-events: none;
-
-    &::before {
-      opacity: 0.5;
-    }
-  }
-
-  &:--type-text {
-    @nest :not(:hover, :focus-visible, :--state-active)& {
-      --ui-btn-color: currentColor;
-
-      background-color: transparent;
-    }
-  }
-
-  &:--type-outline {
-    --ui-btn-color: rgb(var(--color-current));
-    --ui-btn-hover-opacity: 0.1;
-
-    background-color: transparent;
-
-    &::before {
-      background-color: var(--ui-btn-bg);
-    }
-
-    &::after {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      content: "";
-      background-color: transparent;
-      border: var(--ui-btn-outline-width) solid var(--ui-btn-bg);
-      box-sizing: border-box;
-      opacity: var(--ui-btn-outline-opacity);
-      border-radius: var(--ui-btn-radius);
-    }
-  }
-
-  &:--type-square, &:--type-circle {
-    --ui-btn-py: var(--ui-btn-py);
-    --ui-btn-width: var(--ui-btn-height);
-  }
-
-  &:--type-circle {
-    border-radius: 50%;
-  }
-
-  &:--size-sm {
-    --ui-btn-height: 2.25rem;
-    --ui-btn-px: 1rem;
-  }
-
-  &:--size-lg {
-    --ui-btn-icon-size: 1.5rem;
-    --ui-btn-height: 3rem;
-    --ui-btn-px: 1.25rem;
-  }
-
-  &:--state-loading {
-    pointer-events: none;
-    color: transparent;
-
-    & > * {
-      opacity: 0;
-    }
-
-    &::before {
-      z-index: 1;
-      width: 1rem;
-      height: 1rem;
-      content: "";
-      background-color: transparent;
-      border: 2px solid var(--ui-btn-color);
-      border-right-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.45s infinite linear;
-      position: absolute;
-      margin-left: -0.625rem;
-      margin-top: -0.625rem;
-      left: 50%;
-      top: 50%;
-      opacity: 1 !important;
-    }
-  }
-
-  @media (--media-m) {
-    &:--type-square-m, &:--type-circle-m {
-      --ui-btn-py: var(--ui-btn-py);
-      --ui-btn-width: var(--ui-btn-height);
-
-      & > * {
-        margin: 0 !important;
-      }
-    }
-
-    &:--type-circle-m {
-      border-radius: 50%;
-    }
-  }
-}
-
-.ui-btn-group {
-  display: flex;
-
-  & .ui-btn {
-    &:not(:last-of-type) {
-      &, &::after {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    &:not(:first-of-type) {
-      &, &::after {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &::after {
-        border-left: 0;
-      }
-
-      &, &:--theme-light {
-        box-shadow: -1px 0 rgb(var(--color-light) / var(--ui-btn-hover-opacity));
-      }
-
-      &:--theme-dark {
-        box-shadow: -1px 0 rgb(var(--color-dark) / var(--ui-btn-hover-opacity));
-      }
-    }
-  }
-}
+@import "winduum/src/ui/btn/default.css";
+@import "winduum/src/ui/btn/sm.css";
+@import "winduum/src/ui/btn/lg.css";
+@import "winduum/src/ui/btn/loading.css";
+@import "winduum/src/ui/btn/wide.css";
+@import "winduum/src/ui/btn/bordered.css";
+@import "winduum/src/ui/btn/hover-fill.css";
+@import "winduum/src/ui/btn/gradient.css";
+@import "winduum/src/ui/btn/gradient-bordered.css";
+@import "winduum/src/ui/btn/muted.css";
+@import "winduum/src/ui/btn/raised.css";
+@import "winduum/src/ui/btn/square.css";
+@import "winduum/src/ui/btn/circle.css";

package/src/styles/Ui/Check.css

@@ -0,0 +1 @@
+@import "winduum/src/ui/check.css";

package/src/styles/Ui/Control.css

@@ -0,0 +1,47 @@
+@import "winduum/src/ui/control/default.css";
+@import "winduum/src/ui/control/file.css";
+@import "winduum/src/ui/control/select.css";
+@import "winduum/src/ui/control/icon.css";
+@import "winduum/src/ui/control/floating.css";
+
+.ui-control {
+  &.active label,
+  :where(input, textarea):is(:focus, [placeholder]) ~ label,
+  :where(select):is([data-placeholder]) ~ label,
+  &:has(.-active-) label {
+    transform: var(--ui-control-floating-label-focus-transform);
+    opacity: var(--ui-control-floating-label-focus-opacity);
+  }
+
+  &:has(label):not(.active) select:not([data-placeholder]) {
+    font-size: 0;
+
+    & option {
+      font-size: var(--ui-control-font-size);
+    }
+  }
+
+  :where(.color) {
+    width: var(--ui-control-icon-font-size);
+    height: var(--ui-control-icon-font-size);
+    border-radius: 50%;
+    overflow: hidden;
+    display: block;
+    border: 1px solid rgb(0 0 0 / 15%);
+  }
+
+  :where([type="number"]) {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  :where(input) {
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+  }
+}

package/src/styles/Ui/ControlSelect.css

@@ -0,0 +1,66 @@
+.ui-control[data-controller~="ui-control-select"] {
+  cursor: pointer;
+
+  & select {
+    pointer-events: none;
+  }
+
+  & div[aria-hidden] {
+    will-change: transform;
+    border-radius: var(--ui-control-border-radius);
+    position: absolute;
+    background-color: rgb(var(--color-body-rgb));
+    z-index: 100;
+    left: 0;
+    right: 0;
+    top: 100%;
+    margin-top: 0.5rem;
+    border: 1px solid rgb(var(--color-current) / 7.5%);
+    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-rgb) / 5%), 0 0 1em 0 rgb(var(--color-dark-rgb) / 5%);
+    padding: 0.375rem;
+    color: rgb(var(--color-current));
+    cursor: default;
+
+    & [data-option] {
+      padding: calc(var(--ui-control-px) / 1.5) var(--ui-control-px);
+      cursor: pointer;
+      transition: var(--transition-background);
+      font-size: var(--ui-control-font-size);
+      border-radius: var(--ui-control-border-radius);
+
+      &[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      &:is(:hover, :focus) {
+        background-color: rgb(var(--color-accent-rgb) / 10%);
+      }
+    }
+  }
+
+  &:focus-within {
+    --ui-control-border-opacity: 100%;
+    --ui-control-border-color: var(--color-accent);
+
+    & select {
+      outline-color: color-mix(in srgb, var(--color-accent) var(--ui-control-outline-opacity), transparent);
+      outline-offset: var(--ui-control-outline-offset);
+    }
+  }
+
+  &:focus-within select ~ div[aria-hidden] {
+    opacity: 1;
+    transform: none;
+  }
+}

package/src/styles/Ui/Dot.css

@@ -0,0 +1,22 @@
+.ui-dot {
+  --ui-dot-sq: 0.375rem;
+  --ui-dot-bg-opacity: 0.2;
+
+  width: var(--ui-dot-sq);
+  height: var(--ui-dot-sq);
+  border-radius: var(--rounded-full);
+  background-color: rgb(var(--color-accent-rgb) / var(--ui-dot-bg-opacity));
+  transition: var(--transition-background), width var(--transition-duration), height var(--transition-duration);
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -0.25rem;
+  }
+
+  &.active {
+    --ui-dot-bg-opacity: 1;
+    --ui-dot-sq: 0.5625rem;
+  }
+}

package/src/styles/Ui/Group.css

@@ -0,0 +1 @@
+@import "winduum/src/ui/group.css";

package/src/styles/Ui/Heading.css

@@ -1,22 +1,3 @@
-.ui-heading {
-  --ui-heading-size: 1.5rem;
-  --ui-heading-weight: var(--font-bold);
-  --ui-heading-size-line: 0.5rem;
-
-  display: block;
-  font-weight: var(--ui-heading-weight);
-  font-size: var(--ui-heading-size);
-  line-height: calc(var(--ui-heading-size) + var(--ui-heading-size-line));
-
-  &:--size-lg {
-    --ui-heading-size: 1.75rem;
-
-    @media (--media-t) {
-      --ui-heading-size: 2rem;
-    }
-  }
-
-  &:--size-sm {
-    --ui-heading-size: 1.25rem;
-  }
-}
+@import "winduum/src/ui/heading/default.css";
+@import "winduum/src/ui/heading/sm.css";
+@import "winduum/src/ui/heading/lg.css";

package/src/styles/Ui/Image.css

@@ -1,17 +1 @@
-.ui-image {
-  position: relative;
-  display: block;
-
-  &:not(.bg-transparent) {
-    background-color: rgb(var(--color-background-100));
-  }
-
-  & > * {
-    width: 100%;
-    height: 100%;
-  }
-
-  @nest picture& > img {
-    object-fit: cover;
-  }
-}
+@import "winduum/src/ui/image.css";

package/src/styles/Ui/Info.css

@@ -0,0 +1 @@
+@import "winduum/src/ui/info.css";

package/src/styles/Ui/Label.css

@@ -1,14 +1 @@
-.ui-label {
-  --ui-label-size: 0.875rem;
-  --ui-label-size-line: 0.5rem;
-  --ui-label-spacing: 0.05rem;
-
-  display: block;
-  font-size: var(--ui-label-size);
-  line-height: calc(var(--ui-label-size-line) + var(--ui-label-size-line));
-  font-weight: var(--font-medium);
-
-  & ~ :is([class^="ui-"]:not(&), [class^="c-"]) {
-    margin-top: 0.5rem;
-  }
-}
+@import "winduum/src/ui/label.css";

package/src/styles/Ui/Link.css

@@ -1,41 +1,2 @@
-.ui-link {
-  --ui-link-size: 0.875rem;
-  --ui-link-weight: var(--font-normal);
-  --ui-link-hover-opacity: 0.8;
-  --ui-link-hover-color: rgb(var(--color-accent));
-  --ui-link-underline-opacity: 0.5;
-
-  display: inline-flex;
-  align-self: flex-start;
-  cursor: pointer;
-  font-size: var(--ui-link-size);
-  font-weight: var(--ui-link-weight);
-  transition: var(--transition-opacity), var(--transition-color);
-  position: relative;
-  white-space: nowrap;
-  line-height: 1.5;
-
-  &:--size-sm {
-    --ui-link-size: 0.75rem;
-  }
-
-  @nest &:focus-visible, .no-touch &:is([href], button):hover {
-    opacity: var(--ui-link-hover-opacity);
-    color: var(--ui-link-hover-color);
-  }
-
-  &[data-type~="underline"]::after {
-    content: "";
-    border-bottom: 1px solid currentColor;
-    opacity: 0;
-    position: absolute;
-    inset: auto 0 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transform: translateY(-0.25rem);
-
-    @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):is(:hover, :focus-visible)& {
-      transform: none;
-      opacity: var(--ui-link-underline-opacity);
-    }
-  }
-}
+@import "winduum/src/ui/link/default.css";
+@import "winduum/src/ui/link/underlined.css";

package/src/styles/Ui/Notice.css

@@ -1,47 +1 @@
-.ui-notice {
-  --color-current: var(--color-accent);
-  --ui-notice-bg: rgb(var(--color-accent));
-  --ui-notice-outline-opacity: 0.1;
-  --ui-notice-size: 0.875rem;
-  --ui-notice-py: 1.25rem;
-  --ui-notice-px: 1.5rem;
-
-  position: relative;
-  z-index: 1;
-  padding: var(--ui-notice-py) var(--ui-notice-px);
-  font-size: var(--ui-notice-size);
-  border-radius: var(--radius);
-  color: rgb(var(--color-current));
-
-  &:not([class*="bg-"]) {
-    &::before, &::after {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: var(--radius);
-      z-index: -1;
-      content: "";
-    }
-
-    &::before {
-      background-color: var(--ui-notice-bg);
-      opacity: var(--ui-notice-outline-opacity);
-    }
-
-    &::after {
-      box-shadow: inset 0 0 0 1px var(--ui-notice-bg);
-      opacity: var(--ui-notice-outline-opacity);
-    }
-  }
-
-  & a {
-    text-decoration: underline;
-    transition: var(--transition-opacity);
-    color: currentColor !important;
-
-    @nest .no-touch &[href]:is(:hover, :focus-visible) {
-      opacity: 0.8;
-    }
-  }
-}
+@import "winduum/src/ui/notice.css";

package/src/styles/Ui/Progress.css

@@ -1,56 +1 @@
-.ui-progress {
-  --ui-progress-height: 1rem;
-  --ui-progress-radius: 9999px;
-  --ui-progress-bg: var(--color-background-200);
-  --ui-progress-bg-opacity: 1;
-
-  appearance: none;
-  box-shadow: none;
-  border: 0;
-  height: var(--ui-progress-height);
-  border-radius: var(--ui-progress-radius);
-  background-color: rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));
-  color: rgb(var(--color-accent));
-  width: 100%;
-
-  @nest .bg-dark & {
-    &, &::-webkit-progress-bar {
-      background-color: rgb(var(--color-light) / 0.1);
-    }
-  }
-
-  &:--size-sm {
-    --ui-progress-height: 0.5rem;
-  }
-
-  &:--size-lg {
-    --ui-progress-height: 1.5rem;
-  }
-
-  &::-webkit-progress-bar {
-    background-color: transparent;
-  }
-
-  &::-webkit-progress-value {
-    background-color: currentColor;
-    border-radius: var(--ui-progress-radius);
-  }
-
-  &::-moz-progress-bar {
-    background-color: currentColor;
-    border-radius: var(--ui-progress-radius);
-  }
-
-  &:indeterminate {
-    animation: 1.5s linear 0s forwards infinite move-indeterminate;
-    background-image: linear-gradient(to right, currentColor 30%, rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);
-    background-position: top left;
-    background-repeat: no-repeat;
-    background-size: 150% 150%;
-    border-radius: var(--ui-progress-radius);
-
-    &::-moz-progress-bar {
-      background-color: transparent;
-    }
-  }
-}
+@import "winduum/src/ui/progress.css";

package/src/styles/Ui/Switch.css

@@ -1,70 +1 @@
-.ui-switch {
-  --ui-switch-width: 3rem;
-  --ui-switch-height: 1.5rem;
-  --ui-switch-padding: 0.375rem;
-  --ui-swtich-bg: var(--color-dark);
-  --ui-swtich-bg-opacity: 0.2;
-  --ui-swtich-fg: var(--color-accent);
-  --ui-switch-radius: 999px;
-
-  @nest .dark & {
-    --ui-swtich-bg: var(--color-background-300);
-  }
-
-  display: inline-flex;
-  color: rgb(var(--ui-swtich-fg));
-  position: relative;
-
-  &:--size-sm {
-    --ui-switch-width: 2.5rem;
-    --ui-switch-height: 1.25rem;
-  }
-
-  &:--size-lg {
-    --ui-switch-width: 4rem;
-    --ui-switch-height: 2rem;
-  }
-
-  & input {
-    width: var(--ui-switch-width);
-    height: var(--ui-switch-height);
-    display: block;
-    position: relative;
-    border-radius: var(--ui-switch-radius);
-    background-color: rgb(var(--ui-swtich-bg));
-    transition: var(--transition-background);
-    cursor: pointer;
-    appearance: none;
-    outline: none;
-    color: inherit;
-
-    &[disabled] {
-      opacity: 0.8;
-      pointer-events: none;
-    }
-
-    &::before {
-      width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      background-color: rgb(var(--color-light));
-      border-radius: var(--ui-switch-radius);
-      position: absolute;
-      left: var(--ui-switch-height);
-      top: 50%;
-      content: "";
-      display: block;
-      margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
-      transition: left var(--transition), var(--transition-background);
-      transform: translateY(-50%);
-    }
-
-    &:checked {
-      background-color: currentColor;
-
-      &::before {
-        background-color: rgb(var(--color-light));
-        left: 100%;
-      }
-    }
-  }
-}
+@import "winduum/src/ui/switch.css";