@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,99 @@
+import type { defineRecipe } from '@pandacss/dev'
+
+const appearance = {
+  borderRadius: 'sm',
+  outline: '0',
+  transition: 'colors',
+  _disabled: { layerStyle: 'disabled' },
+} as const
+
+const sizeStyles = {
+  height: 'var(--input-height)',
+  minHeight: 'var(--input-height)',
+  minW: 'var(--input-height)',
+} as const
+
+export const input = {
+  className: 'app-input',
+  jsx: ['Input', 'Field.Input', 'PasswordInput'],
+  base: {
+    appearance: 'none',
+    position: 'relative',
+    textAlign: 'start',
+    width: '100%',
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      unstyled: {},
+      outline: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'gray.border.strong',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          focusRingColor: 'red.9',
+          borderColor: 'red.9',
+        },
+      },
+      surface: {
+        ...appearance,
+        bg: 'gray.bg.surface',
+        borderWidth: '1px',
+        borderColor: 'gray.border.default',
+        focusVisibleRing: 'inside',
+
+        _invalid: {
+          focusRingColor: 'red.9',
+          borderColor: 'red.9',
+        },
+      },
+      subtle: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        bg: 'gray.bg.subtle',
+        color: 'gray.fg.default',
+        focusVisibleRing: 'inside',
+
+        _invalid: {
+          focusRingColor: 'red.9',
+          borderColor: 'red.9',
+        },
+      },
+      flushed: {
+        ...appearance,
+        borderBottomWidth: '1px',
+        borderBottomColor: 'gray.border.strong',
+        borderRadius: '0',
+        color: 'gray.fg.default',
+        px: '0',
+        _invalid: {
+          borderColor: 'red.9',
+        },
+        _focus: {
+          borderColor: 'colorPalette.bg.default',
+          boxShadowColor: 'colorPalette.bg.default',
+          boxShadow: '0 1px 0 0 var(--shadow-color)',
+          _invalid: {
+            borderColor: 'red.9',
+            boxShadowColor: 'red.9',
+          },
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      '2xs': { ...sizeStyles, textStyle: 'xs', px: '1.5', '--input-height': 'sizes.7' },
+      xs: { ...sizeStyles, textStyle: 'sm', px: '2', '--input-height': 'sizes.8' },
+      sm: { ...sizeStyles, textStyle: 'sm', px: '2.5', '--input-height': 'sizes.9' },
+      md: { ...sizeStyles, textStyle: 'md', px: '3', '--input-height': 'sizes.10' },
+      lg: { ...sizeStyles, textStyle: 'md', px: '3.5', '--input-height': 'sizes.11' },
+      xl: { ...sizeStyles, textStyle: 'lg', px: '4', '--input-height': 'sizes.12' },
+      '2xl': { ...sizeStyles, textStyle: '3xl', px: '4.5', '--input-height': 'sizes.16' },
+    },
+  },
+} satisfies Parameters<typeof defineRecipe>[0]

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

@@ -0,0 +1,36 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const appearance = {
+  borderRadius: 'xs',
+  cursor: 'pointer',
+  focusVisibleRing: 'outside',
+  fontWeight: 'medium',
+  outline: 'none',
+  textDecorationLine: 'underline',
+  textDecorationThickness: '0.1em',
+  textUnderlineOffset: '0.125em',
+  transitionDuration: 'normal',
+  transitionProperty: 'text-decoration-color',
+} as const
+
+export const link = defineRecipe({
+  className: 'app-link',
+  jsx: ['Link'],
+  base: { alignItems: 'center', display: 'inline-flex', gap: '1.5', _icon: { boxSize: '1em' } },
+  defaultVariants: { variant: 'underline' },
+  variants: {
+    variant: {
+      underline: {
+        ...appearance,
+        textDecorationColor: 'colorPalette.fg.default/60',
+        _hover: { textDecorationColor: 'colorPalette.fg.default' },
+      },
+      plain: {
+        ...appearance,
+        textDecorationColor: 'transparent',
+        _hover: { textDecorationColor: 'colorPalette.fg.default' },
+      },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,114 @@
+import { menuAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  content: {
+    maxH: 'min(var(--available-height), {sizes.96})',
+    minWidth: 'max(var(--reference-width), {sizes.40})',
+  },
+  itemGroupLabel: { gap: '1px' },
+} as const
+
+export const menu = defineSlotRecipe({
+  className: 'app-menu',
+  jsx: ['Menu.Root', 'Menu.RootProvider'],
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      '--menu-z-index': 'zIndex.dropdown',
+      bg: 'gray.bg.surface',
+      borderRadius: 'md',
+      boxShadow: 'md',
+      display: 'flex',
+      flexDirection: 'column',
+      outline: '0',
+      overflow: 'hidden',
+      overflowY: 'auto',
+      position: 'relative',
+      zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
+      _open: {
+        _motionSafe: { animationStyle: 'slide-fade-in', animationDuration: 'fast' },
+      },
+      _closed: {
+        _motionSafe: { animationStyle: 'slide-fade-out', animationDuration: 'faster' },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: 'sm',
+      display: 'flex',
+      flex: '0 0 auto',
+      outline: '0',
+      textAlign: 'start',
+      textDecoration: 'none',
+      userSelect: 'none',
+      width: '100%',
+      _highlighted: { bg: 'gray.bg.surface.hover' },
+      _disabled: { layerStyle: 'disabled' },
+    },
+    trigger: { _focusVisible: { focusVisibleRing: 'outside' } },
+    itemGroupLabel: {
+      alignItems: 'flex-start',
+      color: 'gray.fg.subtle',
+      display: 'flex',
+      flexDirection: 'column',
+      fontWeight: 'medium',
+      justifyContent: 'center',
+      _after: { content: '""', width: '100%', height: '1px', bg: 'gray.border.subtle' },
+    },
+    itemIndicator: {
+      '&[hidden]': { display: 'none' },
+      justifyContent: 'flex-end',
+      display: 'flex',
+      flex: '1',
+      _checked: { _icon: { color: 'colorPalette.fg.default' } },
+    },
+  },
+  defaultVariants: { size: 'md' },
+  variants: {
+    size: {
+      xs: {
+        ...sizeStyles,
+        content: { ...sizeStyles.content, p: '1', gap: '0.5', textStyle: 'sm' },
+        item: { px: '1', minH: '8', gap: '2', _icon: { boxSize: '3.5' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '1', height: '8' },
+        separator: { mx: '-1', my: '0.5' },
+      },
+      sm: {
+        ...sizeStyles,
+        content: { ...sizeStyles.content, p: '1', gap: '0.5', textStyle: 'sm' },
+        item: { px: '1.5', minH: '9', gap: '2', _icon: { boxSize: '4' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '1.5', height: '9' },
+        separator: { mx: '-1.5', my: '0.5' },
+      },
+      md: {
+        ...sizeStyles,
+        content: { ...sizeStyles.content, p: '1', gap: '0.5', textStyle: 'md' },
+        item: { px: '2', minH: '10', gap: '2', _icon: { boxSize: '4' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '2', height: '10' },
+        separator: { mx: '-2', my: '0.5' },
+      },
+      lg: {
+        ...sizeStyles,
+        content: { ...sizeStyles.content, p: '1', gap: '0.5', textStyle: 'md' },
+        item: { px: '2.5', minH: '11', gap: '2', _icon: { boxSize: '4.5' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '2.5', height: '11' },
+        separator: { mx: '-2.5', my: '0.5' },
+      },
+      xl: {
+        ...sizeStyles,
+        content: { ...sizeStyles.content, p: '1', gap: '1', textStyle: 'lg' },
+        item: { px: '3', minH: '12', gap: '3', _icon: { boxSize: '5' } },
+        itemGroup: { gap: '1' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '3', height: '12' },
+        separator: { mx: '-3', my: '0' },
+      },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,92 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+import { input } from './input'
+
+const appearance = {
+  field: {
+    bg: 'gray.bg.page',
+    color: 'gray.fg.default',
+    _light: { colorScheme: 'light' },
+    _dark: { colorScheme: 'dark' },
+    '& option, & optgroup': { bg: 'gray.bg.page', color: 'gray.fg.default' },
+    cursor: 'pointer',
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  indicator: {
+    color: 'gray.fg.muted',
+    _disabled: { opacity: '0.5' },
+    _invalid: { color: 'red.9' },
+  },
+} as const
+
+export const nativeSelect = defineSlotRecipe({
+  className: 'app-native-select',
+  jsx: ['NativeSelect.Root'],
+  slots: ['root', 'field', 'indicator'],
+  base: {
+    root: { position: 'relative', width: 'full', display: 'inline-flex' },
+    field: input.base,
+    indicator: {
+      position: 'absolute',
+      insetInlineEnd: '0',
+      top: '0',
+      bottom: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+    },
+  },
+  variants: {
+    variant: {
+      ...(Object.fromEntries(
+        Object.entries(input.variants.variant)
+          .filter(([name]) => name !== 'unstyled')
+          .map(([name, styles]) => [
+            name,
+            {
+              field: { ...appearance.field, ...styles, _disabled: appearance.field._disabled },
+              indicator: appearance.indicator,
+            },
+          ]),
+      ) as {
+        [K in Exclude<keyof typeof input.variants.variant, 'unstyled'>]: {
+          field: typeof appearance.field & (typeof input.variants.variant)[K]
+          indicator: typeof appearance.indicator
+        }
+      }),
+      unstyled: {},
+    },
+    size: {
+      ...(Object.fromEntries(
+        Object.entries(input.variants.size).flatMap(([name, styles]) =>
+          'textStyle' in styles
+            ? [
+                [
+                  name,
+                  {
+                    root: {
+                      textStyle: styles.textStyle,
+                      '--input-height': styles['--input-height'],
+                    },
+                    field: { ...styles, paddingInlineEnd: 'var(--input-height)' },
+                    indicator: { width: 'var(--input-height)', _icon: { boxSize: '1em' } },
+                  },
+                ],
+              ]
+            : [],
+        ),
+      ) as {
+        [K in Exclude<keyof typeof input.variants.size, 'unstyled'>]: {
+          root: {
+            textStyle: (typeof input.variants.size)[K]['textStyle']
+            '--input-height': string
+          }
+          field: (typeof input.variants.size)[K] & { paddingInlineEnd: string }
+          indicator: { width: string; _icon: { boxSize: string } }
+        }
+      }),
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+})

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

@@ -0,0 +1,91 @@
+import { numberInputAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe, defineStyles } from '@pandacss/dev'
+import { input } from './input'
+
+const trigger = defineStyles({
+  alignItems: 'center',
+  display: 'flex',
+  flex: '1',
+  justifyContent: 'center',
+  userSelect: 'none',
+})
+
+const sizeStyles = {
+  incrementTrigger: { lineHeight: '1', _icon: { boxSize: '1em' } },
+  decrementTrigger: { lineHeight: '1', _icon: { boxSize: '1em' } },
+  control: { width: 'var(--stepper-width)' },
+  input: { pe: 'calc(var(--stepper-width) + 0.5rem)' },
+} as const
+
+const appearance = {
+  incrementTrigger: {
+    color: 'gray.fg.muted',
+    cursor: 'pointer',
+    transition: 'common',
+    _hover: { bg: 'gray.bg.surface.hover' },
+    _active: { bg: 'gray.bg.surface.active' },
+    borderTopRightRadius: 'sm',
+  },
+  decrementTrigger: {
+    color: 'gray.fg.muted',
+    cursor: 'pointer',
+    transition: 'common',
+    _hover: { bg: 'gray.bg.surface.hover' },
+    _active: { bg: 'gray.bg.surface.active' },
+    borderBottomRightRadius: 'sm',
+  },
+  root: { _disabled: { layerStyle: 'disabled' } },
+  control: { borderStartWidth: '1px', divideY: '1px', height: 'calc(100% - 2px)', margin: '1px' },
+  label: { color: 'gray.fg.default', fontWeight: 'medium' },
+} as const
+
+export const numberInput = defineSlotRecipe({
+  className: 'app-number-input',
+  jsx: ['NumberInput.Root', 'NumberInput.RootProvider'],
+  slots: numberInputAnatomy.keys(),
+  base: {
+    root: { isolation: 'isolate', position: 'relative' },
+    control: {
+      display: 'flex',
+      flexDirection: 'column',
+      insetEnd: '0px',
+      position: 'absolute',
+      top: '0',
+      zIndex: '1',
+    },
+    input: { ...input.base, verticalAlign: 'top' },
+    incrementTrigger: trigger,
+    decrementTrigger: trigger,
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    size: {
+      sm: {
+        ...sizeStyles,
+        root: { '--stepper-width': 'sizes.4.5' },
+        input: { ...sizeStyles.input, ...input.variants.size.sm },
+      },
+      md: {
+        ...sizeStyles,
+        root: { '--stepper-width': 'sizes.5' },
+        input: { ...sizeStyles.input, ...input.variants.size.md },
+      },
+      lg: {
+        ...sizeStyles,
+        root: { '--stepper-width': 'sizes.5.5' },
+        input: { ...sizeStyles.input, ...input.variants.size.lg },
+      },
+      xl: {
+        ...sizeStyles,
+        root: { '--stepper-width': 'sizes.6' },
+        input: { ...sizeStyles.input, ...input.variants.size.xl },
+      },
+      unstyled: {},
+    },
+    variant: {
+      outline: { ...appearance, input: input.variants.variant.outline },
+      surface: { ...appearance, input: input.variants.variant.surface },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,9 @@
+import { paginationAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const pagination = defineSlotRecipe({
+  className: 'app-pagination',
+  jsx: ['Pagination.Root', 'Pagination.RootProvider'],
+  slots: paginationAnatomy.keys(),
+  base: {},
+})

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

@@ -0,0 +1,33 @@
+import { pinInputAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+import { input } from './input'
+
+const sizeStyles = { input: { width: 'var(--input-height)' }, control: { gap: '2' } } as const
+
+export const pinInput = defineSlotRecipe({
+  className: 'app-pin-input',
+  jsx: ['PinInput.Root', 'PinInput.RootProvider'],
+  slots: pinInputAnatomy.keys(),
+  base: {
+    input: { ...input.base, textAlign: 'center', px: '1!' },
+    control: { display: 'inline-flex', isolation: 'isolate' },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    size: {
+      xs: { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.xs } },
+      sm: { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.sm } },
+      md: { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.md } },
+      lg: { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.lg } },
+      xl: { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.xl } },
+      '2xl': { ...sizeStyles, input: { ...sizeStyles.input, ...input.variants?.size?.['2xl'] } },
+      unstyled: {},
+    },
+    variant: {
+      outline: { input: input.variants?.variant?.outline },
+      subtle: { input: input.variants?.variant?.subtle },
+      flushed: { input: input.variants?.variant?.flushed },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,78 @@
+import { popoverAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const popover = defineSlotRecipe({
+  className: 'app-popover',
+  jsx: ['Popover.Root', 'Popover.RootProvider'],
+  slots: popoverAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    content: {
+      '--popover-z-index': 'zIndex.popover',
+      '--popover-bg': 'colors.gray.bg.surface',
+      '--popover-padding': 'spacing.4',
+
+      background: 'var(--popover-bg)',
+      borderRadius: 'md',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      maxHeight: 'var(--available-height)',
+      outline: '0',
+      position: 'relative',
+      textStyle: 'sm',
+      transformOrigin: 'var(--transform-origin)',
+      width: 'xs',
+      zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
+      _open: {
+        _motionSafe: {
+          animationStyle: 'scale-fade-in',
+          animationDuration: 'fast',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationStyle: 'scale-fade-out',
+          animationDuration: 'faster',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    title: {
+      color: 'gray.fg.default',
+      fontWeight: 'medium',
+      textStyle: 'md',
+    },
+    description: {
+      color: 'gray.fg.muted',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '1',
+      right: '1',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      pt: 'var(--popover-padding)',
+      px: 'var(--popover-padding)',
+    },
+    body: { p: 'var(--popover-padding)', display: 'flex', flex: '1', flexDirection: 'column' },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '3',
+      paddingInline: 'var(--popover-padding)',
+      paddingBottom: 'var(--popover-padding)',
+    },
+    arrow: {
+      '--arrow-size': 'sizes.3',
+      '--arrow-background': 'var(--popover-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '0.5px',
+      borderInlineStartWidth: '0.5px',
+    },
+  },
+})

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

@@ -0,0 +1,50 @@
+import { progressAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: { textStyle: 'sm' },
+  label: { gap: '1' },
+  valueText: { textStyle: 'xs', lineHeight: '1' },
+} as const
+
+const appearance = {
+  circleTrack: { stroke: 'gray.bg.subtle' },
+  circleRange: { stroke: 'colorPalette.bg.default' },
+  label: { fontWeight: 'medium' },
+  valueText: { fontWeight: 'medium' },
+} as const
+
+export const progressCircle = defineSlotRecipe({
+  className: 'app-progress-circle',
+  jsx: ['ProgressCircle.Root', 'ProgressCircle.RootProvider'],
+  slots: progressAnatomy.keys(),
+  base: {
+    root: { position: 'relative' },
+    circle: { _indeterminate: { animation: 'spin 2s linear infinite' } },
+    circleRange: {
+      transitionProperty: 'stroke-dashoffset, stroke-dasharray',
+      transitionDuration: '0.6s',
+      _indeterminate: { animation: 'circular-progress 1.5s linear infinite' },
+    },
+    label: { display: 'inline-flex', alignItems: 'center' },
+  },
+  variants: {
+    variant: {
+      solid: appearance,
+      subtle: {
+        ...appearance,
+        circleTrack: { ...appearance.circleTrack, stroke: 'colorPalette.bg.subtle.active' },
+      },
+      unstyled: {},
+    },
+    size: {
+      xs: { ...sizeStyles, circle: { '--size': '24px', '--thickness': '4px' } },
+      sm: { ...sizeStyles, circle: { '--size': '32px', '--thickness': '5px' } },
+      md: { ...sizeStyles, circle: { '--size': '40px', '--thickness': '6px' } },
+      lg: { ...sizeStyles, circle: { '--size': '48px', '--thickness': '7px' } },
+      xl: { ...sizeStyles, circle: { '--size': '64px', '--thickness': '8px' } },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { variant: 'solid', size: 'md' },
+})