@tomny-dev/uzi 0.1.0

package/dist/index.css

@@ -0,0 +1,813 @@
+/* src/components/button/button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: inherit;
+  font-weight: 600;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    opacity 0.15s,
+    border-color 0.15s,
+    color 0.15s,
+    background 0.15s;
+  white-space: nowrap;
+}
+.button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.size-sm {
+  font-size: 0.82rem;
+  padding: 6px 14px;
+}
+.size-md {
+  font-size: 0.95rem;
+  padding: 10px 22px;
+}
+.size-lg {
+  font-size: 1rem;
+  padding: 12px 28px;
+}
+.variant-primary {
+  background: var(--ts-btn-primary-bg, var(--accent, #22d3ee));
+  color: var(--ts-btn-primary-text, #0f172a);
+  border: 1px solid transparent;
+}
+.variant-primary:hover:not(:disabled) {
+  opacity: 0.88;
+}
+.variant-secondary {
+  background: var(--ts-btn-secondary-bg, rgba(255, 255, 255, 0.06));
+  color: var(--ts-btn-secondary-text, var(--text, #e2e8f0));
+  border: 1px solid var(--ts-btn-secondary-border, var(--border, #1f2937));
+}
+.variant-secondary:hover:not(:disabled) {
+  background: var(--ts-btn-secondary-hover-bg, rgba(255, 255, 255, 0.1));
+}
+.variant-outline {
+  background: transparent;
+  color: var(--ts-btn-outline-text, var(--text, #e2e8f0));
+  border: 1px solid var(--ts-btn-outline-border, var(--border, #1f2937));
+}
+.variant-outline:hover:not(:disabled) {
+  border-color: var(--ts-btn-outline-hover-border, var(--accent, #22d3ee));
+  color: var(--ts-btn-outline-hover-text, var(--accent, #22d3ee));
+}
+.variant-ghost {
+  background: transparent;
+  color: var(--ts-btn-ghost-text, var(--muted, #94a3b8));
+  border: 1px solid transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.variant-ghost:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text, #e2e8f0);
+}
+
+/* src/components/card/card.module.css */
+.card {
+  position: relative;
+  overflow: visible;
+  border-radius: var(--ts-card-radius, 12px);
+  border: 1px solid var(--ts-card-border, var(--border, #1f2937));
+  background: var(--ts-card-bg, var(--panel, #111827));
+  color: var(--ts-card-fg, var(--text, #e2e8f0));
+  box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));
+  padding: var(--ts-card-padding, 16px);
+  transition:
+    transform 140ms ease,
+    box-shadow 140ms ease,
+    border-color 140ms ease,
+    background-color 140ms ease;
+}
+.tone-default {
+  --ts-card-bg: var(--panel, #111827);
+  --ts-card-border: var(--border, #1f2937);
+  --ts-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
+}
+.tone-muted {
+  --ts-card-bg: var(--ts-card-muted-bg, rgba(255, 255, 255, 0.02));
+  --ts-card-border: var(--ts-card-muted-border, rgba(255, 255, 255, 0.06));
+  --ts-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
+}
+.tone-contrast {
+  --ts-card-bg: var(--ts-card-contrast-bg, #0b1224);
+  --ts-card-border: var(--ts-card-contrast-border, rgba(255, 255, 255, 0.1));
+  --ts-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
+}
+.interactive {
+  cursor: default;
+}
+.interactive:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
+  border-color: var(--ts-card-hover-border, rgba(34, 211, 238, 0.4));
+}
+.interactive:focus-within {
+  outline: 2px solid var(--ts-card-hover-border, rgba(34, 211, 238, 0.45));
+  outline-offset: 2px;
+}
+.padding-none {
+  --ts-card-padding: 0;
+}
+.padding-sm {
+  --ts-card-padding: 10px;
+}
+.padding-md {
+  --ts-card-padding: 16px;
+}
+.padding-lg {
+  --ts-card-padding: 20px;
+}
+
+/* src/components/pill/pill.module.css */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--ts-pill-border, var(--border, #1f2937));
+  background: var(--ts-pill-bg, rgba(255, 255, 255, 0.04));
+  color: var(--ts-pill-fg, var(--muted, #94a3b8));
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+.size-sm {
+  padding: 3px 8px;
+  font-size: 11px;
+}
+.size-md {
+  padding: 4px 10px;
+}
+.tone-neutral {
+  background: var(--ts-pill-bg, rgba(255, 255, 255, 0.04));
+  border-color: var(--ts-pill-border, var(--border, #1f2937));
+  color: var(--ts-pill-fg, var(--muted, #94a3b8));
+}
+.tone-success {
+  color: #22c55e;
+  border-color: rgba(34, 197, 94, 0.45);
+  background: rgba(34, 197, 94, 0.12);
+}
+.tone-warning {
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.45);
+  background: rgba(245, 158, 11, 0.12);
+}
+.tone-info {
+  color: #22d3ee;
+  border-color: rgba(34, 211, 238, 0.5);
+  background: rgba(34, 211, 238, 0.12);
+}
+.tone-danger {
+  color: #f87171;
+  border-color: rgba(248, 113, 113, 0.45);
+  background: rgba(248, 113, 113, 0.12);
+}
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+}
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* src/components/modal/modal.module.css */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  z-index: 100;
+}
+.modal {
+  background: #0f172a;
+  border: 1px solid var(--border, #1f2937);
+  border-radius: 14px;
+  padding: 24px;
+  width: min(500px, 100%);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.size-sm {
+  width: min(380px, 100%);
+}
+.size-md {
+  width: min(500px, 100%);
+}
+.size-lg {
+  width: min(640px, 100%);
+}
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.titles {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.title {
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--text, #e2e8f0);
+  line-height: 1.3;
+}
+.subtitle {
+  font-size: 13px;
+  color: var(--muted, #94a3b8);
+  line-height: 1.4;
+}
+.closeButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--muted, #94a3b8);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  padding: 0;
+}
+.closeButton:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--text, #e2e8f0);
+}
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.footer {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+/* src/components/toast/toast.module.css */
+.stack {
+  position: fixed;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+.topRight {
+  top: 16px;
+  right: 16px;
+  align-items: flex-end;
+}
+.topLeft {
+  top: 16px;
+  left: 16px;
+  align-items: flex-start;
+}
+.topCenter {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.bottomRight {
+  bottom: 16px;
+  right: 16px;
+  align-items: flex-end;
+}
+.bottomLeft {
+  bottom: 16px;
+  left: 16px;
+  align-items: flex-start;
+}
+.bottomCenter {
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 280px;
+  max-width: min(420px, calc(100vw - 32px));
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--toast-border, #1f2937);
+  background: var(--toast-bg, #111827);
+  color: var(--toast-text, #e2e8f0);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  animation: toastSlideIn 180ms ease-out;
+}
+.toast.exit {
+  animation: toastSlideOut 160ms ease-in forwards;
+}
+.icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+.body {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+.message {
+  word-break: break-word;
+  font-size: 14px;
+  line-height: 1.4;
+}
+.actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.actionButton {
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+  border: 1px solid var(--toast-action-border, rgba(0, 0, 0, 0.2));
+  background: var(--toast-action-bg, rgba(0, 0, 0, 0.1));
+  color: var(--toast-text, #e2e8f0);
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.actionButton:hover {
+  background: var(--toast-button-bg, rgba(0, 0, 0, 0.15));
+}
+.closeButton {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: -2px -4px -2px 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--toast-text, #e2e8f0);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity 120ms ease, background 120ms ease;
+}
+.closeButton:hover {
+  opacity: 1;
+  background: var(--toast-button-bg, rgba(0, 0, 0, 0.1));
+}
+@keyframes toastSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes toastSlideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+/* src/components/dropdown/dropdown.module.css */
+.wrapper {
+  position: relative;
+  display: inline-block;
+}
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px 6px 14px;
+  background: var(--ts-dropdown-bg, var(--panel, #111827));
+  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  border-radius: 8px;
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 0.15s;
+  user-select: none;
+}
+.trigger:hover {
+  border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+}
+.trigger-active {
+  border-color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+  color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+}
+.chevron {
+  width: 10px;
+  height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s;
+  color: var(--muted, #94a3b8);
+  flex-shrink: 0;
+}
+.chevron-open {
+  transform: rotate(180deg);
+}
+.menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 100%;
+  background: var(--ts-dropdown-bg, var(--panel, #111827));
+  border: 1px solid var(--ts-dropdown-border, var(--border, #1f2937));
+  border-radius: 10px;
+  padding: 4px;
+  z-index: 50;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  animation: dropdownFadeIn 0.1s ease;
+}
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.option {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--muted, #94a3b8);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+}
+.option:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--ts-dropdown-text, var(--text, #e2e8f0));
+}
+.option-selected {
+  color: var(--ts-dropdown-accent, var(--accent, #22d3ee));
+  background: rgba(34, 211, 238, 0.08);
+}
+
+/* src/components/app-shell/app-shell.module.css */
+.shell {
+  display: grid;
+  grid-template-rows: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top)) 1fr;
+  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;
+  min-height: 100vh;
+  min-height: 100dvh;
+  transition: grid-template-columns 200ms ease;
+}
+.shell.sidebarOpen {
+  grid-template-columns: var(--app-shell-sidebar-width, 240px) 1fr;
+}
+.shell.sidebarCollapsed {
+  grid-template-columns: 0 1fr;
+}
+.topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--app-shell-topbar-height, 64px) + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) 16px 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(17, 24, 39, 0.8);
+  backdrop-filter: blur(8px);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  gap: 12px;
+}
+.topbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+.topbarStart {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.topbarRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex-shrink: 0;
+}
+.topbarRight > * {
+  min-width: 0;
+}
+.brand {
+  font-size: 26px;
+  color: var(--text);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hamburger {
+  background: transparent;
+  border: none;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.hamburger:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+.hamburger:focus,
+.hamburger:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.hamburger svg {
+  width: 28px;
+  height: 28px;
+}
+.sidebar {
+  border-right: 1px solid var(--border);
+  background: #152036;
+  padding: 24px;
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+.shell.sidebarCollapsed .sidebar {
+  transform: translateX(-110%);
+  opacity: 0;
+  pointer-events: none;
+}
+.main {
+  overflow-y: auto;
+  padding: 24px;
+  padding-bottom: 96px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+.main > * {
+  width: 100%;
+  max-width: 1200px;
+  min-width: 0;
+}
+.backdrop {
+  display: none;
+}
+@media (max-width: 960px) {
+  .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 14;
+  }
+  .shell {
+    --app-shell-topbar-height: 56px;
+    grid-template-columns: 1fr;
+    grid-template-rows: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top)) 1fr;
+  }
+  .shell.sidebarOpen,
+  .shell.sidebarCollapsed {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    display: block;
+    position: fixed;
+    top: calc(var(--app-shell-topbar-height, 56px) + env(safe-area-inset-top));
+    left: 0;
+    bottom: 0;
+    width: var(--app-shell-sidebar-width, 240px);
+    max-width: 80vw;
+    background: #152036;
+    padding: 16px 12px;
+    transform: translateX(-105%);
+    z-index: 15;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
+  }
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  .topbar {
+    padding-left: max(12px, env(safe-area-inset-left));
+    padding-right: max(12px, env(safe-area-inset-right));
+    gap: 10px;
+  }
+  .topbarLeft {
+    gap: 10px;
+    flex: 1;
+  }
+  .topbarStart {
+    min-width: 0;
+  }
+  .topbarRight {
+    gap: 6px;
+  }
+  .brand {
+    font-size: 24px;
+    max-width: 50vw;
+  }
+  .hamburger {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+  }
+  .hamburger svg {
+    width: 24px;
+    height: 24px;
+  }
+  .main {
+    padding: 16px;
+    padding-bottom: 96px;
+  }
+}
+@media (max-width: 640px) {
+  .topbar {
+    gap: 8px;
+  }
+  .brand {
+    font-size: 22px;
+    max-width: 34vw;
+  }
+  .topbarRight {
+    max-width: 44vw;
+  }
+  .main {
+    padding: 12px 10px;
+    padding-bottom: 88px;
+  }
+}
+@media (max-width: 480px) {
+  .brand {
+    font-size: 20px;
+    max-width: 30vw;
+  }
+}
+
+/* src/components/sidebar-nav/sidebar-nav.module.css */
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+}
+.item {
+  color: var(--text, #e2e8f0);
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 10px 12px 10px 10px;
+  border-radius: 10px;
+  text-decoration: none;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+  box-sizing: border-box;
+  white-space: nowrap;
+  line-height: 1.2;
+  transition: background 120ms ease, color 120ms ease;
+}
+.item:focus,
+.item:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.item:hover {
+  background: rgba(29, 43, 70, 0.55);
+}
+.item.active {
+  background: rgba(29, 43, 70, 0.85);
+  color: var(--text, #e2e8f0);
+  font-weight: 700;
+}
+.icon {
+  width: 18px;
+  height: 18px;
+  color: var(--muted, #94a3b8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 18px;
+  vertical-align: middle;
+}
+.icon svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  stroke: currentColor;
+}
+.item.active .icon {
+  color: var(--accent, #22d3ee);
+}
+.label {
+  flex: 1;
+  min-width: 0;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border, #1f2937);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted, #94a3b8);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+@media (max-width: 960px) {
+  .nav {
+    gap: 6px;
+  }
+  .item {
+    padding: 9px 10px 9px 8px;
+    border-radius: 9px;
+    font-size: 14px;
+    gap: 6px;
+  }
+  .icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+  }
+  .icon svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+@media (max-width: 480px) {
+  .item {
+    padding: 8px 9px 8px 7px;
+    font-size: 13px;
+  }
+}
+/*# sourceMappingURL=index.css.map */