@kwtv/components 0.2.0 → 0.4.0

package/src/react/QuantityStepper.css

@@ -1,93 +1,97 @@
 /* Quantity stepper. All values from the design-system tokens. */
 
-.ui-qty {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--surface);
-  overflow: hidden;
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-.ui-qty button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: none;
-  border: 0;
-  color: var(--text);
-  font-size: var(--text-lg);
-  line-height: 1;
-  cursor: pointer;
-  transition: background-color var(--duration-fast) var(--ease-standard);
-}
+@layer components {
+  .ui-qty {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface);
+    overflow: hidden;
+  }
 
-.ui-qty button:hover:not(:disabled) {
-  background: var(--surface-hover);
-}
+  .ui-qty button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: none;
+    border: 0;
+    color: var(--text);
+    font-size: var(--text-lg);
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
 
-.ui-qty button:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: -2px;
-}
+  .ui-qty button:hover:not(:disabled) {
+    background: var(--surface-hover);
+  }
 
-.ui-qty button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
+  .ui-qty button:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
 
-/* The bin, shown instead of minus when the last one would be removed.
-   --danger, because it destroys the line rather than decrementing it. The
-   icon is not the only signal: the button carries an aria-label, and hover
-   fills it so the intent is obvious before the click. */
-/* `.ui-qty button` is (0,1,1) and would otherwise win over a lone class, so
-   these are scoped the same way rather than reaching for !important. */
-.ui-qty button.ui-qty__remove {
-  color: var(--danger);
-}
-.ui-qty button.ui-qty__remove:hover:not(:disabled) {
-  background: var(--danger-bg);
-}
-.ui-qty__remove svg {
-  display: block;
-}
+  .ui-qty button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
 
-.ui-qty__val {
-  min-width: 40px;
-  text-align: center;
-  font-size: var(--text-sm);
-  font-weight: var(--weight-semibold);
-  font-variant-numeric: tabular-nums;
-  color: var(--text);
-}
+  /* The bin, shown instead of minus when the last one would be removed.
+     --danger, because it destroys the line rather than decrementing it. The
+     icon is not the only signal: the button carries an aria-label, and hover
+     fills it so the intent is obvious before the click. */
+  /* `.ui-qty button` is (0,1,1) and would otherwise win over a lone class, so
+     these are scoped the same way rather than reaching for !important. */
+  .ui-qty button.ui-qty__remove {
+    color: var(--danger);
+  }
+  .ui-qty button.ui-qty__remove:hover:not(:disabled) {
+    background: var(--danger-bg);
+  }
+  .ui-qty__remove svg {
+    display: block;
+  }
 
-/* Large, 48 px, for the product page. */
-.ui-qty--lg button {
-  width: 48px;
-  height: 48px;
-  font-size: var(--text-xl);
-}
-.ui-qty--lg .ui-qty__val {
-  min-width: 48px;
-  font-size: var(--text-base);
-}
+  .ui-qty__val {
+    min-width: 40px;
+    text-align: center;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--text);
+  }
 
-.ui-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
+  /* Large, 48 px, for the product page. */
+  .ui-qty--lg button {
+    width: 48px;
+    height: 48px;
+    font-size: var(--text-xl);
+  }
+  .ui-qty--lg .ui-qty__val {
+    min-width: 48px;
+    font-size: var(--text-base);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ui-qty button {
-    transition: none;
+  .ui-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-qty button {
+      transition: none;
+    }
   }
 }

package/src/react/Select.css

@@ -1,183 +1,187 @@
 /* Select. Trigger plus listbox. All values from the design-system tokens. */
 
-.ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1-5);
-}
+@layer reset, tokens, base, components, motion, utilities;
 
-.ui-field__label {
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-  color: var(--text);
-}
+@layer components {
+  .ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+  }
 
-.ui-field__req {
-  color: var(--danger);
-  margin-inline-start: var(--space-0-5);
-}
+  .ui-field__label {
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--text);
+  }
 
-.ui-field__hint {
-  font-size: var(--text-xs);
-  line-height: var(--leading-xs);
-  color: var(--text-muted);
-}
+  .ui-field__req {
+    color: var(--danger);
+    margin-inline-start: var(--space-0-5);
+  }
 
-.ui-field__error {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1-5);
-  font-size: var(--text-xs);
-  line-height: var(--leading-xs);
-  color: var(--danger);
-}
+  .ui-field__hint {
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--text-muted);
+  }
 
-.ui-select {
-  position: relative;
-  display: block;
-}
+  .ui-field__error {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1-5);
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+    color: var(--danger);
+  }
 
-.ui-select__btn {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-2);
-  width: 100%;
-  min-height: 40px;
-  padding: 0 var(--space-3);
-  background: var(--surface);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-md);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: var(--text-sm);
-  text-align: start;
-  cursor: pointer;
-  transition: border-color var(--duration-fast) var(--ease-standard);
-}
+  .ui-select {
+    position: relative;
+    display: block;
+  }
 
-.ui-select__btn:hover,
-.ui-select__btn.is-hover {
-  border-color: var(--border-strong);
-}
+  .ui-select__btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    width: 100%;
+    min-height: 40px;
+    padding: 0 var(--space-3);
+    background: var(--surface);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    text-align: start;
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--ease-standard);
+  }
 
-.ui-select__btn:focus-visible,
-.ui-select__btn.is-focus {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-  box-shadow: 0 0 0 4px var(--focus-outer);
-}
+  .ui-select__btn:hover,
+  .ui-select__btn.is-hover {
+    border-color: var(--border-strong);
+  }
 
-.ui-select__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  .ui-select__btn:focus-visible,
+  .ui-select__btn.is-focus {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--focus-outer);
+  }
 
-.ui-select__value {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .ui-select__btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ui-select__value--empty {
-  color: var(--text-muted);
-}
+  .ui-select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.ui-select__chev {
-  display: inline-flex;
-  flex: none;
-  color: var(--text-muted);
-}
+  .ui-select__value--empty {
+    color: var(--text-muted);
+  }
 
-/* Invalid: 2 px danger border. */
-.ui-select--invalid .ui-select__btn {
-  border-width: 2px;
-  border-color: var(--danger);
-  padding-inline: calc(var(--space-3) - 1px);
-}
+  .ui-select__chev {
+    display: inline-flex;
+    flex: none;
+    color: var(--text-muted);
+  }
 
-/* The list. 6 px offset, 272 px max height, 36 px rows. */
-.ui-select__list {
-  position: absolute;
-  top: calc(100% + var(--space-1-5));
-  left: 0;
-  right: 0;
-  z-index: var(--z-dropdown);
-  max-height: 272px;
-  overflow-y: auto;
-  padding: var(--space-1);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-}
+  /* Invalid: 2 px danger border. */
+  .ui-select--invalid .ui-select__btn {
+    border-width: 2px;
+    border-color: var(--danger);
+    padding-inline: calc(var(--space-3) - 1px);
+  }
 
-.ui-select__opt {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  min-height: 36px;
-  padding: 0 var(--space-2);
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: var(--text-sm);
-  text-align: start;
-  cursor: pointer;
-}
+  /* The list. 6 px offset, 272 px max height, 36 px rows. */
+  .ui-select__list {
+    position: absolute;
+    top: calc(100% + var(--space-1-5));
+    left: 0;
+    right: 0;
+    z-index: var(--z-dropdown);
+    max-height: 272px;
+    overflow-y: auto;
+    padding: var(--space-1);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+  }
 
-.ui-select__opt:hover,
-.ui-select__opt.is-hover,
-.ui-select__opt.is-focus {
-  background: var(--surface-hover);
-}
+  .ui-select__opt {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    min-height: 36px;
+    padding: 0 var(--space-2);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    text-align: start;
+    cursor: pointer;
+  }
 
-/* Selection marked by the tick and a weight change, not the fill alone. */
-.ui-select__opt[aria-selected="true"] {
-  font-weight: var(--weight-semibold);
-}
+  .ui-select__opt:hover,
+  .ui-select__opt.is-hover,
+  .ui-select__opt.is-focus {
+    background: var(--surface-hover);
+  }
 
-.ui-select__tick {
-  display: inline-flex;
-  flex: none;
-  width: 13px;
-  color: var(--primary);
-  visibility: hidden;
-}
+  /* Selection marked by the tick and a weight change, not the fill alone. */
+  .ui-select__opt[aria-selected="true"] {
+    font-weight: var(--weight-semibold);
+  }
 
-.ui-select__opt[aria-selected="true"] .ui-select__tick {
-  visibility: visible;
-}
+  .ui-select__tick {
+    display: inline-flex;
+    flex: none;
+    width: 13px;
+    color: var(--primary);
+    visibility: hidden;
+  }
 
-.ui-select__opt.is-disabled,
-.ui-select__opt[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  .ui-select__opt[aria-selected="true"] .ui-select__tick {
+    visibility: visible;
+  }
 
-/* Group headings. Not selectable. */
-.ui-select__grouplabel {
-  display: block;
-  padding: var(--space-2) var(--space-2) 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-select__opt.is-disabled,
+  .ui-select__opt[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-@media (max-width: 700px), (pointer: coarse) {
-  .ui-select__opt {
-    min-height: 40px;
+  /* Group headings. Not selectable. */
+  .ui-select__grouplabel {
+    display: block;
+    padding: var(--space-2) var(--space-2) 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);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ui-select__btn {
-    transition: none;
+  @media (max-width: 700px), (pointer: coarse) {
+    .ui-select__opt {
+      min-height: 40px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-select__btn {
+      transition: none;
+    }
   }
 }

package/src/react/Select.tsx

@@ -129,7 +129,9 @@ export default function Select({
   const openList = useCallback(() => {
     if (disabled) return;
     setOpen(true);
-    const current = selectable.findIndex((o) => o.value === value && !o.disabled);
+    const current = selectable.findIndex(
+      (o) => o.value === value && !o.disabled,
+    );
     const firstEnabled = selectable.findIndex((o) => !o.disabled);
     setActiveIndex(current >= 0 ? current : firstEnabled);
   }, [disabled, selectable, value]);
@@ -236,7 +238,11 @@ export default function Select({
 
   const describedBy = [errorId, hintId].filter(Boolean).join(" ") || undefined;
 
-  const fieldClasses = ["ui-select", invalid && "ui-select--invalid", open && "is-open"]
+  const fieldClasses = [
+    "ui-select",
+    invalid && "ui-select--invalid",
+    open && "is-open",
+  ]
     .filter(Boolean)
     .join(" ");