canny-ui 1.0.0 → 3.0.0

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

package/src/components/_forms.scss

@@ -4,11 +4,19 @@
 // All use the native element with class-based styling (no JS required).
 
 // ── Checkbox & Radio ─────────────────────────────────────────────────────
+// Two markup patterns supported per element:
+//   1. Legacy native input — <input type="checkbox|radio" class="checkbox|radio">
+//      uses :checked / :indeterminate.
+//   2. Radix React component — <button class="checkbox|radio"
+//      data-state="checked|unchecked|indeterminate"> with a Radix Indicator child.
 .checkbox,
 .radio {
   appearance: none;
   -webkit-appearance: none;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
   width: 16px;
   height: 16px;
   margin: 0;
@@ -22,42 +30,77 @@
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);
 
-  &:hover:not(:disabled)  { border-color: var(--color-primary); }
+  &:hover:not(:disabled):not([data-disabled])  { border-color: var(--color-primary); }
   &:focus-visible {
     outline: none;
     box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
   }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  &:disabled,
+  &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
 }
 
 .checkbox {
   border-radius: var(--radius-xs);
 
-  &:checked {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-    background-repeat: no-repeat;
-    background-position: center;
+  // Native input pattern — no child possible, so the check is painted via
+  // background-image on a colored fill.
+  &:not([data-state]) {
+    &:checked {
+      background-color: var(--color-primary);
+      border-color: var(--color-primary);
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3.5 8.5L6.5 11.5L12.5 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    &:indeterminate {
+      background-color: var(--color-primary);
+      border-color: var(--color-primary);
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' fill='white' rx='1'/></svg>");
+      background-repeat: no-repeat;
+      background-position: center;
+    }
   }
 
-  &:indeterminate {
+  // Radix pattern — Indicator child carries the Lucide check/minus icon.
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='7' width='10' height='2' fill='white' rx='1'/></svg>");
-    background-repeat: no-repeat;
-    background-position: center;
+  }
+
+  // Indicator wrapper (Radix renders this only when checked/indeterminate).
+  > * {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    line-height: 0;
   }
 }
 
 .radio {
   border-radius: 50%;
+  position: relative;
 
-  &:checked {
+  &:checked,
+  &[data-state='checked'] {
     border-color: var(--color-primary);
     background-color: var(--bg-surface-lowest);
+  }
+
+  // Native input uses a radial-gradient dot (no child element available).
+  &:not([data-state]):checked {
     background-image: radial-gradient(circle, var(--color-primary) 0 4px, transparent 5px);
   }
+
+  // Radix Indicator paints the dot — 8 px circle inside the 16 px ring.
+  > * {
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-primary);
+  }
 }
 
 // Label wrapper: <label class="control"><input class="checkbox"/> Label</label>
@@ -75,36 +118,55 @@
 }
 
 // ── Switch ──────────────────────────────────────────────────────────────
+// Two markup patterns supported:
+//   1. Legacy native input — <input type="checkbox" class="switch"> uses :checked
+//      and a ::before pseudo for the thumb.
+//   2. Radix React component — <button class="switch" data-state="checked|unchecked">
+//      with a child <span class="switch-thumb">. Borders and animation are driven
+//      by [data-state] and the real .switch-thumb element.
 .switch {
+  // Track sizing / colors shared by both patterns.
+  --switch-w: 36px;
+  --switch-h: 20px;
+  --switch-pad: 2px;
+  --switch-thumb: calc(var(--switch-h) - var(--switch-pad) * 2);
+  --switch-travel: calc(var(--switch-w) - var(--switch-thumb) - var(--switch-pad) * 2);
+
   appearance: none;
   -webkit-appearance: none;
   position: relative;
-  width: 32px;
-  height: 18px;
+  display: inline-block;
+  flex: none;
+  width: var(--switch-w);
+  height: var(--switch-h);
   margin: 0;
   padding: 0;
   background: var(--border-color-strong);
+  border: 0;
   border-radius: var(--radius-full);
   cursor: pointer;
   vertical-align: middle;
   transition: background-color var(--transition-fast);
 
+  // Legacy input pattern — pseudo-thumb.
   &::before {
     content: '';
     position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 14px;
-    height: 14px;
+    top: var(--switch-pad);
+    left: var(--switch-pad);
+    width: var(--switch-thumb);
+    height: var(--switch-thumb);
     background: #fff;
     border-radius: 50%;
     box-shadow: var(--shadow-xs);
     transition: transform var(--transition-fast);
   }
+  // Hide the pseudo-thumb when a real .switch-thumb child exists (Radix).
+  &:has(.switch-thumb)::before { content: none; }
 
   &:checked {
     background: var(--color-primary);
-    &::before { transform: translateX(14px); }
+    &::before { transform: translateX(var(--switch-travel)); }
   }
 
   &:focus-visible {
@@ -113,6 +175,30 @@
   }
 
   &:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  // Radix pattern — drive track color from [data-state]; thumb slides via .switch-thumb.
+  &[data-state='checked'] { background: var(--color-primary); }
+  &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+}
+
+.switch-thumb {
+  display: block;
+  width: var(--switch-thumb, 16px);
+  height: var(--switch-thumb, 16px);
+  margin: var(--switch-pad, 2px);
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: var(--shadow-xs);
+  transform: translateX(0);
+  transition: transform var(--transition-fast);
+  will-change: transform;
+  pointer-events: none;
+
+  &[data-state='checked'] { transform: translateX(var(--switch-travel, 14px)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .switch, .switch::before, .switch-thumb { transition: none; }
 }
 
 // ── Select ──────────────────────────────────────────────────────────────

package/src/components/_list.scss

@@ -0,0 +1,129 @@
+@use '../tokens/primitives' as *;
+
+// List + ListItem — vertical row layout (participants, message lists, settings).
+
+.cny-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  &.bordered {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--bg-surface-lowest);
+  }
+  &.dividers .cny-list-item:not(:last-child),
+  &.dividers > .cny-list-item-wrap:not(:last-child) {
+    border-bottom: 1px solid var(--hairline-color);
+  }
+  &.bordered.dividers .cny-list-item:not(:last-child),
+  &.bordered.dividers > .cny-list-item-wrap:not(:last-child) {
+    border-bottom: 1px solid var(--hairline-color);
+  }
+}
+
+.cny-list-item-wrap {
+  display: flex;
+}
+
+.cny-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  background: transparent;
+  color: var(--text-primary);
+  text-decoration: none;
+  border: 0;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  text-align: left;
+  transition: background-color 140ms ease, color 140ms ease;
+
+  // Sizes
+  .cny-list.size-sm & { padding: 8px 12px; font-size: 0.8125rem; gap: 10px; }
+  .cny-list.size-lg & { padding: 16px 18px; font-size: 0.9375rem; gap: 14px; }
+
+  &-leading {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+  &-body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  &-primary {
+    font-weight: 550;
+    line-height: 1.35;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &-secondary {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &-trailing {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-muted);
+  }
+
+  // Interactive (button or link)
+  &.is-interactive {
+    cursor: pointer;
+    &:hover {
+      background: var(--bg-surface-low);
+      color: var(--text-primary);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: -2px;
+    }
+  }
+
+  &.is-active {
+    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-surface-low));
+    color: var(--color-primary);
+
+    .cny-list-item-leading,
+    .cny-list-item-trailing { color: var(--color-primary); }
+    .cny-list-item-primary  { color: var(--color-primary); font-weight: 600; }
+  }
+
+  &.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+.cny-list-separator {
+  height: 1px;
+  background: var(--hairline-color);
+  margin: 4px 0;
+}
+
+.cny-list-subheader {
+  padding: 10px 14px 6px;
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}

package/src/components/_menu.scss

@@ -0,0 +1,115 @@
+@use '../tokens/primitives' as *;
+
+// Menu (DropdownMenu) — popup menu with items, checkboxes, radios, submenus.
+
+@keyframes cny-menu-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.cny-menu-content {
+  z-index: 1010;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 180px;
+  padding: 4px;
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  box-shadow:
+    0 1px 0 rgba(15, 23, 42, 0.04),
+    0 8px 24px -8px rgba(15, 23, 42, 0.2);
+  font-family: var(--font-body);
+  outline: none;
+  animation: cny-menu-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  &.size-sm { min-width: 140px; padding: 3px; }
+
+  &[data-side='top']    { transform-origin: bottom; }
+  &[data-side='bottom'] { transform-origin: top; }
+  &[data-side='left']   { transform-origin: right; }
+  &[data-side='right']  { transform-origin: left; }
+}
+
+.cny-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+
+  .cny-menu-content.size-sm & { padding: 6px 8px; font-size: 0.8125rem; }
+
+  &-icon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: var(--text-muted);
+  }
+  &-label { flex: 1 1 auto; }
+  &-shortcut {
+    flex: none;
+    margin-left: 16px;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    color: var(--text-muted);
+    letter-spacing: 0.02em;
+  }
+  &-chevron {
+    flex: none;
+    display: inline-flex;
+    color: var(--text-muted);
+  }
+
+  &[data-highlighted] {
+    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-surface-low));
+    color: var(--text-primary);
+  }
+  &[data-highlighted] .cny-menu-item-icon,
+  &[data-highlighted] .cny-menu-item-chevron { color: var(--color-primary); }
+
+  &[data-disabled] {
+    color: var(--text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.is-destructive {
+    color: var(--color-danger);
+    .cny-menu-item-icon { color: var(--color-danger); }
+    &[data-highlighted] {
+      background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-surface-low));
+      color: var(--color-danger);
+    }
+  }
+}
+
+.cny-menu-label {
+  padding: 8px 10px 4px;
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.cny-menu-separator {
+  height: 1px;
+  background: var(--hairline-color);
+  margin: 4px -1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-menu-content { animation: none; }
+}

package/src/components/_navbar.scss

@@ -127,7 +127,7 @@
 .cny-navbar-actions {
   display: flex;
   align-items: center;
-  gap: $space-2;
+  gap: 6px;
   margin-left: auto;
   flex-shrink: 0;
 }
@@ -135,8 +135,8 @@
 .cny-navbar-divider {
   width: 1px;
   height: 20px;
-  background: var(--hairline-color);
-  margin: 0 $space-1;
+  background: linear-gradient(180deg, transparent, var(--hairline-strong, var(--hairline-color)), transparent);
+  margin: 0 4px;
   flex-shrink: 0;
 }
 

package/src/components/_pagination.scss

@@ -0,0 +1,62 @@
+@use '../tokens/primitives' as *;
+
+// Pagination — flat numbered nav with prev/next chevrons.
+
+.cny-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-body);
+
+  &-btn {
+    min-width: 32px;
+    height: 32px;
+    padding: 0 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+
+    &:hover:not(:disabled):not(.is-active) {
+      background: var(--bg-surface-low);
+      color: var(--text-primary);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 1px;
+    }
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    &.is-active {
+      background: var(--color-primary);
+      color: var(--color-primary-on);
+      border-color: var(--color-primary);
+    }
+  }
+
+  &-control { color: var(--text-muted); }
+
+  &-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    color: var(--text-muted);
+  }
+
+  &-sm {
+    .cny-pagination-btn { min-width: 28px; height: 28px; font-size: 0.75rem; padding: 0 6px; }
+  }
+  &-lg {
+    .cny-pagination-btn { min-width: 36px; height: 36px; font-size: 0.875rem; padding: 0 10px; }
+  }
+}

package/src/components/_popover.scss

@@ -0,0 +1,39 @@
+@use '../tokens/primitives' as *;
+
+// Popover — generic floating surface for inline forms, filters, info.
+
+@keyframes cny-popover-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.cny-popover-content {
+  z-index: 1010;
+  padding: 14px;
+  background: var(--bg-surface-lowest);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  box-shadow:
+    0 1px 0 rgba(15, 23, 42, 0.04),
+    0 12px 28px -12px rgba(15, 23, 42, 0.22);
+  font-family: var(--font-body);
+  color: var(--text-primary);
+  outline: none;
+  animation: cny-popover-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  max-width: calc(100vw - 16px);
+
+  &[data-side='top']    { transform-origin: bottom; }
+  &[data-side='bottom'] { transform-origin: top; }
+  &[data-side='left']   { transform-origin: right; }
+  &[data-side='right']  { transform-origin: left; }
+}
+
+.cny-popover-arrow {
+  fill: var(--bg-surface-lowest);
+  stroke: var(--border-color);
+  stroke-width: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cny-popover-content { animation: none; }
+}