@pathscale/ui 0.0.162 → 0.0.163

package/dist/range-slider/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);
+    }
+}

package/dist/rating/rating.css

@@ -0,0 +1,106 @@
+@layer components {
+  .rating {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+  .rating input {
+      border: none;
+      appearance: none;
+    }
+
+  .rating :where(*) {
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 6);
+      border-radius: 0;
+      background-color: var(--color-base-content);
+      opacity: 20%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating :where(*) {
+      animation: rating 0.25s ease-out;
+    }
+    }
+
+  .rating :where(*):is(input) {
+      cursor: pointer;
+    }
+
+  .rating .rating-hidden {
+      width: calc(0.25rem * 2);
+      background-color: transparent;
+    }
+
+  .rating input[type="radio"]:checked {
+      background-image: none;
+    }
+
+  .rating *:checked,
+    .rating *[aria-checked="true"],
+    .rating *[aria-current="true"],
+    .rating *:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
+      opacity: 100%;
+    }
+
+  .rating *:focus-visible {
+      scale: 1.1;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating *:focus-visible {
+      transition: scale 0.2s ease-out;
+    }
+    }
+
+  .rating *:active:focus {
+      animation: none;
+      scale: 1.1;
+    }
+
+  .rating.rating-xs :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 4);
+      height: calc(0.25rem * 4);
+    }
+
+  .rating.rating-sm :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 5);
+      height: calc(0.25rem * 5);
+    }
+
+  .rating.rating-md :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 6);
+      height: calc(0.25rem * 6);
+    }
+
+  .rating.rating-lg :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 7);
+      height: calc(0.25rem * 7);
+    }
+
+  .rating.rating-xl :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 8);
+      height: calc(0.25rem * 8);
+    }
+
+  .rating-half.rating-xs *:not(.rating-hidden) {
+      width: calc(0.25rem * 2);
+    }
+
+  .rating-half.rating-sm *:not(.rating-hidden) {
+      width: calc(0.25rem * 2.5);
+    }
+
+  .rating-half.rating-md *:not(.rating-hidden) {
+      width: calc(0.25rem * 3);
+    }
+
+  .rating-half.rating-lg *:not(.rating-hidden) {
+      width: .875rem;
+    }
+
+  .rating-half.rating-xl *:not(.rating-hidden) {
+      width: calc(0.25rem * 4);
+    }
+}

package/dist/select/select.css

@@ -0,0 +1,351 @@
+@layer components {
+  .select {
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 1.5);
+      background-color: var(--color-base-100);
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: 0.875rem;
+      touch-action: manipulation;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
+      background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
+      background-size: 4px 4px, 4px 4px;
+      background-repeat: no-repeat;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      border-color: var(--input-color);
+      --input-color: var(--color-base-content);
+      --size: calc(var(--size-field, 0.25rem) * 10);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  [dir="rtl"] .select {
+      background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
+    }
+
+  [dir="rtl"] .select::picker(select),
+    [dir="rtl"] .select select::picker(select) {
+      translate: 0.5rem 0;
+    }
+
+  .select[multiple] {
+      height: auto;
+      overflow: auto;
+      padding-block: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 3);
+      background-image: none;
+    }
+
+  .select select {
+      margin-inline-start: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -7);
+      width: calc(100% + 2.75rem);
+      appearance: none;
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      height: calc(100% - calc(var(--border) * 2));
+      align-items: center;
+      background: inherit;
+      border-radius: inherit;
+      border-style: none;
+    }
+
+  .select select:focus,
+    .select select:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .select select:focus,
+    .select select:focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select select:not(:last-child) {
+      margin-inline-end: calc(0.25rem * -5.5);
+      background-image: none;
+    }
+
+  .select:focus,
+    .select:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:focus,
+    .select:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled]) > select[disabled] {
+      cursor: not-allowed;
+    }
+
+  @supports (appearance: base-select) {
+    .select,
+    .select select {
+      appearance: base-select;
+    }
+    }
+
+  @supports (appearance: base-select) {
+    .select::picker(select),
+    .select select::picker(select) {
+      appearance: base-select;
+    }
+    }
+
+  .select::picker(select),
+    .select select::picker(select) {
+      color: inherit;
+      max-height: min(24rem, 70dvh);
+      margin-inline: 0.5rem;
+      translate: -0.5rem 0;
+      border: var(--border) solid var(--color-base-200);
+      margin-block: calc(0.25rem * 2);
+      border-radius: var(--radius-box);
+      padding: calc(0.25rem * 2);
+      background-color: inherit;
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  .select::picker-icon,
+    .select select::picker-icon {
+      display: none;
+    }
+
+  .select optgroup,
+    .select select optgroup {
+      padding-top: 0.5em;
+    }
+
+  .select optgroup option:nth-child(1),
+    .select select optgroup option:nth-child(1) {
+      margin-top: 0.5em;
+    }
+
+  .select option,
+    .select select option {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      transition-property: color, background-color;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      white-space: normal;
+    }
+
+  .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select option:not(:disabled):active,
+    .select select option:not(:disabled):active {
+      background-color: var(--color-neutral);
+      color: var(--color-neutral-content);
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
+    }
+
+  .select-ghost {
+      background-color: transparent;
+      transition: background-color 0.2s;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .select-ghost:focus,
+    .select-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .select-lg {
+      --size: calc(var(--size-field, 0.25rem) * 12);
+      font-size: 1.125rem;
+    }
+
+  .select-lg option {
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-md {
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      font-size: 0.875rem;
+    }
+
+  .select-md option {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-sm {
+      --size: calc(var(--size-field, 0.25rem) * 8);
+      font-size: 0.75rem;
+    }
+
+  .select-sm option {
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-xl {
+      --size: calc(var(--size-field, 0.25rem) * 14);
+      font-size: 1.375rem;
+    }
+
+  .select-xl option {
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-xs {
+      --size: calc(var(--size-field, 0.25rem) * 6);
+      font-size: 0.6875rem;
+    }
+
+  .select-xs option {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-accent,
+    .select-accent:focus,
+    .select-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .select-error,
+    .select-error:focus,
+    .select-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .select-info,
+    .select-info:focus,
+    .select-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .select-neutral,
+    .select-neutral:focus,
+    .select-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .select-primary,
+    .select-primary:focus,
+    .select-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .select-secondary,
+    .select-secondary:focus,
+    .select-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .select-success,
+    .select-success:focus,
+    .select-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .select-warning,
+    .select-warning:focus,
+    .select-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/skeleton/skeleton.css

@@ -0,0 +1,22 @@
+@layer components {
+  .skeleton {
+      border-radius: var(--radius-box);
+      background-color: var(--color-base-300);
+      will-change: background-position;
+      background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
+      background-size: 200% auto;
+      background-position-x: -50%;
+    }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton {
+      transition-duration: 15s;
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .skeleton {
+      animation: skeleton 1.8s ease-in-out infinite;
+    }
+    }
+}