@oyolincc/create 0.4.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/hooks.ts

@@ -0,0 +1,242 @@
+export { useListCollection, type UseListCollectionProps } from '@ark-ui/react/collection'
+
+export {
+  useAccordion,
+  useAccordionContext,
+  useAccordionItemContext,
+  type UseAccordionProps,
+  type UseAccordionReturn,
+} from '@ark-ui/react/accordion'
+
+export {
+  useAvatar,
+  useAvatarContext,
+  type UseAvatarProps,
+  type UseAvatarReturn,
+} from '@ark-ui/react/avatar'
+
+export {
+  useCheckbox,
+  useCheckboxContext,
+  useCheckboxGroup,
+  useCheckboxGroupContext,
+  type UseCheckboxProps,
+  type UseCheckboxReturn,
+  type UseCheckboxGroupProps,
+  type UseCheckboxGroupReturn,
+} from '@ark-ui/react/checkbox'
+
+export {
+  useCollapsible,
+  useCollapsibleContext,
+  type UseCollapsibleProps,
+  type UseCollapsibleReturn,
+} from '@ark-ui/react/collapsible'
+
+export {
+  useCombobox,
+  useComboboxContext,
+  useComboboxItemContext,
+  type UseComboboxProps,
+  type UseComboboxReturn,
+} from '@ark-ui/react/combobox'
+
+export {
+  useDialog,
+  useDialogContext,
+  type UseDialogProps,
+  type UseDialogReturn,
+} from '@ark-ui/react/dialog'
+
+export {
+  useEditable,
+  useEditableContext,
+  type UseEditableProps,
+  type UseEditableReturn,
+} from '@ark-ui/react/editable'
+
+export {
+  useField,
+  useFieldContext,
+  type UseFieldProps,
+  type UseFieldReturn,
+} from '@ark-ui/react/field'
+
+export {
+  useFieldset,
+  useFieldsetContext,
+  type UseFieldsetProps,
+  type UseFieldsetReturn,
+} from '@ark-ui/react/fieldset'
+
+export {
+  useFileUpload,
+  useFileUploadContext,
+  type UseFileUploadProps,
+  type UseFileUploadReturn,
+} from '@ark-ui/react/file-upload'
+
+export {
+  useHoverCard,
+  useHoverCardContext,
+  type UseHoverCardProps,
+  type UseHoverCardReturn,
+} from '@ark-ui/react/hover-card'
+
+export {
+  useMenu,
+  useMenuContext,
+  useMenuItemContext,
+  type UseMenuProps,
+  type UseMenuReturn,
+} from '@ark-ui/react/menu'
+
+export {
+  useNumberInput,
+  useNumberInputContext,
+  type UseNumberInputProps,
+  type UseNumberInputReturn,
+} from '@ark-ui/react/number-input'
+
+export {
+  usePagination,
+  usePaginationContext,
+  type UsePaginationProps,
+  type UsePaginationReturn,
+} from '@ark-ui/react/pagination'
+
+export {
+  usePinInput,
+  usePinInputContext,
+  type UsePinInputProps,
+  type UsePinInputReturn,
+} from '@ark-ui/react/pin-input'
+
+export {
+  usePopover,
+  usePopoverContext,
+  type UsePopoverProps,
+  type UsePopoverReturn,
+} from '@ark-ui/react/popover'
+
+export {
+  useProgress,
+  useProgressContext,
+  type UseProgressProps,
+  type UseProgressReturn,
+} from '@ark-ui/react/progress'
+
+export {
+  useRadioGroup,
+  useRadioGroupContext,
+  useRadioGroupItemContext,
+  type UseRadioGroupProps,
+  type UseRadioGroupReturn,
+} from '@ark-ui/react/radio-group'
+
+export {
+  useRatingGroup,
+  useRatingGroupContext,
+  useRatingGroupItemContext,
+  type UseRatingGroupProps,
+  type UseRatingGroupReturn,
+} from '@ark-ui/react/rating-group'
+
+export {
+  useScrollArea,
+  useScrollAreaContext,
+  type UseScrollAreaProps,
+  type UseScrollAreaReturn,
+} from '@ark-ui/react/scroll-area'
+
+export {
+  useSegmentGroup,
+  useSegmentGroupContext,
+  useSegmentGroupItemContext,
+  type UseSegmentGroupProps,
+  type UseSegmentGroupReturn,
+} from '@ark-ui/react/segment-group'
+
+export {
+  useSelect,
+  useSelectContext,
+  useSelectItemContext,
+  type UseSelectProps,
+  type UseSelectReturn,
+} from '@ark-ui/react/select'
+
+export {
+  useSlider,
+  useSliderContext,
+  type UseSliderProps,
+  type UseSliderReturn,
+} from '@ark-ui/react/slider'
+
+export {
+  useSwitch,
+  useSwitchContext,
+  type UseSwitchProps,
+  type UseSwitchReturn,
+} from '@ark-ui/react/switch'
+
+export { useTabs, useTabsContext, type UseTabsProps, type UseTabsReturn } from '@ark-ui/react/tabs'
+
+export {
+  useTagsInput,
+  useTagsInputContext,
+  useTagsInputItemContext,
+  type UseTagsInputProps,
+  type UseTagsInputReturn,
+} from '@ark-ui/react/tags-input'
+
+export {
+  useDialog as useDrawer,
+  type UseDialogProps as UseDrawerProps,
+  type UseDialogReturn as UseDrawerReturn,
+} from '@ark-ui/react/dialog'
+
+export {
+  useTooltip,
+  useTooltipContext,
+  type UseTooltipProps,
+  type UseTooltipReturn,
+} from '@ark-ui/react/tooltip'
+
+export { useToastContext } from '@ark-ui/react/toast'
+
+export {
+  useClipboard,
+  useClipboardContext,
+  type UseClipboardProps,
+  type UseClipboardReturn,
+} from '@ark-ui/react/clipboard'
+
+export {
+  useSteps,
+  useStepsContext,
+  useStepsItemContext,
+  type UseStepsProps,
+  type UseStepsReturn,
+} from '@ark-ui/react/steps'
+
+export {
+  useTreeView,
+  useTreeViewContext,
+  useTreeViewNodeContext,
+  type UseTreeViewProps,
+  type UseTreeViewReturn,
+} from '@ark-ui/react/tree-view'
+
+export {
+  useColorPicker,
+  useColorPickerContext,
+  type UseColorPickerProps,
+  type UseColorPickerReturn,
+} from '@ark-ui/react/color-picker'
+
+export {
+  useDatePicker,
+  useDatePickerContext,
+  type UseDatePickerProps,
+  type UseDatePickerReturn,
+} from '@ark-ui/react/date-picker'

package/templates/hono-fullstack/libs/ui/src/index.ts

@@ -0,0 +1,19 @@
+export * from './components/atoms'
+export {
+  createListCollection,
+  type ListCollection,
+  type CollectionItem,
+} from '@ark-ui/react/collection'
+export { Portal, type PortalProps } from '@ark-ui/react/portal'
+export * from './hooks'
+export {
+  createTreeCollection,
+  createFileTreeCollection,
+  type TreeCollection,
+  type TreeCollectionOptions,
+  type TreeNode,
+  type FilePathTreeNode,
+  type FlatTreeNode,
+} from '@ark-ui/react/collection'
+export { parseColor, type Color } from '@ark-ui/react/color-picker'
+export { parseDate, type DateValue } from '@ark-ui/react/date-picker'

package/templates/hono-fullstack/libs/ui/src/theme/animation-styles.ts

@@ -0,0 +1,50 @@
+import { defineAnimationStyles } from '@pandacss/dev'
+
+export const animationStyles = defineAnimationStyles({
+  'slide-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-from-bottom, fade-in',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-from-top, fade-in',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-from-right, fade-in',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-from-left, fade-in',
+      },
+    },
+  },
+  'slide-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-to-bottom, fade-out',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-to-top, fade-out',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-to-right, fade-out',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-to-left, fade-out',
+      },
+    },
+  },
+  'scale-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-in, fade-in',
+    },
+  },
+  'scale-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-out, fade-out',
+    },
+  },
+})

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

@@ -0,0 +1,7 @@
+export const breakpoints = {
+  sm: '40rem',
+  md: '48rem',
+  lg: '64rem',
+  xl: '80rem',
+  '2xl': '96rem',
+}

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

@@ -0,0 +1,12 @@
+export const conditions = {
+  extend: {
+    light: ':where(:root:not(.dark)) &, .light &',
+    invalid: '&:is(:user-invalid, [data-invalid], [aria-invalid=true])',
+    hover: '&:not(:disabled):hover',
+    active: '&:not(:disabled):active',
+    checked:
+      '&:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])',
+    on: '&:is([data-state=on])',
+    pinned: '&:is([data-pinned])',
+  },
+} as const

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

@@ -0,0 +1,16 @@
+export const containers = {
+  '3xs': '16rem',
+  '2xs': '18rem',
+  xs: '20rem',
+  sm: '24rem',
+  md: '28rem',
+  lg: '32rem',
+  xl: '36rem',
+  '2xl': '42rem',
+  '3xl': '48rem',
+  '4xl': '56rem',
+  '5xl': '64rem',
+  '6xl': '72rem',
+  '7xl': '80rem',
+  '8xl': '90rem',
+}

package/templates/hono-fullstack/libs/ui/src/theme/global-css.ts

@@ -0,0 +1,12 @@
+import { defineGlobalStyles } from '@pandacss/dev'
+
+export const globalCss = defineGlobalStyles({
+  extend: {
+    '*': {
+      '--global-color-border': 'colors.gray.border.subtle',
+      '--global-color-placeholder': 'colors.gray.fg.subtle',
+      '--global-color-selection': 'colors.colorPalette.bg.subtle',
+      '--global-color-focus-ring': 'colors.colorPalette.ring',
+    },
+  },
+})

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

@@ -0,0 +1,157 @@
+import { defineKeyframes } from '@pandacss/dev'
+
+export const keyframes = defineKeyframes({
+  'circular-progress': {
+    '0%': { strokeDasharray: '1, 400', strokeDashoffset: '0' },
+    '50%': { strokeDasharray: '400, 400', strokeDashoffset: '-100%' },
+    '100%': { strokeDasharray: '400, 400', strokeDashoffset: '-260%' },
+  },
+  // collapse
+  'expand-height': {
+    from: { height: '0' },
+    to: { height: 'var(--height)' },
+  },
+  'collapse-height': {
+    from: { height: 'var(--height)' },
+    to: { height: '0' },
+  },
+  'expand-width': {
+    from: { width: '0' },
+    to: { width: 'var(--width)' },
+  },
+  'collapse-width': {
+    from: { width: 'var(--width)' },
+    to: { width: '0' },
+  },
+  // fade
+  'fade-in': {
+    from: { opacity: '0' },
+    to: { opacity: '1' },
+  },
+  'fade-out': {
+    from: { opacity: '1' },
+    to: { opacity: '0' },
+  },
+  // slide from (full)
+  'slide-from-left-full': {
+    from: { translate: '-100% 0' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-right-full': {
+    from: { translate: '100% 0' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-top-full': {
+    from: { translate: '0 -100%' },
+    to: { translate: '0 0' },
+  },
+  'slide-from-bottom-full': {
+    from: { translate: '0 100%' },
+    to: { translate: '0 0' },
+  },
+  // slide to (full)
+  'slide-to-left-full': {
+    from: { translate: '0 0' },
+    to: { translate: '-100% 0' },
+  },
+  'slide-to-right-full': {
+    from: { translate: '0 0' },
+    to: { translate: '100% 0' },
+  },
+  'slide-to-top-full': {
+    from: { translate: '0 0' },
+    to: { translate: '0 -100%' },
+  },
+  'slide-to-bottom-full': {
+    from: { translate: '0 0' },
+    to: { translate: '0 100%' },
+  },
+  // slide from
+  'slide-from-top': {
+    '0%': { translate: '0 -0.5rem' },
+    to: { translate: '0' },
+  },
+  'slide-from-bottom': {
+    '0%': { translate: '0 0.5rem' },
+    to: { translate: '0' },
+  },
+  'slide-from-left': {
+    '0%': { translate: '-0.5rem 0' },
+    to: { translate: '0' },
+  },
+  'slide-from-right': {
+    '0%': { translate: '0.5rem 0' },
+    to: { translate: '0' },
+  },
+  // slide to
+  'slide-to-top': {
+    '0%': { translate: '0' },
+    to: { translate: '0 -0.5rem' },
+  },
+  'slide-to-bottom': {
+    '0%': { translate: '0' },
+    to: { translate: '0 0.5rem' },
+  },
+  'slide-to-left': {
+    '0%': { translate: '0' },
+    to: { translate: '-0.5rem 0' },
+  },
+  'slide-to-right': {
+    '0%': { translate: '0' },
+    to: { translate: '0.5rem 0' },
+  },
+  // scale
+  'scale-in': {
+    from: { scale: '0.95' },
+    to: { scale: '1' },
+  },
+  'scale-out': {
+    from: { scale: '1' },
+    to: { scale: '0.95' },
+  },
+  'bg-position': {
+    from: {
+      backgroundPosition: 'var(--animate-from, 1rem) 0',
+    },
+    to: {
+      backgroundPosition: 'var(--animate-to, 0) 0',
+    },
+  },
+  position: {
+    from: {
+      insetInlineStart: 'var(--animate-from-x)',
+      insetBlockStart: 'var(--animate-from-y)',
+    },
+    to: {
+      insetInlineStart: 'var(--animate-to-x)',
+      insetBlockStart: 'var(--animate-to-y)',
+    },
+  },
+
+  spin: {
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+  ping: {
+    '75%, 100%': {
+      transform: 'scale(2)',
+      opacity: '0',
+    },
+  },
+  pulse: {
+    '50%': {
+      opacity: '.5',
+    },
+  },
+  bounce: {
+    '0%, 100%': {
+      transform: 'translateY(-25%)',
+      animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+    },
+    '50%': {
+      transform: 'none',
+      animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/layer-styles.ts

@@ -0,0 +1,11 @@
+import { defineLayerStyles } from '@pandacss/dev'
+
+export const layerStyles = defineLayerStyles({
+  disabled: {
+    value: {
+      cursor: 'not-allowed',
+      opacity: '0.67',
+      filter: 'grayscale(100%)',
+    },
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/patterns/grid.ts

@@ -0,0 +1,51 @@
+import { definePattern } from '@pandacss/dev'
+
+export const grid = definePattern({
+  properties: {
+    templateColumns: { type: 'property', value: 'gridTemplateColumns' },
+    templateRows: { type: 'property', value: 'gridTemplateRows' },
+    templateAreas: { type: 'property', value: 'gridTemplateAreas' },
+    autoFlow: { type: 'property', value: 'gridAutoFlow' },
+    autoRows: { type: 'property', value: 'gridAutoRows' },
+    autoColumns: { type: 'property', value: 'gridAutoColumns' },
+    column: { type: 'property', value: 'gridColumn' },
+    row: { type: 'property', value: 'gridRow' },
+    inline: { type: 'boolean' },
+  },
+  transform(props, { map, isCssUnit, isCssVar, isCssFunction }) {
+    const {
+      templateColumns,
+      templateRows,
+      templateAreas,
+      autoFlow,
+      autoRows,
+      autoColumns,
+      column,
+      row,
+      inline,
+      columns,
+      minChildWidth,
+      ...rest
+    } = props
+    const resolvedColumns =
+      columns != null
+        ? map(columns, (value) => `repeat(${value}, minmax(0, 1fr))`)
+        : map(
+            minChildWidth,
+            (value) =>
+              `repeat(auto-fit, minmax(${isCssUnit(value) || isCssVar(value) || isCssFunction(value) ? value : `token(sizes.${value}, ${value})`}, 1fr))`,
+          )
+    return {
+      display: inline == null ? 'grid' : map(inline, (value) => (value ? 'inline-grid' : 'grid')),
+      gridTemplateColumns: templateColumns == null ? resolvedColumns : templateColumns,
+      gridTemplateRows: templateRows,
+      gridTemplateAreas: templateAreas,
+      gridAutoFlow: autoFlow,
+      gridAutoRows: autoRows,
+      gridAutoColumns: autoColumns,
+      gridColumn: column,
+      gridRow: row,
+      ...rest,
+    }
+  },
+})

package/templates/hono-fullstack/libs/ui/src/theme/patterns/index.ts

@@ -0,0 +1,60 @@
+import { definePattern } from '@pandacss/dev'
+import { grid } from './grid'
+import { stack } from './stack'
+
+export const patterns = {
+  grid,
+  gridItem: definePattern({
+    properties: {
+      area: { type: 'property', value: 'gridArea' },
+      colSpan: { type: 'property', value: 'gridColumn' },
+      rowSpan: { type: 'property', value: 'gridRow' },
+      colStart: { type: 'property', value: 'gridColumnStart' },
+      colEnd: { type: 'property', value: 'gridColumnEnd' },
+      rowStart: { type: 'property', value: 'gridRowStart' },
+      rowEnd: { type: 'property', value: 'gridRowEnd' },
+    },
+    transform(props, { map }) {
+      const { area, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, ...rest } = props
+      const span = (value: string | number) =>
+        value === 'auto' ? value : `span ${value}/span ${value}`
+      return {
+        gridArea: area,
+        gridColumn: map(colSpan, span),
+        gridRow: map(rowSpan, span),
+        gridColumnStart: colStart,
+        gridColumnEnd: colEnd,
+        gridRowStart: rowStart,
+        gridRowEnd: rowEnd,
+        ...rest,
+      }
+    },
+  }),
+  stack: { jsxName: 'PandaStack', jsx: ['PandaStack'] },
+  hstack: { jsxName: 'PandaHStack', jsx: ['PandaHStack'] },
+  vstack: { jsxName: 'PandaVStack', jsx: ['PandaVStack'] },
+  componentStack: {
+    ...stack,
+    jsxName: 'Stack',
+    defaultValues: { direction: 'column', gap: '8px' },
+  },
+  componentHstack: {
+    ...stack,
+    jsxName: 'HStack',
+    jsx: ['HStack'],
+    defaultValues: { direction: 'row', align: 'center', gap: '8px' },
+  },
+  componentVstack: {
+    ...stack,
+    jsxName: 'VStack',
+    jsx: ['VStack'],
+    defaultValues: { direction: 'column', align: 'center', gap: '8px' },
+  },
+  linkBox: definePattern({
+    transform: (props) => ({
+      position: 'relative',
+      '& a[href]:not([data-link-overlay]), & abbr[title]': { position: 'relative', zIndex: '1' },
+      ...props,
+    }),
+  }),
+}

package/templates/hono-fullstack/libs/ui/src/theme/patterns/stack.ts

@@ -0,0 +1,46 @@
+import { definePattern } from '@pandacss/dev'
+
+export const stack = definePattern({
+  jsx: ['Stack'],
+  properties: {
+    align: { type: 'property', value: 'alignItems' },
+    justify: { type: 'property', value: 'justifyContent' },
+    direction: { type: 'property', value: 'flexDirection' },
+    gap: { type: 'property', value: 'gap' },
+    wrap: { type: 'property', value: 'flexWrap' },
+  },
+  transform(props, { map, isCssUnit, isCssVar, isCssFunction }) {
+    const { direction, align, justify, wrap, gap, ...rest } = props
+    return {
+      display: 'flex',
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap,
+      '--stack-gap': map(gap, (value) =>
+        isCssUnit(value) || isCssVar(value) || isCssFunction(value)
+          ? value
+          : `token(spacing.${value}, ${value})`,
+      ),
+      gap: 'var(--stack-gap)',
+      '&[data-stack-separated]': { gap: '0' },
+      '& > [data-stack-separator]': {
+        alignSelf: 'stretch',
+        flexShrink: '0',
+        marginBlock: map(direction, (value) =>
+          value.startsWith('column') ? 'var(--stack-gap)' : '0',
+        ),
+        marginInline: map(direction, (value) =>
+          value.startsWith('row') ? 'var(--stack-gap)' : '0',
+        ),
+        borderTopWidth: map(direction, (value) =>
+          value.startsWith('column') ? 'var(--separator-thickness, 1px)' : '0',
+        ),
+        borderInlineStartWidth: map(direction, (value) =>
+          value.startsWith('row') ? 'var(--separator-thickness, 1px)' : '0',
+        ),
+      },
+      ...rest,
+    }
+  },
+})