@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,64 @@
+import { editableAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = { root: { gap: '1.5' }, control: { gap: '1.5' } } as const
+
+export const editable = defineSlotRecipe({
+  slots: editableAnatomy.keys(),
+  className: 'app-editable',
+  jsx: ['Editable.Root', 'Editable.RootProvider'],
+  base: {
+    root: { alignItems: 'center', display: 'inline-flex', position: 'relative', width: 'full' },
+    preview: {
+      alignItems: 'center',
+      borderRadius: 'sm',
+      cursor: 'default',
+      display: 'inline-flex',
+      transitionDuration: 'normal',
+      transitionProperty: 'common',
+      _disabled: { userSelect: 'none' },
+      _hover: { bg: 'gray.bg.subtle' },
+    },
+    input: {
+      borderRadius: 'sm',
+      focusRingWidth: '2px',
+      focusRing: 'inside',
+      transitionDuration: 'normal',
+      transitionProperty: 'common',
+      width: 'full',
+      _focusVisible: { outlineOffset: '-1px' },
+    },
+    control: { alignItems: 'center', display: 'inline-flex' },
+  },
+  defaultVariants: { size: 'md' },
+  variants: {
+    size: {
+      '2xs': {
+        ...sizeStyles,
+        preview: { textStyle: 'xs', px: '2', py: '0.5' },
+        input: { textStyle: 'xs', px: '2', py: '0.5' },
+      },
+      xs: {
+        ...sizeStyles,
+        preview: { textStyle: 'sm', px: '2.5', py: '1.5' },
+        input: { textStyle: 'sm', px: '2.5', py: '1.5' },
+      },
+      sm: {
+        ...sizeStyles,
+        preview: { textStyle: 'sm', px: '3', py: '2' },
+        input: { textStyle: 'sm', px: '3', py: '2' },
+      },
+      md: {
+        ...sizeStyles,
+        preview: { textStyle: 'sm', px: '3.5', py: '2.5' },
+        input: { textStyle: 'sm', px: '3.5', py: '2.5' },
+      },
+      lg: {
+        ...sizeStyles,
+        preview: { textStyle: 'md', px: '4', py: '2.5' },
+        input: { textStyle: 'md', px: '4', py: '2.5' },
+      },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,41 @@
+import { fieldAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const field = defineSlotRecipe({
+  className: 'app-field',
+  jsx: ['Field.Root', 'Field.RootProvider'],
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+    },
+    label: {
+      alignItems: 'center',
+      color: 'gray.fg.default',
+      display: 'flex',
+      gap: '0.5',
+      textAlign: 'start',
+      userSelect: 'none',
+      textStyle: 'label',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    requiredIndicator: {
+      color: 'colorPalette.bg.default',
+    },
+    helperText: {
+      color: 'gray.fg.muted',
+      textStyle: 'sm',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    errorText: {
+      color: 'red.9',
+      textStyle: 'sm',
+    },
+  },
+})

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

@@ -0,0 +1,47 @@
+import { fieldsetAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const fieldset = defineSlotRecipe({
+  className: 'app-fieldset',
+  jsx: ['Fieldset.Root', 'Fieldset.RootProvider'],
+  slots: fieldsetAnatomy.extendWith('content', 'control').keys(),
+  base: {
+    root: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: 'full',
+      flexDirection: { base: 'column', md: 'row' },
+      gap: { base: '5', md: '8' },
+    },
+    control: {
+      maxW: 'xs',
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      gap: '1',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      maxW: '2xl',
+      gap: '4',
+    },
+    legend: {
+      color: 'gray.fg.default',
+      fontWeight: 'semibold',
+    },
+    helperText: {
+      color: 'gray.fg.muted',
+      textStyle: 'sm',
+    },
+    errorText: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      color: 'red.9',
+      gap: '2',
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+  },
+})

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

@@ -0,0 +1,86 @@
+import { fileUploadAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const fileUpload = defineSlotRecipe({
+  className: 'app-file-upload',
+  jsx: ['FileUpload.Root', 'FileUpload.RootProvider'],
+  slots: fileUploadAnatomy.keys(),
+  base: {
+    root: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+      width: 'full',
+    },
+    label: {
+      textStyle: 'label',
+    },
+    dropzone: {
+      alignItems: 'center',
+      background: 'gray.bg.surface',
+      borderRadius: 'md',
+      borderStyle: 'dashed',
+      borderWidth: '2px',
+      display: 'flex',
+      flexDirection: 'column',
+
+      focusVisibleRing: 'outside',
+      justifyContent: 'center',
+      transition: 'background',
+      width: 'full',
+      _dragging: {
+        background: 'gray.bg.surface.hover',
+        borderStyle: 'solid',
+        borderColor: 'colorPalette.bg.default',
+      },
+    },
+    item: {
+      alignItems: 'start',
+      animationDuration: 'normal',
+      animationName: 'fade-in',
+      background: 'gray.bg.surface',
+      borderRadius: 'md',
+      borderWidth: '1px',
+      display: 'flex',
+      pos: 'relative',
+      width: 'full',
+    },
+    itemGroup: {
+      display: 'flex',
+      alignItems: 'start',
+      flexDirection: 'column',
+      width: 'full',
+    },
+    itemName: {
+      color: 'gray.fg.default',
+      fontWeight: 'medium',
+    },
+    itemSizeText: {
+      color: 'gray.fg.muted',
+    },
+    itemDeleteTrigger: {
+      color: 'gray.fg.subtle',
+    },
+    itemPreviewImage: {
+      aspectRatio: '1',
+      objectFit: 'cover',
+      maxW: '20',
+      borderRadius: 'sm',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      md: {
+        root: { gap: '4' },
+        dropzone: { px: '6', py: '4', minHeight: 'xs', gap: '0' },
+        item: { p: '4', gap: '3', textStyle: 'sm' },
+        itemGroup: { gap: '3' },
+        itemDeleteTrigger: { _icon: { boxSize: '4' } },
+      },
+    },
+  },
+})

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

@@ -0,0 +1,78 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const group = defineRecipe({
+  className: 'app-group',
+  jsx: ['Group', 'ButtonGroup'],
+  base: {
+    display: 'inline-flex',
+    position: 'relative',
+    gap: '2',
+    '& > *': {
+      _focusVisible: {
+        zIndex: 1,
+      },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+      },
+      vertical: {
+        flexDirection: 'column',
+      },
+    },
+    attached: {
+      true: {
+        gap: '0',
+      },
+    },
+    grow: {
+      true: {
+        display: 'flex',
+        '& > *': {
+          flex: 1,
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: 'horizontal',
+      attached: true,
+      css: {
+        '& > *:first-child': {
+          borderEndRadius: '0',
+          marginEnd: '-1px',
+        },
+        '& > *:last-child': {
+          borderStartRadius: '0',
+        },
+        '& > *:not(:first-child):not(:last-child)': {
+          borderRadius: '0',
+          marginEnd: '-1px',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      attached: true,
+      css: {
+        '& > *:first-child': {
+          borderBottomRadius: '0',
+          marginBottom: '-1px',
+        },
+        '& > *:last-child': {
+          borderTopRadius: '0',
+        },
+        '& > *:not(:first-child):not(:last-child)': {
+          borderRadius: '0',
+          marginBottom: '-1px',
+        },
+      },
+    },
+  ],
+})

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

@@ -0,0 +1,24 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const heading = defineRecipe({
+  className: 'app-heading',
+  jsx: ['Heading'],
+  base: { fontWeight: 'semibold' },
+  variants: {
+    size: {
+      xs: { textStyle: 'xs' },
+      sm: { textStyle: 'sm' },
+      md: { textStyle: 'md' },
+      lg: { textStyle: 'lg' },
+      xl: { textStyle: 'xl' },
+      '2xl': { textStyle: '2xl' },
+      '3xl': { textStyle: '3xl' },
+      '4xl': { textStyle: '4xl' },
+      '5xl': { textStyle: '5xl' },
+      '6xl': { textStyle: '6xl' },
+      '7xl': { textStyle: '7xl' },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'xl' },
+})

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

@@ -0,0 +1,47 @@
+import { hoverCardAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const hoverCard = defineSlotRecipe({
+  className: 'app-hover-card',
+  jsx: ['HoverCard.Root', 'HoverCard.RootProvider'],
+  slots: hoverCardAnatomy.keys(),
+  base: {
+    content: {
+      '--hovercard-bg': 'colors.gray.bg.surface',
+
+      bg: 'var(--hovercard-bg)',
+      borderRadius: 'md',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: '80',
+      outline: '0',
+      padding: '4',
+      position: 'relative',
+      textStyle: 'sm',
+      transformOrigin: 'var(--transform-origin)',
+      zIndex: 'popover',
+      _open: {
+        _motionSafe: {
+          animationStyle: 'slide-fade-in',
+          animationDuration: 'fast',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationStyle: 'slide-fade-out',
+          animationDuration: 'faster',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    arrow: {
+      '--arrow-size': 'sizes.3',
+      '--arrow-background': 'var(--hovercard-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '0.5px',
+      borderInlineStartWidth: '0.5px',
+    },
+  },
+})

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

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const icon = defineRecipe({
+  className: 'app-icon',
+  jsx: ['Icon'],
+  base: {
+    color: 'currentcolor',
+    display: 'inline-block',
+    flexShrink: '0',
+    verticalAlign: 'middle',
+    lineHeight: '1em',
+  },
+  defaultVariants: { size: 'md' },
+  variants: {
+    size: {
+      '2xs': { boxSize: '3' },
+      xs: { boxSize: '4' },
+      sm: { boxSize: '4.5' },
+      md: { boxSize: '5' },
+      lg: { boxSize: '5.5' },
+      xl: { boxSize: '6' },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,120 @@
+import { timeline } from './timeline'
+import { datePicker } from './date-picker'
+import { colorPicker } from './color-picker'
+import { treeView } from './tree-view'
+import { steps } from './steps'
+import { nativeSelect } from './native-select'
+import { clipboard } from './clipboard'
+import { tag } from './tag'
+import { breadcrumb } from './breadcrumb'
+import { table } from './table'
+import { separator } from './separator'
+import { inputAddon } from './input-addon'
+import { inputGroup } from './input-group'
+import { fieldset } from './fieldset'
+import { radioCard } from './radio-card'
+import { tagsInput } from './tags-input'
+import { editable } from './editable'
+import { segmentGroup } from './segment-group'
+import { ratingGroup } from './rating-group'
+import { slider } from './slider'
+import { pinInput } from './pin-input'
+import { numberInput } from './number-input'
+import { drawer } from './drawer'
+import { hoverCard } from './hover-card'
+import { popover } from './popover'
+import { menu } from './menu'
+import { text } from './text'
+import { link } from './link'
+import { heading } from './heading'
+import { progress } from './progress'
+import { progressCircle } from './progress-circle'
+import { alert } from './alert'
+import { avatar } from './avatar'
+import { pagination } from './pagination'
+import { collapsible } from './collapsible'
+import { accordion } from './accordion'
+import { radioGroup } from './radio-group'
+import { switchRecipe } from './switch'
+import { textarea } from './textarea'
+import { skeleton } from './skeleton'
+import { card } from './card'
+import { badge } from './badge'
+import { fileUpload } from './file-upload'
+import { scrollArea } from './scroll-area'
+import { tabs } from './tabs'
+import { tooltip } from './tooltip'
+import { checkbox } from './checkbox'
+import { field } from './field'
+import { input } from './input'
+import { combobox } from './combobox'
+import { icon } from './icon'
+import { toast } from './toast'
+import { select } from './select'
+import { dialog } from './dialog'
+import { spinner } from './spinner'
+import { absoluteCenter } from './absolute-center'
+import { group } from './group'
+import { button } from './button'
+export const recipes = {
+  separator,
+  button,
+  group,
+  absoluteCenter,
+  spinner,
+  icon,
+  input,
+  badge,
+  skeleton,
+  textarea,
+  heading,
+  link,
+  text,
+  inputAddon,
+}
+export const slotRecipes = {
+  timeline,
+  datePicker,
+  colorPicker,
+  treeView,
+  steps,
+  clipboard,
+  nativeSelect,
+  table,
+  tag,
+  breadcrumb,
+  inputGroup,
+  fieldset,
+  radioCard,
+  tagsInput,
+  editable,
+  numberInput,
+  pinInput,
+  slider,
+  ratingGroup,
+  segmentGroup,
+  menu,
+  popover,
+  hoverCard,
+  drawer,
+  avatar,
+  alert,
+  progress,
+  progressCircle,
+  dialog,
+  select,
+  toast,
+  combobox,
+  field,
+  checkbox,
+  tooltip,
+  tabs,
+  scrollArea,
+  fileUpload,
+  card,
+  switchRecipe,
+  radioGroup,
+  accordion,
+  collapsible,
+  pagination,
+}

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

@@ -0,0 +1,51 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const appearance = {
+  borderRadius: 'sm',
+  color: 'gray.fg.muted',
+} as const
+
+export const inputAddon = defineRecipe({
+  className: 'app-input-addon',
+  jsx: ['InputAddon'],
+  base: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: '0 0 auto',
+    whiteSpace: 'nowrap',
+    width: 'auto',
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      unstyled: {},
+      outline: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'gray.border.strong',
+      },
+      surface: {
+        ...appearance,
+        bg: 'gray.bg.surface',
+        borderWidth: '1px',
+        borderColor: 'gray.border.default',
+      },
+      subtle: {
+        ...appearance,
+        bg: 'gray.bg.subtle',
+      },
+    },
+    size: {
+      unstyled: {},
+      xs: { textStyle: 'sm', px: '2', _icon: { boxSize: '4' } },
+      sm: { textStyle: 'sm', px: '2.5', _icon: { boxSize: '4.5' } },
+      md: { textStyle: 'md', px: '3', _icon: { boxSize: '5' } },
+      lg: { textStyle: 'md', px: '3.5', _icon: { boxSize: '5' } },
+      xl: { textStyle: 'lg', px: '4', _icon: { boxSize: '5.5' } },
+    },
+  },
+})

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

@@ -0,0 +1,77 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const inputPadding = {
+  '& > input:not(:first-child)': {
+    ps: 'calc(var(--input-group-padding) - var(--input-group-start-offset, 0px))',
+  },
+  '& > input:not(:last-child)': {
+    pe: 'calc(var(--input-group-padding) - var(--input-group-end-offset, 0px))',
+  },
+} as const
+
+export const inputGroup = defineSlotRecipe({
+  className: 'app-input-group',
+  jsx: ['InputGroup'],
+  slots: ['root', 'element'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+    },
+    element: {
+      alignItems: 'center',
+      color: 'gray.fg.muted',
+      display: 'flex',
+      height: 'full',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: '2',
+      _icon: {
+        color: 'gray.fg.subtle',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      unstyled: {},
+      xs: {
+        element: { minW: '8', _icon: { boxSize: '4' } },
+        root: {
+          ...inputPadding,
+          '--input-group-padding': '{spacing.7}',
+        },
+      },
+      sm: {
+        root: {
+          ...inputPadding,
+          '--input-group-padding': '{spacing.8}',
+        },
+        element: { minW: '9', _icon: { boxSize: '4.5' } },
+      },
+      md: {
+        root: {
+          ...inputPadding,
+          '--input-group-padding': '{spacing.9}',
+        },
+        element: { minW: '10', _icon: { boxSize: '5' } },
+      },
+      lg: {
+        root: {
+          ...inputPadding,
+          '--input-group-padding': '{spacing.10}',
+        },
+        element: { minW: '11', _icon: { boxSize: '5' } },
+      },
+      xl: {
+        root: {
+          ...inputPadding,
+          '--input-group-padding': '{spacing.11}',
+        },
+        element: { minW: '11', _icon: { boxSize: '5.5' } },
+      },
+    },
+  },
+})