@pathscale/ui 0.0.162 → 0.0.163

package/dist/stack/stack.css

@@ -0,0 +1,90 @@
+@layer components {
+  .stack {
+      display: inline-grid;
+      grid-template-columns: 3px 4px 1fr 4px 3px;
+      grid-template-rows: 3px 4px 1fr 4px 3px;
+    }
+
+  .stack > * {
+      height: 100%;
+      width: 100%;
+    }
+
+  .stack > *:nth-child(n + 2) {
+      width: 100%;
+      opacity: 70%;
+    }
+
+  .stack > *:nth-child(2) {
+      z-index: 2;
+      opacity: 90%;
+    }
+
+  .stack > *:nth-child(1) {
+      z-index: 3;
+      width: 100%;
+    }
+
+  .stack > *,
+    .stack.stack-bottom > * {
+      grid-column: 3 / 4;
+      grid-row: 3 / 6;
+    }
+
+  .stack > *:nth-child(2),
+    .stack.stack-bottom > *:nth-child(2) {
+      grid-column: 2 / 5;
+      grid-row: 2 / 5;
+    }
+
+  .stack > *:nth-child(1),
+    .stack.stack-bottom > *:nth-child(1) {
+      grid-column: 1 / 6;
+      grid-row: 1 / 4;
+    }
+
+  .stack.stack-top > * {
+      grid-column: 3 / 4;
+      grid-row: 1 / 4;
+    }
+
+  .stack.stack-top > *:nth-child(2) {
+      grid-column: 2 / 5;
+      grid-row: 2 / 5;
+    }
+
+  .stack.stack-top > *:nth-child(1) {
+      grid-column: 1 / 6;
+      grid-row: 3 / 6;
+    }
+
+  .stack.stack-start > * {
+      grid-column: 1 / 4;
+      grid-row: 3 / 4;
+    }
+
+  .stack.stack-start > *:nth-child(2) {
+      grid-column: 2 / 5;
+      grid-row: 2 / 5;
+    }
+
+  .stack.stack-start > *:nth-child(1) {
+      grid-column: 3 / 6;
+      grid-row: 1 / 6;
+    }
+
+  .stack.stack-end > * {
+      grid-column: 3 / 6;
+      grid-row: 3 / 4;
+    }
+
+  .stack.stack-end > *:nth-child(2) {
+      grid-column: 2 / 5;
+      grid-row: 2 / 5;
+    }
+
+  .stack.stack-end > *:nth-child(1) {
+      grid-column: 1 / 4;
+      grid-row: 1 / 6;
+    }
+}

package/dist/stats/stat.css

@@ -0,0 +1,67 @@
+@layer components {
+  .stat-figure {
+      grid-column-start: 2;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+      place-self: center;
+      justify-self: flex-end;
+    }
+
+  .stat-value {
+      grid-column-start: 1;
+      white-space: nowrap;
+      font-size: 2rem;
+      font-weight: 800;
+    }
+
+  .stat-desc {
+      grid-column-start: 1;
+      white-space: nowrap;
+      color: var(--color-base-content);
+      font-size: 0.75rem;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat-desc {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+    }
+
+  .stat-title {
+      grid-column-start: 1;
+      white-space: nowrap;
+      color: var(--color-base-content);
+      font-size: 0.75rem;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat-title {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+    }
+
+  .stat-actions {
+      grid-column-start: 1;
+      white-space: nowrap;
+    }
+
+  .stat {
+      display: inline-grid;
+      width: 100%;
+      column-gap: calc(0.25rem * 4);
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 4);
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+  .stat:not(:last-child) {
+      border-inline-end: var(--border) dashed currentColor;
+      border-block-end: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat:not(:last-child) {
+      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+    }
+    }
+}

package/dist/steps/step.css

@@ -0,0 +1,179 @@
+@layer components {
+  .steps {
+      display: inline-grid;
+      grid-auto-flow: column;
+      overflow: hidden;
+      overflow-x: auto;
+      counter-reset: step;
+      grid-auto-columns: 1fr;
+    }
+
+  .steps .step {
+      display: grid;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-columns: auto;
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      grid-template-rows: 40px 1fr;
+      place-items: center;
+      text-align: center;
+      min-width: 4rem;
+      --step-bg: var(--color-base-300);
+      --step-fg: var(--color-base-content);
+    }
+
+  .steps .step:before {
+      top: calc(0.25rem * 0);
+      grid-column-start: 1;
+      grid-row-start: 1;
+      height: calc(0.25rem * 2);
+      width: 100%;
+      border: 1px solid;
+      color: var(--step-bg);
+      background-color: var(--step-bg);
+      content: "";
+      margin-inline-start: -100%;
+    }
+
+  .steps .step > .step-icon,
+    .steps .step:not(:has(.step-icon)):after {
+      --tw-content: counter(step);
+      content: var(--tw-content);
+      counter-increment: step;
+      z-index: 1;
+      color: var(--step-fg);
+      background-color: var(--step-bg);
+      border: 1px solid var(--step-bg);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      height: calc(0.25rem * 8);
+      width: calc(0.25rem * 8);
+      place-items: center;
+      place-self: center;
+      border-radius: calc(infinity * 1px);
+    }
+
+  .steps .step:first-child:before {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+
+  .steps .step[data-content]:after {
+      --tw-content: attr(data-content);
+      content: var(--tw-content);
+    }
+
+  .steps .step-neutral + .step-neutral:before,
+    .steps .step-neutral:after,
+    .steps .step-neutral > .step-icon {
+      --step-bg: var(--color-neutral);
+      --step-fg: var(--color-neutral-content);
+    }
+
+  .steps .step-primary + .step-primary:before,
+    .steps .step-primary:after,
+    .steps .step-primary > .step-icon {
+      --step-bg: var(--color-primary);
+      --step-fg: var(--color-primary-content);
+    }
+
+  .steps .step-secondary + .step-secondary:before,
+    .steps .step-secondary:after,
+    .steps .step-secondary > .step-icon {
+      --step-bg: var(--color-secondary);
+      --step-fg: var(--color-secondary-content);
+    }
+
+  .steps .step-accent + .step-accent:before,
+    .steps .step-accent:after,
+    .steps .step-accent > .step-icon {
+      --step-bg: var(--color-accent);
+      --step-fg: var(--color-accent-content);
+    }
+
+  .steps .step-info + .step-info:before,
+    .steps .step-info:after,
+    .steps .step-info > .step-icon {
+      --step-bg: var(--color-info);
+      --step-fg: var(--color-info-content);
+    }
+
+  .steps .step-success + .step-success:before,
+    .steps .step-success:after,
+    .steps .step-success > .step-icon {
+      --step-bg: var(--color-success);
+      --step-fg: var(--color-success-content);
+    }
+
+  .steps .step-warning + .step-warning:before,
+    .steps .step-warning:after,
+    .steps .step-warning > .step-icon {
+      --step-bg: var(--color-warning);
+      --step-fg: var(--color-warning-content);
+    }
+
+  .steps .step-error + .step-error:before,
+    .steps .step-error:after,
+    .steps .step-error > .step-icon {
+      --step-bg: var(--color-error);
+      --step-fg: var(--color-error-content);
+    }
+
+  .steps-vertical {
+      grid-auto-rows: 1fr;
+      grid-auto-flow: row;
+    }
+
+  .steps-vertical .step {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-columns: 40px 1fr;
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+      grid-template-rows: auto;
+      gap: 0.5rem;
+      min-height: 4rem;
+      justify-items: start;
+    }
+
+  .steps-vertical .step:before {
+      height: 100%;
+      width: calc(0.25rem * 2);
+      translate: -50% -50%;
+      margin-inline-start: 50%;
+    }
+
+  [dir="rtl"] .steps-vertical .step:before {
+      translate: 50% -50%;
+    }
+
+  .steps-horizontal {
+      grid-auto-columns: 1fr;
+      display: inline-grid;
+      grid-auto-flow: column;
+      overflow: hidden;
+      overflow-x: auto;
+    }
+
+  .steps-horizontal .step {
+      display: grid;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-columns: auto;
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      grid-template-rows: 40px 1fr;
+      place-items: center;
+      text-align: center;
+      min-width: 4rem;
+    }
+
+  .steps-horizontal .step:before {
+      height: calc(0.25rem * 2);
+      width: 100%;
+      translate: 0;
+      margin-inline-start: -100%;
+    }
+
+  [dir="rtl"] .steps-horizontal .step:before {
+      translate: 0;
+    }
+}

package/dist/stores/index.js

@@ -0,0 +1 @@
+export * from "./toastStore.js";

package/dist/stores/toastStore.js

@@ -0,0 +1,64 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const [toasts, setToasts] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+let toastCounter = 0;
+const toastTimers = new Map();
+const clearToastTimer = (id)=>{
+    const timer = toastTimers.get(id);
+    if (!timer) return;
+    clearTimeout(timer);
+    toastTimers.delete(id);
+};
+const scheduleDismiss = (id, duration)=>{
+    if (duration <= 0) return;
+    clearToastTimer(id);
+    const timer = setTimeout(()=>{
+        toastStore.dismissToast(id);
+    }, duration);
+    toastTimers.set(id, timer);
+};
+const toastStore = {
+    toasts,
+    addToast: (message, type = "info", durationOrOptions)=>{
+        const hasOptions = void 0 !== durationOrOptions;
+        const duration = "number" == typeof durationOrOptions ? durationOrOptions : durationOrOptions?.duration ?? ("error" !== type || hasOptions ? 8000 : 0);
+        const persist = "number" == typeof durationOrOptions ? false : durationOrOptions?.persist ?? ("error" === type && !hasOptions);
+        const id = `toast-${++toastCounter}`;
+        const toast = {
+            id,
+            message,
+            type,
+            timestamp: Date.now(),
+            duration,
+            persist
+        };
+        setToasts((prev)=>[
+                ...prev,
+                toast
+            ]);
+        if (!persist) scheduleDismiss(id, duration);
+        return id;
+    },
+    dismissToast: (id)=>{
+        clearToastTimer(id);
+        setToasts((prev)=>prev.map((toast)=>toast.id !== id || toast.isExiting ? toast : {
+                    ...toast,
+                    isExiting: true
+                }));
+    },
+    removeToast: (id)=>{
+        clearToastTimer(id);
+        setToasts((prev)=>prev.filter((toast)=>toast.id !== id));
+    },
+    clearAll: ()=>{
+        toastTimers.forEach((timer)=>clearTimeout(timer));
+        toastTimers.clear();
+        setToasts([]);
+    },
+    showError: (message)=>toastStore.addToast(message, "error", {
+            persist: true
+        }),
+    showSuccess: (message)=>toastStore.addToast(message, "success", 6000),
+    showWarning: (message)=>toastStore.addToast(message, "warning", 8000),
+    showInfo: (message)=>toastStore.addToast(message, "info", 6000)
+};
+export { toastStore };

package/dist/swap/swap.css

@@ -0,0 +1,92 @@
+@layer components {
+  .swap {
+      position: relative;
+      display: inline-grid;
+      cursor: pointer;
+      place-content: center;
+      vertical-align: middle;
+      webkit-user-select: none;
+      user-select: none;
+    }
+
+  .swap input {
+      appearance: none;
+      border: none;
+    }
+
+  .swap > * {
+      grid-column-start: 1;
+      grid-row-start: 1;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .swap > * {
+      transition-property: transform, rotate, opacity;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    }
+
+  .swap .swap-on,
+    .swap .swap-indeterminate,
+    .swap input:indeterminate ~ .swap-on {
+      opacity: 0%;
+    }
+
+  .swap input:is(:checked, :indeterminate) ~ .swap-off {
+      opacity: 0%;
+    }
+
+  .swap input:checked ~ .swap-on,
+    .swap input:indeterminate ~ .swap-indeterminate {
+      opacity: 100%;
+      backface-visibility: visible;
+    }
+
+  .swap-rotate .swap-on,
+    .swap-rotate input:indeterminate ~ .swap-on {
+      rotate: 45deg;
+    }
+
+  .swap-rotate input:is(:checked, :indeterminate) ~ .swap-on,
+    .swap-rotate.swap-active .swap-on {
+      rotate: 0deg;
+    }
+
+  .swap-rotate input:is(:checked, :indeterminate) ~ .swap-off,
+    .swap-rotate.swap-active .swap-off {
+      rotate: calc(45deg * -1);
+    }
+
+  .swap-flip {
+      transform-style: preserve-3d;
+      perspective: 20rem;
+    }
+
+  .swap-flip .swap-on,
+    .swap-flip .swap-indeterminate,
+    .swap-flip input:indeterminate ~ .swap-on {
+      transform: rotateY(180deg);
+      backface-visibility: hidden;
+    }
+
+  .swap-flip input:is(:checked, :indeterminate) ~ .swap-on,
+    .swap-flip.swap-active .swap-on {
+      transform: rotateY(0deg);
+    }
+
+  .swap-flip input:is(:checked, :indeterminate) ~ .swap-off,
+    .swap-flip.swap-active .swap-off {
+      transform: rotateY(-180deg);
+      backface-visibility: hidden;
+      opacity: 100%;
+    }
+
+  .swap-active .swap-off {
+      opacity: 0%;
+    }
+
+  .swap-active .swap-on {
+      opacity: 100%;
+    }
+}

package/dist/table/table.css

@@ -0,0 +1,148 @@
+@layer components {
+  .table {
+      font-size: 0.875rem;
+      position: relative;
+      width: 100%;
+      border-collapse: separate;
+      --tw-border-spacing-x: calc(0.25rem * 0);
+      --tw-border-spacing-y: calc(0.25rem * 0);
+      border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+      border-radius: var(--radius-box);
+      text-align: left;
+    }
+
+  .table:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      text-align: right;
+    }
+
+  @media (hover: hover) {
+    .table tr.row-hover:hover,
+    .table tr.row-hover:nth-child(even):hover {
+      background-color: var(--color-base-200);
+    }
+    }
+
+  .table :where(th, td) {
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 3);
+      vertical-align: middle;
+    }
+
+  .table :where(thead, tfoot) {
+      white-space: nowrap;
+      color: var(--color-base-content);
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table :where(thead, tfoot) {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+    }
+
+  .table :where(tfoot tr:first-child :is(td, th)) {
+      border-top: var(--border) solid var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table :where(tfoot tr:first-child :is(td, th)) {
+      border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
+    }
+    }
+
+  .table :where(.table-pin-rows thead tr) {
+      position: sticky;
+      top: calc(0.25rem * 0);
+      z-index: 1;
+      background-color: var(--color-base-100);
+    }
+
+  .table :where(.table-pin-rows tfoot tr) {
+      position: sticky;
+      bottom: calc(0.25rem * 0);
+      z-index: 1;
+      background-color: var(--color-base-100);
+    }
+
+  .table :where(.table-pin-cols tr th) {
+      position: sticky;
+      right: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      background-color: var(--color-base-100);
+    }
+
+  .table :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
+      border-bottom: var(--border) solid var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
+      border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
+    }
+    }
+
+  .table {
+      display: table;
+    }
+
+  .table-zebra tbody tr:where(:nth-child(even)) {
+      background-color: var(--color-base-200);
+    }
+
+  .table-zebra tbody tr:where(:nth-child(even)) :where(.table-pin-cols tr th) {
+      background-color: var(--color-base-200);
+    }
+
+  @media (hover: hover) {
+    .table-zebra tbody tr.row-hover:hover,
+    .table-zebra tbody tr.row-hover:where(:nth-child(even)):hover {
+      background-color: var(--color-base-300);
+    }
+    }
+
+  .table-lg :not(thead, tfoot) tr {
+      font-size: 1.125rem;
+    }
+
+  .table-lg :where(th, td) {
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 4);
+    }
+
+  .table-md :not(thead, tfoot) tr {
+      font-size: 0.875rem;
+    }
+
+  .table-md :where(th, td) {
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 3);
+    }
+
+  .table-sm :not(thead, tfoot) tr {
+      font-size: 0.75rem;
+    }
+
+  .table-sm :where(th, td) {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .table-xl :not(thead, tfoot) tr {
+      font-size: 1.375rem;
+    }
+
+  .table-xl :where(th, td) {
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 5);
+    }
+
+  .table-xs :not(thead, tfoot) tr {
+      font-size: 0.6875rem;
+    }
+
+  .table-xs :where(th, td) {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+}