aporia 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nico Frey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# aporia
+
+A collection of production-quality React components for building configurators - sliders, color pickers, gradient editors, toggles, and more.
+
+## Installation
+
+```bash
+npm install aporia
+```
+
+## Usage
+
+```tsx
+import { SliderRow, ColorRow, ToggleRow, GradientRow, ThemeProvider } from 'aporia'
+import 'aporia/styles.css'
+
+function App() {
+  const [intensity, setIntensity] = useState(50)
+  const [color, setColor] = useState('#E8470C')
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <ThemeProvider>
+      <SliderRow
+        label="Intensity"
+        value={intensity}
+        min={0}
+        max={100}
+        step={1}
+        onChange={setIntensity}
+      />
+      <ColorRow
+        label="Accent"
+        value={color}
+        onChange={setColor}
+      />
+      <ToggleRow
+        label="Enabled"
+        checked={enabled}
+        onChange={setEnabled}
+      />
+      <GradientRow
+        label="Background"
+        onChange={(gradient) => console.log(gradient)}
+      />
+    </ThemeProvider>
+  )
+}
+```
+
+## Components
+
+### SliderRow
+
+A polished slider with spring animations, keyboard support, and inline editing.
+
+```tsx
+<SliderRow
+  label="Volume"
+  value={volume}
+  min={0}
+  max={100}
+  step={1}
+  onChange={setVolume}
+  fmt={(n) => `${n}%`}  // Optional formatter
+/>
+```
+
+### ColorRow
+
+Hex color picker with inline editing and native color picker fallback.
+
+```tsx
+<ColorRow
+  label="Color"
+  value={color}
+  onChange={setColor}
+/>
+```
+
+### ToggleRow
+
+Accessible toggle switch with keyboard support.
+
+```tsx
+<ToggleRow
+  label="Dark Mode"
+  checked={isDark}
+  onChange={setIsDark}
+/>
+```
+
+### GradientRow
+
+Multi-stop gradient editor with shuffle, invert, and auto-distribute controls.
+
+```tsx
+<GradientRow
+  label="Gradient"
+  initialStops={[
+    { color: '#000000', position: 0 },
+    { color: '#ffffff', position: 100 },
+  ]}
+  angle={90}
+  onChange={(cssGradient) => console.log(cssGradient)}
+/>
+```
+
+### GradientPicker
+
+Lower-level gradient editor component with full control.
+
+```tsx
+import { GradientPicker, stopsToGradient, parseGradient } from 'aporia'
+
+<GradientPicker
+  stops={stops}
+  onChange={setStops}
+/>
+
+// Utilities
+const css = stopsToGradient(stops, 90)  // Convert to CSS
+const stops = parseGradient(css)         // Parse CSS gradient
+```
+
+## Theming
+
+Aporia includes built-in dark and light themes. Wrap your app with `ThemeProvider`:
+
+```tsx
+import { ThemeProvider, useTheme } from 'aporia'
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  )
+}
+
+// Access theme in components
+function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme()
+  return <button onClick={toggleTheme}>{theme}</button>
+}
+```
+
+Keyboard shortcut: `Shift+T` toggles the theme.
+
+## Peer Dependencies
+
+Aporia requires these peer dependencies:
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `motion` >= 12.0.0
+- `@base-ui/react` >= 1.0.0
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server (demo app)
+npm run dev
+
+# Build library
+npm run build
+
+# Lint
+npm run lint
+```
+
+## License
+
+MIT

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type Theme = 'dark' | 'light';
+type ThemeContextValue = {
+    theme: Theme;
+    setTheme: (t: Theme) => void;
+    toggleTheme: () => void;
+};
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAIpC,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAcD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAkClE;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/components/ColorRow.d.ts

@@ -0,0 +1,7 @@
+export type ColorRowProps = {
+    label?: string;
+    value: string;
+    onChange: (hex: string) => void;
+};
+export declare function ColorRow({ label, value, onChange }: ColorRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorRow.d.ts.map

package/dist/components/ColorRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRow.d.ts","sourceRoot":"","sources":["../../src/components/ColorRow.tsx"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,CAAA;AAsBvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAkI3E"}

package/dist/components/GradientPicker.d.ts

@@ -0,0 +1,19 @@
+export type GradientStop = {
+    color: string;
+};
+export type GradientPickerProps = {
+    /** Array of gradient stops (colors only, positions auto-distributed) */
+    stops: GradientStop[];
+    /** Called when stops change */
+    onChange: (stops: GradientStop[]) => void;
+    /** Gradient angle in degrees, default 90 (left to right) */
+    angle?: number;
+};
+/** Generate CSS linear-gradient from stops with even distribution */
+export declare function stopsToGradient(stops: GradientStop[], angle?: number): string;
+/** Parse a linear-gradient string into stops */
+export declare function parseGradient(gradient: string): GradientStop[];
+/** Default 6 colors for gradient picker (dark to light, top to bottom) */
+export declare const DEFAULT_GRADIENT_STOPS: GradientStop[];
+export declare function GradientPicker({ stops, onChange }: GradientPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GradientPicker.d.ts.map

package/dist/components/GradientPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientPicker.d.ts","sourceRoot":"","sources":["../../src/components/GradientPicker.tsx"],"names":[],"mappings":"AASA,OAAO,sBAAsB,CAAA;AAE7B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,wEAAwE;IACxE,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACzC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoFD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,SAAK,GAAG,MAAM,CAWzE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAmB9D;AAED,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB,EAAE,YAAY,EAOhD,CAAA;AA6HD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAyFtE"}

package/dist/components/GradientRow.d.ts

@@ -0,0 +1,12 @@
+import { GradientStop } from './GradientPicker';
+export type GradientRowProps = {
+    label?: string;
+    /** Initial gradient stops - defaults to 6 teal-to-dark colors */
+    initialStops?: GradientStop[];
+    /** Called when gradient changes */
+    onChange?: (gradient: string) => void;
+    /** Gradient angle in degrees, default 90 */
+    angle?: number;
+};
+export declare function GradientRow({ label, initialStops, onChange, angle }: GradientRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GradientRow.d.ts.map

package/dist/components/GradientRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientRow.d.ts","sourceRoot":"","sources":["../../src/components/GradientRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2D,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC7G,OAAO,mBAAmB,CAAA;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;IAC7B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAU,EAAE,EAAE,gBAAgB,2CA0CvG"}

package/dist/components/SliderOverlapDebug.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function SliderOverlapDebugProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSliderOverlapDebugEnabled(): boolean;
+//# sourceMappingURL=SliderOverlapDebug.d.ts.map

package/dist/components/SliderOverlapDebug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderOverlapDebug.d.ts","sourceRoot":"","sources":["../../src/components/SliderOverlapDebug.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAKd,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAoB/E;AAED,wBAAgB,4BAA4B,YAE3C"}

package/dist/components/SliderRow.d.ts

@@ -0,0 +1,11 @@
+export type SliderRowProps = {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    onChange: (value: number) => void;
+    fmt?: (value: number) => string;
+};
+export declare function SliderRow({ label, value, min, max, step, onChange, fmt, }: SliderRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SliderRow.d.ts.map

package/dist/components/SliderRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRow.d.ts","sourceRoot":"","sources":["../../src/components/SliderRow.tsx"],"names":[],"mappings":"AAKA,OAAO,iBAAiB,CAAA;AAuDxB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAChC,CAAA;AAmDD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,GAAG,GACJ,EAAE,cAAc,2CA6fhB"}

package/dist/components/SwatchPopover.d.ts

@@ -0,0 +1,16 @@
+import { PopoverTrigger } from '@base-ui/react/popover';
+import { ReactNode } from 'react';
+export type SwatchPopoverRenderTrigger = PopoverTrigger.Props['render'];
+type SwatchPopoverProps = {
+    title?: string;
+    renderTrigger: NonNullable<SwatchPopoverRenderTrigger>;
+    children: ReactNode;
+};
+/**
+ * Base UI Popover anchored to a swatch: opens below, aligned to the inline end (bottom-trailing in LTR).
+ * `modal={true}` is required for the internal backdrop (blocks clicks/scroll on the rest of the page).
+ * `modal="trap-focus"` does not mount that layer, so controls underneath stayed clickable.
+ */
+export declare function SwatchPopover({ title, renderTrigger, children }: SwatchPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SwatchPopover.d.ts.map

package/dist/components/SwatchPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchPopover.d.ts","sourceRoot":"","sources":["../../src/components/SwatchPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,qBAAqB,CAAA;AAE5B,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;AAEvE,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;IACtD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CA2BnF"}

package/dist/components/ToggleRow.d.ts

@@ -0,0 +1,7 @@
+export type ToggleRowProps = {
+    label: string;
+    checked: boolean;
+    onChange: (next: boolean) => void;
+};
+export declare function ToggleRow({ label, checked, onChange }: ToggleRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToggleRow.d.ts.map

package/dist/components/ToggleRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleRow.d.ts","sourceRoot":"","sources":["../../src/components/ToggleRow.tsx"],"names":[],"mappings":"AACA,OAAO,iBAAiB,CAAA;AAExB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAiCrE"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { SliderRow } from './components/SliderRow';
+export type { SliderRowProps } from './components/SliderRow';
+export { ColorRow } from './components/ColorRow';
+export type { ColorRowProps } from './components/ColorRow';
+export { ToggleRow } from './components/ToggleRow';
+export type { ToggleRowProps } from './components/ToggleRow';
+export { GradientRow } from './components/GradientRow';
+export type { GradientRowProps } from './components/GradientRow';
+export { GradientPicker, stopsToGradient, parseGradient, DEFAULT_GRADIENT_STOPS } from './components/GradientPicker';
+export type { GradientStop, GradientPickerProps } from './components/GradientPicker';
+export { SwatchPopover } from './components/SwatchPopover';
+export type { SwatchPopoverRenderTrigger } from './components/SwatchPopover';
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export type { Theme } from './ThemeProvider';
+export { SliderOverlapDebugProvider, useSliderOverlapDebugEnabled } from './components/SliderOverlapDebug';
+export { isTextInputTarget } from './utils/isTextInputTarget';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,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,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"}