{"_id":"@baramjk/design-system","_rev":"2-a5f169b490553e949d65faa80fc04803","name":"@baramjk/design-system","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@baramjk/design-system","version":"0.1.0","_id":"@baramjk/design-system@0.1.0","maintainers":[{"name":"ali_bn99","email":"alimusic1m@gmail.com"}],"dist":{"shasum":"a7ff33220ddbbbd3aee3e31a73f6f6fa653924a4","tarball":"https://registry.npmjs.org/@baramjk/design-system/-/design-system-0.1.0.tgz","fileCount":118,"integrity":"sha512-qUfE+ds6vuCQWprNADRmADvGKSQvUxVmp/cNHJ1M/rgl/BXsQMTUXuFN2lIxp/7t4ZSwNp+Y3a912eqNzpSSpA==","signatures":[{"sig":"MEQCICsvJ54IDjIgwnRjeoZvO3N5PlV4GO2qgKYiDZjyV2xTAiBhxW28FNIDdDvddXO4LQMICxp9y5N5uxarkz+jTqXunA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":174046},"main":"./dist/index.mjs","types":"./dist/index.d.mts","exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./styles.css":"./dist/styles.css","./tailwind-preset":"./dist/tailwind-preset.cjs"},"gitHead":"05655fe4c4769e92eb95fde4af5e5ff72549a2fe","private":false,"scripts":{"dev":"next dev","lint":"eslint .","test":"vitest","build":"next build","start":"next start","test:run":"vitest run","storybook":"storybook dev -p 6006","build:package":"tsup && node ./scripts/copy-design-system-assets.mjs","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build:package","build-storybook":"storybook build","verify:consumer":"node ./scripts/verify-consumer-smoke.mjs"},"_npmUser":{"name":"ali_bn99","email":"alimusic1m@gmail.com"},"_npmVersion":"10.9.0","description":"Reusable internal UI package for Baram Next.js apps. It ships theme-aware components, curated icons, a shared stylesheet, and a Tailwind preset for downstream consumers.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.3.0","dependencies":{"clsx":"^2.1.1","react-icons":"^5.6.0","tailwind-merge":"^3.4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"next":"16.2.6","tsup":"^8.5.1","vite":"^8.0.12","jsdom":"^27.0.1","react":"19.2.4","eslint":"^9","vitest":"^4.1.6","postcss":"^8.5.14","react-dom":"19.2.4","storybook":"^10.3.6","typescript":"^5","@types/node":"^20","tailwindcss":"^3.4.19","@types/react":"^19","autoprefixer":"^10.5.0","@types/react-dom":"^19","eslint-config-next":"16.2.6","@vitest/coverage-v8":"^4.1.6","vite-tsconfig-paths":"^6.1.1","@vitejs/plugin-react":"^6.0.1","@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/nextjs-vite":"^10.3.6","@testing-library/react":"^16.3.2","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"next":"^16.2.6","react":"^19.2.0","react-dom":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1778686605505_0.8448619958361168","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@baramjk/design-system","version":"0.1.1","private":false,"main":"./dist/index.mjs","types":"./dist/index.d.mts","sideEffects":["**/*.css"],"scripts":{"dev":"next dev","build":"next build","build:package":"tsup && node ./scripts/copy-design-system-assets.mjs","start":"next start","lint":"eslint .","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"vitest","test:run":"vitest run","test:coverage":"vitest run --coverage","verify:consumer":"node ./scripts/verify-consumer-smoke.mjs","prepublishOnly":"npm run build:package"},"exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs","default":"./dist/index.mjs"},"./styles.css":"./dist/styles.css","./tailwind-preset":"./dist/tailwind-preset.cjs"},"publishConfig":{"access":"public"},"dependencies":{"clsx":"^2.1.1","react-icons":"^5.6.0","tailwind-merge":"^3.4.0"},"peerDependencies":{"next":"^16.2.6","react":"^19.2.0","react-dom":"^19.2.0"},"devDependencies":{"@storybook/addon-a11y":"^10.3.6","@storybook/addon-docs":"^10.3.6","@storybook/nextjs-vite":"^10.3.6","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/node":"^20","@types/react":"^19","@types/react-dom":"^19","@vitejs/plugin-react":"^6.0.1","@vitest/coverage-v8":"^4.1.6","autoprefixer":"^10.5.0","eslint":"^9","eslint-config-next":"16.2.6","jsdom":"^27.0.1","next":"16.2.6","postcss":"^8.5.14","react":"19.2.4","react-dom":"19.2.4","storybook":"^10.3.6","tailwindcss":"^3.4.19","tsup":"^8.5.1","typescript":"^5","vite":"^8.0.12","vite-tsconfig-paths":"^6.1.1","vitest":"^4.1.6"},"_id":"@baramjk/design-system@0.1.1","gitHead":"448ebac2fea3d73a64368ce925fc893d282d6aa4","description":"Reusable internal UI package for Baram Next.js apps. It ships theme-aware components, curated icons, a shared stylesheet, and a Tailwind preset for downstream consumers.","_nodeVersion":"23.3.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-QGUHYhdk2gUdRsWyqL7Ad/0WIhUmu3QmJfEREtI8R3iWCzIGyV7zq0k1k3EqrPmswGUbyoVPer4pxs91RKkplQ==","shasum":"600b27863768fcb8aa148039d5d5637fc30aa1a4","tarball":"https://registry.npmjs.org/@baramjk/design-system/-/design-system-0.1.1.tgz","fileCount":121,"unpackedSize":189741,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID273J9G26u0HopCb2SGl6ZTiGDfYTvJaBN0K7XU8YVRAiEAwQCK9diOuMUnoJ+WcChNPVkH2sck+H+HmYtkJxw7QBk="}]},"_npmUser":{"name":"ali_bn99","email":"alimusic1m@gmail.com"},"directories":{},"maintainers":[{"name":"ali_bn99","email":"alimusic1m@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.1.1_1778708213399_0.7414885185239204"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-13T15:36:45.360Z","modified":"2026-05-13T21:36:53.867Z","0.1.0":"2026-05-13T15:36:45.674Z","0.1.1":"2026-05-13T21:36:53.552Z"},"description":"Reusable internal UI package for Baram Next.js apps. It ships theme-aware components, curated icons, a shared stylesheet, and a Tailwind preset for downstream consumers.","maintainers":[{"name":"ali_bn99","email":"alimusic1m@gmail.com"}],"readme":"# `@baramjk/design-system`\r\n\r\nReusable internal UI package for Baram Next.js apps. It ships theme-aware components, curated icons, a shared stylesheet, and a Tailwind preset for downstream consumers.\r\n\r\n## Repo commands\r\n\r\n```bash\r\nnpm run dev\r\nnpm run build:package\r\nnpm run test:run\r\nnpm run storybook\r\nnpm run verify:consumer\r\n```\r\n\r\n## Install in a consumer app\r\n\r\nAuthenticate your app to the private registry that publishes the `@baramjk` scope, then install the package:\r\n\r\n```ini\r\n@baramjk:registry=https://registry.example.com\r\n//registry.example.com/:_authToken=${NPM_TOKEN}\r\n```\r\n\r\n```bash\r\nnpm install @baramjk/design-system\r\n```\r\n\r\nRecommended for brand fidelity: load `Geist`, `Geist Mono`, and `Manrope` in the consuming app. The package now includes safe font fallbacks, so it still renders correctly if those fonts are unavailable.\r\n\r\n## Tailwind setup\r\n\r\nAdd the package preset and scan the installed package output:\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  content: [\r\n    \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\r\n    \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\r\n    \"./node_modules/@baramjk/design-system/dist/**/*.{js,mjs}\",\r\n  ],\r\n  presets: [require(\"@baramjk/design-system/tailwind-preset\")],\r\n};\r\n```\r\n\r\n## Root layout setup\r\n\r\nImport the package stylesheet once from your app globals, then wire the theme helpers into the App Router root layout. Next 16's App Router still requires `app/layout.tsx` to define the root `<html>` and `<body>` tags.\r\n\r\n```css\r\n/* app/globals.css */\r\n@import \"@baramjk/design-system/styles.css\";\r\n\r\n.app-shell {\r\n  min-height: 100vh;\r\n}\r\n```\r\n\r\n```tsx\r\n// app/layout.tsx\r\nimport type { Metadata } from \"next\";\r\nimport { Geist, Geist_Mono, Manrope } from \"next/font/google\";\r\nimport {\r\n  ThemeProvider,\r\n  ThemeScript,\r\n  ThemeStyles,\r\n} from \"@baramjk/design-system\";\r\nimport \"./globals.css\";\r\n\r\nconst geistSans = Geist({\r\n  variable: \"--font-geist-sans\",\r\n  subsets: [\"latin\"],\r\n});\r\n\r\nconst geistMono = Geist_Mono({\r\n  variable: \"--font-geist-mono\",\r\n  subsets: [\"latin\"],\r\n});\r\n\r\nconst manrope = Manrope({\r\n  variable: \"--font-manrope\",\r\n  subsets: [\"latin\"],\r\n});\r\n\r\nexport const metadata: Metadata = {\r\n  title: \"My App\",\r\n  description: \"Consumer of @baramjk/design-system\",\r\n};\r\n\r\nexport default function RootLayout({\r\n  children,\r\n}: Readonly<{ children: React.ReactNode }>) {\r\n  return (\r\n    <html\r\n      lang=\"en\"\r\n      className={`${geistSans.variable} ${geistMono.variable} ${manrope.variable}`}\r\n    >\r\n      <body>\r\n        <ThemeStyles />\r\n        <ThemeScript defaultTheme=\"neutral\" />\r\n        <ThemeProvider defaultTheme=\"neutral\">{children}</ThemeProvider>\r\n      </body>\r\n    </html>\r\n  );\r\n}\r\n```\r\n\r\n## Tiny usage example\r\n\r\n```tsx\r\nimport { Button, CheckIcon, ThemeToggle } from \"@baramjk/design-system\";\r\n\r\nexport default function Page() {\r\n  return (\r\n    <main className=\"app-shell flex flex-col gap-4 p-6\">\r\n      <ThemeToggle />\r\n      <Button startIcon={<CheckIcon className=\"size-4\" />}>\r\n        Save changes\r\n      </Button>\r\n    </main>\r\n  );\r\n}\r\n```\r\n\r\n## Custom themes\r\n\r\nPass a `themes` map when you want to add app-specific theme entries. For a Next consumer, keep the theme definitions in a plain local module and import that module into `app/layout.tsx`.\r\n\r\n```ts\r\n// app/app-theme.ts\r\nimport type { ThemeMap } from \"@baramjk/design-system\";\r\n\r\nexport const appThemes = {\r\n  acme: {\r\n    label: \"Acme\",\r\n    colorScheme: \"light\",\r\n    colors: {\r\n      background: \"0 0% 100%\",\r\n      foreground: \"222.2 84% 4.9%\",\r\n      card: \"0 0% 100%\",\r\n      cardForeground: \"222.2 84% 4.9%\",\r\n      popover: \"0 0% 100%\",\r\n      popoverForeground: \"222.2 84% 4.9%\",\r\n      primary: \"142 72% 29%\",\r\n      primaryForeground: \"210 40% 98%\",\r\n      secondary: \"210 40% 96.1%\",\r\n      secondaryForeground: \"222.2 47.4% 11.2%\",\r\n      muted: \"210 40% 96.1%\",\r\n      mutedForeground: \"215.4 16.3% 46.9%\",\r\n      accent: \"210 40% 96.1%\",\r\n      accentForeground: \"222.2 47.4% 11.2%\",\r\n      destructive: \"0 84.2% 60.2%\",\r\n      destructiveForeground: \"210 40% 98%\",\r\n      border: \"214.3 31.8% 91.4%\",\r\n      input: \"214.3 31.8% 91.4%\",\r\n      ring: \"142 72% 29%\",\r\n    },\r\n    radius: {\r\n      sm: \"0.375rem\",\r\n      md: \"0.5rem\",\r\n      lg: \"0.75rem\",\r\n      xl: \"1rem\",\r\n      pill: \"9999px\",\r\n    },\r\n    spacing: {\r\n      1: \"0.25rem\",\r\n      2: \"0.5rem\",\r\n      3: \"0.75rem\",\r\n      4: \"1rem\",\r\n      5: \"1.25rem\",\r\n      6: \"1.5rem\",\r\n      8: \"2rem\",\r\n      10: \"2.5rem\",\r\n      12: \"3rem\",\r\n    },\r\n    typography: {\r\n      body: \"var(--font-geist-sans), sans-serif\",\r\n      display: \"var(--font-manrope), sans-serif\",\r\n      mono: \"var(--font-geist-mono), monospace\",\r\n      textSm: \"0.875rem\",\r\n      textBase: \"1rem\",\r\n      textLg: \"1.125rem\",\r\n      textXl: \"1.25rem\",\r\n      leadingSm: \"1.25rem\",\r\n      leadingBase: \"1.5rem\",\r\n      leadingLg: \"1.75rem\",\r\n      weightMedium: \"500\",\r\n      weightSemibold: \"600\",\r\n      weightBold: \"700\",\r\n    },\r\n    shadows: {\r\n      sm: \"0 1px 2px 0 hsl(222.2 84% 4.9% / 0.05)\",\r\n      md: \"0 4px 6px -1px hsl(222.2 84% 4.9% / 0.1)\",\r\n      lg: \"0 10px 15px -3px hsl(222.2 84% 4.9% / 0.1)\",\r\n    },\r\n    tokens: {\r\n      \"sidebar-background\": \"222 40% 12%\",\r\n      \"sidebar-foreground\": \"210 40% 96%\",\r\n    },\r\n  },\r\n} satisfies ThemeMap;\r\n```\r\n\r\nUse `themeStrategy=\"extend\"` to keep the package themes and append your own entries:\r\n\r\n```tsx\r\nimport {\r\n  ThemeProvider,\r\n  ThemeScript,\r\n  ThemeStyles,\r\n} from \"@baramjk/design-system\";\r\nimport { appThemes } from \"./app-theme\";\r\n\r\nexport default function RootLayout({\r\n  children,\r\n}: Readonly<{ children: React.ReactNode }>) {\r\n  return (\r\n    <html lang=\"en\">\r\n      <body>\r\n        <ThemeStyles themes={appThemes} themeStrategy=\"extend\" />\r\n        <ThemeScript\r\n          themes={appThemes}\r\n          themeStrategy=\"extend\"\r\n          defaultTheme=\"neutral\"\r\n        />\r\n        <ThemeProvider\r\n          themes={appThemes}\r\n          themeStrategy=\"extend\"\r\n          defaultTheme=\"neutral\"\r\n        >\r\n          {children}\r\n        </ThemeProvider>\r\n      </body>\r\n    </html>\r\n  );\r\n}\r\n```\r\n\r\nUse `themeStrategy=\"replace\"` when you want the consumer app to provide the full registry and omit the built-in package themes:\r\n\r\n```tsx\r\n<ThemeStyles themes={appThemes} themeStrategy=\"replace\" />\r\n<ThemeScript\r\n  themes={appThemes}\r\n  themeStrategy=\"replace\"\r\n  defaultTheme=\"acme\"\r\n/>\r\n<ThemeProvider\r\n  themes={appThemes}\r\n  themeStrategy=\"replace\"\r\n  defaultTheme=\"acme\"\r\n>\r\n  {children}\r\n</ThemeProvider>\r\n```\r\n\r\nAny extra `tokens` you add become CSS custom properties alongside the built-in theme variables. That makes it easy to map app-specific values into Tailwind:\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  theme: {\r\n    extend: {\r\n      colors: {\r\n        sidebar: \"hsl(var(--sidebar-background))\",\r\n        sidebarForeground: \"hsl(var(--sidebar-foreground))\",\r\n      },\r\n    },\r\n  },\r\n};\r\n```\r\n\r\n## Local consumer verification\r\n\r\nRun the packed-consumer smoke test from this repo:\r\n\r\n```bash\r\nnpm run verify:consumer\r\n```\r\n\r\nThat command builds the package, creates an `npm pack` tarball, installs that tarball into the `smoke-tests/next-consumer` fixture, and runs a production `next build` there from a temporary directory outside the repo.\r\n","readmeFilename":"README.md"}