@oyolincc/create 0.4.0 → 0.5.0

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

@@ -0,0 +1,112 @@
+import { progressAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const stripeBackground = `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`
+
+const sizeStyles = {
+  root: { textStyle: 'sm' },
+  label: { gap: '1' },
+  valueText: { textStyle: 'xs', lineHeight: '1' },
+} as const
+
+const appearance = {
+  range: {
+    '--track-color': 'colors.colorPalette.bg.default',
+    bgColor: 'var(--track-color)',
+    _indeterminate: {
+      backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`,
+    },
+  },
+  label: { fontWeight: 'medium' },
+  valueText: { fontWeight: 'medium' },
+} as const
+
+export const progress = defineSlotRecipe({
+  slots: progressAnatomy.keys(),
+  className: 'app-progress',
+  jsx: ['Progress.Root', 'Progress.RootProvider'],
+  base: {
+    root: { position: 'relative' },
+    track: { overflow: 'hidden', position: 'relative' },
+    range: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transitionProperty: 'width, height',
+      transitionDuration: 'slow',
+      height: '100%',
+      _indeterminate: {
+        '--animate-from-x': '-40%',
+        '--animate-to-x': '100%',
+        position: 'absolute',
+        willChange: 'inset-inline-start',
+        minWidth: '50%',
+        animation: 'position 1s ease infinite normal none running',
+      },
+    },
+    label: { display: 'inline-flex', alignItems: 'center' },
+  },
+  variants: {
+    variant: {
+      solid: {
+        ...appearance,
+        track: { bgColor: 'gray.bg.subtle' },
+        range: {
+          ...appearance.range,
+          bgColor: 'var(--track-color)',
+          color: 'colorPalette.fg.onSolid',
+        },
+      },
+      subtle: {
+        ...appearance,
+        track: { bgColor: 'colorPalette.bg.subtle.active' },
+        range: {
+          ...appearance.range,
+          bgColor: 'var(--track-color)',
+          color: 'colorPalette.fg.onSolid',
+        },
+      },
+      unstyled: {},
+    },
+    shape: {
+      square: {},
+      rounded: { track: { borderRadius: 'xs' } },
+      full: { track: { borderRadius: 'full' } },
+      unstyled: {},
+    },
+    striped: {
+      true: {
+        range: {
+          backgroundImage: stripeBackground,
+          backgroundSize: `var(--stripe-size) var(--stripe-size)`,
+          '--stripe-size': '1rem',
+          '--stripe-color': { _light: 'rgba(255, 255, 255, 0.3)', _dark: 'rgba(0, 0, 0, 0.3)' },
+        },
+      },
+    },
+    animated: {
+      true: {
+        range: {
+          '--animate-from': 'var(--stripe-size)',
+          animation: 'bg-position 1s linear infinite',
+        },
+      },
+    },
+    size: {
+      xs: { ...sizeStyles, track: { h: '1.5' } },
+      sm: { ...sizeStyles, track: { h: '2' } },
+      md: { ...sizeStyles, track: { h: '2.5' } },
+      lg: { ...sizeStyles, track: { h: '3' } },
+      xl: { ...sizeStyles, track: { h: '3.5' } },
+      unstyled: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: ['solid', 'subtle'],
+      striped: true,
+      css: { range: { _indeterminate: { backgroundImage: stripeBackground } } },
+    },
+  ],
+  defaultVariants: { variant: 'solid', size: 'md', shape: 'rounded' },
+})

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

@@ -0,0 +1,223 @@
+import { radioGroupAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const appearance = {
+  item: {
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    _focusVisible: { focusVisibleRing: 'outside' },
+    _disabled: { layerStyle: 'disabled' },
+  },
+  itemControl: { borderRadius: 'inherit' },
+  itemDescription: { opacity: '0.64' },
+  itemAddon: { borderBottomRadius: 'inherit', borderColor: 'inherit', borderTopWidth: '1px' },
+  itemIndicator: {
+    borderRadius: 'full',
+    _after: { content: '""', borderRadius: 'full' },
+  },
+} as const
+
+const sizeStyles = {
+  root: { gap: '1.5' },
+  label: { textStyle: 'label' },
+  itemContent: { gap: '1' },
+  itemDescription: { textStyle: 'sm' },
+} as const
+
+export const radioCard = defineSlotRecipe({
+  className: 'app-radio-card',
+  jsx: ['RadioCard.Root', 'RadioCard.RootProvider'],
+  slots: radioGroupAnatomy
+    .extendWith('itemContent', 'itemDescription', 'itemAddon', 'itemIndicator')
+    .keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+    },
+    item: {
+      flexDirection: 'column',
+      display: 'flex',
+      userSelect: 'none',
+      width: 'full',
+      position: 'relative',
+    },
+    itemControl: {
+      display: 'flex',
+      width: 'full',
+      justifyContent: 'var(--radio-card-justify)',
+      alignItems: 'var(--radio-card-align)',
+    },
+    itemContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1',
+      minWidth: '0',
+      justifyContent: 'var(--radio-card-justify)',
+      alignItems: 'var(--radio-card-align)',
+    },
+    itemIndicator: {
+      _after: { display: 'block' },
+      '&[data-custom]': { _after: { display: 'none' } },
+      alignItems: 'center',
+      display: 'inline-flex',
+      flexShrink: '0',
+      justifyContent: 'center',
+      verticalAlign: 'top',
+    },
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+    align: 'start',
+    justify: 'start',
+    orientation: 'horizontal',
+  },
+  variants: {
+    variant: {
+      unstyled: {},
+      subtle: {
+        ...appearance,
+        item: {
+          ...appearance.item,
+          background: 'gray.bg.subtle',
+          color: 'gray.fg.default',
+          _checked: {
+            background: 'colorPalette.bg.subtle',
+            color: 'colorPalette.fg.default',
+          },
+        },
+        itemIndicator: {
+          ...appearance.itemIndicator,
+          borderWidth: '1px',
+          borderColor: 'gray.border.default',
+          _checked: {
+            borderColor: 'colorPalette.bg.default',
+            color: 'colorPalette.bg.default',
+            _after: {
+              bg: 'colorPalette.bg.default',
+            },
+          },
+        },
+      },
+      outline: {
+        ...appearance,
+        item: {
+          ...appearance.item,
+          borderWidth: '1px',
+          borderColor: 'gray.border.strong',
+          _checked: {
+            boxShadow: '0 0 0 1px var(--shadow-color)',
+            boxShadowColor: 'colorPalette.bg.default',
+            borderColor: 'colorPalette.bg.default',
+          },
+        },
+        itemIndicator: {
+          ...appearance.itemIndicator,
+          borderWidth: '1px',
+          borderColor: 'gray.border.strong',
+          _checked: {
+            bg: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.onSolid',
+            borderColor: 'colorPalette.bg.default',
+            _after: {
+              background: 'colorPalette.fg.onSolid',
+            },
+          },
+        },
+      },
+      surface: {
+        ...appearance,
+        item: {
+          ...appearance.item,
+          borderWidth: '1px',
+          background: 'gray.bg.surface',
+          borderColor: 'gray.border.default',
+          color: 'gray.fg.default',
+          _checked: {
+            boxShadow: '0 0 0 1px var(--shadow-color)',
+            boxShadowColor: 'colorPalette.bg.default',
+            borderColor: 'colorPalette.bg.default',
+          },
+        },
+        itemIndicator: {
+          ...appearance.itemIndicator,
+          borderWidth: '1px',
+          borderColor: 'gray.border.strong',
+          _checked: {
+            background: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.onSolid',
+            borderColor: 'colorPalette.bg.default',
+            _after: {
+              background: 'colorPalette.fg.onSolid',
+            },
+          },
+        },
+      },
+      solid: {
+        ...appearance,
+        item: {
+          ...appearance.item,
+          borderWidth: '1px',
+          _checked: {
+            bg: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.onSolid',
+            borderColor: 'colorPalette.bg.default',
+          },
+        },
+        itemIndicator: {
+          ...appearance.itemIndicator,
+          borderWidth: '1px',
+          borderColor: 'gray.border.strong',
+          _checked: {
+            background: 'colorPalette.fg.onSolid',
+            color: 'colorPalette.bg.default',
+            borderColor: 'colorPalette.fg.onSolid',
+            _after: {
+              bg: 'colorPalette.bg.default',
+            },
+          },
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      sm: {
+        ...sizeStyles,
+        itemControl: { gap: '1.5', p: '3' },
+        itemAddon: { px: '3', py: '1.5' },
+        itemIndicator: { boxSize: '4.5', _after: { boxSize: '1.5' } },
+        itemText: { textStyle: 'sm' },
+      },
+      md: {
+        ...sizeStyles,
+        itemControl: { gap: '2', p: '4' },
+        itemAddon: { px: '4', py: '2' },
+        itemIndicator: { boxSize: '5', _after: { boxSize: '2' } },
+        itemText: { textStyle: 'sm' },
+      },
+      lg: {
+        ...sizeStyles,
+        itemControl: { gap: '3', p: '4' },
+        itemAddon: { px: '4', py: '2' },
+        itemIndicator: { boxSize: '5.5', _after: { boxSize: '2.5' } },
+        itemText: { textStyle: 'md' },
+      },
+    },
+    justify: {
+      start: { item: { '--radio-card-justify': 'flex-start' } },
+      center: { item: { '--radio-card-justify': 'center' } },
+      end: { item: { '--radio-card-justify': 'flex-end' } },
+    },
+    align: {
+      start: { item: { '--radio-card-align': 'flex-start' }, itemControl: { textAlign: 'start' } },
+      center: { item: { '--radio-card-align': 'center' }, itemControl: { textAlign: 'center' } },
+      end: { item: { '--radio-card-align': 'flex-end' }, itemControl: { textAlign: 'end' } },
+    },
+    orientation: {
+      horizontal: { itemControl: { flexDirection: 'row' } },
+      vertical: { itemControl: { flexDirection: 'column' } },
+    },
+  },
+})

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

@@ -0,0 +1,78 @@
+import { radioGroupAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const radioGroup = defineSlotRecipe({
+  className: 'app-radio-group',
+  jsx: ['RadioGroup.Root', 'RadioGroup.RootProvider'],
+  slots: radioGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    itemControl: {
+      '&[data-custom]': { _after: { display: 'none' } },
+      alignItems: 'center',
+      borderRadius: 'full',
+      display: 'inline-flex',
+      flexShrink: 0,
+      justifyContent: 'center',
+      verticalAlign: 'top',
+      _after: { content: '""', display: 'block', borderRadius: 'full' },
+      _focusVisible: { focusVisibleRing: 'outside' },
+    },
+    item: {
+      alignItems: 'center',
+      cursor: 'pointer',
+      display: 'flex',
+      _disabled: { layerStyle: 'disabled' },
+    },
+    itemText: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        itemControl: {
+          boxShadow: 'inset 0 0 0 1px var(--shadow-color)',
+          boxShadowColor: 'gray.border.default',
+          _checked: {
+            bg: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.onSolid',
+            boxShadowColor: 'colorPalette.bg.default',
+            _after: {
+              background: 'colorPalette.fg.onSolid',
+            },
+          },
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      sm: {
+        root: { gap: '3' },
+        item: { gap: '2' },
+        itemControl: { boxSize: '4.5', _after: { boxSize: '40%' } },
+        itemText: { textStyle: 'sm' },
+      },
+      md: {
+        root: { gap: '3' },
+        item: { gap: '3' },
+        itemControl: { boxSize: '5', _after: { boxSize: '40%' } },
+        itemText: { textStyle: 'md' },
+      },
+      lg: {
+        root: { gap: '3' },
+        item: { gap: '3' },
+        itemControl: { boxSize: '5.5', _after: { boxSize: '40%' } },
+        itemText: { textStyle: 'lg' },
+      },
+    },
+  },
+})

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

@@ -0,0 +1,98 @@
+import { ratingGroupAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const ratingGroup = defineSlotRecipe({
+  className: 'app-rating-group',
+  jsx: ['RatingGroup.Root', 'RatingGroup.RootProvider'],
+  slots: ratingGroupAnatomy.extendWith('itemIndicator').keys(),
+  base: {
+    root: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      verticalAlign: 'top',
+    },
+    control: {
+      alignItems: 'center',
+      display: 'inline-flex',
+    },
+    item: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      userSelect: 'none',
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+    },
+    itemIndicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      '--clip-path': { base: 'inset(0 50% 0 0)', _rtl: 'inset(0 0 0 50%)' },
+      _icon: {
+        stroke: 'currentColor',
+        display: 'inline-block',
+        flexShrink: 0,
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        left: 0,
+        top: 0,
+      },
+      '& [data-bg]': {
+        color: 'gray.bg.subtle',
+      },
+      '& [data-fg]': {
+        color: 'transparent',
+      },
+      '&[data-highlighted]:not([data-half])': {
+        '& [data-fg]': {
+          color: 'colorPalette.bg.default',
+        },
+      },
+      '&[data-half]': {
+        '& [data-fg]': {
+          color: 'colorPalette.bg.default',
+          clipPath: 'var(--clip-path)',
+        },
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      unstyled: {},
+      xs: {
+        root: { gap: '2' },
+        control: { gap: '0.5' },
+        itemIndicator: { width: '4', height: '4' },
+      },
+      sm: {
+        root: { gap: '2' },
+        control: { gap: '0.5' },
+        itemIndicator: { width: '4.5', height: '4.5' },
+      },
+      md: {
+        root: { gap: '3' },
+        control: { gap: '0.5' },
+        itemIndicator: { width: '5', height: '5' },
+      },
+      lg: {
+        root: { gap: '3' },
+        control: { gap: '0.5' },
+        itemIndicator: { width: '5.5', height: '5.5' },
+      },
+      xl: {
+        root: { gap: '3' },
+        control: { gap: '0.5' },
+        itemIndicator: { width: '6', height: '6' },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,119 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scrollArea = defineSlotRecipe({
+  className: 'app-scroll-area',
+  jsx: ['ScrollArea.Root', 'ScrollArea.RootProvider'],
+  slots: ['root', 'viewport', 'content', 'scrollbar', 'thumb', 'corner'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden',
+      '--scrollbar-margin': '0px',
+      '--scrollbar-size': 'calc(var(--thumb-size) + calc(var(--scrollbar-margin) * 2))',
+    },
+    viewport: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%',
+      WebkitOverflowScrolling: 'touch',
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+      '&[data-overflow-x] [data-pinned]': {
+        _after: {
+          content: '""',
+          position: 'absolute',
+          pointerEvents: 'none',
+          top: '0',
+          bottom: '-1px',
+          width: '32px',
+        },
+      },
+      '&[data-overflow-x]:not([data-at-left]) [data-pinned="left"]': {
+        _after: {
+          insetInlineEnd: '0',
+          translate: '100% 0',
+          boxShadow: 'inset',
+        },
+      },
+    },
+    scrollbar: {
+      alignItems: 'center',
+      display: 'flex',
+      position: 'relative',
+      touchAction: 'none',
+      userSelect: 'none',
+      zIndex: 'overlay',
+      _vertical: {
+        flexDirection: 'column',
+        width: 'var(--scrollbar-size)',
+        py: 'var(--scrollbar-margin)',
+        '&:not([data-overflow-y])': {
+          display: 'none',
+        },
+      },
+      _horizontal: {
+        flexDirection: 'row',
+        height: 'var(--scrollbar-size)',
+        px: 'var(--scrollbar-margin)',
+        '&:not([data-overflow-x])': {
+          display: 'none',
+        },
+      },
+    },
+    thumb: {
+      borderRadius: 'full',
+      bg: 'var(--thumb-bg)',
+      transitionDuration: 'normal',
+      transitionProperty: 'background, color, box-shadow',
+      transitionTimingFunction: 'default',
+      _vertical: { width: 'var(--thumb-size)' },
+      _horizontal: { height: 'var(--thumb-size)' },
+    },
+    corner: {},
+  },
+  defaultVariants: {
+    size: 'md',
+    scrollbar: 'auto',
+  },
+  variants: {
+    scrollbar: {
+      auto: {
+        scrollbar: {
+          '&[data-scrolling], &[data-hover]': {
+            '--thumb-bg': '{colors.gray.bg.subtle.active}',
+          },
+        },
+      },
+      visible: {
+        content: {
+          '&[data-overflow-y]': {
+            pe: 'var(--scrollbar-size)',
+          },
+          '&[data-overflow-x]': {
+            pb: 'var(--scrollbar-size)',
+          },
+        },
+        scrollbar: {
+          bg: 'gray.bg.subtle',
+          borderRadius: 'full',
+        },
+        thumb: {
+          '--thumb-bg': '{colors.gray.bg.subtle.active}',
+        },
+      },
+    },
+    size: {
+      xs: { root: { '--thumb-size': 'sizes.1' } },
+      sm: { root: { '--thumb-size': 'sizes.1.5' } },
+      md: { root: { '--thumb-size': 'sizes.2' } },
+      lg: { root: { '--thumb-size': 'sizes.2.5' } },
+    },
+  },
+})