@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/theme/recipes/absolute-center.ts

@@ -0,0 +1,38 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const absoluteCenter = defineRecipe({
+  className: 'app-absolute-center',
+  jsx: ['AbsoluteCenter'],
+  base: {
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  defaultVariants: {
+    axis: 'both',
+  },
+  variants: {
+    axis: {
+      horizontal: {
+        insetStart: '50%',
+        translate: '-50%',
+        _rtl: {
+          translate: '50%',
+        },
+      },
+      vertical: {
+        top: '50%',
+        translate: '0 -50%',
+      },
+      both: {
+        insetStart: '50%',
+        top: '50%',
+        translate: '-50% -50%',
+        _rtl: {
+          translate: '50% -50%',
+        },
+      },
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/accordion.ts

@@ -0,0 +1,68 @@
+import { accordionAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const appearance = {
+  root: { '--accordion-radius': 'radii.sm' },
+  itemTrigger: {
+    borderRadius: 'var(--accordion-radius)',
+    color: 'gray.fg.default',
+    cursor: 'pointer',
+    fontWeight: 'semibold',
+    _focusVisible: { outline: '2px solid', outlineColor: 'colorPalette.ring' },
+    _disabled: { layerStyle: 'disabled' },
+  },
+  itemIndicator: { color: 'gray.fg.subtle' },
+  itemBody: { color: 'gray.fg.muted' },
+  itemContent: { borderRadius: 'var(--accordion-radius)' },
+} as const
+
+export const accordion = defineSlotRecipe({
+  className: 'app-accordion',
+  jsx: ['Accordion.Root', 'Accordion.RootProvider'],
+  slots: accordionAnatomy.extendWith('itemBody').keys(),
+  base: {
+    root: { width: 'full' },
+    item: { overflowAnchor: 'none' },
+    itemTrigger: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: '3',
+      justifyContent: 'space-between',
+      textAlign: 'start',
+      textStyle: 'lg',
+      width: 'full',
+    },
+    itemIndicator: {
+      transition: 'rotate 0.2s',
+      _motionReduce: { transition: 'none' },
+      transformOrigin: 'center',
+      _open: { rotate: '180deg' },
+      _icon: { width: '1.2em', height: '1.2em' },
+    },
+    itemBody: { pb: 'calc(var(--accordion-padding-y) * 2)' },
+    itemContent: {
+      overflow: 'hidden',
+      _open: {
+        _motionSafe: { animationName: 'expand-height, fade-in', animationDuration: 'normal' },
+      },
+      _closed: {
+        _motionSafe: { animationName: 'collapse-height, fade-out', animationDuration: 'normal' },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    variant: {
+      outline: { ...appearance, item: { borderBottomWidth: '1px' } },
+      plain: appearance,
+      unstyled: {},
+    },
+    size: {
+      md: {
+        root: { '--accordion-padding-x': 'spacing.4', '--accordion-padding-y': 'spacing.2.5' },
+        itemTrigger: { textStyle: 'md', py: 'var(--accordion-padding-y)' },
+      },
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/alert.ts

@@ -0,0 +1,83 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = { content: { gap: '1' } } as const
+
+const appearance = { root: { borderRadius: 'md' }, title: { fontWeight: 'semibold' } } as const
+
+export const alert = defineSlotRecipe({
+  className: 'app-alert',
+  jsx: ['Alert.Root'],
+  slots: ['root', 'content', 'description', 'indicator', 'title'],
+  base: {
+    root: { alignItems: 'flex-start', display: 'flex', position: 'relative', width: 'full' },
+    content: { display: 'flex', flex: '1', flexDirection: 'column' },
+    description: { display: 'inline' },
+    indicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+    },
+  },
+  defaultVariants: { size: 'md', status: 'info', variant: 'subtle' },
+  variants: {
+    size: {
+      md: {
+        ...sizeStyles,
+        root: { gap: '3', p: '4', textStyle: 'sm' },
+        indicator: { _icon: { width: '5', height: '5' } },
+      },
+      lg: {
+        ...sizeStyles,
+        root: { gap: '4', p: '4', textStyle: 'md' },
+        indicator: { _icon: { width: '6', height: '6' } },
+      },
+      unstyled: {},
+    },
+    variant: {
+      solid: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.default',
+          color: 'colorPalette.fg.onSolid',
+        },
+      },
+      surface: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.surface',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.default',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      subtle: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      outline: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.strong',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      unstyled: {},
+    },
+    status: {
+      info: { root: { colorPalette: 'gray' } },
+      warning: { root: { colorPalette: 'amber' } },
+      success: { root: { colorPalette: 'green' } },
+      error: { root: { colorPalette: 'red' } },
+      neutral: {},
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/avatar.ts

@@ -0,0 +1,155 @@
+import { avatarAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: {
+    width: 'var(--avatar-size)',
+    height: 'var(--avatar-size)',
+    fontSize: 'var(--avatar-font-size)',
+  },
+  fallback: { fontSize: 'var(--avatar-font-size)', lineHeight: '1' },
+} as const
+
+const appearance = { root: { fontWeight: 'medium' }, fallback: { fontWeight: 'medium' } } as const
+
+const shapeStyles = {
+  root: { borderRadius: 'var(--avatar-radius)' },
+  fallback: { borderRadius: 'var(--avatar-radius)' },
+  image: { borderRadius: 'var(--avatar-radius)' },
+} as const
+
+export const avatar = defineSlotRecipe({
+  className: 'app-avatar',
+  jsx: ['Avatar.Root', 'Avatar.RootProvider'],
+  slots: avatarAnatomy.keys(),
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      verticalAlign: 'top',
+      flexShrink: '0',
+      userSelect: 'none',
+    },
+    fallback: { textTransform: 'uppercase' },
+    image: { width: '100%', height: '100%', objectFit: 'cover' },
+  },
+  defaultVariants: { size: 'md', shape: 'full', variant: 'subtle' },
+  variants: {
+    size: {
+      full: {
+        ...sizeStyles,
+        root: { ...sizeStyles.root, '--avatar-size': '100%', '--avatar-font-size': '100%' },
+      },
+      '2xs': {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.2xs',
+          '--avatar-size': 'sizes.6',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '3', height: '3' } },
+      },
+      xs: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.xs',
+          '--avatar-size': 'sizes.8',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '4', height: '4' } },
+      },
+      sm: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.sm',
+          '--avatar-size': 'sizes.9',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '4.5', height: '4.5' } },
+      },
+      md: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.10',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '5', height: '5' } },
+      },
+      lg: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.11',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '5.5', height: '5.5' } },
+      },
+      xl: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.lg',
+          '--avatar-size': 'sizes.12',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '6', height: '6' } },
+      },
+      '2xl': {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--avatar-font-size': 'fontSizes.xl',
+          '--avatar-size': 'sizes.16',
+        },
+        fallback: { ...sizeStyles.fallback, _icon: { width: '8', height: '8' } },
+      },
+      unstyled: {},
+    },
+    variant: {
+      solid: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.default',
+          color: 'colorPalette.fg.onSolid',
+        },
+      },
+      surface: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.surface',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.default',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      subtle: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      outline: {
+        ...appearance,
+        root: {
+          ...appearance.root,
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.strong',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      unstyled: {},
+    },
+    shape: {
+      square: shapeStyles,
+      rounded: { ...shapeStyles, root: { ...shapeStyles.root, '--avatar-radius': 'radii.md' } },
+      full: { ...shapeStyles, root: { ...shapeStyles.root, '--avatar-radius': 'radii.full' } },
+      unstyled: {},
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/badge.ts

@@ -0,0 +1,67 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const sizeStyles = { lineHeight: '1' } as const
+
+const appearance = { borderRadius: 'sm', fontWeight: 'medium' } as const
+
+export const badge = defineRecipe({
+  className: 'app-badge',
+  jsx: ['Badge'],
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  },
+  defaultVariants: { variant: 'subtle', size: 'md' },
+  variants: {
+    variant: {
+      solid: { ...appearance, bg: 'colorPalette.bg.default', color: 'colorPalette.fg.onSolid' },
+      surface: {
+        ...appearance,
+        bg: 'colorPalette.bg.surface',
+        borderWidth: '1px',
+        borderColor: 'colorPalette.border.default',
+        color: 'colorPalette.fg.default',
+      },
+      subtle: { ...appearance, bg: 'colorPalette.bg.subtle', color: 'colorPalette.fg.default' },
+      outline: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'colorPalette.border.strong',
+        color: 'colorPalette.fg.default',
+      },
+      unstyled: {},
+    },
+    size: {
+      sm: {
+        ...sizeStyles,
+        fontSize: 'xs',
+        px: '1.5',
+        h: '4.5',
+        gap: '0.5',
+        _icon: { boxSize: '2.5' },
+      },
+      md: { ...sizeStyles, fontSize: 'xs', px: '2', h: '5', gap: '1', _icon: { boxSize: '3' } },
+      lg: {
+        ...sizeStyles,
+        fontSize: 'xs',
+        px: '2.5',
+        h: '5.5',
+        gap: '1',
+        _icon: { boxSize: '3.5' },
+      },
+      xl: { ...sizeStyles, fontSize: 'sm', px: '2.5', h: '6', gap: '1.5', _icon: { boxSize: '4' } },
+      '2xl': {
+        ...sizeStyles,
+        fontSize: 'md',
+        px: '3',
+        h: '7',
+        gap: '1.5',
+        _icon: { boxSize: '4.5' },
+      },
+      unstyled: {},
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/breadcrumb.ts

@@ -0,0 +1,69 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = { link: { gap: '2' } } as const
+
+const appearance = {
+  currentLink: { color: 'gray.fg.default' },
+  link: {
+    borderRadius: 'xs',
+    focusRing: 'outside',
+    outline: '0',
+    textDecoration: 'none',
+    transition: 'color',
+  },
+  item: { color: 'gray.fg.muted', _last: { color: 'gray.fg.default' } },
+  separator: { color: 'gray.fg.subtle' },
+  ellipsis: { color: 'gray.fg.muted' },
+} as const
+
+export const breadcrumb = defineSlotRecipe({
+  className: 'app-breadcrumb',
+  jsx: ['Breadcrumb.Root'],
+  slots: ['root', 'list', 'link', 'item', 'separator', 'ellipsis', 'currentLink'],
+  base: {
+    currentLink: { display: 'inline-flex', alignItems: 'center', _icon: { boxSize: '1em' } },
+    list: { alignItems: 'center', display: 'flex', listStyle: 'none', wordBreak: 'break-word' },
+    link: { alignItems: 'center', display: 'inline-flex', _icon: { boxSize: '1em' } },
+    item: { display: 'inline-flex', alignItems: 'center' },
+    separator: { _icon: { boxSize: '1em' }, _rtl: { rotate: '180deg' } },
+    ellipsis: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      _icon: { boxSize: '1em' },
+    },
+  },
+  variants: {
+    variant: {
+      underline: {
+        ...appearance,
+        link: {
+          ...appearance.link,
+          textDecoration: 'underline',
+          textDecorationThickness: '0.1em',
+          textUnderlineOffset: '0.125em',
+          textDecorationColor: 'gray.fg.subtle',
+          _hover: { textDecorationColor: 'gray.fg.default' },
+        },
+      },
+      plain: {
+        ...appearance,
+        link: {
+          ...appearance.link,
+          color: 'gray.fg.muted',
+          _hover: { color: 'gray.fg.default' },
+          _currentPage: { color: 'gray.fg.default' },
+        },
+      },
+      unstyled: {},
+    },
+    size: {
+      xs: { ...sizeStyles, list: { gap: '1', textStyle: 'xs' } },
+      sm: { ...sizeStyles, list: { gap: '1', textStyle: 'sm' } },
+      md: { ...sizeStyles, list: { gap: '1.5', textStyle: 'md' } },
+      lg: { ...sizeStyles, list: { gap: '2', textStyle: 'lg' } },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { variant: 'plain', size: 'md' },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/button.ts

@@ -0,0 +1,149 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const appearance = {
+  borderRadius: 'xs',
+  cursor: 'pointer',
+  fontWeight: 'semibold',
+  outline: '0',
+  transition: 'colors',
+  transitionProperty: 'background-color, border-color, color, box-shadow',
+  _disabled: { layerStyle: 'disabled' },
+  focusVisibleRing: 'outside',
+} as const
+
+const sizeStyles = {
+  gap: '2',
+} as const
+
+export const button = defineRecipe({
+  className: 'app-button',
+  jsx: ['Button', 'IconButton', 'CloseButton', 'ButtonGroup'],
+  base: {
+    alignItems: 'center',
+    appearance: 'none',
+    display: 'inline-flex',
+    flexShrink: '0',
+    isolation: 'isolate',
+    justifyContent: 'center',
+    position: 'relative',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    _icon: {
+      flexShrink: '0',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      unstyled: {},
+      solid: {
+        ...appearance,
+        bg: 'colorPalette.bg.default',
+        color: 'colorPalette.fg.onSolid',
+        _hover: {
+          bg: 'colorPalette.bg.default.hover',
+        },
+      },
+      surface: {
+        ...appearance,
+        bg: 'colorPalette.bg.surface',
+        borderWidth: '1px',
+        borderColor: 'colorPalette.border.default',
+        color: 'colorPalette.fg.default',
+        _hover: {
+          borderColor: 'colorPalette.border.default.hover',
+        },
+        _active: {
+          bg: 'colorPalette.bg.surface.active',
+        },
+        _on: {
+          bg: 'colorPalette.bg.surface.active',
+        },
+      },
+      subtle: {
+        ...appearance,
+        bg: 'colorPalette.bg.subtle',
+        color: 'colorPalette.fg.default',
+        _hover: {
+          bg: 'colorPalette.bg.subtle.hover',
+        },
+        _active: {
+          bg: 'colorPalette.bg.subtle.active',
+        },
+        _on: {
+          bg: 'colorPalette.bg.subtle.active',
+        },
+      },
+      outline: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'colorPalette.border.strong',
+        color: 'colorPalette.fg.default',
+        _hover: {
+          bg: 'colorPalette.a2',
+        },
+        _active: {
+          bg: 'colorPalette.a3',
+        },
+        _on: {
+          bg: 'colorPalette.a3',
+        },
+      },
+      plain: {
+        ...appearance,
+        color: 'colorPalette.fg.default',
+        _hover: {
+          bg: 'colorPalette.bg.subtle',
+        },
+        _active: {
+          bg: 'colorPalette.bg.subtle.hover',
+        },
+        _on: {
+          bg: 'colorPalette.bg.subtle.hover',
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      '2xs': {
+        ...sizeStyles,
+        h: '6',
+        minW: '6',
+        textStyle: 'xs',
+        px: '2',
+        _icon: { boxSize: '3.5' },
+      },
+      xs: { ...sizeStyles, h: '8', minW: '8', textStyle: 'sm', px: '2.5', _icon: { boxSize: '4' } },
+      sm: { ...sizeStyles, h: '9', minW: '9', textStyle: 'sm', px: '3', _icon: { boxSize: '4' } },
+      md: {
+        ...sizeStyles,
+        h: '10',
+        minW: '10',
+        textStyle: 'sm',
+        px: '3.5',
+        _icon: { boxSize: '5' },
+      },
+      lg: { ...sizeStyles, h: '11', minW: '11', textStyle: 'md', px: '4', _icon: { boxSize: '5' } },
+      xl: {
+        ...sizeStyles,
+        h: '12',
+        minW: '12',
+        textStyle: 'md',
+        px: '4.5',
+        _icon: { boxSize: '5.5' },
+      },
+      '2xl': {
+        ...sizeStyles,
+        h: '16',
+        minW: '16',
+        textStyle: 'xl',
+        px: '6',
+        _icon: { boxSize: '6' },
+      },
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/recipes/card.ts

@@ -0,0 +1,36 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const appearance = {
+  root: { borderRadius: 'md' },
+  title: { fontWeight: 'semibold' },
+  description: { color: 'gray.fg.muted' },
+} as const
+
+export const card = defineSlotRecipe({
+  className: 'app-card',
+  jsx: ['Card.Root'],
+  slots: ['root', 'header', 'body', 'footer', 'title', 'description'],
+  base: {
+    root: { display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' },
+    header: { display: 'flex', flexDirection: 'column', gap: '1', p: '6' },
+    body: { display: 'flex', flex: '1', flexDirection: 'column', pb: '6', px: '6' },
+    footer: { display: 'flex', justifyContent: 'flex-end', gap: '3', pb: '6', pt: '2', px: '6' },
+    title: { textStyle: 'lg' },
+    description: { textStyle: 'sm' },
+  },
+  defaultVariants: { variant: 'outline' },
+  variants: {
+    variant: {
+      elevated: {
+        ...appearance,
+        root: { ...appearance.root, bg: 'gray.bg.surface', boxShadow: 'lg' },
+      },
+      outline: {
+        ...appearance,
+        root: { ...appearance.root, bg: 'gray.bg.surface', borderWidth: '1px' },
+      },
+      subtle: { ...appearance, root: { ...appearance.root, bg: 'gray.bg.subtle' } },
+      unstyled: {},
+    },
+  },
+})