canny-ui 3.0.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canny-ui",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "description": "Pure CSS foundation for the Canny-UI design system — tokens, layout utilities, and a battery of enterprise components, shipped as one flat stylesheet.",
   "main": "dist/canny-ui.min.css",
   "style": "dist/canny-ui.min.css",

package/src/canny-ui.scss

@@ -22,11 +22,19 @@
 @use 'components/command-palette';
 @use 'components/toast';
 @use 'components/dialog';
+@use 'components/confirm';
 @use 'components/drawer';
 @use 'components/menu';
 @use 'components/tooltip-radix';
 @use 'components/popover';
 @use 'components/chip';
+@use 'components/badge';
+@use 'components/timeline';
+@use 'components/tree';
+@use 'components/uploader';
+@use 'components/panels';
+@use 'components/datatable';
+@use 'components/charts';
 @use 'components/list';
 @use 'components/tabs';
 @use 'components/autocomplete';

package/src/components/_badge.scss

@@ -0,0 +1,50 @@
+@use '../tokens/primitives' as *;
+
+// Badge — count / dot indicator anchored to a child, or standalone.
+
+.cny-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  &-standalone { display: inline-flex; }
+
+  &-indicator {
+    --badge-bg: var(--color-danger);
+    --badge-fg: var(--color-danger-on);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: $radius-full;
+    font-family: var(--font-body);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--badge-fg);
+    background: var(--badge-bg);
+  }
+
+  &-dot {
+    min-width: 8px;
+    width: 8px;
+    height: 8px;
+    padding: 0;
+  }
+
+  &-top-right    { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
+  &-top-left     { position: absolute; top: 0; left: 0;  transform: translate(-50%, -50%); }
+  &-bottom-right { position: absolute; bottom: 0; right: 0; transform: translate(50%, 50%); }
+  &-bottom-left  { position: absolute; bottom: 0; left: 0;  transform: translate(-50%, 50%); }
+
+  &-primary { --badge-bg: var(--color-primary); --badge-fg: var(--color-primary-on); }
+  &-success { --badge-bg: var(--color-success); --badge-fg: var(--color-success-on); }
+  &-warning { --badge-bg: var(--color-warning); --badge-fg: var(--color-warning-on); }
+  &-danger  { --badge-bg: var(--color-danger);  --badge-fg: var(--color-danger-on); }
+  &-info    { --badge-bg: var(--color-info);    --badge-fg: var(--color-info-on); }
+  &-neutral { --badge-bg: var(--color-neutral); --badge-fg: var(--color-neutral-on); }
+}

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/_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/_panels.scss

@@ -0,0 +1,63 @@
+@use '../tokens/primitives' as *;
+
+// PanelGroup — resizable split panels. Percentage-based, so it fills any container responsively.
+
+.cny-panel-group {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &.is-vertical {
+    flex-direction: column;
+  }
+}
+
+.cny-panel {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.cny-panel-handle {
+  position: relative;
+  flex: none;
+  align-self: stretch;
+  background: var(--hairline-color);
+  transition: background-color 120ms ease;
+  touch-action: none;
+  z-index: 1;
+
+  // generous invisible hit area around the thin visible line
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background: var(--color-primary);
+    outline: none;
+  }
+
+  &-h {
+    width: 5px;
+    cursor: col-resize;
+  }
+
+  &-v {
+    height: 5px;
+    cursor: row-resize;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: default;
+
+    &:hover {
+      background: var(--hairline-color);
+    }
+  }
+}