{"_id":"@2found/barbarui","name":"@2found/barbarui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@2found/barbarui","version":"1.0.0","description":"Component library and design system for BarbarApp — React 19, Tailwind CSS 4, Framer Motion","license":"MIT","sideEffects":false,"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles.css":"./dist/uikit.css"},"scripts":{"dev":"vite dev","build":"npm run build:lib","build:lib":"vite build --mode library && tsc -p tsconfig.build.json","build:app":"vite build","build:dev":"vite build --mode development","preview":"vite preview","lint":"eslint .","format":"prettier --write .","prepublishOnly":"npm run build:lib"},"peerDependencies":{"framer-motion":">=12.0.0","lucide-react":">=0.500.0","react":">=19.0.0","react-dom":">=19.0.0"},"dependencies":{"@radix-ui/react-avatar":"^1.1.11","@radix-ui/react-slot":"^1.2.4","class-variance-authority":"^0.7.1","clsx":"^2.1.1","tailwind-merge":"^3.5.0"},"devDependencies":{"@eslint/js":"^9.32.0","@tailwindcss/vite":"^4.2.1","@types/node":"^22.16.5","@types/react":"^19.2.0","@types/react-dom":"^19.2.0","@vitejs/plugin-react":"^5.2.0","eslint":"^9.32.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.6","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","framer-motion":"^12.42.2","globals":"^15.15.0","lucide-react":"^0.575.0","prettier":"^3.7.3","react":"^19.2.0","react-dom":"^19.2.0","tailwindcss":"^4.2.1","tw-animate-css":"^1.3.4","typescript":"^5.8.3","typescript-eslint":"^8.56.1","vite":"^8.0.16"},"gitHead":"d4154ba15a34755e08341cc7a27c7b999aba947c","_id":"@2found/barbarui@1.0.0","_nodeVersion":"26.4.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-UyKfdeKxmUtVpCCEQx+ztVJQTS9pHMBQYQd4t+zGl4Ht3WWvIbh0GFxBIftsGoL1NVecUGYJgNQuQKSyOoHFWA==","shasum":"ceaecd165673c8075b1844a836b563ec92e25161","tarball":"https://registry.npmjs.org/@2found/barbarui/-/barbarui-1.0.0.tgz","fileCount":81,"unpackedSize":256652,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFBNEC3LMbcJwusmiBfjsSNI4bQVrGlmA4/jZT/VBdYAAiEAlLi1gttboz2vPvKkJvwvTwhi3DD1AijRiGpcaWj1ntk="}]},"_npmUser":{"name":"internetismylord","email":"sanchezjeph@gmail.com"},"directories":{},"maintainers":[{"name":"internetismylord","email":"sanchezjeph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/barbarui_1.0.0_1784049987716_0.2910481702969636"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-14T17:26:27.610Z","1.0.0":"2026-07-14T17:26:27.876Z","modified":"2026-07-14T17:26:28.144Z"},"maintainers":[{"name":"internetismylord","email":"sanchezjeph@gmail.com"}],"description":"Component library and design system for BarbarApp — React 19, Tailwind CSS 4, Framer Motion","license":"MIT","readme":"# @barbarapp/uikit\n\nComponent library and design system for **BarbarApp**, built with React 19, TypeScript, Tailwind CSS 4, and Framer Motion. Provides a complete set of barbershop-focused UI components — atoms, molecules, organisms, and templates — ready to drop into any React project.\n\n[![npm version](https://img.shields.io/npm/v/@barbarapp/uikit.svg)](https://www.npmjs.com/package/@barbarapp/uikit)\n[![license](https://img.shields.io/npm/l/@barbarapp/uikit.svg)](./LICENSE)\n\n## ✨ Features\n\n- 🧱 **Atomic Design** — atoms, molecules, organisms, templates, and full pages\n- 🎨 **Design tokens** — consistent typography, spacing, and dark color system via Tailwind CSS 4\n- 🏪 **Business Profile** — complete barbershop template (Hero, Services, Team, Gallery, Reviews, Map)\n- 🎬 **Framer Motion** — smooth animations and micro-interactions\n- ♿ **Accessible** — Radix UI primitives under the hood\n- 📱 **Responsive** — mobile-first with sticky header and bottom CTA bar\n- 📦 **Tree-shakeable** — ES module and CommonJS builds, import only what you need\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @barbarapp/uikit\n```\n\n### Peer Dependencies\n\nThis package expects the following to be installed in your project:\n\n| Dependency | Version |\n|---|---|\n| `react` | `>=19.0.0` |\n| `react-dom` | `>=19.0.0` |\n| `framer-motion` | `>=12.0.0` |\n| `lucide-react` | `>=0.500.0` |\n\n```bash\nnpm install react react-dom framer-motion lucide-react\n```\n\n---\n\n## 🚀 Usage\n\n### 1. Import the CSS\n\nImport the compiled stylesheet once, typically in your app's entry point:\n\n```tsx\n// main.tsx or App.tsx\nimport \"@barbarapp/uikit/styles.css\";\n```\n\nThe stylesheet includes all Tailwind CSS 4 theme tokens (`--color-primary`, `--font-display`, etc.) and custom utilities (`gold-gradient`, `hairline`, `no-scrollbar`). The theme is dark by default — override the CSS custom properties in your own stylesheet to match your brand.\n\n### 2. Import components\n\nAll components are named exports from the package root:\n\n```tsx\nimport {\n  HeroSection,\n  ServicesSection,\n  ServiceCard,\n  TeamSection,\n  Button,\n  Price,\n  RatingStars,\n  StatusBadge,\n} from \"@barbarapp/uikit\";\n```\n\n### 3. Import types\n\n```tsx\nimport type {\n  BusinessData,\n  Service,\n  Barber,\n  Review,\n  Promotion,\n  OpeningHour,\n  ContactInfo,\n} from \"@barbarapp/uikit\";\n```\n\n### 4. Full example\n\n```tsx\nimport \"@barbarapp/uikit/styles.css\";\nimport {\n  BusinessProfileTemplate,\n  HeroSection,\n  ServicesSection,\n  TeamSection,\n  ReviewsSection,\n  GallerySection,\n  LocationSection,\n  StickyHeader,\n  StickyBottomBar,\n} from \"@barbarapp/uikit\";\nimport type { BusinessData } from \"@barbarapp/uikit\";\n\nconst myShop: BusinessData = {\n  name: \"EL DIABLO BARBERSHOP\",\n  shortName: \"EL DIABLO\",\n  subtitle: \"Barbería premium · Providencia\",\n  rating: 4.9,\n  reviewCount: 328,\n  location: \"Santiago, Chile\",\n  heroImage: \"/hero.jpg\",\n  logoImage: \"/logo.jpg\",\n  description: \"Cortes clásicos, fades y afeitados premium...\",\n  phone: \"+56 9 1234 5678\",\n  whatsapp: \"+56 9 1234 5678\",\n  address: \"Av. Providencia 1234, Santiago\",\n  mapEmbedUrl: \"https://maps.google.com/...\",\n  mapDirectionsUrl: \"https://maps.google.com/...\",\n  minPrice: 8000,\n  services: [\n    // ...\n  ],\n  promotions: [\n    // ...\n  ],\n  barbers: [\n    // ...\n  ],\n  reviews: [\n    // ...\n  ],\n  gallery: [\n    // ...\n  ],\n  openingHours: [\n    // ...\n  ],\n};\n\nexport default function MyShopPage() {\n  return (\n    <>\n      <StickyHeader\n        name={myShop.shortName}\n        rating={myShop.rating}\n        reviewCount={myShop.reviewCount}\n        onReserve={() => {}}\n      />\n      <main>\n        <HeroSection\n          heroImage={myShop.heroImage}\n          logoImage={myShop.logoImage}\n          name={myShop.name}\n          subtitle={myShop.subtitle}\n          rating={myShop.rating}\n          reviewCount={myShop.reviewCount}\n          location={myShop.location}\n          onReserve={() => {}}\n        />\n        <ServicesSection services={myShop.services} />\n        <TeamSection barbers={myShop.barbers} />\n        <GallerySection images={myShop.gallery} />\n        <ReviewsSection\n          rating={myShop.rating}\n          count={myShop.reviewCount}\n          reviews={myShop.reviews}\n        />\n        <LocationSection\n          mapUrl={myShop.mapEmbedUrl}\n          directionsUrl={myShop.mapDirectionsUrl}\n          address={myShop.address}\n        />\n      </main>\n      <StickyBottomBar\n        price={myShop.minPrice}\n        onReserve={() => {}}\n      />\n    </>\n  );\n}\n```\n\nOr use the `BusinessProfileTemplate` for a pre-arranged layout:\n\n```tsx\nimport { BusinessProfileTemplate } from \"@barbarapp/uikit\";\nimport type { BusinessData } from \"@barbarapp/uikit\";\n\n<BusinessProfileTemplate data={myShop} onReserve={() => {}} />\n```\n\n---\n\n## 🧩 Components\n\n### Atoms\n\n| Component | Description |\n|---|---|\n| `Duration` | Service duration badge (e.g. \"30 min\") |\n| `Eyebrow` | Section eyebrow / overline text |\n| `HairlineDivider` | Thin decorative gold gradient divider |\n| `IconButton` | Icon-only button with aria-label |\n| `Price` | Formatted price display (CLP) |\n| `RatingStars` | Star rating with numeric value |\n| `SectionTitle` | Section heading with optional subtitle |\n| `StatusBadge` | Open/closed status indicator |\n\n### Molecules\n\n| Component | Description |\n|---|---|\n| `BarberCard` | Team member profile card |\n| `ContactItem` | Phone, WhatsApp, or address link row |\n| `MapCard` | Embedded Google Maps card |\n| `OpeningHours` | Weekly schedule list |\n| `ProfileSummary` | Name, rating, location summary |\n| `PromoCard` | Promotion/discount card with before/after price |\n| `ReviewCard` | Individual customer review |\n| `ReviewSummary` | Aggregated rating + bar chart |\n| `ServiceCard` | Service with icon, name, price, duration |\n\n### Organisms\n\n| Component | Description |\n|---|---|\n| `AboutSection` | About the business section |\n| `BookingCTA` | Full-width booking call-to-action |\n| `BusinessInfo` | Combined contact info + opening hours |\n| `GallerySection` | Photo gallery with grid layout |\n| `HeroSection` | Full hero banner with logo and CTA |\n| `LocationSection` | Embedded map + address |\n| `PromotionsSection` | Horizontal scroll of promo cards |\n| `ReviewsSection` | Reviews with summary header |\n| `ServicesSection` | Service cards grid |\n| `StickyBottomBar` | Fixed bottom booking bar (mobile) |\n| `StickyHeader` | Collapsing header on scroll |\n| `TeamSection` | Team members grid |\n\n### Templates\n\n| Component | Description |\n|---|---|\n| `BusinessProfileTemplate` | Complete barbershop page layout |\n\n### UI Primitives\n\n| Component | Description |\n|---|---|\n| `Avatar` / `AvatarImage` / `AvatarFallback` | Radix-based avatar |\n| `Badge` / `badgeVariants` | Status/count badge (CVA variants) |\n| `Button` / `buttonVariants` | Multi-variant button (CVA variants) |\n\n### Utilities\n\n| Export | Description |\n|---|---|\n| `cn` | `clsx` + `tailwind-merge` helper for conditional classes |\n| `formatPrice` | Chilean peso formatter (`$X.XXX`) |\n\n---\n\n## 🎨 Theming\n\nThe library ships a dark gold-on-black theme by default. Override any CSS custom property to match your brand:\n\n```css\n/* your-app.css — import AFTER @barbarapp/uikit/styles.css */\n:root {\n  --primary: oklch(0.65 0.15 200);      /* blue instead of gold */\n  --background: oklch(1 0 0);           /* white background */\n  --foreground: oklch(0.15 0 0);\n  --font-display: \"Your Display Font\", sans-serif;\n  --font-heading: \"Your Heading Font\", sans-serif;\n  --font-sans: \"Your Body Font\", sans-serif;\n}\n```\n\nFull token reference: `--background`, `--foreground`, `--card`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--success`, `--border`, `--input`, `--ring`, `--radius`, and their `-foreground` variants.\n\n---\n\n## 🔧 Development\n\n```bash\n# Clone and install\ngit clone https://github.com/barbarapp/uikit.git\ncd uikit\nnpm install\n\n# Start the UIKit docs playground (component showcase)\nnpm run dev\n\n# Build the library (dist/)\nnpm run build\n\n# Build the docs app (build/)\nnpm run build:app\n\n# Lint & format\nnpm run lint\nnpm run format\n```\n\n---\n\n## 📁 Exports\n\n| Path | Description |\n|---|---|\n| `@barbarapp/uikit` | All components, types, and utilities |\n| `@barbarapp/uikit/styles.css` | Compiled Tailwind CSS (theme tokens + utilities) |\n\n---\n\n## 📄 License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-41b4c4f943333f27da34da737f654f72"}