winduum 1.2.1 → 2.0.0-next.10

package/src/ui/check/default-props.css

@@ -1,13 +0,0 @@
-:root, :host {
-  --ui-check-size: 1.25rem;
-  --ui-check-icon-size: 1.125rem;
-  --ui-check-icon: var(--mask-check);
-  --ui-check-gap: var(--spacing-md);
-  --ui-check-font-size: var(--text-sm);
-  --ui-check-line-height: calc(1em + 0.25rem);
-  --ui-check-border-radius: var(--rounded-md);
-  --ui-check-border-width: 1px;
-  --ui-check-bg: currentColor;
-  --ui-check-border-color: currentColor;
-  --ui-check-outline-width: 3px;
-}

package/src/ui/check/default.css

@@ -1,74 +0,0 @@
-.ui-check {
-  --ui-check-outline-color: var(--color-accent);
-  --ui-check-icon-color: var(--color-accent-foreground);
-
-  font-weight: var(--ui-check-font-weight);
-  font-size: var(--ui-check-font-size);
-  line-height: var(--ui-check-line-height);
-  letter-spacing: var(--ui-check-letter-spacing);
-  gap: var(--ui-check-gap);
-  display: inline-flex;
-  text-wrap: pretty;
-
-  &:has([type="radio"]) {
-    --ui-check-icon: var(--mask-radio);
-    --ui-check-border-radius: 50%;
-  }
-
-  :where(a) {
-    color: var(--color-accent);
-    text-decoration: underline;
-  }
-
-  :where(input) {
-    --tw-border-opacity: 0.2;
-    --tw-border-mix: transparent;
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-    --tw-bg-opacity: 0;
-    --tw-bg-mix: transparent;
-
-    width: var(--ui-check-size);
-    height: var(--ui-check-size);
-    border-radius: var(--ui-check-border-radius);
-    background-color: color-mix(in var(--space), var(--ui-check-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-    border:
-      var(--ui-check-border-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-check-border-color) calc(var(--tw-border-opacity) * 100%),
-        var(--tw-border-mix)
-      );
-    outline:
-      var(--ui-check-outline-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-check-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
-      );
-    outline-offset: var(--ui-check-outline-offset);
-    display: flex;
-    flex-shrink: 0;
-
-    &::before {
-      width: var(--ui-check-icon-size);
-      height: var(--ui-check-icon-size);
-      color: var(--ui-check-icon-color);
-      mask: var(--ui-check-icon);
-      transition: inherit;
-      content: "";
-      background-color: currentColor;
-      opacity: 0;
-      transform: scale(0);
-      will-change: transform;
-      margin: auto;
-    }
-
-    &:where(:required) {
-      + *::after {
-        color: var(--color-error);
-        content: " *";
-      }
-    }
-  }
-}

package/src/ui/check/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --ui-check-disabled-opacity: 0.5;
-}

package/src/ui/check/interactive.css

@@ -1,50 +0,0 @@
-.ui-check {
-  --ui-check-hover-border-color: var(--color-accent);
-  --ui-check-hover-bg: var(--color-accent);
-  --ui-check-checked-bg: var(--color-accent);
-  --ui-check-focus-border-color: var(--color-accent);
-
-  :where(input) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
-
-    &:enabled {
-      &:is(:hover, :focus-visible) {
-        --ui-check-border-color: var(--ui-check-hover-border-color);
-        --ui-check-bg: var(--ui-check-hover-bg);
-        --tw-border-opacity: var(--ui-check-hover-border-opacity, 0.75);
-        --tw-bg-opacity: var(--ui-check-hover-bg-opacity, 0.1);
-      }
-
-      &:focus {
-        --ui-check-border-color: var(--ui-check-focus-border-color);
-        --ui-check-outline-offset: var(--ui-check-focus-outline-offset);
-        --tw-border-opacity: var(--ui-check-focus-border-opacity, 0.75);
-        --tw-outline-opacity: var(--ui-check-focus-outline-opacity, 0.2);
-      }
-    }
-
-    &:disabled {
-      --tw-bg-opacity: var(--ui-check-disabled-bg-opacity, 0.15);
-
-      cursor: not-allowed;
-      opacity: var(--ui-check-disabled-opacity);
-    }
-
-    &:where([type="checkbox"]):indeterminate {
-      --ui-check-icon: var(--mask-indeterminate);
-    }
-
-    &:is(:checked, [type="checkbox"]:indeterminate) {
-      --ui-check-bg: var(--ui-check-checked-bg);
-      --tw-bg-opacity: 1;
-      --tw-border-opacity: 0;
-
-      &::before {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-}

package/src/ui/check/invalid.css

@@ -1,8 +0,0 @@
-.ui-check {
-  &.invalid, .validated & :where(input):invalid {
-    --ui-check-border-color: var(--color-error);
-    --ui-check-outline-color: var(--color-error);
-    --ui-check-bg: var(--color-error);
-    --tw-border-opacity: 1;
-  }
-}

package/src/ui/color/default-props.css

@@ -1,11 +0,0 @@
-:root, :host {
-  --ui-color-primary: currentColor;
-  --ui-color-secondary: transparent;
-  --ui-color-size: 1.75rem;
-  --ui-color-p: var(--spacing-xs);
-  --ui-color-border-width: 2px;
-  --ui-color-border-color: currentColor;
-  --ui-color-border-radius: var(--rounded-full);
-  --ui-color-outline-width: 3px;
-  --ui-color-outline-color: var(--ui-color-border-color);
-}

package/src/ui/color/default.css

@@ -1,48 +0,0 @@
-.ui-color {
-  display: inline-flex;
-
-  :where(input) {
-    --tw-border-opacity: 0.1;
-    --tw-border-mix: transparent;
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-
-    width: var(--ui-color-size);
-    height: var(--ui-color-size);
-    padding: var(--ui-color-p);
-    border-radius: var(--ui-color-border-radius);
-    border:
-      var(--ui-color-border-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-color-border-color) calc(var(--tw-border-opacity) * 100%),
-        var(--tw-border-mix)
-      );
-    outline:
-      var(--ui-color-outline-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-color-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
-      );
-    outline-offset: var(--ui-check-outline-offset);
-    display: inline-grid;
-
-    &::before, &::after {
-      border: 1px solid transparent;
-      border-radius: inherit;
-      grid-area: 1/-1;
-      content: "";
-    }
-
-    &::before {
-      background-color: var(--ui-color-primary);
-      border-color: inherit;
-    }
-
-    &::after {
-      background-color: var(--ui-color-secondary);
-      clip-path: polygon(100% 0, 100% 100%, 0 100%);
-    }
-  }
-}

package/src/ui/color/index.css

@@ -1,4 +0,0 @@
-@import "default-props.css";
-@import "default.css";
-@import "interactive-props.css";
-@import "interactive.css";

package/src/ui/color/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --ui-color-disabled-opacity: 0.5;
-}

package/src/ui/color/interactive.css

@@ -1,30 +0,0 @@
-.ui-color {
-  :where(input) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
-
-    &:where(:disabled) {
-      cursor: not-allowed;
-
-      &::before, &::after {
-        opacity: var(--ui-color-disabled-opacity);
-      }
-    }
-
-    &:where(:enabled) {
-      &:is(:hover) {
-        --tw-border-opacity: 0.3;
-      }
-
-      &:is(:focus-visible) {
-        --tw-border-opacity: 1;
-        --tw-outline-opacity: 0.2;
-      }
-    }
-
-    &:is(:checked) {
-      --tw-border-opacity: 1;
-    }
-  }
-}

package/src/ui/control/color-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --ui-control-color-swatch-width: 1.25rem;
-  --ui-control-color-swatch-height: 1.25rem;
-  --ui-control-color-swatch-border-radius: var(--rounded-full);
-}

package/src/ui/control/color.css

@@ -1,24 +0,0 @@
-.ui-control {
-  > :where(input) {
-    &::-webkit-color-swatch-wrapper {
-      width: var(--ui-control-color-swatch-width);
-      height: var(--ui-control-color-swatch-height);
-      padding: 0;
-    }
-
-    &::-moz-color-swatch {
-      width: var(--ui-control-color-swatch-width);
-      height: var(--ui-control-color-swatch-height);
-      border-radius: var(--ui-control-color-swatch-border-radius);
-      margin: 0;
-    }
-
-    &::-webkit-color-swatch {
-      border-radius: var(--ui-control-color-swatch-border-radius);
-    }
-
-    &[type="color"] ~ label {
-      margin-inline-start: calc(var(--ui-control-px) + var(--ui-control-color-swatch-width));
-    }
-  }
-}

package/src/ui/control/default-props.css

@@ -1,16 +0,0 @@
-:root, :host {
-  --ui-control-height: 3rem;
-  --ui-control-height-textarea: 8rem;
-  --ui-control-px: 0.75rem;
-  --ui-control-py: 0.75rem;
-  --ui-control-border-width: 1px;
-  --ui-control-font-weight: var(--font-medium);
-  --ui-control-font-size: var(--text-sm);
-  --ui-control-bg: transparent;
-  --ui-control-color: currentColor;
-  --ui-control-border-radius: var(--rounded);
-  --ui-control-border-color: currentColor;
-  --ui-control-outline-width: 3px;
-  --ui-control-placeholder-color: currentColor;
-  --ui-control-placeholder-opacity: 0.5;
-}

package/src/ui/control/default.css

@@ -1,77 +0,0 @@
-.ui-control {
-  --ui-control-outline-color: var(--color-accent);
-  --tw-bg-opacity: 1;
-  --tw-bg-mix: transparent;
-  --tw-border-opacity: 0.15;
-  --tw-border-mix: transparent;
-  --tw-outline-opacity: 0;
-  --tw-outline-mix: transparent;
-
-  display: grid;
-  block-size: var(--ui-control-height);
-  font-family: var(--ui-control-font-family);
-  font-weight: var(--ui-control-font-weight);
-  font-size: var(--ui-control-font-size);
-  letter-spacing: var(--ui-control-letter-spacing);
-  background-color: color-mix(in var(--space), var(--ui-control-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: var(--ui-control-color);
-  border-radius: var(--ui-control-border-radius);
-  border:
-    var(--ui-control-border-width) solid
-    color-mix(
-      in var(--space),
-      var(--ui-control-border-color) calc(var(--tw-border-opacity) * 100%),
-      var(--tw-border-mix)
-    );
-  outline:
-    var(--ui-control-outline-width) solid
-    color-mix(
-      in var(--space),
-      var(--ui-control-outline-color) calc(var(--tw-outline-opacity) * 100%),
-      var(--tw-outline-mix)
-    );
-  outline-offset: var(--ui-control-outline-offset);
-  grid-template:
-    [c-control-start] calc(var(--ui-control-py) - var(--ui-control-border-width))
-    [c-control-p] 1fr
-    calc(var(--ui-control-py) - var(--ui-control-border-width)) [c-control-end] /
-    [c-control-start] var(--ui-control-px)
-    [c-control-p] 1fr
-    var(--ui-control-px) [c-control-end];
-
-  &:has(textarea) {
-    height: auto;
-  }
-
-  > :where(*) {
-    grid-area: c-control-p;
-    align-self: center;
-  }
-
-  > :where(input, textarea, select) {
-    padding-block: var(--ui-control-py);
-    padding-inline: calc(var(--ui-control-px) + var(--ui-control-ps, 0rem)) calc(var(--ui-control-px) + var(--ui-control-pe, 0rem));
-    grid-area: c-control;
-    text-overflow: ellipsis;
-    overflow: clip;
-    align-self: stretch;
-    align-items: center;
-    border-radius: inherit;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  > :where(input, textarea) {
-    &::placeholder {
-      color: var(--ui-control-placeholder-color);
-      opacity: var(--ui-control-placeholder-opacity);
-    }
-  }
-
-  > :where(textarea) {
-    min-block-size: var(--ui-control-height-textarea);
-    resize: vertical;
-  }
-}

package/src/ui/control/file.css

@@ -1,25 +0,0 @@
-.ui-control:where(:has([type="file"])) {
-  overflow: clip;
-
-  > :where([type="file"]) {
-    --color-accent: currentColor;
-    --tw-bg-opacity: 0.15;
-
-    &::file-selector-button {
-      all: unset;
-      background-color: color-mix(in var(--space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent);
-      block-size: calc(var(--ui-control-height) - var(--ui-control-border-width) * 2);
-      padding-inline: var(--ui-control-px);
-      margin-inline: calc(var(--ui-control-px) * -1) var(--ui-control-px);
-      margin-block-start: calc(var(--ui-control-py) * -1);
-      border-start-end-radius: var(--ui-control-border-radius, var(--rounded));
-      border-end-end-radius: var(--ui-control-border-radius, var(--rounded));
-      transition: var(--transition-background);
-      cursor: pointer;
-    }
-
-    &:is(:hover, :focus) {
-      --tw-bg-opacity: 0.2;
-    }
-  }
-}

package/src/ui/control/floating-interactive.css

@@ -1,13 +0,0 @@
-.ui-control:where(:has(:not([type="color"]) ~ label)) {
-  --ui-control-label-focus-opacity: 0.5;
-  --ui-control-placeholder-color: transparent;
-
-  > :where(input, textarea, select) {
-    &:is(:focus, :not(:placeholder-shown)) {
-      ~ label {
-        transform: translateY(calc(var(--ui-control-label-translate-y) * -1)) scale(var(--ui-control-label-scale));
-        opacity: var(--ui-control-label-focus-opacity);
-      }
-    }
-  }
-}

package/src/ui/control/floating-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-control-label-translate-y: 0.625rem;
-  --ui-control-label-scale: 0.8;
-}

package/src/ui/control/floating.css

@@ -1,36 +0,0 @@
-.ui-control:where(:has(:not([type="color"]) ~ label)) {
-  > :where(label) {
-    margin-inline: var(--ui-control-ps, 0) var(--ui-control-pe, 0);
-    pointer-events: none;
-    transform-origin: 0 50%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: clip;
-    will-change: transform;
-    transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
-  }
-
-  > :where(textarea) {
-    padding-block-start: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
-
-    + :where(label) {
-      align-self: start;
-    }
-  }
-
-  > :where(input, select) {
-    padding-block: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale)) calc(var(--ui-control-py) - var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
-
-    &::-webkit-calendar-picker-indicator,
-    &::-webkit-search-cancel-button,
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      transform: translateY(calc(var(--ui-control-label-translate-y) * var(--ui-control-label-scale) * -1));
-    }
-  }
-
-  &:where(:has(:required)) :where(label)::after {
-    color: var(--color-error);
-    content: " *";
-  }
-}

package/src/ui/control/icon-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-control-icon-size: 1.25rem;
-  --ui-control-icon-gap: 0.375rem;
-}

package/src/ui/control/icon.css

@@ -1,32 +0,0 @@
-.ui-control {
-  --ui-control-s: calc(var(--ui-control-icon-count-s, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
-  --ui-control-e: calc(var(--ui-control-icon-count-e, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
-
-  &:has(textarea) {
-    :where(.me-auto), :where(.ms-auto) {
-      align-self: start;
-    }
-  }
-
-  &:has(.me-auto) {
-    --ui-control-ps: calc(var(--ui-control-s) + var(--ui-control-px));
-  }
-
-  &:has(.ms-auto) {
-    --ui-control-pe: calc(var(--ui-control-e) + var(--ui-control-px));
-  }
-
-  &:has(.me-auto > *:nth-child(2)) {
-    --ui-control-icon-count-s: 2;
-  }
-
-  &:has(.ms-auto > *:nth-child(2)) {
-    --ui-control-icon-count-e: 2;
-  }
-
-  :where(.me-auto), :where(.ms-auto) {
-    gap: var(--ui-control-icon-gap);
-    display: flex;
-    align-items: center;
-  }
-}

package/src/ui/control/interactive-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --ui-control-disabled-opacity: 0.05;
-}

package/src/ui/control/interactive.css

@@ -1,19 +0,0 @@
-.ui-control {
-  --ui-control-focus-border-color: var(--color-accent);
-
-  transition-property: var(--transition);
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: var(--duration);
-
-  &:focus-within {
-    --ui-control-border-color: var(--ui-control-focus-border-color);
-    --ui-control-outline-offset: var(--ui-control-focus-outline-offset);
-    --tw-border-opacity: var(--ui-control-focus-border-opacity, 1);
-    --tw-outline-opacity: var(--ui-control-focus-outline-opacity, 0.2);
-  }
-
-  &.disabled, &:has(:where(input, textarea, select):disabled) {
-    --ui-control-bg: currentColor;
-    --tw-bg-opacity: var(--ui-control-disabled-opacity);
-  }
-}

package/src/ui/control/invalid.css

@@ -1,10 +0,0 @@
-.ui-control {
-  &.invalid, &:has(:user-invalid), .validated &:has(:invalid) {
-    --ui-control-border-color: var(--ui-control-invalid-border-color, var(--color-error));
-    --ui-control-outline-color: var(--ui-control-invalid-outline-color, var(--color-error));
-    --ui-control-color: var(--ui-control-invalid-color, var(--color-error));
-    --ui-control-bg: var(--ui-control-invalid-bg, var(--color-error));
-    --tw-bg-opacity: var(--ui-control-invalid-bg-opacity, 0.1);
-    --tw-border-opacity: var(--ui-control-invalid-border-opacity, 1);
-  }
-}

package/src/ui/control/readme.md

@@ -1,44 +0,0 @@
-# [Control](https://winduum.dev/docs/ui/control.html)
-
-## Installation
-```shell
-npm i winduum
-```
-Learn more how to set up Winduum [here](https://winduum.dev/docs/).
-Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
-
-```css
-@import "winduum/src/ui/control/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/control/default-props.css" layer(components);
-@import "winduum/src/ui/control/default.css" layer(components);
-@import "winduum/src/ui/control/interactive.css" layer(components);
-@import "winduum/src/ui/control/interactive-props.css" layer(components);
-@import "winduum/src/ui/control/invalid.css" layer(components);
-@import "winduum/src/ui/control/color-props.css" layer(components);
-@import "winduum/src/ui/control/color.css" layer(components);
-@import "winduum/src/ui/control/icon.css" layer(components);
-@import "winduum/src/ui/control/icon-props.css" layer(components);
-@import "winduum/src/ui/control/file.css" layer(components);
-@import "winduum/src/ui/control/floating-props.css" layer(components);
-@import "winduum/src/ui/control/floating.css" layer(components);
-@import "winduum/src/ui/control/floating-interactive.css" layer(components);
-@import "winduum/src/ui/control/select-props.css" layer(components);
-@import "winduum/src/ui/control/select.css" layer(components);
-@import "winduum/src/ui/control/select-multiple.css" layer(components);
-```
-
-### Local imports
-By default, imports are directly from `npm` so you can leverage updates.
-You can also copy and paste the code from this directory to your project and remap the imports to local.
-
-```css
-@import "@/components/ui/control/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/control.html) to learn more about usage examples.

package/src/ui/control/select-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-control-select-icon-size: 1.5rem;
-  --ui-control-select-icon-me: -0.25rem;
-}

package/src/ui/control/select.css

@@ -1,23 +0,0 @@
-.ui-control:has(select:not([multiple])) {
-  --ui-control-pe: calc(var(--ui-control-select-icon-size) + var(--ui-control-select-icon-me));
-
-  &:has(.ms-auto) {
-    --ui-control-icon-count-e: 2;
-  }
-
-  &::after {
-    width: var(--ui-control-select-icon-size);
-    height: var(--ui-control-select-icon-size);
-    mask: var(--mask-angle-down);
-    margin-inline: auto var(--ui-control-select-icon-me);
-    grid-area: c-control-p;
-    background-color: currentColor;
-    pointer-events: none;
-    align-self: center;
-    content: "";
-  }
-
-  :where(.ms-auto) {
-    margin-inline-end: var(--ui-control-select-icon-size);
-  }
-}

package/src/ui/group/default.css

@@ -1,42 +0,0 @@
-.ui-group {
-  display: flex;
-  border-radius: var(--rounded);
-
-  &:has(.ui-control) {
-    > :where(.ui-btn) {
-      min-width: var(--ui-control-height);
-      height: auto;
-    }
-
-    > :is(.ui-btn) {
-      --ui-btn-border-width: var(--ui-control-border-width);
-    }
-  }
-
-  > :where(*) {
-    border-radius: inherit;
-
-    &:is(.ui-control) {
-      --tw-border-mix: var(--color-body-primary);
-    }
-
-    &:is(.ui-btn) {
-      --ui-btn-focus-outline-offset: 0;
-    }
-
-    &:focus-within {
-      z-index: 1;
-    }
-
-    &:where(:not(:first-child)) {
-      margin-inline-start: calc(var(--ui-control-border-width) * -1);
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-    }
-
-    &:where(:not(:last-child)) {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-  }
-}

package/src/ui/heading/default-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --ui-heading-font-family: var(--font-primary);
-  --ui-heading-font-weight: var(--font-semibold);
-  --ui-heading-font-size: var(--text-xl);
-  --ui-heading-line-height: calc(1em + 0.375rem);
-}