@harshit-wander/component-lib 1.1.14 → 1.1.16

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 (9) hide show
  1. package/README.md +55 -50
  2. package/dist/index.cjs +790 -24
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +203 -1
  5. package/dist/index.d.ts +203 -1
  6. package/dist/index.js +784 -26
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -3,76 +3,63 @@
3
3
  [![npm version](https://img.shields.io/npm/v/@harshit-wander/component-lib.svg)](https://www.npmjs.com/package/@harshit-wander/component-lib)
4
4
  [![license](https://img.shields.io/npm/l/@harshit-wander/component-lib.svg)](./LICENSE)
5
5
 
6
- A themed React component library — primitives and full page sections built with `styled-components`. SSR-safe for Next.js App Router, ESM + CJS dual-published, fully typed.
6
+ A themed React component library — primitives and full page sections built with **Tailwind CSS v4**.
7
+ Zero-runtime styling, SSR-safe for Next.js App Router, ESM + CJS dual-published, fully typed.
8
+
9
+ > **Docs:** [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) explains how the library is structured and
10
+ > how everything fits together. Authoring rules live in `CLAUDE.md`.
7
11
 
8
12
  ---
9
13
 
10
14
  ## Install
11
15
 
12
16
  ```bash
13
- pnpm add @harshit-wander/component-lib react react-dom styled-components
17
+ pnpm add @harshit-wander/component-lib react react-dom
14
18
  ```
15
19
 
16
- > Replace `pnpm` with `npm install` or `yarn add` if those are your tools. `react`, `react-dom`, and `styled-components` are peer dependencies — install them in your own project so you don't end up with two copies of React in your bundle.
20
+ > Replace `pnpm` with `npm install` or `yarn add` if those are your tools. `react` and `react-dom`
21
+ > are peer dependencies — install them in your own project so you don't end up with two copies of
22
+ > React in your bundle.
17
23
 
18
24
  **Requirements**
19
25
 
20
26
  - Node.js `>=20`
21
27
  - React `^18.0.0` or `^19.0.0`
22
- - `styled-components` `^6.0.0`
28
+
29
+ You do **not** need Tailwind configured in your app — the library ships a precompiled, minified CSS
30
+ file (`dist/styles.css`). You just import it once (below). If your app *does* use Tailwind, the
31
+ library still works; its styles are scoped to its own classes.
23
32
 
24
33
  ## Quick start
25
34
 
26
- The library reads its theme from React context, so the root of your tree needs to be wrapped in `<ThemeProvider>` once.
35
+ The library is styled with Tailwind utility classes shipped in **one CSS file**. Import that file
36
+ **once** near the root of your app, then use components anywhere. **There is no provider to set up.**
27
37
 
28
38
  ### Next.js (App Router)
29
39
 
30
- Create `app/providers.tsx`:
31
-
32
- ```tsx
33
- 'use client'
34
-
35
- import { ThemeProvider } from 'styled-components'
36
- import { theme } from '@harshit-wander/component-lib'
37
- import type { ReactNode } from 'react'
38
-
39
- export function Providers({ children }: { children: ReactNode }) {
40
- return <ThemeProvider theme={theme}>{children}</ThemeProvider>
41
- }
42
- ```
43
-
44
- Wrap `app/layout.tsx`:
45
-
46
40
  ```tsx
47
- import { Providers } from './providers'
41
+ // app/layout.tsx
42
+ import '@harshit-wander/component-lib/styles.css'
48
43
 
49
44
  export default function RootLayout({ children }: { children: React.ReactNode }) {
50
45
  return (
51
46
  <html lang="en">
52
- <body>
53
- <Providers>{children}</Providers>
54
- </body>
47
+ <body>{children}</body>
55
48
  </html>
56
49
  )
57
50
  }
58
51
  ```
59
52
 
60
- For server-rendered styles without flash-of-unstyled-content, add the styled-components registry from the [official Next.js guide](https://styled-components.com/docs/advanced#nextjs).
53
+ Importing the CSS in the root layout means the styles are in the server-rendered HTML — no
54
+ flash-of-unstyled-content, no client-side style injection, no registry to configure.
61
55
 
62
56
  ### Vite / CRA / Remix / plain React
63
57
 
64
- ```tsx
65
- import { ThemeProvider } from 'styled-components'
66
- import { theme } from '@harshit-wander/component-lib'
67
- import { App } from './App'
58
+ Import the CSS once at your app entry point:
68
59
 
69
- export function Root() {
70
- return (
71
- <ThemeProvider theme={theme}>
72
- <App />
73
- </ThemeProvider>
74
- )
75
- }
60
+ ```tsx
61
+ // main.tsx / index.tsx
62
+ import '@harshit-wander/component-lib/styles.css'
76
63
  ```
77
64
 
78
65
  ## Use components
@@ -110,40 +97,58 @@ export function HomePage() {
110
97
  }
111
98
  ```
112
99
 
100
+ Every component forwards a `ref`, spreads extra props (`id`, `data-*`, ARIA, handlers) onto its root
101
+ element, and merges any `className` you pass **over** its defaults (via `tailwind-merge`) — so you
102
+ can override spacing/layout from the consumer side without fighting specificity.
103
+
113
104
  ## What's in the box
114
105
 
115
106
  **Primitives** (`src/components/`) — small reusable cards and atoms:
116
- `BrandLogo`, `ContactForm`, `DestinationCard`, `EventBanner`, `ExpandableValueCard`, `ExploreCard`, `FaqExpandable`, `FeatureCard`, `GalleryPhoto`, `LocationCard`, `MonthTabs`, `PackageCard`, `SectionHeader`, `TeamInfoCard`, `TestimonialCard`, `TripCategoryCard`, `WarriorCard`.
107
+ `BrandLogo`, `ContactForm`, `DestinationCard`, `EventBanner`, `EventVideoBanner`,
108
+ `ExpandableValueCard`, `ExploreCard`, `FaqExpandable`, `FeatureCard`, `GalleryPhoto`, `LocationCard`,
109
+ `MonthTabs`, `PackageCard`, `SectionHeader`, `TeamInfoCard`, `TestimonialCard`, `TripCategoryCard`,
110
+ `WarriorCard`.
117
111
 
118
112
  **Sections** (`src/sections/`) — full-width composed page blocks:
119
- `BottomNav`, `BrandsSection`, `CategoryNavbar`, `ContactSection`, `CtaBanner`, `DestinationsSection`, `EventCarousel`, `ExploreSection`, `FaqSection`, `Footer`, `GallerySection`, `Hero`, `Navbar`, `OfficesSection`, `PackagesCarousel`, `TeamSection`, `TestimonialsCarousel`, `TextSection`, `TripsCategorySection`, `ValuesSection`, `WarriorsSection`, `WhyChooseSection`.
113
+ `BottomNav`, `BrandsSection`, `CategoryNavbar`, `ContactSection`, `CtaBanner`, `DestinationsSection`,
114
+ `EventCarousel`, `ExploreSection`, `FaqSection`, `Footer`, `GallerySection`, `Hero`, `HomeHero`,
115
+ `Navbar`, `OfficesSection`, `PackagesCarousel`, `SiteHeader`, `TeamSection`, `TestimonialsCarousel`,
116
+ `TextSection`, `TripsCategorySection`, `ValuesSection`, `WarriorsSection`, `WhyChooseSection`.
117
+
118
+ **Theme tokens** — a `theme` object and `Theme` type are exported from the root, exposing `colors`,
119
+ `spacing`, `radii`, `fontSizes`, `fontWeights`, `shadows`, and `layout`.
120
120
 
121
- **Theme** — `theme` object and `Theme` type, exposing `colors`, `spacing`, `radii`, `fontSizes`, `fontWeights`, `shadows`, `typography`, `layout`.
121
+ ## Design tokens
122
122
 
123
- ## TypeScript: augment the theme (optional)
123
+ All visual values come from a single token set. They are available two ways:
124
124
 
125
- For autocomplete on `theme.colors.primary` inside your own styled components, add this to a `.d.ts` file anywhere in your project:
125
+ - **As Tailwind utility classes** (how the components themselves are styled) — e.g. `bg-accent`,
126
+ `text-text-muted`, `gap-md`, `rounded-md`, `text-xl`. These come from the imported `styles.css`.
127
+ - **As a typed JS object**, for the rare case you need a raw token value at runtime:
126
128
 
127
129
  ```ts
128
- import 'styled-components'
130
+ import { theme } from '@harshit-wander/component-lib'
129
131
  import type { Theme } from '@harshit-wander/component-lib'
130
132
 
131
- declare module 'styled-components' {
132
- export interface DefaultTheme extends Theme {}
133
- }
133
+ theme.colors.primary // '#01AFD1'
134
+ theme.spacing.md // '16px'
134
135
  ```
135
136
 
137
+ The token object mirrors the `@theme` definitions in the library's `styles.css` — they are kept in
138
+ sync, so the same names work in both places.
139
+
136
140
  ## Troubleshooting
137
141
 
138
142
  | Symptom | Cause | Fix |
139
143
  |---|---|---|
140
- | `createContext is not a function` (Next.js App Router) | Stale build of the library | Upgrade to the latest version — the bundle ships with a `"use client"` boundary. |
141
- | `Invalid hook call` at runtime | Two copies of React in the bundle | `pnpm why react` — dedupe so only one React resolves. |
142
- | Components render unstyled | Missing `<ThemeProvider>` wrapper | Wrap your root in `<ThemeProvider theme={theme}>`. |
143
- | Flash of unstyled content (Next.js SSR) | No styled-components SSR registry | Add the [styled-components Next.js registry](https://styled-components.com/docs/advanced#nextjs). |
144
+ | Components render **unstyled** | The CSS file wasn't imported | Add `import '@harshit-wander/component-lib/styles.css'` once at your app root. |
145
+ | Styles missing only in **production** | Bundler tree-shook the CSS import | The package sets `sideEffects: ["**/*.css"]`; ensure your build respects it and don't mark the package side-effect-free in your own config. |
146
+ | `Invalid hook call` at runtime | Two copies of React in the bundle | `pnpm why react` and dedupe so only one React resolves. |
147
+ | My utility classes don't override the component's | Specificity/ordering | Pass them via the component's `className` prop — `tailwind-merge` resolves conflicts in your favour. |
144
148
 
145
149
  ## Links
146
150
 
151
+ - **Architecture:** [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md)
147
152
  - **Changelog:** [CHANGELOG.md](./CHANGELOG.md)
148
153
  - **Repository:** https://github.com/harshit-wander/component-lib
149
154
  - **Issues:** https://github.com/harshit-wander/component-lib/issues