@neuravision/construct 1.1.0

package/components/dropdown.css

@@ -0,0 +1,401 @@
+/* ─── Dropdown Menu ──────────────────────────────────────────────── */
+
+.ct-dropdown {
+  --ct-dropdown-min-width: 200px;
+  --ct-dropdown-max-width: 320px;
+  --ct-dropdown-padding: var(--space-2);
+  --ct-dropdown-item-padding-x: var(--space-4);
+  --ct-dropdown-item-padding-y: var(--space-3);
+  --ct-dropdown-item-font-size: var(--font-size-sm);
+  --ct-dropdown-item-line-height: var(--line-height-sm);
+  --ct-dropdown-item-radius: var(--radius-sm);
+  --ct-dropdown-item-gap: var(--space-3);
+
+  position: relative;
+  display: inline-flex;
+}
+
+/* ── Menu panel ──────────────────────────────────────────────────── */
+
+.ct-dropdown__menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--space-2));
+  inset-inline-start: 0;
+  min-width: var(--ct-dropdown-min-width);
+  max-width: var(--ct-dropdown-max-width);
+  padding: var(--ct-dropdown-padding);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-dropdown);
+  display: grid;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px);
+  z-index: var(--z-dropdown);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear var(--duration-fast);
+}
+
+.ct-dropdown[data-state='open'] .ct-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear 0s;
+}
+
+/* ── Positioning ─────────────────────────────────────────────────── */
+
+.ct-dropdown[data-side='top'] .ct-dropdown__menu {
+  inset-block-start: auto;
+  inset-block-end: calc(100% + var(--space-2));
+  transform: translateY(-4px);
+}
+
+.ct-dropdown[data-side='top'][data-state='open'] .ct-dropdown__menu {
+  transform: translateY(0);
+}
+
+.ct-dropdown[data-align='end'] .ct-dropdown__menu {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+/* ── Item (base) ─────────────────────────────────────────────────── */
+
+.ct-dropdown__item {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--ct-dropdown-item-gap);
+  padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
+  border-radius: var(--ct-dropdown-item-radius);
+  font-size: var(--ct-dropdown-item-font-size);
+  line-height: var(--ct-dropdown-item-line-height);
+  text-align: start;
+  text-decoration: none;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-dropdown__item:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-dropdown__item:focus-visible {
+  background: var(--color-bg-muted);
+  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline-offset: -2px;
+}
+
+.ct-dropdown__item[data-highlighted] {
+  background: var(--color-bg-muted);
+  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline-offset: -2px;
+}
+
+.ct-dropdown__item[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* ── Item parts: Icon, Label, Shortcut, Description ──────────────── */
+
+.ct-dropdown__item-icon {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+}
+
+.ct-dropdown__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.ct-dropdown__item-shortcut {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  pointer-events: none;
+  font-family: inherit;
+}
+
+.ct-dropdown__item-description {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  line-height: var(--line-height-xs);
+}
+
+/* ── Danger item ─────────────────────────────────────────────────── */
+
+.ct-dropdown__item--danger {
+  color: var(--color-state-danger);
+}
+
+@media (hover: hover) {
+  .ct-dropdown__item--danger:hover {
+    background: var(--color-state-danger-surface);
+  }
+}
+
+.ct-dropdown__item--danger:focus-visible,
+.ct-dropdown__item--danger[data-highlighted] {
+  background: var(--color-state-danger-surface);
+  outline-color: var(--color-state-danger);
+}
+
+.ct-dropdown__item--danger .ct-dropdown__item-icon {
+  color: var(--color-state-danger);
+}
+
+.ct-dropdown__item--danger .ct-dropdown__item-shortcut {
+  color: var(--color-text-muted);
+}
+
+/* ── Checkbox item ───────────────────────────────────────────────── */
+
+.ct-dropdown__item-check {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex-shrink: 0;
+  opacity: 0;
+  color: var(--color-brand-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ct-dropdown__item[aria-checked='true'] .ct-dropdown__item-check {
+  opacity: 1;
+}
+
+/* ── Radio item ──────────────────────────────────────────────────── */
+
+.ct-dropdown__item-radio {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ct-dropdown__item-radio::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-round);
+  background: transparent;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+.ct-dropdown__item[aria-checked='true'] .ct-dropdown__item-radio::before {
+  background: var(--color-brand-primary);
+}
+
+/* ── Label (group header, non-interactive) ───────────────────────── */
+
+.ct-dropdown__label {
+  padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
+  border-radius: var(--ct-dropdown-item-radius);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  text-align: start;
+}
+
+/* ── Group ────────────────────────────────────────────────────────── */
+
+.ct-dropdown__group {
+  padding: var(--space-1) 0;
+}
+
+.ct-dropdown__group + .ct-dropdown__group {
+  border-top: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-dropdown__group-label {
+  padding: var(--space-2) var(--ct-dropdown-item-padding-x);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+/* ── Separator ───────────────────────────────────────────────────── */
+
+.ct-dropdown__separator {
+  height: 1px;
+  background: var(--color-border-subtle);
+  margin: var(--space-2) 0;
+}
+
+/* ── Sub-menu ────────────────────────────────────────────────────── */
+
+.ct-dropdown__sub {
+  position: relative;
+}
+
+.ct-dropdown__sub-trigger {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--ct-dropdown-item-gap);
+  padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
+  border-radius: var(--ct-dropdown-item-radius);
+  font-size: var(--ct-dropdown-item-font-size);
+  line-height: var(--ct-dropdown-item-line-height);
+  text-align: start;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-dropdown__sub-trigger:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-dropdown__sub-trigger:focus-visible,
+.ct-dropdown__sub-trigger[data-highlighted] {
+  background: var(--color-bg-muted);
+  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline-offset: -2px;
+}
+
+.ct-dropdown__sub-trigger[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.ct-dropdown__sub-chevron {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  color: var(--color-text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ct-dropdown__sub-content {
+  position: absolute;
+  inset-inline-start: 100%;
+  inset-block-start: 0;
+  min-width: var(--ct-dropdown-min-width);
+  max-width: var(--ct-dropdown-max-width);
+  padding: var(--ct-dropdown-padding);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-dropdown);
+  display: grid;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(4px);
+  z-index: var(--z-dropdown);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear var(--duration-fast);
+}
+
+.ct-dropdown__sub[data-state='open'] > .ct-dropdown__sub-content {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear 0s;
+}
+
+/* ── Responsive: inline sub-menus on narrow viewports ────────────── */
+
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-dropdown__sub-content {
+    position: static;
+    inset: auto;
+    min-width: 100%;
+    max-width: none;
+    transform: none;
+    box-shadow: none;
+    border: none;
+    border-top: var(--border-thin) solid var(--color-border-subtle);
+    border-radius: 0;
+    padding-inline-start: var(--space-4);
+    z-index: auto;
+  }
+
+  .ct-dropdown__sub[data-state='open'] > .ct-dropdown__sub-content {
+    transform: none;
+  }
+
+  .ct-dropdown__sub-chevron {
+    transform: rotate(90deg);
+  }
+
+  .ct-dropdown__sub[data-state='open'] > .ct-dropdown__sub-trigger .ct-dropdown__sub-chevron {
+    transform: rotate(-90deg);
+  }
+}
+
+/* ── Responsive: clamp menu width to viewport ────────────────────── */
+
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-dropdown__menu {
+    max-width: calc(100vw - var(--space-8));
+  }
+}
+
+/* ── Sizes ────────────────────────────────────────────────────────── */
+
+.ct-dropdown--sm {
+  --ct-dropdown-item-padding-x: var(--space-3);
+  --ct-dropdown-item-padding-y: var(--space-2);
+  --ct-dropdown-item-font-size: var(--font-size-xs);
+  --ct-dropdown-item-line-height: var(--line-height-xs);
+  --ct-dropdown-item-gap: var(--space-2);
+}
+
+.ct-dropdown--lg {
+  --ct-dropdown-item-padding-x: var(--space-5);
+  --ct-dropdown-item-padding-y: var(--space-4);
+  --ct-dropdown-item-font-size: var(--font-size-md);
+  --ct-dropdown-item-line-height: var(--line-height-md);
+  --ct-dropdown-item-gap: var(--space-4);
+}
+
+/* ── Reduced motion ──────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-dropdown__menu,
+  .ct-dropdown__sub-content,
+  .ct-dropdown__item,
+  .ct-dropdown__item-radio::before {
+    transition: none;
+  }
+}

package/components/empty-state.css

@@ -0,0 +1,97 @@
+/* ── Empty State ── */
+
+.ct-empty-state {
+  --ct-empty-state-icon-size: 64px;
+  --ct-empty-state-icon-color: var(--color-text-muted);
+  --ct-empty-state-max-width: 400px;
+  --ct-empty-state-padding: var(--space-8);
+  --ct-empty-state-gap: var(--space-4);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  max-width: var(--ct-empty-state-max-width);
+  margin-inline: auto;
+  padding: var(--ct-empty-state-padding);
+  gap: var(--ct-empty-state-gap);
+}
+
+.ct-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ct-empty-state-icon-size);
+  height: var(--ct-empty-state-icon-size);
+  font-size: calc(var(--ct-empty-state-icon-size) * 0.5);
+  color: var(--ct-empty-state-icon-color);
+  flex-shrink: 0;
+}
+
+.ct-empty-state__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ct-empty-state__description {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.ct-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  margin-block-start: var(--space-2);
+}
+
+/* Sizes */
+
+.ct-empty-state--sm {
+  --ct-empty-state-icon-size: 40px;
+  --ct-empty-state-padding: var(--space-4);
+  --ct-empty-state-gap: var(--space-2);
+}
+
+.ct-empty-state--sm .ct-empty-state__title {
+  font-size: var(--font-size-md);
+}
+
+.ct-empty-state--sm .ct-empty-state__description {
+  font-size: var(--font-size-xs);
+}
+
+.ct-empty-state--lg {
+  --ct-empty-state-icon-size: 96px;
+  --ct-empty-state-padding: var(--space-12);
+  --ct-empty-state-gap: var(--space-6);
+}
+
+.ct-empty-state--lg .ct-empty-state__title {
+  font-size: var(--font-size-xl);
+}
+
+.ct-empty-state--lg .ct-empty-state__description {
+  font-size: var(--font-size-md);
+}
+
+/* Variants */
+
+.ct-empty-state--error .ct-empty-state__icon {
+  color: var(--color-state-danger-text);
+}
+
+.ct-empty-state--error .ct-empty-state__title {
+  color: var(--color-state-danger-text);
+}
+
+.ct-empty-state--bordered {
+  border: 2px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+}

package/components/field.css

@@ -0,0 +1,42 @@
+.ct-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.ct-field__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+}
+
+.ct-field__hint {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.ct-field__error {
+  font-size: var(--font-size-sm);
+  color: var(--color-state-danger);
+}
+
+.ct-field__label--required::after {
+  content: ' *';
+  color: var(--color-state-danger);
+}
+
+.ct-field__counter {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  text-align: end;
+}
+
+.ct-field__counter--limit {
+  color: var(--color-state-danger);
+}
+
+.ct-field__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+}

package/components/file-upload.css

@@ -0,0 +1,111 @@
+.ct-file-upload {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.ct-file-upload__dropzone {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: var(--space-3);
+  padding: var(--space-7);
+  border-radius: var(--radius-lg);
+  border: var(--border-thin) dashed var(--color-border-default);
+  background: var(--color-bg-surface);
+  color: var(--color-text-secondary);
+  transition: border-color var(--duration-fast) var(--easing-standard),
+    background var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+  cursor: pointer;
+}
+
+.ct-file-upload__dropzone:focus-within {
+  border-color: var(--color-focus-ring);
+  box-shadow: 0 0 0 3px var(--color-focus-ring);
+}
+
+.ct-file-upload__dropzone[data-state='dragover'] {
+  border-color: var(--color-brand-primary);
+  background: var(--color-bg-muted);
+}
+
+.ct-file-upload__dropzone[aria-invalid='true'] {
+  border-color: var(--color-state-danger);
+  background: var(--color-state-danger-surface);
+  color: var(--color-text-primary);
+}
+
+.ct-file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+
+.ct-file-upload__title {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.ct-file-upload__hint {
+  font-size: var(--font-size-sm);
+}
+
+.ct-file-upload__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.ct-file-upload__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+}
+
+.ct-file-upload__item[data-status='success'] {
+  border-color: var(--color-state-success-border);
+  background: var(--color-state-success-surface);
+}
+
+.ct-file-upload__item[data-status='error'] {
+  border-color: var(--color-state-danger-border);
+  background: var(--color-state-danger-surface);
+}
+
+.ct-file-upload__file {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.ct-file-upload__name {
+  font-weight: var(--font-weight-medium);
+}
+
+.ct-file-upload__meta {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.ct-file-upload__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ct-file-upload__error {
+  color: var(--color-state-danger);
+  font-size: var(--font-size-sm);
+}

package/components/icon.css

@@ -0,0 +1,31 @@
+/* ── Icon ── */
+
+.ct-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.ct-icon--sm {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.ct-icon--lg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}
+
+.ct-icon--xl {
+  width: var(--icon-xl);
+  height: var(--icon-xl);
+}
+
+.ct-icon svg {
+  width: 100%;
+  height: 100%;
+}