@oyolincc/create 0.4.0 → 0.5.0

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

@@ -0,0 +1,201 @@
+import { tagsInputAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: { gap: '1.5' },
+  label: { textStyle: 'label' },
+  control: {
+    '--input-height': 'var(--tags-input-height)',
+    minH: 'var(--tags-input-height)',
+    px: 'var(--tags-input-px)',
+  },
+  clearTrigger: { boxSize: 'calc(var(--tags-input-item-height) / 1.5)', _icon: { boxSize: '5' } },
+  input: {
+    px: 'calc(var(--tags-input-item-px) / 1.25)',
+    height: 'var(--tags-input-item-height)',
+    minWidth: '20',
+  },
+  itemInput: {
+    px: 'var(--tags-input-item-px)',
+    height: 'var(--tags-input-item-height)',
+    lineHeight: '1',
+  },
+  itemPreview: { height: 'var(--tags-input-item-height)', px: 'var(--tags-input-item-px)' },
+} as const
+
+const appearance = {
+  control: {
+    '--focus-color': 'colors.colorPalette.ring',
+    '--error-color': 'colors.red.9',
+    borderRadius: 'sm',
+    transitionDuration: 'normal',
+    transitionProperty: 'border-color, box-shadow',
+    _disabled: { opacity: '0.5' },
+  },
+  clearTrigger: {
+    borderRadius: 'xs',
+    color: 'gray.fg.muted',
+    focusRingWidth: '2px',
+    focusVisibleRing: 'inside',
+    cursor: { base: 'pointer', _disabled: 'initial' },
+  },
+  input: { outline: 'none' },
+  itemInput: { outline: 'none' },
+  itemDeleteTrigger: {
+    borderRadius: 'xs',
+    cursor: 'pointer',
+    _hover: { bg: 'colorPalette.bg.subtle' },
+  },
+  itemPreview: { borderRadius: 'xs' },
+} as const
+
+export const tagsInput = defineSlotRecipe({
+  className: 'app-tags-input',
+  jsx: ['TagsInput.Root', 'TagsInput.RootProvider'],
+  slots: tagsInputAnatomy.keys(),
+  base: {
+    root: { display: 'flex', flexDirection: 'column', width: 'full' },
+    control: { alignItems: 'center', display: 'flex', flexWrap: 'wrap', pos: 'relative' },
+    clearTrigger: { alignItems: 'center', display: 'flex', justifyContent: 'center' },
+    input: { flex: '1', _readOnly: { display: 'none' } },
+    itemInput: { minWidth: '2ch', verticalAlign: 'middle' },
+    itemDeleteTrigger: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    itemPreview: { alignItems: 'center', display: 'inline-flex', userSelect: 'none' },
+    itemText: { lineClamp: '1' },
+  },
+  defaultVariants: { size: 'md', variant: 'outline' },
+  variants: {
+    variant: {
+      outline: {
+        ...appearance,
+        control: {
+          ...appearance.control,
+          borderWidth: '1px',
+          _invalid: { borderColor: 'var(--error-color)' },
+          _focus: {
+            outlineWidth: '1px',
+            outlineStyle: 'solid',
+            outlineColor: 'var(--focus-color)',
+            borderColor: 'var(--focus-color)',
+            _invalid: { outlineColor: 'var(--error-color)', borderColor: 'var(--error-color)' },
+          },
+        },
+        itemPreview: {
+          ...appearance.itemPreview,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+          _highlighted: { bg: 'colorPalette.bg.subtle.hover' },
+        },
+      },
+      subtle: {
+        ...appearance,
+        control: {
+          ...appearance.control,
+          bg: 'gray.bg.subtle',
+          color: 'gray.fg.default',
+          borderWidth: '1px',
+          borderColor: 'transparent',
+          _focus: {
+            outlineWidth: '1px',
+            outlineStyle: 'solid',
+            outlineColor: 'var(--focus-color)',
+            borderColor: 'var(--focus-color)',
+            _invalid: { outlineColor: 'var(--error-color)', borderColor: 'var(--error-color)' },
+          },
+        },
+        itemPreview: {
+          ...appearance.itemPreview,
+          bg: 'gray.bg.surface',
+          borderWidth: '1px',
+          _highlighted: { bg: 'gray.bg.surface.hover', borderColor: 'gray.border.default.hover' },
+        },
+      },
+      surface: {
+        ...appearance,
+        control: {
+          ...appearance.control,
+          bg: 'gray.bg.surface',
+          borderWidth: '1px',
+          borderColor: 'gray.border.default',
+          _focus: {
+            outlineWidth: '1px',
+            outlineStyle: 'solid',
+            outlineColor: 'var(--focus-color)',
+            borderColor: 'var(--focus-color)',
+            _invalid: { outlineColor: 'var(--error-color)', borderColor: 'var(--error-color)' },
+          },
+        },
+        itemPreview: {
+          ...appearance.itemPreview,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+          _highlighted: { bg: 'colorPalette.bg.subtle.hover' },
+        },
+      },
+      unstyled: {},
+    },
+    size: {
+      xs: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--tags-input-height': 'sizes.8',
+          '--tags-input-px': 'spacing.1.5',
+          '--tags-input-item-height': 'sizes.5',
+          '--tags-input-item-px': 'spacing.1',
+          _icon: { boxSize: '3' },
+          textStyle: 'xs',
+        },
+        control: { ...sizeStyles.control, gap: '1' },
+        itemPreview: { ...sizeStyles.itemPreview, gap: '1' },
+        itemDeleteTrigger: { boxSize: '3.5', me: '-1px' },
+      },
+      sm: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--tags-input-height': 'sizes.9',
+          '--tags-input-px': 'spacing.1.5',
+          '--tags-input-item-height': 'sizes.6',
+          '--tags-input-item-px': 'spacing.1.5',
+          _icon: { boxSize: '3.5' },
+          textStyle: 'sm',
+        },
+        control: { ...sizeStyles.control, gap: '1' },
+        itemPreview: { ...sizeStyles.itemPreview, gap: '1' },
+        itemDeleteTrigger: { boxSize: '4.5', me: '-0.5' },
+      },
+      md: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--tags-input-height': 'sizes.10',
+          '--tags-input-px': 'spacing.1.5',
+          '--tags-input-item-height': 'sizes.7',
+          '--tags-input-item-px': 'spacing.2',
+          _icon: { boxSize: '3.5' },
+          textStyle: 'sm',
+        },
+        control: { ...sizeStyles.control, gap: '1.5' },
+        itemPreview: { ...sizeStyles.itemPreview, gap: '1' },
+        itemDeleteTrigger: { boxSize: '5', me: '-1' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--tags-input-height': 'sizes.11',
+          '--tags-input-px': 'spacing.1.5',
+          '--tags-input-item-height': 'sizes.8',
+          '--tags-input-item-px': 'spacing.2.5',
+          _icon: { boxSize: '4' },
+          textStyle: 'md',
+        },
+        control: { ...sizeStyles.control, gap: '1.5' },
+        itemPreview: { ...sizeStyles.itemPreview, gap: '1' },
+        itemDeleteTrigger: { boxSize: '6', me: '-1.5' },
+      },
+      unstyled: {},
+    },
+  },
+})

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

@@ -0,0 +1,7 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const text = defineRecipe({
+  className: 'app-text',
+  jsx: ['Text'],
+  variants: {},
+})

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

@@ -0,0 +1,90 @@
+import { defineRecipe } from '@pandacss/dev'
+
+const appearance = {
+  borderRadius: 'sm',
+  outline: '0',
+  transition: 'colors',
+  transitionProperty: 'box-shadow, border-color',
+  _disabled: { layerStyle: 'disabled' },
+} as const
+
+export const textarea = defineRecipe({
+  className: 'app-textarea',
+  jsx: ['Textarea'],
+  base: {
+    appearance: 'none',
+    minWidth: '0',
+    position: 'relative',
+    width: '100%',
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'surface',
+  },
+  variants: {
+    variant: {
+      unstyled: {},
+      outline: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'gray.border.strong',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'red.9',
+          focusRingColor: 'red.9',
+        },
+      },
+      surface: {
+        ...appearance,
+        bg: 'gray.bg.surface',
+        borderWidth: '1px',
+        borderColor: 'gray.border.default',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'red.9',
+          focusRingColor: 'red.9',
+        },
+      },
+      subtle: {
+        ...appearance,
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        bg: 'gray.bg.subtle',
+        color: 'gray.fg.default',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          borderColor: 'red.9',
+          focusRingColor: 'red.9',
+        },
+      },
+      flushed: {
+        ...appearance,
+        borderBottomWidth: '1px',
+        borderBottomColor: 'gray.border.strong',
+        borderRadius: '0',
+        color: 'gray.fg.default',
+        px: '0',
+        _invalid: {
+          borderColor: 'red.9',
+        },
+        _focus: {
+          borderColor: 'colorPalette.bg.default',
+          boxShadowColor: 'colorPalette.bg.default',
+          boxShadow: '0 1px 0 0 var(--shadow-color)',
+          _invalid: {
+            borderColor: 'red.9',
+            boxShadowColor: 'red.9',
+          },
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      xs: { textStyle: 'sm', px: '2', py: '5px', scrollPaddingBottom: '5px' },
+      sm: { textStyle: 'sm', px: '2.5', py: '7px', scrollPaddingBottom: '7px' },
+      md: { textStyle: 'md', px: '3', py: '7px', scrollPaddingBottom: '7px' },
+      lg: { textStyle: 'md', px: '3.5', py: '9px', scrollPaddingBottom: '9px' },
+      xl: { textStyle: 'lg', px: '4', py: '9px', scrollPaddingBottom: '9px' },
+    },
+  },
+})

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

@@ -0,0 +1,137 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: { '--timeline-thickness': '1px' },
+  item: {
+    '--timeline-content-gap': '{spacing.6}',
+    gap: '4',
+    _last: { '--timeline-content-gap': '0' },
+  },
+  separator: {
+    borderInlineStartWidth: 'var(--timeline-thickness)',
+    marginInlineStart: 'calc(-1 * var(--timeline-thickness) / 2)',
+    insetInlineStart: 'calc(var(--timeline-indicator-size) / 2)',
+  },
+  indicator: { boxSize: 'var(--timeline-indicator-size)', fontSize: 'var(--timeline-font-size)' },
+  content: { pb: 'var(--timeline-content-gap)', gap: '2' },
+  title: { gap: '1.5' },
+  description: { textStyle: 'xs' },
+} as const
+
+const appearance = {
+  separator: { borderColor: 'gray.border.strong' },
+  indicator: {
+    outline: '2px solid {colors.gray.bg.page}',
+    borderRadius: 'full',
+    fontWeight: 'medium',
+  },
+  title: { fontWeight: 'medium' },
+  description: { color: 'gray.fg.muted' },
+} as const
+
+export const timeline = defineSlotRecipe({
+  className: 'app-timeline',
+  jsx: ['Timeline.Root'],
+  slots: ['root', 'item', 'connector', 'separator', 'indicator', 'content', 'title', 'description'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      '--timeline-separator-display': 'block',
+    },
+    item: { display: 'flex', position: 'relative', alignItems: 'flex-start', flexShrink: '0' },
+    connector: { alignSelf: 'stretch', position: 'relative' },
+    separator: {
+      display: 'var(--timeline-separator-display)',
+      position: 'absolute',
+      insetBlock: '0',
+    },
+    indicator: {
+      position: 'relative',
+      flexShrink: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      _icon: { boxSize: '1em' },
+    },
+    content: { display: 'flex', flexDirection: 'column', width: 'full', minWidth: '0' },
+    title: { display: 'flex', flexWrap: 'wrap', alignItems: 'center' },
+  },
+  variants: {
+    variant: {
+      subtle: {
+        ...appearance,
+        indicator: {
+          ...appearance.indicator,
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      solid: {
+        ...appearance,
+        indicator: {
+          ...appearance.indicator,
+          bg: 'colorPalette.bg.default',
+          color: 'colorPalette.fg.onSolid',
+        },
+      },
+      outline: {
+        ...appearance,
+        indicator: {
+          ...appearance.indicator,
+          bg: 'gray.bg.page',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.border.strong',
+          color: 'colorPalette.fg.default',
+        },
+      },
+      plain: appearance,
+      unstyled: {},
+    },
+    showLastSeparator: {
+      true: { item: { _last: { '--timeline-separator-display': 'block' } } },
+      false: { item: { _last: { '--timeline-separator-display': 'none' } } },
+    },
+    size: {
+      sm: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--timeline-indicator-size': '{sizes.4}',
+          '--timeline-font-size': '{fontSizes.2xs}',
+        },
+        title: { ...sizeStyles.title, textStyle: 'xs' },
+      },
+      md: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--timeline-indicator-size': '{sizes.5}',
+          '--timeline-font-size': '{fontSizes.xs}',
+        },
+        title: { ...sizeStyles.title, textStyle: 'sm' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--timeline-indicator-size': '{sizes.6}',
+          '--timeline-font-size': '{fontSizes.xs}',
+        },
+        title: { ...sizeStyles.title, mt: '0.5', textStyle: 'sm' },
+      },
+      xl: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          '--timeline-indicator-size': '{sizes.8}',
+          '--timeline-font-size': '{fontSizes.sm}',
+        },
+        title: { ...sizeStyles.title, mt: '1.5', textStyle: 'sm' },
+      },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'solid', showLastSeparator: false },
+})

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

@@ -0,0 +1,52 @@
+import { toastAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const toast = defineSlotRecipe({
+  className: 'app-toast',
+  jsx: ['Toast.Root', 'Root'],
+  slots: toastAnatomy.keys(),
+  base: {
+    root: {
+      alignItems: 'start',
+      background: 'gray.bg.surface',
+      borderRadius: 'md',
+      boxShadow: 'lg',
+      display: 'flex',
+      gap: '4',
+      height: 'var(--height)',
+      minWidth: 'sm',
+      opacity: 'var(--opacity)',
+      overflowWrap: 'anywhere',
+      p: '4',
+      position: 'relative',
+      scale: 'var(--scale)',
+      transitionDuration: 'slow',
+      transitionProperty: 'translate, scale, opacity, height',
+      transitionTimingFunction: 'default',
+      translate: 'var(--x) var(--y)',
+      width: 'full',
+      willChange: 'translate, opacity, scale',
+      zIndex: 'var(--z-index)',
+    },
+    title: {
+      color: 'gray.fg.default',
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    description: {
+      color: 'gray.fg.muted',
+      textStyle: 'sm',
+    },
+    actionTrigger: {
+      color: 'colorPalette.fg.default',
+      cursor: 'pointer',
+      fontWeight: 'semibold',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '2',
+      insetEnd: '2',
+    },
+  },
+})

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

@@ -0,0 +1,44 @@
+import { tooltipAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const tooltip = defineSlotRecipe({
+  className: 'app-tooltip',
+  jsx: ['Tooltip.Root', 'Tooltip.RootProvider', 'Tooltip'],
+  slots: tooltipAnatomy.keys(),
+  base: {
+    content: {
+      '--tooltip-bg': 'colors.gray.bg.default',
+      bg: 'var(--tooltip-bg)',
+      color: 'gray.fg.onSolid',
+      borderRadius: 'sm',
+      boxShadow: 'sm',
+      fontWeight: 'semibold',
+      px: '2',
+      py: '1.5',
+      textStyle: 'xs',
+      maxWidth: 'xs',
+      _open: {
+        _motionSafe: {
+          animationStyle: 'scale-fade-in',
+          animationDuration: 'fast',
+        },
+      },
+      _closed: {
+        _motionSafe: {
+          animationStyle: 'scale-fade-out',
+          animationDuration: 'faster',
+        },
+      },
+      _motionReduce: { animation: 'none' },
+    },
+    arrow: {
+      '--arrow-size': 'sizes.2',
+      '--arrow-background': 'var(--tooltip-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '1px',
+      borderInlineStartWidth: '1px',
+      borderColor: 'var(--tooltip-bg)',
+    },
+  },
+})