canny-ui 2.0.0 → 4.0.0

package/src/components/_charts.scss

@@ -0,0 +1,130 @@
+@use '../tokens/primitives' as *;
+
+// Charts — from-scratch SVG bar & donut charts.
+
+.cny-chart {
+  width: 100%;
+  font-family: var(--font-body);
+}
+
+.cny-chart-responsive {
+  display: block;
+}
+
+.cny-chart-grid {
+  stroke: var(--hairline-color);
+  stroke-width: 1;
+}
+
+.cny-chart-axis {
+  fill: var(--text-muted);
+  font-size: 0.6875rem;
+}
+
+.cny-chart-bar {
+  transition: opacity 120ms ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.cny-chart-line {
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.cny-chart-area {
+  opacity: 0.16;
+}
+
+.cny-chart-dot {
+  stroke: var(--bg-surface-lowest);
+  stroke-width: 1.5;
+}
+
+.cny-chart-slice {
+  stroke: var(--bg-surface-lowest);
+  stroke-width: 2;
+  transition: opacity 120ms ease;
+
+  &.is-active {
+    opacity: 0.85;
+  }
+}
+
+.cny-chart-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+// floating tooltip
+.cny-chart-tooltip {
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 8px));
+  min-width: 120px;
+  padding: $space-2 $space-3;
+  border-radius: $radius-md;
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-md);
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.cny-chart-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.cny-chart-tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1.6;
+}
+
+.cny-chart-tooltip-label {
+  color: var(--text-secondary);
+}
+
+.cny-chart-tooltip-value {
+  margin-inline-start: auto;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+// legend
+.cny-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-2 $space-4;
+  justify-content: center;
+  margin-top: $space-2;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.cny-chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cny-chart-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex: none;
+}

package/src/components/_chip.scss

@@ -0,0 +1,122 @@
+@use '../tokens/primitives' as *;
+
+// Chip — compact label / status / filter pill / removable token.
+
+.cny-chip {
+  --chip-color: var(--text-secondary);
+  --chip-bg: var(--bg-surface-low);
+  --chip-border: var(--hairline-color);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 550;
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  background: var(--chip-bg);
+  color: var(--chip-color);
+  border: 1px solid var(--chip-border);
+  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
+  user-select: none;
+
+  &.sm {
+    height: 22px;
+    padding: 0 8px;
+    font-size: 0.6875rem;
+    gap: 4px;
+  }
+
+  &-icon, &-avatar {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
+  &-avatar { margin-left: -4px; }
+  &-label { line-height: 1; }
+
+  &-delete {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: -4px;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: currentColor;
+    opacity: 0.6;
+    cursor: pointer;
+    transition: opacity 120ms ease, background-color 120ms ease;
+
+    &:hover {
+      opacity: 1;
+      background: color-mix(in srgb, var(--chip-color) 15%, transparent);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--chip-color);
+      outline-offset: 1px;
+    }
+  }
+  .sm &-delete { width: 14px; height: 14px; margin-right: -3px; }
+
+  // Interactive (clickable) state
+  &.is-interactive {
+    cursor: pointer;
+    &:hover { transform: translateY(-1px); }
+    &:active { transform: translateY(0); }
+    &:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--chip-color) 60%, transparent);
+      outline-offset: 2px;
+    }
+  }
+  &.is-disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // ── Color tones ──
+  &.primary {
+    --chip-color: var(--color-primary);
+    --chip-bg: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    --chip-border: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  }
+  &.success {
+    --chip-color: var(--color-success);
+    --chip-bg: color-mix(in srgb, var(--color-success) 10%, transparent);
+    --chip-border: color-mix(in srgb, var(--color-success) 24%, transparent);
+  }
+  &.info {
+    --chip-color: var(--color-info);
+    --chip-bg: color-mix(in srgb, var(--color-info) 10%, transparent);
+    --chip-border: color-mix(in srgb, var(--color-info) 24%, transparent);
+  }
+  &.warning {
+    --chip-color: var(--color-warning);
+    --chip-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
+    --chip-border: color-mix(in srgb, var(--color-warning) 26%, transparent);
+  }
+  &.danger {
+    --chip-color: var(--color-danger);
+    --chip-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);
+    --chip-border: color-mix(in srgb, var(--color-danger) 26%, transparent);
+  }
+
+  // ── Variants ──
+  &.outline {
+    background: transparent;
+  }
+  &.solid.primary { background: var(--color-primary); color: var(--color-primary-on, #fff); border-color: var(--color-primary); }
+  &.solid.success { background: var(--color-success); color: var(--color-success-on, #fff); border-color: var(--color-success); }
+  &.solid.info    { background: var(--color-info);    color: var(--color-info-on, #fff);    border-color: var(--color-info); }
+  &.solid.warning { background: var(--color-warning); color: var(--color-warning-on, #fff); border-color: var(--color-warning); }
+  &.solid.danger  { background: var(--color-danger);  color: var(--color-danger-on, #fff);  border-color: var(--color-danger); }
+  &.solid.default { background: var(--text-primary);  color: var(--bg-surface-lowest);      border-color: var(--text-primary); }
+}

package/src/components/_confirm.scss

@@ -0,0 +1,11 @@
+@use '../tokens/primitives' as *;
+
+// ConfirmDialog — preset on Dialog. Inherits dialog chrome; only the body copy is styled.
+
+.cny-confirm-message {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}

package/src/components/_datatable.scss

@@ -0,0 +1,176 @@
+@use '../tokens/primitives' as *;
+
+// DataTable — server-driven data grid (sorting header, selection, pagination footer).
+
+.cny-dt {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  background: var(--bg-surface-lowest);
+  overflow: hidden;
+  font-family: var(--font-body);
+}
+
+// horizontal scroll keeps the grid responsive on narrow screens
+.cny-dt-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.cny-dt-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+
+  th,
+  td {
+    padding: $space-3 $space-4;
+    text-align: left;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-surface-low);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  tbody td {
+    border-bottom: 1px solid var(--hairline-color);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+}
+
+.cny-dt-left {
+  text-align: left;
+}
+.cny-dt-center {
+  text-align: center;
+}
+.cny-dt-right {
+  text-align: right;
+}
+
+.cny-dt-th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+// right-aligned headers push the sort affordance to the correct edge
+.cny-dt-right .cny-dt-th-inner {
+  flex-direction: row-reverse;
+}
+.cny-dt-center .cny-dt-th-inner {
+  justify-content: center;
+}
+
+.cny-dt-sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 120ms ease;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  &.is-sorted {
+    color: var(--color-primary);
+  }
+}
+
+.cny-dt-sort-icon {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.5;
+}
+
+// drag-to-resize handle on the right edge of each header cell
+.cny-dt-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 9px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 20%;
+    right: 4px;
+    width: 2px;
+    height: 60%;
+    border-radius: 2px;
+    background: transparent;
+    transition: background-color 120ms ease;
+  }
+
+  &:hover::after {
+    background: var(--color-primary);
+  }
+}
+
+.cny-dt-sortable.is-sorted .cny-dt-sort-icon {
+  opacity: 1;
+}
+
+.cny-dt-row {
+  transition: background-color 120ms ease;
+
+  &.is-clickable {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: var(--bg-surface-low);
+  }
+
+  &.is-selected {
+    background: var(--color-primary-soft);
+  }
+}
+
+.cny-dt-checkbox-cell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.cny-dt-empty {
+  padding: $space-8 $space-4;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.cny-dt-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-2;
+  padding: $space-2 $space-3;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-surface-low);
+}
+
+.cny-dt-count {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}

package/src/components/_dialog.scss

@@ -0,0 +1,113 @@
+@use '../tokens/primitives' as *;
+
+// Dialog (Modal) — portaled, centered, focus-trapped.
+
+@keyframes cny-dialog-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cny-dialog-content-in {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+.cny-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(9, 9, 11, 0.55);
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  animation: cny-dialog-overlay-in 160ms ease-out;
+}
+.cny-dark .cny-dialog-overlay { background: rgba(0, 0, 0, 0.7); }
+
+.cny-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 32px);
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow:
+    0 24px 60px -24px rgba(0, 0, 0, 0.45),
+    0 0 0 1px var(--border-color);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  animation: cny-dialog-content-in 200ms cubic-bezier(0.2, 0, 0, 1);
+  outline: none;
+  overflow: hidden;
+
+  &.size-sm   { width: min(420px, calc(100vw - 32px)); }
+  &.size-md   { width: min(560px, calc(100vw - 32px)); }
+  &.size-lg   { width: min(760px, calc(100vw - 32px)); }
+  &.size-xl   { width: min(960px, calc(100vw - 32px)); }
+  &.size-full { width: calc(100vw - 32px); height: calc(100vh - 32px); }
+}
+
+.cny-dialog-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--hairline-color);
+}
+
+.cny-dialog-titles { flex: 1 1 auto; min-width: 0; }
+.cny-dialog-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.005em;
+  color: var(--text-primary);
+}
+.cny-dialog-description {
+  margin: 4px 0 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+
+.cny-dialog-close {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: color 120ms ease, background-color 120ms ease;
+
+  &:hover { color: var(--text-primary); background: var(--bg-surface-low); }
+  &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
+}
+
+.cny-dialog-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 18px 20px;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.cny-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--hairline-color);
+  background: var(--bg-surface-lowest);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-dialog-overlay,
+  .cny-dialog-content { animation: none; }
+}

package/src/components/_drawer.scss

@@ -0,0 +1,133 @@
+@use '../tokens/primitives' as *;
+
+// Drawer / Sheet — slide-in panel from any edge.
+
+@keyframes cny-drawer-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cny-drawer-in-right  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
+@keyframes cny-drawer-in-left   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes cny-drawer-in-top    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes cny-drawer-in-bottom { from { transform: translateY(100%); }  to { transform: translateY(0); } }
+
+.cny-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(9, 9, 11, 0.55);
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  animation: cny-drawer-overlay-in 160ms ease-out;
+}
+.cny-dark .cny-drawer-overlay { background: rgba(0, 0, 0, 0.7); }
+
+.cny-drawer-content {
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  outline: none;
+
+  // ── Side anchoring ──
+  &.side-right {
+    top: 0; right: 0; bottom: 0;
+    border-left: 1px solid var(--border-color);
+    animation: cny-drawer-in-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    &.size-sm { width: min(320px, 90vw); }
+    &.size-md { width: min(420px, 90vw); }
+    &.size-lg { width: min(560px, 92vw); }
+    &.size-xl { width: min(720px, 96vw); }
+  }
+  &.side-left {
+    top: 0; left: 0; bottom: 0;
+    border-right: 1px solid var(--border-color);
+    animation: cny-drawer-in-left 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    &.size-sm { width: min(320px, 90vw); }
+    &.size-md { width: min(420px, 90vw); }
+    &.size-lg { width: min(560px, 92vw); }
+    &.size-xl { width: min(720px, 96vw); }
+  }
+  &.side-top {
+    top: 0; left: 0; right: 0;
+    border-bottom: 1px solid var(--border-color);
+    animation: cny-drawer-in-top 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    &.size-sm { height: min(40vh, 320px); }
+    &.size-md { height: min(50vh, 480px); }
+    &.size-lg { height: min(60vh, 640px); }
+    &.size-xl { height: min(80vh, 800px); }
+  }
+  &.side-bottom {
+    bottom: 0; left: 0; right: 0;
+    border-top: 1px solid var(--border-color);
+    animation: cny-drawer-in-bottom 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    &.size-sm { height: min(40vh, 320px); }
+    &.size-md { height: min(50vh, 480px); }
+    &.size-lg { height: min(60vh, 640px); }
+    &.size-xl { height: min(80vh, 800px); }
+  }
+}
+
+.cny-drawer-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--hairline-color);
+}
+
+.cny-drawer-titles { flex: 1 1 auto; min-width: 0; }
+.cny-drawer-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.005em;
+  color: var(--text-primary);
+}
+.cny-drawer-description {
+  margin: 4px 0 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+
+.cny-drawer-close {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: color 120ms ease, background-color 120ms ease;
+
+  &:hover { color: var(--text-primary); background: var(--bg-surface-low); }
+  &:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
+}
+
+.cny-drawer-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 18px 20px;
+  color: var(--text-secondary);
+}
+
+.cny-drawer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--hairline-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-drawer-overlay,
+  .cny-drawer-content { animation: none; }
+}