winduum 0.1.0

package/src/styles/Ui/Btn.css

@@ -0,0 +1,238 @@
+@layer utilities {
+  :where(.ui-btn) {
+    --color-current: var(--color-light);
+    --ui-btn-width: max-content;
+    --ui-btn-height: 2.25rem;
+    --ui-btn-py: 0.375rem;
+    --ui-btn-px: 0.75rem;
+    --ui-btn-border-radius: var(--rounded);
+    --ui-btn-font-size: 0.875rem;
+    --ui-btn-font-weight: var(--font-medium);
+    --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
+    --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
+    --ui-btn-color: rgb(var(--color-current) / var(--ui-btn-color-opacity));
+    --ui-btn-color-opacity: var(--tw-text-opacity, 1);
+    --ui-btn-hover-filter: invert(1);
+    --ui-btn-hover-opacity: 0.2;
+    --ui-btn-focus-opacity: 0.3;
+    --ui-btn-disabled-opacity: 0.7;
+    --ui-btn-outline-width: 2px;
+    --ui-btn-outline-opacity: 0.5;
+    --ui-btn-icon-font-size: 1.25rem;
+    --ui-btn-gap: 0.375rem;
+    --ui-btn-loading-width: 1rem;
+    --ui-btn-loading-border-width: 2px;
+
+    width: var(--ui-btn-width);
+    height: var(--ui-btn-height);
+    padding: var(--ui-btn-py) var(--ui-btn-px);
+    border-radius: var(--ui-btn-border-radius);
+    font-size: var(--ui-btn-font-size);
+    font-weight: var(--ui-btn-font-weight);
+    background-color: var(--ui-btn-bg);
+    color: var(--ui-btn-color);
+    user-select: none;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 0;
+    transition: var(--transition-opacity), var(--transition-background), var(--transition-color);
+    gap: var(--ui-btn-gap);
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-color: rgb(var(--color-current));
+      filter: var(--ui-btn-hover-filter);
+      z-index: -1;
+      opacity: 0;
+      transition: var(--transition-opacity);
+    }
+
+    & :where(svg) {
+      width: 1em;
+      height: 1em;
+      font-size: var(--ui-btn-icon-font-size);
+    }
+
+    &:where(.is-sm) {
+      --ui-btn-height: 2rem;
+      --ui-btn-px: 1rem;
+    }
+
+    &:where(.is-lg) {
+      --ui-btn-height: 3rem;
+      --ui-btn-px: 1.75rem;
+    }
+
+    &:where(.is-wide) {
+      padding-left: calc(var(--ui-btn-px) * 2);
+      padding-right: calc(var(--ui-btn-px) * 2);
+    }
+
+    &:where(.is-outline, .is-muted, .is-text) {
+      --color-current: var(--color-accent);
+      --ui-btn-hover-opacity: 0.1;
+      --ui-btn-hover-filter: none;
+
+      background-color: transparent;
+
+      &::before {
+        background-color: var(--ui-btn-bg);
+      }
+    }
+
+    &:where(.is-outline) {
+      --ui-btn-focus-opacity: 0.15;
+
+      outline: var(--ui-btn-outline-width) solid rgb(var(--color-accent) / var(--ui-btn-outline-opacity));
+      outline-offset: calc(var(--ui-btn-outline-width) * -1);
+    }
+
+    &:where(.is-outline-gradient) {
+      --ui-btn-focus-opacity: 0.15;
+      --color-accent: var(--color-default);
+      --color-current: var(--color-accent);
+
+      &.is-loading.is-hover-fill {
+        --color-current: var(--color-light);
+      }
+
+      &:not(.is-loading) {
+        &::after {
+          content: "";
+          position: absolute;
+          background-color: rgb(var(--color-background));
+          inset: var(--ui-btn-outline-width);
+          border-radius: calc(var(--ui-btn-border-radius) / 1.25);
+          z-index: -1;
+          transition: var(--transition-opacity);
+        }
+      }
+    }
+
+    &:where(.is-muted) {
+      --ui-btn-hover-opacity: 0.3;
+
+      &::before {
+        opacity: 0.1;
+      }
+    }
+
+    &:where(.is-raised) {
+      --ui-btn-outline-opacity: 0.1;
+
+      outline: var(--ui-btn-outline-width) solid rgb(var(--color-current) / var(--ui-btn-outline-opacity));
+      outline-offset: calc(var(--ui-btn-outline-width) * -1);
+    }
+
+    &:where(.is-hover-fill) {
+      --ui-btn-hover-opacity: 1;
+    }
+
+    &:where(.is-square, .is-circle) {
+      --ui-btn-py: var(--ui-btn-py);
+      --ui-btn-width: var(--ui-btn-height);
+    }
+
+    &:where(.is-circle) {
+      --ui-btn-border-radius: var(--rounded-full);
+    }
+
+    &:where(.is-loading) {
+      pointer-events: none;
+      color: transparent;
+
+      & > * {
+        opacity: 0;
+      }
+
+      &::after {
+        z-index: 1;
+        width: var(--ui-btn-loading-width);
+        height: var(--ui-btn-loading-width);
+        content: "";
+        border: var(--ui-btn-loading-border-width) solid rgb(var(--color-current));
+        border-right-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.45s infinite linear;
+        position: absolute;
+        margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
+        margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
+        left: 50%;
+        top: 50%;
+      }
+    }
+
+    &:not(:disabled):hover {
+      @media (hover: hover) and (pointer: fine) {
+        &::before {
+          opacity: var(--ui-btn-hover-opacity);
+        }
+
+        &.is-hover-fill {
+          --color-current: var(--color-light);
+        }
+
+        &.is-outline-gradient {
+          &::before, &::after {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    &:is(:not(:disabled):active, .is-active) {
+      &::before {
+        opacity: var(--ui-btn-hover-opacity);
+      }
+
+      &.is-hover-fill {
+        --color-current: var(--color-light);
+      }
+
+      &.is-outline-gradient {
+        &::before, &::after {
+          opacity: 0;
+        }
+      }
+    }
+
+    &:focus-visible {
+      z-index: 2;
+      box-shadow:
+        0 0 0 0 rgb(var(--color-current)),
+        0 0 0 max(2px, var(--ui-btn-outline-width)) rgb(var(--color-accent) / var(--ui-btn-focus-opacity));
+    }
+
+    &:disabled {
+      opacity: var(--ui-btn-disabled-opacity);
+      cursor: not-allowed;
+    }
+  }
+
+  :where(.ui-btn-group) {
+    display: flex;
+
+    & :where(.ui-btn) {
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: calc(var(--ui-btn-outline-width) * -1);
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}

package/src/styles/Ui/Checkbox.css

@@ -0,0 +1,117 @@
+@layer utilities {
+  :where(.ui-checkbox, .ui-radio) {
+    --ui-checkbox-width: 1.375rem;
+    --ui-checkbox-font-size: 0.875rem;
+    --ui-checkbox-gap: 0.625rem;
+    --ui-checkbox-bg-raw: var(--color-background);
+    --ui-checkbox-bg-opacity: 0.1;
+    --ui-checkbox-border-color-raw: var(--color-current);
+    --ui-checkbox-border-color-opacity: 0.2;
+    --ui-checkbox-checked-bg-raw: var(--color-accent);
+    --ui-checkbox-radius: 0.5rem;
+    --ui-checkbox-icon: var(--icon-check);
+    --ui-checkbox-icon-font-size: 1.125rem;
+    --ui-checkbox-validity-font-size: 0.875rem;
+    --ui-checkbox-validity-offset: 0.375rem;
+    --ui-checkbox-box-shadow: none;
+
+    display: flex;
+    align-items: center;
+    gap: 0 var(--ui-checkbox-gap);
+    flex-wrap: wrap;
+    width: max-content;
+    font-size: var(--ui-checkbox-font-size);
+
+    & :where(label[for], input) {
+      cursor: pointer;
+    }
+
+    & em {
+      display: none;
+      width: 100%;
+      font-size: var(--ui-checkbox-validity-font-size);
+      color: rgb(var(--color-error));
+      font-style: normal;
+      margin-top: var(--ui-checkbox-validity-offset);
+    }
+
+    & a {
+      color: rgb(var(--color-accent));
+      text-decoration: underline;
+    }
+
+    & input {
+      --color-current: var(--color-light);
+
+      display: flex;
+      width: var(--ui-checkbox-width);
+      height: var(--ui-checkbox-width);
+      background-color: rgb(var(--ui-checkbox-bg-raw) / var(--tw-bg-opacity, var(--ui-checkbox-bg-opacity)));
+      border: 1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--tw-border-opacity, var(--ui-checkbox-border-color-opacity)));
+      border-radius: var(--ui-checkbox-radius);
+      user-select: none;
+      outline: none;
+      justify-content: center;
+      align-items: center;
+      transition: var(--transition-border), var(--transition-background), var(--transition-shadow);
+      box-shadow: var(--ui-checkbox-box-shadow);
+      font-size: var(--ui-checkbox-icon-font-size);
+
+      &::before {
+        line-height: var(--ui-checkbox-icon-font-size);
+        text-indent: 0;
+        display: block;
+        transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
+        color: rgb(var(--color-current));
+        content: "";
+        background-color: currentColor;
+        mask: var(--ui-checkbox-icon);
+        opacity: 0;
+        transform: scale(0);
+        will-change: transform;
+        width: 1em;
+        height: 1em;
+      }
+
+      &:is(:hover, :focus-visible) {
+        --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
+        --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
+        --tw-border-opacity: 0.75;
+        --tw-bg-opacity: 0.1;
+      }
+
+      &:required {
+        & + * {
+          &::after {
+            color: rgb(var(--color-error));
+            content: " *";
+          }
+        }
+      }
+
+      @nest .is-validated &:invalid {
+        & ~ em {
+          display: block;
+        }
+      }
+
+      &:checked {
+        --tw-border-opacity: 0;
+
+        background-color: rgb(var(--ui-checkbox-checked-bg-raw));
+
+        &:focus {
+          --ui-checkbox-box-shadow:
+            0 0 0 0 rgb(var(--color-current)),
+            0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.2),
+            0 1px 2px 0 rgb(var(--color-current) / 0.05);
+        }
+
+        &::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+  }
+}

package/src/styles/Ui/Heading.css

@@ -0,0 +1,23 @@
+@layer utilities {
+  :where(.ui-heading) {
+    --ui-heading-font-family: var(--font-primary);
+    --ui-heading-font-weight: var(--font-semibold);
+    --ui-heading-font-size: 1.25rem;
+    --ui-heading-line-height: calc(var(--ui-heading-font-size) + var(--ui-heading-line-height-ratio));
+    --ui-heading-line-height-ratio: 0.375rem;
+
+    font-family: var(--ui-heading-font-family);
+    font-size: var(--ui-heading-font-size);
+    line-height: var(--ui-heading-line-height);
+    font-weight: var(--ui-heading-font-weight);
+
+    &:where(.is-sm) {
+      --ui-heading-font-size: 1.125rem;
+      --ui-heading-line-height-ratio: 0.125rem;
+    }
+
+    &:where(.is-lg) {
+      --ui-heading-font-size: 1.875rem;
+    }
+  }
+}

package/src/styles/Ui/Image.css

@@ -0,0 +1,17 @@
+@layer utilities {
+  :where(.ui-image) {
+    --ui-image-bg: rgb(var(--color-background-200));
+    --ui-image-border-radius: 0;
+
+    position: relative;
+    display: block;
+    background-color: var(--ui-image-bg);
+    border-radius: var(--ui-image-border-radius);
+
+    & > * {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+  }
+}

package/src/styles/Ui/Input.css

@@ -0,0 +1,271 @@
+@layer utilities {
+  :where(.ui-input, .ui-input-group, .ui-input-mask, .ui-select) {
+    --ui-input-height: 3rem;
+    --ui-input-height-textarea: 8rem;
+    --ui-input-pt-floating: 1.25rem;
+    --ui-input-pb-floating: 0.4375rem;
+    --ui-input-py: 0.875rem;
+    --ui-input-px: 1rem;
+    --ui-input-pl: var(--ui-input-px);
+    --ui-input-pr: var(--ui-input-px);
+    --ui-input-bg: rgb(var(--color-background));
+    --ui-input-color: currentColor;
+    --ui-input-placeholder-color: currentColor;
+    --ui-input-placeholder-opacity: 0.5;
+    --ui-input-font-size: 0.875rem;
+    --ui-input-font-weight: var(--font-medium);
+    --ui-input-border-width: 1px;
+    --ui-input-border-color: var(--color-current);
+    --ui-input-border-opacity: 0.15;
+    --ui-input-border-radius: var(--rounded);
+    --ui-input-box-shadow: none;
+    --ui-input-gap: 0.5rem;
+    --ui-input-icon-font-size: 1.25rem;
+    --ui-input-icon-count-l: 1;
+    --ui-input-icon-count-r: 1;
+    --ui-input-icon-gap: 0.375rem;
+    --ui-input-icon-inset-x: calc(var(--ui-input-px) - 0.25rem);
+    --ui-input-icon-inset-x-gap: 0.125rem;
+    --ui-input-icon-offset-l: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-l));
+    --ui-input-icon-offset-r: calc(var(--ui-input-icon-inset-x) + var(--ui-input-icon-inset-x-gap) + (var(--ui-input-icon-font-size) + var(--ui-input-icon-gap)) * var(--ui-input-icon-count-r));
+    --ui-input-validity-size: 0.875rem;
+    --ui-input-validity-offset: 0.375rem;
+    --ui-input-label-font-size: 0.875rem;
+    --ui-input-label-font-weight: var(--font-medium);
+    --ui-input-label-focus-transform: translateY(-0.75rem) scale(0.8);
+    --ui-input-label-focus-opacity: 0.5;
+
+    & > :where(label:not([class^="ui"])) {
+      display: block;
+      margin-bottom: var(--ui-input-gap);
+      font-size: var(--ui-input-label-font-size);
+      font-weight: var(--ui-input-label-font-weight);
+    }
+
+    & :where(em) {
+      grid-area: info;
+      display: none;
+      margin-top: var(--ui-input-validity-offset);
+      font-size: var(--ui-input-validity-size);
+      color: rgb(var(--color-error));
+      font-style: normal;
+    }
+  }
+
+  :where(.ui-input, .ui-select) {
+    display: grid;
+    grid-template-areas: "label" "input" "info";
+    font-size: var(--ui-input-font-size);
+    position: relative;
+
+    &:has(.icon-l) {
+      --ui-input-pl: var(--ui-input-icon-offset-l);
+    }
+
+    &:has(.icon-r) {
+      --ui-input-pr: var(--ui-input-icon-offset-r);
+    }
+
+    &:has(.icon-l > *:nth-child(2)) {
+      --ui-input-icon-count-r: 2;
+    }
+
+    &:has(.icon-r > *:nth-child(2)) {
+      --ui-input-icon-count-r: 2;
+    }
+
+    & :where(label) {
+      grid-area: label;
+      order: -1;
+    }
+
+    & :where(svg) {
+      font-size: var(--ui-input-icon-font-size);
+      width: 1em;
+      height: var(--ui-input-height);
+    }
+
+    & :where(input, textarea, select) {
+      grid-area: input;
+      background-clip: padding-box;
+      background-color: var(--ui-input-bg);
+      padding: var(--ui-input-py) var(--ui-input-pr) var(--ui-input-py) var(--ui-input-pl);
+      transition: var(--transition-border), var(--transition-shadow);
+      box-shadow: var(--ui-input-box-shadow);
+      line-height: normal;
+      font-size: inherit;
+      height: var(--ui-input-height);
+      font-weight: var(--ui-input-font-weight);
+      border-radius: var(--ui-input-border-radius);
+      color: var(--ui-input-color);
+      border: var(--ui-input-border-width) solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
+
+      @nest .is-validated &:invalid {
+        & ~ em {
+          display: block;
+        }
+      }
+
+      &:focus {
+        --ui-input-border-opacity: 1;
+        --ui-input-border-color: var(--color-accent);
+        --ui-input-box-shadow:
+          0 0 0 0 rgb(var(--color-current)),
+          0 0 0 3px rgb(var(--color-accent) / 0.2),
+          0 1px 2px 0 rgb(var(--color-current) / 0.05);
+      }
+
+      &:disabled {
+        cursor: default;
+        background-color: rgb(var(--color-default) / 0.1);
+      }
+
+      &:required {
+        & ~ label {
+          &::after {
+            color: rgb(var(--color-error));
+            content: " *";
+          }
+        }
+      }
+    }
+
+    & :where(input, textarea) {
+      &::placeholder {
+        color: var(--ui-input-placeholder-color);
+        opacity: var(--ui-input-placeholder-opacity);
+      }
+    }
+
+    & :where(textarea) {
+      resize: vertical;
+      overflow: hidden;
+      min-height: var(--ui-input-height-textarea);
+    }
+
+    & :where([class^="icon-"]) {
+      grid-area: input;
+      position: relative;
+      transition: var(--transition-opacity);
+      content: "";
+      line-height: 1em;
+      display: flex;
+      flex-direction: row;
+      flex-shrink: 0;
+      gap: var(--ui-input-icon-gap);
+      align-items: center;
+
+      &.icon-l {
+        left: var(--ui-input-icon-inset-x);
+        margin-right: auto;
+      }
+
+      &.icon-r {
+        right: var(--ui-input-icon-inset-x);
+        margin-left: auto;
+      }
+    }
+
+    & :where([aria-label]) {
+      &::after {
+        content: attr(aria-label);
+        font-size: var(--ui-input-font-size);
+        min-width: var(--ui-input-icon-font-size);
+        text-align: center;
+        line-height: var(--ui-input-icon-font-size);
+        display: block;
+      }
+    }
+
+    & :where([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;
+      }
+    }
+
+    &:where(.is-floating) {
+      --ui-input-placeholder-color: transparent;
+
+      & :where(label) {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), var(--transition-color), var(--transition-opacity);
+        transform-origin: 0 50%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        transform: perspective(100px);
+        will-change: transform;
+        font-weight: var(--ui-input-font-weight);
+        left: var(--ui-input-pl);
+        right: var(--ui-input-pr);
+        top: calc(var(--ui-input-height) / 2);
+        line-height: var(--ui-input-font-size);
+        margin-top: calc(var(--ui-input-font-size) / 2 * -1);
+      }
+
+      & :where(input, textarea, select) {
+        padding-top: calc(var(--ui-input-pt-floating));
+        padding-bottom: calc(var(--ui-input-pb-floating));
+
+        &:is(:focus, :not(:placeholder-shown)) ~ label {
+          transform: var(--ui-input-label-focus-transform);
+          opacity: var(--ui-input-label-focus-opacity);
+        }
+      }
+    }
+
+    @nest &.is-invalid, .is-validated & :where(input, textarea, select):invalid {
+      --ui-input-bg: rgb(var(--color-error) / 0.1);
+      --ui-input-border-opacity: 1;
+      --ui-input-border-color: var(--color-error);
+      --ui-input-color: rgb(var(--color-error));
+    }
+  }
+
+  :where(.ui-input-group) {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    & .ui-btn {
+      --ui-btn-outline-width: 1px;
+      --ui-btn-height: var(--ui-input-height);
+    }
+
+    & :where(em, label) {
+      display: block;
+      width: 100%;
+    }
+
+    & > * {
+      &:not(:first-child, label + *) {
+        margin-left: calc(var(--ui-input-border-width) * -1);
+
+        &, & :where(input, select) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+
+      &:not(:last-child, :has(+ em)) {
+        &, & :where(input, select) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+  }
+
+  :where(.ui-input-mask) {
+    & :where([class^="ui-"]) {
+      min-height: var(--ui-input-height);
+    }
+  }
+}

package/src/styles/Ui/Link.css

@@ -0,0 +1,44 @@
+:where(.ui-link) {
+  --ui-link-font-size: 0.875rem;
+  --ui-link-font-weight: var(--font-semibold);
+  --ui-link-hover-color: rgb(var(--color-accent));
+  --ui-link-hover-opacity: 0.7;
+  --ui-link-underline-width: 1px;
+  --ui-link-underline-opacity: 0;
+  --ui-link-underline-transform: translateY(-0.125rem);
+
+  font-size: var(--ui-link-font-size);
+  font-weight: var(--ui-link-font-weight);
+  transition: var(--transition-opacity);
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &:hover {
+    @media (hover: hover) and (pointer: fine) {
+      --ui-link-underline-opacity: 1;
+      --ui-link-underline-transform: none;
+
+      color: var(--ui-link-hover-color);
+    }
+  }
+
+  &:active {
+    opacity: var(--ui-link-hover-opacity);
+  }
+
+  &:where(:focus-visible) {
+    --ui-link-underline-opacity: 1;
+    --ui-link-underline-transform: none;
+  }
+
+  &:where(.is-underline)::after {
+    content: "";
+    border-bottom: var(--ui-link-underline-width) solid currentColor;
+    opacity: var(--ui-link-underline-opacity);
+    position: absolute;
+    inset: auto 0 0 0;
+    transition: var(--transition-opacity), var(--transition-transform);
+    transform: var(--ui-link-underline-transform);
+  }
+}