@neuravision/construct 1.1.0

package/components/table.css

@@ -0,0 +1,139 @@
+.ct-table-wrap {
+  border: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-elevated);
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.ct-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.ct-table th,
+.ct-table td {
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-thin) solid var(--color-border-subtle);
+  text-align: left;
+}
+
+.ct-table thead th {
+  background: var(--color-bg-surface);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+@media (hover: hover) {
+  .ct-table tbody tr:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-table--striped tbody tr:nth-child(even) {
+  background: var(--color-bg-surface);
+}
+
+@media (hover: hover) {
+  .ct-table--striped tbody tr:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-table--compact th,
+.ct-table--compact td {
+  padding: var(--space-3) var(--space-4);
+}
+
+.ct-table__sort {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.ct-table__sort-indicator {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.ct-table__sort-indicator::before,
+.ct-table__sort-indicator::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 5px;
+  background-color: var(--color-text-muted);
+  opacity: var(--opacity-disabled);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+.ct-table__sort-indicator::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0L8 5H0z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0L8 5H0z'/%3E%3C/svg%3E");
+}
+
+.ct-table__sort-indicator::after {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8z'/%3E%3C/svg%3E");
+}
+
+th[aria-sort='ascending'] .ct-table__sort-indicator::before {
+  background-color: var(--color-text-secondary);
+  opacity: 1;
+}
+
+th[aria-sort='descending'] .ct-table__sort-indicator::after {
+  background-color: var(--color-text-secondary);
+  opacity: 1;
+}
+
+.ct-table__cell--numeric .ct-table__sort {
+  justify-content: flex-end;
+}
+
+.ct-table__cell--checkbox {
+  width: var(--space-8);
+  text-align: center;
+}
+
+.ct-table__cell--numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.ct-table__cell--actions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.ct-table__title {
+  display: block;
+  font-weight: var(--font-weight-medium);
+}
+
+.ct-table__meta {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}

package/components/tabs.css

@@ -0,0 +1,147 @@
+/* ── Tabs ── */
+
+.ct-tabs {
+  --ct-tabs-gap: var(--space-4);
+  --ct-tabs-trigger-padding-x: var(--space-5);
+  --ct-tabs-trigger-padding-y: var(--space-4);
+  --ct-tabs-trigger-font-size: var(--font-size-sm);
+  --ct-tabs-trigger-line-height: var(--line-height-sm);
+  --ct-tabs-indicator-size: 2px;
+  --ct-tabs-indicator-color: var(--color-brand-primary);
+
+  display: grid;
+  gap: var(--ct-tabs-gap);
+}
+
+.ct-tabs__list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  border-bottom: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-tabs__trigger {
+  appearance: none;
+  border: none;
+  background: none;
+  position: relative;
+  padding: var(--ct-tabs-trigger-padding-y) var(--ct-tabs-trigger-padding-x);
+  color: var(--color-text-secondary);
+  font-size: var(--ct-tabs-trigger-font-size);
+  line-height: var(--ct-tabs-trigger-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--easing-standard),
+    background var(--duration-fast) var(--easing-standard);
+}
+
+.ct-tabs__trigger::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: var(--ct-tabs-indicator-size);
+  background: transparent;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-tabs__trigger:hover {
+    color: var(--color-text-primary);
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-tabs__trigger:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.ct-tabs__trigger[aria-selected='true'],
+.ct-tabs__trigger[data-state='active'] {
+  color: var(--color-text-primary);
+}
+
+.ct-tabs__trigger[aria-selected='true']::after,
+.ct-tabs__trigger[data-state='active']::after {
+  background: var(--ct-tabs-indicator-color);
+}
+
+.ct-tabs__trigger:disabled,
+.ct-tabs__trigger[aria-disabled='true'] {
+  color: var(--color-text-muted);
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ct-tabs__panel {
+  padding: var(--space-4) 0;
+}
+
+/* Tab size variants */
+
+.ct-tabs--sm {
+  --ct-tabs-trigger-padding-x: var(--space-4);
+  --ct-tabs-trigger-padding-y: var(--space-3);
+  --ct-tabs-trigger-font-size: var(--font-size-xs);
+  --ct-tabs-trigger-line-height: var(--line-height-xs);
+}
+
+.ct-tabs--lg {
+  --ct-tabs-trigger-padding-x: var(--space-6);
+  --ct-tabs-trigger-padding-y: var(--space-5);
+  --ct-tabs-trigger-font-size: var(--font-size-md);
+  --ct-tabs-trigger-line-height: var(--line-height-md);
+}
+
+/* Vertical orientation */
+
+.ct-tabs--vertical {
+  grid-template-columns: auto 1fr;
+}
+
+.ct-tabs--vertical .ct-tabs__list {
+  flex-direction: column;
+  border-bottom: none;
+  border-inline-end: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-tabs--vertical .ct-tabs__trigger::after {
+  inset-inline: auto;
+  inset-inline-end: 0;
+  inset-block: 0;
+  width: var(--ct-tabs-indicator-size);
+  height: auto;
+}
+
+/* Pill variant */
+
+.ct-tabs--pill .ct-tabs__list {
+  border-bottom: none;
+  background: var(--color-bg-muted);
+  border-radius: var(--radius-md);
+  padding: var(--space-1);
+}
+
+.ct-tabs--pill .ct-tabs__trigger {
+  border-radius: var(--radius-sm);
+}
+
+.ct-tabs--pill .ct-tabs__trigger::after {
+  display: none;
+}
+
+.ct-tabs--pill .ct-tabs__trigger[aria-selected='true'],
+.ct-tabs--pill .ct-tabs__trigger[data-state='active'] {
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-tabs__trigger,
+  .ct-tabs__trigger::after {
+    transition: none;
+  }
+}

package/components/textarea.css

@@ -0,0 +1,16 @@
+:where(.ct-textarea) {
+  min-height: var(--ct-textarea-height, 120px);
+  padding: var(--ct-control-padding-y, var(--space-4))
+    var(--ct-control-padding-x, var(--space-5));
+  resize: vertical;
+}
+
+.ct-textarea.ct-control--sm {
+  --ct-textarea-height: 96px;
+  --ct-control-padding-y: var(--space-3);
+}
+
+.ct-textarea.ct-control--lg {
+  --ct-textarea-height: 160px;
+  --ct-control-padding-y: var(--space-5);
+}

package/components/toast.css

@@ -0,0 +1,71 @@
+.ct-toast-region {
+  position: fixed;
+  inset-block-start: var(--space-8);
+  inset-inline-end: var(--space-8);
+  display: grid;
+  gap: var(--space-4);
+  z-index: var(--z-toast);
+  max-width: min(420px, 90vw);
+}
+
+.ct-toast {
+  --ct-toast-accent: var(--color-brand-accent);
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--space-4);
+  align-items: start;
+  padding: var(--space-5) var(--space-6);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-elevated);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  border-inline-start: var(--border-thick) solid var(--ct-toast-accent);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text-primary);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-toast[data-state='closed'] {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.ct-toast__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.ct-toast__description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.ct-toast[data-variant='info'] {
+  --ct-toast-accent: var(--color-state-info);
+  background: var(--color-state-info-surface);
+  border-color: var(--color-state-info-border);
+}
+
+.ct-toast[data-variant='success'] {
+  --ct-toast-accent: var(--color-state-success);
+  background: var(--color-state-success-surface);
+  border-color: var(--color-state-success-border);
+}
+
+.ct-toast[data-variant='warning'] {
+  --ct-toast-accent: var(--color-state-warning);
+  background: var(--color-state-warning-surface);
+  border-color: var(--color-state-warning-border);
+}
+
+.ct-toast[data-variant='danger'] {
+  --ct-toast-accent: var(--color-state-danger);
+  background: var(--color-state-danger-surface);
+  border-color: var(--color-state-danger-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-toast {
+    transition: none;
+  }
+}

package/components/toggle-group.css

@@ -0,0 +1,196 @@
+/* ── Toggle Group ── */
+
+.ct-toggle-group {
+  --ct-toggle-group-bg: var(--color-bg-surface);
+  --ct-toggle-group-border: var(--color-border-default);
+  --ct-toggle-group-radius: var(--radius-control);
+  --ct-toggle-group-item-padding-x: var(--space-5);
+  --ct-toggle-group-item-padding-y: var(--space-3);
+  --ct-toggle-group-item-font-size: var(--font-size-sm);
+  --ct-toggle-group-item-line-height: var(--line-height-sm);
+  --ct-toggle-group-item-color: var(--color-text-secondary);
+  --ct-toggle-group-item-bg-active: var(--color-brand-primary);
+  --ct-toggle-group-item-color-active: var(--color-text-inverse);
+  --ct-toggle-group-item-bg-hover: var(--color-bg-muted);
+  --ct-toggle-group-item-min-height: var(--control-height-md);
+  --ct-toggle-group-gap: 0;
+
+  display: inline-flex;
+  gap: var(--ct-toggle-group-gap);
+  border-radius: var(--ct-toggle-group-radius);
+  border: var(--border-thin) solid var(--ct-toggle-group-border);
+  background: var(--ct-toggle-group-bg);
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.ct-toggle-group::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Item ── */
+
+.ct-toggle-group__item {
+  appearance: none;
+  border: none;
+  background: transparent;
+  min-height: var(--ct-toggle-group-item-min-height);
+  padding: var(--ct-toggle-group-item-padding-y) var(--ct-toggle-group-item-padding-x);
+  color: var(--ct-toggle-group-item-color);
+  font-size: var(--ct-toggle-group-item-font-size);
+  line-height: var(--ct-toggle-group-item-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border-inline-end: var(--border-thin) solid var(--ct-toggle-group-border);
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+.ct-toggle-group__item:last-child {
+  border-inline-end: none;
+}
+
+@media (hover: hover) {
+  .ct-toggle-group__item:hover {
+    background: var(--ct-toggle-group-item-bg-hover);
+  }
+}
+
+/* Active state – aria-pressed for multi-select, aria-checked for single-select */
+.ct-toggle-group__item[aria-pressed='true'],
+.ct-toggle-group__item[aria-checked='true'] {
+  background: var(--ct-toggle-group-item-bg-active);
+  color: var(--ct-toggle-group-item-color-active);
+}
+
+.ct-toggle-group__item:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.ct-toggle-group__item:disabled,
+.ct-toggle-group__item[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ── Icon element (inside icon+text items) ── */
+
+.ct-toggle-group__icon {
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ── Icon-only item ── */
+
+.ct-toggle-group__item--icon {
+  aspect-ratio: 1;
+  padding: var(--ct-toggle-group-item-padding-y);
+}
+
+/* ── Size variants ── */
+
+.ct-toggle-group--sm {
+  --ct-toggle-group-item-min-height: var(--control-height-sm);
+  --ct-toggle-group-item-padding-x: var(--space-4);
+  --ct-toggle-group-item-padding-y: var(--space-2);
+  --ct-toggle-group-item-font-size: var(--font-size-xs);
+  --ct-toggle-group-item-line-height: var(--line-height-xs);
+}
+
+.ct-toggle-group--lg {
+  --ct-toggle-group-item-min-height: var(--control-height-lg);
+  --ct-toggle-group-item-padding-x: var(--space-6);
+  --ct-toggle-group-item-padding-y: var(--space-4);
+  --ct-toggle-group-item-font-size: var(--font-size-md);
+  --ct-toggle-group-item-line-height: var(--line-height-md);
+}
+
+/* ── Outlined variant ── */
+
+.ct-toggle-group--outlined {
+  background: transparent;
+}
+
+.ct-toggle-group--outlined .ct-toggle-group__item[aria-pressed='true'],
+.ct-toggle-group--outlined .ct-toggle-group__item[aria-checked='true'] {
+  background: var(--color-bg-muted);
+  color: var(--color-brand-primary);
+}
+
+/* ── Vertical orientation ── */
+
+.ct-toggle-group--vertical {
+  flex-direction: column;
+}
+
+.ct-toggle-group--vertical .ct-toggle-group__item {
+  border-inline-end: none;
+  border-block-end: var(--border-thin) solid var(--ct-toggle-group-border);
+}
+
+.ct-toggle-group--vertical .ct-toggle-group__item:last-child {
+  border-block-end: none;
+}
+
+/* ── Separated variant ── */
+
+.ct-toggle-group--separated {
+  --ct-toggle-group-gap: var(--space-2);
+  border: none;
+  background: transparent;
+  overflow: visible;
+}
+
+.ct-toggle-group--separated .ct-toggle-group__item {
+  border: var(--border-thin) solid var(--ct-toggle-group-border);
+  border-radius: var(--ct-toggle-group-radius);
+  border-inline-end: var(--border-thin) solid var(--ct-toggle-group-border);
+}
+
+/* ── Full-width variant ── */
+
+.ct-toggle-group--full {
+  display: flex;
+  width: 100%;
+}
+
+.ct-toggle-group--full .ct-toggle-group__item {
+  flex: 1;
+}
+
+/* ── Wrap variant ── */
+
+.ct-toggle-group--wrap {
+  flex-wrap: wrap;
+  overflow: visible;
+}
+
+.ct-toggle-group--wrap .ct-toggle-group__item {
+  border-block-end: var(--border-thin) solid var(--ct-toggle-group-border);
+}
+
+.ct-toggle-group--wrap .ct-toggle-group__item:last-child {
+  border-block-end: none;
+}
+
+/* ── Reduced motion ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-toggle-group__item {
+    transition: none;
+  }
+}