{"_id":"@arayhan/prima-ui","name":"@arayhan/prima-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arayhan/prima-ui","version":"0.1.0","description":"Prima UI: engineered minimalism (cobalt on ice, Clash Display caps) by A. Rayhan Primadedas.","author":{"name":"A. Rayhan Primadedas"},"type":"module","license":"MIT","publishConfig":{"access":"public"},"sideEffects":["*.css"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./tokens/*":"./dist/tokens/*"},"scripts":{"prepublishOnly":"pnpm build","build":"tsup && node scripts/bundle-css.mjs","dev":"tsup --watch","typecheck":"tsc --noEmit","storybook":"storybook dev -p 6006","build-storybook":"storybook build","docs:dev":"pnpm --filter docs-site dev","docs:build":"pnpm --filter docs-site build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@storybook/addon-essentials":"^8.6.14","@storybook/react":"^8.6.14","@storybook/react-vite":"^8.6.14","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","esbuild":"^0.24.0","react":"^18.3.1","react-dom":"^18.3.1","storybook":"^8.6.14","tsup":"^8.3.5","typescript":"^5.6.3","vite":"^5.4.11"},"_id":"@arayhan/prima-ui@0.1.0","gitHead":"28b2af20fd0fead8f78d87e53a354cd31a577b60","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-LB3nEo9S7rqcPHQjAdsyrBuoCp2STypv/x+bdf/lxKSPhXoN85yTHDiBs3ykElYRuCYil+LMZrs5OeULVExarQ==","shasum":"ff68e919069d273aa28b9f4fdf97bdf5c5893bc8","tarball":"https://registry.npmjs.org/@arayhan/prima-ui/-/prima-ui-0.1.0.tgz","fileCount":12,"unpackedSize":228286,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA9MvDw04LSR5Z7F/KpwlpCHiqc24cKIUcpCH6ipOrJzAiAjatK8exEVZQrJC2W8Vv/kXrGMUVoWJL+srGQcaCSepw=="}]},"_npmUser":{"name":"arayhan","email":"rayhanprima99@gmail.com"},"directories":{},"maintainers":[{"name":"arayhan","email":"rayhanprima99@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/prima-ui_0.1.0_1784107297997_0.4395371251117903"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-15T09:21:37.858Z","0.1.0":"2026-07-15T09:21:38.222Z","modified":"2026-07-15T09:21:38.424Z"},"maintainers":[{"name":"arayhan","email":"rayhanprima99@gmail.com"}],"description":"Prima UI: engineered minimalism (cobalt on ice, Clash Display caps) by A. Rayhan Primadedas.","author":{"name":"A. Rayhan Primadedas"},"license":"MIT","readme":"# Prima UI\n\n**Prima** — the personal design system of A. Rayhan Primadedas (rayhan.dev). React + TypeScript\ncomponent library built around *engineered minimalism*: an ice-blue base, exactly one electric\ncobalt accent, bold **Clash Display** all-caps display type, mono `//` labels, and color-block\nstorytelling. Reconstructed with a `tsup` build and Storybook.\n\n> The npm package is `@arayhan/prima-ui`; the design language is **Prima**.\n\n## Install\n\n```bash\npnpm install\n```\n\n## Scripts\n\n| Command | What it does |\n|---|---|\n| `pnpm storybook` | Dev playground at http://localhost:6006 |\n| `pnpm build` | Build the library to `dist/` (ESM + `.d.ts` + flattened CSS) |\n| `pnpm build-storybook` | Static Storybook |\n| `pnpm typecheck` | `tsc --noEmit` |\n| `pnpm docs:dev` | Documentation site dev server (Vite, http://localhost:5173) |\n| `pnpm docs:build` | Static documentation site to `docs-site/dist/` |\n\n## Usage\n\n```tsx\nimport { Button, Card, Chip, SectionHeader } from '@arayhan/prima-ui';\nimport '@arayhan/prima-ui/styles.css';\n\nexport function Example() {\n  return (\n    <Card interactive arrow>\n      <Chip>React</Chip>\n      <h3>Realtime game infrastructure</h3>\n      <Button>Read the case study</Button>\n    </Card>\n  );\n}\n```\n\nImport `styles.css` once at your app root — it `@import`s all design tokens plus the webfonts\n(**Clash Display** from Fontshare, **Inter** + **JetBrains Mono** from Google Fonts) and the\n**Phosphor** icon font, all from CDN.\n\n## Components (exported API)\n\nFifty-nine components — eleven core atoms, twenty-eight advanced controls, and twenty composed\nblocks (eleven page sections + nine micro-interaction primitives) — each a React function\ncomponent styled with inline `style={{}}` objects that read `var(--*)` tokens — **no CSS\nclasses, no CSS-in-JS**. All heading/label styling comes from tokens; the only real class names\nare Phosphor's `ph ph-*` icon classes.\n\n| Component | Purpose |\n|---|---|\n| `Button` | Mono uppercase button — `primary` (cobalt) / `secondary` (2px ink border, inverts on hover). |\n| `Card` | White surface, 1.5px hairline, radius md; `interactive` shifts to ice + nudges a cobalt arrow. |\n| `Chip` | Mono uppercase cobalt tag on an ice fill. |\n| `Input` | White field, mono label above, cobalt focus ring, helper/error below. |\n| `Textarea` | Input's field language, min-height 120px, vertical resize. |\n| `Select` | Input's field language + a 1.5px ink chevron. |\n| `Switch` | 50×28 pill; cobalt track on, hairline off; knob slides 150ms. |\n| `SectionHeader` | Mono `//` cobalt eyebrow + running number above a 3px ink rule + caps title. |\n| `TimelineItem` | Vertical timeline row — mono year column, 2px connector, cobalt node. |\n| `Marquee` | Mono uppercase scrolling strip (ice or ink), one per page. |\n| `SocialLinks` | Bordered square icon links; border + glyph go cobalt on hover. |\n\n### Advanced — form controls\n\n| Component | Purpose |\n|---|---|\n| `Checkbox` / `RadioGroup` | 18px cobalt-filled square / circle-with-dot; label, disabled, error. |\n| `ButtonGroup` | Segmented control — joined mono segments, active fills cobalt. |\n| `PasswordInput` | Input's field language + eye toggle. |\n| `MultiSelect` | Field-language trigger filling with removable cobalt chips + floating checklist. |\n| `Combobox` | Searchable single select — type to filter, arrows + Enter to pick. |\n| `Calendar` / `DatePicker` | Month grid with cobalt selection / field trigger opening it in a popover. |\n| `RichTextEditor` | WYSIWYG field — full toolbar (bold/headings/lists/align/link/image/table…) on `execCommand`, zero editor dependency. Ships a `stripHtmlToText()` util. |\n\n### Advanced — overlays\n\n| Component | Purpose |\n|---|---|\n| `Dropdown` | Secondary-button trigger + floating menu; Escape/outside-click/arrow-key handling. |\n| `Dialog` | Portal modal — centered panel over the scrim, scroll lock, Escape/scrim close. |\n| `Drawer` | Portal side panel (left/right) with pinned actions footer. |\n| `ToastProvider` / `useToast` | Ink-surface toasts, bottom-right stack, semantic rule, auto-dismiss. |\n\n### Advanced — display & data\n\n| Component | Purpose |\n|---|---|\n| `Alert` | White surface with a 3px semantic left rule — info/success/warning/error, dismissible. |\n| `Avatar` | Full-radius circle, initials fallback, semantic status dot. |\n| `Thumbnail` | Hairline media frame; image zooms gently on hover; mono caption. |\n| `Bubble` | Chat bubbles — received white/left, sent cobalt/right. |\n| `Accordion` | Numbered hairline rows; plus rotates to close; animated height. |\n| `Carousel` | Scroll-snap track with prev/next controls and a mono counter. |\n| `DataTable` | Mono headers over a 2px ink rule; opt-in column sorting; ice hover. |\n| `LineChart` / `BarChart` / `Sparkline` | Cobalt data on hairline grids, mono labels. SVG, zero deps. |\n| `AnalyticsCard` | Metric card — mono label, display value, semantic delta, sparkline. |\n| `EmptyState` / `ErrorState` | Nothing-here panel / cobalt 404-500 treatment (inline or full page). |\n| `CodeSnippet` | Ink code panel with mono toolbar + copy (monochrome, zero deps). |\n| `RichText` | Prose styling for long-form content — headings, quotes, lists, code. |\n\n### Blocks (composed sections)\n\n| Block | Purpose |\n|---|---|\n| `Navbar` | Page's opening rule — wordmark, mono nav links, optional cobalt CTA. |\n| `Hero` | Page opener — `//` eyebrow, mega caps title, lede, Button pair, optional media slot. |\n| `FeatureGrid` | Grid of Cards with mono running numbers + cobalt Phosphor icons. |\n| `Testimonials` | Quote Cards with a cobalt quotation mark, Avatar, and mono name/role. |\n| `StatStrip` | Horizontal stats separated by hairline rules (ice or ink). |\n| `PricingTable` | Plan cards; the highlighted plan swaps to the ink storytelling surface. |\n| `FAQSection` | SectionHeader opener over the existing Accordion for Q&A blocks. |\n| `CTASection` | Contact/CTA on the ink storytelling surface — headline, CTA, email, SocialLinks. |\n| `BlogList` | Hairline article rows — mono date, caps title with hover arrow, chips, read-time. |\n| `BlogDetail` | Full article view that `BlogList` rows link to — meta row, title, lede, body slot. |\n| `Footer` | 3px closing rule, wordmark, mono nav columns, SocialLinks, colophon line. |\n| `MagneticButton` | Button that eases toward the pointer and springs back (micro-interaction). |\n| `TiltCard` | Card that tilts in 3D toward the pointer with a faint cobalt glow. |\n| `CountUp` | Clash Display figure that counts up when scrolled into view. |\n| `RevealOnScroll` | Rise-and-fade reveal wrapper on the system easing (IO + CSS only). |\n| `MagicBorder` | Cobalt conic-gradient ring that rotates behind a clipped surface. |\n| `Spotlight` | Cursor-follow cobalt radial glow inside a hairline card. |\n| `Ripple` | Click-triggered expanding ripple, wraps a Button. |\n| `TextScramble` | Mono characters scramble into the real text on scroll-into-view or hover. |\n| `ScrollProgress` | Cobalt top bar tracking page (or a given container's) scroll position. |\n\nAll interaction blocks are pure React + CSS (no animation dependency), pointer-fine gated\nwhere relevant, and inert under `prefers-reduced-motion` (`ScrollProgress` still tracks position\nunder reduced motion — it's an indicator, not decoration).\n\nEvery component exports a matching `<Name>Props` interface.\n\n## Design language (Prima, in brief)\n\n- **One accent.** Ice `#F8FBFD` base, cool ink `#0F1116` text, exactly one cobalt `#1B44F0`\n  accent. Every neutral is blue-tinted — a warm gray is a bug. No second accent, no gradients.\n- **Type does the talking.** Clash Display 700/600 **ALL CAPS** for display/h1/h2 (never below\n  18px, never body); Inter for body; JetBrains Mono for labels/eyebrows/code (`//` prefix, `001`\n  numbering, usually cobalt).\n- **Neo-brutalism lite.** Visible structure: 1.5px default borders, 2px on interactive, 3px\n  section rules; medium radii (`sm` 8 / `md` 12 / `lg` 16) keep it soft. Never 0px, never >16px.\n- **Flat by default.** Hairlines and surface contrast do the work; one soft shadow for floating\n  elements only. Depth comes from color-block surfaces (ice → ink → cobalt), not shadows.\n\nToken source of truth: `src/tokens/*.css`, reachable through `src/styles.css`.\n\n## Project structure\n\n```\nsrc/\n  components/core/     11 atomic components (typed .tsx) + _field.tsx helper\n  components/advanced/ 28 controls: forms, overlays, display & data (incl. charts)\n  components/blocks/   11 composed blocks + 9 micro-interaction primitives\n  tokens/            colors, typography, fonts, spacing/radii/borders/motion, base, icons (.css)\n  styles.css         @imports all tokens\n  index.ts           public API barrel\nstories/             *.stories.tsx\ndocs-site/           documentation website (Vite + React + GSAP + three.js — including an\n                     isometric three.js/GSAP scene on the homepage and in the Hero block demo)\ndocs/superpowers/    design spec + implementation plan\n```\n\n## Syncing to Claude Design\n\nThis repo is shaped for `/design-sync`: `pnpm build` emits the `dist/` bundle the sync consumes,\nStorybook provides screenshot-verified previews, and `pnpm-lock.yaml` lets the sync install\nfaithfully.\n","readmeFilename":"README.md","_rev":"1-d8233e9304d1fc6e1f559acb1f6003c6"}