@okshaun/components 1.0.2 → 2.0.1

package/src/recipes/modal.ts

@@ -1,20 +1,17 @@
 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',
     inset: '0',
     bg: 'blanket',
-    zIndex: 1100,
+    zIndex: '1100',
     // Initial state matches animation start
     opacity: '0',
     // Animation handled via data-state
-    animation: `modalFadeIn ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
+    animation: 'modalFadeIn 150ms ease-out forwards',
     '&[data-state="closing"]': {
-      animation: `modalFadeOut ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
+      animation: 'modalFadeOut 150ms ease-out forwards',
     },
   },
   container: {
@@ -23,19 +20,20 @@ const modalBase = {
     left: '50%',
     display: 'flex',
     flexDirection: 'column',
-    maxHeight: '90vh',
+    width: 'full',
+    maxHeight: '[95vh]',
     bg: 'surface.overlay',
     borderRadius: '12',
     boxShadow: 'overlay',
     outline: 'none',
-    zIndex: 1101,
+    zIndex: '1101',
     // Initial state matches animation start
     opacity: '0',
-    transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
+    transform: '[translate(-50%, -50%) scale(0.95) translateY(-10px)]',
     // Animation handled via data-state
-    animation: `modalScaleIn ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
+    animation: 'modalScaleIn 150ms ease-out forwards',
     '&[data-state="closing"]': {
-      animation: `modalScaleOut ${MODAL_ANIMATION_DURATION}ms ease-out forwards`,
+      animation: 'modalScaleOut 150ms ease-out forwards',
     },
   },
   header: {
@@ -57,11 +55,12 @@ const modalBase = {
   },
   body: {
     flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
     overflowY: 'auto',
-    gap: '16',
+    gap: '12',
     px: '20',
-    py: '16',
-    color: 'text',
+    py: '20',
   },
   footer: {
     display: 'flex',
@@ -78,26 +77,56 @@ const modalVariants = {
   size: {
     sm: {
       container: {
-        maxWidth: '400',
-      },
-      title: {
-        fontSize: 'md',
+        maxWidth: 'md',
       },
     },
     md: {
       container: {
-        maxWidth: '560',
-      },
-      title: {
-        fontSize: 'lg',
+        maxWidth: 'xl',
       },
     },
     lg: {
       container: {
-        maxWidth: '720',
+        maxWidth: '3xl',
       },
-      title: {
-        fontSize: 'xl',
+    },
+    xl: {
+      container: {
+        maxWidth: '5xl',
+      },
+    },
+    full: {
+      container: {
+        maxWidth: '[95vw]',
+      },
+    },
+    mobile: {
+      container: {
+        width: 'full',
+        height: 'full',
+        maxWidth: '[100vw]',
+        maxHeight: '[100vh]',
+        borderRadius: '0',
+      },
+    },
+  },
+  variant: {
+    default: {
+      container: {
+        xsDown: {
+          width: 'full',
+          height: 'full',
+          maxWidth: '[100vw]',
+          maxHeight: '[100vh]',
+          borderRadius: '0',
+        },
+      },
+    },
+    confirmation: {
+      container: {
+        height: 'fit',
+        width: 'md',
+        maxWidth: '[90vw]',
       },
     },
   },
@@ -118,6 +147,7 @@ export const modalRecipe = defineSlotRecipe({
   base: modalBase,
   variants: modalVariants,
   defaultVariants: {
+    variant: 'default',
     size: 'md',
   },
 });

package/src/recipes/radio.ts

@@ -3,69 +3,78 @@ import { defineSlotRecipe } from '@pandacss/dev';
 export const radioRecipe = defineSlotRecipe({
   className: 'radio',
   jsx: ['Radio'],
-  slots: ['container', 'input', 'indicator'],
+  slots: ['container', 'input', 'indicator', 'radioBg'],
   base: {
     container: {
       position: 'relative',
+      w: '24',
+      h: '24',
       display: 'inline-grid',
+      placeContent: 'center',
       gridTemplateColumns: 'auto 1fr',
-      gap: 4,
       alignItems: 'start',
       cursor: 'pointer',
       userSelect: 'none',
     },
     input: {
       position: 'absolute',
-      opacity: 0,
+      opacity: '0',
       width: 'full',
       height: 'full',
       margin: '0',
       padding: '0',
-      zIndex: 1,
+      zIndex: 'raised',
       cursor: 'inherit',
       "& ~ [name='radio']": {
         display: 'inline-grid',
+        zIndex: 'zIndex.3',
       },
       _checked: {
         "& ~ [name='radio-checked']": {
           display: 'inline-grid',
-          fill: { base: 'gray.90', _dark: 'gray.10' },
+          fill: 'icon',
+          zIndex: 'zIndex.2',
         },
         "& ~ [name='radio']": {
           display: 'none',
         },
       },
-      _disabled: {
-        '& ~ svg': {
-          opacity: 0.4,
-          pointerEvents: 'none',
-          cursor: 'none',
-        },
-        display: 'inline-grid',
-      },
       _error: {
         display: 'inline-grid',
-        '& ~ svg': {
+        '& ~ svg:not([name="circle"])': {
           fill: 'red.50',
+          zIndex: 'zIndex.3',
         },
       },
       _focusVisible: {
         "& ~ [name='radio-focus']": {
           display: 'inline-grid',
           position: 'absolute',
-          fill: { base: 'gray.90', _dark: 'gray.1' },
+          fill: 'border.focused',
+          zIndex: 'zIndex.2',
         },
       },
     },
     indicator: {
-      placeContent: 'center',
       display: 'none',
-      width: 24,
-      height: 24,
+      position: 'absolute',
+      inset: '0',
+      width: '24',
+      height: '24',
+      zIndex: 'zIndex.3',
       "&:is([name='radio'])": {
-        display: 'inline-grid',
-        fill: 'gray.20',
+        fill: 'icon.subtlest',
+        zIndex: 'zIndex.3',
       },
     },
+    radioBg: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '24',
+      height: '24',
+      fill: 'surface',
+      zIndex: 'base',
+    },
   },
 });

package/src/recipes/radioInput.ts

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const radioInputBase = {
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: '4',
+  '&[class*="-label"]': {
+    fontSize: '{sizes.16}',
+    lineHeight: 'default',
+  },
+  _disabled: {
+    opacity: '40%',
+    cursor: 'not-allowed',
+  },
+  _groupDisabled: {
+    opacity: 1, // let FormField handle disabled state opacity
+  },
+};
+
+export const radioInputRecipe = defineRecipe({
+  className: 'radioInput',
+  jsx: ['RadioInput', 'Radioinput'],
+  base: radioInputBase,
+  variants: {},
+});

package/src/recipes/recipes-regular.ts

@@ -0,0 +1,14 @@
+export { boxRecipe } from './box';
+export { cardRecipe } from './card';
+export { checkboxInputRecipe } from './checkboxInput';
+export { codeRecipe, preRecipe } from './code';
+export { dividerRecipe } from './divider';
+export { highlightTextRecipe } from './highlightText';
+export { iconRecipe } from './icon';
+export { listRecipe } from './list';
+export { radioInputRecipe } from './radioInput';
+export { tagRecipe } from './tag';
+export { headingRecipe, labelRecipe, linkRecipe, textRecipe } from './text';
+export { textareaRecipe } from './textarea';
+export { themeSwitcherRecipe } from './themeSwitcher';
+export { toggleInputRecipe } from './toggleInput';

package/src/recipes/recipes-slot.ts

@@ -0,0 +1,19 @@
+export { avatarRecipe } from './avatar';
+export { badgeRecipe } from './badge';
+export { breadcrumbsRecipe } from './breadcrumbs';
+export { buttonRecipe, iconButtonRecipe } from './button';
+export { checkboxRecipe } from './checkbox';
+export { chipRecipe } from './chip';
+export { datePickerRecipe } from './datePicker';
+export { formFieldRecipe } from './formField';
+export { listItemRecipe } from './listItem';
+export { listItemGroupRecipe } from './listItemGroup';
+export { menuRecipe } from './menu';
+export { modalRecipe } from './modal';
+export { radioRecipe } from './radio';
+export { selectRecipe } from './select';
+export { spinnerRecipe } from './spinner';
+export { textInputRecipe } from './textInput';
+export { timePickerRecipe } from './timePicker';
+export { toggleRecipe } from './toggle';
+export { tooltipRecipe } from './tooltip';

package/src/recipes/select.ts

@@ -35,7 +35,7 @@ const selectBase = {
       borderColor: 'border.disabled',
       color: 'text.disabled',
       cursor: 'not-allowed',
-      opacity: 0.5,
+      opacity: '[0.5]',
     },
     _error: {
       bg: 'bg.danger',

package/src/recipes/spinner.ts

@@ -1,49 +1,75 @@
-import { defineRecipe } from '@pandacss/dev';
+import { defineSlotRecipe } from '@pandacss/dev';
 
 const spinnerBase = {
-  aspectRatio: 'square',
-  rounded: '100',
-  borderWidth: '3',
-  borderStyle: 'solid',
-  borderColor: 'transparent',
-  borderTopColor: 'icon',
-  borderBottomColor: 'icon',
-  animation: 'spin',
-  isolation: 'isolate',
+  spinnerDiv: {
+    aspectRatio: 'square',
+    rounded: '100',
+    borderWidth: '3',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderTopColor: 'icon',
+    borderBottomColor: 'icon',
+    animation: 'spin',
+    isolation: 'isolate',
+  },
 };
 
 const spinnerVariants = {
   size: {
     xs: {
-      height: '16',
-      minHeight: '16',
-      borderWidth: '2',
+      spinnerDiv: {
+        height: '16',
+        minHeight: '16',
+        borderWidth: '2',
+      },
     },
     sm: {
-      height: '20',
-      minHeight: '20',
-      borderWidth: '2',
+      spinnerDiv: {
+        height: '20',
+        minHeight: '20',
+        borderWidth: '2',
+      },
     },
     md: {
-      height: '24',
-      minHeight: '24',
+      spinnerDiv: {
+        height: '24',
+        minHeight: '24',
+      },
     },
     lg: {
-      height: '32',
-      minHeight: '32',
+      spinnerDiv: {
+        height: '32',
+        minHeight: '32',
+      },
     },
   },
   inverse: {
     true: {
-      borderTopColor: 'icon.inverse',
-      borderBottomColor: 'icon.inverse',
+      spinnerDiv: {
+        borderTopColor: 'icon.inverse',
+        borderBottomColor: 'icon.inverse',
+      },
+    },
+  },
+  centered: {
+    true: {
+      container: {
+        position: 'absolute',
+        inset: '0',
+        display: 'grid',
+        placeContent: 'center',
+        width: 'full',
+        height: 'full',
+        zIndex: '100',
+      },
     },
   },
 };
 
-export const spinnerRecipe = defineRecipe({
+export const spinnerRecipe = defineSlotRecipe({
   className: 'spinner',
   jsx: ['Spinner'],
+  slots: ['container', 'spinnerDiv'],
   base: spinnerBase,
   variants: spinnerVariants,
   defaultVariants: {