@pathscale/ui 0.0.161 → 0.0.163

package/dist/timeline/timeline.css

@@ -0,0 +1,286 @@
+@layer components {
+  .timeline {
+      position: relative;
+      display: flex;
+    }
+
+  .timeline > li {
+      position: relative;
+      display: grid;
+      flex-shrink: 0;
+      align-items: center;
+      grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) );
+      grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) );
+    }
+
+  .timeline > li > hr {
+      border: none;
+      width: 100%;
+    }
+
+  .timeline > li > hr:first-child {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+  .timeline > li > hr:last-child {
+      grid-column-start: 3;
+      grid-column-end: none;
+      grid-row-start: 2;
+      grid-row-end: auto;
+    }
+
+  @media print {
+    .timeline > li > hr {
+      border: 0.1px solid var(--color-base-300);
+    }
+    }
+
+  .timeline :where(hr) {
+      height: calc(0.25rem * 1);
+      background-color: var(--color-base-300);
+    }
+
+  .timeline:has(.timeline-middle hr):first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline:has(.timeline-middle hr):last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline:not(:has(.timeline-middle)) :first-child hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline:not(:has(.timeline-middle)) :last-child hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-end {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      margin: calc(0.25rem * 1);
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 2;
+      margin: calc(0.25rem * 1);
+      align-self: flex-end;
+      justify-self: center;
+    }
+
+  .timeline-horizontal {
+      flex-direction: row;
+    }
+
+  .timeline-horizontal > li {
+      align-items: center;
+    }
+
+  .timeline-horizontal > li > hr {
+      height: calc(0.25rem * 1);
+      width: 100%;
+    }
+
+  .timeline-horizontal > li > hr:first-child {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+  .timeline-horizontal > li > hr:last-child {
+      grid-column-start: 3;
+      grid-column-end: none;
+      grid-row-start: 2;
+      grid-row-end: auto;
+    }
+
+  .timeline-horizontal .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 2;
+      align-self: flex-end;
+      justify-self: center;
+    }
+
+  .timeline-horizontal .timeline-end {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-horizontal:has(.timeline-middle) > li > hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-horizontal:has(.timeline-middle) > li > hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline-horizontal:not(:has(.timeline-middle)) :first-child > hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline-horizontal:not(:has(.timeline-middle)) :last-child > hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical {
+      flex-direction: column;
+    }
+
+  .timeline-vertical > li {
+      justify-items: center;
+      --timeline-row-start: minmax(0, 1fr);
+      --timeline-row-end: minmax(0, 1fr);
+    }
+
+  .timeline-vertical > li > hr {
+      height: 100%;
+      width: calc(0.25rem * 1);
+    }
+
+  .timeline-vertical > li > hr:first-child {
+      grid-column-start: 2;
+      grid-row-start: 1;
+    }
+
+  .timeline-vertical > li > hr:last-child {
+      grid-column-start: 2;
+      grid-column-end: auto;
+      grid-row-start: 3;
+      grid-row-end: none;
+    }
+
+  .timeline-vertical .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 2;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-end;
+    }
+
+  .timeline-vertical .timeline-end {
+      grid-column-start: 3;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-start;
+    }
+
+  .timeline-vertical:has(.timeline-middle) > li > hr:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: var(--radius-selector);
+      border-bottom-left-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical:has(.timeline-middle) > li > hr:last-child {
+      border-top-left-radius: var(--radius-selector);
+      border-top-right-radius: var(--radius-selector);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+  .timeline-vertical:not(:has(.timeline-middle)) :first-child > hr:last-child {
+      border-top-left-radius: var(--radius-selector);
+      border-top-right-radius: var(--radius-selector);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+  .timeline-vertical:not(:has(.timeline-middle)) :last-child > hr:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: var(--radius-selector);
+      border-bottom-left-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical.timeline-snap-icon > li {
+      --timeline-col-start: minmax(0, 1fr);
+      --timeline-row-start: 0.5rem;
+    }
+
+  .timeline-compact {
+      --timeline-row-start: 0;
+    }
+
+  .timeline-compact .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-compact li:has(.timeline-start) .timeline-end {
+      grid-column-start: none;
+      grid-row-start: auto;
+    }
+
+  .timeline-compact.timeline-vertical > li {
+      --timeline-col-start: 0;
+    }
+
+  .timeline-compact.timeline-vertical .timeline-start {
+      grid-column-start: 3;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-start;
+    }
+
+  .timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end {
+      grid-column-start: auto;
+      grid-row-start: none;
+    }
+
+  .timeline-middle {
+      grid-column-start: 2;
+      grid-row-start: 2;
+    }
+
+  .timeline-snap-icon > li {
+      --timeline-col-start: 0.5rem;
+      --timeline-row-start: minmax(0, 1fr);
+    }
+}

package/dist/toast/toast.css

@@ -0,0 +1,58 @@
+@layer components {
+  .toast {
+      position: fixed;
+      inset-inline-start: auto;
+      inset-inline-end: calc(0.25rem * 4);
+      top: auto;
+      bottom: calc(0.25rem * 4);
+      display: flex;
+      flex-direction: column;
+      gap: calc(0.25rem * 2);
+      background-color: transparent;
+      translate: var(--toast-x, 0) var(--toast-y, 0);
+      width: max-content;
+      max-width: calc(100vw - 2rem);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .toast > * {
+      animation: toast 0.25s ease-out;
+    }
+    }
+
+  .toast-center {
+      inset-inline-start: calc(1/2 * 100%);
+      inset-inline-end: calc(1/2 * 100%);
+      --toast-x: -50%;
+    }
+
+  .toast-end {
+      inset-inline-start: auto;
+      inset-inline-end: calc(0.25rem * 4);
+      --toast-x: 0;
+    }
+
+  .toast-start {
+      inset-inline-start: calc(0.25rem * 4);
+      inset-inline-end: auto;
+      --toast-x: 0;
+    }
+
+  .toast-bottom {
+      top: auto;
+      bottom: calc(0.25rem * 4);
+      --toast-y: 0;
+    }
+
+  .toast-middle {
+      top: calc(1/2 * 100%);
+      bottom: auto;
+      --toast-y: -50%;
+    }
+
+  .toast-top {
+      top: calc(0.25rem * 4);
+      bottom: auto;
+      --toast-y: 0;
+    }
+}

package/dist/toggle/toggle.css

@@ -0,0 +1,234 @@
+@layer components {
+  .toggle {
+      border: var(--border) solid currentColor;
+      color: var(--input-color);
+      position: relative;
+      display: inline-grid;
+      flex-shrink: 0;
+      cursor: pointer;
+      appearance: none;
+      place-content: center;
+      vertical-align: middle;
+      webkit-user-select: none;
+      user-select: none;
+      grid-template-columns: 0fr 1fr 1fr;
+      --radius-selector-max: calc(
+        var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+        );
+      border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
+      padding: var(--toggle-p);
+      box-shadow: 0 1px currentColor inset;
+      transition: color 0.3s, grid-template-columns 0.2s;
+      --input-color: var(--color-base-content);
+      --toggle-p: calc(var(--size) * 0.125);
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
+      height: var(--size);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .toggle {
+      box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .toggle {
+      --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+    }
+    }
+
+  .toggle > * {
+      z-index: 1;
+      grid-column: span 1 / span 1;
+      grid-column-start: 2;
+      grid-row-start: 1;
+      height: 100%;
+      cursor: pointer;
+      appearance: none;
+      background-color: transparent;
+      padding: calc(0.25rem * 0.5);
+      transition: opacity 0.2s, rotate 0.4s;
+      border: none;
+    }
+
+  .toggle > *:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .toggle > *:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .toggle > *:nth-child(2) {
+      color: var(--color-base-100);
+      rotate: 0deg;
+    }
+
+  .toggle > *:nth-child(3) {
+      color: var(--color-base-100);
+      opacity: 0%;
+      rotate: -15deg;
+    }
+
+  .toggle:has(:checked) > :nth-child(2) {
+      opacity: 0%;
+      rotate: 15deg;
+    }
+
+  .toggle:has(:checked) > :nth-child(3) {
+      opacity: 100%;
+      rotate: 0deg;
+    }
+
+  .toggle:before {
+      position: relative;
+      inset-inline-start: calc(0.25rem * 0);
+      grid-column-start: 2;
+      grid-row-start: 1;
+      aspect-ratio: 1 / 1;
+      height: 100%;
+      width: 100%;
+      border-radius: var(--radius-selector);
+      background-color: currentcolor;
+      translate: 0;
+      --tw-content: "";
+      content: var(--tw-content);
+      transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
+      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;
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .toggle:before {
+      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);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .toggle:before {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-offset: calc(1px * -1);
+    }
+    }
+
+  @media print {
+    .toggle:before {
+      outline: 0.25rem solid;
+      outline-offset: -1rem;
+    }
+    }
+
+  .toggle:focus-visible,
+    .toggle:has(:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+  .toggle:checked,
+    .toggle[aria-checked="true"],
+    .toggle:has(> input:checked) {
+      grid-template-columns: 1fr 1fr 0fr;
+      background-color: var(--color-base-100);
+      --input-color: var(--color-base-content);
+    }
+
+  .toggle:checked:before,
+    .toggle[aria-checked="true"]:before,
+    .toggle:has(> input:checked):before {
+      background-color: currentcolor;
+    }
+
+  @starting-style {
+    .toggle:checked:before,
+    .toggle[aria-checked="true"]:before,
+    .toggle:has(> input:checked):before {
+      opacity: 0;
+    }
+    }
+
+  .toggle:indeterminate {
+      grid-template-columns: 0.5fr 1fr 0.5fr;
+    }
+
+  .toggle:disabled {
+      cursor: not-allowed;
+      opacity: 30%;
+    }
+
+  .toggle:disabled:before {
+      background-color: transparent;
+      border: var(--border) solid currentColor;
+    }
+
+  .toggle-accent:checked,
+    .toggle-accent[aria-checked="true"] {
+      --input-color: var(--color-accent);
+    }
+
+  .toggle-error:checked,
+    .toggle-error[aria-checked="true"] {
+      --input-color: var(--color-error);
+    }
+
+  .toggle-info:checked,
+    .toggle-info[aria-checked="true"] {
+      --input-color: var(--color-info);
+    }
+
+  .toggle-lg:is([type="checkbox"]),
+    .toggle-lg:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+
+  .toggle-md:is([type="checkbox"]),
+    .toggle-md:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+
+  .toggle-neutral:checked,
+    .toggle-neutral[aria-checked="true"] {
+      --input-color: var(--color-neutral);
+    }
+
+  .toggle-primary:checked,
+    .toggle-primary[aria-checked="true"] {
+      --input-color: var(--color-primary);
+    }
+
+  .toggle-secondary:checked,
+    .toggle-secondary[aria-checked="true"] {
+      --input-color: var(--color-secondary);
+    }
+
+  .toggle-sm:is([type="checkbox"]),
+    .toggle-sm:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+
+  .toggle-success:checked,
+    .toggle-success[aria-checked="true"] {
+      --input-color: var(--color-success);
+    }
+
+  .toggle-warning:checked,
+    .toggle-warning[aria-checked="true"] {
+      --input-color: var(--color-warning);
+    }
+
+  .toggle-xl:is([type="checkbox"]),
+    .toggle-xl:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+
+  .toggle-xs:is([type="checkbox"]),
+    .toggle-xs:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+}