@kwtv/components 0.2.0 → 0.4.0

package/src/react/Drawer.css

@@ -1,67 +1,71 @@
 /* Mobile menu drawer. All values from the design-system tokens. */
 
-.ui-drawer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-  padding: var(--space-4) var(--space-4) var(--space-6);
-  background: var(--bg);
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-.ui-drawer__group {
-  display: flex;
-  flex-direction: column;
-}
+@layer components {
+  .ui-drawer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    padding: var(--space-4) var(--space-4) var(--space-6);
+    background: var(--bg);
+  }
 
-.ui-drawer__grouptitle {
-  padding: 0 var(--space-3);
-  margin-bottom: var(--space-1);
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  font-weight: var(--weight-semibold);
-  letter-spacing: var(--tracking-wider);
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
+  .ui-drawer__group {
+    display: flex;
+    flex-direction: column;
+  }
 
-/* Rows. No separators. At least 44 px. Soft fill on hover, press, current. */
-.ui-drawerlink {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  min-height: 44px;
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-md);
-  color: var(--text);
-  font-size: var(--text-base);
-  font-weight: var(--weight-medium);
-  text-decoration: none;
-}
+  .ui-drawer__grouptitle {
+    padding: 0 var(--space-3);
+    margin-bottom: var(--space-1);
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
 
-.ui-drawerlink small {
-  font-size: var(--text-xs);
-  font-weight: var(--weight-regular);
-  color: var(--text-muted);
-}
+  /* Rows. No separators. At least 44 px. Soft fill on hover, press, current. */
+  .ui-drawerlink {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-height: 44px;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    font-size: var(--text-base);
+    font-weight: var(--weight-medium);
+    text-decoration: none;
+  }
 
-.ui-drawerlink:hover,
-.ui-drawerlink.is-hover,
-.ui-drawerlink:active,
-.ui-drawerlink.is-active {
-  background: var(--surface-hover);
-}
+  .ui-drawerlink small {
+    font-size: var(--text-xs);
+    font-weight: var(--weight-regular);
+    color: var(--text-muted);
+  }
 
-.ui-drawerlink.is-current {
-  background: var(--surface-hover);
-  font-weight: var(--weight-semibold);
-}
+  .ui-drawerlink:hover,
+  .ui-drawerlink.is-hover,
+  .ui-drawerlink:active,
+  .ui-drawerlink.is-active {
+    background: var(--surface-hover);
+  }
 
-.ui-drawerlink:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: -2px;
-}
+  .ui-drawerlink.is-current {
+    background: var(--surface-hover);
+    font-weight: var(--weight-semibold);
+  }
+
+  .ui-drawerlink:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
 
-.ui-drawer__cta {
-  margin-top: var(--space-2);
+  .ui-drawer__cta {
+    margin-top: var(--space-2);
+  }
 }

package/src/react/Drawer.tsx

@@ -1,8 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  type ReactNode,
-} from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import "./Drawer.css";
 
 /**

package/src/react/Modal.css

@@ -1,116 +1,120 @@
 /* Modal and sheet. All values from the design-system tokens. */
 
-.ui-scrim {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-4);
-  /* A raw ramp step, not a role: the scrim must stay dark in both themes, and
-     every role that is dark in light mode goes light in dark mode. */
-  background: color-mix(in srgb, var(--charcoal-xdark) 52%, transparent);
-  animation: ui-scrim-in var(--duration-base) var(--ease-standard);
-}
-
-.ui-scrim--bottom {
-  align-items: flex-end;
-  padding: 0;
-}
-
-.ui-modal {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  width: 100%;
-  max-width: 440px;
-  padding: var(--space-6);
-  background: var(--surface);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  animation: ui-modal-in var(--duration-base) var(--ease-enter);
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-.ui-modal:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+@layer components {
+  .ui-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+    /* A raw ramp step, not a role: the scrim must stay dark in both themes, and
+       every role that is dark in light mode goes light in dark mode. */
+    background: color-mix(in srgb, var(--charcoal-xdark) 52%, transparent);
+    animation: ui-scrim-in var(--duration-base) var(--ease-standard);
+  }
 
-.ui-modal__title {
-  font-size: var(--text-xl);
-  font-weight: var(--weight-semibold);
-  letter-spacing: var(--tracking-tight);
-  color: var(--text);
-}
+  .ui-scrim--bottom {
+    align-items: flex-end;
+    padding: 0;
+  }
 
-.ui-modal__body {
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
-  color: var(--text-muted);
-}
+  .ui-modal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    width: 100%;
+    max-width: 440px;
+    padding: var(--space-6);
+    background: var(--surface);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    animation: ui-modal-in var(--duration-base) var(--ease-enter);
+  }
 
-.ui-modal__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  margin-top: var(--space-2);
-}
+  .ui-modal:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
 
-/* Bottom sheet. The safest choice sits at the bottom, under the thumb, so
-   stack the actions reversed there when the consumer orders them safe-first. */
-.ui-sheet {
-  max-width: none;
-  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
-  padding-top: var(--space-3);
-  animation: ui-sheet-in var(--duration-slow) var(--ease-enter);
-}
+  .ui-modal__title {
+    font-size: var(--text-xl);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-tight);
+    color: var(--text);
+  }
 
-.ui-sheet__grip {
-  align-self: center;
-  width: 36px;
-  height: 4px;
-  margin-bottom: var(--space-2);
-  border-radius: var(--radius-full);
-  background: var(--border);
-}
+  .ui-modal__body {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    color: var(--text-muted);
+  }
 
-/* Force the sheet presentation on narrow screens for the plain dialog too. */
-@media (max-width: 700px) {
-  .ui-scrim:not(.ui-scrim--bottom) {
-    align-items: flex-end;
-    padding: 0;
+  .ui-modal__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
   }
-  .ui-modal:not(.ui-sheet) {
+
+  /* Bottom sheet. The safest choice sits at the bottom, under the thumb, so
+     stack the actions reversed there when the consumer orders them safe-first. */
+  .ui-sheet {
     max-width: none;
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    padding-top: var(--space-3);
     animation: ui-sheet-in var(--duration-slow) var(--ease-enter);
   }
-}
 
-@keyframes ui-scrim-in {
-  from {
-    opacity: 0;
+  .ui-sheet__grip {
+    align-self: center;
+    width: 36px;
+    height: 4px;
+    margin-bottom: var(--space-2);
+    border-radius: var(--radius-full);
+    background: var(--border);
   }
-}
 
-@keyframes ui-modal-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.98);
+  /* Force the sheet presentation on narrow screens for the plain dialog too. */
+  @media (max-width: 700px) {
+    .ui-scrim:not(.ui-scrim--bottom) {
+      align-items: flex-end;
+      padding: 0;
+    }
+    .ui-modal:not(.ui-sheet) {
+      max-width: none;
+      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+      animation: ui-sheet-in var(--duration-slow) var(--ease-enter);
+    }
   }
-}
 
-@keyframes ui-sheet-in {
-  from {
-    transform: translateY(100%);
+  @keyframes ui-scrim-in {
+    from {
+      opacity: 0;
+    }
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ui-scrim,
-  .ui-modal,
-  .ui-sheet {
-    animation: none;
+  @keyframes ui-modal-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  @keyframes ui-sheet-in {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-scrim,
+    .ui-modal,
+    .ui-sheet {
+      animation: none;
+    }
   }
 }

package/src/react/Modal.tsx

@@ -89,7 +89,9 @@ export default function Modal({
       if (!panel) return;
       const items = Array.from(
         panel.querySelectorAll<HTMLElement>(FOCUSABLE),
-      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      ).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+      );
       if (items.length === 0) {
         e.preventDefault();
         panel.focus();
@@ -124,11 +126,7 @@ export default function Modal({
     >
       <div
         ref={panelRef}
-        className={[
-          "ui-modal",
-          isSheet && "ui-sheet",
-          className,
-        ]
+        className={["ui-modal", isSheet && "ui-sheet", className]
           .filter(Boolean)
           .join(" ")}
         role="dialog"

package/src/react/NewsCarousel.css

@@ -1,122 +1,126 @@
 /* News carousel. Playful layer, prefix pl-. All values from the tokens. */
 
-.pl-news {
-  position: relative;
-  display: grid;
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-/* Items stack; the active one fades in. Off-screen items cannot be reached. */
-.pl-news-item {
-  grid-area: 1 / 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  padding: var(--space-4);
-  border-radius: var(--radius-lg);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  text-decoration: none;
-  color: var(--text);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 420ms var(--ease-standard);
-}
+@layer components {
+  .pl-news {
+    position: relative;
+    display: grid;
+  }
 
-.pl-news-item[data-on] {
-  opacity: 1;
-  pointer-events: auto;
-}
+  /* Items stack; the active one fades in. Off-screen items cannot be reached. */
+  .pl-news-item {
+    grid-area: 1 / 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-4);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    text-decoration: none;
+    color: var(--text);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 420ms var(--ease-standard);
+  }
 
-.pl-news-item:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+  .pl-news-item[data-on] {
+    opacity: 1;
+    pointer-events: auto;
+  }
 
-/* Prev/next arrows. Sit in the controls row beside the dots, never over the
-   item itself, so they never compete with the item's own link target. */
-.pl-news-controls {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--space-3);
-  margin-top: var(--space-2);
-}
+  .pl-news-item:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
 
-.pl-news-nav {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-full);
-  background: var(--surface);
-  color: var(--text);
-  cursor: pointer;
-  transition:
-    background-color var(--duration-fast) var(--ease-standard),
-    border-color var(--duration-fast) var(--ease-standard);
-}
+  /* Prev/next arrows. Sit in the controls row beside the dots, never over the
+     item itself, so they never compete with the item's own link target. */
+  .pl-news-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--space-3);
+    margin-top: var(--space-2);
+  }
 
-.pl-news-nav:hover {
-  background: var(--surface-hover);
-  border-color: var(--border-strong);
-}
+  .pl-news-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+  }
 
-.pl-news-nav:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+  .pl-news-nav:hover {
+    background: var(--surface-hover);
+    border-color: var(--border-strong);
+  }
 
-.ui-eyebrow {
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  font-weight: var(--weight-semibold);
-  letter-spacing: var(--tracking-wider);
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
+  .pl-news-nav:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
 
-.ui-newsrow__title {
-  font-size: var(--text-lg);
-  font-weight: var(--weight-semibold);
-  letter-spacing: var(--tracking-tight);
-  color: var(--text);
-}
+  .ui-eyebrow {
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--text-muted);
+  }
 
-.pl-news-dots {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1-5);
-}
+  .ui-newsrow__title {
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-tight);
+    color: var(--text);
+  }
 
-.pl-news-dot {
-  width: 7px;
-  height: 7px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-full);
-  background: var(--border-strong);
-  cursor: pointer;
-  transition:
-    width var(--duration-base) var(--ease-enter),
-    background-color var(--duration-base) var(--ease-standard);
-  outline-offset: 4px;
-}
+  .pl-news-dots {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1-5);
+  }
 
-.pl-news-dot[data-on] {
-  width: 22px;
-  background: var(--primary);
-}
+  .pl-news-dot {
+    width: 7px;
+    height: 7px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-full);
+    background: var(--border-strong);
+    cursor: pointer;
+    transition:
+      width var(--duration-base) var(--ease-enter),
+      background-color var(--duration-base) var(--ease-standard);
+    outline-offset: 4px;
+  }
 
-.pl-news-dot:focus-visible {
-  outline: 2px solid var(--focus);
-}
+  .pl-news-dot[data-on] {
+    width: 22px;
+    background: var(--primary);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .pl-news-item,
-  .pl-news-dot {
-    transition: none;
+  .pl-news-dot:focus-visible {
+    outline: 2px solid var(--focus);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pl-news-item,
+    .pl-news-dot {
+      transition: none;
+    }
   }
 }

package/src/react/NewsCarousel.tsx

@@ -29,7 +29,13 @@ export interface NewsCarouselProps {
 }
 
 const ChevronIcon = ({ direction }: { direction: "left" | "right" }) => (
-  <svg width={18} height={18} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+  <svg
+    width={18}
+    height={18}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
     <path
       d={direction === "left" ? "M15 6l-6 6 6 6" : "M9 6l6 6-6 6"}
       stroke="currentColor"