@okshaun/components 0.5.8 → 1.0.1

package/src/recipes/chip.ts

@@ -0,0 +1,189 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const chipBase = {
+  container: {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    appearance: 'none',
+    width: 'fit',
+    borderRadius: '999',
+    fontFamily: 'sans',
+    lineHeight: 'default',
+    fontWeight: 'medium',
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    transitionDuration: 'fast',
+    transitionProperty: 'background, color',
+    transitionTimingFunction: 'default',
+    userSelect: 'none',
+    border: 'none',
+    outlineWidth: 2,
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    bg: 'bg.neutral',
+    color: 'text',
+    icon: {
+      fill: 'icon.decorative',
+      transitionDuration: 'fast',
+      transitionProperty: 'fill',
+      transitionTimingFunction: 'default',
+    },
+    _hover: {
+      bg: 'bg.neutral.hovered',
+      icon: { fill: 'icon.decorative.hovered' },
+    },
+    _active: {
+      bg: 'bg.neutral.pressed',
+      icon: { fill: 'icon.decorative.hovered' },
+    },
+    _focusVisible: {
+      outlineColor: 'border.focused',
+    },
+    _loading: {
+      cursor: 'wait',
+      animation: 'pulse',
+    },
+    _deleted: {
+      textDecoration: 'line-through',
+      cursor: 'not-allowed',
+      opacity: 0.6,
+    },
+    _disabled: {
+      cursor: 'not-allowed',
+      bg: 'bg.disabled',
+      color: 'text.disabled',
+      borderColor: 'border.disabled',
+      icon: { fill: 'icon.disabled' },
+      _hover: {
+        bg: 'bg.disabled',
+        color: 'text.disabled',
+        borderColor: 'border.disabled',
+        icon: { fill: 'icon.disabled' },
+      },
+    },
+    _selected: {
+      bg: 'bg.brand.boldest',
+      color: 'text.inverse',
+      icon: { fill: 'icon.decorative.inverse' },
+      _hover: {
+        bg: 'bg.brand.boldest.hovered',
+        icon: { fill: 'icon.inverse' },
+      },
+      _active: {
+        bg: 'bg.brand.boldest.pressed',
+        icon: { fill: 'icon.inverse' },
+      },
+    },
+  },
+  icon: {
+    aspectRatio: 'square',
+    transitionDuration: 'fast',
+    transitionProperty: 'fill',
+    transitionTimingFunction: 'default',
+  },
+};
+
+export const chipRecipe = defineSlotRecipe({
+  className: 'chip',
+  jsx: ['Chip'],
+  slots: ['container', 'icon'],
+  base: chipBase,
+  variants: {
+    size: {
+      md: {
+        container: {
+          gap: '4',
+          h: '24',
+          px: '8',
+          py: '1',
+          fontSize: '14',
+        },
+        icon: {
+          w: '20',
+          h: '20',
+        },
+      },
+      sm: {
+        container: {
+          gap: '2',
+          h: '20',
+          px: '6',
+          py: '0',
+          fontSize: '14',
+        },
+        icon: {
+          w: '20',
+          h: '20',
+        },
+      },
+      lg: {
+        container: {
+          gap: '4',
+          h: '32',
+          px: '10',
+          py: '4',
+          fontSize: '16',
+        },
+        icon: {
+          w: '24',
+          h: '24',
+        },
+      },
+    },
+    before: {
+      true: { container: {} },
+    },
+    after: {
+      true: { container: {} },
+    },
+  },
+  compoundVariants: [
+    {
+      size: 'md',
+      before: true,
+      css: {
+        container: { ps: '2' },
+      },
+    },
+    {
+      size: 'md',
+      after: true,
+      css: {
+        container: { pe: '2' },
+      },
+    },
+    {
+      size: 'sm',
+      before: true,
+      css: {
+        container: { ps: '2' },
+      },
+    },
+    {
+      size: 'sm',
+      after: true,
+      css: {
+        container: { pe: '2' },
+      },
+    },
+    {
+      size: 'lg',
+      before: true,
+      css: {
+        container: { ps: '4' },
+      },
+    },
+    {
+      size: 'lg',
+      after: true,
+      css: {
+        container: { pe: '4' },
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/code.ts

@@ -0,0 +1,35 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const codeBase = {
+  bg: 'gray.80',
+  position: 'relative',
+  overflow: 'auto',
+  p: '4',
+  whiteSpace: 'pre',
+  fontSize: '14',
+};
+
+const preBase = {
+  borderRadius: '8',
+  overflow: 'hidden',
+  borderWidth: '0',
+  borderColor: 'gray.60',
+  bg: 'gray.80',
+  color: 'gray.10',
+  px: '16',
+  py: '8',
+  my: '8',
+  whiteSpace: 'pre',
+};
+
+export const codeRecipe = defineRecipe({
+  className: 'code',
+  jsx: ['Code'],
+  base: codeBase,
+});
+
+export const preRecipe = defineRecipe({
+  className: 'pre',
+  jsx: ['Pre'],
+  base: preBase,
+});

package/src/recipes/divider.ts

@@ -0,0 +1,41 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const dividerBase = {
+  '--divider-weight': 'sizes.1',
+  color: { base: 'gray.20', _dark: 'gray.80' },
+  borderColor: 'current',
+  minWidth: '1',
+  minHeight: '1',
+};
+
+const dividerVariants = {
+  direction: {
+    horizontal: {
+      width: 'stretch',
+      borderTopStyle: 'solid',
+      borderTopWidth: 'var(--divider-weight)',
+    },
+    vertical: {
+      height: 'stretch',
+      borderLeftStyle: 'solid',
+      borderLeftWidth: 'var(--divider-weight)',
+    },
+  },
+  weight: {
+    thin: { '--divider-weight': 'sizes.1' },
+    medium: { '--divider-weight': 'sizes.2' },
+    thick: { '--divider-weight': 'sizes.4' },
+    thicker: { '--divider-weight': 'sizes.6' },
+  },
+};
+
+export const dividerRecipe = defineRecipe({
+  className: 'divider',
+  jsx: ['Divider'],
+  base: dividerBase,
+  variants: dividerVariants,
+  defaultVariants: {
+    direction: 'horizontal',
+    weight: 'thin',
+  },
+});

package/src/recipes/formField.ts

@@ -0,0 +1,60 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const formFieldBase = {
+  formFieldContainer: {
+    _disabled: {
+      // opacity: '0.4',
+      pointerEvents: 'none',
+      labelWrapper: {
+        '& p': {
+          color: 'text.disabled',
+        },
+      },
+    },
+  },
+  contentWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6',
+  },
+  labelWrapper: {
+    '& p': {
+      color: 'text',
+    },
+  },
+  headLabel: {
+    display: 'flex',
+    gap: '4',
+  },
+};
+
+const formFieldVariants = {
+  layout: {
+    default: {
+      formFieldContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6',
+      },
+    },
+    inline: {
+      formFieldContainer: {
+        display: 'grid',
+        gap: '12',
+        gridTemplateColumns: 'auto 1fr',
+        alignItems: 'start',
+      },
+    },
+  },
+};
+
+export const formFieldRecipe = defineSlotRecipe({
+  className: 'formfield',
+  jsx: ['Formfield'],
+  slots: ['formFieldContainer', 'contentWrapper', 'labelWrapper', 'headLabel'],
+  base: formFieldBase,
+  variants: formFieldVariants,
+  defaultVariants: {
+    layout: 'default',
+  },
+});

package/src/recipes/index.ts

@@ -0,0 +1,28 @@
+export { textareaRecipe } from './textarea';
+export { textRecipe, headingRecipe, linkRecipe, labelRecipe } from './text';
+export { checkboxInputRecipe } from './checkboxinput';
+export { radioInputRecipe } from './radioinput';
+export { toggleRecipe } from './toggle';
+export { toggleInputRecipe } from './toggleinput';
+export { spinnerRecipe } from './spinner';
+export { dividerRecipe } from './divider';
+export { preRecipe, codeRecipe } from './code';
+export { boxRecipe } from './box';
+export { textinputRecipe } from './textinput';
+export { cardRecipe } from './card';
+export { breadcrumbsRecipe } from './breadcrumbs';
+export { tagRecipe } from './tag';
+export { themeSwitcherRecipe } from './themeSwitcher';
+
+// Slot Recipes
+export { buttonRecipe, iconButtonRecipe } from './button';
+export { checkboxRecipe } from './checkbox';
+export { radioRecipe } from './radio';
+export { tooltipRecipe } from './tooltip';
+export { menuRecipe } from './menu';
+export { selectRecipe } from './select';
+export { chipRecipe } from './chip';
+export { badgeRecipe } from './badge';
+export { avatarRecipe } from './avatar';
+export { modalRecipe } from './modal';
+export { formFieldRecipe } from './formField';

package/src/recipes/menu.ts

@@ -0,0 +1,205 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const menuBase = {
+  // Floating container
+  menu: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '200',
+    maxWidth: '320',
+    maxHeight: '400',
+    overflowY: 'auto',
+    bg: 'surface.overlay',
+    borderRadius: '8',
+    boxShadow: 'medium',
+    outline: 'none',
+    zIndex: 1000,
+  },
+
+  // Individual menu item row
+  menuItem: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '8',
+    px: '12',
+    py: '8',
+    cursor: 'pointer',
+    outline: 'none',
+    transitionProperty: 'background-color, color',
+    transitionDuration: 'fast',
+    bg: 'surface.overlay',
+
+    _hover: {
+      bg: 'surface.overlay.hovered',
+    },
+    _focusVisible: {
+      bg: 'surface.overlay.hovered',
+    },
+    _active: {
+      bg: 'surface.overlay.hovered',
+    },
+    _disabled: {
+      opacity: 0.5,
+      cursor: 'not-allowed',
+      pointerEvents: 'none',
+    },
+    _selected: {
+      bg: 'bg.selected',
+    },
+  },
+
+  // Selection indicator area (checkmark or checkbox)
+  menuItemIndicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    w: '24',
+    h: '24',
+    color: 'icon.selected',
+  },
+
+  // Left icon area
+  menuItemIconLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    w: '24',
+    h: '24',
+    color: 'icon.decorative',
+  },
+
+  // Right icon area
+  menuItemIconRight: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    w: '24',
+    h: '24',
+    ml: 'auto',
+    color: 'icon.decorative',
+  },
+
+  // Content wrapper (label + description)
+  menuItemContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minWidth: 0, // Enable text truncation
+  },
+
+  // Primary label
+  menuItemLabel: {
+    fontSize: '16',
+    color: 'text',
+    fontFamily: 'sans',
+    fontWeight: 'normal',
+
+    // Highlight match styling for autocomplete
+    '& mark': {
+      bg: 'bg.warning.hovered',
+      color: 'text.bold',
+      borderRadius: '2',
+      // px: '2',
+    },
+  },
+
+  // Secondary description
+  menuItemDescription: {
+    fontSize: '12',
+    fontFamily: 'sans',
+    color: 'text.subtlest',
+  },
+
+  // Divider between items/groups
+  menuDivider: {
+    h: '1',
+    mx: '12',
+    my: '4',
+    bg: 'border',
+  },
+
+  // Group container
+  menuGroup: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  // Group label
+  menuGroupLabel: {
+    fontSize: '12',
+    color: 'text.subtlest',
+    fontFamily: 'sans',
+    // fontWeight: 'medium',
+    // textTransform: 'uppercase',
+    // letterSpacing: 'wide',
+    px: '12',
+    pt: '16',
+    pb: '4',
+  },
+};
+
+const menuVariants = {
+  // Size variants
+  packing: {
+    default: {
+      menu: { minWidth: '200' },
+      menuItem: { py: '8' },
+    },
+    compact: {
+      menu: { minWidth: '160' },
+      menuItem: { py: '4', px: '8' },
+      menuItemIconLeft: { w: '20', h: '20' },
+      menuItemIconRight: { w: '20', h: '20' },
+      menuItemIndicator: { w: '20', h: '20' },
+    },
+    comfortable: {
+      menu: { minWidth: '240' },
+      menuItem: { py: '12', px: '16' },
+    },
+  },
+
+  // Selection indicator position
+  indicatorPosition: {
+    left: {
+      menuItem: {
+        flexDirection: 'row',
+      },
+    },
+    right: {
+      menuItem: {
+        flexDirection: 'row',
+      },
+      menuItemIndicator: {
+        order: 999, // Move to end
+        ml: 'auto',
+      },
+    },
+  },
+};
+
+export const menuRecipe = defineSlotRecipe({
+  className: 'menu',
+  jsx: ['Menu', 'MenuItem', 'MenuTrigger', 'MenuDivider', 'MenuGroup'],
+  slots: [
+    'menu',
+    'menuItem',
+    'menuItemIndicator',
+    'menuItemIconLeft',
+    'menuItemIconRight',
+    'menuItemContent',
+    'menuItemLabel',
+    'menuItemDescription',
+    'menuDivider',
+    'menuGroup',
+    'menuGroupLabel',
+  ],
+  base: menuBase,
+  variants: menuVariants,
+  defaultVariants: {
+    packing: 'default',
+    indicatorPosition: 'left',
+  },
+});

package/src/recipes/modal.ts

@@ -0,0 +1,120 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+const modalBase = {
+  overlay: {
+    position: 'fixed',
+    inset: '0',
+    bg: 'blanket',
+    zIndex: 1100,
+    // Initial state matches animation start
+    opacity: '0',
+    // Animation handled via data-state
+    animation: 'modalFadeIn 150ms ease-out forwards',
+    '&[data-state="closing"]': {
+      animation: 'modalFadeOut 150ms ease-out forwards',
+    },
+  },
+  container: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '90vh',
+    bg: 'surface.overlay',
+    borderRadius: '12',
+    boxShadow: 'overlay',
+    outline: 'none',
+    zIndex: 1101,
+    // Initial state matches animation start
+    opacity: '0',
+    transform: 'translate(-50%, -50%) scale(0.95) translateY(-10px)',
+    // Animation handled via data-state
+    animation: 'modalScaleIn 150ms ease-out forwards',
+    '&[data-state="closing"]': {
+      animation: 'modalScaleOut 150ms ease-out forwards',
+    },
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '12',
+    px: '20',
+    py: '12',
+    borderBottom: 'default',
+  },
+  title: {
+    w: 'full',
+    truncate: true,
+  },
+  closeButton: {
+    // IconButton styles will be applied via IconButton component
+    // This slot is for any additional wrapper styling if needed
+  },
+  body: {
+    flex: 1,
+    overflowY: 'auto',
+    gap: '16',
+    px: '20',
+    py: '16',
+    color: 'text',
+  },
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: '8',
+    px: '20',
+    py: '12',
+    borderTop: 'default',
+  },
+};
+
+const modalVariants = {
+  size: {
+    sm: {
+      container: {
+        maxWidth: '400',
+      },
+      title: {
+        fontSize: 'md',
+      },
+    },
+    md: {
+      container: {
+        maxWidth: '560',
+      },
+      title: {
+        fontSize: 'lg',
+      },
+    },
+    lg: {
+      container: {
+        maxWidth: '720',
+      },
+      title: {
+        fontSize: 'xl',
+      },
+    },
+  },
+};
+
+export const modalRecipe = defineSlotRecipe({
+  className: 'modal',
+  jsx: ['Modal', 'ModalHeader', 'ModalBody', 'ModalFooter'],
+  slots: [
+    'overlay',
+    'container',
+    'header',
+    'title',
+    'closeButton',
+    'body',
+    'footer',
+  ],
+  base: modalBase,
+  variants: modalVariants,
+  defaultVariants: {
+    size: 'md',
+  },
+});