npm - aporia - Versions diffs - 0.2.0 → 0.2.5 - Mend

aporia 0.2.0 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +21 -8
package/dist/ThemeProvider.d.ts.map +1 -1
package/dist/components/Category.d.ts.map +1 -1
package/dist/components/SelectRow.d.ts +17 -0
package/dist/components/SelectRow.d.ts.map +1 -0
package/dist/{style.css → index.css} +420 -16
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +147 -11
package/dist/index.js.map +1 -1
package/package.json +9 -4

package/README.md CHANGED Viewed

@@ -8,11 +8,24 @@ A collection of production-quality React components for building configurators -
 npm install aporia
 ```
+Import **`aporia/styles.css` once** in your app entry (for example `main.tsx`). If you use Tailwind or another global reset, import Aporia’s stylesheet **after** those layers so Aporia’s opinionated panel / popover typography and control chrome win predictable conflicts.
+## Maintainers: package demo + consumer sandbox
+If you keep a sibling app (for example `../aporia-test`) next to this repo:
+1. **Canonical UI (this repo)** — `npm run dev` starts the **Vite demo** (`--mode demo`, default port **5178**). That is the reference layout: white page shell (`var(--color-page)`), `Panel` capped at **360px** wide like `src/App.css`.
+2. **NPM-style consumer** — in the sibling app, depend on `file:../aporia`, run `npm run dev` there (this workspace uses port **5173** for the consumer). After library changes, run `npm run sync-lib` inside the consumer to rebuild `aporia` and refresh the `file:` install.
+3. **From the parent folder** — with both repos under the same parent directory, `npm run dev:package` and `npm run dev:consumer` run each app; `npm run sync:consumer` rebuilds the library and reinstalls into the consumer.
+Publishing for end users: bump `version`, run `npm run build`, then `npm publish`. Consumers should use a normal semver range (for example `^0.2.5`) and `import 'aporia/styles.css'`. The `prepublishOnly` script runs `build` automatically on publish. Until you publish, sibling apps can use `file:../aporia` and `npm run sync-lib` after edits — **no publish required** for local reflection.
 ## Usage
 The usual setup is a **Panel** with one or more **Category** blocks, each containing rows (`SliderRow`, `ColorRow`, etc.). The package default export is `Panel`, so you can import it as the default or by name.
 ```tsx
+import { useState } from 'react'
 import Panel, { Category, SliderRow, ColorRow, ToggleRow, GradientRow, ThemeProvider } from 'aporia'
 import 'aporia/styles.css'
@@ -45,7 +58,7 @@ function App() {
 }
 ```
-You can also compose rows without `Panel` / `Category` if you only need individual controls.
+Use `Panel` (and usually `Category`) for any real configurator surface so spacing, typography, and the black card shell stay consistent. Rows still work as leaf nodes, but they are designed to live inside that shell.
 ## Components
@@ -132,7 +145,9 @@ const stops = parseGradient(css)         // Parse CSS gradient
 ## Theming
-Aporia includes built-in dark and light themes. Wrap your app with `ThemeProvider`:
+Aporia ships a **dark** visual system: the **Panel** surface is always `#000000` with light text, and `color-scheme: dark` is scoped to the panel and floating pickers only so your host page (light theme, marketing site, etc.) is not forced into document-wide dark UA chrome. CSS variables remain on `:root` so portaled popovers still inherit them.
+`ThemeProvider` is for **React context** (`useTheme`) only; it does not mutate `<html>` or set global `data-theme`.
 ```tsx
 import { ThemeProvider, useTheme } from 'aporia'
@@ -145,15 +160,13 @@ function App() {
   )
 }
-// Access theme in components
-function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme()
-  return <button onClick={toggleTheme}>{theme}</button>
+// `theme` is `'dark'` today; useful for future light mode without changing call sites.
+function ThemeLabel() {
+  const { theme } = useTheme()
+  return <span>{theme}</span>
 }
 ```
-Keyboard shortcut: `Shift+T` toggles the theme.
 ## Peer Dependencies
 Aporia requires these peer dependencies:

package/dist/ThemeProvider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAIL~~,KAAK,SAAS,~~EACf~~,MAAM,OAAO,CAAA;~~AAEd~~,MAAM,MAAM,KAAK,GAAG,MAAM,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,~~2CAYlE~~;AAED,wBAAgB,QAAQ,sBAMvB"}
1	+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,KAAK,GAAG,MAAM,CAAA;AAE1B,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAA;CACb,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAQlE;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/components/Category.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../src/components/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAgC~~,KAAK,SAAS,~~EAAE~~,MAAM,OAAO,CAAA;~~AAEpE~~,OAAO,gBAAgB,CAAA;~~AAEvB~~,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,gBAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,gBAAwB,EACxB,SAAS,GACV,EAAE,aAAa,~~2CAmFf~~"}
1	+ {"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../src/components/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,gBAAgB,CAAA;AAavB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IAClD,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,gBAAgB,EAChB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,gBAAwB,EACxB,SAAS,GACV,EAAE,aAAa,2CAqJf"}

package/dist/components/SelectRow.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+export type SelectRowOption = {
+    value: string;
+    label: string;
+};
+export type SelectRowProps = {
+    label: string;
+    options: readonly SelectRowOption[];
+    /** Controlled value; `null` shows the placeholder. */
+    value: string | null;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Optional form field name (hidden input). */
+    name?: string;
+};
+export declare function SelectRow({ label, options, value, onChange, placeholder, disabled: disabledProp, name, }: SelectRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectRow.d.ts.map

package/dist/components/SelectRow.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SelectRow.d.ts","sourceRoot":"","sources":["../../src/components/SelectRow.tsx"],"names":[],"mappings":"AAGA,OAAO,iBAAiB,CAAA;AAExB,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,eAAe,EAAE,CAAA;IACnC,sDAAsD;IACtD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAuB,EACvB,QAAQ,EAAE,YAAY,EACtB,IAAI,GACL,EAAE,cAAc,2CA8FhB"}

package/dist/{style.css → index.css} RENAMED Viewed

@@ -1,9 +1,98 @@
+/*
+ * Theme tokens — dark mode only.
+ */
+/*
+ * Tokens live on :root so portaled popovers (mounted under <body>) still inherit variables.
+ * Do not set `color-scheme` here — that would affect the entire host document (scrollbars,
+ * native controls outside Aporia). `color-scheme: dark` is applied only on Panel and popups.
+ */
+:root {
+  /* App shell */
+  --color-page: #ffffff;
+  --color-text: rgba(255, 255, 255, 0.87);
+  --color-muted: rgba(255, 255, 255, 0.45);
+  /* Slider card (full pill) */
+  --slider-surface: rgba(255, 255, 255, 0.05);
+  --slider-surface-active: rgba(255, 255, 255, 0.08);
+  --slider-rim: rgba(255, 255, 255, 0.06);
+  /* Filled track (left portion) */
+  --slider-track: rgba(255, 255, 255, 0.11);
+  --slider-track-active: rgba(255, 255, 255, 0.18);
+  /* ButtonRow / pointer-down on track-like controls */
+  --slider-track-pressed: rgba(255, 255, 255, 0.26);
+  /* Thumb */
+  --slider-thumb: rgba(255, 255, 255, 0.7);
+  --slider-thumb-dragging: #ffffff;
+  /* Typography */
+  --slider-text-muted: rgba(255, 255, 255, 0.7);
+  --slider-text: #ffffff;
+  /*
+   * UI font for Panel, rows, and portaled UI (popover content inherits from :root,
+   * not from Panel — without a default, `inherit` resolves to the browser body font).
+   * Override anytime: html { --aporia-font-family: 'Inter', system-ui, sans-serif; }
+   */
+  --aporia-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  /* Fixed UI rhythm (px): not tied to host `html { font-size: … }` / rem scaling). */
+  --aporia-ui-font-size: 14px;
+  --aporia-ui-line-height: 1.25;
+  /* Ticks (base color × layer opacity ≈ dark appearance) */
+  --slider-tick: rgba(255, 255, 255, 0.32);
+  --slider-tick-layer-opacity: 0.3;
+  /* Thumb opacity when row not hovered */
+  --slider-thumb-idle-opacity: 0;
+  /* Value field selection (same in both themes per spec) */
+  --slider-value-selection-bg: #ffffff;
+  --slider-value-selection-fg: #000000;
+  /*
+   * Toggle inner thumb: must match how the *row* reads, but stay opaque — the ON
+   * track is solid white; semi-transparent --slider-surface would wash out and
+   * hide the thumb. These ≈ 5% / 8% white on black, same as the row visually.
+   */
+  --toggle-thumb-row-bg: #0d0d0d;
+  --toggle-thumb-row-bg-hover: #141414;
+  /*
+   * Swatch popover: opaque fill so the panel reads on #000 (rows use translucent rgba).
+   * #0a0a0a matches Figma design spec.
+   */
+  --swatch-popover-surface: #141414;
+  --swatch-popover-bg: #0a0a0a;
+  --swatch-popover-rim: rgba(255, 255, 255, 0.12);
+  /* Shift+D debug overlays */
+  --slider-debug-label-tint: rgba(255, 0, 160, 0.18);
+  --slider-debug-value-tint: rgba(255, 200, 0, 0.2);
+  --slider-debug-dom-label: rgba(0, 255, 140, 0.9);
+  --slider-debug-dom-value: rgba(80, 180, 255, 0.95);
+  --slider-debug-dom-shadow: rgba(0, 0, 0, 0.35);
+}
 /* Shell for grouped controls: solid black card, generous radius, inset padding. */
 .aporiaPanel {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
+  /* Hug content: avoid stretching to fill a flex/grid parent’s unused vertical space. */
+  flex: 0 0 auto;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+  align-self: stretch;
+  /* Typography + metrics: see `aporia-surfaces.css` (imported after components). */
+  /* Always read as the black configurator card, independent of host `color` / light UI. */
+  color: var(--slider-text);
+  color-scheme: dark;
   background-color: #000000;
   border-radius: 24px;
   padding: 16px;
@@ -15,6 +104,7 @@
     0 6px 14px 0 rgba(0, 0, 0, 0.09);
   display: flex;
   flex-direction: column;
+  gap: 8px;
   align-items: stretch;
   justify-content: flex-start;
   align-content: flex-start;
@@ -22,7 +112,8 @@
 .category {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  /* Keep in sync with CATEGORY_STACK_GAP_PX in Category.tsx (motion cancels this when collapsed). */
+  gap: 8px;
   min-width: 0;
 }
@@ -134,6 +225,7 @@
   margin: 0;
   flex: 1;
   min-width: 0;
+  font-family: var(--aporia-font-family);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.08em;
@@ -145,15 +237,17 @@
 .categoryBody {
   min-width: 0;
-  padding-bottom: 4px;
 }
-/*
- * .sliderGroup sets display:flex; without this, that rule wins over the [hidden]
- * attribute and the category body stays visible when “collapsed”.
- */
-.categoryBody[hidden] {
-  display: none !important;
+/* Padding lives inside the height animation so it never springs on its own (8px + Panel gap = 16px between categories). */
+.categoryBodyInner {
+  min-width: 0;
+  padding-bottom: 8px;
+}
+/* Last category among siblings: no extra bottom inset (panel padding handles the card edge). */
+.category:not(:has(~ .category)) .categoryBodyInner {
+  padding-bottom: 0;
 }
 .category[data-disabled="true"] .categoryBody {
@@ -380,6 +474,7 @@
   position: absolute;
   inset: 0;
   right: auto;
+  z-index: 0;
   background: var(--slider-track);
   border-radius: 12px;
   pointer-events: none;
@@ -562,6 +657,8 @@
   flex-direction: column;
   width: 190px;
   box-sizing: border-box;
+  color-scheme: dark;
+  font-family: var(--aporia-font-family, inherit);
   background: rgba(10, 10, 10, 0.8);
   backdrop-filter: blur(20px);
   border: 0.5px solid rgba(255, 255, 255, 0.06);
@@ -655,10 +752,6 @@
 }
 /* Hex value - uses ValueInput component */
-.colorPickerHex {
-  font-family: 'SF Compact Rounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-}
 .colorPickerHex .valueInputField {
   width: 72px;
 }
@@ -667,7 +760,6 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  font-family: 'SF Compact Rounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   font-size: 14px;
   line-height: normal;
   letter-spacing: 0.28px;
@@ -727,7 +819,6 @@
   border-radius: 9px;
   background: transparent;
   color: rgba(255, 255, 255, 0.7);
-  font-family: 'SF Compact Rounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   font-size: 14px;
   line-height: normal;
   letter-spacing: 0.28px;
@@ -772,6 +863,8 @@
 .swatchPopoverPopup {
   position: relative;
   z-index: 1;
+  color-scheme: dark;
+  font-family: var(--aporia-font-family, inherit);
   min-width: 190px;
   max-width: min(320px, calc(100vw - 24px));
   padding: 0;
@@ -1043,9 +1136,14 @@
   -moz-user-select: none;
   -webkit-user-drag: none;
   width: 100%;
-  font: inherit;
+  font-family: var(--aporia-font-family);
+  font-size: var(--aporia-ui-font-size);
+  font-weight: 400;
+  font-style: normal;
+  line-height: var(--aporia-ui-line-height);
+  letter-spacing: normal;
   text-align: left;
-  color: inherit;
+  color: var(--slider-text-muted);
 }
 .toggleCard:hover {
@@ -1135,11 +1233,263 @@
 .toggleCard[data-on='true'] .toggleSwitch__thumb {
   transform: translateX(6px);
 }
+/* Trigger: same geometry as SliderRow; card fill matches .sliderCard (--slider-surface). */
+.selectRowWrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+.selectRowWrap[data-disabled="true"] {
+  opacity: 0.45;
+}
+.selectRowWrap[data-disabled="true"] .selectCard {
+  pointer-events: none;
+}
+.selectCard {
+  position: relative;
+  width: 100%;
+  height: 37px;
+  margin: 0;
+  border: none;
+  border-radius: 12px;
+  background: var(--slider-surface);
+  box-shadow: inset 0 0 0 0.5px var(--slider-rim);
+  overflow: hidden;
+  transition: background-color 0.2s ease-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  font-family: var(--aporia-font-family);
+  font-size: var(--aporia-ui-font-size);
+  font-weight: 400;
+  font-style: normal;
+  line-height: var(--aporia-ui-line-height);
+  letter-spacing: normal;
+  text-align: left;
+  color: var(--slider-text-muted);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+.selectCard:hover:not(:disabled) {
+  background: var(--slider-surface-active);
+}
+.selectCard:focus {
+  outline: none;
+}
+.selectCard:focus-visible {
+  outline: 2px solid var(--slider-text-muted);
+  outline-offset: 2px;
+}
+.selectCard[data-popup-open="true"] {
+  background: var(--slider-surface-active);
+}
+.selectCard:active:not(:disabled) {
+  background: var(--slider-surface-active);
+}
+.selectLabel {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--slider-text-muted);
+  letter-spacing: 0.28px;
+  flex: 1;
+  min-width: 0;
+  z-index: 2;
+  pointer-events: none;
+  transition: color 0.2s ease-out;
+}
+.selectCard:hover:not(:disabled) .selectLabel,
+.selectCard[data-popup-open="true"] .selectLabel {
+  color: var(--slider-text);
+}
+.selectValueZone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  padding-right: 12px;
+  min-width: 72px;
+  max-width: 50%;
+}
+.selectValue {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28px;
+  color: var(--slider-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.selectValue[data-placeholder] {
+  color: var(--slider-text-muted);
+}
+.selectIcon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--slider-text-muted);
+}
+.selectCard:hover:not(:disabled) .selectIcon,
+.selectCard[data-popup-open="true"] .selectIcon {
+  color: var(--slider-text-muted);
+}
+.selectChevronSvg {
+  display: block;
+  transition: transform 0.2s ease-out;
+}
+/* Flip with React `menuOpen` (onOpenChange) so it tracks open immediately, not only after Base UI’s popup-open paint. */
+.selectCard[data-menu-open="true"] .selectChevronSvg {
+  transform: rotate(180deg);
+}
+.selectPortal {
+  position: relative;
+  z-index: 200000;
+  isolation: isolate;
+}
+.selectPositioner {
+  z-index: 0;
+  box-sizing: border-box;
+  /* At least as wide as the row — set inline on portal as --select-anchor-width */
+  min-width: var(--select-anchor-width, 0px);
+}
+/* Base UI scroll nudge controls (▲ / ▼) — hide even if present (siblings of popup in the portal). */
+.selectPortal [data-direction="up"],
+.selectPortal [data-direction="down"],
+.selectPositioner [data-direction="up"],
+.selectPositioner [data-direction="down"] {
+  display: none !important;
+}
+.selectPopup {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color-scheme: dark;
+  font-family: var(--aporia-font-family, inherit);
+  max-width: min(320px, calc(100vw - 24px));
+  padding: 4px;
+  border-radius: 12px;
+  background: var(--swatch-popover-bg);
+  box-shadow: inset 0 0 0 0.5px var(--swatch-popover-rim);
+  color: var(--slider-text);
+  outline: none;
+  /* Popover-style motion; anchor to trailing edge (align end / SwatchPopover). */
+  transform-origin: top right;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 0.2s ease-out,
+    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.selectPopup[data-starting-style],
+.selectPopup[data-ending-style] {
+  opacity: 0;
+  transform: translateY(-6px) scale(0.97);
+}
+.selectList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-height: min(280px, 45vh);
+  overflow-y: auto;
+  padding: 0;
+  min-width: 0;
+}
+.selectItem {
+  position: relative;
+  margin: 0;
+  /* Match SliderRow card: 10px vertical padding + ~17px line = 37px (line-height caps text box). */
+  height: 37px;
+  box-sizing: border-box;
+  padding: 10px 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-family: var(--aporia-font-family);
+  font-size: var(--aporia-ui-font-size);
+  font-weight: 400;
+  font-style: normal;
+  line-height: 17px;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  transition:
+    background-color 0.15s ease-out,
+    color 0.15s ease-out;
+}
+/* Selected / highlighted visuals: see `aporia-surfaces.css` (host `[role=option]` overrides). */
+.selectItem[data-disabled] {
+  opacity: 0.45;
+  cursor: default;
+}
+.selectItemText {
+  flex: 1;
+  min-width: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .selectPopup {
+    transition-duration: 0.1s;
+    transition-property: opacity;
+  }
+  .selectPopup[data-starting-style],
+  .selectPopup[data-ending-style] {
+    transform: none;
+  }
+  .selectChevronSvg {
+    transition: none;
+  }
+}
 /* Container - exact Figma specs */
 .gradientPicker {
   display: flex;
   flex-direction: column;
   width: 190px;
+  color-scheme: dark;
+  font-family: var(--aporia-font-family, inherit);
   background: #0a0a0a;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 12px;
@@ -1354,3 +1704,57 @@
   outline: 2px solid var(--slider-text-muted);
   outline-offset: 2px;
 }
+/**
+ * Host isolation: consumer apps often scale `rem`, reset `button`, or style generic
+ * `[role="option"]` / `[type="range"]`. These rules sit after component CSS and restore
+ * Aporia’s intended metrics on the panel and on portaled surfaces (not under `.aporiaPanel`).
+ */
+.aporiaPanel,
+.swatchPopoverPopup,
+.selectPopup,
+.gradientPicker,
+.colorPicker {
+  font-family: var(--aporia-font-family);
+  font-size: var(--aporia-ui-font-size);
+  font-weight: 400;
+  font-style: normal;
+  line-height: var(--aporia-ui-line-height);
+  letter-spacing: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+/*
+ * Do not style `input[type=range]` pseudo-elements here. WebKit paints the range control
+ * above sibling divs (`.sliderTrack`, thumb); forcing `-webkit-appearance`/thumb sizing
+ * hid the custom progress fill and card chrome in real apps (Tailwind + host resets).
+ */
+/* Swatch triggers keep inline `background` / gradients vs global `button { background: none }`. */
+.aporiaPanel button.gradientSwatchBtn,
+.aporiaPanel button.colorSwatchBtn {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 0;
+}
+/*
+ * Select listbox: duplicate Base UI’s selected / highlighted visuals with higher
+ * specificity than generic `[role="option"]` rules from host design systems.
+ */
+.selectPopup .selectList > .selectItem[role='option'][data-highlighted] {
+  background-color: #141414 !important;
+  color: #ffffff !important;
+}
+.selectPopup .selectList > .selectItem[role='option'][data-selected]:not([data-highlighted]),
+.selectPopup .selectList > .selectItem[role='option'][aria-selected='true']:not([data-highlighted]) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}

package/dist/index.d.ts CHANGED Viewed

@@ -11,6 +11,8 @@ export { ColorPicker } from './components/ColorPicker';
 export type { ColorPickerProps } from './components/ColorPicker';
 export { ToggleRow } from './components/ToggleRow';
 export type { ToggleRowProps } from './components/ToggleRow';
+export { SelectRow } from './components/SelectRow';
+export type { SelectRowProps, SelectRowOption } from './components/SelectRow';
 export { GradientRow } from './components/GradientRow';
 export type { GradientRowProps } from './components/GradientRow';
 export { GradientPicker, stopsToGradient, parseGradient, DEFAULT_GRADIENT_STOPS } from './components/GradientPicker';

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"~~AACA~~,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAG1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,OAAO,aAAa,CAAA;AAGpB,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAG5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAE5C,OAAO,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAG1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE7D,0FAA0F;AAC1F,OAAO,uBAAuB,CAAA"}