@pathscale/ui 0.0.161 → 0.0.163

package/dist/progress/progress.css

@@ -0,0 +1,94 @@
+@layer components {
+  .progress {
+      position: relative;
+      height: calc(0.25rem * 2);
+      width: 100%;
+      appearance: none;
+      overflow: hidden;
+      border-radius: var(--radius-box);
+      background-color: currentcolor;
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .progress {
+      background-color: color-mix(in oklab, currentcolor 20%, transparent);
+    }
+    }
+
+  .progress:indeterminate {
+      background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
+      background-size: 200%;
+      background-position-x: 15%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .progress:indeterminate {
+      animation: progress 5s ease-in-out infinite;
+    }
+    }
+
+  @supports (-moz-appearance: none) {
+    .progress:indeterminate::-moz-progress-bar {
+      background-color: transparent;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+    .progress:indeterminate::-moz-progress-bar {
+      animation: progress 5s ease-in-out infinite;
+      background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
+      background-size: 200%;
+      background-position-x: 15%;
+    }
+    }
+    }
+
+  @supports (-moz-appearance: none) {
+    .progress::-moz-progress-bar {
+      border-radius: var(--radius-box);
+      background-color: currentcolor;
+    }
+    }
+
+  @supports (-webkit-appearance: none) {
+    .progress::-webkit-progress-bar {
+      border-radius: var(--radius-box);
+      background-color: transparent;
+    }
+    .progress::-webkit-progress-value {
+      border-radius: var(--radius-box);
+      background-color: currentColor;
+    }
+    }
+
+  .progress-accent {
+      color: var(--color-accent);
+    }
+
+  .progress-error {
+      color: var(--color-error);
+    }
+
+  .progress-info {
+      color: var(--color-info);
+    }
+
+  .progress-neutral {
+      color: var(--color-neutral);
+    }
+
+  .progress-primary {
+      color: var(--color-primary);
+    }
+
+  .progress-secondary {
+      color: var(--color-secondary);
+    }
+
+  .progress-success {
+      color: var(--color-success);
+    }
+
+  .progress-warning {
+      color: var(--color-warning);
+    }
+}

package/dist/radio/radio.css

@@ -0,0 +1,152 @@
+@layer components {
+  .radio {
+      position: relative;
+      display: inline-block;
+      flex-shrink: 0;
+      cursor: pointer;
+      appearance: none;
+      border-radius: calc(infinity * 1px);
+      padding: calc(0.25rem * 1);
+      vertical-align: middle;
+      border: var(--border) solid var(--input-color, currentColor);
+      box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      width: var(--size);
+      height: var(--size);
+      color: var(--input-color, currentColor);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .radio {
+      border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
+    }
+    }
+
+  .radio:before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: calc(infinity * 1px);
+      --tw-content: "";
+      content: var(--tw-content);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  .radio:focus-visible {
+      outline: 2px solid currentColor;
+    }
+
+  .radio:checked,
+    .radio[aria-checked="true"] {
+      border-color: currentcolor;
+      background-color: var(--color-base-100);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .radio:checked,
+    .radio[aria-checked="true"] {
+      animation: radio 0.2s ease-out;
+    }
+    }
+
+  .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      background-color: currentcolor;
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  @media (forced-colors: active) {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-offset: calc(1px * -1);
+    }
+    }
+
+  @media print {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline: 0.25rem solid;
+      outline-offset: -1rem;
+    }
+    }
+
+  .radio:disabled {
+      cursor: not-allowed;
+      opacity: 20%;
+    }
+
+  .radio-lg {
+      padding: 0.3125rem;
+    }
+
+  .radio-lg:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .radio-md {
+      padding: 0.25rem;
+    }
+
+  .radio-md:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .radio-sm {
+      padding: 0.1875rem;
+    }
+
+  .radio-sm:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .radio-xl {
+      padding: 0.375rem;
+    }
+
+  .radio-xl:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .radio-xs {
+      padding: 0.125rem;
+    }
+
+  .radio-xs:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+
+  .radio-accent {
+      --input-color: var(--color-accent);
+    }
+
+  .radio-error {
+      --input-color: var(--color-error);
+    }
+
+  .radio-info {
+      --input-color: var(--color-info);
+    }
+
+  .radio-neutral {
+      --input-color: var(--color-neutral);
+    }
+
+  .radio-primary {
+      --input-color: var(--color-primary);
+    }
+
+  .radio-secondary {
+      --input-color: var(--color-secondary);
+    }
+
+  .radio-success {
+      --input-color: var(--color-success);
+    }
+
+  .radio-warning {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/radio-group/radio.css

@@ -0,0 +1,152 @@
+@layer components {
+  .radio {
+      position: relative;
+      display: inline-block;
+      flex-shrink: 0;
+      cursor: pointer;
+      appearance: none;
+      border-radius: calc(infinity * 1px);
+      padding: calc(0.25rem * 1);
+      vertical-align: middle;
+      border: var(--border) solid var(--input-color, currentColor);
+      box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      width: var(--size);
+      height: var(--size);
+      color: var(--input-color, currentColor);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .radio {
+      border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
+    }
+    }
+
+  .radio:before {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: calc(infinity * 1px);
+      --tw-content: "";
+      content: var(--tw-content);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  .radio:focus-visible {
+      outline: 2px solid currentColor;
+    }
+
+  .radio:checked,
+    .radio[aria-checked="true"] {
+      border-color: currentcolor;
+      background-color: var(--color-base-100);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .radio:checked,
+    .radio[aria-checked="true"] {
+      animation: radio 0.2s ease-out;
+    }
+    }
+
+  .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      background-color: currentcolor;
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  @media (forced-colors: active) {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-offset: calc(1px * -1);
+    }
+    }
+
+  @media print {
+    .radio:checked:before,
+    .radio[aria-checked="true"]:before {
+      outline: 0.25rem solid;
+      outline-offset: -1rem;
+    }
+    }
+
+  .radio:disabled {
+      cursor: not-allowed;
+      opacity: 20%;
+    }
+
+  .radio-lg {
+      padding: 0.3125rem;
+    }
+
+  .radio-lg:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .radio-md {
+      padding: 0.25rem;
+    }
+
+  .radio-md:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .radio-sm {
+      padding: 0.1875rem;
+    }
+
+  .radio-sm:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .radio-xl {
+      padding: 0.375rem;
+    }
+
+  .radio-xl:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .radio-xs {
+      padding: 0.125rem;
+    }
+
+  .radio-xs:is([type="radio"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+
+  .radio-accent {
+      --input-color: var(--color-accent);
+    }
+
+  .radio-error {
+      --input-color: var(--color-error);
+    }
+
+  .radio-info {
+      --input-color: var(--color-info);
+    }
+
+  .radio-neutral {
+      --input-color: var(--color-neutral);
+    }
+
+  .radio-primary {
+      --input-color: var(--color-primary);
+    }
+
+  .radio-secondary {
+      --input-color: var(--color-secondary);
+    }
+
+  .radio-success {
+      --input-color: var(--color-success);
+    }
+
+  .radio-warning {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/range/range.css

@@ -0,0 +1,174 @@
+@layer components {
+  .range {
+      appearance: none;
+      webkit-appearance: none;
+      --range-thumb: var(--color-base-100);
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+      --range-progress: currentColor;
+      --range-fill: 1;
+      --range-p: 0.25rem;
+      --range-bg: currentColor;
+      cursor: pointer;
+      overflow: hidden;
+      background-color: transparent;
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      --radius-selector-max: calc(
+        var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+        );
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      border: none;
+      height: var(--range-thumb-size);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range {
+      --range-bg: color-mix(in oklab, currentColor 10%, #0000);
+    }
+    }
+
+  [dir="rtl"] .range {
+      --range-dir: -1;
+    }
+
+  .range:focus {
+      outline: none;
+    }
+
+  .range:focus-visible {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+  .range::-webkit-slider-runnable-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+
+  @media (forced-colors: active) {
+    .range::-webkit-slider-runnable-track {
+      border: 1px solid;
+    }
+    }
+
+  @media (forced-colors: active) {
+    .range::-moz-range-track {
+      border: 1px solid;
+    }
+    }
+
+  .range::-webkit-slider-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: var(--range-thumb);
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      appearance: none;
+      webkit-appearance: none;
+      top: 50%;
+      color: var(--range-progress);
+      transform: translateY(-50%);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range::-webkit-slider-thumb {
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+    }
+
+  .range::-moz-range-track {
+      width: 100%;
+      background-color: var(--range-bg);
+      border-radius: var(--radius-selector);
+      height: calc(var(--range-thumb-size) * 0.5);
+    }
+
+  .range::-moz-range-thumb {
+      position: relative;
+      box-sizing: border-box;
+      border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
+      background-color: currentColor;
+      height: var(--range-thumb-size);
+      width: var(--range-thumb-size);
+      border: var(--range-p) solid;
+      top: 50%;
+      color: var(--range-progress);
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .range::-moz-range-thumb {
+      box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));
+    }
+    }
+
+  .range:disabled {
+      cursor: not-allowed;
+      opacity: 30%;
+    }
+
+  .range-accent {
+      color: var(--color-accent);
+      --range-thumb: var(--color-accent-content);
+    }
+
+  .range-error {
+      color: var(--color-error);
+      --range-thumb: var(--color-error-content);
+    }
+
+  .range-info {
+      color: var(--color-info);
+      --range-thumb: var(--color-info-content);
+    }
+
+  .range-neutral {
+      color: var(--color-neutral);
+      --range-thumb: var(--color-neutral-content);
+    }
+
+  .range-primary {
+      color: var(--color-primary);
+      --range-thumb: var(--color-primary-content);
+    }
+
+  .range-secondary {
+      color: var(--color-secondary);
+      --range-thumb: var(--color-secondary-content);
+    }
+
+  .range-success {
+      color: var(--color-success);
+      --range-thumb: var(--color-success-content);
+    }
+
+  .range-warning {
+      color: var(--color-warning);
+      --range-thumb: var(--color-warning-content);
+    }
+
+  .range-lg {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .range-md {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .range-sm {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .range-xl {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .range-xs {
+      --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+}