@mesob/ui 0.4.7 → 0.5.2

package/src/styles/style-lyra.css

@@ -1160,6 +1160,23 @@
     @apply text-muted-foreground ml-auto text-xs tabular-nums;
   }
 
+  /* MARK: NProgress */
+  .cn-nprogress-root {
+    @apply bg-transparent opacity-0 transition-opacity duration-100;
+  }
+
+  .cn-nprogress-root[data-mounted] {
+    @apply opacity-100;
+  }
+
+  .cn-nprogress-bar {
+    @apply bg-primary relative transition-transform duration-100 ease-linear;
+  }
+
+  .cn-nprogress-peg {
+    @apply absolute top-0 right-0 h-full w-12 translate-x-[1px] rotate-0 shadow-[0_0_6px_hsl(var(--primary))];
+  }
+
   /* MARK: Radio Group */
   .cn-radio-group {
     @apply grid gap-2;
@@ -2342,3 +2359,36 @@
     @apply hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground rounded-none;
   }
 }
+
+/* MARK: AI Trigger */
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring-stroke {
+  animation: ai-fill-ring-stroke 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-stroke {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -68;
+  }
+}

package/src/styles/style-maia.css

@@ -1206,6 +1206,23 @@
     @apply text-muted-foreground ml-auto text-sm tabular-nums;
   }
 
+  /* MARK: NProgress */
+  .cn-nprogress-root {
+    @apply bg-transparent opacity-0 transition-opacity duration-200;
+  }
+
+  .cn-nprogress-root[data-mounted] {
+    @apply opacity-100;
+  }
+
+  .cn-nprogress-bar {
+    @apply bg-primary relative rounded-full transition-transform duration-200 ease-out;
+  }
+
+  .cn-nprogress-peg {
+    @apply absolute top-0 right-0 h-full w-24 -translate-y-[1px] translate-x-[4px] rotate-[3deg] rounded-full shadow-[0_0_12px_hsl(var(--primary)),0_0_8px_hsl(var(--primary))];
+  }
+
   /* MARK: Radio Group */
   .cn-radio-group {
     @apply grid gap-3;
@@ -2379,3 +2396,36 @@
     @apply hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground rounded-[var(--radius-sm)];
   }
 }
+
+/* MARK: AI Trigger */
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring-stroke {
+  animation: ai-fill-ring-stroke 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-stroke {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -68;
+  }
+}

package/src/styles/style-mira.css

@@ -1206,6 +1206,23 @@
     @apply text-muted-foreground ml-auto text-xs/relaxed tabular-nums;
   }
 
+  /* MARK: NProgress */
+  .cn-nprogress-root {
+    @apply bg-transparent opacity-0 transition-opacity duration-150;
+  }
+
+  .cn-nprogress-root[data-mounted] {
+    @apply opacity-100;
+  }
+
+  .cn-nprogress-bar {
+    @apply bg-primary relative rounded-md transition-transform duration-150 ease-out;
+  }
+
+  .cn-nprogress-peg {
+    @apply absolute top-0 right-0 h-full w-14 translate-x-[2px] rotate-[2deg] rounded-md shadow-[0_0_7px_hsl(var(--primary)),0_0_4px_hsl(var(--primary))];
+  }
+
   /* MARK: Radio Group */
   .cn-radio-group {
     @apply grid gap-3;
@@ -2381,3 +2398,36 @@
     @apply hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground rounded-[var(--radius-sm)];
   }
 }
+
+/* MARK: AI Trigger */
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring-stroke {
+  animation: ai-fill-ring-stroke 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-stroke {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -68;
+  }
+}

package/src/styles/style-nova.css

@@ -1309,6 +1309,23 @@
     @apply text-muted-foreground ml-auto text-sm tabular-nums;
   }
 
+  /* MARK: NProgress */
+  .cn-nprogress-root {
+    @apply bg-transparent opacity-0 transition-opacity duration-150;
+  }
+
+  .cn-nprogress-root[data-mounted] {
+    @apply opacity-100;
+  }
+
+  .cn-nprogress-bar {
+    @apply bg-primary relative transition-transform duration-150 ease-out;
+  }
+
+  .cn-nprogress-peg {
+    @apply absolute top-0 right-0 h-full w-16 translate-x-[2px] rotate-[2deg] shadow-[0_0_8px_hsl(var(--primary)),0_0_4px_hsl(var(--primary))];
+  }
+
   /* MARK: Radio Group */
   .cn-radio-group {
     @apply grid gap-2;
@@ -2482,3 +2499,36 @@
     @apply hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground rounded-[var(--radius-sm)];
   }
 }
+
+/* MARK: AI Trigger */
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring-stroke {
+  animation: ai-fill-ring-stroke 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-stroke {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -68;
+  }
+}

package/src/styles/style-vega.css

@@ -1305,6 +1305,23 @@
     @apply text-muted-foreground ml-auto text-sm tabular-nums;
   }
 
+  /* MARK: NProgress */
+  .cn-nprogress-root {
+    @apply bg-transparent opacity-0 transition-opacity duration-200;
+  }
+
+  .cn-nprogress-root[data-mounted] {
+    @apply opacity-100;
+  }
+
+  .cn-nprogress-bar {
+    @apply bg-primary relative transition-transform duration-200 ease-out;
+  }
+
+  .cn-nprogress-peg {
+    @apply absolute top-0 right-0 h-full w-20 -translate-y-[1px] translate-x-[3px] rotate-[3deg] shadow-[0_0_10px_hsl(var(--primary)),0_0_5px_hsl(var(--primary))];
+  }
+
   /* MARK: Radio Group */
   .cn-radio-group {
     @apply grid gap-3;
@@ -2478,3 +2495,36 @@
     @apply hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground rounded-[var(--radius-sm)];
   }
 }
+
+/* MARK: AI Trigger */
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring-stroke {
+  animation: ai-fill-ring-stroke 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-stroke {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -68;
+  }
+}

package/src/styles/themes.css

@@ -14,3 +14,67 @@
     transition-duration: 0.01ms;
   }
 }
+
+/* MARK: AI Trigger (global; outside theme layers for consistent priority) */
+.ai-fill-ring {
+  --ai-fill-ring-width: 2px;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.ai-fill-ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: var(--ai-fill-ring-width);
+  box-sizing: border-box;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 0%,
+    transparent 34%,
+    #c084fc 45%,
+    #60a5fa 50%,
+    transparent 58%,
+    transparent 100%
+  );
+  background-size: 220% 100%;
+  background-position: 130% 0;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.ai-fill-button:hover .ai-fill-ring {
+  animation: ai-fill-ring-visibility 2400ms linear 1 forwards;
+}
+
+.ai-fill-button:hover .ai-fill-ring::before {
+  animation: ai-fill-ring-sweep 1200ms linear 2;
+}
+
+@keyframes ai-fill-ring-visibility {
+  0% {
+    opacity: 0;
+  }
+  8% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ai-fill-ring-sweep {
+  from {
+    background-position: 130% 0;
+  }
+  to {
+    background-position: -130% 0;
+  }
+}