handzon-core 0.6.1 → 0.7.0

package/styles/components/multiselect.css

@@ -0,0 +1,206 @@
+/* Multi-select dropdown (handzon-core/src/components/ui/MultiSelect.tsx).
+ *
+ * Wraps Radix Popover. Visual parity with the single-select Dropdown:
+ * trigger reuses .hz-dd-label + .hz-dd-trigger + .hz-dd-caret. The
+ * popover content (option list, in-popover search, count badges,
+ * footer Clear) is what's specific to multi-select.
+ */
+
+/* The MultiSelect trigger is a single <button> wrapping the label
+ * chip + the inner trigger body. Radix Popover.Trigger asChild needs
+ * a *single* focusable element, so we collapse the structure into one
+ * button and let CSS draw the chip + body as siblings. */
+.hz-ms-trigger {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  /* The button is also a `.hz-dd` element. That sibling class sets
+   * font-size: 0.78em + the mono family. Don't redeclare font-size /
+   * font-weight / line-height / letter-spacing here — at equal
+   * specificity, this stylesheet loads after dropdown.css and would
+   * win, resolving `inherit` to the body's 16px and making the
+   * trigger taller than the single-select Sort dropdown. We only
+   * need to undo the UA button defaults that .hz-dd doesn't already
+   * cover (font-family + color). */
+  font-family: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: stretch;
+  cursor: pointer;
+}
+.hz-ms-trigger-body {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.6rem;
+  min-height: 2.5rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.hz-ms-trigger:hover .hz-ms-trigger-body,
+.hz-ms-trigger:focus-visible .hz-ms-trigger-body,
+.hz-ms-trigger[data-state="open"] .hz-ms-trigger-body {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.hz-ms-trigger:focus-visible { outline: none; }
+.hz-ms-trigger[data-active] .hz-ms-trigger-body {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+/* Icon sits inside the label chip on the LEFT segment, not inside
+ * the trigger body, so the chip reads "[icon] LEVEL" and the body
+ * carries only the current value. */
+.hz-ms-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  /* Re-assert uppercase here because the inline-flex layout on the
+   * chip creates a nested span structure that loses the inheritance
+   * from .hz-dd-label in some rendering contexts. */
+  text-transform: uppercase;
+}
+.hz-ms-label-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-muted);
+}
+
+/* Inherit the trigger's font (already mono + 0.78em via .hz-dd).
+ * No font-size override here — it would compound with the parent
+ * (0.78em × 0.78em ≈ 0.6em) and render as tiny ~10px text, out of
+ * step with the single-select Dropdown's value chrome.
+ *
+ * No muted color for the empty "Any" state either — the value text
+ * should read the same as the Sort dropdown's "Default" so the
+ * three trigger bodies share one visual rhythm. */
+.hz-ms-value {
+  font-family: inherit;
+}
+
+/* ---------- Popover content ---------- */
+
+.hz-ms-content {
+  z-index: 100;
+  min-width: 16rem;
+  max-width: 22rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  font-family: var(--font-mono);
+  font-size: 0.78em;
+}
+
+.hz-ms-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.7rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-muted);
+}
+.hz-ms-search input {
+  background: transparent;
+  border: 0;
+  color: var(--color-fg);
+  font: inherit;
+  outline: none;
+  width: 100%;
+}
+.hz-ms-search input::-webkit-search-cancel-button { display: none; }
+
+.hz-ms-viewport {
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.hz-ms-empty {
+  padding: 0.75rem 0.85rem;
+  color: var(--color-muted);
+  text-align: center;
+  font-style: italic;
+}
+
+.hz-ms-option {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.45rem 0.7rem;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  color: var(--color-fg);
+}
+.hz-ms-option:hover,
+.hz-ms-option:focus-visible,
+.hz-ms-option[tabindex="0"]:focus {
+  background: var(--color-surface);
+}
+.hz-ms-option[data-checked] {
+  color: var(--color-accent);
+}
+
+.hz-ms-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+  color: var(--color-accent);
+}
+.hz-ms-option[data-checked] .hz-ms-check {
+  border-color: var(--color-accent);
+  background: color-mix(in oklab, var(--color-accent) 10%, transparent);
+}
+
+.hz-ms-option-label {
+  flex: 1;
+  text-transform: lowercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hz-ms-count {
+  color: var(--color-muted);
+  font-size: 0.9em;
+  flex-shrink: 0;
+}
+.hz-ms-option[data-checked] .hz-ms-count { color: var(--color-accent); }
+
+.hz-ms-footer {
+  padding: 0.45rem 0.55rem;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hz-ms-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.55rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-muted);
+  font: inherit;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 0.88em;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+.hz-ms-clear:hover,
+.hz-ms-clear:focus-visible {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  outline: none;
+}

package/styles/components.css

@@ -9,6 +9,9 @@
 @import "./components/expressive-code.css";
 @import "./components/a11y.css";
 @import "./components/modal.css";
+@import "./components/dropdown.css";
+@import "./components/multiselect.css";
+@import "./components/filterbar.css";
 
 /* Site chrome */
 @import "./components/progress.css";