Fixed issues with template

package.json

@@ -8,6 +8,11 @@
     "start": "vinxi start",
     "version": "vinxi version"
   },
+  "pnpm": {
+    "overrides": {
+      "package-manager-detector": "0.2.8"
+    }
+  },
   "dependencies": {
     "@ark-ui/solid": "5.28.0",
     "@solidjs/meta": "0.29.4",

src/components/ui/accordion.tsx

@@ -0,0 +1,21 @@
+import { Accordion } from '@ark-ui/solid/accordion'
+import { ark } from '@ark-ui/solid/factory'
+import { ChevronDownIcon } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { accordion } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(accordion)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Accordion.Root, 'root')
+export const RootProvider = withProvider(Accordion.RootProvider, 'root')
+export const Item = withContext(Accordion.Item, 'item')
+export const ItemContent = withContext(Accordion.ItemContent, 'itemContent')
+export const ItemIndicator = withContext(Accordion.ItemIndicator, 'itemIndicator', {
+  defaultProps: () => ({ children: <ChevronDownIcon /> }),
+})
+export const ItemTrigger = withContext(Accordion.ItemTrigger, 'itemTrigger')
+export const ItemBody = withContext(ark.div, 'itemBody')
+
+export { AccordionContext as Context } from '@ark-ui/solid/accordion'

src/components/ui/alert.tsx

@@ -0,0 +1,24 @@
+import { ark } from '@ark-ui/solid/factory'
+import { InfoIcon } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { alert } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(alert)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(ark.div, 'root')
+export const Title = withContext(ark.h3, 'title')
+export const Description = withContext(ark.div, 'description')
+export const Content = withContext(ark.div, 'content')
+
+type IndicatorProps = ComponentProps<typeof StyledIndicator>
+const StyledIndicator = withContext(ark.span, 'indicator')
+
+export const Indicator = (props: IndicatorProps) => {
+  return (
+    <StyledIndicator {...props}>
+      <InfoIcon />
+    </StyledIndicator>
+  )
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,54 @@
+import { Avatar } from '@ark-ui/solid/avatar'
+import { UserIcon } from 'lucide-solid'
+import { type ComponentProps, type JSX, splitProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { avatar } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(avatar)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Avatar.Root, 'root')
+export const RootProvider = withProvider(Avatar.RootProvider, 'root')
+export const Image = withContext(Avatar.Image, 'image', {
+  defaultProps: () =>
+    ({
+      draggable: 'false',
+      referrerPolicy: 'no-referrer',
+    }) as const,
+})
+
+export { AvatarContext as Context } from '@ark-ui/solid/avatar'
+
+export interface FallbackProps extends ComponentProps<typeof StyledFallback> {
+  /**
+   * The name to derive the initials from.
+   * If not provided, the fallback will display a generic icon.
+   */
+  name?: string | undefined
+  children?: JSX.Element
+}
+
+const StyledFallback = withContext(Avatar.Fallback, 'fallback')
+
+export const Fallback = (props: FallbackProps) => {
+  const [local, rest] = splitProps(props, ['name', 'children', 'asChild'])
+
+  const fallbackContent = () => {
+    if (local.children || local.asChild) {
+      return local.children
+    }
+    if (local.name) {
+      return getInitials(local.name)
+    }
+    return <UserIcon />
+  }
+
+  return <StyledFallback {...rest}>{fallbackContent()}</StyledFallback>
+}
+
+const getInitials = (name: string) => {
+  const names = name.trim().split(' ')
+  const firstName = names[0] || ''
+  const lastName = names.length > 1 ? names[names.length - 1] : ''
+  return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0]
+}

src/components/ui/badge.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid/factory'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { badge } from 'styled-system/recipes'
+
+export type BadgeProps = ComponentProps<typeof Badge>
+export const Badge = styled(ark.div, badge)

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,31 @@
+import { ark } from '@ark-ui/solid/factory'
+import { ChevronRightIcon } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { breadcrumb } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(breadcrumb)
+
+export type RootProps = ComponentProps<typeof Root>
+
+export const Root = withProvider(ark.nav, 'root', {
+  defaultProps: () => ({ 'aria-label': 'breadcrumb' }),
+})
+export const List = withContext(ark.ol, 'list')
+export const Item = withContext(ark.li, 'item')
+export const Link = withContext(ark.a, 'link')
+export const Ellipsis = withContext(ark.li, 'ellipsis', {
+  defaultProps: () =>
+    ({
+      role: 'presentation',
+      'aria-hidden': true,
+      children: '...',
+    }) as const,
+})
+
+export const Separator = withContext(ark.li, 'separator', {
+  defaultProps: () => ({
+    'aria-hidden': true,
+    children: <ChevronRightIcon />,
+  }),
+})

src/components/ui/card.tsx

@@ -0,0 +1,14 @@
+import { ark } from '@ark-ui/solid/factory'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { card } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(card)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(ark.div, 'root')
+export const Header = withContext(ark.div, 'header')
+export const Body = withContext(ark.div, 'body')
+export const Footer = withContext(ark.h3, 'footer')
+export const Title = withContext(ark.h3, 'title')
+export const Description = withContext(ark.div, 'description')

src/components/ui/carousel.tsx

@@ -0,0 +1,33 @@
+import { Carousel, useCarouselContext } from '@ark-ui/solid/carousel'
+import { type ComponentProps, For } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { carousel } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(carousel)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Carousel.Root, 'root', {
+  forwardProps: ['page'],
+  defaultProps: () => ({ spacing: '16px' }),
+})
+export const RootProvider = withProvider(Carousel.RootProvider, 'root')
+export const AutoplayTrigger = withContext(Carousel.AutoplayTrigger, 'autoplayTrigger')
+export const Control = withContext(Carousel.Control, 'control')
+export const Indicator = withContext(Carousel.Indicator, 'indicator')
+export const Item = withContext(Carousel.Item, 'item')
+export const ItemGroup = withContext(Carousel.ItemGroup, 'itemGroup')
+export const NextTrigger = withContext(Carousel.NextTrigger, 'nextTrigger')
+export const PrevTrigger = withContext(Carousel.PrevTrigger, 'prevTrigger')
+
+const StyledIndicatorGroup = withContext(Carousel.IndicatorGroup, 'indicatorGroup')
+export const IndicatorGroup = (props: ComponentProps<typeof StyledIndicatorGroup>) => {
+  const carousel = useCarouselContext()
+
+  return (
+    <StyledIndicatorGroup {...props}>
+      <For each={carousel().pageSnapPoints}>{(_, index) => <Indicator index={index()} />}</For>
+    </StyledIndicatorGroup>
+  )
+}
+
+export { CarouselContext as Context } from '@ark-ui/solid/carousel'

src/components/ui/checkbox.tsx

@@ -0,0 +1,47 @@
+import { Checkbox, useCheckboxContext } from '@ark-ui/solid/checkbox'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext, styled } from 'styled-system/jsx'
+import { checkbox } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+
+const { withProvider, withContext } = createStyleContext(checkbox)
+
+export type RootProps = ComponentProps<typeof Root>
+export type HiddenInputProps = ComponentProps<typeof HiddenInput>
+
+export const Root = withProvider(Checkbox.Root, 'root')
+export const RootProvider = withProvider(Checkbox.RootProvider, 'root')
+export const Control = withContext(Checkbox.Control, 'control')
+export const Group = withProvider(Checkbox.Group, 'group')
+export const Label = withContext(Checkbox.Label, 'label')
+export const HiddenInput = Checkbox.HiddenInput
+
+export {
+  type CheckboxCheckedState as CheckedState,
+  CheckboxGroupProvider as GroupProvider,
+} from '@ark-ui/solid/checkbox'
+
+export const Indicator = (props: HTMLStyledProps<'svg'>) => {
+  const checkbox = useCheckboxContext()
+
+  return (
+    <Checkbox.Indicator indeterminate={checkbox().indeterminate}>
+      <styled.svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3px"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+      >
+        <title>Checkmark</title>
+        {checkbox().indeterminate ? (
+          <path d="M5 12h14" />
+        ) : checkbox().checked ? (
+          <path d="M20 6 9 17l-5-5" />
+        ) : null}
+      </styled.svg>
+    </Checkbox.Indicator>
+  )
+}

src/components/ui/clipboard.tsx

@@ -0,0 +1,37 @@
+import { Clipboard } from '@ark-ui/solid/clipboard'
+import { CheckIcon, CopyIcon } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { clipboard } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(clipboard)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Clipboard.Root, 'root')
+export const RootProvider = withProvider(Clipboard.RootProvider, 'root')
+export const Control = withContext(Clipboard.Control, 'control')
+export const Input = withContext(Clipboard.Input, 'input')
+export const Label = withContext(Clipboard.Label, 'label')
+export const Trigger = withContext(Clipboard.Trigger, 'trigger')
+
+export { ClipboardContext as Context } from '@ark-ui/solid/clipboard'
+
+type IndicatorProps = ComponentProps<typeof StyledIndicator>
+
+const StyledIndicator = withContext(Clipboard.Indicator, 'indicator')
+
+export const Indicator = (props: IndicatorProps) => {
+  return (
+    <StyledIndicator copied={<CheckIcon />} {...props}>
+      <CopyIcon />
+    </StyledIndicator>
+  )
+}
+
+export const CopyText = (props: IndicatorProps) => {
+  return (
+    <StyledIndicator copied="Copied" {...props}>
+      Copy
+    </StyledIndicator>
+  )
+}

src/components/ui/close-button.tsx

@@ -0,0 +1,15 @@
+import { XIcon } from 'lucide-solid'
+import { splitProps } from 'solid-js'
+import { IconButton, type IconButtonProps } from './icon-button'
+
+export type CloseButtonProps = IconButtonProps
+
+export const CloseButton = (props: CloseButtonProps) => {
+  const [local, rest] = splitProps(props, ['children'])
+
+  return (
+    <IconButton variant="plain" colorPalette="gray" aria-label="Close" {...rest}>
+      {local.children ?? <XIcon />}
+    </IconButton>
+  )
+}

src/components/ui/code.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid/factory'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { code } from 'styled-system/recipes'
+
+export type CodeProps = ComponentProps<typeof Code>
+export const Code = styled(ark.code, code)

src/components/ui/collapsible.tsx

@@ -0,0 +1,15 @@
+import { Collapsible } from '@ark-ui/solid/collapsible'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { collapsible } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(collapsible)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(Collapsible.Root, 'root')
+export const RootProvider = withProvider(Collapsible.RootProvider, 'root')
+export const Content = withContext(Collapsible.Content, 'content')
+export const Indicator = withContext(Collapsible.Indicator, 'indicator')
+export const Trigger = withContext(Collapsible.Trigger, 'trigger')
+
+export { CollapsibleContext as Context } from '@ark-ui/solid/collapsible'

src/components/ui/color-picker.tsx

@@ -0,0 +1,41 @@
+import { ColorPicker } from '@ark-ui/solid/color-picker'
+import type { ComponentProps } from 'solid-js'
+import { createStyleContext } from 'styled-system/jsx'
+import { colorPicker } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createStyleContext(colorPicker)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider(ColorPicker.Root, 'root')
+export const RootProvider = withProvider(ColorPicker.RootProvider, 'root')
+export const Area = withContext(ColorPicker.Area, 'area')
+export const AreaBackground = withContext(ColorPicker.AreaBackground, 'areaBackground')
+export const AreaThumb = withContext(ColorPicker.AreaThumb, 'areaThumb')
+export const ChannelInput = withContext(ColorPicker.ChannelInput, 'channelInput')
+export const ChannelSlider = withContext(ColorPicker.ChannelSlider, 'channelSlider')
+export const ChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
+export const ChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
+export const ChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
+export const ChannelSliderValueText = withContext(
+  ColorPicker.ChannelSliderValueText,
+  'channelSliderValueText',
+)
+export const Content = withContext(ColorPicker.Content, 'content')
+export const Control = withContext(ColorPicker.Control, 'control')
+export const EyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
+export const FormatSelect = withContext(ColorPicker.FormatSelect, 'formatSelect')
+export const FormatTrigger = withContext(ColorPicker.FormatTrigger, 'formatTrigger')
+export const HiddenInput = ColorPicker.HiddenInput
+export const Label = withContext(ColorPicker.Label, 'label')
+export const Positioner = withContext(ColorPicker.Positioner, 'positioner')
+export const Swatch = withContext(ColorPicker.Swatch, 'swatch')
+export const SwatchGroup = withContext(ColorPicker.SwatchGroup, 'swatchGroup')
+export const SwatchIndicator = withContext(ColorPicker.SwatchIndicator, 'swatchIndicator')
+export const SwatchTrigger = withContext(ColorPicker.SwatchTrigger, 'swatchTrigger')
+export const TransparencyGrid = withContext(ColorPicker.TransparencyGrid, 'transparencyGrid')
+export const Trigger = withContext(ColorPicker.Trigger, 'trigger')
+export const ValueSwatch = ColorPicker.ValueSwatch
+export const ValueText = withContext(ColorPicker.ValueText, 'valueText')
+export const View = withContext(ColorPicker.View, 'view')
+
+export { ColorPickerContext as Context } from '@ark-ui/solid/color-picker'