Migrating new components

dist/sigpro.css

@@ -1500,6 +1500,42 @@
       }
     }
   }
+  .radial-progress {
+    @layer daisyui.l1.l2.l3 {
+      position: relative;
+      display: inline-grid;
+      height: var(--size);
+      width: var(--size);
+      place-content: center;
+      border-radius: calc(infinity * 1px);
+      background-color: transparent;
+      vertical-align: middle;
+      box-sizing: content-box;
+      --value: 0;
+      --size: 5rem;
+      --thickness: calc(var(--size) / 10);
+      --radialprogress: calc(var(--value) * 1%);
+      transition: --radialprogress 0.3s linear;
+      &:before {
+        position: absolute;
+        inset: calc(0.25rem * 0);
+        border-radius: calc(infinity * 1px);
+        content: "";
+        background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
+        webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) );
+        mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) );
+      }
+      &:after {
+        position: absolute;
+        border-radius: calc(infinity * 1px);
+        background-color: currentcolor;
+        transition: transform 0.3s linear;
+        content: "";
+        inset: calc(50% - var(--thickness) / 2);
+        transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
+      }
+    }
+  }
   .list {
     @layer daisyui.l1.l2.l3 {
       display: flex;
@@ -2134,6 +2170,34 @@
       }
     }
   }
+  .chat-bubble {
+    @layer daisyui.l1.l2.l3 {
+      position: relative;
+      display: block;
+      width: fit-content;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-300);
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 2);
+      color: var(--color-base-content);
+      grid-row-end: 3;
+      min-height: 2rem;
+      min-width: 2.5rem;
+      max-width: 90%;
+      &:before {
+        position: absolute;
+        bottom: calc(0.25rem * 0);
+        height: calc(0.25rem * 3);
+        width: calc(0.25rem * 3);
+        background-color: inherit;
+        content: "";
+        mask-repeat: no-repeat;
+        mask-image: var(--mask-chat);
+        mask-position: 0px -1px;
+        mask-size: 0.8125rem;
+      }
+    }
+  }
   .select {
     @layer daisyui.l1.l2.l3 {
       border: var(--border) solid #0000;
@@ -3689,6 +3753,12 @@
       font-size: 0.75rem;
     }
   }
+  .stat-actions {
+    @layer daisyui.l1.l2.l3 {
+      grid-column-start: 1;
+      white-space: nowrap;
+    }
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -3698,6 +3768,28 @@
   .col-start-3 {
     grid-column-start: 3;
   }
+  .chat-image {
+    @layer daisyui.l1.l2.l3 {
+      grid-row: span 2 / span 2;
+      align-self: flex-end;
+    }
+  }
+  .chat-footer {
+    @layer daisyui.l1.l2.l3 {
+      grid-row-start: 3;
+      display: flex;
+      gap: calc(0.25rem * 1);
+      font-size: 0.6875rem;
+    }
+  }
+  .chat-header {
+    @layer daisyui.l1.l2.l3 {
+      grid-row-start: 1;
+      display: flex;
+      gap: calc(0.25rem * 1);
+      font-size: 0.6875rem;
+    }
+  }
   .row-start-2 {
     grid-row-start: 2;
   }
@@ -3973,6 +4065,14 @@
   .ml-6 {
     margin-left: calc(var(--spacing) * 6);
   }
+  .carousel-item {
+    @layer daisyui.l1.l2.l3 {
+      box-sizing: content-box;
+      display: flex;
+      flex: none;
+      scroll-snap-align: start;
+    }
+  }
   .status {
     @layer daisyui.l1.l2.l3 {
       display: inline-block;
@@ -4293,6 +4393,78 @@
     mask-size: 100% 100%;
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
   }
+  .kbd {
+    box-shadow: none;
+    @layer daisyui.l1.l2.l3 {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-200);
+      vertical-align: middle;
+      padding-inline: 0.5em;
+      border: var(--border) solid var(--color-base-content);
+      @supports (color: color-mix(in lab, red, red)) {
+        border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+      }
+      border-bottom: calc(var(--border) + 1px) solid var(--color-base-content);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+      }
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+      height: var(--size);
+      min-width: var(--size);
+    }
+  }
+  .text-rotate {
+    height: 1lh;
+    @layer daisyui.l1.l2.l3 {
+      display: inline-block;
+      overflow: hidden;
+      vertical-align: bottom;
+      white-space: nowrap;
+      transition-property: none;
+      --duration: var(--tw-duration);
+      > * {
+        display: grid;
+        justify-items: start;
+        height: calc(var(--items, 1) * 100%);
+        &:has(*:nth-child(2)) {
+          --items: 2;
+          animation: rotator var(--duration, 10s) linear(0 0% 49%, 0.5 50% 99%, 1 100% 100%) infinite;
+        }
+        &:has(*:nth-child(3)) {
+          --items: 3;
+          animation: rotator var(--duration, 10s) linear(0 0% 32%, 0.333333 33% 65%, 0.666666 66% 99%, 1 100% 100%) infinite;
+        }
+        &:has(*:nth-child(4)) {
+          --items: 4;
+          animation: rotator var(--duration, 10s) linear(0 0% 24%, 0.25 25% 49%, 0.5 50% 74%, 0.75 75% 99%, 1 100% 100%) infinite;
+        }
+        &:has(*:nth-child(5)) {
+          --items: 5;
+          animation: rotator var(--duration, 10s) linear(0 0% 19%, 0.2 20% 39%, 0.4 40% 59%, 0.6 60% 79%, 0.8 80% 99%, 1 100% 100%) infinite;
+        }
+        &:has(*:nth-child(6)) {
+          --items: 6;
+          animation: rotator var(--duration, 10s) linear( 0 0% 15%, 0.16666 16% 32%, 0.333333 33% 49%, 0.5 50% 65%, 0.666666 66% 82%, 0.833333 83% 99%, 1 100% 100% ) infinite;
+        }
+        > * {
+          align-content: baseline;
+          clip-path: inset(0.5px 0px 0.5px 0px);
+          &:nth-child(1) {
+            translate: var(--first-item-position);
+          }
+        }
+      }
+      &:hover {
+        > * {
+          animation-play-state: paused;
+        }
+      }
+    }
+  }
   .tabs {
     @layer daisyui.l1.l2.l3 {
       display: flex;
@@ -4396,6 +4568,20 @@
       }
     }
   }
+  .carousel {
+    @layer daisyui.l1.l2.l3 {
+      display: inline-flex;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
   .alert {
     border-width: var(--border);
     border-color: var(--alert-border-color, var(--color-base-200));
@@ -4438,6 +4624,23 @@
       grid-auto-rows: max-content;
     }
   }
+  .chat {
+    @layer daisyui.l1.l2.l3 {
+      display: grid;
+      grid-auto-rows: min-content;
+      column-gap: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1);
+      --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
+    }
+  }
+  .card-actions {
+    @layer daisyui.l1.l2.l3 {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      gap: calc(0.25rem * 2);
+    }
+  }
   .card-title {
     @layer daisyui.l1.l2.l3 {
       display: flex;
@@ -4557,6 +4760,9 @@
   .h-3\.5 {
     height: calc(var(--spacing) * 3.5);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -4792,6 +4998,22 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .skeleton {
+    @layer daisyui.l1.l2.l3 {
+      border-radius: var(--radius-box);
+      background-color: var(--color-base-300);
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 15s;
+      }
+      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: no-preference) {
+        animation: skeleton 1.8s ease-in-out infinite;
+      }
+    }
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -4804,6 +5026,32 @@
   .list-none {
     list-style-type: none;
   }
+  .stats-horizontal {
+    @layer daisyui.l1.l2 {
+      grid-auto-flow: column;
+      overflow-x: auto;
+      .stat:not(:last-child) {
+        border-inline-end: var(--border) dashed currentColor;
+        @supports (color: color-mix(in lab, red, red)) {
+          border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+        }
+        border-block-end: none;
+      }
+    }
+  }
+  .stats-vertical {
+    @layer daisyui.l1.l2 {
+      grid-auto-flow: row;
+      overflow-y: auto;
+      .stat:not(:last-child) {
+        border-inline-end: none;
+        border-block-end: var(--border) dashed currentColor;
+        @supports (color: color-mix(in lab, red, red)) {
+          border-block-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+        }
+      }
+    }
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }