@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,162 @@
+import { segmentGroupAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const itemSpacing = {
+  gap: '2',
+  _horizontal: { _before: { insetBlock: '1.5' } },
+  _vertical: { _before: { insetInline: '1.5' } },
+} as const
+
+export const segmentGroup = defineSlotRecipe({
+  className: 'app-segment-group',
+  jsx: ['SegmentGroup.Root', 'SegmentGroup.RootProvider'],
+  slots: segmentGroupAnatomy.keys(),
+  base: {
+    root: {
+      bg: {
+        _light: 'gray.2',
+        _dark: 'gray.1',
+      },
+      borderRadius: 'md',
+      boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+      boxShadowColor: 'gray.border.subtle',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      isolation: 'isolate',
+      pos: 'relative',
+      _vertical: {
+        flexDirection: 'column',
+        alignItems: 'stretch',
+      },
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: 'md',
+      display: 'inline-flex',
+      flexShrink: '0',
+      fontWeight: 'medium',
+      justifyContent: 'center',
+      position: 'relative',
+      userSelect: 'none',
+      _disabled: {
+        opacity: '0.5',
+      },
+      '&:has(input:focus-visible)': {
+        focusVisibleRing: 'outside',
+      },
+
+      _before: {
+        content: '""',
+        position: 'absolute',
+        bg: 'gray.border.default',
+        transition: 'opacity 0.2s',
+      },
+
+      _horizontal: {
+        _before: {
+          insetInlineStart: '0',
+          width: '1px',
+        },
+      },
+
+      _vertical: {
+        _before: {
+          insetBlockStart: '0',
+          height: '1px',
+        },
+      },
+
+      '& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type': {
+        _before: {
+          opacity: '0',
+        },
+      },
+    },
+
+    indicator: {
+      bg: {
+        _light: 'white',
+        _dark: 'gray.2',
+      },
+      borderWidth: '1px',
+      borderColor: 'gray.border.default',
+      borderRadius: 'md',
+      height: 'var(--height)',
+      pos: 'absolute',
+      width: 'var(--width)',
+      zIndex: -1,
+    },
+  },
+
+  variants: {
+    size: {
+      unstyled: {},
+      xs: {
+        item: {
+          ...itemSpacing,
+          h: '8',
+          minW: '8',
+          textStyle: 'sm',
+          px: '2.5',
+          _icon: { boxSize: '4' },
+        },
+      },
+      sm: {
+        item: {
+          ...itemSpacing,
+          h: '9',
+          minW: '9',
+          textStyle: 'sm',
+          px: '3',
+          _icon: { boxSize: '4' },
+        },
+      },
+      md: {
+        item: {
+          ...itemSpacing,
+          h: '10',
+          minW: '10',
+          textStyle: 'sm',
+          px: '3.5',
+          _icon: { boxSize: '5' },
+        },
+      },
+      lg: {
+        item: {
+          ...itemSpacing,
+          h: '11',
+          minW: '11',
+          textStyle: 'md',
+          px: '4',
+          _icon: { boxSize: '5' },
+        },
+      },
+      xl: {
+        item: {
+          ...itemSpacing,
+          h: '12',
+          minW: '12',
+          textStyle: 'md',
+          px: '4.5',
+          _icon: { boxSize: '5.5' },
+        },
+      },
+    },
+    fitted: {
+      true: {
+        root: {
+          display: 'flex',
+        },
+        item: {
+          flex: '1',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    fitted: false,
+  },
+})

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

@@ -0,0 +1,157 @@
+import { selectAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: { gap: '1.5' },
+  label: { textStyle: 'sm' },
+  content: {
+    maxH: 'min(var(--available-height), {sizes.96})',
+    minWidth: 'max(var(--reference-width), {sizes.40})',
+  },
+  indicatorGroup: { gap: '1' },
+  itemGroupLabel: { gap: '1px' },
+} as const
+
+const appearance = {
+  content: { background: 'gray.bg.surface', borderRadius: 'sm', boxShadow: 'md', outline: 0 },
+  item: {
+    borderRadius: 'xs',
+    cursor: 'pointer',
+    _hover: { background: 'gray.bg.surface.hover' },
+    _highlighted: { background: 'gray.bg.surface.hover' },
+    _selected: {},
+    _disabled: { layerStyle: 'disabled' },
+  },
+  itemGroupLabel: {
+    color: 'gray.fg.subtle',
+    fontWeight: 'medium',
+    _after: { content: '""', width: '100%', height: '1px', bg: 'gray.4' },
+  },
+  itemIndicator: { color: 'colorPalette.fg.default' },
+  label: { fontWeight: 'medium' },
+  indicator: { color: { base: 'gray.fg.subtle' } },
+  trigger: {
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    outline: '0',
+    transition: 'common',
+    _placeholderShown: { color: 'gray.fg.subtle' },
+    _disabled: { layerStyle: 'disabled' },
+  },
+} as const
+
+export const select = defineSlotRecipe({
+  className: 'app-select',
+  jsx: ['Select.Root', 'Select.RootProvider'],
+  slots: selectAnatomy.extendWith('indicatorGroup').keys(),
+  base: {
+    root: { display: 'flex', flexDirection: 'column', width: 'full' },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      zIndex: 'dropdown',
+      _open: {
+        _motionSafe: { animationStyle: 'slide-fade-in', animationDuration: 'slow' },
+      },
+      _closed: {
+        _motionSafe: { animationStyle: 'slide-fade-out', animationDuration: 'fastest' },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    item: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'space-between',
+      userSelect: 'none',
+    },
+    indicatorGroup: { display: 'flex', alignItems: 'center', pointerEvents: 'none' },
+    indicator: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    itemGroupLabel: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    itemIndicator: { '&[hidden]': { display: 'none' } },
+    label: { userSelect: 'none' },
+    trigger: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'space-between',
+      minWidth: '0',
+      textAlign: 'start',
+      userSelect: 'none',
+      width: 'full',
+    },
+    valueText: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    variant: {
+      outline: {
+        ...appearance,
+        trigger: {
+          ...appearance.trigger,
+          borderWidth: '1px',
+          borderColor: 'gray.border.strong',
+          focusVisibleRing: 'inside',
+        },
+      },
+      surface: {
+        ...appearance,
+        trigger: {
+          ...appearance.trigger,
+          bg: 'gray.bg.surface',
+          borderWidth: '1px',
+          borderColor: 'gray.border.default',
+          focusVisibleRing: 'inside',
+        },
+      },
+      unstyled: {},
+    },
+    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' },
+        trigger: { px: '2', h: '8', textStyle: 'sm', gap: '2', _icon: { boxSize: '3.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' },
+        trigger: { px: '2.5', h: '9', textStyle: 'sm', gap: '2', _icon: { boxSize: '4' } },
+      },
+      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' },
+        trigger: { px: '3', h: '10', textStyle: 'md', gap: '2', _icon: { boxSize: '4' } },
+      },
+      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' },
+        trigger: { px: '3.5', h: '11', textStyle: 'md', gap: '2', _icon: { boxSize: '4.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' },
+        trigger: { px: '4', h: '12', textStyle: 'lg', gap: '3', _icon: { boxSize: '5' } },
+      },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const separator = defineRecipe({
+  className: 'app-separator',
+  jsx: ['Separator'],
+  base: { display: 'block', borderColor: 'gray.border.subtle' },
+  variants: {
+    variant: {
+      solid: { borderStyle: 'solid' },
+      dashed: { borderStyle: 'dashed' },
+      dotted: { borderStyle: 'dotted' },
+    },
+    orientation: {
+      horizontal: { borderTopWidth: 'var(--separator-thickness)' },
+      vertical: { borderInlineStartWidth: 'var(--separator-thickness)' },
+    },
+    size: {
+      xs: { '--separator-thickness': '0.5px' },
+      sm: { '--separator-thickness': '1px' },
+      md: { '--separator-thickness': '2px' },
+      lg: { '--separator-thickness': '3px' },
+    },
+  },
+  defaultVariants: { variant: 'solid', orientation: 'horizontal', size: 'sm' },
+})

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

@@ -0,0 +1,65 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const skeleton = defineRecipe({
+  className: 'app-skeleton',
+  jsx: ['Skeleton', 'SkeletonCircle', 'SkeletonText'],
+  staticCss: [{ loading: ['true', 'false'] }],
+  base: {},
+  variants: {
+    loading: {
+      true: {
+        borderRadius: 'sm',
+        boxShadow: 'none',
+        backgroundClip: 'padding-box',
+        cursor: 'default',
+        color: 'transparent',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        flexShrink: '0',
+        '&::before, &::after, *': {
+          visibility: 'hidden',
+        },
+      },
+      false: {
+        background: 'unset',
+        animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
+      },
+    },
+
+    circle: {
+      true: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: '0 0 auto',
+        borderRadius: '9999px',
+      },
+    },
+
+    variant: {
+      pulse: {
+        background: 'gray.bg.subtle.active',
+        animation: 'pulse',
+        animationDuration: 'var(--duration, 1.2s)',
+      },
+      shine: {
+        '--animate-from': '200%',
+        '--animate-to': '-200%',
+        '--start-color': 'colors.gray.bg.subtle',
+        '--end-color': 'colors.gray.bg.subtle.active',
+        backgroundImage:
+          'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
+        backgroundSize: '400% 100%',
+        animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
+      },
+      none: {
+        animation: 'none',
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'pulse',
+    loading: true,
+  },
+})

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

@@ -0,0 +1,164 @@
+import { sliderAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: {
+    gap: '1',
+    textStyle: 'sm',
+    '--slider-thumb-size': 'sizes.5',
+    '--slider-track-size': 'sizes.2',
+    '--slider-marker-center': '8px',
+    '--slider-marker-size': 'sizes.1',
+    '--slider-marker-inset': '4px',
+  },
+  label: { textStyle: 'sm' },
+  marker: { gap: 'calc(var(--slider-thumb-size) / 2)', textStyle: 'xs' },
+  markerIndicator: { width: 'var(--slider-marker-size)', height: 'var(--slider-marker-size)' },
+  thumb: { width: 'var(--slider-thumb-size)', height: 'var(--slider-thumb-size)' },
+} as const
+
+export const slider = defineSlotRecipe({
+  className: 'app-slider',
+  jsx: ['Slider.Root', 'Slider.RootProvider'],
+  slots: sliderAnatomy.extendWith('markerIndicator').keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      isolation: 'isolate',
+      touchAction: 'none',
+      width: 'full',
+    },
+    label: { fontWeight: 'medium' },
+    control: {
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+    track: {
+      overflow: 'hidden',
+      borderRadius: 'full',
+      flex: '1',
+    },
+    range: {
+      width: 'inherit',
+      height: 'inherit',
+    },
+    markerGroup: {
+      position: 'absolute!',
+      zIndex: '1',
+    },
+    marker: {
+      display: 'flex',
+      alignItems: 'center',
+      color: 'gray.fg.muted',
+    },
+    markerIndicator: { borderRadius: 'full', bg: 'colorPalette.fg.onSolid' },
+    thumb: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      outline: 0,
+      zIndex: '2',
+      borderRadius: 'full',
+      _focusVisible: {
+        ring: '2px',
+        ringColor: 'colorPalette.ring',
+        ringOffset: '2px',
+        ringOffsetColor: 'gray.bg.page',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+    orientation: 'horizontal',
+  },
+  variants: {
+    size: {
+      unstyled: {},
+      sm: sizeStyles,
+      md: sizeStyles,
+      lg: sizeStyles,
+    },
+    variant: {
+      outline: {
+        thumb: {
+          bg: 'gray.bg.surface',
+          borderWidth: '2px',
+          borderColor: 'colorPalette.bg.default',
+          boxShadow: 'xs',
+        },
+        range: {
+          bg: 'colorPalette.bg.default',
+        },
+        track: {
+          bg: 'gray.border.subtle',
+        },
+      },
+    },
+    orientation: {
+      vertical: {
+        root: {
+          display: 'inline-flex',
+        },
+        control: {
+          flexDirection: 'column',
+          height: '100%',
+        },
+        thumb: {
+          left: '50%',
+          translate: '-50% 0',
+        },
+        marker: {
+          flexDirection: 'row',
+        },
+      },
+      horizontal: {
+        control: {
+          flexDirection: 'row',
+          width: '100%',
+        },
+        thumb: {
+          top: '50%',
+          translate: '0 -50%',
+        },
+        marker: {
+          flexDirection: 'column',
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      size: ['sm', 'md', 'lg'],
+      orientation: 'vertical',
+      css: {
+        control: {
+          minWidth: 'var(--slider-thumb-size)',
+          '&[data-has-mark-label]': { marginEnd: '4' },
+        },
+        track: { width: 'var(--slider-track-size)' },
+        markerGroup: {
+          insetStart: 'var(--slider-marker-center)',
+          insetBlock: 'var(--slider-marker-inset)',
+        },
+      },
+    },
+    {
+      size: ['sm', 'md', 'lg'],
+      orientation: 'horizontal',
+      css: {
+        control: {
+          minHeight: 'var(--slider-thumb-size)',
+          '&[data-has-mark-label]': { marginBottom: '4' },
+        },
+        track: { height: 'var(--slider-track-size)' },
+        markerGroup: {
+          top: 'var(--slider-marker-center)',
+          insetInline: 'var(--slider-marker-inset)',
+        },
+      },
+    },
+  ],
+})

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

@@ -0,0 +1,34 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const spinner = defineRecipe({
+  className: 'app-spinner',
+  jsx: ['Spinner'],
+  base: {
+    '--spinner-track-color': 'transparent',
+    animation: 'spin',
+    animationDuration: 'slowest',
+    borderBottomColor: 'var(--spinner-track-color)',
+    borderColor: 'currentColor',
+    borderInlineStartColor: 'var(--spinner-track-color)',
+    borderRadius: 'full',
+    borderStyle: 'solid',
+    borderWidth: '2px',
+    display: 'inline-block',
+    height: 'var(--spinner-size)',
+    width: 'var(--spinner-size)',
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      inherit: { '--spinner-size': '1em' },
+      xs: { '--spinner-size': 'sizes.3' },
+      sm: { '--spinner-size': 'sizes.4' },
+      md: { '--spinner-size': 'sizes.5' },
+      lg: { '--spinner-size': 'sizes.6' },
+      xl: { '--spinner-size': 'sizes.7' },
+      '2xl': { '--spinner-size': 'sizes.8' },
+    },
+  },
+})