juxscript 1.1.131 → 1.1.133

package/lib/styles/shadcn.css

@@ -0,0 +1,1106 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+  * {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+/* Tabs */
+
+.jux-tabs-list {
+  display: inline-flex;
+  height: 40px; /* h-10 */
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem; /* rounded-md */
+  background-color: #f4f4f5; /* bg-muted */
+  padding: 0.25rem; /* p-1 */
+  color: #71717a; /* text-muted-foreground */
+  border: none;
+}
+
+.jux-tabs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.125rem; /* rounded-sm */
+  padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  color: #71717a;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+  user-select: none;
+}
+
+/* Focus visible state mimicking ring-offset-background focus-visible:ring-2 ... */
+.jux-tabs-button:focus-visible {
+  outline: 2px solid #18181b; /* ring-ring */
+  outline-offset: 2px;
+}
+
+.jux-tabs-button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.jux-tabs-button-active {
+  background-color: #ffffff; /* bg-background */
+  color: #09090b; /* text-foreground */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
+}
+
+/* Content Panel */
+.jux-tabs-panel {
+  margin-top: 0.5rem; /* mt-2 */
+  border-radius: 0.375rem;
+  border: 1px solid #e4e4e7;
+  padding: 1.5rem;
+  /* ring-offset-background equivalent if focused */
+}
+.jux-tabs-panel:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 2px;
+}
+
+/* Modal Overlay */
+.jux-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8); /* bg-black/80 */
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Modal Container */
+.jux-modal {
+  position: relative;
+  background-color: #ffffff; /* bg-background */
+  border: 1px solid #e4e4e7; /* border */
+  border-radius: 0.5rem; /* rounded-lg */
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* lg:shadow-lg */
+  width: 100%;
+  max-width: 32rem; /* lg:max-w-lg default */
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem; /* p-6 */
+}
+
+.jux-modal-small { max-width: 24rem; }
+.jux-modal-medium { max-width: 32rem; }
+.jux-modal-large { max-width: 48rem; }
+
+/* Header */
+.jux-modal-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0;
+  text-align: left;
+}
+
+.jux-modal-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #09090b;
+  margin-top: 0.125rem;
+}
+
+.jux-modal-header-title {
+  flex: 1;
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  line-height: 1.2;
+  color: #09090b; /* text-foreground */
+}
+
+/* Body / Content */
+.jux-modal-content {
+  padding: 0;
+  font-size: 0.875rem; /* text-sm */
+  color: #71717a; /* text-muted-foreground */
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Input Fields */
+.jux-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.jux-input-label {
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  color: #09090b;
+  line-height: 1;
+}
+
+.jux-input-container {
+  position: relative;
+  width: 100%;
+}
+
+.jux-input-element {
+  display: flex;
+  height: 2.5rem; /* h-10 */
+  width: 100%;
+  border-radius: 0.375rem; /* rounded-md */
+  border: 1px solid #e4e4e7; /* border-input */
+  background-color: #ffffff; /* bg-background */
+  padding: 0.5rem 0.75rem; /* px-3 py-2 */
+  font-size: 0.875rem; /* text-sm */
+  color: #09090b;
+  outline: none;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+}
+
+.jux-input-element::placeholder {
+  color: #71717a; /* text-muted-foreground */
+}
+
+.jux-input-element:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-color: #18181b; /* focus-visible:ring-ring */
+  box-shadow: 0 0 0 2px #18181b, 0 0 0 4px rgba(24, 24, 27, 0.1);
+}
+
+.jux-input-element:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jux-input-error {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #ef4444; /* text-destructive */
+}
+
+/* Footer with Actions */
+.jux-modal-footer {
+  padding: 0;
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem; /* space-x-2 */
+  flex-wrap: wrap;
+}
+
+/* Modal Action Buttons */
+.jux-modal-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem; /* rounded-md */
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  height: 2.5rem; /* h-10 */
+  padding: 0 1rem; /* px-4 py-2 */
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+/* Ghost variant */
+.jux-modal-action-ghost {
+  background-color: transparent;
+  color: #09090b;
+  border: none;
+}
+.jux-modal-action-ghost:hover {
+  background-color: #f4f4f5;
+  color: #18181b;
+}
+
+/* Secondary/Outline variant */
+.jux-modal-action-secondary {
+  border: 1px solid #e4e4e7; /* border-input */
+  background-color: #ffffff; /* bg-background */
+  color: #09090b;
+}
+.jux-modal-action-secondary:hover {
+  background-color: #f4f4f5; /* hover:bg-accent */
+  color: #18181b;
+}
+
+/* Primary variant */
+.jux-modal-action-primary {
+  background-color: #18181b; /* bg-primary */
+  color: #fafafa; /* text-primary-foreground */
+  border: none;
+}
+.jux-modal-action-primary:hover {
+  background-color: #27272a; /* hover:bg-primary/90 */
+}
+
+/* Destructive variant */
+.jux-modal-action-destructive {
+  background-color: #ef4444; /* bg-destructive */
+  color: #ffffff;
+  border: none;
+}
+.jux-modal-action-destructive:hover {
+  background-color: #dc2626; /* hover:bg-destructive/90 */
+}
+
+/* Close Button (X) */
+.jux-modal-close {
+  position: absolute;
+  top: 1rem; /* top-4 */
+  right: 1rem; /* right-4 */
+  border-radius: 0.125rem; /* rounded-sm */
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #71717a;
+  padding: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.jux-modal-close:hover {
+  opacity: 1;
+  color: #09090b;
+}
+
+.jux-modal-close:focus-visible {
+   outline: 2px solid #18181b; /* ring-ring */
+   outline-offset: 2px;
+}
+
+/* Trigger Buttons (outside modal) */
+button.jux-button,
+.jux-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2.5rem;
+  padding: 0 1rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+  margin: 0.25rem;
+}
+
+/* Button variants for triggers */
+.jux-button-primary {
+  background-color: #18181b;
+  color: #fafafa;
+}
+.jux-button-primary:hover {
+  background-color: #27272a;
+}
+
+.jux-button-outline {
+  border: 1px solid #e4e4e7;
+  background-color: #ffffff;
+  color: #09090b;
+}
+.jux-button-outline:hover {
+  background-color: #f4f4f5;
+  color: #18181b;
+}
+
+button.jux-button:focus-visible,
+.jux-button:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 2px;
+}
+
+/* Typography Styles */
+
+/* Headings */
+h1, .jux-heading-1 {
+  scroll-margin: 5rem; /* scroll-m-20 */
+  font-size: 2.25rem; /* text-4xl */
+  font-weight: 800; /* font-extrabold */
+  letter-spacing: -0.025em; /* tracking-tight */
+  text-wrap: balance;
+}
+
+h2, .jux-heading-2 {
+  scroll-margin: 5rem; /* scroll-m-20 */
+  border-bottom: 1px solid #e4e4e7;
+  padding-bottom: 0.5rem; /* pb-2 */
+  font-size: 1.875rem; /* text-3xl */
+  font-weight: 600; /* font-semibold */
+  letter-spacing: -0.025em; /* tracking-tight */
+  transition-property: color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+}
+
+h2:first-child, .jux-heading-2:first-child {
+  margin-top: 0;
+}
+
+h3, .jux-heading-3 {
+  scroll-margin: 5rem; /* scroll-m-20 */
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 600; /* font-semibold */
+  letter-spacing: -0.025em; /* tracking-tight */
+}
+
+h4, .jux-heading-4 {
+  scroll-margin: 5rem; /* scroll-m-20 */
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 600; /* font-semibold */
+  letter-spacing: -0.025em; /* tracking-tight */
+}
+
+h5, .jux-heading-5 {
+  scroll-margin: 5rem;
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  letter-spacing: -0.025em;
+}
+
+h6, .jux-heading-6 {
+  scroll-margin: 5rem;
+  font-size: 1rem; /* text-base */
+  font-weight: 600; /* font-semibold */
+  letter-spacing: -0.025em;
+}
+
+/* Paragraph */
+p, .jux-paragraph {
+  line-height: 1.75; /* leading-7 */
+}
+
+p:not(:first-child), .jux-paragraph:not(:first-child) {
+  margin-top: 1.5rem; /* mt-6 */
+}
+
+/* Lead Text */
+.jux-lead {
+  font-size: 1.25rem; /* text-xl */
+  color: #71717a; /* text-muted-foreground */
+}
+
+/* Large Text */
+.jux-large {
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+}
+
+/* Small Text */
+small, .jux-small {
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500; /* font-medium */
+  line-height: 1;
+}
+
+/* Muted Text */
+.jux-muted {
+  font-size: 0.875rem; /* text-sm */
+  color: #71717a; /* text-muted-foreground */
+}
+
+/* Blockquote */
+blockquote, .jux-blockquote {
+  margin-top: 1.5rem; /* mt-6 */
+  border-left: 2px solid #e4e4e7; /* border-l-2 */
+  padding-left: 1.5rem; /* pl-6 */
+  font-style: italic;
+}
+
+/* Inline Code */
+code, .jux-inline-code {
+  position: relative;
+  border-radius: 0.25rem; /* rounded */
+  background-color: #f4f4f5; /* bg-muted */
+  padding: 0.15rem 0.3rem; /* px-[0.3rem] py-[0.2rem] */
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 600; /* font-semibold */
+}
+
+/* Lists */
+ul, .jux-list {
+  margin-top: 1.5rem; /* my-6 */
+  margin-bottom: 1.5rem;
+  margin-left: 1.5rem; /* ml-6 */
+  list-style-type: disc; /* list-disc */
+}
+
+ol, .jux-list-ordered {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  margin-left: 1.5rem;
+  list-style-type: decimal;
+}
+
+ul > li, ol > li,
+.jux-list > li, .jux-list-ordered > li {
+  margin-top: 0.5rem; /* mt-2 */
+}
+
+/* Table */
+table, .jux-table {
+  margin-top: 1.5rem; /* my-6 */
+  margin-bottom: 1.5rem;
+  width: 100%;
+  overflow-y: auto;
+}
+
+table thead tr, .jux-table thead tr {
+  margin: 0;
+  border-top: 1px solid #e4e4e7; /* border-t */
+  padding: 0;
+}
+
+table thead tr:nth-child(even),
+.jux-table thead tr:nth-child(even) {
+  background-color: #f4f4f5; /* even:bg-muted */
+}
+
+table tbody tr, .jux-table tbody tr {
+  margin: 0;
+  border-top: 1px solid #e4e4e7;
+  padding: 0;
+}
+
+table tbody tr:nth-child(even),
+.jux-table tbody tr:nth-child(even) {
+  background-color: #f4f4f5; /* even:bg-muted */
+}
+
+table th, .jux-table th {
+  border: 1px solid #e4e4e7;
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  text-align: left;
+  font-weight: 700; /* font-bold */
+}
+
+table th[align="center"],
+.jux-table th[align="center"] {
+  text-align: center;
+}
+
+table th[align="right"],
+.jux-table th[align="right"] {
+  text-align: right;
+}
+
+table td, .jux-table td {
+  border: 1px solid #e4e4e7;
+  padding: 0.5rem 1rem; /* px-4 py-2 */
+  text-align: left;
+}
+
+table td[align="center"],
+.jux-table td[align="center"] {
+  text-align: center;
+}
+
+table td[align="right"],
+.jux-table td[align="right"] {
+  text-align: right;
+}
+
+/* Horizontal Rule / Divider */
+hr, .jux-hr {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: none;
+  border-top: 1px solid #e4e4e7;
+}
+
+/* Card Styles */
+
+.jux-card {
+  border-radius: 0.5rem; /* rounded-lg */
+  border: 1px solid #e4e4e7; /* border */
+  background-color: #ffffff; /* bg-card */
+  color: #09090b; /* text-card-foreground */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
+  overflow: hidden;
+  transition: all 0.15s ease;
+}
+
+.jux-card-hoverable {
+  cursor: pointer;
+}
+
+.jux-card-hoverable:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
+  border-color: #d4d4d8; /* hover:border-muted */
+}
+
+.jux-card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem; /* space-x-3 */
+  padding: 1.5rem; /* p-6 */
+  background-color: #fafafa; /* bg-muted/50 */
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.jux-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.5rem; /* w-10 */
+  height: 2.5rem; /* h-10 */
+  border-radius: 0.375rem; /* rounded-md */
+  background-color: #f4f4f5; /* bg-muted */
+  color: #18181b; /* text-foreground */
+  font-size: 1.25rem; /* text-xl */
+}
+
+.jux-card-title {
+  flex: 1;
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  line-height: 1.2;
+  color: #09090b; /* text-foreground */
+  margin: 0;
+}
+
+.jux-card-body {
+  padding: 1.5rem; /* p-6 */
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.5;
+  color: #71717a; /* text-muted-foreground */
+}
+
+.jux-card-footer {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem; /* p-6 */
+  padding-top: 1rem; /* pt-4 */
+  border-top: 1px solid #e4e4e7;
+  background-color: #fafafa; /* bg-muted/50 */
+  gap: 0.5rem;
+}
+
+/* Card variants */
+.jux-card-compact .jux-card-header,
+.jux-card-compact .jux-card-body,
+.jux-card-compact .jux-card-footer {
+  padding: 1rem; /* p-4 */
+}
+
+.jux-card-flush .jux-card-header {
+  background-color: transparent;
+  border-bottom: none;
+}
+
+.jux-card-flush .jux-card-footer {
+  background-color: transparent;
+  border-top: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * BUTTON SIZE VARIANTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Extra Small */
+button.jux-button-xs,
+.jux-button-xs {
+  height: 2rem; /* h-8 */
+  padding: 0 0.75rem; /* px-3 */
+  font-size: 0.75rem; /* text-xs */
+  border-radius: 0.25rem; /* rounded-sm */
+}
+
+/* Small */
+button.jux-button-sm,
+.jux-button-sm {
+  height: 2.25rem; /* h-9 */
+  padding: 0 0.875rem; /* px-3.5 */
+  font-size: 0.8125rem; /* text-xs/sm */
+  border-radius: 0.3125rem;
+}
+
+/* Default/Medium (already defined above) */
+button.jux-button,
+.jux-button {
+  height: 2.5rem; /* h-10 */
+  padding: 0 1rem; /* px-4 */
+  font-size: 0.875rem; /* text-sm */
+  border-radius: 0.375rem; /* rounded-md */
+}
+
+/* Large */
+button.jux-button-lg,
+.jux-button-lg {
+  height: 2.75rem; /* h-11 */
+  padding: 0 1.25rem; /* px-5 */
+  font-size: 0.9375rem; /* text-base */
+  border-radius: 0.375rem; /* rounded-md */
+}
+
+/* Extra Large */
+button.jux-button-xl,
+.jux-button-xl {
+  height: 3rem; /* h-12 */
+  padding: 0 1.5rem; /* px-6 */
+  font-size: 1rem; /* text-base */
+  border-radius: 0.5rem; /* rounded-lg */
+  font-weight: 600; /* font-semibold */
+}
+
+/* 2X Large */
+button.jux-button-2xl,
+.jux-button-2xl {
+  height: 3.5rem; /* h-14 */
+  padding: 0 2rem; /* px-8 */
+  font-size: 1.125rem; /* text-lg */
+  border-radius: 0.5rem; /* rounded-lg */
+  font-weight: 600; /* font-semibold */
+}
+
+/* 3X Large */
+button.jux-button-3xl,
+.jux-button-3xl {
+  height: 4rem; /* h-16 */
+  padding: 0 2.5rem; /* px-10 */
+  font-size: 1.25rem; /* text-xl */
+  border-radius: 0.625rem; /* rounded-xl */
+  font-weight: 600; /* font-semibold */
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * BUTTON VARIANTS (work with all sizes)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Default/Primary */
+.jux-button-default,
+.jux-button-primary {
+  background-color: #18181b; /* bg-primary */
+  color: #fafafa; /* text-primary-foreground */
+  border: none;
+}
+.jux-button-default:hover,
+.jux-button-primary:hover {
+  background-color: #27272a; /* hover:bg-primary/90 */
+}
+
+/* Secondary */
+.jux-button-secondary {
+  background-color: #f4f4f5; /* bg-secondary */
+  color: #09090b; /* text-secondary-foreground */
+  border: none;
+}
+.jux-button-secondary:hover {
+  background-color: #e4e4e7; /* hover:bg-secondary/80 */
+}
+
+/* Destructive */
+.jux-button-destructive {
+  background-color: #ef4444; /* bg-destructive */
+  color: #ffffff; /* text-destructive-foreground */
+  border: none;
+}
+.jux-button-destructive:hover {
+  background-color: #dc2626; /* hover:bg-destructive/90 */
+}
+
+/* Outline */
+.jux-button-outline {
+  border: 1px solid #e4e4e7; /* border-input */
+  background-color: #ffffff; /* bg-background */
+  color: #09090b; /* text-foreground */
+}
+.jux-button-outline:hover {
+  background-color: #f4f4f5; /* hover:bg-accent */
+  color: #18181b; /* hover:text-accent-foreground */
+}
+
+/* Ghost */
+.jux-button-ghost {
+  background-color: transparent;
+  color: #09090b;
+  border: none;
+}
+.jux-button-ghost:hover {
+  background-color: #f4f4f5; /* hover:bg-accent */
+  color: #18181b; /* hover:text-accent-foreground */
+}
+
+/* Link */
+.jux-button-link {
+  background-color: transparent;
+  color: #18181b; /* text-primary */
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  border: none;
+  padding: 0;
+  height: auto;
+}
+.jux-button-link:hover {
+  text-decoration: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * ICON BUTTONS (Square variants)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-button-icon {
+  padding: 0;
+  aspect-ratio: 1 / 1;
+}
+
+.jux-button-icon.jux-button-xs {
+  width: 2rem;
+  height: 2rem;
+}
+
+.jux-button-icon.jux-button-sm {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.jux-button-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.jux-button-icon.jux-button-lg {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.jux-button-icon.jux-button-xl {
+  width: 3rem;
+  height: 3rem;
+}
+
+.jux-button-icon.jux-button-2xl {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
+.jux-button-icon.jux-button-3xl {
+  width: 4rem;
+  height: 4rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * BUTTON STATES
+ * ═══════════════════════════════════════════════════════════════════ */
+
+button.jux-button:disabled,
+.jux-button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+button.jux-button:focus-visible,
+.jux-button:focus-visible {
+  outline: 2px solid #18181b; /* ring-ring */
+  outline-offset: 2px;
+}
+
+button.jux-button:active,
+.jux-button:active {
+  transform: scale(0.98);
+}
+
+/* Loading state */
+.jux-button-loading {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+
+.jux-button-loading::after {
+  content: '';
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: button-spin 0.6s linear infinite;
+  color: inherit;
+}
+
+@keyframes button-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DARK MODE
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.dark .jux-button-default,
+.dark .jux-button-primary {
+  background-color: #fafafa;
+  color: #18181b;
+}
+.dark .jux-button-default:hover,
+.dark .jux-button-primary:hover {
+  background-color: #e4e4e7;
+}
+
+.dark .jux-button-secondary {
+  background-color: #27272a;
+  color: #fafafa;
+}
+.dark .jux-button-secondary:hover {
+  background-color: #3f3f46;
+}
+
+.dark .jux-button-outline {
+  border-color: #27272a;
+  background-color: #09090b;
+  color: #fafafa;
+}
+.dark .jux-button-outline:hover {
+  background-color: #27272a;
+  color: #fafafa;
+}
+
+.dark .jux-button-ghost {
+  color: #fafafa;
+}
+.dark .jux-button-ghost:hover {
+  background-color: #27272a;
+  color: #fafafa;
+}
+
+.dark .jux-button-link {
+  color: #fafafa;
+}
+
+.dark .jux-button:focus-visible {
+  outline-color: #fafafa;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * MENU STYLES (Shadcn Sidebar)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Menu Container */
+.jux-menu,
+.jux-menu-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+  padding: 0.5rem;
+}
+
+/* Menu Items Wrapper */
+.jux-menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+/* Individual Menu Item Container */
+.jux-menu-item-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Menu Link/Item */
+.jux-menu-link,
+.jux-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #09090b;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  width: 100%;
+  text-align: left;
+}
+
+.jux-menu-link:hover,
+.jux-menu-item:hover {
+  background-color: #f4f4f5;
+}
+
+.jux-menu-link-active,
+.jux-menu-item-active {
+  background-color: #f4f4f5;
+  font-weight: 600;
+}
+
+/* Menu Label (text inside link) */
+.jux-menu-label {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: inherit;
+  color: inherit;
+}
+
+/* Section Label (header text) */
+.jux-menu-section-label {
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #71717a;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Icon */
+.jux-menu-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Chevron for expandable items */
+.jux-menu-chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 0.15s;
+  color: #71717a;
+}
+
+.jux-menu-item-expanded .jux-menu-chevron {
+  transform: rotate(90deg);
+}
+
+/* Submenu (indented) */
+.jux-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin-left: 2rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid #e4e4e7;
+  margin-top: 0.125rem;
+}
+
+.jux-menu-submenu .jux-menu-link,
+.jux-menu-submenu .jux-menu-item {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+/* User Section at Bottom */
+.jux-menu-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  margin-top: auto;
+  border-top: 1px solid #e4e4e7;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.jux-menu-user:hover {
+  background-color: #f4f4f5;
+}
+
+.jux-menu-user-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.jux-menu-user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.jux-menu-user-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #09090b;
+}
+
+.jux-menu-user-email {
+  font-size: 0.75rem;
+  color: #71717a;
+}
+
+/* Dark Mode */
+.dark .jux-menu-link,
+.dark .jux-menu-item {
+  color: #fafafa;
+}
+
+.dark .jux-menu-link:hover,
+.dark .jux-menu-item:hover,
+.dark .jux-menu-link-active,
+.dark .jux-menu-item-active {
+  background-color: #27272a;
+}
+
+.dark .jux-menu-section-label {
+  color: #a1a1aa;
+}
+
+.dark .jux-menu-submenu {
+  border-left-color: #27272a;
+}
+
+.dark .jux-menu-user {
+  border-top-color: #27272a;
+}
+
+.dark .jux-menu-user:hover {
+  background-color: #27272a;
+}
+
+.dark .jux-menu-user-name {
+  color: #fafafa;
+}
+
+.dark .jux-menu-user-email {
+  color: #a1a1aa;
+}
+
+.dark .jux-menu-chevron {
+  color: #a1a1aa;
+}