@arolariu/components 1.0.0 → 1.1.0

package/src/index.ts

@@ -149,6 +149,16 @@ export {Checkbox} from "./components/ui/checkbox";
 
 export {Collapsible, CollapsibleContent, CollapsibleTrigger} from "./components/ui/collapsible";
 
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxItem,
+  ComboboxSeparator,
+  ComboboxTrigger,
+} from "./components/ui/combobox";
+
 export {
   Command,
   CommandDialog,
@@ -489,12 +499,25 @@ export {
 export {VisuallyHidden, type VisuallyHiddenProps} from "./components/ui/visually-hidden";
 
 export {useBreakpoint, type Breakpoint} from "./hooks/useBreakpoint";
+export {useClipboard, type UseClipboardOptions, type UseClipboardReturn} from "./hooks/useClipboard";
 export {useColorScheme, type ColorScheme} from "./hooks/useColorScheme";
+export {useControllableState, type UseControllableStateOptions} from "./hooks/useControllableState";
+export {useDebounce} from "./hooks/useDebounce";
+export {useEventCallback} from "./hooks/useEventCallback";
 export {useFocusVisible} from "./hooks/useFocusVisible";
+export {useId} from "./hooks/useId";
+export {useIntersectionObserver} from "./hooks/useIntersectionObserver";
+export {useInterval} from "./hooks/useInterval";
 export {useIsMobile} from "./hooks/useIsMobile";
+export {useLocalStorage} from "./hooks/useLocalStorage";
 export {useMediaQuery} from "./hooks/useMediaQuery";
+export {useMergedRefs} from "./hooks/useMergedRefs";
+export {useOnClickOutside} from "./hooks/useOnClickOutside";
 export {usePrefersContrast} from "./hooks/usePrefersContrast";
+export {usePrevious} from "./hooks/usePrevious";
 export {useReducedMotion} from "./hooks/useReducedMotion";
+export {useThrottle} from "./hooks/useThrottle";
+export {useTimeout} from "./hooks/useTimeout";
 export {useWindowSize} from "./hooks/useWindowSize";
 
 export {

package/src/lib/utilities.ts

@@ -1,4 +1,6 @@
-import {clsx, type ClassValue} from "clsx";
+import {clsx} from "clsx";
+
+export type {ClassValue} from "clsx";
 
 /**
  * Helper function that merges CSS class names.
@@ -6,8 +8,6 @@ import {clsx, type ClassValue} from "clsx";
  * @param inputs Array of class names
  * @returns Merged class names string
  */
-export function cn(...inputs: ReadonlyArray<ClassValue>): string {
+export function cn(...inputs: ReadonlyArray<import("clsx").ClassValue>): string {
   return clsx(inputs);
 }
-
-export type {ClassValue};

package/src/motion/tokens.ts

@@ -19,10 +19,10 @@ export const durations = {
  * Standard easing curves for consistent motion across the library.
  */
 export const easings = {
-  ease: [0.25, 0.1, 0.25, 1.0],
-  easeIn: [0.42, 0, 1.0, 1.0],
-  easeOut: [0, 0, 0.58, 1.0],
-  easeInOut: [0.42, 0, 0.58, 1.0],
+  ease: [0.25, 0.1, 0.25, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
   spring: {type: "spring" as const, stiffness: 300, damping: 24},
 } as const;
 

package/src/stories/DesignPrinciples.mdx

@@ -0,0 +1,48 @@
+{/* @meta title: Introduction/Design Principles */}
+
+# Design Principles
+
+## 🎯 Accessibility First
+
+Every component is built on **Base UI** primitives, ensuring:
+- Correct ARIA attributes and roles
+- Keyboard navigation support
+- Screen reader compatibility
+- Focus management
+- Color contrast compliance (WCAG 2.1 AA)
+
+## 🎨 Design Tokens
+
+We use **OKLCH** color space for perceptually uniform colors:
+- Colors stay visually consistent across light and dark themes
+- Tokens are CSS custom properties (`--ac-*` prefix)
+- Override any token to create custom themes
+
+## 🧩 Composition Over Configuration
+
+Components follow the **compound component** pattern:
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
+
+## 🔧 Progressive Enhancement
+
+- Server Components by default
+- `"use client"` only when hooks/interactivity needed
+- CSS Modules for scoped, predictable styles
+- No runtime CSS-in-JS overhead
+
+## 📐 Consistent API
+
+Every component follows these conventions:
+- `className` prop for custom styling
+- `forwardRef` for DOM access
+- `displayName` for debugging
+- JSDoc for API documentation
+- Co-located tests and stories

package/src/stories/GettingStarted.mdx

@@ -0,0 +1,92 @@
+{/* @meta title: Introduction/Getting Started */}
+
+# Getting Started
+
+## Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install @arolariu/components @base-ui/react motion react react-dom
+```
+
+## Setup
+
+### 1. Import Styles
+
+Add the required CSS import to your app entry point:
+
+```tsx
+// app/layout.tsx or main.tsx
+import "@arolariu/components/styles";
+```
+
+### 2. Use Components
+
+```tsx
+import {Button, Card, CardContent, CardHeader, CardTitle} from "@arolariu/components";
+
+export function MyCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Hello World</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Your first component!</p>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### 3. Dark Mode
+
+Add `data-theme="dark"` to your root element:
+
+```tsx
+<html data-theme="dark">
+  <body>{children}</body>
+</html>
+```
+
+Or toggle with JavaScript:
+```tsx
+document.documentElement.setAttribute("data-theme", "dark");
+```
+
+### 4. Tree-Shaking
+
+Import individual components for smaller bundles:
+
+```tsx
+// ✅ Import from subpath (tree-shakeable)
+import {Button} from "@arolariu/components/button";
+import {useMediaQuery} from "@arolariu/components/useMediaQuery";
+```
+
+## TypeScript
+
+All components are fully typed. Use `Readonly<Props>` for component props:
+
+```tsx
+import type {ButtonProps} from "@arolariu/components";
+```
+
+## Next.js Integration
+
+The library works with Next.js App Router. Server Components can import components — client-only ones have `"use client"` directives.
+
+```tsx
+// app/page.tsx (Server Component)
+import {Card, CardContent} from "@arolariu/components";
+
+export default function Page() {
+  return (
+    <Card>
+      <CardContent>Server-rendered!</CardContent>
+    </Card>
+  );
+}
+```

package/src/stories/Welcome.mdx

@@ -0,0 +1,44 @@
+{/* @meta title: Introduction/Welcome */}
+
+# 👋 Welcome to @arolariu/components
+
+A modern, accessible React component library built on **Base UI** primitives with **CSS Modules** and **OKLCH** design tokens.
+
+## ✨ Highlights
+
+- **84+ components** — From buttons to data tables, charts to animated backgrounds
+- **23 hooks** — Utility hooks for state, media queries, clipboard, local storage
+- **Base UI foundation** — Accessible, composable, lightweight
+- **CSS Modules** — Scoped styles, zero Tailwind dependency
+- **OKLCH color space** — Perceptually uniform, modern color tokens
+- **95%+ test coverage** — 1300+ tests across all components
+- **TypeScript strict** — Full type safety, no `any` types
+- **Dark mode** — Built-in light/dark theme support via CSS variables
+- **Motion system** — Animation tokens, presets, and utilities
+
+## 🚀 Quick Start
+
+```bash
+npm install @arolariu/components @base-ui/react motion
+```
+
+```tsx
+import "@arolariu/components/styles";
+import {Button} from "@arolariu/components";
+
+function App() {
+  return <Button variant="default">Click me</Button>;
+}
+```
+
+## 📚 Explore
+
+- **[Design Tokens](?path=/docs/foundations-design-tokens--docs)** — Colors, spacing, typography, radius
+- **[Components](?path=/docs/components-actions-button--docs)** — Interactive UI building blocks
+- **[Hooks](?path=/docs/components-actions-button--docs)** — Utility hooks for common patterns
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/arolariu/arolariu.ro)
+- [npm Package](https://www.npmjs.com/package/@arolariu/components)
+- [arolariu.ro](https://arolariu.ro)