@neuravision/construct 1.1.0

package/components/datepicker.css

@@ -0,0 +1,268 @@
+/* ─── Datepicker ────────────────────────────────────────────────── */
+
+.ct-datepicker {
+  position: relative;
+  display: inline-block;
+}
+
+.ct-datepicker__popover {
+  position: absolute;
+  inset-block-start: calc(100% + var(--space-2));
+  inset-inline-start: 0;
+  width: min(90vw, var(--ct-popover-width));
+  padding: var(--space-5);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-dropdown);
+  z-index: var(--z-dropdown);
+  display: none;
+}
+
+.ct-datepicker[data-state='open'] .ct-datepicker__popover {
+  display: grid;
+  gap: var(--space-4);
+}
+
+/* ── Header ─────────────────────────────────────────────────────── */
+
+.ct-datepicker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.ct-datepicker__title {
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@media (hover: hover) {
+  .ct-datepicker__title:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-datepicker__title:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Day grid ───────────────────────────────────────────────────── */
+
+.ct-datepicker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: var(--space-2);
+  text-align: center;
+  justify-items: center;
+}
+
+.ct-datepicker__row {
+  display: contents;
+}
+
+.ct-datepicker__weekday {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+.ct-datepicker__day {
+  width: min(100%, var(--ct-date-day-size));
+  aspect-ratio: 1;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-datepicker__day:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-datepicker__day:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-datepicker__day[aria-selected='true'] {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+}
+
+.ct-datepicker__day[data-outside='true'] {
+  color: var(--color-text-muted);
+}
+
+.ct-datepicker__day[data-today='true'] {
+  border: var(--border-thin) solid var(--color-brand-accent);
+}
+
+.ct-datepicker__day:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ── Keyboard highlight ─────────────────────────────────────────── */
+
+.ct-datepicker__day[data-highlighted] {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+/* ── Unavailable days ───────────────────────────────────────────── */
+
+.ct-datepicker__day[data-unavailable] {
+  text-decoration: line-through;
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Range selection ────────────────────────────────────────────── */
+
+.ct-datepicker__day[data-in-range] {
+  background: var(--color-brand-primary-surface, color-mix(in srgb, var(--color-brand-primary) 12%, transparent));
+  border-radius: 0;
+}
+
+.ct-datepicker__day[data-range-start] {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+.ct-datepicker__day[data-range-end] {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.ct-datepicker__day[data-range-start][data-range-end] {
+  border-radius: var(--radius-sm);
+}
+
+/* ── Month grid (3×4) ───────────────────────────────────────────── */
+
+.ct-datepicker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+  text-align: center;
+}
+
+.ct-datepicker__month {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  padding: var(--space-3) var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-datepicker__month:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-datepicker__month:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-datepicker__month[aria-selected='true'] {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+}
+
+.ct-datepicker__month[data-highlighted] {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+.ct-datepicker__month:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Year grid (3×4) ────────────────────────────────────────────── */
+
+.ct-datepicker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+  text-align: center;
+}
+
+.ct-datepicker__year {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  padding: var(--space-3) var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-datepicker__year:hover {
+    background: var(--color-bg-muted);
+  }
+}
+
+.ct-datepicker__year:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-datepicker__year[aria-selected='true'] {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+}
+
+.ct-datepicker__year[data-highlighted] {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+.ct-datepicker__year:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-datepicker__day,
+  .ct-datepicker__month,
+  .ct-datepicker__year {
+    transition: none;
+  }
+}

package/components/divider.css

@@ -0,0 +1,73 @@
+/* ── Divider ── */
+
+.ct-divider {
+  --ct-divider-color: var(--color-border-default);
+  --ct-divider-width: 1px;
+  --ct-divider-spacing: var(--space-4);
+
+  border: none;
+  background: var(--ct-divider-color);
+  height: var(--ct-divider-width);
+  width: 100%;
+  margin-block: var(--ct-divider-spacing);
+}
+
+/* Vertical */
+
+.ct-divider--vertical {
+  width: var(--ct-divider-width);
+  height: auto;
+  align-self: stretch;
+  margin-block: 0;
+  margin-inline: var(--ct-divider-spacing);
+}
+
+/* Color variants */
+
+.ct-divider--strong {
+  --ct-divider-color: var(--color-border-strong);
+}
+
+.ct-divider--muted {
+  --ct-divider-color: var(--color-border-muted);
+}
+
+/* Spacing variants */
+
+.ct-divider--sm {
+  --ct-divider-spacing: var(--space-1);
+}
+
+.ct-divider--lg {
+  --ct-divider-spacing: var(--space-8);
+}
+
+.ct-divider--none {
+  --ct-divider-spacing: 0;
+}
+
+/* Labeled */
+
+.ct-divider--labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  background: none;
+  height: auto;
+}
+
+.ct-divider--labeled::before,
+.ct-divider--labeled::after {
+  content: '';
+  flex: 1;
+  height: var(--ct-divider-width);
+  background: var(--ct-divider-color);
+}
+
+.ct-divider__label {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}

package/components/drawer.css

@@ -0,0 +1,167 @@
+/* ── Drawer ────────────────────────────────────────── */
+
+.ct-drawer {
+  --ct-drawer-size: 400px;
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  pointer-events: none;
+}
+
+.ct-drawer::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--color-overlay-scrim);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-normal) var(--easing-standard),
+    visibility var(--duration-normal) var(--easing-standard);
+}
+
+.ct-drawer[data-state='open'] {
+  pointer-events: auto;
+}
+
+.ct-drawer[data-state='open']::before {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ct-drawer__panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-modal);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  visibility: hidden;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: min(var(--ct-drawer-size), 100vw);
+  border-inline-start: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  translate: 100% 0;
+  transition: translate var(--duration-normal) var(--easing-standard),
+    visibility 0s linear var(--duration-normal);
+}
+
+.ct-drawer[data-state='open'] .ct-drawer__panel {
+  visibility: visible;
+  translate: 0 0;
+  transition: translate var(--duration-normal) var(--easing-standard),
+    visibility 0s linear 0s;
+}
+
+/* Side: left */
+
+.ct-drawer--left .ct-drawer__panel {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  border-inline-start: none;
+  border-inline-end: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  translate: -100% 0;
+}
+
+/* Side: bottom */
+
+.ct-drawer--bottom .ct-drawer__panel {
+  inset-block: auto 0;
+  inset-inline: 0;
+  width: 100%;
+  height: min(var(--ct-drawer-size), 80vh);
+  border-inline-start: none;
+  border-block-start: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  translate: 0 100%;
+}
+
+/* Side: top */
+
+.ct-drawer--top .ct-drawer__panel {
+  inset-block: 0 auto;
+  inset-inline: 0;
+  width: 100%;
+  height: min(var(--ct-drawer-size), 80vh);
+  border-inline-start: none;
+  border-block-end: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  translate: 0 -100%;
+}
+
+/* Sizes */
+
+.ct-drawer--sm {
+  --ct-drawer-size: 320px;
+}
+
+.ct-drawer--lg {
+  --ct-drawer-size: 560px;
+}
+
+.ct-drawer--full {
+  --ct-drawer-size: 100vw;
+}
+
+.ct-drawer--full .ct-drawer__panel {
+  border: none;
+  border-radius: 0;
+}
+
+.ct-drawer--full.ct-drawer--bottom .ct-drawer__panel,
+.ct-drawer--full.ct-drawer--top .ct-drawer__panel {
+  height: 100vh;
+}
+
+/* Content sections */
+
+.ct-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-7) var(--space-7) var(--space-4);
+  border-bottom: var(--border-thin) solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+
+.ct-drawer__body {
+  padding: var(--space-6) var(--space-7);
+  display: grid;
+  gap: var(--space-4);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.ct-drawer__footer {
+  padding: var(--space-5) var(--space-7) var(--space-6);
+  border-top: var(--border-thin) solid var(--color-border-subtle);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+/* Responsive: left/right drawers expand to full width on small viewports */
+
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-drawer:not(.ct-drawer--bottom):not(.ct-drawer--top):not(.ct-drawer--full) .ct-drawer__panel {
+    width: 100vw;
+    border-radius: 0;
+    border-inline: none;
+  }
+}
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-drawer::before,
+  .ct-drawer__panel {
+    transition: none;
+  }
+}