canny-ui 2.0.0 → 4.0.0

package/src/components/_tabs.scss

@@ -0,0 +1,148 @@
+@use '../tokens/primitives' as *;
+
+// Tabs — three variants: line (default), pills, segmented.
+
+.cny-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &[data-orientation='vertical'] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 24px;
+  }
+}
+
+// ── List ──────────────────────────────────────────────────────
+.cny-tabs-list {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  flex-wrap: wrap;
+
+  .cny-tabs[data-orientation='vertical'] & {
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: nowrap;
+  }
+}
+
+// ── Trigger ───────────────────────────────────────────────────
+.cny-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: 0;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 550;
+  color: var(--text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
+
+  &-icon { display: inline-flex; align-items: center; }
+  &-badge { display: inline-flex; align-items: center; }
+
+  &:hover { color: var(--text-secondary); }
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
+    outline-offset: 2px;
+    border-radius: var(--radius-xs);
+  }
+  &:disabled,
+  &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+}
+
+// ── Sizes ─────────────────────────────────────────────────────
+.cny-tabs.size-sm .cny-tabs-trigger { font-size: 0.8125rem; }
+.cny-tabs.size-lg .cny-tabs-trigger { font-size: 0.9375rem; }
+
+// ── Variant: line (underline) ─────────────────────────────────
+.cny-tabs.variant-line {
+  .cny-tabs-list {
+    border-bottom: 1px solid var(--hairline-color);
+    gap: 4px;
+  }
+  .cny-tabs-trigger {
+    padding: 10px 14px;
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+
+    &[data-state='active'] {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+  }
+
+  &.size-sm .cny-tabs-trigger { padding: 7px 10px; }
+  &.size-lg .cny-tabs-trigger { padding: 13px 18px; }
+}
+
+.cny-tabs.variant-line[data-orientation='vertical'] {
+  .cny-tabs-list { border-bottom: 0; border-right: 1px solid var(--hairline-color); }
+  .cny-tabs-trigger {
+    margin-bottom: 0;
+    margin-right: -1px;
+    border-bottom: 0;
+    border-right: 2px solid transparent;
+    justify-content: flex-start;
+    text-align: left;
+    &[data-state='active'] { border-right-color: var(--color-primary); border-bottom: 0; }
+  }
+}
+
+// ── Variant: pills ────────────────────────────────────────────
+.cny-tabs.variant-pills {
+  .cny-tabs-list { gap: 4px; }
+  .cny-tabs-trigger {
+    padding: 7px 12px;
+    border-radius: 999px;
+
+    &:hover { background: var(--bg-surface-low); }
+    &[data-state='active'] {
+      color: var(--color-primary);
+      background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+  }
+  &.size-sm .cny-tabs-trigger { padding: 5px 10px; }
+  &.size-lg .cny-tabs-trigger { padding: 9px 14px; }
+}
+
+// ── Variant: segmented ────────────────────────────────────────
+.cny-tabs.variant-segmented {
+  .cny-tabs-list {
+    padding: 4px;
+    background: var(--bg-surface-low);
+    border: 1px solid var(--hairline-color);
+    border-radius: 999px;
+    gap: 2px;
+  }
+  .cny-tabs-trigger {
+    padding: 6px 14px;
+    border-radius: 999px;
+
+    &:hover { color: var(--text-primary); }
+    &[data-state='active'] {
+      color: var(--text-primary);
+      background: var(--bg-surface-lowest);
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px var(--hairline-color);
+    }
+  }
+  &.size-sm .cny-tabs-trigger { padding: 4px 10px; }
+  &.size-lg .cny-tabs-trigger { padding: 8px 18px; }
+}
+
+// ── Content panel ─────────────────────────────────────────────
+.cny-tabs-content {
+  outline: none;
+  flex: 1 1 auto;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-xs);
+  }
+}

package/src/components/_timeline.scss

@@ -0,0 +1,368 @@
+@use '../tokens/primitives' as *;
+
+// Timeline — activity / history rail.
+// Layouts: position right (default) / left / alternate, plus horizontal orientation.
+// Slots: opposite-content + card / elevated content. Density via size sm / md / lg.
+
+.cny-timeline {
+  // density tokens (md defaults) — overridden by size modifiers
+  --tl-dot: 14px;
+  --tl-dot-icon: 24px;
+  --tl-glyph: 14px;
+  --tl-line: 2px;
+  --tl-font: 0.875rem;
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cny-timeline-sm {
+  --tl-dot: 10px;
+  --tl-dot-icon: 20px;
+  --tl-glyph: 12px;
+  --tl-line: 2px;
+  --tl-font: 0.8125rem;
+}
+
+.cny-timeline-lg {
+  --tl-dot: 18px;
+  --tl-dot-icon: 30px;
+  --tl-glyph: 18px;
+  --tl-line: 3px;
+  --tl-font: 0.9375rem;
+}
+
+// ---- item: flex row [opposite] [separator] [content] ----
+.cny-timeline-item {
+  display: flex;
+  align-items: stretch;
+  gap: $space-3;
+  min-height: 44px;
+}
+
+.cny-timeline-separator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+}
+
+// ---- dot ----
+.cny-timeline-dot {
+  --dot-color: var(--color-neutral);
+  --dot-soft: var(--bg-surface-low);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--tl-dot);
+  height: var(--tl-dot);
+  border-radius: $radius-full;
+  color: var(--text-on-solid);
+  font-size: 0.7rem;
+  font-weight: 600;
+
+  // a dot carrying a glyph (icon or number) grows to hold it; the glyph is
+  // normalised so callers don't have to hand-tune the icon size
+  &-icon {
+    width: var(--tl-dot-icon);
+    height: var(--tl-dot-icon);
+
+    svg {
+      width: var(--tl-glyph);
+      height: var(--tl-glyph);
+    }
+  }
+
+  &-filled {
+    background: var(--dot-color);
+  }
+
+  &-outlined {
+    background: transparent;
+    border: 2px solid var(--dot-color);
+    color: var(--dot-color);
+  }
+
+  &-soft {
+    background: var(--dot-soft);
+    color: var(--dot-color);
+  }
+
+  &-primary {
+    --dot-color: var(--color-primary);
+    --dot-soft: var(--color-primary-soft);
+  }
+
+  &-success {
+    --dot-color: var(--color-success);
+    --dot-soft: var(--color-success-soft);
+  }
+
+  &-warning {
+    --dot-color: var(--color-warning);
+    --dot-soft: var(--color-warning-soft);
+  }
+
+  &-danger {
+    --dot-color: var(--color-danger);
+    --dot-soft: var(--color-danger-soft);
+  }
+
+  &-info {
+    --dot-color: var(--color-info);
+    --dot-soft: var(--color-info-soft);
+  }
+
+  &-neutral {
+    --dot-color: var(--color-neutral);
+    --dot-soft: var(--bg-surface-low);
+  }
+
+  &-active {
+    animation: cny-timeline-pulse 1.8s ease-out infinite;
+  }
+}
+
+@keyframes cny-timeline-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-color) 45%, transparent);
+  }
+
+  70%,
+  100% {
+    box-shadow: 0 0 0 9px color-mix(in srgb, var(--dot-color) 0%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-timeline-dot-active {
+    animation: none;
+    box-shadow: 0 0 0 4px var(--dot-soft);
+  }
+}
+
+// ---- connector ----
+.cny-timeline-connector {
+  --conn-color: var(--hairline-color);
+  flex: 1 1 auto;
+  width: var(--tl-line);
+  min-height: 12px;
+  margin: 4px 0;
+  border-radius: $radius-full;
+  background: var(--conn-color);
+
+  // completed-segment tints (work in both orientations)
+  &-primary {
+    --conn-color: var(--color-primary);
+  }
+
+  &-success {
+    --conn-color: var(--color-success);
+  }
+
+  &-warning {
+    --conn-color: var(--color-warning);
+  }
+
+  &-danger {
+    --conn-color: var(--color-danger);
+  }
+
+  &-info {
+    --conn-color: var(--color-info);
+  }
+
+  &-neutral {
+    --conn-color: var(--color-neutral);
+  }
+
+  // line styles — vertical default runs top→bottom (horizontal override below)
+  &-dashed {
+    border-radius: 0;
+    background: repeating-linear-gradient(to bottom, var(--conn-color) 0 5px, transparent 5px 9px);
+  }
+
+  &-dotted {
+    border-radius: 0;
+    background: repeating-linear-gradient(to bottom, var(--conn-color) 0 2px, transparent 2px 6px);
+  }
+}
+
+// ---- content ----
+.cny-timeline-content {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: $space-4;
+  font-family: var(--font-body);
+  font-size: var(--tl-font);
+  color: var(--text-primary);
+}
+
+.cny-timeline-content-card {
+  // self-contained box model — keeps card and plain items on a consistent rhythm
+  padding: $space-3 $space-4;
+  margin-bottom: $space-4;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-surface-lowest);
+}
+
+.cny-timeline-content-elevated {
+  border-color: transparent;
+  box-shadow: var(--shadow-md);
+}
+
+.cny-timeline-content-accent {
+  --accent: var(--color-neutral);
+  border-inline-start: 3px solid var(--accent);
+}
+
+.cny-timeline-content-accent-primary {
+  --accent: var(--color-primary);
+}
+
+.cny-timeline-content-accent-success {
+  --accent: var(--color-success);
+}
+
+.cny-timeline-content-accent-warning {
+  --accent: var(--color-warning);
+}
+
+.cny-timeline-content-accent-danger {
+  --accent: var(--color-danger);
+}
+
+.cny-timeline-content-accent-info {
+  --accent: var(--color-info);
+}
+
+.cny-timeline-content-accent-neutral {
+  --accent: var(--color-neutral);
+}
+
+.cny-timeline-opposite-content {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: $space-4;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  text-align: right;
+}
+
+.cny-timeline-item:last-child .cny-timeline-connector {
+  display: none;
+}
+
+// cards pad their content down, so drop the dot to meet the card's first line
+.cny-timeline-item:has(.cny-timeline-content-card) .cny-timeline-separator {
+  padding-top: $space-3;
+}
+
+// ---- position: left (mirror) ----
+.cny-timeline-left .cny-timeline-item {
+  flex-direction: row-reverse;
+}
+
+.cny-timeline-left .cny-timeline-opposite-content {
+  text-align: left;
+}
+
+// ---- position: alternate (zig-zag, rail centered) ----
+.cny-timeline-alternate .cny-timeline-item:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.cny-timeline-alternate .cny-timeline-item:nth-child(even) .cny-timeline-opposite-content {
+  text-align: left;
+}
+
+// reserve the empty side so the rail stays centered when no opposite-content is supplied
+.cny-timeline-alternate .cny-timeline-item:not(:has(.cny-timeline-opposite-content))::before {
+  content: '';
+  flex: 1;
+  min-width: 0;
+}
+
+// ---- orientation: horizontal (centered stepper) ----
+.cny-timeline-horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.cny-timeline-horizontal .cny-timeline-item {
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  min-height: 0;
+}
+
+// dot centered in its segment; connector spans the GAP between this dot and the next
+.cny-timeline-horizontal .cny-timeline-separator {
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.cny-timeline-horizontal .cny-timeline-dot {
+  position: relative;
+  z-index: 1;
+  width: calc(var(--tl-dot-icon) + 4px);
+  height: calc(var(--tl-dot-icon) + 4px);
+  font-size: 0.8rem;
+
+  &.cny-timeline-dot-icon svg {
+    width: calc(var(--tl-glyph) + 2px);
+    height: calc(var(--tl-glyph) + 2px);
+  }
+}
+
+.cny-timeline-horizontal .cny-timeline-connector {
+  position: absolute;
+  top: 50%;
+  // start just past this dot's edge, span the gap to the next dot's edge
+  left: calc(50% + var(--tl-dot-icon) / 2 + 6px);
+  width: calc(100% - var(--tl-dot-icon) - 12px);
+  height: var(--tl-line);
+  min-height: 0;
+  margin: 0;
+  transform: translateY(-50%);
+}
+
+// horizontal dashes run left→right
+.cny-timeline-horizontal .cny-timeline-connector-dashed {
+  background: repeating-linear-gradient(to right, var(--conn-color) 0 5px, transparent 5px 9px);
+}
+
+.cny-timeline-horizontal .cny-timeline-connector-dotted {
+  background: repeating-linear-gradient(to right, var(--conn-color) 0 2px, transparent 2px 6px);
+}
+
+.cny-timeline-horizontal .cny-timeline-content {
+  max-width: 16ch;
+  margin-inline: auto;
+  padding: $space-3 $space-2 0;
+  font-size: var(--tl-font);
+  line-height: 1.35;
+  text-wrap: balance;
+}
+
+.cny-timeline-horizontal .cny-timeline-content-card {
+  max-width: none;
+  text-align: start;
+}
+
+.cny-timeline-horizontal .cny-timeline-opposite-content {
+  max-width: 16ch;
+  margin-inline: auto;
+  padding: 0 $space-2 $space-2;
+  text-align: center;
+}

package/src/components/_tooltip-radix.scss

@@ -0,0 +1,37 @@
+@use '../tokens/primitives' as *;
+
+// Radix Tooltip — distinct from the legacy CSS-only [data-tooltip] pattern.
+
+@keyframes cny-tooltip-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.cny-tooltip-content {
+  z-index: 1020;
+  padding: 5px 9px;
+  background: var(--text-primary);
+  color: var(--bg-surface-lowest);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: -0.005em;
+  max-width: 240px;
+  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.25);
+  animation: cny-tooltip-in 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  user-select: none;
+  pointer-events: none;
+
+  &[data-side='top']    { transform-origin: bottom center; }
+  &[data-side='bottom'] { transform-origin: top center; }
+  &[data-side='left']   { transform-origin: right center; }
+  &[data-side='right']  { transform-origin: left center; }
+}
+
+.cny-tooltip-arrow { fill: var(--text-primary); }
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-tooltip-content { animation: none; }
+}

package/src/components/_tree.scss

@@ -0,0 +1,130 @@
+@use '../tokens/primitives' as *;
+
+// TreeView — folder / hierarchy browser.
+
+.cny-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.cny-tree-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-inline-start: 16px; // indent each level
+  animation: cny-tree-reveal 150ms ease;
+}
+
+@keyframes cny-tree-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-tree-group {
+    animation: none;
+  }
+}
+
+.cny-tree-item {
+  outline: none;
+}
+
+.cny-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  padding: 0 6px;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-secondary);
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+
+  &:hover {
+    background: var(--bg-surface-low);
+    color: var(--text-primary);
+  }
+
+  &.is-selected {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+    font-weight: 550;
+  }
+}
+
+// focus ring on the treeitem (roving tabindex lives on the <li>)
+.cny-tree-item:focus-visible > .cny-tree-row {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.cny-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: $radius-xs;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  svg {
+    transition: transform 140ms ease;
+  }
+
+  &.is-open svg {
+    transform: rotate(90deg);
+  }
+}
+
+.cny-tree-toggle-spacer {
+  display: inline-block;
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+.cny-tree-icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--text-muted);
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.cny-tree-row.is-selected .cny-tree-icon {
+  color: inherit;
+}
+
+.cny-tree-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}