@nexus-cross/design-system 1.0.4 → 1.0.5

package/dist/styles.css

@@ -772,90 +772,168 @@
      ═══════════════════════════════════════════ */
 
 .nexus-number-input {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(.nexus-number-input) {
+  width: 100%;
+}
+
+/* ── Header (label + max) ── */
+.nexus-number-input__header {
   display: flex;
   align-items: center;
-  border-radius: var(--radius-corner-md, 0.375rem);
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.nexus-number-input__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: var(--font-weight-label-semibold-md, 600);
+  line-height: 1;
+  color: var(--color-text-tertiary);
+}
+.nexus-number-input__max {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+}
+.nexus-number-input__max:disabled {
+  cursor: default;
+}
+.nexus-number-input__max-text {
+  color: var(--color-text-tertiary);
+}
+.nexus-number-input__max-value {
+  color: var(--color-text-secondary);
+  text-decoration: underline;
+}
+.nexus-number-input__max-value--exceeded {
+  color: var(--color-status-danger-intense);
+}
+
+/* ── Container (the bordered input box) ── */
+.nexus-number-input__container {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-corner-md, 0.5rem);
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-default);
-  color: var(--color-text-primary);
+  outline: 0.5px solid transparent;
   transition:
-    border-color 200ms,
-    box-shadow 200ms;
+    border-color var(--duration-transition-fast, 150ms),
+    outline-color var(--duration-transition-fast, 150ms);
 }
-:where(.nexus-number-input) {
-  width: 100%;
+.nexus-number-input--basic .nexus-number-input__container {
+  overflow: clip;
 }
-.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:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:hover {
+  border-color: var(--color-border-default-hover);
+  outline-color: var(--color-border-default-hover);
 }
-.nexus-number-input--default:focus-within {
-  border-color: var(--color-accent-primary);
-  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+.nexus-number-input:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:focus-within {
+  border-color: var(--color-accent-primary-focus);
+  outline-color: var(--color-accent-primary-focus);
 }
-.nexus-number-input--error {
-  border-color: var(--color-status-danger);
+.nexus-number-input--error .nexus-number-input__container {
+  border-color: var(--color-status-danger-focus);
+  outline-color: var(--color-status-danger-focus);
 }
-.nexus-number-input--error:focus-within {
-  border-color: var(--color-status-danger);
-  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+.nexus-number-input--disabled .nexus-number-input__container {
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  pointer-events: none;
 }
-.nexus-number-input--xl {
-  height: 3.5rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input--disabled .nexus-number-input__label {
+  color: var(--color-text-muted);
 }
-.nexus-number-input--lg {
-  height: 3rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input--disabled .nexus-number-input__max {
+  cursor: default;
 }
-.nexus-number-input--md {
-  height: 2.5rem;
-  font-size: var(--text-text-sm, 0.875rem);
+.nexus-number-input--disabled .nexus-number-input__max-text,
+.nexus-number-input--disabled .nexus-number-input__max-value {
+  color: var(--color-text-muted);
+  text-decoration: none;
 }
-.nexus-number-input--sm {
-  height: 2rem;
-  font-size: var(--text-text-xs, 0.75rem);
+.nexus-number-input--disabled .nexus-number-input__step {
+  color: var(--color-text-muted);
 }
-.nexus-number-input--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.nexus-number-input--disabled .nexus-number-input__bind-btn {
+  background: var(--color-surface-strong);
+  color: var(--color-text-muted);
 }
+.nexus-number-input--disabled .nexus-number-input__description {
+  color: var(--color-text-muted);
+}
+
+/* ── Input field ── */
 .nexus-number-input__field {
-  height: 100%;
-  width: 100%;
-  min-width: 0;
   flex: 1;
-  padding: 0;
+  min-width: 0;
   border: none;
   background: transparent;
   outline: none;
-  font: inherit;
-  color: inherit;
+  font-size: var(--text-label-lg, 1rem);
+  font-weight: var(--font-weight-label-lg, 500);
+  line-height: 1;
+  color: var(--color-text-primary);
 }
 .nexus-number-input__field::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-muted);
 }
 .nexus-number-input__field:focus-visible {
   outline: none;
 }
-.nexus-number-input__field--xl {
-  padding-inline: var(--spacing-padding-lg, 1.25rem);
+.nexus-number-input--disabled .nexus-number-input__field {
+  color: var(--color-text-muted);
+  cursor: not-allowed;
 }
-.nexus-number-input__field--lg {
-  padding-inline: var(--spacing-padding-md, 1rem);
+
+/* ── Size: field padding (basic) ── */
+.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
-.nexus-number-input__field--md {
-  padding-inline: var(--spacing-padding-sm, 0.75rem);
+.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem);
 }
-.nexus-number-input__field--sm {
-  padding-inline: 0.625rem;
+
+/* ── Size: field padding (bind) ── */
+.nexus-number-input--bind .nexus-number-input__container {
+  padding-inline: var(--spacing-padding-xs, 0.5rem);
+}
+.nexus-number-input--bind .nexus-number-input__field {
+  text-align: center;
+}
+.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
+.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);
+}
+
+/* ── Basic variant: chevron buttons column ── */
 .nexus-number-input__buttons {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
   border-left: 1px solid var(--color-border-default);
-  height: 100%;
+  width: 24px;
   flex-shrink: 0;
 }
 .nexus-number-input__step {
@@ -864,34 +942,83 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  padding-inline: 0.375rem;
   margin: 0;
   border: none;
-  background: transparent;
+  background: var(--color-surface-subtle);
   cursor: pointer;
-  font: inherit;
-  color: var(--color-text-tertiary);
-  transition-property: color, background-color;
-  transition-duration: 150ms;
+  color: var(--color-icon-secondary);
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
 }
 .nexus-number-input__step:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-hover);
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
 }
 .nexus-number-input__step:disabled {
-  opacity: 0.4;
+  color: var(--color-text-muted);
   pointer-events: none;
 }
 .nexus-number-input__step--up {
-  border-top-right-radius: var(--radius-corner-md, 0.375rem);
   border-bottom: 1px solid var(--color-border-default);
 }
-.nexus-number-input__step--down {
-  border-bottom-right-radius: var(--radius-corner-md, 0.375rem);
+.nexus-number-input__chevron-icon {
+  width: 8px;
+  height: 5px;
 }
-.nexus-number-input__step-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+.nexus-number-input__chevron-icon--down {
+  transform: scaleY(-1);
+}
+
+/* ── Bind variant: +/- buttons ── */
+.nexus-number-input__bind-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  overflow: clip;
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
+}
+.nexus-number-input__bind-btn:hover {
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
+}
+.nexus-number-input__bind-btn:disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+.nexus-number-input--xl .nexus-number-input__bind-btn {
+  width: 30px;
+  height: 30px;
+}
+.nexus-number-input__bind-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Description ── */
+.nexus-number-input__description {
+  margin: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  color: var(--color-text-tertiary);
+  height: 18px;
+}
+.nexus-number-input__description--error {
+  color: var(--color-status-danger-intense);
 }
 
 /* ═══════════════════════════════════════════

package/dist/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkKZ7S5VN2_js = require('./chunks/chunk-KZ7S5VN2.js');
+var chunkQRNHFOLG_js = require('./chunks/chunk-QRNHFOLG.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 = chunkKZ7S5VN2_js.built_default;
+  style.textContent = chunkQRNHFOLG_js.built_default;
   document.head.appendChild(style);
   return true;
 })() : false;

package/dist/styles.layered.css

@@ -773,90 +773,168 @@
      ═══════════════════════════════════════════ */
 
 .nexus-number-input {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(.nexus-number-input) {
+  width: 100%;
+}
+
+/* ── Header (label + max) ── */
+.nexus-number-input__header {
   display: flex;
   align-items: center;
-  border-radius: var(--radius-corner-md, 0.375rem);
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.nexus-number-input__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: var(--font-weight-label-semibold-md, 600);
+  line-height: 1;
+  color: var(--color-text-tertiary);
+}
+.nexus-number-input__max {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+}
+.nexus-number-input__max:disabled {
+  cursor: default;
+}
+.nexus-number-input__max-text {
+  color: var(--color-text-tertiary);
+}
+.nexus-number-input__max-value {
+  color: var(--color-text-secondary);
+  text-decoration: underline;
+}
+.nexus-number-input__max-value--exceeded {
+  color: var(--color-status-danger-intense);
+}
+
+/* ── Container (the bordered input box) ── */
+.nexus-number-input__container {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-corner-md, 0.5rem);
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-default);
-  color: var(--color-text-primary);
+  outline: 0.5px solid transparent;
   transition:
-    border-color 200ms,
-    box-shadow 200ms;
+    border-color var(--duration-transition-fast, 150ms),
+    outline-color var(--duration-transition-fast, 150ms);
 }
-:where(.nexus-number-input) {
-  width: 100%;
+.nexus-number-input--basic .nexus-number-input__container {
+  overflow: clip;
 }
-.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:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:hover {
+  border-color: var(--color-border-default-hover);
+  outline-color: var(--color-border-default-hover);
 }
-.nexus-number-input--default:focus-within {
-  border-color: var(--color-accent-primary);
-  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+.nexus-number-input:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:focus-within {
+  border-color: var(--color-accent-primary-focus);
+  outline-color: var(--color-accent-primary-focus);
 }
-.nexus-number-input--error {
-  border-color: var(--color-status-danger);
+.nexus-number-input--error .nexus-number-input__container {
+  border-color: var(--color-status-danger-focus);
+  outline-color: var(--color-status-danger-focus);
 }
-.nexus-number-input--error:focus-within {
-  border-color: var(--color-status-danger);
-  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+.nexus-number-input--disabled .nexus-number-input__container {
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  pointer-events: none;
 }
-.nexus-number-input--xl {
-  height: 3.5rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input--disabled .nexus-number-input__label {
+  color: var(--color-text-muted);
 }
-.nexus-number-input--lg {
-  height: 3rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input--disabled .nexus-number-input__max {
+  cursor: default;
 }
-.nexus-number-input--md {
-  height: 2.5rem;
-  font-size: var(--text-text-sm, 0.875rem);
+.nexus-number-input--disabled .nexus-number-input__max-text,
+.nexus-number-input--disabled .nexus-number-input__max-value {
+  color: var(--color-text-muted);
+  text-decoration: none;
 }
-.nexus-number-input--sm {
-  height: 2rem;
-  font-size: var(--text-text-xs, 0.75rem);
+.nexus-number-input--disabled .nexus-number-input__step {
+  color: var(--color-text-muted);
 }
-.nexus-number-input--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.nexus-number-input--disabled .nexus-number-input__bind-btn {
+  background: var(--color-surface-strong);
+  color: var(--color-text-muted);
 }
+.nexus-number-input--disabled .nexus-number-input__description {
+  color: var(--color-text-muted);
+}
+
+/* ── Input field ── */
 .nexus-number-input__field {
-  height: 100%;
-  width: 100%;
-  min-width: 0;
   flex: 1;
-  padding: 0;
+  min-width: 0;
   border: none;
   background: transparent;
   outline: none;
-  font: inherit;
-  color: inherit;
+  font-size: var(--text-label-lg, 1rem);
+  font-weight: var(--font-weight-label-lg, 500);
+  line-height: 1;
+  color: var(--color-text-primary);
 }
 .nexus-number-input__field::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-muted);
 }
 .nexus-number-input__field:focus-visible {
   outline: none;
 }
-.nexus-number-input__field--xl {
-  padding-inline: var(--spacing-padding-lg, 1.25rem);
+.nexus-number-input--disabled .nexus-number-input__field {
+  color: var(--color-text-muted);
+  cursor: not-allowed;
 }
-.nexus-number-input__field--lg {
-  padding-inline: var(--spacing-padding-md, 1rem);
+
+/* ── Size: field padding (basic) ── */
+.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
-.nexus-number-input__field--md {
-  padding-inline: var(--spacing-padding-sm, 0.75rem);
+.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem);
 }
-.nexus-number-input__field--sm {
-  padding-inline: 0.625rem;
+
+/* ── Size: field padding (bind) ── */
+.nexus-number-input--bind .nexus-number-input__container {
+  padding-inline: var(--spacing-padding-xs, 0.5rem);
+}
+.nexus-number-input--bind .nexus-number-input__field {
+  text-align: center;
+}
+.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
+.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);
+}
+
+/* ── Basic variant: chevron buttons column ── */
 .nexus-number-input__buttons {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
   border-left: 1px solid var(--color-border-default);
-  height: 100%;
+  width: 24px;
   flex-shrink: 0;
 }
 .nexus-number-input__step {
@@ -865,34 +943,83 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  padding-inline: 0.375rem;
   margin: 0;
   border: none;
-  background: transparent;
+  background: var(--color-surface-subtle);
   cursor: pointer;
-  font: inherit;
-  color: var(--color-text-tertiary);
-  transition-property: color, background-color;
-  transition-duration: 150ms;
+  color: var(--color-icon-secondary);
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
 }
 .nexus-number-input__step:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-hover);
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
 }
 .nexus-number-input__step:disabled {
-  opacity: 0.4;
+  color: var(--color-text-muted);
   pointer-events: none;
 }
 .nexus-number-input__step--up {
-  border-top-right-radius: var(--radius-corner-md, 0.375rem);
   border-bottom: 1px solid var(--color-border-default);
 }
-.nexus-number-input__step--down {
-  border-bottom-right-radius: var(--radius-corner-md, 0.375rem);
+.nexus-number-input__chevron-icon {
+  width: 8px;
+  height: 5px;
 }
-.nexus-number-input__step-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+.nexus-number-input__chevron-icon--down {
+  transform: scaleY(-1);
+}
+
+/* ── Bind variant: +/- buttons ── */
+.nexus-number-input__bind-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  overflow: clip;
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
+}
+.nexus-number-input__bind-btn:hover {
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
+}
+.nexus-number-input__bind-btn:disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+.nexus-number-input--xl .nexus-number-input__bind-btn {
+  width: 30px;
+  height: 30px;
+}
+.nexus-number-input__bind-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Description ── */
+.nexus-number-input__description {
+  margin: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  color: var(--color-text-tertiary);
+  height: 18px;
+}
+.nexus-number-input__description--error {
+  color: var(--color-status-danger-intense);
 }
 
 /* ═══════════════════════════════════════════

package/dist/styles.mjs

@@ -1,4 +1,4 @@
-import { built_default } from './chunks/chunk-PI464222.mjs';
+import { built_default } from './chunks/chunk-PXBZEAZQ.mjs';
 import './chunks/chunk-CVYXRSXT.mjs';
 
 // src/styles/inject.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/design-system",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "NEXUS Design System UI Components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -292,7 +292,8 @@
   "files": [
     "dist",
     "cursor-rules",
-    "scripts/setup-cursor-rules.cjs"
+    "scripts/setup-cursor-rules.cjs",
+    "DESIGN.md"
   ],
   "bin": {
     "nexus-ds-setup": "./scripts/setup-cursor-rules.cjs"
@@ -347,7 +348,7 @@
     "typescript": "^5.0.0",
     "vitest": "^1.6.1",
     "zod-to-json-schema": "^3.25.2",
-    "@nexus-cross/tokens": "1.0.4"
+    "@nexus-cross/tokens": "1.0.5"
   },
   "scripts": {
     "postinstall": "node scripts/setup-cursor-rules.cjs",