@oyolincc/create 0.4.0 → 0.5.0

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

@@ -0,0 +1,120 @@
+import { checkboxAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const controlAppearance = {
+  borderWidth: '1px',
+  borderColor: 'transparent',
+  borderRadius: 'xs',
+  cursor: 'pointer',
+  focusVisibleRing: 'outside',
+} as const
+
+export const checkbox = defineSlotRecipe({
+  slots: checkboxAnatomy.keys(),
+  className: 'app-checkbox',
+  jsx: ['Checkbox.Root', 'Checkbox.RootProvider', 'Checkbox.Group', 'CheckboxGroup'],
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      position: 'relative',
+    },
+    control: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+    },
+    label: {
+      userSelect: 'none',
+    },
+  },
+
+  variants: {
+    size: {
+      unstyled: {},
+      sm: {
+        root: { gap: '2' },
+        label: { textStyle: 'sm' },
+        control: { boxSize: '4.5', _icon: { boxSize: '3' } },
+      },
+      md: {
+        root: { gap: '3' },
+        label: { textStyle: 'md' },
+        control: { boxSize: '5', _icon: { boxSize: '3.5' } },
+      },
+      lg: {
+        root: { gap: '3' },
+        label: { textStyle: 'lg' },
+        control: { boxSize: '5.5', _icon: { boxSize: '4' } },
+      },
+    },
+
+    variant: {
+      unstyled: {},
+      solid: {
+        root: { _disabled: { layerStyle: 'disabled' } },
+        label: { fontWeight: 'medium' },
+        control: {
+          ...controlAppearance,
+          borderColor: 'gray.border.subtle',
+          _checked: {
+            bg: 'colorPalette.bg.default',
+            borderColor: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.onSolid',
+          },
+          _invalid: {
+            background: 'red.9',
+          },
+        },
+      },
+      surface: {
+        root: { _disabled: { layerStyle: 'disabled' } },
+        label: { fontWeight: 'medium' },
+        control: {
+          ...controlAppearance,
+          bg: 'colorPalette.bg.surface',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.default',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      subtle: {
+        root: { _disabled: { layerStyle: 'disabled' } },
+        label: { fontWeight: 'medium' },
+        control: {
+          ...controlAppearance,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      outline: {
+        root: { _disabled: { layerStyle: 'disabled' } },
+        label: { fontWeight: 'medium' },
+        control: {
+          ...controlAppearance,
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.strong',
+          color: 'colorPalette.fg.default',
+          _checked: {
+            borderColor: 'colorPalette.bg.default',
+          },
+        },
+      },
+      plain: {
+        root: { _disabled: { layerStyle: 'disabled' } },
+        label: { fontWeight: 'medium' },
+        control: {
+          ...controlAppearance,
+          color: 'colorPalette.fg.default',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,22 @@
+import { clipboardAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const clipboard = defineSlotRecipe({
+  className: 'app-clipboard',
+  jsx: ['Clipboard.Root', 'Clipboard.RootProvider'],
+  slots: [...clipboardAnatomy.keys(), 'valueText'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: '1.5',
+    },
+    label: {
+      fontWeight: 'medium',
+      textStyle: 'sm',
+      color: 'gray.fg.default',
+      gap: '0.5',
+    },
+  },
+})

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

@@ -0,0 +1,26 @@
+import { collapsibleAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const collapsible = defineSlotRecipe({
+  className: 'app-collapsible',
+  jsx: ['Collapsible.Root', 'Collapsible.RootProvider'],
+  slots: collapsibleAnatomy.keys(),
+  base: {
+    content: {
+      overflow: 'hidden',
+      _open: {
+        _motionSafe: {
+          animationName: 'expand-height, fade-in',
+          animationDuration: 'slow',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationName: 'collapse-height, fade-out',
+          animationDuration: 'normal',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+  },
+})

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

@@ -0,0 +1,299 @@
+import { colorPickerAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+import { input } from './input'
+
+const sizeStyles = {
+  root: { gap: '1.5' },
+  label: { textStyle: 'sm' },
+  valueText: { textStyle: 'sm' },
+  control: { gap: '2' },
+  trigger: {
+    gap: '2',
+    minH: 'var(--input-height)',
+    minW: 'var(--input-height)',
+    px: '1',
+    '&[data-fit-content]': { px: '0' },
+  },
+  content: { width: '64', p: '4', gap: '3' },
+  area: { height: '180px' },
+  areaThumb: { boxSize: 'var(--thumb-size)' },
+  channelSliderThumb: { boxSize: 'var(--thumb-size)' },
+  sliders: { gap: '2', px: '1' },
+  channelSliderLabel: { textStyle: 'xs' },
+  channelSliderValueText: { textStyle: 'xs' },
+  channelText: { textStyle: 'xs' },
+  formatSelect: { textStyle: 'xs', minH: '6' },
+  formatTrigger: { textStyle: 'xs' },
+  eyeDropperTrigger: { boxSize: '8', _icon: { boxSize: '4' } },
+  swatchGroup: { gap: '2' },
+  swatch: { boxSize: 'var(--swatch-size)' },
+  swatchIndicator: { _icon: { boxSize: '4' } },
+  view: { gap: '2' },
+  channelSlider: {
+    _horizontal: { height: 'var(--slider-height)' },
+    _vertical: { width: 'var(--slider-height)', height: '32' },
+  },
+  channelSliderTrack: {
+    _horizontal: { height: 'var(--slider-height)' },
+    _vertical: { width: 'var(--slider-height)' },
+  },
+} as const
+
+const appearance = {
+  root: { color: 'gray.fg.default' },
+  label: { color: 'gray.fg.default', fontWeight: 'medium', _disabled: { layerStyle: 'disabled' } },
+  trigger: {
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    outline: '0',
+    focusVisibleRing: 'outside',
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  content: {
+    bg: 'gray.bg.surface',
+    color: 'gray.fg.default',
+    borderRadius: 'md',
+    boxShadow: 'lg',
+    borderWidth: '1px',
+    borderColor: 'gray.border.default',
+    outline: '0',
+  },
+  area: { borderRadius: 'sm', _disabled: { opacity: '0.5' } },
+  areaThumb: {
+    borderRadius: 'full',
+    borderWidth: '2px',
+    borderColor: 'white',
+    boxShadow: '0 0 2px 1px black',
+    outline: '0',
+    focusVisibleRing: 'outside',
+    focusRingColor: 'white',
+  },
+  channelSlider: { borderRadius: 'sm', _disabled: { opacity: '0.5' } },
+  channelSliderTrack: { borderRadius: 'inherit' },
+  channelSliderThumb: {
+    borderRadius: 'full',
+    borderWidth: '2px',
+    borderColor: 'white',
+    boxShadow: '0 0 2px 1px black',
+    outline: '0',
+    focusVisibleRing: 'outside',
+    focusRingColor: 'white',
+    focusRingOffset: '1px',
+  },
+  channelSliderLabel: { color: 'gray.fg.muted' },
+  channelText: { color: 'gray.fg.muted', fontWeight: 'medium', textTransform: 'capitalize' },
+  channelInput: { color: 'gray.fg.default' },
+  formatSelect: {
+    bg: 'gray.bg.page',
+    color: 'gray.fg.default',
+    textTransform: 'uppercase',
+    borderWidth: '1px',
+    borderColor: 'gray.border.strong',
+    borderRadius: 'sm',
+    outline: '0',
+    focusVisibleRing: 'inside',
+    _light: { colorScheme: 'light' },
+    _dark: { colorScheme: 'dark' },
+    '& option': { bg: 'gray.bg.page', color: 'gray.fg.default' },
+  },
+  formatTrigger: {
+    borderRadius: 'sm',
+    outline: '0',
+    focusVisibleRing: 'outside',
+    cursor: 'pointer',
+  },
+  eyeDropperTrigger: {
+    borderRadius: 'sm',
+    borderWidth: '1px',
+    borderColor: 'gray.border.strong',
+    outline: '0',
+    focusVisibleRing: 'outside',
+    cursor: 'pointer',
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  swatchTrigger: {
+    outline: '0',
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    focusVisibleRing: 'outside',
+    _disabled: { layerStyle: 'disabled', cursor: 'not-allowed' },
+  },
+  swatch: { borderRadius: 'sm', boxShadow: '0 0 0 1px {colors.gray.border.strong}' },
+  swatchIndicator: { borderRadius: 'full', bg: 'rgba(0,0,0,0.6)', color: 'white' },
+} as const
+
+export const colorPicker = defineSlotRecipe({
+  className: 'app-color-picker',
+  jsx: ['ColorPicker.Root', 'ColorPicker.RootProvider'],
+  slots: colorPickerAnatomy.extendWith('sliders', 'channelText').keys(),
+  base: {
+    root: { display: 'flex', flexDirection: 'column' },
+    valueText: { textAlign: 'start' },
+    control: { display: 'flex', alignItems: 'center', position: 'relative' },
+    trigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      '&[data-fit-content]': { '--input-height': 'unset', px: '0', border: '0' },
+    },
+    positioner: {
+      '--color-picker-z-index': '{zIndex.popover}',
+      zIndex: 'calc(var(--color-picker-z-index) + var(--layer-index, 0))',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: 'calc(100vw - 2rem)',
+      transformOrigin: 'var(--transform-origin)',
+      '--color-picker-z-index': '{zIndex.popover}',
+      zIndex: 'calc(var(--color-picker-z-index) + var(--layer-index, 0))',
+      _open: {
+        _motionSafe: { animationStyle: 'scale-fade-in', animationDuration: 'fast' },
+      },
+      _closed: {
+        _motionSafe: { animationStyle: 'scale-fade-out', animationDuration: 'faster' },
+      },
+      _hidden: { display: 'none' },
+      _motionReduce: { animation: 'none' },
+    },
+    area: { overflow: 'hidden' },
+    areaBackground: { height: 'full' },
+    channelSlider: {
+      position: 'relative',
+      flex: '1',
+      _horizontal: { width: 'full' },
+    },
+    channelSliderTrack: { _vertical: { height: 'full' } },
+    channelSliderThumb: { transform: 'translate(-50%, -50%)' },
+    sliders: { display: 'flex', flexDirection: 'column', flex: '1' },
+    channelSliderValueText: { fontVariantNumeric: 'tabular-nums' },
+    channelInput: {
+      ...input.base,
+      '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+        WebkitAppearance: 'none',
+        margin: '0',
+      },
+    },
+    eyeDropperTrigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+    },
+    swatchGroup: { display: 'flex', flexWrap: 'wrap' },
+    swatchTrigger: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
+    swatch: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    swatchIndicator: { display: 'inline-flex', '&[hidden]': { display: 'none' } },
+    transparencyGrid: { borderRadius: 'inherit' },
+    view: { display: 'flex', flexDirection: 'column' },
+  },
+  variants: {
+    size: {
+      '2xs': {
+        ...sizeStyles,
+        channelInput: input.variants.size['2xs'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.7}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.4.5}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3}',
+          '--thumb-size': '{sizes.3}',
+        },
+      },
+      xs: {
+        ...sizeStyles,
+        channelInput: input.variants.size['xs'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.8}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.5}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      sm: {
+        ...sizeStyles,
+        channelInput: input.variants.size['sm'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.9}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.6}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      md: {
+        ...sizeStyles,
+        channelInput: input.variants.size['md'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.10}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.7}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      lg: {
+        ...sizeStyles,
+        channelInput: input.variants.size['lg'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.11}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.7}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      xl: {
+        ...sizeStyles,
+        channelInput: input.variants.size['xl'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.12}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.8}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      '2xl': {
+        ...sizeStyles,
+        channelInput: input.variants.size['2xl'],
+        trigger: { ...sizeStyles.trigger, '--input-height': '{sizes.16}' },
+        swatch: { ...sizeStyles.swatch, '--swatch-size': '{sizes.10}' },
+        area: { ...sizeStyles.area, '--thumb-size': '{sizes.3.5}' },
+        channelSlider: {
+          ...sizeStyles.channelSlider,
+          '--slider-height': '{sizes.3.5}',
+          '--thumb-size': '{sizes.3.5}',
+        },
+      },
+      unstyled: {},
+    },
+    variant: {
+      outline: {
+        ...appearance,
+        channelInput: { ...appearance.channelInput, ...input.variants.variant.outline },
+        trigger: { ...appearance.trigger, borderWidth: '1px', borderColor: 'gray.border.strong' },
+      },
+      subtle: {
+        ...appearance,
+        channelInput: { ...appearance.channelInput, ...input.variants.variant.subtle },
+        trigger: {
+          ...appearance.trigger,
+          borderWidth: '1px',
+          borderColor: 'transparent',
+          bg: 'gray.bg.subtle',
+        },
+      },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+})

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

@@ -0,0 +1,141 @@
+import { comboboxAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+import { input } from './input'
+
+const sizeStyles = {
+  root: { gap: '1.5' },
+  label: { textStyle: 'label' },
+  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.border.subtle' },
+  },
+  itemIndicator: { color: 'colorPalette.fg.default' },
+  trigger: { color: 'gray.fg.subtle' },
+  clearTrigger: { color: 'gray.fg.muted' },
+  empty: { color: 'gray.fg.subtle' },
+} as const
+
+export const combobox = defineSlotRecipe({
+  className: 'app-combobox',
+  jsx: ['Combobox.Root', 'Combobox.RootProvider'],
+  slots: comboboxAnatomy.extendWith('indicatorGroup').keys(),
+  base: {
+    root: { display: 'flex', flexDirection: 'column', width: 'full' },
+    input: { ...input.base, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    control: { position: 'relative' },
+    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' },
+      },
+      '&[data-empty]:not(:has([data-scope=combobox][data-part=empty]))': { opacity: 0 },
+      _motionReduce: { animation: 'none' },
+    },
+    item: { alignItems: 'center', display: 'flex', justifyContent: 'space-between' },
+    itemGroup: { display: 'flex', flexDirection: 'column' },
+    itemGroupLabel: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    itemIndicator: { '&[hidden]': { display: 'none' } },
+    indicatorGroup: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pos: 'absolute',
+      insetEnd: '0',
+      top: '0',
+      bottom: '0',
+    },
+    empty: { display: 'flex', alignItems: 'center' },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    variant: {
+      outline: { ...appearance, input: input.variants.variant.outline },
+      surface: { ...appearance, input: input.variants.variant.surface },
+      subtle: { ...appearance, input: input.variants.variant.subtle },
+      unstyled: {},
+    },
+    size: {
+      xs: {
+        ...sizeStyles,
+        input: { ...input.variants.size.xs, pe: '12' },
+        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' },
+        indicatorGroup: { ...sizeStyles.indicatorGroup, px: '2', _icon: { boxSize: '3.5' } },
+        empty: { px: '1', minH: '8' },
+      },
+      sm: {
+        ...sizeStyles,
+        input: { ...input.variants.size.sm, pe: '14' },
+        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' },
+        indicatorGroup: { ...sizeStyles.indicatorGroup, px: '2.5', _icon: { boxSize: '4' } },
+        empty: { px: '1.5', minH: '9' },
+      },
+      md: {
+        ...sizeStyles,
+        input: { ...input.variants.size.md, pe: '14' },
+        content: { ...sizeStyles.content, p: '1', gap: '0.5', textStyle: 'md' },
+        indicatorGroup: { ...sizeStyles.indicatorGroup, px: '3', _icon: { boxSize: '4' } },
+        item: { px: '2', minH: '10', gap: '2', _icon: { boxSize: '4' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { ...sizeStyles.itemGroupLabel, px: '2', height: '10' },
+        empty: { px: '2', minH: '10' },
+      },
+      lg: {
+        ...sizeStyles,
+        input: { ...input.variants.size.lg, pe: '16' },
+        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' },
+        indicatorGroup: { ...sizeStyles.indicatorGroup, px: '3.5', _icon: { boxSize: '4.5' } },
+        empty: { px: '2.5', minH: '11' },
+      },
+      xl: {
+        ...sizeStyles,
+        input: { ...input.variants.size.xl, pe: '16' },
+        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' },
+        indicatorGroup: { ...sizeStyles.indicatorGroup, px: '4', _icon: { boxSize: '5' } },
+        empty: { px: '3', minH: '12' },
+      },
+      unstyled: {},
+    },
+  },
+})