@juxtui/ui 0.1.0 → 0.2.0

package/dist/style.css

@@ -462,6 +462,211 @@
 }
 }
 
+@layer juxt {
+.j-accordion {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--juxt-font-sans);
+}
+}
+
+@layer juxt {
+.j-accordion__item {
+  border-bottom: 1px solid var(--juxt-border-subtle);
+}
+.dark .j-accordion__item,
+[data-theme='dark'] .j-accordion__item {
+  border-bottom-color: var(--juxt-border);
+}
+.j-accordion__heading {
+  margin: 0;
+  font: inherit;
+}
+.j-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juxt-space-4);
+  width: 100%;
+  min-height: 3rem;
+  padding: var(--juxt-space-3) 0;
+  border: 0;
+  border-radius: var(--juxt-radius-xs);
+  background: transparent;
+  color: var(--juxt-fg);
+  font: inherit;
+  font-size: var(--juxt-text-md);
+  font-weight: var(--juxt-weight-medium);
+  letter-spacing: var(--juxt-tracking-tight);
+  text-align: left;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 0;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color var(--juxt-duration-fast) var(--juxt-ease-standard),
+    outline-color var(--juxt-duration-fast) var(--juxt-ease-out),
+    outline-offset var(--juxt-duration-fast) var(--juxt-ease-out);
+}
+.j-accordion__trigger:focus-visible {
+  outline-color: var(--juxt-ring);
+  outline-offset: 2px;
+}
+.j-accordion__trigger:disabled {
+  color: var(--juxt-fg-disabled);
+  cursor: not-allowed;
+}
+.j-accordion__chevron {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  color: var(--juxt-fg-muted);
+  transition:
+    transform var(--juxt-duration-normal) var(--juxt-ease-out),
+    color var(--juxt-duration-fast) var(--juxt-ease-standard);
+}
+.j-accordion__trigger:hover:not(:disabled) .j-accordion__chevron {
+  color: var(--juxt-fg);
+}
+.j-accordion__item[data-state='open'] .j-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* Height follows content via grid rows — no measuring, no magic numbers. */
+.j-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--juxt-duration-slow) var(--juxt-ease-out);
+}
+.j-accordion__item[data-state='open'] .j-accordion__panel {
+  grid-template-rows: 1fr;
+}
+.j-accordion__panel-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+.j-accordion__content {
+  padding-bottom: var(--juxt-space-4);
+  color: var(--juxt-fg-secondary);
+  font-size: var(--juxt-text-md);
+  line-height: var(--juxt-leading-normal);
+  opacity: 0;
+  transition: opacity var(--juxt-duration-fast) var(--juxt-ease-standard);
+}
+.j-accordion__item[data-state='open'] .j-accordion__content {
+  opacity: 1;
+  transition-delay: 60ms;
+}
+@media (prefers-reduced-motion: reduce) {
+.j-accordion__panel,
+  .j-accordion__chevron {
+    transition: none;
+}
+}
+}
+
+@layer juxt {
+/*
+ * Alerts stay on the page's surface. Colour lives in the icon and a hairline
+ * of the border — enough to be noticed, never enough to shout.
+ */
+.j-alert {
+  --j-alert-accent: var(--juxt-fg-muted);
+  --j-alert-border: var(--juxt-border);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--juxt-space-3);
+  padding: var(--juxt-space-3) var(--juxt-space-4);
+  border: 1px solid var(--j-alert-border);
+  border-radius: var(--juxt-radius-md);
+  background: var(--juxt-surface);
+  color: var(--juxt-fg);
+  font-family: var(--juxt-font-sans);
+}
+.j-alert--info {
+  --j-alert-accent: var(--juxt-info-text);
+}
+.j-alert--success {
+  --j-alert-accent: var(--juxt-success-text);
+}
+.j-alert--warning {
+  --j-alert-accent: var(--juxt-warning-text);
+  --j-alert-border: var(--juxt-warning-border);
+}
+.j-alert--destructive {
+  --j-alert-accent: var(--juxt-danger-text);
+  --j-alert-border: var(--juxt-danger-border);
+}
+.j-alert__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  height: 1.25rem;
+  color: var(--j-alert-accent);
+}
+.j-alert__icon > svg {
+  width: 1rem;
+  height: 1rem;
+}
+.j-alert__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+  min-width: 0;
+}
+.j-alert__title {
+  margin: 0;
+  font-size: var(--juxt-text-md);
+  font-weight: var(--juxt-weight-medium);
+  line-height: 1.25rem;
+  letter-spacing: var(--juxt-tracking-tight);
+}
+.j-alert__description {
+  color: var(--juxt-fg-secondary);
+  font-size: var(--juxt-text-sm);
+  line-height: var(--juxt-leading-normal);
+}
+.j-alert__description > p {
+  margin: 0;
+}
+.j-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--juxt-space-2);
+  margin-top: var(--juxt-space-2);
+}
+.j-alert:has(.j-alert__close) {
+  padding-right: var(--juxt-space-10);
+}
+.j-alert__close {
+  position: absolute;
+  top: var(--juxt-space-2-5);
+  right: var(--juxt-space-2-5);
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--juxt-radius-xs);
+  background: transparent;
+  color: var(--juxt-fg-muted);
+  cursor: pointer;
+  transition-property: background-color, color, outline-color, outline-offset;
+}
+.j-alert__close:hover {
+  background: var(--juxt-surface-hover);
+  color: var(--juxt-fg);
+}
+.j-alert__close > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+}
+
 @layer juxt {
 .j-avatar {
   --j-avatar-size: 2rem;
@@ -1750,6 +1955,280 @@ to {
 }
 }
 
+@layer juxt {
+.j-kbd-group {
+  display: inline-flex;
+  gap: 3px;
+  vertical-align: middle;
+}
+.j-kbd-group--sm .j-kbd,
+.j-kbd--sm {
+  min-width: 1.0625rem;
+  height: 1.0625rem;
+  font-size: 0.625rem;
+}
+}
+
+@layer juxt {
+.j-popover {
+  z-index: var(--juxt-z-popover);
+  box-sizing: border-box;
+  max-width: calc(100vw - 16px);
+  max-height: var(--j-available-height, 32rem);
+  padding: var(--juxt-space-4);
+  overflow: auto;
+  outline: none;
+  font-size: var(--juxt-text-md);
+  line-height: var(--juxt-leading-normal);
+}
+}
+
+@layer juxt {
+.j-progress {
+  --j-progress-height: 0.375rem;
+  --j-progress-fill: var(--juxt-accent);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-2);
+  width: 100%;
+  font-family: var(--juxt-font-sans);
+}
+.j-progress--sm {
+  --j-progress-height: 0.25rem;
+}
+.j-progress--neutral {
+  --j-progress-fill: var(--juxt-fg);
+}
+.j-progress__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--juxt-space-3);
+  font-size: var(--juxt-text-sm);
+}
+.j-progress__label {
+  color: var(--juxt-fg);
+  font-weight: var(--juxt-weight-medium);
+  letter-spacing: var(--juxt-tracking-tight);
+}
+.j-progress__value {
+  color: var(--juxt-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+.j-progress__track {
+  position: relative;
+  height: var(--j-progress-height);
+  overflow: hidden;
+  border-radius: var(--juxt-radius-full);
+  background: var(--juxt-surface-active);
+}
+
+/* Width changes are transforms, so updates glide without reflow. */
+.j-progress__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--j-progress-fill);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--juxt-duration-slow) var(--juxt-ease-out);
+}
+.j-progress.is-indeterminate .j-progress__fill {
+  width: 40%;
+  transform: none;
+  animation: j-progress-indeterminate 1.4s var(--juxt-ease-standard) infinite;
+}
+@keyframes j-progress-indeterminate {
+from {
+    transform: translateX(-100%);
+}
+to {
+    transform: translateX(250%);
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.j-progress.is-indeterminate .j-progress__fill {
+    width: 100%;
+    animation: j-progress-pulse 1.6s ease-in-out infinite;
+}
+@keyframes j-progress-pulse {
+50% {
+      opacity: 0.35;
+}
+}
+}
+}
+
+@layer juxt {
+.j-radio {
+  --j-radio-size: 1rem;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--juxt-space-2-5);
+  font-family: var(--juxt-font-sans);
+}
+.j-radio__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  margin-top: calc((var(--juxt-text-md) * var(--juxt-leading-snug) - var(--j-radio-size)) / 2);
+}
+.j-radio__input {
+  position: absolute;
+  inset: -4px;
+  z-index: 1;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.j-radio__input:disabled {
+  cursor: not-allowed;
+}
+.j-radio__circle {
+  position: relative;
+  display: block;
+  width: var(--j-radio-size);
+  height: var(--j-radio-size);
+  border: 1px solid var(--juxt-border-strong);
+  border-radius: var(--juxt-radius-full);
+  background: var(--juxt-surface);
+  box-shadow: var(--juxt-shadow-xs);
+  outline: 2px solid transparent;
+  outline-offset: 0;
+  transition:
+    background-color var(--juxt-duration-fast) var(--juxt-ease-standard),
+    border-color var(--juxt-duration-fast) var(--juxt-ease-standard),
+    transform var(--juxt-duration-fast) var(--juxt-ease-out),
+    outline-color var(--juxt-duration-fast) var(--juxt-ease-out),
+    outline-offset var(--juxt-duration-fast) var(--juxt-ease-out);
+}
+
+/* The inner dot grows out of the centre once the fill lands. */
+.j-radio__circle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--juxt-radius-full);
+  background: var(--juxt-accent-fg);
+  opacity: 0;
+  transform: scale(0.3);
+  transition:
+    opacity var(--juxt-duration-instant) var(--juxt-ease-standard),
+    transform var(--juxt-duration-normal) var(--juxt-ease-out);
+}
+.j-radio__input:hover:not(:disabled) + .j-radio__circle {
+  border-color: var(--juxt-fg-muted);
+}
+.j-radio__input:active:not(:disabled) + .j-radio__circle {
+  transform: scale(0.9);
+}
+.j-radio__input:focus-visible + .j-radio__circle {
+  outline-color: var(--juxt-ring);
+  outline-offset: 2px;
+}
+.j-radio[data-state='checked'] .j-radio__circle {
+  border-color: var(--juxt-accent);
+  background: var(--juxt-accent);
+}
+.j-radio[data-state='checked'] .j-radio__input:hover:not(:disabled) + .j-radio__circle {
+  border-color: var(--juxt-accent-hover);
+  background: var(--juxt-accent-hover);
+}
+.j-radio[data-state='checked'] .j-radio__circle::after {
+  opacity: 1;
+  transform: none;
+  transition-delay: 30ms;
+}
+.j-radio-group.is-invalid .j-radio:not([data-state='checked']) .j-radio__circle {
+  border-color: var(--juxt-danger-border);
+}
+@media (prefers-reduced-motion: reduce) {
+.j-radio__input:active:not(:disabled) + .j-radio__circle {
+    transform: none;
+}
+}
+.j-radio__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-0-5);
+  min-width: 0;
+}
+.j-radio__label {
+  color: var(--juxt-fg);
+  font-size: var(--juxt-text-md);
+  line-height: var(--juxt-leading-snug);
+  letter-spacing: var(--juxt-tracking-tight);
+  cursor: pointer;
+  user-select: none;
+}
+.j-radio__description {
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-sm);
+  line-height: var(--juxt-leading-normal);
+}
+.j-radio.is-disabled .j-radio__circle {
+  opacity: 0.5;
+  box-shadow: none;
+}
+.j-radio.is-disabled .j-radio__label {
+  color: var(--juxt-fg-muted);
+  cursor: not-allowed;
+}
+}
+
+@layer juxt {
+.j-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-1-5);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: var(--juxt-font-sans);
+}
+.j-radio-group__legend {
+  display: inline-flex;
+  gap: var(--juxt-space-0-5);
+  margin-bottom: var(--juxt-space-1-5);
+  padding: 0;
+  color: var(--juxt-fg);
+  font-size: var(--juxt-text-sm);
+  font-weight: var(--juxt-weight-medium);
+  line-height: var(--juxt-leading-snug);
+  letter-spacing: var(--juxt-tracking-tight);
+}
+.j-radio-group__description,
+.j-radio-group__error {
+  margin: calc(var(--juxt-space-1) * -1) 0 var(--juxt-space-1-5);
+  color: var(--juxt-fg-muted);
+  font-size: var(--juxt-text-xs);
+  line-height: var(--juxt-leading-normal);
+}
+.j-radio-group__error {
+  margin: var(--juxt-space-1) 0 0;
+  color: var(--juxt-danger-text);
+}
+.j-radio-group__items {
+  display: flex;
+}
+.j-radio-group__items--vertical {
+  flex-direction: column;
+  gap: var(--juxt-space-3);
+}
+.j-radio-group__items--horizontal {
+  flex-wrap: wrap;
+  gap: var(--juxt-space-3) var(--juxt-space-6);
+}
+}
+
 @layer juxt {
 .j-select__trigger {
   width: 100%;
@@ -1861,6 +2340,284 @@ to {
 }
 }
 
+@layer juxt {
+.j-separator {
+  flex: none;
+  background: var(--juxt-border-subtle);
+}
+.dark .j-separator,
+[data-theme='dark'] .j-separator {
+  background: var(--juxt-border);
+}
+.j-separator--horizontal {
+  width: 100%;
+  height: 1px;
+}
+.j-separator--vertical {
+  align-self: stretch;
+  width: 1px;
+  min-height: 1rem;
+}
+.j-separator--labelled {
+  display: flex;
+  align-items: center;
+  gap: var(--juxt-space-3);
+  height: auto;
+  background: none !important;
+  color: var(--juxt-fg-muted);
+  font-family: var(--juxt-font-sans);
+  font-size: var(--juxt-text-xs);
+}
+.j-separator--labelled::before,
+.j-separator--labelled::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--juxt-border-subtle);
+}
+.dark .j-separator--labelled::before,
+.dark .j-separator--labelled::after,
+[data-theme='dark'] .j-separator--labelled::before,
+[data-theme='dark'] .j-separator--labelled::after {
+  background: var(--juxt-border);
+}
+.j-separator__label {
+  flex: none;
+}
+}
+
+@layer juxt {
+.j-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--juxt-z-overlay);
+  background: var(--juxt-overlay);
+}
+.j-sheet__positioner {
+  position: fixed;
+  inset: 0;
+  z-index: var(--juxt-z-modal);
+  display: flex;
+  padding: var(--juxt-space-2);
+}
+.j-sheet__positioner--right {
+  justify-content: flex-end;
+}
+.j-sheet__positioner--left {
+  justify-content: flex-start;
+}
+.j-sheet__positioner--bottom {
+  align-items: flex-end;
+  padding-bottom: max(var(--juxt-space-2), env(safe-area-inset-bottom));
+}
+
+/* A floating panel with a small inset from the edges — calmer than edge-to-edge. */
+.j-sheet {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--juxt-border);
+  border-radius: var(--juxt-radius-lg);
+  background: var(--juxt-surface-raised);
+  box-shadow: var(--juxt-shadow-lg);
+  color: var(--juxt-fg);
+  font-family: var(--juxt-font-sans);
+  outline: none;
+}
+.j-sheet--right,
+.j-sheet--left {
+  height: 100%;
+}
+.j-sheet--right.j-sheet--sm,
+.j-sheet--left.j-sheet--sm {
+  max-width: 20rem;
+}
+.j-sheet--right.j-sheet--md,
+.j-sheet--left.j-sheet--md {
+  max-width: 25rem;
+}
+.j-sheet--right.j-sheet--lg,
+.j-sheet--left.j-sheet--lg {
+  max-width: 35rem;
+}
+.j-sheet--bottom.j-sheet--sm {
+  max-height: 20rem;
+}
+.j-sheet--bottom.j-sheet--md {
+  max-height: 25rem;
+}
+.j-sheet--bottom.j-sheet--lg {
+  max-height: min(35rem, calc(100dvh - var(--juxt-space-12)));
+}
+.j-sheet__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-1-5);
+  padding: var(--juxt-space-5) var(--juxt-space-12) var(--juxt-space-4) var(--juxt-space-5);
+  border-bottom: 1px solid var(--juxt-border-subtle);
+}
+.dark .j-sheet__header,
+[data-theme='dark'] .j-sheet__header {
+  border-bottom-color: var(--juxt-border);
+}
+.j-sheet__title {
+  margin: 0;
+  font-size: var(--juxt-text-lg);
+  font-weight: var(--juxt-weight-semibold);
+  line-height: var(--juxt-leading-snug);
+  letter-spacing: var(--juxt-tracking-tight);
+}
+.j-sheet__description {
+  margin: 0;
+  color: var(--juxt-fg-secondary);
+  font-size: var(--juxt-text-md);
+  line-height: var(--juxt-leading-normal);
+}
+.j-sheet__body {
+  flex: 1;
+  min-height: 0;
+  padding: var(--juxt-space-5);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--juxt-fg-secondary);
+  font-size: var(--juxt-text-md);
+  line-height: var(--juxt-leading-normal);
+}
+.j-sheet__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--juxt-space-2);
+  padding: var(--juxt-space-4) var(--juxt-space-5);
+  border-top: 1px solid var(--juxt-border-subtle);
+}
+.dark .j-sheet__footer,
+[data-theme='dark'] .j-sheet__footer {
+  border-top-color: var(--juxt-border);
+}
+.j-sheet__close {
+  position: absolute;
+  top: var(--juxt-space-3);
+  right: var(--juxt-space-3);
+  display: grid;
+  place-items: center;
+  width: var(--juxt-control-sm);
+  height: var(--juxt-control-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--juxt-radius-sm);
+  background: transparent;
+  color: var(--juxt-fg-muted);
+  cursor: pointer;
+  transition-property: background-color, color, outline-color, outline-offset;
+}
+.j-sheet__close:hover {
+  background: var(--juxt-surface-hover);
+  color: var(--juxt-fg);
+}
+.j-sheet__close > svg {
+  width: 1rem;
+  height: 1rem;
+}
+.j-sheet.is-nudging {
+  animation: j-sheet-nudge 220ms var(--juxt-ease-out);
+}
+@keyframes j-sheet-nudge {
+40% {
+    transform: scale(1.006);
+}
+}
+
+/* Motion: the backdrop fades; the sheet slides in from its edge. */
+.j-sheet-overlay-enter-active {
+  transition: opacity var(--juxt-duration-normal) var(--juxt-ease-out);
+}
+.j-sheet-overlay-leave-active {
+  transition: opacity var(--juxt-duration-fast) var(--juxt-ease-in);
+}
+.j-sheet-overlay-enter-from,
+.j-sheet-overlay-leave-to {
+  opacity: 0;
+}
+.j-sheet-enter-active .j-sheet {
+  transition: transform 280ms var(--juxt-ease-out);
+}
+.j-sheet-leave-active .j-sheet {
+  transition: transform var(--juxt-duration-normal) var(--juxt-ease-in);
+}
+.j-sheet-enter-from .j-sheet--right,
+.j-sheet-leave-to .j-sheet--right {
+  transform: translateX(calc(100% + var(--juxt-space-4)));
+}
+.j-sheet-enter-from .j-sheet--left,
+.j-sheet-leave-to .j-sheet--left {
+  transform: translateX(calc(-100% - var(--juxt-space-4)));
+}
+.j-sheet-enter-from .j-sheet--bottom,
+.j-sheet-leave-to .j-sheet--bottom {
+  transform: translateY(calc(100% + var(--juxt-space-4)));
+}
+
+/* Reduced motion: the sheet fades in place instead of travelling. */
+@media (prefers-reduced-motion: reduce) {
+.j-sheet-enter-active .j-sheet,
+  .j-sheet-leave-active .j-sheet {
+    transition: opacity var(--juxt-duration-normal) var(--juxt-ease-standard);
+}
+.j-sheet-enter-from .j-sheet,
+  .j-sheet-leave-to .j-sheet {
+    opacity: 0;
+    transform: none !important;
+}
+}
+}
+
+@layer juxt {
+.j-skeleton {
+  display: block;
+  width: 100%;
+  height: 1rem;
+  border-radius: var(--juxt-radius-sm);
+  background: var(--juxt-surface-active);
+  animation: j-skeleton-pulse 1.8s var(--juxt-ease-standard) infinite;
+}
+.j-skeleton--circle {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--juxt-radius-full);
+}
+.j-skeleton--text {
+  height: 0.75rem;
+  border-radius: var(--juxt-radius-xs);
+}
+.j-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juxt-space-2);
+  width: 100%;
+}
+
+/* A slow breath, not a shimmer — loading shouldn't compete for attention. */
+@keyframes j-skeleton-pulse {
+50% {
+    opacity: 0.5;
+}
+}
+@media (prefers-reduced-motion: reduce) {
+.j-skeleton {
+    animation: none;
+}
+}
+}
+
+@layer juxt {
+.j-spinner-wrap {
+  display: inline-flex;
+  color: var(--juxt-fg-muted);
+  vertical-align: middle;
+}
+}
+
 @layer juxt {
 .j-switch {
   --j-switch-w: 2rem;