poinqu-ui-kit 0.0.0-stage → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,75 @@
+# Changelog
+
+Semua perubahan penting pada Poinqu UI. Format mengikuti
+[Keep a Changelog](https://keepachangelog.com/) dan
+[Semantic Versioning](https://semver.org/).
+
+## [0.2.1] — 2026-10-26
+
+### Fixed
+
+- `Breadcrumb` tidak lagi mengimpor `next/link`; sekarang memakai anchor native
+  dan mendukung prop `linkComponent` untuk Next.js atau router lain.
+- Build paket tidak lagi membawa kode internal Next.js dan tidak membutuhkan
+  shim `process`, sehingga aman dipakai sebagai ESM dari CDN.
+- Ukuran `dist/index.mjs` turun dari ±216 kB menjadi ±119 kB.
+
+### Added
+
+- Dukungan CDN lewat jsDelivr + import map, didokumentasikan di README dan
+  halaman installation.
+
+## [0.2.0] — 2026-10-25
+
+### Added
+
+- Design system premium: token indigo, shadow baru, radius panel, gradient.
+- Light & dark theme lengkap dengan `ThemeProvider`, `ThemeToggle`, dan
+  `ThemeScript` anti-flash.
+- Komponen baru: `Progress`, `Slider`, `Kbd`, `CodeBlock`, `EmptyState`, `Stat`,
+  `StatGrid`, `PageHeader`.
+- `Avatar` mendukung ukuran `xs`–`lg`, indikator kehadiran, dan foto native.
+- `TableRow` mendukung `interactive`.
+- Situs dokumentasi: landing page, `/docs`, installation, theming, indeks
+  komponen, halaman komponen dinamis dengan live preview & API reference,
+  changelog, 404, sitemap, robots, dan manifest.
+- Pencarian dokumentasi dengan shortcut `⌘K` dan navigasi keyboard.
+- Paket npm: build ESM, TypeScript declarations, stylesheet terpisah, sourcemap,
+  `exports` map, dan `"use client"` boundary.
+- CI workflow untuk typecheck, lint, build library, dan build situs.
+- Publikasi npm otomatis lewat GitHub release/tag.
+
+### Changed
+
+- Warna accent diubah dari netral gelap menjadi indigo premium.
+- `styles/poinqu.css` menjadi sumber tunggal design token untuk aplikasi dan
+  paket.
+- `package.json` diubah menjadi paket publik `poinqu-ui-kit` (MIT).
+- README ditulis ulang dengan panduan instalasi, theming, dan publikasi.
+
+### Fixed
+
+- `Avatar` tidak lagi bergantung pada `next/image` sehingga paket tetap
+  framework-agnostic.
+- CSS paket sekarang memuat token dan base layer, bukan hanya CSS Modules
+  komponen.
+- Merapikan jarak bawah konten dokumentasi dan showcase.
+- Menambah jarak antar grup menu di sidebar dokumentasi.
+- Memberi jarak antar code block package manager di halaman instalasi.
+- Code block sekarang mengikuti tema: permukaan terang di light mode dan gelap di
+  dark mode.
+- Sidebar dan header dokumentasi diberi warna permukaan sendiri agar hierarki
+  visual lebih jelas.
+
+## [0.1.0] — 2026-08-18
+
+### Added
+
+- Rilis internal pertama.
+- Primitives: `Button`, `Card`, `Badge`, `Alert`, `Input`, `Select`, `Textarea`.
+- Navigasi: `Tabs`, `Breadcrumb`, `Collapse`, `Stepper`, `Pagination`.
+- Feedback: `Toast`, `Modal`, `AlertDialog`, `Tooltip`, `Spinner`,
+  `Placeholder`.
+- Data: `Table`, `DataTable`, `Trace`, `Marker`, `ListGroup`, `Accordion`.
+- Form: `Combobox`, `Checkbox`, `RadioGroup`, `Switch`, `RangeSelect`.
+- Showcase interaktif di halaman utama.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Poinqu
+
+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

@@ -1,3 +1,325 @@
-# Temporary Holding Version
+# Poinqu UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Design system React yang premium, aksesibel, dan siap dipasang lewat npm.**
+
+Poinqu UI berisi 40+ komponen untuk dashboard, admin panel, dan produk SaaS.
+Semua komponen memakai token yang sama, mendukung light & dark mode, dan
+ditulis dengan TypeScript strict.
+
+- 📚 Dokumentasi: **https://ui.poinqu.com/docs**
+- 🧩 Showcase interaktif: **https://ui.poinqu.com/components**
+- 📦 npm: **https://www.npmjs.com/package/poinqu-ui-kit**
+
+---
+
+## Fitur
+
+- **40+ komponen** — actions, display, feedback, forms, navigation, overlays,
+  dan data display.
+- **Light & dark theme** — palet gelap yang dirancang, bukan inversi otomatis.
+- **Design token** — warna, radius, shadow, spacing, dan tipografi bisa
+  di-override tanpa fork.
+- **Aksesibel** — focus ring, keyboard navigation, ARIA, native dialog, dan
+  dukungan `prefers-reduced-motion`.
+- **Typed end-to-end** — prop types diekspor, ESM, tree-shakeable.
+- **Zero runtime dependencies** — React dan React DOM hanya peer dependency.
+- **Dokumentasi lengkap** — live preview, API reference, pencarian `⌘K`, dan
+  changelog.
+
+---
+
+## Instalasi
+
+```bash
+npm install poinqu-ui-kit
+```
+
+Import stylesheet sekali di entry aplikasi:
+
+```tsx
+import "poinqu-ui-kit/styles.css";
+```
+
+### Quick start
+
+```tsx
+import "poinqu-ui-kit/styles.css";
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+} from "poinqu-ui-kit";
+
+export function WorkspaceCard() {
+  return (
+    <Card>
+      <CardHeader
+        title="Workspace"
+        description="Kelola workspace dan anggota tim."
+        actions={<Badge tone="success" dot>Active</Badge>}
+      />
+      <CardBody>
+        <Button
+          label="Simpan perubahan"
+          variant="solid"
+          tone="primary"
+          icon="lucide:save"
+        />
+      </CardBody>
+    </Card>
+  );
+}
+```
+
+### Provider (opsional, direkomendasikan)
+
+```tsx
+"use client";
+
+import { ThemeProvider, ToastProvider } from "poinqu-ui-kit";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="system">
+      <ToastProvider>{children}</ToastProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+`ThemeProvider` mengaktifkan light/dark/system dan menyimpan preferensi.
+`ToastProvider` diperlukan untuk `useToast`.
+
+### Next.js theme script
+
+Agar tidak ada flash tema yang salah, render `ThemeScript` sebagai child pertama
+`<body>`:
+
+```tsx
+import { ThemeScript } from "poinqu-ui-kit";
+
+<body>
+  <ThemeScript />
+  {children}
+</body>
+```
+
+---
+
+### CDN / tanpa build step
+
+CSS tersedia langsung dari jsDelivr:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/poinqu-ui-kit@0.2.1/dist/poinqu-ui.css"
+/>
+```
+
+Untuk komponen React, paket npm berupa ESM dan React di-resolve lewat
+`importmap`:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@19.3.0",
+      "react-dom": "https://esm.sh/react-dom@19.3.0?deps=react@19.3.0",
+      "react/jsx-runtime": "https://esm.sh/react@19.3.0/jsx-runtime",
+      "react-dom/client": "https://esm.sh/react-dom@19.3.0/client?deps=react@19.3.0"
+    }
+  }
+</script>
+
+<div id="root"></div>
+
+<script type="module">
+  import React from "react";
+  import { createRoot } from "react-dom/client";
+  import { Button, ThemeProvider } from "https://cdn.jsdelivr.net/npm/poinqu-ui-kit@0.2.1/dist/index.mjs";
+
+  const h = React.createElement;
+
+  createRoot(document.getElementById("root")).render(
+    h(ThemeProvider, null,
+      h(Button, {
+        label: "CDN works",
+        variant: "solid",
+        tone: "primary",
+        icon: "lucide:check",
+      }),
+    ),
+  );
+</script>
+```
+
+Tanpa build step tidak ada JSX; gunakan `React.createElement` atau `htm`.
+Untuk produksi, bundling tetap disarankan.
+
+## Dokumentasi di repo ini
+
+Repo ini sekaligus menjadi situs dokumentasi (Next.js App Router):
+
+| Route | Isi |
+|---|---|
+| `/` | Landing page premium |
+| `/docs` | Pengantar dan quick start |
+| `/docs/installation` | Instalasi untuk Next.js, Vite, dan React |
+| `/docs/theming` | Token, brand color, dark mode, scoped theme |
+| `/docs/components` | Indeks semua komponen |
+| `/docs/components/[slug]` | Live preview, usage, API reference |
+| `/docs/changelog` | Release notes |
+| `/components` | Showcase interaktif seluruh komponen |
+
+Menjalankan situs:
+
+```bash
+npm install
+npm run dev
+```
+
+Buka [http://localhost:3000](http://localhost:3000).
+
+---
+
+## Komponen
+
+| Grup | Komponen |
+|---|---|
+| Theme | `ThemeProvider`, `ThemeToggle`, `ThemeScript` |
+| Actions | `Button`, `ButtonGroup` |
+| Display | `Typography`, `Card`, `Badge`, `Avatar`, `Stat`, `StatGrid`, `Kbd`, `CodeBlock`, `EmptyState`, `PageHeader` |
+| Feedback | `Alert`, `Progress`, `Toast`, `Spinner`, `Placeholder` |
+| Forms | `Input`, `Select`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Combobox`, `Slider`, `FormField`, `PasswordInput`, `SearchField`, `RangeSelect` |
+| Navigation | `Breadcrumb`, `Tabs`, `Collapse`, `Stepper`, `Pagination` |
+| Overlays | `Modal`, `AlertDialog`, `Dropdown`, `Tooltip`, `AccountModal` |
+| Data display | `Table`, `DataTable`, `ListGroup`, `Accordion`, `Marker`, `Trace`, `Attachment` |
+
+Komponen interaktif (`Combobox`, `Modal`, `Dropdown`, `Toast`, `Tooltip`,
+`ThemeToggle`, `CodeBlock`, `Slider`, dll.) adalah Client Components. Paket
+utama ditandai `"use client"` sehingga aman diimpor dari Client Component;
+komponen tetap bisa dirender dari Server Component sebagai child.
+
+---
+
+## Theming
+
+Semua warna dan ukuran adalah CSS custom property. Override setelah stylesheet:
+
+```css
+:root {
+  --color-accent: #047857;
+  --color-accent-top: #10b981;
+  --radius-card: 16px;
+}
+
+[data-theme="dark"] {
+  --color-accent: #34d399;
+  --color-accent-top: #6ee7b7;
+}
+```
+
+Baca panduan lengkap di [docs/theming](https://ui.poinqu.com/docs/theming).
+
+---
+
+## Struktur repo
+
+```txt
+app/                        # situs dokumentasi + landing (Next.js)
+  docs/                     # halaman dokumentasi
+  components/               # showcase interaktif
+components/
+  ui/                       # library komponen (entry: index.ts)
+  theme/                    # ThemeProvider, ThemeToggle, theme script
+  docs/                     # shell, search, preview, DocPage
+  marketing/                # landing page, nav, install command
+  showcase/                 # demo interaktif semua komponen
+lib/
+  data.ts                   # tipe & data demo
+  docs.ts                   # registry dokumentasi komponen
+styles/
+  poinqu.css                # design token + base layer (dipakai paket)
+types/
+  css.d.ts                  # deklarasi CSS Modules
+  iconify.d.ts              # tipe <iconify-icon>
+vite.lib.config.ts          # build library (ESM + CSS + .d.ts)
+```
+
+---
+
+## Scripts
+
+| Perintah | Fungsi |
+|---|---|
+| `npm run dev` | Development server dokumentasi |
+| `npm run build` | Build situs Next.js |
+| `npm run start` | Menjalankan hasil build |
+| `npm run lint` | ESLint |
+| `npm run typecheck` | Type-check tanpa emit |
+| `npm run build:lib` | Build paket npm ke `dist/` |
+| `npm run build:all` | Build library lalu situs |
+| `npm run icons:generate` | Regenerasi inline SVG dari `lucide-static` |
+| `npm run pack:dry` | Preview isi tarball npm |
+
+### Build paket
+
+```bash
+npm run build:lib
+```
+
+Output:
+
+```txt
+dist/
+  index.mjs          # ESM bundle (dengan "use client")
+  index.d.ts         # TypeScript declarations
+  poinqu-ui.css      # tokens + seluruh style komponen
+  index.mjs.map
+```
+
+### Publikasi ke npm
+
+```bash
+npm login
+npm run pack:dry     # cek isi paket
+npm publish
+```
+
+`prepublishOnly` otomatis menjalankan `build:lib`. Versi mengikuti semver.
+Untuk rilis beta: `npm publish --tag beta`.
+
+---
+
+## Requirements
+
+- Node.js `>=18.18`
+- React `>=18.2` (React 19 didukung)
+- CSS Modules (built-in di Next.js & Vite)
+
+### Icons
+
+Semua ikon Lucide yang dipakai komponen bawaan sudah dibundel sebagai inline
+SVG—tidak perlu script eksternal dan tetap tampil saat SSR. Jika Anda memakai
+nama ikon lain lewat prop `icon` (mis. `mdi:home`), muat Iconify web component
+sekali di aplikasi:
+
+```html
+<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
+```
+
+## Kontribusi
+
+1. Buat komponen di `components/ui/Nama.tsx` + `Nama.module.css`.
+2. Gunakan token dari `styles/poinqu.css`, jangan hardcode warna.
+3. Tambahkan demo di `components/showcase/ComponentShowcase.tsx`.
+4. Tambahkan entri dokumentasi di `lib/docs.ts` dan preview di
+   `components/docs/DocPreview.tsx`.
+5. Jalankan `npm run typecheck && npm run lint && npm run build:all`.
+
+## Lisensi
+
+MIT © 2026 Poinqu.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,24 @@
+# Third-party notices
+
+## Lucide icons
+
+The inline SVG fallback data in `components/ui/icon-data.ts` is generated from
+[lucide-static](https://lucide.dev).
+
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of
+Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+Contributors 2022-2026.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.