@newtonedev/components 0.1.0

package/README.md

@@ -0,0 +1,506 @@
+# @newtone/components
+
+Production-ready React component library built on the Newtone color engine. Cross-platform support for web and React Native using `react-native-web`.
+
+## Features
+
+- 🎨 **Powered by Newtone** — Accessible semantic color systems with OKLCH color space
+- 🌓 **Light/Dark Mode** — Automatic theme switching with Context API
+- 🎯 **Four Themes** — Neutral, Primary, Secondary, Strong with elevation support
+- 📱 **Cross-Platform** — Single codebase for web and React Native
+- 🔧 **Runtime Tokens** — Dynamic color computation with memoization
+- ♿️ **Accessible** — WCAG contrast ratios built-in
+- 📦 **Zero Config** — Sensible defaults, fully customizable
+- 🎭 **TypeScript** — Full type safety
+
+## Installation
+
+```bash
+npm install @newtone/components react react-native
+```
+
+### Additional Setup
+
+**For Web Projects:**
+```bash
+npm install react-native-web react-dom
+```
+
+**For React Native Projects:**
+No additional dependencies required.
+
+## Quick Start
+
+### Web Application
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { NewtoneProvider, Button } from '@newtone/components';
+
+function App() {
+  return (
+    <NewtoneProvider initialMode="light" initialTheme="neutral">
+      <div style={{ padding: 20 }}>
+        <Button variant="primary" onPress={() => console.log('Clicked!')}>
+          Click me
+        </Button>
+      </div>
+    </NewtoneProvider>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+### React Native Application
+
+```tsx
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { NewtoneProvider, Button } from '@newtone/components';
+
+export default function App() {
+  return (
+    <NewtoneProvider initialMode="light" initialTheme="neutral">
+      <SafeAreaView style={{ flex: 1, padding: 20 }}>
+        <Button variant="primary" onPress={() => console.log('Clicked!')}>
+          Click me
+        </Button>
+      </SafeAreaView>
+    </NewtoneProvider>
+  );
+}
+```
+
+## Components
+
+### Button
+
+A cross-platform button component with multiple variants and sizes.
+
+#### Props
+
+```typescript
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'outline'; // default: 'primary'
+  size?: 'sm' | 'md' | 'lg'; // default: 'md'
+  disabled?: boolean; // default: false
+  onPress?: () => void;
+  style?: ViewStyle | ViewStyle[];
+  textStyle?: TextStyle | TextStyle[];
+  // ... all other Pressable props
+}
+```
+
+#### Variants
+
+- **Primary** — Filled button with interactive color background
+- **Secondary** — Filled button with elevated background
+- **Ghost** — Transparent button with colored text
+- **Outline** — Border-only button with colored text
+
+#### Sizes
+
+- **Small (`sm`)** — Compact button for tight spaces (6px vertical padding)
+- **Medium (`md`)** — Default size for most use cases (10px vertical padding)
+- **Large (`lg`)** — Prominent button for primary actions (14px vertical padding)
+
+#### Examples
+
+```tsx
+import { Button } from '@newtone/components';
+
+// Primary button (default)
+<Button onPress={() => {}}>Submit</Button>
+
+// Secondary button
+<Button variant="secondary" onPress={() => {}}>Cancel</Button>
+
+// Large ghost button
+<Button variant="ghost" size="lg" onPress={() => {}}>Learn More</Button>
+
+// Disabled outline button
+<Button variant="outline" disabled>Unavailable</Button>
+
+// Custom styles
+<Button
+  variant="primary"
+  style={{ marginTop: 20, width: 200 }}
+  textStyle={{ fontWeight: 'bold' }}
+  onPress={() => {}}
+>
+  Custom Styled
+</Button>
+```
+
+## Theme System
+
+### NewtoneProvider
+
+Wrap your application root with `NewtoneProvider` to enable theming.
+
+```tsx
+import { NewtoneProvider } from '@newtone/components';
+
+<NewtoneProvider
+  config={customConfig} // optional, uses defaults if omitted
+  initialMode="light" // 'light' | 'dark', default: 'light'
+  initialTheme="neutral" // 'neutral' | 'primary' | 'secondary' | 'strong', default: 'neutral'
+>
+  <App />
+</NewtoneProvider>
+```
+
+#### Default Configuration
+
+The library ships with a sensible default configuration:
+
+- **5 Palettes**: Neutral (gray), Accent (blue), Success (green), Warning (yellow), Error (red)
+- **4 Themes**: Each maps to a palette with light/dark normalized values
+- **3 Elevations**: Surface levels with subtle color shifts (-0.02, 0, +0.04)
+- **Dynamic Range**: Lightest = 1 (white), Darkest = 1 (black)
+
+### useNewtoneTheme Hook
+
+Access and modify theme state from any component within the provider.
+
+```tsx
+import { useNewtoneTheme } from '@newtone/components';
+
+function ThemeToggle() {
+  const { mode, theme, setMode, setTheme } = useNewtoneTheme();
+
+  return (
+    <div>
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode} mode
+      </button>
+      <button onClick={() => setTheme('primary')}>
+        Switch to primary theme
+      </button>
+    </div>
+  );
+}
+```
+
+### useTokens Hook
+
+Compute design tokens for the current theme context at a specific elevation.
+
+```tsx
+import { useTokens } from '@newtone/components';
+
+function CustomComponent() {
+  const tokens = useTokens(1); // Elevation level: 0, 1, or 2
+
+  return (
+    <div style={{
+      backgroundColor: tokens.background.srgb,
+      color: tokens.textPrimary.srgb
+    }}>
+      Custom component using tokens
+    </div>
+  );
+}
+```
+
+#### Available Tokens
+
+```typescript
+interface ResolvedTokens {
+  background: ColorResult;           // Base surface color
+  backgroundElevated: ColorResult;   // Elevated surface (+1 level)
+  backgroundSunken: ColorResult;     // Sunken surface (-1 level)
+  textPrimary: ColorResult;          // Primary text (WCAG 4.5:1)
+  textSecondary: ColorResult;        // Secondary text (WCAG 3.0:1)
+  interactive: ColorResult;          // Interactive elements (accent palette)
+  interactiveHover: ColorResult;     // Hover state
+  interactiveActive: ColorResult;    // Active/pressed state
+  border: ColorResult;               // Subtle borders
+}
+```
+
+Each `ColorResult` contains:
+```typescript
+{
+  srgb: { r: number, g: number, b: number }, // 0-1 range
+  oklch: { L: number, C: number, h: number }
+}
+```
+
+**Helper for hex conversion:**
+```tsx
+import { srgbToHex } from 'newtone';
+
+const hexColor = srgbToHex(tokens.background.srgb); // "#ffffff"
+```
+
+## Customization
+
+### Custom Color System
+
+Override the default palette configuration:
+
+```tsx
+import { NewtoneProvider } from '@newtone/components';
+import type { ColorSystemConfig } from 'newtone';
+
+const customColorSystem: ColorSystemConfig = {
+  dynamicRange: {
+    lightest: 1,    // 0-1, where 1 = pure white
+    darkest: 1,     // 0-1, where 1 = pure black
+  },
+  palettes: [
+    {
+      hue: 220,           // OKLCH hue (0-360)
+      saturation: 80,     // 0-100, relative to max in-gamut chroma
+      desaturation: {
+        direction: 'light',  // 'light' | 'dark'
+        strength: 'medium'   // 'low' | 'medium' | 'hard'
+      },
+      paletteHueGrading: {
+        hue: 200,
+        strength: 'low',
+        direction: 'light'
+      }
+    },
+    // ... more palettes
+  ],
+};
+
+const customConfig = {
+  colorSystem: customColorSystem,
+  themes: {
+    neutral: { paletteIndex: 0, lightModeNv: 0.97, darkModeNv: 0.08 },
+    primary: { paletteIndex: 1, lightModeNv: 0.50, darkModeNv: 0.45 },
+    secondary: { paletteIndex: 2, lightModeNv: 0.60, darkModeNv: 0.55 },
+    strong: { paletteIndex: 3, lightModeNv: 0.30, darkModeNv: 0.70 },
+  },
+  elevation: {
+    offsets: [-0.02, 0, 0.04] as const,
+  },
+};
+
+<NewtoneProvider config={customConfig}>
+  <App />
+</NewtoneProvider>
+```
+
+### Custom Button Styles
+
+Override button appearance with `style` and `textStyle` props:
+
+```tsx
+<Button
+  variant="primary"
+  style={[
+    { borderRadius: 20, paddingHorizontal: 30 },
+    isHighlighted && { transform: [{ scale: 1.05 }] }
+  ]}
+  textStyle={{
+    fontFamily: 'CustomFont',
+    letterSpacing: 1
+  }}
+>
+  Custom Button
+</Button>
+```
+
+## Architecture
+
+### Token Computation Strategy
+
+**Phase 1 (Current): Runtime Computation**
+
+Tokens are computed on-demand using the Newtone color engine:
+
+```
+Config → getColor() → OKLCH → Gamut Mapping → sRGB → ColorResult
+```
+
+- ✅ Maximum flexibility (change config, colors update instantly)
+- ✅ Smallest bundle (no pre-generated tokens)
+- ✅ Always accurate (no stale tokens)
+- ⚠️  Requires engine in bundle (~20KB minified)
+- ⚠️  Runtime computation cost (mitigated by memoization)
+
+**Phase 2 (Future): Hybrid Strategy**
+
+- **Development**: Runtime computation (hot reload, instant feedback)
+- **Production**: Build-time token generation (W3C Design Tokens JSON)
+- Zero engine in production bundle
+- Cross-platform export (CSS, iOS, Android, etc.)
+
+### Component Patterns
+
+All components follow these conventions:
+
+1. **Pure Components** — Props in, UI out, no side effects
+2. **Token-Driven** — Colors from `useTokens()`, not hardcoded
+3. **Cross-Platform** — `Pressable`, `Text`, `StyleSheet` from React Native
+4. **Memoized Styles** — `useMemo` for style computation
+5. **Accessible** — WCAG-compliant contrast ratios
+6. **Type-Safe** — Full TypeScript with readonly interfaces
+
+### File Structure
+
+```
+packages/components/
+├── src/
+│   ├── theme/
+│   │   ├── types.ts              # ColorMode, ThemeName, ThemeMapping
+│   │   ├── defaults.ts           # DEFAULT_THEME_CONFIG
+│   │   └── NewtoneProvider.tsx   # Context provider + hook
+│   ├── tokens/
+│   │   ├── types.ts              # ResolvedTokens interface
+│   │   ├── computeTokens.ts      # Pure token computation
+│   │   └── useTokens.ts          # Memoized token hook
+│   ├── Button/
+│   │   ├── Button.tsx            # Component implementation
+│   │   ├── Button.types.ts       # Props and type definitions
+│   │   ├── Button.styles.ts      # Style computation function
+│   │   └── index.ts              # Barrel export
+│   └── index.ts                  # Public API
+├── tests/
+│   ├── theme.test.tsx            # Theme system tests
+│   ├── tokens.test.ts            # Token computation tests
+│   └── Button.test.tsx           # Button component tests
+└── package.json
+```
+
+## Platform-Specific Notes
+
+### Web
+
+- Uses `react-native-web` to render React Native primitives as HTML
+- `Pressable` → `<button>` or `<div>` with click handlers
+- `Text` → `<span>`
+- `StyleSheet` → Optimized CSS-in-JS
+
+**Bundler Configuration:**
+
+Most modern bundlers (Vite, Next.js, Create React App) automatically handle `react-native-web` aliasing. If needed, manually alias:
+
+```js
+// vite.config.js
+export default {
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+};
+```
+
+### React Native
+
+- Native components render directly
+- No additional bundler configuration needed
+- Full gesture support via `Pressable`
+- Metro bundler resolves `react-native` imports automatically
+
+## Testing
+
+The library uses Vitest + React Testing Library for comprehensive testing:
+
+```bash
+cd packages/components
+npm test              # Run tests in watch mode
+npm run test:run      # Run tests once
+npm run test:coverage # Generate coverage report
+```
+
+**Test Setup:**
+
+- Environment: `jsdom` (browser simulation)
+- Alias: `react-native` → `react-native-web` for web compatibility
+- Coverage: 90% threshold (branches, functions, lines, statements)
+
+**Example Test:**
+
+```tsx
+import { render, fireEvent } from '@testing-library/react';
+import { Button, NewtoneProvider } from '@newtone/components';
+
+it('calls onPress when clicked', () => {
+  const onPress = vi.fn();
+  const { getByText } = render(
+    <NewtoneProvider>
+      <Button onPress={onPress}>Click me</Button>
+    </NewtoneProvider>
+  );
+
+  fireEvent.click(getByText('Click me'));
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+```
+
+## TypeScript
+
+All types are exported for consumer applications:
+
+```tsx
+import type {
+  // Components
+  ButtonProps,
+  ButtonVariant,
+  ButtonSize,
+
+  // Theme System
+  ColorMode,
+  ThemeName,
+  ElevationLevel,
+  ThemeMapping,
+  ColorSystemConfig,
+  NewtoneThemeConfig,
+  NewtoneThemeContext,
+
+  // Tokens
+  ResolvedTokens,
+
+  // Engine (re-exported from newtone)
+  DynamicRange,
+  PaletteConfig,
+  ColorResult,
+  Srgb,
+  Oklch,
+  HexColor,
+} from '@newtone/components';
+```
+
+## Roadmap
+
+### Phase 1 (Complete) ✅
+- [x] Monorepo setup with npm workspaces
+- [x] Theme system (NewtoneProvider, useNewtoneTheme)
+- [x] Runtime token computation (useTokens)
+- [x] Button component (4 variants, 3 sizes)
+- [x] Comprehensive test suite (48 tests)
+- [x] Documentation
+
+### Phase 2 (Planned)
+- [ ] Build-time token generation (W3C Design Tokens JSON)
+- [ ] CSS variable export for web
+- [ ] Platform-specific token formats (iOS, Android)
+- [ ] Additional components (Input, Card, Modal, etc.)
+- [ ] Storybook integration
+- [ ] Visual regression testing
+- [ ] Performance benchmarks
+
+## Contributing
+
+This library is part of the [Newtone](https://github.com/joshuaallenmx/newtone) project. Please refer to the main repository for contribution guidelines.
+
+## License
+
+MIT
+
+## Support
+
+For issues, questions, or feature requests, please open an issue in the main [Newtone repository](https://github.com/joshuaallenmx/newtone/issues).
+
+---
+
+Built with ❤️ by the Newtone team

package/dist/Button/Button.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ButtonProps } from './Button.types';
+/**
+ * Button component with support for multiple variants and sizes.
+ *
+ * Automatically adapts to the current theme and mode from NewtoneProvider.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md" onPress={() => console.log('Pressed')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Button variant="outline" size="lg" disabled>
+ *   Disabled button
+ * </Button>
+ * ```
+ */
+export declare function Button({ children, variant, size, disabled, style, textStyle, ...pressableProps }: ButtonProps): React.JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,GAAG,cAAc,EAClB,EAAE,WAAW,qBAiCb"}

package/dist/Button/Button.styles.d.ts

@@ -0,0 +1,39 @@
+import type { ResolvedTokens } from '../tokens/types';
+import type { ButtonVariant, ButtonSize } from './Button.types';
+/**
+ * Compute button styles based on tokens, variant, size, and state
+ *
+ * @param tokens - Resolved design tokens from useTokens
+ * @param variant - Button variant (primary, secondary, ghost, outline)
+ * @param size - Button size (sm, md, lg)
+ * @param disabled - Whether button is disabled
+ * @returns StyleSheet with button styles
+ */
+export declare function getButtonStyles(tokens: ResolvedTokens, variant: ButtonVariant, size: ButtonSize, disabled: boolean): {
+    base: {
+        borderColor?: string | undefined;
+        backgroundColor: string;
+        borderWidth: number;
+        paddingVertical: 6 | 10 | 14;
+        paddingHorizontal: 12 | 20 | 28;
+        borderRadius: 8 | 4 | 6;
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+    };
+    pressed: {
+        backgroundColor: string;
+        opacity: number;
+    };
+    disabled: {
+        opacity: number;
+    };
+    text: {
+        fontSize: 12 | 14 | 16;
+        fontWeight: "600";
+        color: string;
+    };
+    textPressed: {};
+    textDisabled: {};
+};
+//# sourceMappingURL=Button.styles.d.ts.map

package/dist/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../src/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWhE;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;EAwElB"}

package/dist/Button/Button.types.d.ts

@@ -0,0 +1,42 @@
+import type { PressableProps, ViewStyle, TextStyle } from 'react-native';
+/**
+ * Visual variants for the Button component
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+/**
+ * Size presets for the Button component
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    /**
+     * Button text or custom content
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Visual variant
+     * @default 'primary'
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * Size preset
+     * @default 'md'
+     */
+    readonly size?: ButtonSize;
+    /**
+     * Disabled state
+     * @default false
+     */
+    readonly disabled?: boolean;
+    /**
+     * Custom style overrides for container
+     */
+    readonly style?: ViewStyle | ViewStyle[];
+    /**
+     * Custom style overrides for text
+     */
+    readonly textStyle?: TextStyle | TextStyle[];
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAEzC;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC9C"}

package/dist/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CardProps } from './Card.types';
+export declare function Card({ children, elevation, style, disabled, }: CardProps): React.JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAa,EACb,KAAK,EACL,QAAgB,GACjB,EAAE,SAAS,qBAaX"}

package/dist/Card/Card.styles.d.ts

@@ -0,0 +1,12 @@
+import type { ResolvedTokens } from '../tokens/types';
+export declare function getCardStyles(tokens: ResolvedTokens, disabled: boolean): {
+    container: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        padding: number;
+        opacity: number;
+    };
+};
+//# sourceMappingURL=Card.styles.d.ts.map

package/dist/Card/Card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../src/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,aAAa,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;EAWtE"}

package/dist/Card/Card.types.d.ts

@@ -0,0 +1,9 @@
+import type { ViewStyle } from 'react-native';
+import type { ElevationLevel } from '../theme/types';
+export interface CardProps {
+    readonly children: React.ReactNode;
+    readonly elevation?: ElevationLevel;
+    readonly style?: ViewStyle | ViewStyle[];
+    readonly disabled?: boolean;
+}
+//# sourceMappingURL=Card.types.d.ts.map

package/dist/Card/Card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../src/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/dist/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card } from './Card';
+export type { CardProps } from './Card.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/HueSlider/HueSlider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { HueSliderProps } from './HueSlider.types';
+/**
+ * Hue slider with rainbow gradient track.
+ *
+ * Value range: 0-359 (traditional color wheel hue).
+ * 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
+ *
+ * Optional min/max constrain the selectable range.
+ * For wrapping ranges (e.g. red: min=345 max=375), max may exceed 359;
+ * the returned value is always normalized to [0, 359].
+ */
+export declare function HueSlider({ value, onValueChange, min, max, label, showValue, disabled, style, }: HueSliderProps): React.JSX.Element;
+//# sourceMappingURL=HueSlider.d.ts.map