canny-ui 3.0.0 → 4.0.0

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/_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;
+}

package/src/components/_uploader.scss

@@ -0,0 +1,111 @@
+@use '../tokens/primitives' as *;
+
+// FileUploader — responsive drag-and-drop dropzone.
+
+.cny-uploader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $space-3;
+  width: 100%;
+  box-sizing: border-box;
+  // fluid padding: comfortable on desktop, tight on small screens
+  padding: clamp(#{$space-4}, 4vw, #{$space-8}) clamp(#{$space-3}, 3vw, #{$space-6});
+  text-align: center;
+  border: 1.5px dashed var(--border-color-strong);
+  border-radius: $radius-lg;
+  background: var(--bg-surface-low);
+  color: var(--text-secondary);
+  font-family: var(--font-body);
+  cursor: pointer;
+  transition:
+    border-color 140ms ease,
+    background-color 140ms ease,
+    color 140ms ease;
+
+  &:hover:not(.is-disabled) {
+    border-color: var(--color-primary);
+    color: var(--text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  &.is-dragging {
+    border-color: var(--color-primary);
+    border-style: solid;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  // roomier preset
+  &-md {
+    min-height: 150px;
+  }
+
+  // compact preset — collapses to a single inline row on wider screens
+  &-sm {
+    gap: $space-2;
+    padding: clamp(#{$space-3}, 2.5vw, #{$space-4});
+    min-height: 0;
+  }
+}
+
+.cny-uploader-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+
+  svg {
+    width: clamp(24px, 6vw, 34px);
+    height: clamp(24px, 6vw, 34px);
+  }
+}
+
+.cny-uploader-sm .cny-uploader-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.cny-uploader-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cny-uploader-label {
+  font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
+  font-weight: 550;
+  line-height: 1.35;
+  color: var(--text-primary);
+  text-wrap: balance;
+}
+
+.cny-uploader-hint {
+  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
+  color: var(--text-muted);
+  text-wrap: balance;
+}
+
+// stack the icon beside the text on the compact preset once there's room
+@media (min-width: 420px) {
+  .cny-uploader-sm {
+    flex-direction: row;
+    justify-content: center;
+    text-align: start;
+  }
+
+  .cny-uploader-sm .cny-uploader-text {
+    align-items: flex-start;
+  }
+}