@nexus-cross/design-system 1.0.2 → 1.0.3

package/dist/styles.css

@@ -92,7 +92,10 @@
   /* ── Shared: Shadow ── */
   --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
-  --shadow-comp-lg: var(--shadow-elevation-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  --shadow-comp-lg: var(
+    --shadow-elevation-lg,
+    0 10px 15px -3px rgb(0 0 0 / 0.1)
+  );
 
   /* ── Shared: Overlay ── */
   --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));
@@ -134,6 +137,14 @@
   box-shadow: var(--shadow-comp-btn);
   transition-property: color, background-color, border-color;
   transition-duration: 200ms;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
 }
 .nexus-btn:disabled,
 .nexus-btn[aria-disabled='true'] {
@@ -368,7 +379,9 @@
   font-weight: 500;
   line-height: 1;
   color: var(--color-text-primary);
-  transition: border-color 200ms, box-shadow 200ms;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
 }
 :where(.nexus-text-input) {
   width: 100%;
@@ -397,15 +410,18 @@
 
 /* ── Sizes ── */
 .nexus-text-input--xl {
-  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-text-input--lg {
-  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-text-input--md {
-  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-sm, 0.875rem);
 }
 
@@ -450,56 +466,305 @@
   background: transparent;
 }
 
+/* ═══════════════════════════════════════════
+     PriceInput
+     ═══════════════════════════════════════════ */
+
+/* ── Field wrapper ── */
+.nexus-price-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-price-input-field__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.nexus-price-input-field__label {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  line-height: 1;
+}
+.nexus-price-input-field__balance {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+  transition: color 150ms;
+}
+.nexus-price-input-field__balance:hover {
+  color: var(--color-text-tertiary);
+}
+.nexus-price-input-field__balance:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled-text, 0.5);
+}
+.nexus-price-input-field__balance-value {
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  text-decoration: underline;
+  transition: color 150ms;
+}
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value {
+  color: var(--color-text-primary);
+}
+.nexus-price-input-field__balance-value--exceeded {
+  color: var(--color-status-danger);
+}
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value--exceeded {
+  color: var(--color-status-danger);
+}
+.nexus-price-input-field__description {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-price-input-field__description--error {
+  color: var(--color-status-danger);
+}
+
+/* ── Input box ── */
+.nexus-price-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-primary);
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+}
+:where(.nexus-price-input) {
+  width: 100%;
+}
+.nexus-price-input:hover:not(.nexus-price-input--disabled):not(:focus-within) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+.nexus-price-input--default:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+.nexus-price-input--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-price-input--error:focus-within {
+  border-color: var(--color-status-danger);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+}
+.nexus-price-input--disabled {
+  cursor: not-allowed;
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
+}
+
+/* ── Sizes ── */
+.nexus-price-input--xl {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-price-input--lg {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-price-input--md {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ── Inner elements ── */
+.nexus-price-input__prefix {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  font: inherit;
+  user-select: none;
+}
+.nexus-price-input__suffix {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  font: inherit;
+  white-space: nowrap;
+  user-select: none;
+}
+.nexus-price-input__inner {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+}
+.nexus-price-input__inner:focus-visible {
+  outline: none;
+}
+.nexus-price-input__inner::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-price-input__inner--right {
+  text-align: right;
+}
+
 /* ═══════════════════════════════════════════
      TextArea
      ═══════════════════════════════════════════ */
 
+/* ── Field wrapper ── */
+.nexus-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-textarea-field__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  line-height: 1;
+}
+.nexus-textarea-field__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nexus-textarea-field__description {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-textarea-field__description--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+.nexus-textarea-field__count {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.nexus-textarea-field__count--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+
+/* ── Textarea box ── */
 .nexus-textarea {
-  border-radius: var(--radius-corner-md, 0.375rem);
+  border-radius: var(--radius-corner-md, 0.5rem);
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-default);
-  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
-  font-size: var(--text-text-sm, 0.875rem);
   color: var(--color-text-primary);
-  transition-property: border-color;
-  transition-duration: 200ms;
+  font-weight: 500;
+  line-height: 1.5;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
   resize: none;
+  min-height: 100px;
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
 :where(.nexus-textarea) {
   width: 100%;
 }
 .nexus-textarea::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-muted);
 }
 .nexus-textarea:focus-visible {
   outline: none;
 }
-.nexus-textarea:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+
+/* Hover */
+.nexus-textarea:hover:not(.nexus-textarea--disabled):not(:focus) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
 }
+
+/* Focus — default */
 .nexus-textarea--default:focus {
-  border-color: var(--color-text-primary);
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
 }
+
+/* Error */
 .nexus-textarea--error {
-  border-color: var(--color-status-danger);
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
 }
 .nexus-textarea--error:focus {
-  border-color: var(--color-status-danger);
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
 }
-.nexus-textarea-wrap {
-  display: flex;
-  flex-direction: column;
+
+/* Disabled */
+.nexus-textarea--disabled {
+  cursor: not-allowed;
+  background: var(
+    --color-surface-default-disabled,
+    var(--color-surface-strong)
+  );
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
 }
-.nexus-textarea-count {
-  margin-top: 0.25rem;
-  text-align: right;
-  font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-tertiary);
+
+/* ── Sizes ── */
+.nexus-textarea--lg {
+  font-size: var(--text-text-medium-base, 1rem);
+  letter-spacing: -0.16px;
 }
-.nexus-textarea-count__current {
-  color: var(--color-text-primary);
-  font-weight: 500;
+.nexus-textarea--md {
+  font-size: var(--text-text-medium-sm, 0.875rem);
+  letter-spacing: -0.14px;
+}
+
+/* ── Resize modes ── */
+.nexus-textarea--resize-default {
+  resize: vertical;
+}
+.nexus-textarea--resize-auto {
+  resize: none;
+  overflow: hidden;
+}
+
+/* ── Custom scrollbar ── */
+.nexus-textarea:not(.nexus-textarea--resize-auto) {
+  overflow-y: auto;
+}
+.nexus-textarea::-webkit-scrollbar {
+  width: 5px;
+}
+.nexus-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+.nexus-textarea::-webkit-scrollbar-thumb {
+  background: var(--color-icon-muted, #c6d0da);
+  border-radius: var(--radius-corner-full, 9999px);
 }
 
 /* ═══════════════════════════════════════════
@@ -513,12 +778,16 @@
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-default);
   color: var(--color-text-primary);
-  transition: border-color 200ms, box-shadow 200ms;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
 }
 :where(.nexus-number-input) {
   width: 100%;
 }
-.nexus-number-input:hover:not(.nexus-number-input--disabled):not(:focus-within) {
+.nexus-number-input:hover:not(.nexus-number-input--disabled):not(
+    :focus-within
+  ) {
   box-shadow: 0 0 0 0.5px var(--color-border-default);
 }
 .nexus-number-input--default:focus-within {
@@ -557,8 +826,12 @@
   width: 100%;
   min-width: 0;
   flex: 1;
+  padding: 0;
+  border: none;
   background: transparent;
   outline: none;
+  font: inherit;
+  color: inherit;
 }
 .nexus-number-input__field::placeholder {
   color: var(--color-text-tertiary);
@@ -590,7 +863,13 @@
   flex: 1;
   align-items: center;
   justify-content: center;
+  padding: 0;
   padding-inline: 0.375rem;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
   color: var(--color-text-tertiary);
   transition-property: color, background-color;
   transition-duration: 150ms;
@@ -937,6 +1216,12 @@
   user-select: none;
   border-radius: 9999px;
   border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
 }
 .nexus-chip[aria-disabled='true'] {
   opacity: 0.5;
@@ -1021,6 +1306,11 @@
   transition-duration: 150ms;
   user-select: none;
   border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
 }
 .nexus-page-btn:disabled {
   opacity: 0.4;
@@ -1083,6 +1373,12 @@
   outline: none;
   transition-property: color, background-color, border-color;
   transition-duration: 150ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
 }
 .nexus-tab-trigger--line {
   padding: 0.625rem var(--spacing-padding-md, 1rem);
@@ -1268,8 +1564,13 @@
   justify-content: space-between;
   border-radius: var(--radius-corner-sm, 0.25rem);
   border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default, transparent);
   color: var(--color-text-primary);
   font-size: var(--text-text-sm, 0.875rem);
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
   transition-property: border-color;
   transition-duration: 200ms;
 }
@@ -1355,12 +1656,24 @@
   animation: nexus-select-slide-out 100ms ease-in forwards;
 }
 @keyframes nexus-select-slide-in {
-  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
-  to   { opacity: 1; transform: translateY(0) scaleY(1); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
 }
 @keyframes nexus-select-slide-out {
-  from { opacity: 1; transform: translateY(0) scaleY(1); }
-  to   { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
 }
 .nexus-select-content--sm {
   width: 4rem;
@@ -1459,12 +1772,24 @@
   animation: nexus-popover-out 100ms ease-in forwards;
 }
 @keyframes nexus-popover-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 @keyframes nexus-popover-out {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0; transform: scale(0.95); }
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
 .nexus-popover-arrow {
   fill: var(--color-surface-default);
@@ -1570,7 +1895,15 @@
   flex: 1;
   align-items: center;
   justify-content: space-between;
+  padding: 0;
   padding-block: var(--spacing-padding-md, 1rem);
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-align: left;
   transition: all 150ms;
 }
 .nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {
@@ -1675,6 +2008,10 @@
   border: 1px solid var(--color-border-default);
   box-shadow: var(--shadow-comp-sm);
   color: var(--color-text-primary);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  margin: 0;
   transition-property: background-color;
   transition-duration: 150ms;
 }
@@ -1705,6 +2042,9 @@
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 9999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
   transition-property: background-color;
   transition-duration: 150ms;
 }
@@ -1751,11 +2091,7 @@
   color: var(--color-status-positive);
 }
 .nexus-toast--error {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-danger) 30%,
-    transparent
-  );
+  border-color: color-mix(in srgb, var(--color-status-danger) 30%, transparent);
   background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);
   color: var(--color-status-danger);
 }
@@ -2052,6 +2388,9 @@
   cursor: pointer;
   align-items: center;
   justify-content: flex-end;
+  border: none;
+  background: transparent;
+  padding: 0;
 }
 .nexus-modal-close-btn--bottom-sheet {
   position: relative;

package/dist/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk55IEEVNR_js = require('./chunks/chunk-55IEEVNR.js');
+var chunkRLPPNY5F_js = require('./chunks/chunk-RLPPNY5F.js');
 require('./chunks/chunk-JNMCYWGY.js');
 
 // src/styles/inject.ts
@@ -8,7 +8,7 @@ var STYLE_ID = "__nexus-ds__";
 var __nexus_styles_injected__ = typeof document !== "undefined" && !document.getElementById(STYLE_ID) ? (() => {
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = chunk55IEEVNR_js.built_default;
+  style.textContent = chunkRLPPNY5F_js.built_default;
   document.head.appendChild(style);
   return true;
 })() : false;