@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,302 @@
+import { datePickerAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe, defineStyles } from '@pandacss/dev'
+import { input } from './input'
+
+const nav = defineStyles({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '&[dir=rtl] svg': { transform: 'rotate(180deg)' },
+})
+const select = defineStyles({
+  borderWidth: '1px',
+  borderColor: 'gray.border.strong',
+  borderRadius: 'sm',
+  bg: 'gray.bg.page',
+  color: 'gray.fg.default',
+  outline: '0',
+  focusVisibleRing: 'inside',
+  _disabled: { layerStyle: 'disabled' },
+  _light: { colorScheme: 'light' },
+  _dark: { colorScheme: 'dark' },
+  '& option': { bg: 'gray.bg.page', color: 'gray.fg.default' },
+})
+const sizeStyles = {
+  trigger: { boxSize: '6', _icon: { boxSize: '4' } },
+  clearTrigger: { boxSize: '6', _icon: { boxSize: '4' } },
+  prevTrigger: { boxSize: 'var(--datepicker-nav-size)', _icon: { boxSize: '4' } },
+  nextTrigger: { boxSize: 'var(--datepicker-nav-size)', _icon: { boxSize: '4' } },
+  viewTrigger: {
+    boxSize: 'var(--datepicker-nav-size)',
+    width: 'auto',
+    _icon: { boxSize: '4' },
+    px: '2',
+    textStyle: 'sm',
+  },
+  presetTrigger: {
+    boxSize: 'var(--datepicker-nav-size)',
+    width: 'auto',
+    _icon: { boxSize: '4' },
+    px: '2',
+    textStyle: 'sm',
+  },
+  monthSelect: { height: 'var(--datepicker-select-height)', px: '2', textStyle: 'sm' },
+  yearSelect: { height: 'var(--datepicker-select-height)', px: '2', textStyle: 'sm' },
+  root: { gap: '1.5' },
+  label: { textStyle: 'sm' },
+  control: { gap: '2' },
+  input: { '&:has(~ [data-slot=indicatorGroup])': { pe: '16' } },
+  indicatorGroup: { insetInlineEnd: '2', gap: '1' },
+  content: { gap: '3', p: '3', minW: '18rem' },
+  view: { gap: '3' },
+  viewControl: { gap: '2', height: 'var(--datepicker-nav-size)' },
+  rangeText: { textStyle: 'sm' },
+  valueText: { textStyle: 'sm' },
+  tableHeader: { width: 'var(--table-cell-size)', py: '2', textStyle: 'xs' },
+  tableCell: { py: '0.5' },
+  weekNumberCellText: { boxSize: 'var(--table-cell-size)', textStyle: 'xs' },
+  tableCellTrigger: {
+    minWidth: 'var(--table-cell-size)',
+    minHeight: 'var(--table-cell-size)',
+    textStyle: 'sm',
+    '[data-view=month] &, [data-view=year] &': { minWidth: 'calc(var(--table-cell-size) * 1.75)' },
+  },
+} as const
+
+const appearance = {
+  trigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.muted',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  clearTrigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.muted',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  prevTrigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.default',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  nextTrigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.default',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  viewTrigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.default',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+    fontWeight: 'semibold',
+  },
+  presetTrigger: {
+    borderRadius: 'sm',
+    color: 'gray.fg.default',
+    outline: '0',
+    cursor: 'pointer',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  monthSelect: select,
+  yearSelect: select,
+  root: { color: 'gray.fg.default' },
+  label: { fontWeight: 'medium', _disabled: { layerStyle: 'disabled' } },
+  input: { color: 'gray.fg.default' },
+  content: {
+    bg: 'gray.bg.surface',
+    color: 'gray.fg.default',
+    borderRadius: 'md',
+    borderWidth: '1px',
+    borderColor: 'gray.border.default',
+    boxShadow: 'lg',
+    outline: '0',
+  },
+  rangeText: { fontWeight: 'semibold' },
+  tableHeader: { fontWeight: 'medium', color: 'gray.fg.muted' },
+  weekNumberCellText: { color: 'gray.fg.muted' },
+  tableCellTrigger: {
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    outline: '0',
+    focusVisibleRing: 'inside',
+    _hover: { bg: 'gray.bg.subtle' },
+    _today: {
+      fontWeight: 'semibold',
+      textDecoration: 'underline',
+      textUnderlineOffset: '3px',
+      textDecorationThickness: '2px',
+    },
+    '&[data-outside-range]': { color: 'gray.fg.subtle' },
+    '&[data-in-range]': {
+      bg: 'colorPalette.bg.subtle',
+      color: 'colorPalette.fg.default',
+      borderRadius: '0',
+      _hover: { bg: 'colorPalette.bg.subtle' },
+    },
+    '&[data-selected]': {
+      bg: 'colorPalette.bg.default',
+      color: 'colorPalette.fg.onSolid',
+      _hover: { bg: 'colorPalette.bg.default' },
+    },
+    '&[data-in-range][data-selected]': {
+      bg: 'colorPalette.bg.default',
+      color: 'colorPalette.fg.onSolid',
+      borderRadius: '0',
+      '&[data-range-start][data-range-end]': { borderRadius: 'sm' },
+      '&[data-range-start]:not([data-range-end])': {
+        borderStartStartRadius: 'sm',
+        borderEndStartRadius: 'sm',
+      },
+      '&[data-range-end]:not([data-range-start])': {
+        borderStartEndRadius: 'sm',
+        borderEndEndRadius: 'sm',
+      },
+    },
+    _disabled: { opacity: '0.4', cursor: 'not-allowed' },
+    _unavailable: { textDecoration: 'line-through', opacity: '0.4', cursor: 'not-allowed' },
+  },
+} as const
+
+export const datePicker = defineSlotRecipe({
+  className: 'app-date-picker',
+  jsx: ['DatePicker.Root', 'DatePicker.RootProvider'],
+  slots: datePickerAnatomy.extendWith('indicatorGroup', 'weekNumberCellText', 'valueText').keys(),
+  base: {
+    root: { display: 'flex', flexDirection: 'column', width: 'full' },
+    control: { display: 'flex', alignItems: 'center', width: 'full', position: 'relative' },
+    input: { ...input.base, flex: '1', minWidth: '0' },
+    indicatorGroup: {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    trigger: nav,
+    clearTrigger: { ...nav, flexShrink: '0' },
+    positioner: {
+      '--date-picker-z-index': '{zIndex.popover}',
+      zIndex: 'calc(var(--date-picker-z-index) + var(--layer-index, 0))',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: 'calc(100vw - 2rem)',
+      '--date-picker-z-index': '{zIndex.popover}',
+      zIndex: 'calc(var(--date-picker-z-index) + var(--layer-index, 0))',
+      transformOrigin: 'var(--transform-origin)',
+      _open: {
+        _motionSafe: { animationStyle: 'scale-fade-in', animationDuration: 'fast' },
+      },
+      _closed: {
+        _motionSafe: { animationStyle: 'scale-fade-out', animationDuration: 'faster' },
+      },
+      _hidden: { display: 'none' },
+      _motionReduce: { animation: 'none' },
+    },
+    view: { display: 'flex', flexDirection: 'column', _hidden: { display: 'none' } },
+    viewControl: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+    prevTrigger: nav,
+    nextTrigger: nav,
+    viewTrigger: { ...nav, width: 'auto', flex: '1' },
+    table: { width: 'full', borderCollapse: 'separate', borderSpacing: '0' },
+    tableHeader: { textAlign: 'center' },
+    tableCell: { textAlign: 'center' },
+    weekNumberCellText: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
+    tableCellTrigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 'full',
+      position: 'relative',
+    },
+    presetTrigger: { ...nav, width: 'auto' },
+  },
+  variants: {
+    size: {
+      xs: {
+        ...sizeStyles,
+        input: { ...sizeStyles.input, ...input.variants.size.xs, minWidth: '0' },
+        view: {
+          ...sizeStyles.view,
+          '--table-cell-size': '{sizes.8}',
+          '--datepicker-nav-size': '{sizes.7}',
+          '--datepicker-select-height': '{sizes.8}',
+        },
+      },
+      sm: {
+        ...sizeStyles,
+        input: { ...sizeStyles.input, ...input.variants.size.sm, minWidth: '0' },
+        view: {
+          ...sizeStyles.view,
+          '--table-cell-size': '{sizes.9}',
+          '--datepicker-nav-size': '{sizes.8}',
+          '--datepicker-select-height': '{sizes.9}',
+        },
+      },
+      md: {
+        ...sizeStyles,
+        input: { ...sizeStyles.input, ...input.variants.size.md, minWidth: '0' },
+        view: {
+          ...sizeStyles.view,
+          '--table-cell-size': '{sizes.10}',
+          '--datepicker-nav-size': '{sizes.8}',
+          '--datepicker-select-height': '{sizes.10}',
+        },
+      },
+      lg: {
+        ...sizeStyles,
+        input: { ...sizeStyles.input, ...input.variants.size.lg, minWidth: '0' },
+        view: {
+          ...sizeStyles.view,
+          '--table-cell-size': '{sizes.10}',
+          '--datepicker-nav-size': '{sizes.9}',
+          '--datepicker-select-height': '{sizes.10}',
+        },
+      },
+      xl: {
+        ...sizeStyles,
+        input: { ...sizeStyles.input, ...input.variants.size.xl, minWidth: '0' },
+        view: {
+          ...sizeStyles.view,
+          '--table-cell-size': '{sizes.10}',
+          '--datepicker-nav-size': '{sizes.9}',
+          '--datepicker-select-height': '{sizes.10}',
+        },
+      },
+      unstyled: {},
+    },
+    variant: {
+      outline: { ...appearance, input: { ...appearance.input, ...input.variants.variant.outline } },
+      subtle: { ...appearance, input: { ...appearance.input, ...input.variants.variant.subtle } },
+      flushed: { ...appearance, input: { ...appearance.input, ...input.variants.variant.flushed } },
+      unstyled: {},
+    },
+    hideOutsideDays: {
+      true: { tableCellTrigger: { '&[data-outside-range]': { visibility: 'hidden' } } },
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+})

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

@@ -0,0 +1,191 @@
+import { dialogAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  title: { textStyle: 'lg' },
+  description: { textStyle: 'sm' },
+  closeTrigger: { top: '3', insetEnd: '3' },
+  content: { textStyle: 'sm', py: { base: '4', md: '6' }, gap: { base: '4', md: '6' } },
+  header: { gap: '0.5', px: { base: '4', md: '6' } },
+  body: { px: { base: '4', md: '6' } },
+  footer: { gap: '3', px: { base: '4', md: '6' } },
+} as const
+
+export const dialog = defineSlotRecipe({
+  className: 'app-dialog',
+  jsx: ['Dialog.Root', 'Dialog.RootProvider'],
+  slots: dialogAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    backdrop: {
+      background: 'black.a7',
+      height: '100dvh',
+      left: '0',
+      position: 'fixed',
+      top: '0',
+      width: '100dvw',
+      zIndex: 'var(--z-index)',
+      _open: {
+        _motionSafe: {
+          animationName: 'fade-in',
+          animationTimingFunction: 'out',
+          animationDuration: 'normal',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationName: 'fade-out',
+          animationTimingFunction: 'in',
+          animationDuration: 'fast',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    positioner: {
+      '--dialog-z-index': 'zIndex.modal',
+      display: 'flex',
+      height: '100dvh',
+      justifyContent: 'center',
+      left: 0,
+      overscrollBehaviorY: 'none',
+      position: 'fixed',
+      top: 0,
+      width: '100dvw',
+      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
+    },
+    title: { fontWeight: 'semibold' },
+    description: { color: 'gray.fg.muted' },
+    closeTrigger: { pos: 'absolute' },
+    content: {
+      '--dialog-z-index': 'zIndex.modal',
+      bg: 'gray.bg.surface',
+      borderRadius: 'md',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      my: 'var(--dialog-margin, var(--dialog-base-margin))',
+      outline: 0,
+      position: 'relative',
+      width: '100%',
+      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
+      _open: {
+        _motionSafe: { animationDuration: 'slowest' },
+      },
+      _closed: {
+        _motionSafe: { animationDuration: 'normal' },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    header: { display: 'flex', flexDirection: 'column', flex: '0' },
+    body: { display: 'flex', flex: '1', flexDirection: 'column', alignItems: 'flex-start' },
+    footer: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flex: '0' },
+  },
+  defaultVariants: {
+    size: 'md',
+    scrollBehavior: 'outside',
+    placement: 'center',
+    motionPreset: 'scale',
+  },
+  variants: {
+    motionPreset: {
+      scale: {
+        content: {
+          _open: {
+            _motionSafe: { animationName: 'scale-in, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'scale-out, fade-out' },
+          },
+        },
+      },
+      'slide-in-bottom': {
+        content: {
+          _open: {
+            _motionSafe: { animationName: 'slide-from-bottom, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-bottom, fade-out' },
+          },
+        },
+      },
+      'slide-in-top': {
+        content: {
+          _open: {
+            _motionSafe: { animationName: 'slide-from-top, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-top, fade-out' },
+          },
+        },
+      },
+      'slide-in-left': {
+        content: {
+          _open: {
+            _motionSafe: { animationName: 'slide-from-left, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-left, fade-out' },
+          },
+        },
+      },
+      'slide-in-right': {
+        content: {
+          _open: {
+            _motionSafe: { animationName: 'slide-from-right, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-right, fade-out' },
+          },
+        },
+      },
+      none: {
+        backdrop: { _open: { animation: 'none' }, _closed: { animation: 'none' } },
+        content: { _open: { animation: 'none' }, _closed: { animation: 'none' } },
+      },
+    },
+    size: {
+      xs: { ...sizeStyles, content: { ...sizeStyles.content, maxW: 'xs' } },
+      sm: { ...sizeStyles, content: { ...sizeStyles.content, maxW: 'sm' } },
+      md: { ...sizeStyles, content: { ...sizeStyles.content, maxW: 'md' } },
+      lg: { ...sizeStyles, content: { ...sizeStyles.content, maxW: 'lg' } },
+      xl: { ...sizeStyles, content: { ...sizeStyles.content, maxW: 'xl' } },
+      cover: {
+        ...sizeStyles,
+        positioner: { padding: '8' },
+        content: { ...sizeStyles.content, width: '100%', height: '100%', '--dialog-margin': '0' },
+      },
+      full: {
+        ...sizeStyles,
+        content: {
+          ...sizeStyles.content,
+          maxW: '100dvw',
+          minH: '100dvh',
+          '--dialog-margin': '0',
+          borderRadius: '0',
+        },
+      },
+      unstyled: {},
+    },
+    placement: {
+      center: {
+        positioner: { alignItems: 'center' },
+        content: { '--dialog-base-margin': 'auto', mx: 'auto' },
+      },
+      top: {
+        positioner: { alignItems: 'flex-start' },
+        content: { '--dialog-base-margin': 'spacing.16', mx: 'auto' },
+      },
+      bottom: {
+        positioner: { alignItems: 'flex-end' },
+        content: { '--dialog-base-margin': 'spacing.16', mx: 'auto' },
+      },
+    },
+    scrollBehavior: {
+      inside: {
+        positioner: { overflow: 'hidden' },
+        content: { maxH: 'calc(100% - 7.5rem)' },
+        body: { overflow: 'auto' },
+      },
+      outside: { positioner: { overflow: 'auto', pointerEvents: 'auto' } },
+    },
+  },
+})

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

@@ -0,0 +1,170 @@
+import { dialogAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  title: { textStyle: 'xl' },
+  description: { textStyle: 'sm' },
+  closeTrigger: { top: '3', insetEnd: '3' },
+  header: { gap: '1', pt: { base: '4', md: '6' }, pb: '4', px: { base: '4', md: '6' } },
+  body: { p: { base: '4', md: '6' } },
+  footer: { gap: '3', py: '4', px: { base: '4', md: '6' } },
+} as const
+
+export const drawer = defineSlotRecipe({
+  className: 'app-drawer',
+  jsx: ['Drawer.Root', 'Drawer.RootProvider'],
+  slots: dialogAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    backdrop: {
+      background: 'black.a7',
+      position: 'fixed',
+      insetInlineStart: '0',
+      top: '0',
+      width: '100vw',
+      height: '100dvh',
+      zIndex: 'overlay',
+      _open: {
+        _motionSafe: {
+          animationName: 'fade-in',
+          animationTimingFunction: 'out',
+          animationDuration: 'slow',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationName: 'fade-out',
+          animationTimingFunction: 'in',
+          animationDuration: 'normal',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    positioner: {
+      display: 'flex',
+      width: '100vw',
+      height: '100dvh',
+      position: 'fixed',
+      insetInlineStart: '0',
+      top: '0',
+      zIndex: 'modal',
+      overscrollBehaviorY: 'none',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: '100%',
+      outline: 0,
+      zIndex: 'modal',
+      maxH: '100dvh',
+      color: 'inherit',
+      bg: 'gray.bg.surface',
+      boxShadow: 'lg',
+      _open: {
+        _motionSafe: {
+          animationDuration: 'slowest',
+          animationTimingFunction: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationDuration: 'normal',
+          animationTimingFunction: 'cubic-bezier(0.3, 0.0, 0.8, 0.15)',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    header: { display: 'flex', flexDirection: 'column', flex: '0' },
+    body: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      flex: '1',
+      overflow: 'auto',
+    },
+    footer: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flex: '0' },
+    title: { color: 'gray.fg.default', fontWeight: 'semibold' },
+    description: { color: 'gray.fg.muted' },
+    closeTrigger: { pos: 'absolute' },
+  },
+  defaultVariants: { placement: 'end', size: 'sm' },
+  variants: {
+    size: {
+      xs: { ...sizeStyles, content: { maxW: 'xs' } },
+      sm: { ...sizeStyles, content: { maxW: 'sm' } },
+      md: { ...sizeStyles, content: { maxW: 'md' } },
+      lg: { ...sizeStyles, content: { maxW: 'lg' } },
+      xl: { ...sizeStyles, content: { maxW: 'xl' } },
+      full: { ...sizeStyles, content: { maxW: '100vw', h: '100dvh' } },
+      unstyled: {},
+    },
+    placement: {
+      start: {
+        positioner: { justifyContent: 'flex-start', alignItems: 'stretch' },
+        content: {
+          _open: {
+            _motionSafe: {
+              animationName: {
+                base: 'slide-from-left-full, fade-in',
+                _rtl: 'slide-from-right-full, fade-in',
+              },
+            },
+          },
+          _closed: {
+            _motionSafe: {
+              animationName: {
+                base: 'slide-to-left-full, fade-out',
+                _rtl: 'slide-to-right-full, fade-out',
+              },
+            },
+          },
+        },
+      },
+      end: {
+        positioner: { justifyContent: 'flex-end', alignItems: 'stretch' },
+        content: {
+          _open: {
+            _motionSafe: {
+              animationName: {
+                base: 'slide-from-right-full, fade-in',
+                _rtl: 'slide-from-left-full, fade-in',
+              },
+            },
+          },
+          _closed: {
+            _motionSafe: {
+              animationName: {
+                base: 'slide-to-right-full, fade-out',
+                _rtl: 'slide-to-left-full, fade-out',
+              },
+            },
+          },
+        },
+      },
+      top: {
+        positioner: { justifyContent: 'stretch', alignItems: 'flex-start' },
+        content: {
+          maxW: '100%',
+          _open: {
+            _motionSafe: { animationName: 'slide-from-top-full, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-top-full, fade-out' },
+          },
+        },
+      },
+      bottom: {
+        positioner: { justifyContent: 'stretch', alignItems: 'flex-end' },
+        content: {
+          maxW: '100%',
+          _open: {
+            _motionSafe: { animationName: 'slide-from-bottom-full, fade-in' },
+          },
+          _closed: {
+            _motionSafe: { animationName: 'slide-to-bottom-full, fade-out' },
+          },
+        },
+      },
+    },
+  },
+})