@ugurdemirel/landcraft 0.1.19 → 0.1.20

package/README.md

@@ -1,14 +1,31 @@
-# @ugurdemirel/landcraft
+# Landcraft
 
-Landing / marketing-focused React component library.
-One consistent design language — paper surfaces, ink text, a single accent — with
-multiple visual options per component.
+![Landcraft — a React marketing component library](https://raw.githubusercontent.com/ugurrdemirel/landcraft/main/docs/preview.png)
+
+A marketing / landing-page React component library — `@ugurdemirel/landcraft` —
+built on Tailwind CSS 4 with token-based theming and automatic WCAG contrast,
+plus a Storybook playground for previewing and customizing every component.
+
+## Structure
+
+```
+landcraft/
+├─ packages/ui/          @ugurdemirel/landcraft — component library
+│  ├─ src/components/    Button, Badge, Card, Section, Navbar, MegaMenu, Hero,
+│  │                     LogoCloud, FeatureGrid, FeatureShowcase, Stats, Pricing,
+│  │                     Testimonials, CTA, FAQ, AccordionShowcase, Footer,
+│  │                     Newsletter, Blog, Prose, Modal, LanguageSwitcher,
+│  │                     Container, Stack
+│  ├─ src/styles/        CSS variables (tokens) + Tailwind entry point
+│  └─ src/styles/theme.css  Tailwind v4 theme (CSS) for consumer projects
+└─ apps/storybook/       Storybook (React + Vite) — preview & customize
+```
 
 ## Install
 
 ```bash
 pnpm add @ugurdemirel/landcraft
-# peers: react >=18, tailwindcss ^4
+# peers: react >=18, react-dom >=18, tailwindcss ^4
 ```
 
 ```tsx
@@ -16,18 +33,17 @@ import { Button, Hero } from "@ugurdemirel/landcraft";
 import "@ugurdemirel/landcraft/styles.css";
 ```
 
-Add the theme to your own Tailwind v4 project by importing the CSS theme file
-(no JS config or preset needed):
+Or reuse the theme in your own Tailwind v4 project by importing the CSS theme
+file — no JS config or preset needed:
 
 ```css
-/* app.css */
+/* app.css — wire it up with @tailwindcss/vite, @tailwindcss/postcss or the CLI */
 @import "tailwindcss";
 @import "@ugurdemirel/landcraft/theme.css";
 ```
 
-Then use Tailwind v4 as usual (`@tailwindcss/vite`, `@tailwindcss/postcss`, or
-the CLI) — the theme registers every color/font/radius/shadow token and the
-typography plugin automatically.
+The theme registers every color/font/radius/shadow token and the typography
+plugin automatically.
 
 > Tailwind v4 auto-detects classes in your own source but skips `node_modules`.
 > If you build the library's components from your own CSS (instead of importing
@@ -43,25 +59,32 @@ Every component accepts an `option` / `variant` prop — same API, different loo
 
 | Component | Options |
 | --- | --- |
+| Button | `primary` · `dark` · `outline` · `ghost` · `link` |
+| Badge | `soft` · `solid` · `outline` · `dot` |
+| Card | `outlined` · `elevated` · `inset` |
 | Navbar | `classic` · `floating` · `inverse` |
-| Hero | `split` · `centered` · `statement` |
+| MegaMenu | `classic` · `floating` · `inverse` |
+| Hero | `split` · `centered` · `statement` · `parallax` |
 | LogoCloud | `quiet` · `marquee` · `strip` |
 | FeatureGrid | `columns` · `bento` · `editorialRows` |
+| FeatureShowcase | `mediaSide`: `left` · `right` |
 | Stats | `editorial` · `hairline` · `cells` · `ticker` |
 | Pricing | `cards` · `bento` · `compact` |
 | Testimonials | `grid` · `carousel` · `marquee` |
 | CTA | `panel` · `surface` · `inverse` |
-| FAQ | `accordion` · `split` · `cards` |
+| FAQ | `accordion` · `split` · `cards` (`allowMultiple`, `defaultOpen`) |
 | Footer | `classic` · `minimal` · `editorial` |
 | Newsletter | `inline` · `card` · `underline` |
 | Blog (BlogSection/BlogCard) | `card` · `row` (`limit` shows the latest N posts) |
+| Modal | `size`: `sm` · `md` · `lg` |
+| LanguageSwitcher | `dropdown` · `modal` |
 
-**Brand mark.** `Navbar` and `Footer` accept a custom logo in place of the
-wordmark: pass any node to `logo` (SVG, `<img>`, component…), or use
+**Brand mark.** `Navbar`, `MegaMenu` and `Footer` accept a custom logo in place
+of the wordmark: pass any node to `logo` (SVG, `<img>`, component…), or use
 `logoSrc`/`logoAlt` for a quick image (`logoClassName` tunes its size, defaults
 to `h-7 w-auto`).
 
-## Theme / Customization
+## Theme & customization
 
 Every design decision lives on CSS custom properties on `:root` and can be
 **overridden from outside** — color, type, radii and shadows. Override any token
@@ -154,22 +177,23 @@ dark-mode variants.
 
 ### Contrast guarantees
 
-1. **Paired tokens.** Every surface color ships with a matching `--color-on-*` value;
-   themes change together.
-2. **Dynamic surfaces.** Gradient CTA panels, statement heroes and `customColor` use
-   the CSS `contrast-color()` function to pick the most readable text color. When a
-   dark palette lightens the primary, text flips dark automatically.
+1. **Paired tokens.** Every surface color ships with a matching `--color-on-*`
+   text color, so readability is preserved as themes change together.
+2. **Dynamic surfaces.** `customColor` props, gradient Hero/CTA panels and
+   highlighted pricing cards use the CSS `contrast-color()` function to pick the
+   most readable text color. Switch to a dark palette and the text flips
+   automatically.
 
 ### Icons
 
 No emojis. The library ships one consistent 24×24 stroke icon set (Lucide-style):
-`ArrowRight`, `Check`, `Zap`, `ShieldCheck`, `Layers`, `Rocket`, `Mail`, … — import
-them from the package.
+`ArrowRight`, `Check`, `Zap`, `ShieldCheck`, `Layers`, `Rocket`, `Mail`, … —
+import them from the package.
 
 ## Layout
 
-`Container` and `Stack` are the single source of the container + gutter rules used
-across Section, Footer, CTA and BlogSection (`mx-auto w-full max-w-* px-5 sm:px-8`):
+`Container` and `Stack` are the single source of the container + gutter rules
+used across Section, Footer, CTA and BlogSection (`mx-auto w-full max-w-* px-5 sm:px-8`):
 
 ```tsx
 import { Container, Stack } from "@ugurdemirel/landcraft";
@@ -185,9 +209,9 @@ import { Container, Stack } from "@ugurdemirel/landcraft";
 
 ## Content
 
-`Prose` wraps `@tailwindcss/typography` and re-skins its colors and type through the
-same tokens (headings use `--font-display`, `<pre>` uses the ink surface, both `prose`
-and `prose-neutral` adapt to the palette):
+`Prose` wraps `@tailwindcss/typography` and re-skins its colors and type through
+the same tokens (headings use `--font-display`, `<pre>` uses the ink surface,
+both `prose` and `prose-neutral` adapt to the palette):
 
 ```bash
 pnpm add @ugurdemirel/landcraft @tailwindcss/typography
@@ -210,6 +234,60 @@ Projects using the theme need `@tailwindcss/typography` (optional peer; the
 
 ## Components
 
-Button, Badge, Card (+Header/Title/Content/Footer), Section (+Header), Navbar, Hero,
-LogoCloud, FeatureGrid/Card, Stats, Pricing, Testimonials, CTA, FAQ, Footer, Newsletter,
-Blog (BlogSection/BlogCard), Prose (+ProseLead), Container, Stack.
+Button, Badge, Card (+Header/Title/Description/Content/Footer), Section (+Header),
+Navbar, MegaMenu, Hero, LogoCloud, FeatureGrid/FeatureCard, FeatureShowcase,
+Stats, Pricing, Testimonials/TestimonialCard, CTA, FAQ, AccordionShowcase,
+Footer, Newsletter, Blog (BlogSection/BlogCard), Modal, LanguageSwitcher,
+Prose (+ProseLead), Container, Stack, Slot, plus the icon set.
+
+## What you can do in Storybook
+
+- **Preview** every component and its stories from the left panel.
+- **Customize** props live via the **Controls** panel (variant, size, customColor, text…).
+- **Re-theme** from the **Palette** toolbar (indigo / forest / crimson / midnight-dark).
+  Every component restyles instantly through `--color-*` tokens — a live demo of
+  "design from the outside".
+- **Audit accessibility** via the a11y panel (AA/AAA contrast results).
+
+## Framework-aware links
+
+Landcraft renders plain `<a>` tags by default so it works anywhere. When you use
+a router (Next.js, Remix, React Router…), pass your framework's `<Link>` so
+navigation stays client-side and server-side correct.
+
+**Single links — `asChild` on `Button`** (the button styles are applied to the
+child element instead of a `<button>`):
+
+```tsx
+import { Button } from "@ugurdemirel/landcraft";
+import Link from "next/link";
+
+<Button asChild>
+  <Link href="/pricing">Get started</Link>
+</Button>
+```
+
+**Link lists — `LinkComponent` prop** on `Navbar`, `MegaMenu`, `Footer`, and
+`BlogSection`/`BlogCard` (defaults to `<a>`):
+
+```tsx
+import { Navbar, Footer } from "@ugurdemirel/landcraft";
+import Link from "next/link";
+
+<Navbar links={links} LinkComponent={Link} />
+<Footer columns={columns} LinkComponent={Link} />
+```
+
+The low-level `Slot` used to implement `asChild` is also exported if you want to
+compose it yourself.
+
+## Commands
+
+```bash
+pnpm install                 # install dependencies
+pnpm build                   # builds @ugurdemirel/landcraft (JS + CSS + types)
+pnpm storybook               # starts Storybook (http://localhost:6006)
+pnpm build:storybook         # produces a static Storybook build (storybook-static/)
+pnpm typecheck               # typechecks all packages
+pnpm --filter @ugurdemirel/landcraft test   # run the component/unit tests
+```

package/dist/styles.css

@@ -63,7 +63,6 @@
     --radius-lg: 0.875rem;
     --radius-xl: 1.125rem;
     --radius-2xl: 1.5rem;
-    --radius-3xl: 2rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --blur-md: 12px;
@@ -92,9 +91,6 @@
     --color-danger: rgb(var(--color-danger));
     --color-danger-soft: rgb(var(--color-danger-soft));
     --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-    --shadow-soft: 0 1px 2px rgb(17 17 17 / 0.04), 0 2px 8px rgb(17 17 17 / 0.04);
-    --shadow-raised: 0 2px 4px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.08);
-    --shadow-overlay: 0 24px 64px -12px rgb(17 17 17 / 0.18);
     --animate-marquee: marquee 38s linear infinite;
   }
 }
@@ -2238,12 +2234,6 @@
       background-color: color-mix(in oklab, rgb(var(--color-primary-soft)) 60%, transparent);
     }
   }
-  .bg-primary\/50 {
-    background-color: color-mix(in srgb, rgb(rgb(var(--color-primary))) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, rgb(var(--color-primary)) 50%, transparent);
-    }
-  }
   .bg-secondary {
     background-color: rgb(var(--color-secondary));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "publishConfig": {
     "access": "public"
   },
@@ -38,6 +38,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "clean": "rimraf dist",
+    "prepack": "cp ../../README.md ./README.md",
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {