@oyolincc/create 0.4.0 → 0.5.1

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

@@ -0,0 +1,162 @@
+import { stepsAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  list: { '--steps-gutter': '{spacing.3}', '--steps-thickness': '2px' },
+  separator: {
+    _horizontal: { height: 'var(--steps-thickness)', mx: 'var(--steps-gutter)' },
+    _vertical: {
+      width: 'var(--steps-thickness)',
+      maxHeight: 'calc(100% - var(--steps-size) - var(--steps-gutter) * 2)',
+      top: 'calc(var(--steps-size) + var(--steps-gutter))',
+      insetInlineStart: 'calc((var(--steps-size) - var(--steps-thickness)) / 2)',
+    },
+  },
+  indicator: { boxSize: 'var(--steps-size)', _icon: { boxSize: 'var(--steps-icon-size)' } },
+  item: { gap: '3' },
+  trigger: { gap: '3' },
+} as const
+
+const appearance = {
+  root: { color: 'gray.fg.default' },
+  title: { fontWeight: 'medium', color: 'gray.fg.default' },
+  description: { color: 'gray.fg.muted' },
+  separator: { bg: 'gray.border.strong' },
+  indicator: { borderRadius: 'full', fontWeight: 'medium' },
+  trigger: {
+    outline: '0',
+    focusVisibleRing: 'outside',
+    borderRadius: 'sm',
+    cursor: 'pointer',
+    _disabled: { cursor: 'not-allowed', opacity: '0.5' },
+  },
+  content: { outline: '0', focusVisibleRing: 'outside' },
+} as const
+
+export const steps = defineSlotRecipe({
+  className: 'app-steps',
+  jsx: ['Steps.Root', 'Steps.RootProvider'],
+  slots: stepsAnatomy.extendWith('title', 'description').keys(),
+  base: {
+    root: {
+      display: 'flex',
+      width: 'full',
+      _horizontal: { flexDirection: 'column' },
+      _vertical: { flexDirection: 'row' },
+    },
+    list: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      _horizontal: { flexDirection: 'row', alignItems: 'center' },
+      _vertical: { flexDirection: 'column', alignItems: 'flex-start' },
+    },
+    separator: {
+      flex: '1',
+      _horizontal: { width: 'full' },
+      _vertical: { position: 'absolute', height: 'full' },
+    },
+    indicator: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: '0',
+      _icon: { flexShrink: '0' },
+    },
+    item: {
+      position: 'relative',
+      display: 'flex',
+      flex: '1 0 0',
+      _horizontal: { alignItems: 'center' },
+      _vertical: { alignItems: 'flex-start' },
+      '&:last-of-type': { flex: 'initial', '& [data-part=separator]': { display: 'none' } },
+    },
+    trigger: { display: 'flex', alignItems: 'center', textAlign: 'start' },
+  },
+  variants: {
+    variant: {
+      solid: {
+        ...appearance,
+        indicator: {
+          ...appearance.indicator,
+          '&[data-incomplete]': {
+            borderWidth: 'var(--steps-thickness, 2px)',
+            borderColor: 'gray.border.strong',
+          },
+          '&[data-current]': {
+            bg: 'colorPalette.bg.subtle',
+            borderWidth: 'var(--steps-thickness, 2px)',
+            borderColor: 'colorPalette.bg.default',
+            color: 'colorPalette.fg.default',
+          },
+          '&[data-complete]': { bg: 'colorPalette.bg.default', color: 'colorPalette.fg.onSolid' },
+        },
+        separator: {
+          ...appearance.separator,
+          '&[data-complete]': { bg: 'colorPalette.bg.default' },
+        },
+      },
+      subtle: {
+        ...appearance,
+        indicator: {
+          ...appearance.indicator,
+          '&[data-incomplete]': { bg: 'gray.bg.subtle' },
+          '&[data-current]': { bg: 'colorPalette.bg.subtle', color: 'colorPalette.fg.default' },
+          '&[data-complete]': { bg: 'colorPalette.bg.surface', color: 'colorPalette.fg.default' },
+        },
+        separator: {
+          ...appearance.separator,
+          '&[data-complete]': { bg: 'colorPalette.border.default' },
+        },
+      },
+      unstyled: {},
+    },
+    size: {
+      xs: {
+        ...sizeStyles,
+        root: { gap: '2.5' },
+        list: {
+          ...sizeStyles.list,
+          '--steps-size': '{sizes.6}',
+          '--steps-icon-size': '{sizes.3.5}',
+          textStyle: 'xs',
+        },
+        title: { textStyle: 'sm' },
+      },
+      sm: {
+        ...sizeStyles,
+        root: { gap: '3' },
+        list: {
+          ...sizeStyles.list,
+          '--steps-size': '{sizes.8}',
+          '--steps-icon-size': '{sizes.4}',
+          textStyle: 'xs',
+        },
+        title: { textStyle: 'sm' },
+      },
+      md: {
+        ...sizeStyles,
+        root: { gap: '4' },
+        list: {
+          ...sizeStyles.list,
+          '--steps-size': '{sizes.10}',
+          '--steps-icon-size': '{sizes.4}',
+          textStyle: 'sm',
+        },
+        title: { textStyle: 'sm' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: { gap: '6' },
+        list: {
+          ...sizeStyles.list,
+          '--steps-size': '{sizes.11}',
+          '--steps-icon-size': '{sizes.5}',
+          textStyle: 'md',
+        },
+        title: { textStyle: 'md' },
+      },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'solid' },
+})

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

@@ -0,0 +1,150 @@
+import { switchAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = {
+  root: {
+    '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
+    '--switch-x': {
+      base: 'var(--switch-diff)',
+      _rtl: 'calc(var(--switch-diff) * -1)',
+    },
+  },
+  indicator: {
+    height: 'var(--switch-height)',
+    width: 'var(--switch-height)',
+    fontSize: 'var(--switch-indicator-font-size)',
+    insetInlineStart: 'calc(var(--switch-x) - 2px)',
+    _checked: { insetInlineStart: '2px' },
+  },
+  control: {
+    gap: '0.5rem',
+    width: 'var(--switch-width)',
+    height: 'var(--switch-height)',
+  },
+  thumb: {
+    width: 'var(--switch-height)',
+    height: 'var(--switch-height)',
+    scale: '0.8',
+    _checked: { translate: 'var(--switch-x) 0' },
+  },
+} as const
+
+export const switchRecipe = defineSlotRecipe({
+  className: 'app-switch',
+  jsx: ['Switch.Root', 'Switch.RootProvider'],
+  slots: switchAnatomy.extendWith('indicator').keys(),
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      position: 'relative',
+      verticalAlign: 'middle',
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+    },
+    indicator: {
+      position: 'absolute',
+      fontWeight: 'medium',
+      flexShrink: 0,
+      userSelect: 'none',
+      display: 'grid',
+      placeContent: 'center',
+      transition: 'inset-inline-start 0.12s ease',
+    },
+    control: {
+      display: 'inline-flex',
+      flexShrink: 0,
+      justifyContent: 'flex-start',
+      cursor: 'pointer',
+      borderRadius: 'full',
+      position: 'relative',
+      transition: 'background',
+      focusVisibleRing: 'outside',
+      _disabled: { layerStyle: 'disabled' },
+      _invalid: { outline: '2px solid', outlineColor: 'red.9', outlineOffset: '2px' },
+    },
+    thumb: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      transitionProperty: 'translate',
+      transitionDuration: 'fast',
+      borderRadius: 'inherit',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        control: {
+          borderRadius: 'full',
+          bg: 'gray.bg.subtle',
+          focusVisibleRing: 'outside',
+          _checked: {
+            bg: 'colorPalette.bg.default',
+          },
+        },
+        thumb: {
+          bg: 'white',
+          _checked: {
+            bg: 'colorPalette.fg.onSolid',
+          },
+          boxShadow: 'xs',
+        },
+      },
+    },
+    size: {
+      unstyled: {},
+      xs: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          gap: '2',
+          '--switch-width': 'sizes.8',
+          '--switch-height': 'sizes.4',
+          '--switch-indicator-font-size': 'fontSizes.xs',
+        },
+        label: { fontSize: 'sm', lineHeight: '1' },
+      },
+      sm: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          gap: '2',
+          '--switch-width': 'sizes.9',
+          '--switch-height': 'sizes.4.5',
+          '--switch-indicator-font-size': 'fontSizes.xs',
+        },
+        label: { fontSize: 'sm', lineHeight: '1' },
+      },
+      md: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          gap: '3',
+          '--switch-width': 'sizes.10',
+          '--switch-height': 'sizes.5',
+          '--switch-indicator-font-size': 'fontSizes.sm',
+        },
+        label: { fontSize: 'md', lineHeight: '1' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          gap: '3',
+          '--switch-width': 'sizes.11',
+          '--switch-height': 'sizes.5.5',
+          '--switch-indicator-font-size': 'fontSizes.md',
+        },
+        label: { fontSize: 'lg', lineHeight: '1' },
+      },
+    },
+  },
+})

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

@@ -0,0 +1,150 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+type SlotStyles = NonNullable<Parameters<typeof defineSlotRecipe>[0]['base']>
+
+const sizeStyles = { head: { textStyle: 'xs' }, cell: { textStyle: 'sm' } } as const
+
+const appearance = {
+  cell: {
+    color: 'gray.fg.muted',
+    boxShadow: 'inset 0 -1px 0 0 var(--shadow-color)',
+    shadowColor: 'gray.border.subtle',
+    _pinned: {
+      bg: 'inherit',
+      boxShadow: 'inset 0 -1px 0 0 var(--shadow-color)',
+      shadowColor: 'gray.border.subtle',
+    },
+  },
+  row: { _last: { '& td': { boxShadow: 'none' } } },
+  header: { boxShadow: 'inset 0 -1px 0 0 var(--shadow-color)', shadowColor: 'gray.border.subtle' },
+  head: { color: 'gray.fg.muted', fontWeight: 'semibold' },
+  caption: { color: 'gray.fg.subtle', fontWeight: 'medium' },
+  foot: {
+    fontWeight: 'medium',
+    '& td': {
+      boxShadow: 'inset 0 1px 0 0 var(--shadow-color)!',
+      shadowColor: 'gray.border.subtle',
+    },
+  },
+} as const
+
+const definition = {
+  className: 'app-table',
+  jsx: ['Table.Root'],
+  slots: ['root', 'body', 'cell', 'foot', 'head', 'header', 'row', 'caption'],
+  base: {
+    root: {
+      borderCollapse: 'collapse',
+      fontVariantNumeric: 'lining-nums tabular-nums',
+      textAlign: 'start',
+      verticalAlign: 'top',
+      width: 'full',
+    },
+    cell: {
+      alignItems: 'center',
+      textAlign: 'start',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      _pinned: { overflow: 'unset', position: 'sticky', zIndex: 1 },
+    },
+    header: {
+      textAlign: 'left',
+      verticalAlign: 'middle',
+      _pinned: { position: 'sticky', bg: 'inherit', zIndex: 2 },
+    },
+    head: { textAlign: 'start', whiteSpace: 'nowrap' },
+    caption: { captionSide: 'bottom' },
+  },
+  defaultVariants: { size: 'md' as const, variant: 'plain' as const },
+  variants: {
+    variant: {
+      surface: {
+        ...appearance,
+        header: { ...appearance.header, bg: 'gray.bg.surface.hover' },
+        row: { ...appearance.row, bg: 'gray.bg.surface' },
+      },
+      plain: appearance,
+      line: appearance,
+      outline: {
+        ...appearance,
+        root: { borderWidth: '1px', borderColor: 'gray.border.subtle' },
+        header: { ...appearance.header, bg: 'gray.bg.surface.hover' },
+        row: { ...appearance.row, bg: 'gray.bg.surface' },
+      },
+      unstyled: {},
+    },
+    striped: { true: { row: { '&:nth-of-type(odd) td': { bg: 'gray.bg.surface.hover' } } } },
+    interactive: { true: { body: { '& tr:hover > td': { bg: 'gray.bg.surface.hover' } } } },
+    columnBorder: {
+      true: {
+        header: { '&:not(:last-of-type)': { borderInlineEndWidth: '1px' } },
+        cell: { '&:not(:last-of-type)': { borderInlineEndWidth: '1px' } },
+      },
+    },
+    stickyHeader: {
+      true: {
+        head: {
+          bg: 'gray.bg.page',
+          '& :where(tr)': {
+            bg: 'inherit',
+            top: 'var(--table-sticky-offset, 0)',
+            position: 'sticky',
+            zIndex: 2,
+          },
+        },
+      },
+    },
+    size: {
+      sm: {
+        ...sizeStyles,
+        root: { textStyle: 'xs' },
+        header: { px: '2', py: '2' },
+        cell: { textStyle: 'xs', px: '2', py: '2' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: { textStyle: 'md' },
+        header: { px: '4', py: '4' },
+        cell: { textStyle: 'md', px: '4', py: '4' },
+      },
+      md: {
+        ...sizeStyles,
+        root: { textStyle: 'sm' },
+        header: { px: '3', py: '3' },
+        cell: { ...sizeStyles.cell, px: '3', py: '3' },
+      },
+      unstyled: {},
+    },
+  },
+} satisfies Parameters<typeof defineSlotRecipe>[0]
+
+const nativeSelectors = {
+  body: 'tbody',
+  cell: 'td',
+  foot: 'tfoot',
+  head: 'thead',
+  header: 'th',
+  row: 'tr',
+  caption: 'caption',
+} as const
+
+function withNativeStyles<T extends SlotStyles>(styles: T): T {
+  const selectors: Record<string, unknown> = {}
+  for (const [slot, selector] of Object.entries(nativeSelectors)) {
+    if (styles[slot]) selectors[`&[data-native] ${selector}`] = styles[slot]
+  }
+  return { ...styles, root: { ...styles.root, ...selectors } } as T
+}
+
+export const table = defineSlotRecipe({
+  ...definition,
+  base: withNativeStyles(definition.base),
+  variants: Object.fromEntries(
+    Object.entries(definition.variants).map(([name, variants]) => [
+      name,
+      Object.fromEntries(
+        Object.entries(variants).map(([value, styles]) => [value, withNativeStyles(styles)]),
+      ),
+    ]),
+  ) as typeof definition.variants,
+})

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

@@ -0,0 +1,128 @@
+import { tabsAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const sizeStyles = { root: { _horizontal: { gap: '2' }, _vertical: { gap: '4' } } } as const
+
+const appearance = {
+  trigger: {
+    cursor: 'pointer',
+    fontWeight: 'semibold',
+    outline: '0',
+    _disabled: { layerStyle: 'disabled' },
+    _focusVisible: { focusVisibleRing: 'outside' },
+  },
+  content: { focusVisibleRing: 'inside' },
+} as const
+
+export const tabs = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  className: 'app-tabs',
+  jsx: ['Tabs.Root', 'Tabs.RootProvider'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'start',
+      _horizontal: { flexDirection: 'column' },
+      _vertical: { flexDirection: 'row' },
+    },
+    list: {
+      display: 'flex',
+      position: 'relative',
+      isolation: 'isolate',
+      _horizontal: { flexDirection: 'row' },
+      _vertical: { flexDirection: 'column' },
+    },
+    trigger: {
+      alignItems: 'center',
+      display: 'flex',
+      position: 'relative',
+      _focusVisible: { zIndex: 1 },
+    },
+    content: { _horizontal: { width: '100%' }, _vertical: { height: '100%' } },
+    indicator: { width: 'var(--width)', height: 'var(--height)', zIndex: -1 },
+  },
+  variants: {
+    size: {
+      xs: {
+        ...sizeStyles,
+        list: { gap: '1' },
+        trigger: { h: '8', minW: '8', textStyle: 'xs', px: '3', gap: '2' },
+      },
+      sm: {
+        ...sizeStyles,
+        list: { gap: '1' },
+        trigger: { h: '9', minW: '9', textStyle: 'sm', px: '3.5', gap: '2' },
+      },
+      md: {
+        ...sizeStyles,
+        list: { gap: '1' },
+        trigger: { h: '10', minW: '10', textStyle: 'sm', px: '4', gap: '2' },
+      },
+      lg: {
+        ...sizeStyles,
+        list: { gap: '1' },
+        trigger: { h: '11', minW: '11', textStyle: 'md', px: '4.5', gap: '2' },
+      },
+      unstyled: {},
+    },
+    variant: {
+      line: {
+        ...appearance,
+        root: { alignItems: 'stretch' },
+        list: { _horizontal: { borderBottomWidth: '1px' }, _vertical: { borderStartWidth: '1px' } },
+        indicator: {
+          background: 'colorPalette.bg.default',
+          _horizontal: { bottom: '0', height: '0.5', transform: 'translateY(1px)' },
+          _vertical: { left: '0', width: '0.5', transform: 'translateX(-1px)' },
+        },
+        trigger: {
+          ...appearance.trigger,
+          color: 'gray.fg.muted',
+          _selected: { color: 'colorPalette.fg.default' },
+        },
+      },
+      subtle: {
+        ...appearance,
+        trigger: {
+          ...appearance.trigger,
+          color: 'gray.fg.muted',
+          _selected: { color: 'colorPalette.fg.default' },
+        },
+        indicator: {
+          bg: 'colorPalette.bg.subtle',
+          color: 'colorPalette.fg.default',
+          borderRadius: 'sm',
+        },
+      },
+      enclosed: {
+        ...appearance,
+        list: {
+          bg: { _light: 'gray.2', _dark: 'gray.1' },
+          boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+          boxShadowColor: 'gray.border.subtle',
+          borderRadius: 'md',
+          p: '1',
+        },
+        trigger: {
+          ...appearance.trigger,
+          color: 'gray.fg.muted',
+          _selected: { color: 'colorPalette.fg.default' },
+        },
+        indicator: {
+          borderRadius: 'sm',
+          boxShadow: { _light: 'xs', _dark: 'none' },
+          bg: { _light: 'white', _dark: 'gray.2' },
+        },
+      },
+      unstyled: {},
+    },
+    fitted: {
+      true: {
+        root: { alignItems: 'stretch' },
+        trigger: { flex: 1, textAlign: 'center', justifyContent: 'center' },
+      },
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'line' },
+})

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

@@ -0,0 +1,114 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+import { badge } from './badge'
+
+const sizeStyles = {
+  root: { lineHeight: '1' },
+  startElement: {
+    boxSize: 'var(--tag-element-size)',
+    ms: 'var(--tag-element-offset)',
+    '&:has([data-scope=avatar])': {
+      boxSize: 'var(--tag-avatar-size)',
+      ms: 'calc(var(--tag-element-offset) * 1.5)',
+    },
+  },
+  endElement: {
+    boxSize: 'var(--tag-element-size)',
+    me: 'var(--tag-element-offset)',
+    '&:has(button)': { ms: 'calc(var(--tag-element-offset) * -1)' },
+  },
+} as const
+
+const appearance = {
+  root: { focusRing: 'outside' },
+  closeTrigger: {
+    borderRadius: 'xs',
+    cursor: 'pointer',
+    focusRing: 'inside',
+    _disabled: { cursor: 'not-allowed', opacity: '0.5' },
+  },
+} as const
+
+export const tag = defineSlotRecipe({
+  className: 'app-tag',
+  jsx: ['Tag.Root'],
+  slots: ['root', 'label', 'startElement', 'endElement', 'closeTrigger'],
+  base: {
+    root: { ...badge.base, verticalAlign: 'top', maxWidth: 'full' },
+    label: { minWidth: '0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    startElement: { flexShrink: '0', display: 'inline-flex', _icon: { boxSize: 'full' } },
+    endElement: { flexShrink: '0', display: 'inline-flex', _icon: { boxSize: 'full' } },
+    closeTrigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSize: 'full',
+      color: 'currentColor',
+      _icon: { boxSize: 'full' },
+    },
+  },
+  variants: {
+    variant: {
+      subtle: { ...appearance, root: { ...appearance.root, ...badge.variants?.variant.subtle } },
+      solid: { ...appearance, root: { ...appearance.root, ...badge.variants?.variant.solid } },
+      outline: { ...appearance, root: { ...appearance.root, ...badge.variants?.variant.outline } },
+      surface: { ...appearance, root: { ...appearance.root, ...badge.variants?.variant.surface } },
+      unstyled: {},
+    },
+    size: {
+      sm: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          px: '1.5',
+          minH: '4.5',
+          gap: '1',
+          '--tag-element-size': '{spacing.3}',
+          '--tag-avatar-size': '{spacing.3}',
+          '--tag-element-offset': '-2px',
+        },
+        label: { textStyle: 'xs' },
+      },
+      md: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          px: '1.5',
+          minH: '5',
+          gap: '1',
+          '--tag-element-size': '{spacing.3.5}',
+          '--tag-avatar-size': '{spacing.3.5}',
+          '--tag-element-offset': '-2px',
+        },
+        label: { textStyle: 'xs' },
+      },
+      lg: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          px: '2',
+          minH: '6',
+          gap: '1.5',
+          '--tag-element-size': '{spacing.4}',
+          '--tag-avatar-size': '{spacing.4.5}',
+          '--tag-element-offset': '-3px',
+        },
+        label: { textStyle: 'sm' },
+      },
+      xl: {
+        ...sizeStyles,
+        root: {
+          ...sizeStyles.root,
+          px: '2.5',
+          minH: '8',
+          gap: '1.5',
+          '--tag-element-size': '{spacing.4.5}',
+          '--tag-avatar-size': '{spacing.6}',
+          '--tag-element-offset': '-4px',
+        },
+        label: { textStyle: 'sm' },
+      },
+      unstyled: {},
+    },
+  },
+  defaultVariants: { size: 'md', variant: 'surface' },
+})