@peerbots/core 0.2.1 → 0.2.2

package/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react-vite';
-import '../src/styles/theme.css';
+import '../src/styles/index.css';
 
 const preview: Preview = {
   parameters: {

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @peerbots/core
 
+## 0.2.2
+
+### Patch Changes
+
+- 932a896: Export './dist/index.css' as an explicit subpath to correctly resolve imports in external apps.
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -6,4 +6,40 @@ This package contains the core components for the Peerbots UI and theming. It pr
 
 ```bash
 npm install @peerbots/core
-```
+```
+
+## Usage
+
+### 1. Components
+Import components and helpers directly from the package root:
+
+```tsx
+import { Button, Dialog, SEO } from "@peerbots/core";
+```
+
+### 2. Styles
+You can import Peerbots styles either in your JavaScript/TypeScript entry point or directly in your CSS files.
+
+#### **In JavaScript/TypeScript**
+```tsx
+// Complete styles (Components + Theme)
+import "@peerbots/core/styles";
+
+// OR Theme variables only (Colors + Fonts)
+import "@peerbots/core/theme";
+```
+
+#### **In CSS**
+If your bundler (like Vite or Webpack) supports resolving `node_modules`:
+
+```css
+/* Complete styles (Components + Theme) */
+@import "@peerbots/core/styles";
+
+/* OR Theme variables only (Colors + Fonts) */
+@import "@peerbots/core/theme";
+```
+
+> [!TIP]
+> **Which one should I use?**
+> Use `@peerbots/core/styles` if you want the Peerbots UI components to look correct out of the box. Use `@peerbots/core/theme` if you only want to use the Peerbots color palette and typography in your own custom Tailwind project without the bundled component styles.

package/dist/styles/theme.css

@@ -0,0 +1 @@
+@theme{ --color-primary: #46d9d9; --color-dark-primary: var(--color-teal-700); --color-secondary: #e86e8a; --color-accent: #d9e021; --color-accent-hc: #c4cc24; --color-accent-two: #4273ff; --color-accent-two-hc: #516eb5; --color-accent-three: #3f8588; --color-danger: #e86e8a; --color-light-bg: #d8e7eb; --sidebar-bg: #f9ffff; --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops)); --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops)); --font-sans: "Avenir", "Nunito", sans-serif; }

package/dist/styles/theme.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles/theme.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/theme.css

@@ -0,0 +1 @@
+@theme{ --color-primary: #46d9d9; --color-dark-primary: var(--color-teal-700); --color-secondary: #e86e8a; --color-accent: #d9e021; --color-accent-hc: #c4cc24; --color-accent-two: #4273ff; --color-accent-two-hc: #516eb5; --color-accent-three: #3f8588; --color-danger: #e86e8a; --color-light-bg: #d8e7eb; --sidebar-bg: #f9ffff; --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops)); --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops)); --font-sans: "Avenir", "Nunito", sans-serif; }

package/dist/theme.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "dist/index.js",
   "style": "./dist/index.css",
   "types": "dist/index.d.ts",
@@ -14,7 +14,19 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./theme": {
+      "style": "./dist/styles/theme.css",
+      "default": "./dist/styles/theme.css"
+    },
+    "./styles": {
+      "style": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
     "./theme.css": {
+      "style": "./dist/styles/theme.css",
+      "default": "./dist/styles/theme.css"
+    },
+    "./dist/index.css": {
       "style": "./dist/index.css",
       "default": "./dist/index.css"
     }
@@ -26,7 +38,7 @@
     "url": "git+https://github.com/peerbots/peerbots-core.git"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --minify",
+    "build": "tsup src/index.ts src/styles/theme.css --format cjs,esm --dts --minify",
     "changeset": "changeset",
     "release": "changeset publish",
     "storybook": "storybook dev -p 6006",

package/src/index.ts

@@ -1,5 +1,5 @@
 // src/index.ts
-import "./styles/theme.css"; // Ensure CSS is bundled
+import "./styles/index.css"; // Ensure CSS is bundled
 
 export * from "./ui";
 export * from "./helpers/SEO";

package/src/styles/index.css

@@ -0,0 +1,40 @@
+@import "tailwindcss" prefix(pb);
+@import "./theme.css";
+
+@utility input-base {
+    @apply pb:bg-primary/10 pb:border pb:border-b-2 pb:border-gray-300 pb:focus:border-gray-600 pb:py-2 pb:px-2;
+}
+
+@utility btn-primary {
+    @apply pb:bg-primary pb:hover:bg-dark-primary pb:text-gray-900 pb:font-bold pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
+}
+
+@utility btn-secondary {
+    @apply pb:bg-gray-100 pb:hover:bg-gray-200 pb:text-gray-800 pb:font-normal pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
+}
+
+@utility btn-danger {
+    @apply pb:bg-danger pb:hover:opacity-80 pb:text-gray-900 pb:font-bold pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
+}
+
+@utility range-primary {
+    @apply pb:accent-primary pb:bg-gray-100 pb:rounded-md pb:cursor-pointer;
+}
+
+.range-vertical {
+    writing-mode: vertical-lr;
+}
+
+.pb-tooltip,
+.pb-tooltip-slow {
+    @apply pb:absolute pb:invisible pb:opacity-0;
+}
+
+/* Using siblings so that hovering over the invisible tooltip doesn't trigger the tooltip */
+.pb-has-tooltip:hover+.pb-tooltip {
+    @apply pb:visible pb:opacity-100 pb:z-50 pb:transition-opacity pb:delay-300 pb:ease-in-out;
+}
+
+.pb-has-tooltip:hover+.pb-tooltip-slow {
+    @apply pb:visible pb:opacity-100 pb:z-50 pb:transition-opacity pb:delay-1000 pb:ease-in-out;
+}

package/src/styles/theme.css

@@ -1,5 +1,3 @@
-@import "tailwindcss" prefix(pb);
-
 @theme {
     --color-primary: #46d9d9;
     /* --color-old-dark-primary: #5fc7cc; */
@@ -19,42 +17,4 @@
             var(--tw-gradient-stops));
 
     --font-sans: "Avenir", "Nunito", sans-serif;
-}
-
-@utility input-base {
-    @apply pb:bg-primary/10 pb:border pb:border-b-2 pb:border-gray-300 pb:focus:border-gray-600 pb:py-2 pb:px-2;
-}
-
-@utility btn-primary {
-    @apply pb:bg-primary pb:hover:bg-dark-primary pb:text-gray-900 pb:font-bold pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
-}
-
-@utility btn-secondary {
-    @apply pb:bg-gray-100 pb:hover:bg-gray-200 pb:text-gray-800 pb:font-normal pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
-}
-
-@utility btn-danger {
-    @apply pb:bg-danger pb:hover:opacity-80 pb:text-gray-900 pb:font-bold pb:py-1 pb:px-2 pb:my-1 pb:mx-2 pb:rounded-md pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300 pb:disabled:cursor-not-allowed pb:cursor-pointer;
-}
-
-@utility range-primary {
-    @apply pb:accent-primary pb:bg-gray-100 pb:rounded-md pb:cursor-pointer;
-}
-
-.range-vertical {
-    writing-mode: vertical-lr;
-}
-
-.pb-tooltip,
-.pb-tooltip-slow {
-    @apply pb:absolute pb:invisible pb:opacity-0;
-}
-
-/* Using siblings so that hovering over the invisible tooltip doesn't trigger the tooltip */
-.pb-has-tooltip:hover+.pb-tooltip {
-    @apply pb:visible pb:opacity-100 pb:z-50 pb:transition-opacity pb:delay-300 pb:ease-in-out;
-}
-
-.pb-has-tooltip:hover+.pb-tooltip-slow {
-    @apply pb:visible pb:opacity-100 pb:z-50 pb:transition-opacity pb:delay-1000 pb:ease-in-out;
 }