winduum 1.2.1 → 2.0.0-next.10

package/src/ui/heading/default.css

@@ -1,8 +0,0 @@
-.ui-heading {
-  font-family: var(--ui-heading-font-family);
-  font-weight: var(--ui-heading-font-weight);
-  font-size: var(--ui-heading-font-size);
-  line-height: var(--ui-heading-line-height);
-  letter-spacing: var(--ui-heading-letter-spacing);
-  text-wrap: balance;
-}

package/src/ui/heading/lg.css

@@ -1,3 +0,0 @@
-.ui-heading:is(.lg) {
-  --ui-heading-font-size: var(--text-3xl);
-}

package/src/ui/heading/sm.css

@@ -1,3 +0,0 @@
-.ui-heading:is(.sm) {
-  --ui-heading-font-size: var(--text-lg);
-}

package/src/ui/index.css

@@ -1,18 +0,0 @@
-@import "badge/index.css";
-@import "btn/index.css";
-@import "check/index.css";
-@import "color/index.css";
-@import "control/index.css";
-@import "group/index.css";
-@import "heading/index.css";
-@import "image/index.css";
-@import "info/index.css";
-@import "label/index.css";
-@import "link/index.css";
-@import "notice/index.css";
-@import "progress/index.css";
-@import "range/index.css";
-@import "rating/index.css";
-@import "switch/index.css";
-@import "text/index.css";
-@import "title/index.css";

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

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-info-font-size: var(--text-xs);
-  --ui-info-line-height: calc(1em + 0.25rem);
-}

package/src/ui/info/default.css

@@ -1,8 +0,0 @@
-.ui-info {
-  font-family: var(--ui-info-font-family);
-  font-weight: var(--ui-info-font-weight);
-  font-size: var(--ui-info-font-size);
-  line-height: var(--ui-info-line-height);
-  letter-spacing: var(--ui-info-letter-spacing);
-  text-wrap: pretty;
-}

package/src/ui/info/index.css

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

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

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-label-font-size: var(--text-sm);
-  --ui-label-line-height: calc(1em + 0.25rem);
-}

package/src/ui/label/default.css

@@ -1,8 +0,0 @@
-.ui-label {
-  font-family: var(--ui-label-font-family);
-  font-weight: var(--ui-label-font-weight);
-  font-size: var(--ui-label-font-size);
-  line-height: var(--ui-label-line-height);
-  letter-spacing: var(--ui-label-letter-spacing);
-  text-wrap: pretty;
-}

package/src/ui/label/index.css

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

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

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-link-font-size: var(--text-sm);
-  --ui-link-line-height: calc(1em + 0.25rem);
-}

package/src/ui/link/default.css

@@ -1,8 +0,0 @@
-.ui-link {
-  font-family: var(--ui-link-font-family);
-  font-weight: var(--ui-link-font-weight);
-  font-size: var(--ui-link-font-size);
-  line-height: var(--ui-link-line-height);
-  letter-spacing: var(--ui-link-letter-spacing);
-  text-wrap: pretty;
-}

package/src/ui/link/index.css

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

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

@@ -1,5 +0,0 @@
-:root, :host {
-  --ui-link-hover-color: currentColor;
-  --ui-link-hover-color-opacity: 0.75;
-  --ui-link-hover-color-mix: transparent;
-}

package/src/ui/link/interactive.css

@@ -1,16 +0,0 @@
-.ui-link {
-  --tw-text-opacity: var(--ui-link-hover-color-opacity);
-
-  &:where(:any-link, button:enabled, [role="button"]) {
-    transition: all var(--duration) var(--ease-in-out);
-
-    &:hover {
-      color: color-mix(in var(--space), var(--ui-link-hover-color) calc(var(--tw-text-opacity) * 100%), var(--ui-link-hover-color-mix));
-    }
-
-    &:focus-visible {
-      outline: 2px dotted currentColor;
-      outline-offset: 2px;
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-:root, :host {
-  --ui-notice-py: 1.25rem;
-  --ui-notice-px: 1.5rem;
-  --ui-notice-font-size: var(--text-sm);
-  --ui-notice-border-radius: var(--rounded);
-  --ui-notice-outline-width: 1px;
-  --ui-notice-outline-offset: calc(var(--ui-notice-outline-width, 1px) * -1);
-}

package/src/ui/notice/default.css

@@ -1,25 +0,0 @@
-.ui-notice {
-  --tw-bg-opacity: 0.1;
-  --tw-bg-mix: transparent;
-  --tw-outline-opacity: 0.1;
-  --tw-outline-mix: transparent;
-
-  padding: var(--ui-notice-py) var(--ui-notice-px);
-  font-size: var(--ui-notice-font-size);
-  border-radius: var(--ui-notice-border-radius);
-  background-color: color-mix(in var(--space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: var(--color-accent);
-  outline:
-    var(--ui-notice-outline-width) solid
-    color-mix(
-      in var(--space),
-      var(--color-accent) calc(var(--tw-outline-opacity) * 100%),
-      var(--tw-outline-mix)
-    );
-  outline-offset: var(--ui-notice-outline-offset);
-  text-wrap: pretty;
-
-  :where(hr) {
-    --tw-border-opacity: 0.2;
-  }
-}

package/src/ui/notice/index.css

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

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

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-progress-height: 1rem;
-  --ui-progress-border-radius: var(--rounded-full);
-}

package/src/ui/progress/default.css

@@ -1,47 +0,0 @@
-.ui-progress {
-  --tw-bg-opacity: 0.1;
-  --tw-bg-mix: var(--color-body);
-  --duration: 0.3s;
-
-  inline-size: 100%;
-  block-size: var(--ui-progress-height);
-  border-radius: var(--ui-progress-border-radius);
-  background-color: color-mix(in var(--space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  position: relative;
-  overflow: clip;
-
-  &::-moz-progress-bar {
-    background-color: var(--color-accent);
-    border-radius: inherit;
-    transition: all var(--duration) var(--ease-in-out);
-  }
-
-  &::-webkit-progress-bar {
-    background-color: transparent;
-    border-radius: inherit;
-  }
-
-  &::-webkit-progress-inner-element {
-    border-radius: inherit;
-  }
-
-  &::-webkit-progress-value {
-    background-color: var(--color-accent);
-    border-radius: inherit;
-    transition: all var(--duration) var(--ease-in-out);
-  }
-
-  &:indeterminate {
-    --duration: 1s;
-
-    animation: var(--duration) var(--ease-linear) infinite move-indeterminate;
-    background-image: linear-gradient(to right, var(--color-accent) 33.33%, transparent 0%);
-    background-position: top left;
-    background-repeat: no-repeat;
-    background-size: 150%;
-
-    &::-moz-progress-bar {
-      background-color: transparent;
-    }
-  }
-}

package/src/ui/progress/lg.css

@@ -1,3 +0,0 @@
-.ui-progress:is(.lg) {
-  --ui-progress-height: 1.5rem;
-}

package/src/ui/progress/sm.css

@@ -1,3 +0,0 @@
-.ui-progress:is(.sm) {
-  --ui-progress-height: 0.5rem;
-}

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

@@ -1,10 +0,0 @@
-:root, :host {
-  --ui-range-track-height: 0.375rem;
-  --ui-range-thumb-size: 1.125rem;
-  --ui-range-thumb-border-width: 0;
-  --ui-range-thumb-outline-width: 2px;
-  --ui-range-thumb-outline-opacity: 0;
-  --ui-range-thumb-focus-outline-opacity: 0.5;
-  --ui-range-track-start: 0%;
-  --ui-range-track-end: 100%;
-}

package/src/ui/range/default.css

@@ -1,101 +0,0 @@
-.ui-range {
-  --ui-range-thumb-bg: var(--color-accent);
-  --ui-range-thumb-border-color: var(--ui-range-thumb-bg);
-  --ui-range-track-bg: var(--color-accent);
-  --ui-range-track:
-    linear-gradient(
-      to right,
-      var(--ui-range-track-bg) 0%,
-      var(--ui-range-track-bg) var(--ui-range-track-start),
-      transparent var(--ui-range-track-start),
-      transparent var(--ui-range-track-end)
-    );
-
-  min-block-size: var(--ui-range-thumb-size);
-  display: grid;
-
-  :where(input) {
-    --tw-bg-opacity: 0.1;
-    --tw-bg-mix: var(--color-body);
-
-    block-size: var(--ui-range-track-height);
-    background-color: color-mix(in var(--space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-    position: relative;
-    grid-area: 1/1;
-
-    &::-webkit-slider-runnable-track {
-      block-size: var(--ui-range-track-height);
-      border-radius: var(--rounded-full);
-      background: var(--ui-range-track);
-    }
-
-    &::-moz-range-track {
-      block-size: var(--ui-range-track-height);
-      border-radius: var(--rounded-full);
-      background: var(--ui-range-track);
-    }
-
-    &::-webkit-slider-thumb {
-      --tw-outline-opacity: var(--ui-range-thumb-outline-opacity);
-
-      width: var(--ui-range-thumb-size);
-      height: var(--ui-range-thumb-size);
-      background-color: var(--ui-range-thumb-bg);
-      border-radius: var(--rounded-full);
-      border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
-      outline:
-        var(--ui-range-thumb-outline-width) solid
-        color-mix(
-          in var(--space),
-          var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
-        );
-      margin-block-start: calc((var(--ui-range-thumb-size) - var(--ui-range-track-height)) / 2 * -1);
-      transition: outline-color var(--duration), outline-offset var(--duration);
-      cursor: var(--ui-range-thumb-cursor, grab);
-      appearance: none;
-      pointer-events: auto;
-
-      &:active {
-        --ui-range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-
-    &::-moz-range-thumb {
-      --tw-outline-opacity: var(--ui-range-thumb-outline-opacity);
-
-      width: var(--ui-range-thumb-size);
-      height: var(--ui-range-thumb-size);
-      background-color: var(--ui-range-thumb-bg);
-      border-radius: var(--rounded-full);
-      border: var(--ui-range-thumb-border-width) solid var(--ui-range-thumb-border-color);
-      outline:
-        var(--ui-range-thumb-outline-width) solid
-        color-mix(
-          in var(--space),
-          var(--ui-range-thumb-bg) calc(var(--tw-outline-opacity) * 100%),
-          transparent
-        );
-      transition: outline-color var(--duration), outline-offset var(--duration);
-      cursor: var(--ui-range-thumb-cursor, grab);
-      appearance: none;
-      pointer-events: auto;
-
-      &:active {
-        --ui-range-thumb-cursor: grabbing;
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-
-      &::-moz-range-thumb {
-        --tw-outline-opacity: var(--ui-range-thumb-focus-outline-opacity);
-      }
-    }
-  }
-}

package/src/ui/range/multi.css

@@ -1,22 +0,0 @@
-.ui-range {
-  :where(input) {
-    &:not(:only-of-type) {
-      --ui-range-track:
-        linear-gradient(
-          to right,
-          transparent 0%,
-          transparent var(--ui-range-track-start),
-          var(--ui-range-track-bg) var(--ui-range-track-start),
-          var(--ui-range-track-bg) var(--ui-range-track-end),
-          transparent var(--ui-range-track-end),
-          transparent 100%
-        );
-
-      pointer-events: none;
-
-      ~ input {
-        background: transparent;
-      }
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-:root, :host {
-  --ui-rating-color: var(--color-accent);
-  --c-rating-gap: 0.25rem;
-  --c-rating-opacity: 0.2;
-}

package/src/ui/rating/invalid.css

@@ -1,5 +0,0 @@
-.ui-rating {
-  &.invalid, .validated & :where(input):invalid {
-    --ui-rating-color: var(--color-error);
-  }
-}

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

@@ -1,17 +0,0 @@
-:root, :host {
-  --ui-switch-width: 3rem;
-  --ui-switch-height: 1.5rem;
-  --ui-switch-icon-size: 1.125rem;
-  --ui-switch-font-weight: var(--font-normal);
-  --ui-switch-font-size: var(--text-sm);
-  --ui-switch-line-height: calc(1em + 0.25rem);
-  --ui-switch-gap: 0.75rem;
-  --ui-switch-border-radius: var(--rounded-full);
-  --ui-switch-bg: currentColor;
-  --ui-switch-outline-width: 2px;
-  --ui-switch-outline-color: currentColor;
-
-  &.dark {
-    --ui-switch-bg: var(--color-body-tertiary);
-  }
-}

package/src/ui/switch/default.css

@@ -1,46 +0,0 @@
-.ui-switch {
-  font-weight: var(--ui-switch-font-weight);
-  font-size: var(--ui-switch-font-size);
-  line-height: var(--ui-switch-line-height);
-  letter-spacing: var(--ui-switch-letter-spacing);
-  gap: var(--ui-switch-gap);
-  display: inline-flex;
-  text-wrap: pretty;
-
-  :where(a) {
-    color: var(--color-accent);
-    text-decoration: underline;
-  }
-
-  :where(input) {
-    --tw-outline-opacity: 0;
-    --tw-outline-mix: transparent;
-
-    inline-size: var(--ui-switch-width);
-    block-size: var(--ui-switch-height);
-    padding: calc((var(--ui-switch-height) - var(--ui-switch-icon-size)) / 2);
-    border-radius: var(--ui-switch-border-radius);
-    background-color: var(--ui-switch-bg);
-    outline:
-      var(--ui-switch-outline-width) solid
-      color-mix(
-        in var(--space),
-        var(--ui-switch-outline-color) calc(var(--tw-outline-opacity) * 100%),
-        var(--tw-outline-mix)
-      );
-    outline-offset: var(--ui-switch-outline-offset);
-    display: flex;
-    position: relative;
-    flex-shrink: 0;
-
-    &::before {
-      width: var(--ui-switch-icon-size);
-      height: var(--ui-switch-icon-size);
-      background-color: var(--color-light);
-      transition: var(--transition-all);
-      border-radius: inherit;
-      margin-block: auto;
-      content: "";
-    }
-  }
-}

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

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

package/src/ui/switch/interactive.css

@@ -1,39 +0,0 @@
-.ui-switch {
-  :where(input) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
-
-    &:where(:required) {
-      & + *::after {
-        color: var(--color-error);
-        content: " *";
-      }
-    }
-
-    &:enabled:focus {
-      --ui-switch-outline-offset: var(--ui-switch-focus-outline-offset);
-      --tw-outline-opacity: 0.4;
-    }
-
-    &:disabled {
-      opacity: var(--ui-switch-disabled-opacity);
-      cursor: not-allowed;
-    }
-
-    &:checked {
-      --ui-switch-outline-color: var(--color-accent);
-      --ui-switch-bg: var(--color-accent);
-
-      &::before {
-        margin-inline-start: calc(100% - var(--ui-switch-icon-size));
-      }
-    }
-
-    &:indeterminate {
-      &::before {
-        margin-inline-start: calc(50% - var(--ui-switch-icon-size) / 2);
-      }
-    }
-  }
-}

package/src/ui/switch/invalid.css

@@ -1,6 +0,0 @@
-.ui-switch {
-  &.invalid :where(input), .validated & :where(input):invalid {
-    --ui-switch-outline-color: var(--color-error);
-    --ui-switch-bg: var(--color-error);
-  }
-}

package/src/ui/switch/readme.md

@@ -1,32 +0,0 @@
-# [Switch](https://winduum.dev/docs/ui/switch.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/switch/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/switch/default-props.css" layer(components);
-@import "winduum/src/ui/switch/default.css" layer(components);
-@import "winduum/src/ui/switch/interactive.css" layer(components);
-@import "winduum/src/ui/switch/invalid.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/switch/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/switch.html) to learn more about usage examples.

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

@@ -1,9 +0,0 @@
-:root, :host {
-  --ui-text-content-bold: var(--font-semibold);
-  --ui-text-content-my: var(--spacing-xl);
-  --ui-text-content-marker-size: 0.375em;
-  --ui-text-line-height: calc(1em + 0.75rem);
-  --ui-text-hr-my: 3em;
-  --ui-text-heading-line-height: calc(1em + 0.375rem);
-  --ui-text-heading-my: 1.5em 0.5em;
-}