@okshaun/components 1.0.0 → 1.0.2

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/conditions.ts

@@ -2,7 +2,7 @@ export const conditions = {
   hover: '&:is(:hover, [data-hover=true])',
   focus: '&:is(:focus, [data-focus=true])',
   focusWithin: '&:focus-within',
-  focusVisible: '&:is(:focus-visible, [data-focus-visible]=true)',
+  focusVisible: '&:is(:focus-visible, [data-focus-visible=true])',
   disabled:
     '&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])',
   deleted: '&:is(:deleted, [deleted], [data-deleted=true])',

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>,