@okshaun/components 1.0.1 → 2.0.0

package/package.json

@@ -1,23 +1,43 @@
 {
   "name": "@okshaun/components",
-  "version": "1.0.1",
-  "description": "A comprehensive React component library with Panda CSS theming",
+  "version": "2.0.0",
+  "description": "okshaun design system",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "scripts": {
-    "prepare": "npx panda codegen",
-    "dev": "npx panda codegen --watch & vite",
-    "build": "rm -rf dist && PANDA_STATIC=true npx panda codegen && npx panda cssgen --splitting && npx panda spec && npx panda init-mcp --client claude && vite build",
-    "lint": "eslint .",
+    "prepare": "npx panda && npx simple-git-hooks",
+    "dev": "npx panda --watch & vite",
+    "build": "rm -rf dist && PANDA_STATIC=true npx panda && npx panda spec && npx panda ship --outfile ./panda.buildinfo.json && vite build",
+    "lint": "biome lint .",
+    "check": "biome check .",
+    "check:write": "biome check . --write",
+    "format": "biome format . --write",
+    "typecheck": "tsc --noEmit",
+    "standards:check": "node tools/validate-standards.mjs",
+    "standards:changed": "node tools/validate-standards.mjs --changed",
+    "standards:staged": "node tools/validate-standards.mjs --staged",
+    "standards:test": "node --test tools/tests/*.test.mjs",
+    "validate": "node tools/run-validate.mjs --full --include-typecheck",
+    "validate:staged": "node tools/run-validate.mjs --staged --write",
+    "validate:full": "node tools/run-validate.mjs --full --report-only --include-typecheck",
     "preview": "vite preview",
     "generate-sprite": "node src/utils/generate-sprite.js",
-    "storybook": "PANDA_STATIC=true storybook dev -p 6006",
-    "storybook:build": "PANDA_STATIC=true storybook build",
-    "panda-mcp": "npx panda mcp",
+    "storybook": "PANDA_STATIC=true STORYBOOK=true storybook dev -p 6006",
+    "storybook:build": "PANDA_STATIC=true STORYBOOK=true storybook build",
+    "playroom": "node .playroom/playroom-dev.js",
+    "playroom:css": "node .playroom/playroom-dev.js --css-only",
+    "playroom:build": "node .playroom/playroom-build.js",
+    "panda": "npx panda --watch",
+    "panda:mcp": "npx panda mcp",
     "prepublishOnly": "npm run build",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+    "doctor": "npm run doctor:react && npm run doctor:storybook",
+    "doctor:react": "npx -y react-doctor@latest .",
+    "doctor:storybook": "npx storybook doctor"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npm run validate:staged"
   },
   "files": [
     "./dist/",
@@ -54,50 +74,43 @@
     }
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "date-fns": "^4.1.0"
+    "@floating-ui/react": "^0.27.16"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@biomejs/biome": "2.0.6",
     "@fontsource-variable/piazzolla": "^5.2.8",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/ibm-plex-sans": "^5.2.8",
     "@pandacss/dev": "^1.8.0",
-    "@storybook/addon-essentials": "^8.6.15",
-    "@storybook/addon-interactions": "^8.6.15",
-    "@storybook/addon-themes": "^8.6.15",
-    "@storybook/blocks": "^8.6.15",
-    "@storybook/react": "^8.6.15",
-    "@storybook/react-vite": "^8.6.15",
-    "@storybook/test": "^8.6.15",
+    "@storybook/addon-a11y": "^8.6.17",
+    "@storybook/addon-essentials": "^8.6.17",
+    "@storybook/addon-interactions": "^8.6.17",
+    "@storybook/addon-themes": "^8.6.17",
+    "@storybook/blocks": "^8.6.17",
+    "@storybook/react": "^8.6.17",
+    "@storybook/react-vite": "^8.6.17",
+    "@storybook/test": "^8.6.17",
     "@types/node": "^22.15.30",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.2",
+    "babel-loader": "^10.0.0",
     "gh-pages": "^6.2.0",
-    "globals": "^15.14.0",
+    "playroom": "^0.44.0",
     "postcss": "^8.5.1",
-    "prettier": "^3.3.3",
-    "storybook": "^8.6.15",
+    "react-doctor": "^0.0.29",
+    "simple-git-hooks": "^2.13.1",
+    "storybook": "^8.6.17",
     "svg-sprite": "^2.0.4",
     "svgo": "^3.0.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.54.0",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/src/recipes/avatar.ts

@@ -44,11 +44,11 @@ export const avatarRecipe = defineSlotRecipe({
       position: 'absolute',
       bottom: '0',
       right: '0',
-      borderRadius: 'full',
+      borderRadius: '999',
       borderWidth: '2',
       borderStyle: 'solid',
       borderColor: 'bg',
-      zIndex: 1,
+      zIndex: 'raised',
     },
     status: {
       position: 'absolute',
@@ -57,11 +57,11 @@ export const avatarRecipe = defineSlotRecipe({
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: 'full',
+      borderRadius: '999',
       borderWidth: '2',
       borderStyle: 'solid',
       borderColor: 'bg',
-      zIndex: 1,
+      zIndex: 'raised',
     },
   },
   variants: {

package/src/recipes/badge.ts

@@ -17,10 +17,10 @@ export const badgeRecipe = defineSlotRecipe({
       borderRadius: '999',
       fontWeight: 'medium',
       fontFamily: 'sans',
-      lineHeight: '1',
+      lineHeight: 'none',
       whiteSpace: 'nowrap',
       userSelect: 'none',
-      zIndex: '1',
+      zIndex: 'raised',
     },
   },
   variants: {
@@ -89,50 +89,50 @@ export const badgeRecipe = defineSlotRecipe({
     variant: {
       neutral: {
         indicator: {
-          bg: { base: 'neutral.30', _dark: 'darkNeutral.40' },
-          color: 'text',
+          color: { base: 'neutral.110', _dark: 'neutral.0' },
+          bg: { base: 'neutral.40', _dark: 'neutral.70' },
         },
       },
       subtle: {
         indicator: {
-          bg: 'bg.neutral',
-          color: 'text',
+          color: { base: 'neutral.100', _dark: 'darkNeutral.120' },
+          bg: { base: 'neutralA.20', _dark: 'darkNeutralA.20' },
         },
       },
-      inverted: {
+      bold: {
         indicator: {
-          bg: 'bg.neutral.inverse.bold',
-          color: 'text.inverse',
+          color: { base: 'neutral.0', _dark: 'darkNeutral.10' },
+          bg: { base: 'darkNeutral.0', _dark: 'neutral.0' },
         },
       },
-      'subtle-inverted': {
+      inverse: {
         indicator: {
-          bg: 'bg.neutral.inverse.subtle',
-          color: 'text',
+          color: { base: 'neutral.110', _dark: 'darkNeutral.120' },
+          bg: { base: 'neutral.0', _dark: 'darkNeutral.0' },
         },
       },
       success: {
         indicator: {
-          bg: 'bg.success.bold',
-          color: 'text.inverse',
+          color: { base: 'neutral.0', _dark: 'darkNeutral.0' },
+          bg: { base: 'green.50', _dark: 'green.40' },
         },
       },
-      danger: {
+      warning: {
         indicator: {
-          bg: 'bg.danger.bold',
-          color: 'text.inverse',
+          color: { base: 'neutral.100', _dark: 'darkNeutral.10' },
+          bg: { base: 'orange.30', _dark: 'orange.30' },
         },
       },
-      warning: {
+      danger: {
         indicator: {
-          bg: 'bg.warning.bold',
-          color: 'text.warning.inverse',
+          color: { base: 'neutral.0', _dark: 'neutral.0' },
+          bg: { base: 'red.50', _dark: 'red.50' },
         },
       },
       info: {
         indicator: {
-          bg: 'bg.info.bold',
-          color: 'text.inverse',
+          color: { base: 'neutral.0', _dark: 'darkNeutral.10' },
+          bg: { base: 'blue.50', _dark: 'blue.40' },
         },
       },
     },
@@ -146,9 +146,6 @@ export const badgeRecipe = defineSlotRecipe({
         indicator: {
           minW: '16',
           h: 'fit',
-          // w: '4',
-          // h: '4',
-          // p: '3',
         },
       },
     },
@@ -159,9 +156,6 @@ export const badgeRecipe = defineSlotRecipe({
         indicator: {
           minW: '20',
           h: 'fit',
-          // w: '6',
-          // h: '6',
-          // p: '4',
         },
       },
     },
@@ -172,9 +166,6 @@ export const badgeRecipe = defineSlotRecipe({
         indicator: {
           minW: '24',
           h: 'fit',
-          // w: '8',
-          // h: '8',
-          // p: '5',
         },
       },
     },
@@ -183,21 +174,4 @@ export const badgeRecipe = defineSlotRecipe({
     size: 'md',
     variant: 'danger',
   },
-  // staticCss: [
-  //   {
-  //     size: ['sm', 'md', 'lg'],
-  //     standalone: ['true', 'false'],
-  //     dot: ['true', 'false'],
-  //     variant: [
-  //       'neutral',
-  //       'inverted',
-  //       'subtle',
-  //       'subtle-inverted',
-  //       'success',
-  //       'danger',
-  //       'warning',
-  //       'info',
-  //     ],
-  //   },
-  // ],
 });

package/src/recipes/box.ts

@@ -1,13 +1,7 @@
 import { defineRecipe } from '@pandacss/dev';
 
-const boxBase = {};
-
-const boxVariants = {};
-
 export const boxRecipe = defineRecipe({
   className: 'box',
   jsx: ['Box'],
-  base: boxBase,
-  variants: boxVariants,
-  defaultVariants: {},
+  base: {},
 });

package/src/recipes/breadcrumbs.ts

@@ -1,29 +1,46 @@
-import { defineRecipe } from '@pandacss/dev';
+import { defineSlotRecipe } from '@pandacss/dev';
 
-const BreadcrumbsBase = {
-  display: 'flex',
-  alignItems: 'center',
-  '& li': {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '& a': {
-    color: { base: 'gray.60', _dark: 'gray.60' },
-    _focusVisible: {
-      color: 'blue.50',
-    },
-  },
-  '& p': {
-    color: { base: 'gray.90', _dark: 'gray.10' },
-  },
-  '& span': {
-    mx: '6',
-    color: 'gray.20',
-  },
-};
-
-export const breadcrumbsRecipe = defineRecipe({
+export const breadcrumbsRecipe = defineSlotRecipe({
   className: 'breadcrumbs',
   jsx: ['Breadcrumbs'],
-  base: BreadcrumbsBase,
+  slots: ['wrapper', 'slash', 'linkSegment', 'currentSegment'],
+  base: {
+    wrapper: {
+      display: 'flex',
+      gap: '6',
+      alignItems: 'center',
+      fontFamily: 'mono',
+      fontSize: '14',
+      '& li': {
+        display: 'flex',
+        gap: '6',
+        alignItems: 'center',
+      },
+    },
+    slash: {
+      fontFamily: 'mono',
+      fontSize: '14',
+      color: 'text.placeholder',
+    },
+    linkSegment: {
+      fontFamily: 'mono',
+      fontSize: '14',
+      color: 'text.subtlest',
+      fontWeight: 'normal',
+      whiteSpace: 'nowrap',
+      _hover: {
+        color: 'link',
+      },
+      _focusVisible: {
+        color: 'blue.50',
+      },
+    },
+    currentSegment: {
+      fontFamily: 'mono',
+      fontSize: '14',
+      color: 'text',
+      fontWeight: 'bold',
+      whiteSpace: 'nowrap',
+    },
+  },
 });