@okshaun/components 0.5.8 → 1.0.0

package/README.md

@@ -42,10 +42,7 @@ export default defineConfig({
   exclude: [],
 
   // Use the okshaun preset
-  presets: [
-    '@pandacss/preset-base',
-    okshaunPreset
-  ],
+  presets: [ okshaunPreset ],
 
   // Optional: customize the preset
   theme: {
@@ -57,7 +54,7 @@ export default defineConfig({
   },
 
   // Configure output
-  outdir: 'styled-system',
+  outdir: 'src/styled-system',
   jsxFramework: 'react',
 
   // Recommended settings
@@ -96,9 +93,8 @@ import ReactDOM from 'react-dom/client'
 import { ThemeProvider } from '@okshaun/components'
 import App from './App'
 
-// Import your app styles and Panda CSS output
+// Import your app styles as the Panda CSS entrypoint
 import './index.css'
-import '../styled-system/styles.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
@@ -116,9 +112,9 @@ Add Panda CSS generation to your scripts:
 ```json
 {
   "scripts": {
-    "dev": "panda codegen --watch & vite",
-    "build": "panda codegen && tsc && vite build",
-    "panda": "panda codegen"
+    "dev": "npx panda codegen --watch & vite",
+    "build": "npx panda codegen && tsc && vite build",
+    "prepare": "npx panda codegen"
   }
 }
 ```
@@ -132,7 +128,7 @@ Update `tsconfig.json` to include Panda CSS path aliases:
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@styled-system/*": ["./styled-system/*"]
+      "@styled-system/*": ["./src/styled-system/*"]
     }
   }
 }
@@ -151,7 +147,7 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      '@styled-system': resolve(__dirname, './styled-system'),
+      '@styled-system': resolve(__dirname, './src/styled-system'),
     },
   },
 })
@@ -163,7 +159,7 @@ export default defineConfig({
 
 ```typescript
 import { Button, Box, Text, Icon } from '@okshaun/components'
-import { css } from '../styled-system/css'
+import { css } from '@styled-system/css'
 
 function App() {
   return (
@@ -222,8 +218,8 @@ import { Icon } from '@okshaun/components'
 function MyComponent() {
   return (
     <>
-      <Icon name="check" size="md" fill="success.default" />
-      <Icon name="close" size="lg" fill="error.default" />
+      <Icon name="check" size="md" fill="icon.success" />
+      <Icon name="close" size="lg" fill="icon.error" />
     </>
   )
 }
@@ -253,7 +249,7 @@ function Examples() {
       </Button>
 
       {/* Button as React Router Link */}
-      <Button as={Link} to="/about" variant="secondary">
+      <Button as={Link} to="/about">
         About Page
       </Button>
     </>
@@ -312,13 +308,13 @@ export default defineConfig({
 The preset provides comprehensive design tokens:
 
 ```typescript
-import { css } from '../styled-system/css'
+import { css } from '@styled-system/css'
 
 const styles = css({
   // Colors from semantic tokens
-  bg: 'surface.default',
-  color: 'text.default',
-  borderColor: 'border.default',
+  bg: 'bg.surface',
+  color: 'text',
+  borderColor: 'border',
 
   // Spacing (0-280 + container sizes)
   p: '4',
@@ -326,13 +322,13 @@ const styles = css({
   gap: '2',
 
   // Border radius
-  borderRadius: 'md', // xs, sm, md, lg, xl, 2xl, 3xl, full
+  borderRadius: '8',
 
   // Shadows
-  boxShadow: 'md', // sm, md, lg, xl, 2xl
+  boxShadow: 'raised',
 
   // Typography
-  fontSize: 'md',
+  fontSize: '14',
   fontWeight: 'medium',
   lineHeight: 'normal'
 })
@@ -371,7 +367,7 @@ Override the font tokens in your `panda.config.ts`:
 
 ```typescript
 import { defineConfig } from '@pandacss/dev'
-import { okshaunPreset } from '@okshaun/components/preset'
+import { okshaunPreset } from '@okshaun/components'
 
 export default defineConfig({
   presets: [okshaunPreset],
@@ -434,7 +430,7 @@ No additional font packages needed!
 npm install
 
 # Generate Panda CSS
-npm run panda
+npm run prepare
 
 # Start development server
 npm run dev
@@ -492,7 +488,7 @@ git push origin :refs/tags/v0.3.5
 
 ## Storybook
 
-View all components in Storybook: [https://shaunrfox.github.io/okshaun-components](https://shaunrfox.github.io/okshaun-components)
+View all components in Storybook: [shaunfox.com/okshaun-components](https://shaunfox.com/okshaun-components)
 
 ## License
 

package/dist/.mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "panda": {
+      "command": "npx",
+      "args": [
+        "panda",
+        "mcp"
+      ]
+    }
+  }
+}