{"_id":"@boeet/next-ui","_rev":"3-589e3d6fe5d87daa6f1a3b3266c7fcc4","name":"@boeet/next-ui","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@boeet/next-ui","version":"0.1.0","_id":"@boeet/next-ui@0.1.0","maintainers":[{"name":"emeiziying","email":"dzq1007650105@gmail.com"}],"dist":{"shasum":"a9b51d9a89a5c7ee853801b0f93e810ff5eac2ae","tarball":"https://registry.npmjs.org/@boeet/next-ui/-/next-ui-0.1.0.tgz","fileCount":147,"integrity":"sha512-9NSHM/Q4sC/0DYxaj2Y3IdFTVj9M/nITHZGiqncwSp68ceAwWKMquLLtgsf1w/2z7mtZ8g6lu1uCJO7Qe3PP3g==","signatures":[{"sig":"MEQCIDloLs5Defb/W3JMGNbCA/r+TWkfrQ9P+fGKecC0SAjuAiA5X9l+JacWufGXtoNxqBOSPrkD0bKlEyoYd2RNXW2ysQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":240764},"main":"./dist/index.js","type":"module","_from":"file:boeet-next-ui-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/components/ui/*.d.ts","import":"./dist/components/ui/*.js"},"./utils":{"types":"./dist/utils.d.ts","import":"./dist/utils.js"},"./styles.css":"./styles.css","./hooks/use-mobile":{"types":"./dist/hooks/use-mobile.d.ts","import":"./dist/hooks/use-mobile.js"}},"scripts":{"build":"tsc -p tsconfig.json"},"_npmUser":{"name":"emeiziying","email":"dzq1007650105@gmail.com"},"_resolved":"/private/var/folders/25/t1ctf51d0js9k5k827jfjyr40000gn/T/35b52d967e3bab1bfcb78c4ff39b4141/boeet-next-ui-0.1.0.tgz","_integrity":"sha512-9NSHM/Q4sC/0DYxaj2Y3IdFTVj9M/nITHZGiqncwSp68ceAwWKMquLLtgsf1w/2z7mtZ8g6lu1uCJO7Qe3PP3g==","_npmVersion":"10.9.4","description":"Reusable React UI components extracted from the Next.js demo and aligned with `design.md`.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","sonner":"^2.0.7","radix-ui":"^1.4.3","recharts":"^3.8.0","lucide-react":"^1.16.0","tailwind-merge":"^3.6.0","react-day-picker":"^10.0.1","@boeet/next-tokens":"0.1.0","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/react":"^19","@types/react-dom":"^19"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"_npmOperationalInternal":{"tmp":"tmp/next-ui_0.1.0_1779329142931_0.803859982682535","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@boeet/next-ui","version":"0.1.1","_id":"@boeet/next-ui@0.1.1","maintainers":[{"name":"emeiziying","email":"dzq1007650105@gmail.com"}],"dist":{"shasum":"3f27317d8af6bc66f84f474c3c4b333e4f7568e5","tarball":"https://registry.npmjs.org/@boeet/next-ui/-/next-ui-0.1.1.tgz","fileCount":195,"integrity":"sha512-ZAYJeTmEaw/nQTpnX5ucIWcuqA5+M0HcZhOpAe5frbo2Ie+5yKoYzw2JPIjO013eulC0/QbrV2kJkiKQI5CYdw==","signatures":[{"sig":"MEUCIQDGzelj28+wgR1rxQzHC45HnsTNWNM/EmKyLbEt9D0bhwIgEdMxJegZcOOJycIHrv+mA5RquzuotYT/bvcFgev4IHE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":281226},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/components/ui/*.d.ts","import":"./dist/components/ui/*.js"},"./utils":{"types":"./dist/utils.d.ts","import":"./dist/utils.js"},"./app-shell":{"types":"./dist/components/app-shell/index.d.ts","import":"./dist/components/app-shell/index.js"},"./styles.css":"./styles.css","./theme-switcher":{"types":"./dist/components/theme-switcher/index.d.ts","import":"./dist/components/theme-switcher/index.js"},"./hooks/use-mobile":{"types":"./dist/hooks/use-mobile.d.ts","import":"./dist/hooks/use-mobile.js"}},"gitHead":"2b496bc8872b0858dcdc4b44449c4b46245c768c","scripts":{"build":"tsc -p tsconfig.json"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:809ddc32-aae3-4aa9-a291-265504359e7b"}},"_npmVersion":"11.12.1","description":"Reusable React UI components extracted from the Next.js demo and aligned with `design.md`.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.1","sonner":"^2.0.7","radix-ui":"^1.4.3","recharts":"^3.8.0","lucide-react":"^1.16.0","tailwind-merge":"^3.6.0","react-day-picker":"^10.0.1","@boeet/next-tokens":"workspace:*","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/react":"^19","@types/react-dom":"^19"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"_npmOperationalInternal":{"tmp":"tmp/next-ui_0.1.1_1779416947578_0.5188000978897707","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@boeet/next-ui","version":"0.2.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./styles.css","./utils":{"types":"./dist/utils.d.ts","import":"./dist/utils.js"},"./hooks/use-mobile":{"types":"./dist/hooks/use-mobile.d.ts","import":"./dist/hooks/use-mobile.js"},"./app-shell":{"types":"./dist/components/app-shell/index.d.ts","import":"./dist/components/app-shell/index.js"},"./theme-switcher":{"types":"./dist/components/theme-switcher/index.d.ts","import":"./dist/components/theme-switcher/index.js"},"./*":{"types":"./dist/components/ui/*.d.ts","import":"./dist/components/ui/*.js"}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"sideEffects":["**/*.css"],"scripts":{"build":"tsc -p tsconfig.json"},"peerDependencies":{"react":">=18 <20","react-dom":">=18 <20"},"dependencies":{"@boeet/next-tokens":"workspace:*","class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^1.16.0","radix-ui":"^1.4.3","react-day-picker":"^10.0.1","recharts":"^3.8.0","sonner":"^2.0.7","tailwind-merge":"^3.6.0"},"devDependencies":{"@types/react":"^19","@types/react-dom":"^19","typescript":"^5"},"gitHead":"f076dcd1a7b8693b0169369fa20700c5c63573f1","_id":"@boeet/next-ui@0.2.0","description":"Reusable React UI components extracted from the Next.js demo and aligned with `design.md`.","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-SbzObKithXZj67IduC6cI0BX4CQo4vqh7kuXjdX+RaTJzUZF7fshAHLkdAngZs94nCQuBACG+9UjHxYlt7nqSQ==","shasum":"702636166a2c85065670ae350d54ceaacb37bfac","tarball":"https://registry.npmjs.org/@boeet/next-ui/-/next-ui-0.2.0.tgz","fileCount":195,"unpackedSize":283365,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC1WPaKQXWPp/zkUAn2fRPzh8m+tGLyYh58IOUODzVAagIhANDQ+BjrmT/ZE70whOf284MT1xCx6zM6uK51Po6PtPOm"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:809ddc32-aae3-4aa9-a291-265504359e7b"}},"directories":{},"maintainers":[{"name":"emeiziying","email":"dzq1007650105@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/next-ui_0.2.0_1779425970588_0.4479010046170544"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T02:05:42.766Z","modified":"2026-05-22T04:59:30.919Z","0.1.0":"2026-05-21T02:05:43.089Z","0.1.1":"2026-05-22T02:29:07.733Z","0.2.0":"2026-05-22T04:59:30.789Z"},"description":"Reusable React UI components extracted from the Next.js demo and aligned with `design.md`.","maintainers":[{"name":"emeiziying","email":"dzq1007650105@gmail.com"}],"readme":"# @boeet/next-ui\n\nReusable React UI components extracted from the Next.js demo and aligned with\n`design.md`.\n\nThe `next-ui` name identifies the newer BOEET design-system line and separates\nit from earlier BOEET UI libraries. It does not mean this package can only be\nused in Next.js projects.\n\nThis package intentionally avoids Next.js-only APIs so it can be published to\nnpm and consumed by Vite-based tools such as Figma Make.\n\n## Install\n\n```bash\nnpm install @boeet/next-ui @boeet/next-tokens\n```\n\nFor Tailwind v4, import the UI style entry once in the consumer app:\n\n```css\n@import \"tailwindcss\";\n@import \"@boeet/next-ui/styles.css\";\n```\n\n`@boeet/next-ui/styles.css` imports token variables and registers the built UI\npackage as a Tailwind v4 source.\n\nFor Tailwind v3, import token CSS directly and add the package output to\n`tailwind.config.*` `content`.\n\n```css\n@import \"@boeet/next-tokens/styles.css\";\n```\n\n## Usage\n\n```tsx\nimport { Button } from \"@boeet/next-ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@boeet/next-ui/card\"\n\nexport function Example() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Energy Overview</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Button>Submit</Button>\n      </CardContent>\n    </Card>\n  )\n}\n```\n\n## Theme Switcher\n\nUse `ThemeSwitcher` as a controlled UI component. Keep theme state management\nin the host app, for example with `next-themes`, and pass a normalized `light`\nor `dark` value into the component. The component renders the `52px x 26px`\nicon switch used in the workbench header and does not manage `html` classes by\nitself. It has no visible label by default; pass `label` only when surrounding\nUI needs visible text.\n\n```tsx\nimport { useTheme } from \"next-themes\"\nimport {\n  ThemeSwitcher,\n  type ThemeMode,\n} from \"@boeet/next-ui/theme-switcher\"\n\nexport function AppThemeSwitcher() {\n  const { theme, setTheme } = useTheme()\n  const currentTheme: ThemeMode = theme === \"dark\" ? \"dark\" : \"light\"\n\n  return (\n    <ThemeSwitcher\n      value={currentTheme}\n      onValueChange={setTheme}\n      ariaLabel=\"切换深浅主题\"\n    />\n  )\n}\n```\n\n## App Shell\n\nUse `SidebarAppShell` or `TopSidebarAppShell` for admin-style pages that need\nthe standard `244px` sidebar, `64px` top bar, `20px` content padding, active\nnavigation, expandable submenu, and mobile off-canvas navigation.\n\nThe app shell components do not depend on Next.js. Pass the current path from\nyour router and optionally provide a custom link component. `AppShell` remains\nan alias of `SidebarAppShell` for compatibility.\n\nFor business applications, prefer `headerPosition=\"fixed\"` so the layout header\nstays visible while the content scrolls. Fixed header mode adds the required\ncontent spacer and offsets the desktop header around the sidebar. The content\narea uses `min-width: 0` and page-level horizontal overflow protection; wide\ntables and charts should scroll inside their own containers.\n\n```tsx\nimport type { ReactNode } from \"react\"\nimport {\n  SidebarAppShell,\n  TopSidebarAppShell,\n  type AppShellLinkComponent,\n  type AppShellNavItem,\n} from \"@boeet/next-ui/app-shell\"\n\nconst navItems: AppShellNavItem[] = [\n  { id: \"overview\", title: \"Overview\", href: \"/overview\" },\n  {\n    id: \"examples\",\n    title: \"业务示例\",\n    href: \"/examples/admin\",\n    children: [\n      { id: \"examples-admin\", title: \"后台配置\", href: \"/examples/admin\" },\n      { id: \"examples-forecast\", title: \"光伏预测\", href: \"/examples/forecast\" },\n    ],\n  },\n]\n\nconst LinkComponent: AppShellLinkComponent = ({ href, children, ...props }) => (\n  <a href={href} {...props}>\n    {children}\n  </a>\n)\n\nexport function AdminLayout({ children }: { children: ReactNode }) {\n  return (\n    <SidebarAppShell\n      navItems={navItems}\n      currentPath=\"/overview\"\n      linkComponent={LinkComponent}\n      brand=\"Design Spec\"\n      headerTitle=\"综合能源管理平台\"\n      headerPosition=\"fixed\"\n      defaultExpandedIds={[\"examples\"]}\n    >\n      {children}\n    </SidebarAppShell>\n  )\n}\n\nexport function WorkbenchLayout({ children }: { children: ReactNode }) {\n  return (\n    <TopSidebarAppShell\n      navItems={navItems}\n      currentPath=\"/examples/microgrid\"\n      linkComponent={LinkComponent}\n      brand=\"Design Spec\"\n      headerActions=\"User\"\n    >\n      {children}\n    </TopSidebarAppShell>\n  )\n}\n```\n\nKeep business-specific right rails or auxiliary card columns inside\n`children`; they are content layout, not app-shell slots.\n\nUse `design.md` as the source of truth for visual rules and\n`packages/figma-make-kit` for Figma Make handoff guidance.\n","readmeFilename":"README.md"}