@umituz/web-dashboard 6.0.0 → 6.2.0

package/src/styles/dashboard.css

@@ -1,4 +1,3 @@
-
 @import "@umituz/web-design-system/styles.css";
 :root {
   --udb-font-size-xs: 11px;
@@ -1688,3 +1687,821 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+.udb-onb,
+.udb-onb *,
+.udb-onb *::before,
+.udb-onb *::after {
+  box-sizing: border-box;
+}
+.udb-onb {
+  font-family: var(--font-sans);
+  color: var(--color-foreground);
+  background: var(--color-background);
+  font-size: var(--udb-font-size-md);
+  line-height: 1.5;
+}
+.udb-onb h1,
+.udb-onb h2,
+.udb-onb h3,
+.udb-onb p,
+.udb-onb ul,
+.udb-onb ol,
+.udb-onb figure,
+.udb-onb blockquote,
+.udb-onb pre {
+  margin: 0;
+}
+.udb-onb ul,
+.udb-onb ol {
+  list-style: none;
+  padding: 0;
+}
+.udb-onb button,
+.udb-onb input,
+.udb-onb select,
+.udb-onb textarea {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}
+.udb-onb button {
+  padding: 0;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+.udb-onb cite {
+  font-style: normal;
+}
+.udb-onb img,
+.udb-onb svg {
+  display: block;
+  max-width: 100%;
+}
+.udb-onb svg {
+  flex-shrink: 0;
+}
+
+.udb-onb-screen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-6);
+  width: 100%;
+  max-width: 42rem;
+  min-height: 100vh;
+  margin-inline: auto;
+  padding: var(--udb-space-6) var(--udb-space-4) var(--udb-space-8);
+}
+.udb-onb-screen__header,
+.udb-onb-screen__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+}
+.udb-onb-screen__main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--udb-space-6);
+}
+@media (min-width: 640px) {
+  .udb-onb-screen {
+    padding-inline: var(--udb-space-6);
+  }
+}
+
+.udb-onb-title {
+  font-size: var(--udb-font-size-2xl);
+  font-weight: 600;
+}
+.udb-onb-title--display {
+  font-size: var(--udb-font-size-3xl);
+  font-weight: 700;
+}
+@media (min-width: 640px) {
+  .udb-onb-title {
+    font-size: var(--udb-font-size-3xl);
+  }
+  .udb-onb-title--display {
+    font-size: var(--udb-font-size-4xl);
+  }
+}
+.udb-onb-lead {
+  font-size: var(--udb-font-size-lg);
+  color: var(--color-muted-foreground);
+}
+
+.udb-onb-question {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-6);
+  width: 100%;
+}
+.udb-onb-question__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-2);
+}
+.udb-onb-question__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+}
+
+.udb-onb-choice {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--udb-space-2);
+  padding: var(--udb-space-3);
+  border: 2px solid;
+  border-radius: var(--radius-lg);
+  font-size: var(--udb-font-size-lg);
+  font-weight: 600;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+.udb-onb-choice:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.udb-onb-choice:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.udb-onb-choice--no {
+  border-color: var(--color-destructive);
+  color: var(--color-destructive);
+}
+.udb-onb-choice--no:hover:not(:disabled) {
+  background: var(--color-destructive);
+  color: var(--color-white);
+}
+.udb-onb-choice--yes {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+.udb-onb-choice--yes:hover:not(:disabled) {
+  background: var(--color-success);
+  color: var(--color-white);
+}
+.udb-onb-link {
+  font-size: var(--udb-font-size-sm);
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+  text-underline-offset: 4px;
+}
+.udb-onb-link:hover:not(:disabled) {
+  color: var(--color-foreground);
+  text-decoration: underline;
+}
+.udb-onb-link:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.udb-onb-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-2);
+  width: 100%;
+}
+.udb-onb-progress__meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-muted-foreground);
+}
+
+.udb-onb-icon {
+  width: 20px;
+  height: 20px;
+}
+.udb-onb-icon--xs {
+  width: 14px;
+  height: 14px;
+}
+.udb-onb-icon--sm {
+  width: 16px;
+  height: 16px;
+}
+.udb-onb-icon--lg {
+  width: 40px;
+  height: 40px;
+}
+.udb-onb-icon--xl {
+  width: 48px;
+  height: 48px;
+}
+
+.udb-onb-swipe {
+  position: relative;
+  height: 18rem;
+  width: 100%;
+  user-select: none;
+}
+.udb-onb-swipe:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.udb-onb-swipe__card {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--udb-space-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+  box-shadow: var(--shadow-sm);
+  text-align: center;
+  cursor: grab;
+}
+.udb-onb-swipe__card:active {
+  cursor: grabbing;
+}
+.udb-onb-swipe__category {
+  margin-bottom: var(--udb-space-4);
+  font-size: var(--udb-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--color-primary);
+}
+.udb-onb-swipe__text {
+  font-size: var(--udb-font-size-xl);
+  font-weight: 500;
+}
+.udb-onb-swipe__hint {
+  margin-top: var(--udb-space-6);
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-muted-foreground);
+}
+.udb-onb-swipe__stamp {
+  position: absolute;
+  top: var(--udb-space-4);
+  padding: var(--udb-space-1) var(--udb-space-3);
+  border: 2px solid;
+  border-radius: var(--radius-md);
+  font-size: var(--udb-font-size-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  pointer-events: none;
+}
+.udb-onb-swipe__stamp--no {
+  left: var(--udb-space-4);
+  border-color: var(--color-destructive);
+  color: var(--color-destructive);
+}
+.udb-onb-swipe__stamp--yes {
+  right: var(--udb-space-4);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.udb-onb-stage {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--udb-space-6);
+  text-align: center;
+}
+.udb-onb-stage--wide {
+  gap: var(--udb-space-8);
+}
+.udb-onb-hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xl);
+  background: var(--color-primary-soft, var(--color-muted));
+  color: var(--color-primary);
+}
+.udb-onb-hero--lg {
+  width: 80px;
+  height: 80px;
+}
+.udb-onb-hero--xl {
+  width: 96px;
+  height: 96px;
+}
+
+.udb-onb-welcome__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+}
+.udb-onb-welcome__title {
+  font-size: var(--udb-font-size-4xl);
+  font-weight: 700;
+}
+.udb-onb-welcome__subtitle {
+  font-size: var(--udb-font-size-lg);
+}
+.udb-onb-welcome__highlight {
+  font-size: var(--udb-font-size-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--color-primary);
+}
+
+.udb-onb-proof {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--udb-space-8);
+}
+.udb-onb-proof__stage {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.udb-onb-proof__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--udb-space-4);
+}
+.udb-onb-proof__nav {
+  display: flex;
+  gap: var(--udb-space-2);
+}
+.udb-onb-quote {
+  display: flex;
+  max-width: 36rem;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--udb-space-4);
+  padding: var(--udb-space-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+  text-align: center;
+}
+.udb-onb-quote__stars {
+  display: flex;
+  gap: var(--udb-space-1);
+}
+.udb-onb-quote__star {
+  width: 20px;
+  height: 20px;
+  color: var(--color-border);
+}
+.udb-onb-quote__star--filled {
+  color: var(--color-warning);
+  fill: currentColor;
+}
+.udb-onb-quote__content {
+  font-size: var(--udb-font-size-lg);
+}
+.udb-onb-quote__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--udb-space-1);
+}
+.udb-onb-quote__avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--udb-radius-pill);
+  object-fit: cover;
+}
+.udb-onb-quote__cite {
+  font-size: var(--udb-font-size-sm);
+  font-weight: 600;
+}
+.udb-onb-quote__role {
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-muted-foreground);
+}
+.udb-onb-dots {
+  display: flex;
+  gap: 6px;
+}
+.udb-onb-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-border);
+  transition: width 0.2s, background-color 0.2s;
+}
+.udb-onb-dot--active {
+  width: var(--udb-space-6);
+  background: var(--color-primary);
+}
+
+.udb-onb-solutions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+}
+.udb-onb-solution {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+}
+.udb-onb-solution__icon {
+  margin-top: 2px;
+  color: var(--color-success);
+}
+.udb-onb-solution__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--udb-space-1);
+}
+.udb-onb-solution__stat {
+  font-size: var(--udb-font-size-sm);
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.udb-onb-compare {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--udb-space-4);
+}
+.udb-onb-compare__col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-5);
+  border: 1px solid;
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+}
+.udb-onb-compare__col--pos {
+  border-color: var(--color-success);
+}
+.udb-onb-compare__col--neg {
+  border-color: var(--color-destructive);
+}
+.udb-onb-compare__heading {
+  font-size: var(--udb-font-size-lg);
+  font-weight: 600;
+}
+.udb-onb-compare__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--udb-space-2);
+  font-size: var(--udb-font-size-sm);
+}
+.udb-onb-compare__icon {
+  margin-top: 2px;
+}
+.udb-onb-compare__icon--pos {
+  color: var(--color-success);
+}
+.udb-onb-compare__icon--neg {
+  color: var(--color-destructive);
+}
+@media (min-width: 640px) {
+  .udb-onb-compare {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.udb-onb-prefs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-5);
+}
+.udb-onb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-2);
+}
+.udb-onb-field__label {
+  font-size: var(--udb-font-size-sm);
+  font-weight: 600;
+}
+.udb-onb-select {
+  width: 100%;
+  padding: var(--udb-space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-sm);
+}
+.udb-onb-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--udb-space-2);
+}
+.udb-onb-chip {
+  padding: var(--udb-space-1) var(--udb-space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-sm);
+  transition: border-color 0.15s, background-color 0.15s;
+}
+.udb-onb-chip:hover {
+  border-color: var(--color-primary);
+}
+.udb-onb-chip--on {
+  border-color: transparent;
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+.udb-onb-switch {
+  width: 44px;
+  height: 24px;
+  padding: 2px;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-border);
+  transition: background-color 0.15s;
+}
+.udb-onb-switch--on {
+  background: var(--color-primary);
+}
+.udb-onb-switch__thumb {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-white);
+  transition: transform 0.15s;
+}
+.udb-onb-switch--on .udb-onb-switch__thumb {
+  transform: translateX(20px);
+}
+.udb-onb-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-1);
+}
+.udb-onb-slider input[type='range'] {
+  width: 100%;
+  accent-color: var(--color-primary);
+}
+.udb-onb-slider__scale {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--udb-font-size-xs);
+  color: var(--color-muted-foreground);
+}
+
+.udb-onb-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udb-space-2);
+}
+.udb-onb-benefit {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--udb-space-2);
+  padding: var(--udb-space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-sm);
+}
+.udb-onb-benefit__dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  flex-shrink: 0;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-primary);
+}
+.udb-onb-error {
+  padding: var(--udb-space-3);
+  border: 1px solid var(--color-destructive);
+  border-radius: var(--radius-md);
+  background: var(--color-destructive-soft, var(--color-muted));
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-destructive);
+}
+
+.udb-onb-steps {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  flex-direction: column;
+  gap: var(--udb-space-3);
+  margin-inline: auto;
+}
+.udb-onb-step {
+  display: flex;
+  align-items: center;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-sm);
+  text-align: left;
+}
+.udb-onb-step--done {
+  border-color: var(--color-success);
+  background: var(--color-success-soft, var(--color-muted));
+}
+.udb-onb-step--active {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft, var(--color-muted));
+}
+.udb-onb-step__badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-border);
+  color: var(--color-muted-foreground);
+  font-size: var(--udb-font-size-xs);
+}
+.udb-onb-step--done .udb-onb-step__badge {
+  background: var(--color-success);
+  color: var(--color-primary-foreground);
+}
+.udb-onb-step--active .udb-onb-step__badge {
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+.udb-onb-step__pulse {
+  width: 8px;
+  height: 8px;
+  margin-left: auto;
+  border-radius: var(--udb-radius-pill);
+  background: var(--color-primary);
+  animation: udb-onb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes udb-onb-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.udb-onb-demo {
+  padding: var(--udb-space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-muted);
+}
+
+.udb-onb-result {
+  width: 100%;
+  max-width: 28rem;
+  padding: var(--udb-space-6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+  text-align: left;
+}
+.udb-onb-result__pre {
+  overflow-x: auto;
+  white-space: pre-wrap;
+  font-size: var(--udb-font-size-sm);
+}
+.udb-onb-share {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--udb-space-1);
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-muted-foreground);
+}
+
+.udb-onb-price {
+  padding: var(--udb-space-6);
+  border: 2px solid var(--color-primary);
+  border-radius: var(--radius-lg);
+  background: var(--color-primary-soft, var(--color-muted));
+  text-align: center;
+}
+.udb-onb-price__amount {
+  font-size: var(--udb-font-size-3xl);
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.udb-onb-price__terms {
+  margin-top: var(--udb-space-1);
+  font-size: var(--udb-font-size-sm);
+  color: var(--color-muted-foreground);
+}
+.udb-onb-feature {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--udb-space-3);
+  padding: var(--udb-space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-card);
+  font-size: var(--udb-font-size-sm);
+}
+.udb-onb-feature--hl {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft, var(--color-muted));
+}
+.udb-onb-feature__icon {
+  margin-top: 2px;
+  color: var(--color-primary);
+}
+.udb-onb-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--udb-space-1);
+  font-size: var(--udb-font-size-xs);
+  color: var(--color-muted-foreground);
+}
+
+.udb-onb-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.udb-onb-errorpage {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--udb-space-4);
+  margin-inline: auto;
+  padding: var(--udb-space-6);
+  text-align: center;
+}
+.udb-onb-errorpage__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-lg);
+  background: var(--color-destructive-soft, var(--color-muted));
+  color: var(--color-destructive);
+}
+.udb-onb-question__head--center {
+  align-items: center;
+  text-align: center;
+}
+.udb-onb-palettes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--udb-space-2);
+}
+@media (min-width: 640px) {
+  .udb-onb-palettes {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+.udb-onb-palette {
+  padding: var(--udb-space-2);
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  text-align: left;
+}
+.udb-onb-palette:hover {
+  border-color: var(--color-border);
+}
+.udb-onb-palette--active {
+  border-color: var(--color-primary);
+}
+.udb-onb-palette__strip {
+  display: flex;
+  height: 48px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+.udb-onb-palette__strip--lg {
+  height: 128px;
+}
+.udb-onb-palette__chip {
+  flex: 1;
+}
+.udb-onb-palette__name {
+  display: block;
+  margin-top: var(--udb-space-1);
+  font-size: var(--udb-font-size-xs);
+  font-weight: 500;
+}
+.udb-onb-palette-preview {
+  padding: var(--udb-space-6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-card);
+}
+.udb-onb-palette-preview p {
+  margin-top: var(--udb-space-3);
+  font-size: var(--udb-font-size-sm);
+}