@okshaun/components 1.0.1 → 1.0.2

package/dist/preset.js

@@ -1,5 +1,5 @@
 import "@pandacss/dev";
-import { o } from "./preset-BzrKiUEH.js";
+import { o } from "./preset-DCCViEDs.js";
 export {
   o as okshaunPreset
 };

package/dist/sprite.symbol.html

@@ -3526,7 +3526,7 @@ embedded above. They may be styled via CSS.
 
   <footer>
     <p>
-      Generated <span class="date">Mon, 02 Feb 2026 12:53:02 GMT</span> using
+      Generated <span class="date">Fri, 20 Feb 2026 03:39:07 GMT</span> using
       <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.
     </p>
   </footer>

package/dist/styles/recipes/avatar.css

@@ -39,7 +39,7 @@
 }
 
     .oks-avatar__presence,.oks-avatar__status {
-      border-radius: full;
+      border-radius: var(--oks-radii-999);
       border-width: var(--oks-border-widths-2);
       border-style: solid;
       border-color: bg;

package/dist/styles/recipes/divider.css

@@ -2,15 +2,12 @@
   @layer _base {
     .oks-divider {
       --divider-weight: var(--oks-sizes-1);
+      border-style: solid;
       border-color: var(--oks-colors-current);
-      color: var(--oks-colors-gray-20);
+      color: border.default;
       min-width: var(--oks-sizes-1);
       min-height: var(--oks-sizes-1);
 }
-
-    .dark .oks-divider,.oks-divider:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-divider {
-      color: var(--oks-colors-gray-80);
-}
 }
 
   .oks-divider--direction_horizontal {

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
 import { Component } from 'react';
 import { ComponentPropsWithRef } from 'react';
@@ -106,7 +107,7 @@ export declare type AutocompleteProps = MenuVariantProps & {
     /** Callback when input value changes */
     onChange: (value: string) => void;
     /** Size of the input */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: "sm" | "md" | "lg" | "xl";
     /** Available options to filter and display */
     options: AutocompleteOption[];
     /** Callback when an option is selected */
@@ -128,7 +129,7 @@ export declare type AutocompleteProps = MenuVariantProps & {
     /** Message to show when no options match */
     noResultsMessage?: string;
     /** Props to pass to the TextInput */
-    inputProps?: Omit<TextInputProps, 'name' | 'value' | 'onChange' | 'disabled' | 'error' | 'id'>;
+    inputProps?: Omit<TextInputProps, "name" | "value" | "onChange" | "disabled" | "error" | "id">;
 };
 
 /**
@@ -194,12 +195,9 @@ declare type AvatarVariantProps = {
  * - Without count prop: shows as dot
  * - With count prop: shows the number (or "99+" if exceeds overflowCount)
  */
-export declare const Badge: {
-    (props: BadgeProps): JSX.Element | null;
-    displayName: string;
-};
+export declare const Badge: (props: BadgeProps) => JSX.Element | null;
 
-export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
+export declare type BadgeProps = Omit<BoxProps, keyof BadgeVariantProps> & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
     /** Number to show in badge. If provided, switches to count mode. */
     count?: number;
     /** Show badge when count is zero. Default: false */
@@ -208,10 +206,8 @@ export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone'
     overflowCount?: number;
     /** Color scheme of the badge. Default: 'danger' */
     variant?: BadgeVariant;
-    /** Additional class name */
-    className?: string;
     /** Content to wrap with the badge */
-    children?: React_2.ReactNode;
+    children?: React.ReactNode;
 };
 
 export declare type BadgeVariant = 'neutral' | 'inverted' | 'subtle' | 'subtle-inverted' | 'success' | 'danger' | 'warning' | 'info';
@@ -369,7 +365,7 @@ export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
  * @example
  * const handleChange: CheckboxChangeHandler = (e) => setChecked(e.target.checked);
  */
-export declare type CheckboxChangeEvent = React.ChangeEvent<HTMLInputElement>;
+export declare type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
 
 /**
  * Helper type for checkbox change handler functions
@@ -1254,10 +1250,7 @@ declare type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit
 
 export declare const Divider: (props: DividerProps) => JSX.Element;
 
-export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps & {
-    direction?: string;
-    weight?: string;
-};
+export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps;
 
 declare interface DividerVariant {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okshaun/components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A comprehensive React component library with Panda CSS theming",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,14 +10,16 @@
     "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 .",
+    "lint": "biome lint src/",
+    "check": "biome check --write src/",
+    "doctor": "npx -y react-doctor@latest .",
     "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",
     "prepublishOnly": "npm run build",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+    "format": "biome format --write src/"
   },
   "files": [
     "./dist/",
@@ -58,7 +60,7 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@biomejs/biome": "^1.9.4",
     "@fontsource-variable/piazzolla": "^5.2.8",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/ibm-plex-sans": "^5.2.8",
@@ -74,30 +76,16 @@
     "@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",
     "gh-pages": "^6.2.0",
-    "globals": "^15.14.0",
     "postcss": "^8.5.1",
-    "prettier": "^3.3.3",
     "storybook": "^8.6.15",
     "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

@@ -1,66 +1,66 @@
-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: 'full',
-      borderWidth: '2',
-      borderStyle: 'solid',
-      borderColor: 'bg',
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      borderRadius: "999",
+      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',
+      position: "absolute",
+      top: "0",
+      right: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "999",
+      borderWidth: "2",
+      borderStyle: "solid",
+      borderColor: "bg",
       zIndex: 1,
     },
   },
@@ -68,138 +68,138 @@ export const avatarRecipe = defineSlotRecipe({
     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

@@ -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',
         },
       },
     },

package/src/recipes/divider.ts

@@ -2,7 +2,8 @@ import { defineRecipe } from '@pandacss/dev';
 
 const dividerBase = {
   '--divider-weight': 'sizes.1',
-  color: { base: 'gray.20', _dark: 'gray.80' },
+  borderStyle: 'solid',
+  color: 'border.default',
   borderColor: 'current',
   minWidth: '1',
   minHeight: '1',

package/src/recipes/index.ts

@@ -24,5 +24,5 @@ export { selectRecipe } from './select';
 export { chipRecipe } from './chip';
 export { badgeRecipe } from './badge';
 export { avatarRecipe } from './avatar';
-export { modalRecipe } from './modal';
+export { modalRecipe, MODAL_ANIMATION_DURATION } from './modal';
 export { formFieldRecipe } from './formField';

package/src/recipes/modal.ts

@@ -1,5 +1,8 @@
 import { defineSlotRecipe } from '@pandacss/dev';
 
+/** Shared animation duration (ms) — used in both CSS animations and JS unmount timeout */
+export const MODAL_ANIMATION_DURATION = 150;
+
 const modalBase = {
   overlay: {
     position: 'fixed',
@@ -9,9 +12,9 @@ const modalBase = {
     // Initial state matches animation start
     opacity: '0',
     // Animation handled via data-state
-    animation: 'modalFadeIn 150ms ease-out forwards',
+    animation: `modalFadeIn ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
     '&[data-state="closing"]': {
-      animation: 'modalFadeOut 150ms ease-out forwards',
+      animation: `modalFadeOut ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
     },
   },
   container: {
@@ -30,9 +33,9 @@ const modalBase = {
     opacity: '0',
     transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
     // Animation handled via data-state
-    animation: 'modalScaleIn 150ms ease-out forwards',
+    animation: `modalScaleIn ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
     '&[data-state="closing"]': {
-      animation: 'modalScaleOut 150ms ease-out forwards',
+      animation: `modalScaleOut ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
     },
   },
   header: {

package/src/recipes/tooltip.ts

@@ -86,7 +86,7 @@ const tooltipVariants = {
     right: {
       tooltipContent: {
         top: '50%',
-        left: `calc(100% - 0.75rem)`,
+        left: 'calc(100% - 0.75rem)',
         transform: 'translate(10%, -50%)',
         _after: {
           top: '50%',
@@ -137,7 +137,7 @@ const tooltipVariants = {
     'right-start': {
       tooltipContent: {
         top: '0',
-        left: `calc(100% - 0.75rem)`,
+        left: 'calc(100% - 0.75rem)',
         transform: 'translate(10%, 0%)',
         _after: {
           top: '8',
@@ -188,7 +188,7 @@ const tooltipVariants = {
     'right-end': {
       tooltipContent: {
         bottom: '0',
-        left: `calc(100% - 0.75rem)`,
+        left: 'calc(100% - 0.75rem)',
         transform: 'translate(10%, -0%)',
         _after: {
           bottom: '8',

package/src/styles/primitives/radii.ts

@@ -9,6 +9,6 @@ export const radii = defineTokens.radii({
   '4': { value: '{sizes.4}' },
   '8': { value: '{sizes.8}' },
   '16': { value: '{sizes.16}' },
-  '100': { value: utilitySizes['full'].value },
+  '100': { value: utilitySizes.full.value },
   '999': { value: '999px' },
 });

package/src/styles/utilities/textStyles.ts

@@ -1,4 +1,4 @@
-import { defineTextStyles, defineStyles } from '@pandacss/dev';
+import { defineStyles, defineTextStyles } from '@pandacss/dev';
 
 const baseHeadingStyles = defineStyles({
   value: {

package/src/utils/splitProps.ts

@@ -1,5 +1,5 @@
-import { splitCssProps } from '@styled-system/jsx';
 import { css, cx } from '@styled-system/css';
+import { splitCssProps } from '@styled-system/jsx';
 
 export const splitProps = (
   props: Record<string, unknown>,