@okshaun/components 0.5.8 → 1.0.1

package/dist/types/preset.d.ts

@@ -0,0 +1,19 @@
+import { Preset } from '@pandacss/types';
+
+export declare const okshaunPreset: Preset;
+
+export { }
+
+
+
+declare module '@pandacss/dev' {
+  export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): Panda.RecipeConfig
+  export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): Panda.SlotRecipeConfig
+  export function defineStyles(definition: SystemStyleObject): SystemStyleObject
+  export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject
+  export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles
+  export function defineAnimationStyles(definition: CompositionStyles['animationStyles']): Panda.AnimationStyles
+  export function defineLayerStyles(definition: CompositionStyles['layerStyles']): Panda.LayerStyles
+  export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): Panda.PatternConfig
+  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
+}

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "@okshaun/components",
-  "private": false,
-  "version": "0.5.8",
+  "version": "1.0.1",
   "description": "A comprehensive React component library with Panda CSS theming",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "npm run panda:watch & vite",
-    "build": "npm run panda && SKIP_OPEN=true npm run generate-sprite && vite build && SKIP_OPEN=true npm run generate-sprite:dist && npm run ship",
-    "generate-sprite:dist": "node src/utils/generate-sprite-dist.js",
-    "ship": "panda ship --outfile dist/panda.buildinfo.json",
-    "panda": "panda codegen",
-    "panda:watch": "panda codegen --watch",
-    "preview": "vite preview",
+    "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 .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "preview": "vite preview",
     "generate-sprite": "node src/utils/generate-sprite.js",
-    "prepublishOnly": "npm run build"
+    "storybook": "PANDA_STATIC=true storybook dev -p 6006",
+    "storybook:build": "PANDA_STATIC=true storybook build",
+    "panda-mcp": "npx panda mcp",
+    "prepublishOnly": "npm run build",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'"
   },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
+    "./dist/",
+    "./src/styles/*",
+    "./src/recipes/*",
+    "./src/tokens/*",
+    "./src/utils/*.ts",
+    "README.md"
   ],
   "keywords": [
     "react",
@@ -38,8 +39,8 @@
     "@fontsource-variable/piazzolla": "^5.1.1",
     "@fontsource/ibm-plex-mono": "^5.1.0",
     "@fontsource/ibm-plex-sans": "^5.1.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@fontsource-variable/piazzolla": {
@@ -61,22 +62,20 @@
     "@fontsource-variable/piazzolla": "^5.2.8",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/ibm-plex-sans": "^5.2.8",
-    "@pandacss/dev": "^1.4.3",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-onboarding": "^8.5.2",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
-    "@types/node": "^22.7.7",
+    "@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",
+    "@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-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
@@ -85,13 +84,14 @@
     "globals": "^15.14.0",
     "postcss": "^8.5.1",
     "prettier": "^3.3.3",
-    "storybook": "^8.5.2",
+    "storybook": "^8.6.15",
     "svg-sprite": "^2.0.4",
     "svgo": "^3.0.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.18.2",
+    "typescript-eslint": "^8.54.0",
     "vite": "^6.0.5",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
   },
   "eslintConfig": {
     "extends": [
@@ -100,24 +100,26 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./preset": {
-      "types": "./dist/preset.d.ts",
+      "types": "./dist/types/preset.d.ts",
       "import": "./dist/preset.js",
       "default": "./dist/preset.js"
     },
     "./sprite.svg": "./dist/sprite.svg",
-    "./panda.buildinfo.json": "./dist/panda.buildinfo.json"
+    "./styles.css": "./dist/styles.css"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shaunrfox/okshaun-components.git"
   },
+  "private": false,
+  "author": "Shaun Fox",
   "bugs": {
     "url": "https://github.com/shaunrfox/okshaun-components/issues"
   },
-  "homepage": "https://github.com/shaunrfox/okshaun-components#readme"
+  "homepage": "https://shaunfox.com/okshaun-components"
 }

package/src/recipes/avatar.ts

@@ -0,0 +1,205 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const avatarRecipe = defineSlotRecipe({
+  className: 'avatar',
+  jsx: ['Avatar'],
+  slots: ['root', 'image', 'fallback', 'presence', 'status'],
+  staticCss: [
+    {
+      size: ['xs', 'sm', 'md', 'lx', 'xl', '2xl'],
+      shape: ['circle', 'square', 'hexagon'],
+    },
+  ],
+  base: {
+    root: {
+      display: 'inline-flex',
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle',
+      flexShrink: 0,
+      color: 'text',
+      bg: 'bg.neutral',
+      userSelect: 'none',
+      aspectRatio: 'square',
+    },
+    image: {
+      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',
+    },
+    presence: {
+      position: 'absolute',
+      bottom: '0',
+      right: '0',
+      borderRadius: 'full',
+      borderWidth: '2',
+      borderStyle: 'solid',
+      borderColor: 'bg',
+      zIndex: 1,
+    },
+    status: {
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'full',
+      borderWidth: '2',
+      borderStyle: 'solid',
+      borderColor: 'bg',
+      zIndex: 1,
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          w: '16',
+          h: '16',
+        },
+        fallback: {
+          fontSize: '8',
+        },
+        presence: {
+          w: '6',
+          h: '6',
+        },
+        status: {
+          w: '8',
+          h: '8',
+        },
+      },
+      sm: {
+        root: {
+          w: '20',
+          h: '20',
+        },
+        fallback: {
+          fontSize: '10',
+        },
+        presence: {
+          w: '8',
+          h: '8',
+        },
+        status: {
+          w: '10',
+          h: '10',
+        },
+      },
+      md: {
+        root: {
+          w: '24',
+          h: '24',
+        },
+        fallback: {
+          fontSize: '12',
+        },
+        presence: {
+          w: '8',
+          h: '8',
+        },
+        status: {
+          w: '10',
+          h: '10',
+        },
+      },
+      lg: {
+        root: {
+          w: '32',
+          h: '32',
+        },
+        fallback: {
+          fontSize: '14',
+        },
+        presence: {
+          w: '10',
+          h: '10',
+        },
+        status: {
+          w: '12',
+          h: '12',
+        },
+      },
+      xl: {
+        root: {
+          w: '48',
+          h: '48',
+        },
+        fallback: {
+          fontSize: '20',
+        },
+        presence: {
+          w: '12',
+          h: '12',
+        },
+        status: {
+          w: '16',
+          h: '16',
+        },
+      },
+      '2xl': {
+        root: {
+          w: '64',
+          h: '64',
+        },
+        fallback: {
+          fontSize: '24',
+        },
+        presence: {
+          w: '14',
+          h: '14',
+        },
+        status: {
+          w: '20',
+          h: '20',
+        },
+      },
+    },
+    shape: {
+      circle: {
+        root: {
+          borderRadius: '999',
+        },
+        image: {
+          borderRadius: '999',
+        },
+      },
+      square: {
+        root: {
+          borderRadius: '4',
+        },
+        image: {
+          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%)',
+        },
+        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%)',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    shape: 'circle',
+  },
+});

package/src/recipes/badge.ts

@@ -0,0 +1,203 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const badgeRecipe = defineSlotRecipe({
+  className: 'badge',
+  jsx: ['Badge'],
+  slots: ['root', 'indicator'],
+  base: {
+    root: {
+      display: 'inline-flex',
+      position: 'relative',
+      verticalAlign: 'middle',
+    },
+    indicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '999',
+      fontWeight: 'medium',
+      fontFamily: 'sans',
+      lineHeight: '1',
+      whiteSpace: 'nowrap',
+      userSelect: 'none',
+      zIndex: '1',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        indicator: {
+          h: '6',
+          fontSize: '10',
+          p: '3',
+        },
+      },
+      md: {
+        indicator: {
+          h: '8',
+          fontSize: '12',
+          p: '4',
+        },
+      },
+      lg: {
+        indicator: {
+          h: '10',
+          fontSize: '14',
+          p: '5',
+        },
+      },
+    },
+    // When standalone (no children), don't use absolute positioning
+    standalone: {
+      true: {
+        root: {
+          display: 'inline-flex',
+        },
+        indicator: {
+          position: 'static',
+          transform: 'none',
+        },
+      },
+      false: {
+        root: {
+          display: 'inline-flex',
+          position: 'relative',
+          verticalAlign: 'middle',
+        },
+        indicator: {
+          position: 'absolute',
+          top: '0',
+          right: '0',
+          transform: 'translate(50%, -50%)',
+        },
+      },
+    },
+    // Dot mode: smaller, no text
+    dot: {
+      true: {
+        indicator: {
+          // Dot mode styles handled by base + size variants
+        },
+      },
+      false: {
+        indicator: {
+          // Count mode - compound variants handle sizing
+        },
+      },
+    },
+    // variant variants for color schemes
+    variant: {
+      neutral: {
+        indicator: {
+          bg: { base: 'neutral.30', _dark: 'darkNeutral.40' },
+          color: 'text',
+        },
+      },
+      subtle: {
+        indicator: {
+          bg: 'bg.neutral',
+          color: 'text',
+        },
+      },
+      inverted: {
+        indicator: {
+          bg: 'bg.neutral.inverse.bold',
+          color: 'text.inverse',
+        },
+      },
+      'subtle-inverted': {
+        indicator: {
+          bg: 'bg.neutral.inverse.subtle',
+          color: 'text',
+        },
+      },
+      success: {
+        indicator: {
+          bg: 'bg.success.bold',
+          color: 'text.inverse',
+        },
+      },
+      danger: {
+        indicator: {
+          bg: 'bg.danger.bold',
+          color: 'text.inverse',
+        },
+      },
+      warning: {
+        indicator: {
+          bg: 'bg.warning.bold',
+          color: 'text.warning.inverse',
+        },
+      },
+      info: {
+        indicator: {
+          bg: 'bg.info.bold',
+          color: 'text.inverse',
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    // Count mode sizes (smaller than count mode)
+    {
+      dot: false,
+      size: 'sm',
+      css: {
+        indicator: {
+          minW: '16',
+          h: 'fit',
+          // w: '4',
+          // h: '4',
+          // p: '3',
+        },
+      },
+    },
+    {
+      dot: false,
+      size: 'md',
+      css: {
+        indicator: {
+          minW: '20',
+          h: 'fit',
+          // w: '6',
+          // h: '6',
+          // p: '4',
+        },
+      },
+    },
+    {
+      dot: false,
+      size: 'lg',
+      css: {
+        indicator: {
+          minW: '24',
+          h: 'fit',
+          // w: '8',
+          // h: '8',
+          // p: '5',
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    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

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

package/src/recipes/breadcrumbs.ts

@@ -0,0 +1,29 @@
+import { defineRecipe } 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({
+  className: 'breadcrumbs',
+  jsx: ['Breadcrumbs'],
+  base: BreadcrumbsBase,
+});