@okshaun/components 1.0.2 → 2.0.0

package/package.json

@@ -1,25 +1,43 @@
 {
   "name": "@okshaun/components",
-  "version": "1.0.2",
-  "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": "biome lint src/",
-    "check": "biome check --write src/",
-    "doctor": "npx -y react-doctor@latest .",
+    "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": "biome format --write src/"
+    "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/",
@@ -56,29 +74,36 @@
     }
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "date-fns": "^4.1.0"
+    "@floating-ui/react": "^0.27.16"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
+    "@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",
+    "babel-loader": "^10.0.0",
     "gh-pages": "^6.2.0",
+    "playroom": "^0.44.0",
     "postcss": "^8.5.1",
-    "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",

package/src/recipes/avatar.ts

@@ -1,205 +1,205 @@
-import { defineSlotRecipe } from "@pandacss/dev";
+import { defineSlotRecipe } from '@pandacss/dev';
 
 export const avatarRecipe = defineSlotRecipe({
-  className: "avatar",
-  jsx: ["Avatar"],
-  slots: ["root", "image", "fallback", "presence", "status"],
+  className: 'avatar',
+  jsx: ['Avatar'],
+  slots: ['root', 'image', 'fallback', 'presence', 'status'],
   staticCss: [
     {
-      size: ["xs", "sm", "md", "lx", "xl", "2xl"],
-      shape: ["circle", "square", "hexagon"],
+      size: ['xs', 'sm', 'md', 'lx', 'xl', '2xl'],
+      shape: ['circle', 'square', 'hexagon'],
     },
   ],
   base: {
     root: {
-      display: "inline-flex",
-      position: "relative",
-      alignItems: "center",
-      justifyContent: "center",
-      verticalAlign: "middle",
+      display: 'inline-flex',
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle',
       flexShrink: 0,
-      color: "text",
-      bg: "bg.neutral",
-      userSelect: "none",
-      aspectRatio: "square",
+      color: 'text',
+      bg: 'bg.neutral',
+      userSelect: 'none',
+      aspectRatio: 'square',
     },
     image: {
-      w: "full",
-      h: "full",
-      objectFit: "cover",
-      overflow: "hidden",
+      w: 'full',
+      h: 'full',
+      objectFit: 'cover',
+      overflow: 'hidden',
     },
     fallback: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      w: "full",
-      h: "full",
-      fontFamily: "sans",
-      fontWeight: "medium",
-      textTransform: "uppercase",
-      color: "text.subtle",
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      w: 'full',
+      h: 'full',
+      fontFamily: 'sans',
+      fontWeight: 'medium',
+      textTransform: 'uppercase',
+      color: 'text.subtle',
     },
     presence: {
-      position: "absolute",
-      bottom: "0",
-      right: "0",
-      borderRadius: "999",
-      borderWidth: "2",
-      borderStyle: "solid",
-      borderColor: "bg",
-      zIndex: 1,
+      position: 'absolute',
+      bottom: '0',
+      right: '0',
+      borderRadius: '999',
+      borderWidth: '2',
+      borderStyle: 'solid',
+      borderColor: 'bg',
+      zIndex: 'raised',
     },
     status: {
-      position: "absolute",
-      top: "0",
-      right: "0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "999",
-      borderWidth: "2",
-      borderStyle: "solid",
-      borderColor: "bg",
-      zIndex: 1,
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '999',
+      borderWidth: '2',
+      borderStyle: 'solid',
+      borderColor: 'bg',
+      zIndex: 'raised',
     },
   },
   variants: {
     size: {
       xs: {
         root: {
-          w: "16",
-          h: "16",
+          w: '16',
+          h: '16',
         },
         fallback: {
-          fontSize: "8",
+          fontSize: '8',
         },
         presence: {
-          w: "6",
-          h: "6",
+          w: '6',
+          h: '6',
         },
         status: {
-          w: "8",
-          h: "8",
+          w: '8',
+          h: '8',
         },
       },
       sm: {
         root: {
-          w: "20",
-          h: "20",
+          w: '20',
+          h: '20',
         },
         fallback: {
-          fontSize: "10",
+          fontSize: '10',
         },
         presence: {
-          w: "8",
-          h: "8",
+          w: '8',
+          h: '8',
         },
         status: {
-          w: "10",
-          h: "10",
+          w: '10',
+          h: '10',
         },
       },
       md: {
         root: {
-          w: "24",
-          h: "24",
+          w: '24',
+          h: '24',
         },
         fallback: {
-          fontSize: "12",
+          fontSize: '12',
         },
         presence: {
-          w: "8",
-          h: "8",
+          w: '8',
+          h: '8',
         },
         status: {
-          w: "10",
-          h: "10",
+          w: '10',
+          h: '10',
         },
       },
       lg: {
         root: {
-          w: "32",
-          h: "32",
+          w: '32',
+          h: '32',
         },
         fallback: {
-          fontSize: "14",
+          fontSize: '14',
         },
         presence: {
-          w: "10",
-          h: "10",
+          w: '10',
+          h: '10',
         },
         status: {
-          w: "12",
-          h: "12",
+          w: '12',
+          h: '12',
         },
       },
       xl: {
         root: {
-          w: "48",
-          h: "48",
+          w: '48',
+          h: '48',
         },
         fallback: {
-          fontSize: "20",
+          fontSize: '20',
         },
         presence: {
-          w: "12",
-          h: "12",
+          w: '12',
+          h: '12',
         },
         status: {
-          w: "16",
-          h: "16",
+          w: '16',
+          h: '16',
         },
       },
-      "2xl": {
+      '2xl': {
         root: {
-          w: "64",
-          h: "64",
+          w: '64',
+          h: '64',
         },
         fallback: {
-          fontSize: "24",
+          fontSize: '24',
         },
         presence: {
-          w: "14",
-          h: "14",
+          w: '14',
+          h: '14',
         },
         status: {
-          w: "20",
-          h: "20",
+          w: '20',
+          h: '20',
         },
       },
     },
     shape: {
       circle: {
         root: {
-          borderRadius: "999",
+          borderRadius: '999',
         },
         image: {
-          borderRadius: "999",
+          borderRadius: '999',
         },
       },
       square: {
         root: {
-          borderRadius: "4",
+          borderRadius: '4',
         },
         image: {
-          borderRadius: "4",
+          borderRadius: '4',
         },
       },
       hexagon: {
         root: {
           clipPath:
-            "polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)",
+            'polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)',
         },
         image: {
           clipPath:
-            "polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)",
+            'polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%)',
         },
       },
     },
   },
   defaultVariants: {
-    size: "md",
-    shape: "circle",
+    size: 'md',
+    shape: 'circle',
   },
 });

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' },
         },
       },
     },
@@ -174,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',
+    },
+  },
 });