@neuravision/construct 1.1.0

package/components/popover.css

@@ -0,0 +1,231 @@
+/* ─── Popover ─────────────────────────────────────────────────────── */
+
+.ct-popover {
+  position: relative;
+  display: inline-flex;
+}
+
+.ct-popover__content {
+  --_po-offset: calc(100% + var(--space-3));
+  --_po-width: min(var(--ct-popover-width), calc(100vw - var(--space-8)));
+  --_po-arrow-size: 8px;
+
+  position: absolute;
+  z-index: var(--z-dropdown);
+  width: var(--_po-width);
+  border-radius: var(--ct-popover-radius);
+  border: var(--border-thin) solid var(--ct-popover-border);
+  background: var(--ct-popover-bg);
+  box-shadow: var(--ct-popover-shadow);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear var(--duration-fast);
+}
+
+.ct-popover[data-state='open'] .ct-popover__content {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear 0s;
+}
+
+/* Size variants */
+
+.ct-popover--sm .ct-popover__content {
+  --_po-width: min(240px, calc(100vw - var(--space-8)));
+}
+
+.ct-popover--lg .ct-popover__content {
+  --_po-width: min(480px, calc(100vw - var(--space-8)));
+}
+
+/* ── Side positioning ─────────────────────────────────────────────── */
+
+.ct-popover[data-side='bottom'] .ct-popover__content {
+  inset-block-start: var(--_po-offset);
+}
+
+.ct-popover[data-side='top'] .ct-popover__content {
+  inset-block-end: var(--_po-offset);
+}
+
+.ct-popover[data-side='left'] .ct-popover__content {
+  inset-inline-end: var(--_po-offset);
+  inset-block-start: 50%;
+}
+
+.ct-popover[data-side='right'] .ct-popover__content {
+  inset-inline-start: var(--_po-offset);
+  inset-block-start: 50%;
+}
+
+/* ── Alignment (top / bottom sides) ───────────────────────────────── */
+
+.ct-popover[data-side='top'][data-align='center'] .ct-popover__content,
+.ct-popover[data-side='bottom'][data-align='center'] .ct-popover__content {
+  inset-inline-start: 50%;
+  transform: translate(-50%, 4px);
+}
+
+.ct-popover[data-side='top'][data-align='start'] .ct-popover__content,
+.ct-popover[data-side='bottom'][data-align='start'] .ct-popover__content {
+  inset-inline-start: 0;
+  transform: translateY(4px);
+}
+
+.ct-popover[data-side='top'][data-align='end'] .ct-popover__content,
+.ct-popover[data-side='bottom'][data-align='end'] .ct-popover__content {
+  inset-inline-end: 0;
+  transform: translateY(4px);
+}
+
+/* top side: slide up */
+
+.ct-popover[data-side='top'][data-align='center'] .ct-popover__content {
+  transform: translate(-50%, -4px);
+}
+
+.ct-popover[data-side='top'][data-align='start'] .ct-popover__content,
+.ct-popover[data-side='top'][data-align='end'] .ct-popover__content {
+  transform: translateY(-4px);
+}
+
+/* ── Alignment (left / right sides) ───────────────────────────────── */
+
+.ct-popover[data-side='left'][data-align='center'] .ct-popover__content,
+.ct-popover[data-side='right'][data-align='center'] .ct-popover__content {
+  transform: translate(-4px, -50%);
+}
+
+.ct-popover[data-side='left'][data-align='start'] .ct-popover__content,
+.ct-popover[data-side='right'][data-align='start'] .ct-popover__content {
+  inset-block-start: 0;
+  transform: translateX(-4px);
+}
+
+.ct-popover[data-side='left'][data-align='end'] .ct-popover__content,
+.ct-popover[data-side='right'][data-align='end'] .ct-popover__content {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  transform: translateX(-4px);
+}
+
+/* right side: slide right */
+
+.ct-popover[data-side='right'][data-align='center'] .ct-popover__content {
+  transform: translate(4px, -50%);
+}
+
+.ct-popover[data-side='right'][data-align='start'] .ct-popover__content,
+.ct-popover[data-side='right'][data-align='end'] .ct-popover__content {
+  transform: translateX(4px);
+}
+
+/* ── Open state: resolve transforms ──────────────────────────────── */
+
+.ct-popover[data-state='open'][data-side='top'][data-align='center'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='bottom'][data-align='center'] .ct-popover__content {
+  transform: translate(-50%, 0);
+}
+
+.ct-popover[data-state='open'][data-side='top'][data-align='start'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='top'][data-align='end'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='bottom'][data-align='start'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='bottom'][data-align='end'] .ct-popover__content {
+  transform: translateY(0);
+}
+
+.ct-popover[data-state='open'][data-side='left'][data-align='center'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='right'][data-align='center'] .ct-popover__content {
+  transform: translate(0, -50%);
+}
+
+.ct-popover[data-state='open'][data-side='left'][data-align='start'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='left'][data-align='end'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='right'][data-align='start'] .ct-popover__content,
+.ct-popover[data-state='open'][data-side='right'][data-align='end'] .ct-popover__content {
+  transform: translateX(0);
+}
+
+/* ── Arrow ────────────────────────────────────────────────────────── */
+
+.ct-popover__arrow {
+  position: absolute;
+  width: var(--_po-arrow-size);
+  height: var(--_po-arrow-size);
+  background: var(--ct-popover-bg);
+  border: var(--border-thin) solid var(--ct-popover-border);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+.ct-popover[data-side='bottom'] .ct-popover__arrow {
+  inset-block-start: calc(var(--_po-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--_po-arrow-size) / 2);
+  border-block-end: none;
+  border-inline-end: none;
+}
+
+.ct-popover[data-side='top'] .ct-popover__arrow {
+  inset-block-end: calc(var(--_po-arrow-size) / -2);
+  inset-inline-start: calc(50% - var(--_po-arrow-size) / 2);
+  border-block-start: none;
+  border-inline-start: none;
+}
+
+.ct-popover[data-side='left'] .ct-popover__arrow {
+  inset-inline-end: calc(var(--_po-arrow-size) / -2);
+  inset-block-start: calc(50% - var(--_po-arrow-size) / 2);
+  border-inline-start: none;
+  border-block-end: none;
+}
+
+.ct-popover[data-side='right'] .ct-popover__arrow {
+  inset-inline-start: calc(var(--_po-arrow-size) / -2);
+  inset-block-start: calc(50% - var(--_po-arrow-size) / 2);
+  border-inline-end: none;
+  border-block-start: none;
+}
+
+/* ── Content sections ─────────────────────────────────────────────── */
+
+.ct-popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-popover__header h3 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-sm);
+}
+
+.ct-popover__body {
+  padding: var(--space-4) var(--space-5);
+  display: grid;
+  gap: var(--space-4);
+}
+
+.ct-popover__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+  border-top: var(--border-thin) solid var(--color-border-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-popover__content {
+    transition: none;
+  }
+}

package/components/progress-bar.css

@@ -0,0 +1,56 @@
+/* ── Progress Bar ── */
+
+.ct-progress-bar {
+  --ct-progress-height: 8px;
+  --ct-progress-radius: var(--radius-pill);
+  --ct-progress-bg: var(--color-bg-muted);
+  --ct-progress-fill: var(--color-brand-primary);
+
+  width: 100%;
+  height: var(--ct-progress-height);
+  border-radius: var(--ct-progress-radius);
+  background: var(--ct-progress-bg);
+  overflow: hidden;
+}
+
+.ct-progress-bar__track {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--ct-progress-fill);
+  transition: width var(--duration-normal) var(--easing-standard);
+}
+
+.ct-progress-bar--indeterminate .ct-progress-bar__track {
+  width: 30%;
+  animation: ct-progress-indeterminate var(--ct-progress-duration) var(--easing-standard) infinite;
+}
+
+.ct-progress-bar--sm {
+  --ct-progress-height: 4px;
+}
+
+.ct-progress-bar--lg {
+  --ct-progress-height: 12px;
+}
+
+.ct-progress-bar--info {
+  --ct-progress-fill: var(--color-state-info);
+}
+
+.ct-progress-bar--success {
+  --ct-progress-fill: var(--color-state-success);
+}
+
+.ct-progress-bar--warning {
+  --ct-progress-fill: var(--color-state-warning);
+}
+
+.ct-progress-bar--danger {
+  --ct-progress-fill: var(--color-state-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-progress-bar--indeterminate .ct-progress-bar__track {
+    animation: none;
+  }
+}

package/components/select-menu.css

@@ -0,0 +1,267 @@
+/* ─── Select Menu (Custom Dropdown Select) ──────────────────────── */
+
+.ct-select-menu {
+  --ct-select-menu-height: var(--control-height-md);
+  --ct-select-menu-font-size: var(--font-size-md);
+  --ct-select-menu-line-height: var(--line-height-md);
+  --ct-select-menu-padding-x: var(--space-5);
+  --ct-select-menu-content-max-height: 280px;
+  --ct-select-menu-option-padding-x: var(--space-4);
+  --ct-select-menu-option-padding-y: var(--space-3);
+
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* ── Trigger ────────────────────────────────────────────────────── */
+
+.ct-select-menu__trigger {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  height: var(--ct-select-menu-height);
+  padding: 0 var(--ct-select-menu-padding-x);
+  border: var(--border-thin) solid var(--ct-control-border);
+  border-radius: var(--ct-control-radius);
+  background: var(--ct-control-bg);
+  color: var(--ct-control-text);
+  font-size: var(--ct-select-menu-font-size);
+  line-height: var(--ct-select-menu-line-height);
+  cursor: pointer;
+  text-align: start;
+  transition: var(--ct-control-transition);
+}
+
+@media (hover: hover) {
+  .ct-select-menu__trigger:hover {
+    border-color: var(--ct-control-border-hover);
+  }
+}
+
+.ct-select-menu__trigger:focus-visible {
+  border-color: var(--ct-control-border-focus);
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-select-menu__trigger:disabled,
+.ct-select-menu__trigger[aria-disabled='true'] {
+  background: var(--ct-control-bg-disabled);
+  border-color: var(--color-border-subtle);
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+
+.ct-select-menu__trigger[aria-invalid='true'] {
+  border-color: var(--color-state-danger);
+}
+
+.ct-select-menu__trigger[aria-invalid='true']:focus-visible {
+  outline-color: var(--color-state-danger);
+}
+
+/* ── Value display ──────────────────────────────────────────────── */
+
+.ct-select-menu__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ct-select-menu__value[data-placeholder] {
+  color: var(--ct-control-placeholder);
+}
+
+/* ── Trigger icon (chevron) ─────────────────────────────────────── */
+
+.ct-select-menu__icon {
+  flex-shrink: 0;
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  color: var(--color-text-muted);
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-select-menu[data-state='open'] .ct-select-menu__icon {
+  transform: rotate(180deg);
+}
+
+/* ── Content (dropdown panel) ───────────────────────────────────── */
+
+.ct-select-menu__content {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-start: calc(100% + var(--space-2));
+  z-index: var(--z-dropdown);
+  max-height: var(--ct-select-menu-content-max-height);
+  overflow-y: auto;
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-dropdown);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px);
+  transition: opacity var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard),
+    visibility 0s linear var(--duration-fast);
+}
+
+.ct-select-menu[data-state='open'] .ct-select-menu__content {
+  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;
+}
+
+/* Flip above when data-side="top" */
+
+.ct-select-menu[data-side='top'] .ct-select-menu__content {
+  inset-block-start: auto;
+  inset-block-end: calc(100% + var(--space-2));
+  transform: translateY(-4px);
+}
+
+.ct-select-menu[data-side='top'][data-state='open'] .ct-select-menu__content {
+  transform: translateY(0);
+}
+
+/* ── Option ─────────────────────────────────────────────────────── */
+
+.ct-select-menu__option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--ct-select-menu-option-padding-y) var(--ct-select-menu-option-padding-x);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+  font-size: var(--ct-select-menu-font-size);
+  line-height: var(--ct-select-menu-line-height);
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-select-menu__option:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-select-menu__option[data-highlighted] {
+  background: var(--color-bg-muted);
+  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline-offset: -2px;
+}
+
+.ct-select-menu__option[aria-selected='true'] {
+  color: var(--color-brand-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.ct-select-menu__option[aria-selected='true'] .ct-select-menu__option-check {
+  opacity: 1;
+}
+
+.ct-select-menu__option[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* ── Option parts ───────────────────────────────────────────────── */
+
+.ct-select-menu__option-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-select-menu__option-icon {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ct-select-menu__option-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.ct-select-menu__option-description {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* ── Group ──────────────────────────────────────────────────────── */
+
+.ct-select-menu__group {
+  padding: var(--space-1) 0;
+}
+
+.ct-select-menu__group + .ct-select-menu__group {
+  border-top: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-select-menu__group-label {
+  padding: var(--space-2) var(--ct-select-menu-option-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-select-menu__separator {
+  height: 1px;
+  background: var(--color-border-subtle);
+  margin: var(--space-2) 0;
+}
+
+/* ── Sizes ──────────────────────────────────────────────────────── */
+
+.ct-select-menu--sm {
+  --ct-select-menu-height: var(--control-height-sm);
+  --ct-select-menu-font-size: var(--font-size-sm);
+  --ct-select-menu-line-height: var(--line-height-sm);
+  --ct-select-menu-padding-x: var(--space-4);
+  --ct-select-menu-option-padding-y: var(--space-2);
+}
+
+.ct-select-menu--lg {
+  --ct-select-menu-height: var(--control-height-lg);
+  --ct-select-menu-font-size: var(--font-size-lg);
+  --ct-select-menu-line-height: var(--line-height-lg);
+  --ct-select-menu-padding-x: var(--space-6);
+  --ct-select-menu-option-padding-y: var(--space-4);
+}
+
+/* ── Reduced motion ─────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-select-menu__content,
+  .ct-select-menu__icon {
+    transition: none;
+  }
+}

package/components/select.css

@@ -0,0 +1,30 @@
+.ct-select-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.ct-select-wrap::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--space-4);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.75em;
+  height: 0.5em;
+  background-color: var(--color-text-muted);
+  --_chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--_chevron);
+  mask-image: var(--_chevron);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.ct-select-wrap > .ct-select {
+  width: 100%;
+}
+
+.ct-select {
+  appearance: none;
+  padding-inline-end: calc(var(--space-4) + 0.75em + var(--space-4));
+}