inital commit

src/app.tsx

@@ -0,0 +1,20 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import './index.css';
+
+export default function App() {
+  return (
+    <Router
+      root={props => (
+        <MetaProvider>
+          <Title>Streamarr - Home</Title>
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  );
+}

src/common/components/hero.tsx

@@ -0,0 +1,82 @@
+import { Index } from 'solid-js';
+import { css } from 'styled-system/css';
+import { Entry } from '~/features/content';
+
+type HeroProps = {
+  entry: Entry;
+};
+
+export function Hero(props: HeroProps) {
+  return (
+    <div class={container}>
+      <h2 class={title}>{props.entry.title}</h2>
+
+      <img src={props.entry.thumbnail} class={thumbnail} />
+      <img src={props.entry.image} class={background} />
+
+      <span class={detail}>
+        {props.entry.releaseDate}
+
+        <Index each={props.entry.sources ?? []}>
+          {(source) => (
+            <>
+              &nbsp;•&nbsp;
+              <a href={source().url.toString()} target="_blank">
+                {source().rating.score} {source().label}
+              </a>
+            </>
+          )}
+        </Index>
+      </span>
+
+      <p class={summary}>{props.entry.summary}</p>
+    </div>
+  );
+}
+
+const container = css({
+  display: 'grid',
+  grid: 'repeat(3, auto) / 10em 1fr',
+  gridTemplateAreas: `
+    "thumbnail ."
+    "thumbnail title"
+    "thumbnail detail"
+    "thumbnail summary"
+  `,
+  alignContent: 'end',
+  gap: '1em',
+  blockSize: '80vh',
+});
+
+const title = css({
+  gridArea: 'title',
+  fontSize: '2.5em',
+});
+
+const thumbnail = css({
+  gridArea: 'thumbnail',
+  inlineSize: '15em',
+  aspectRatio: '3 / 5',
+  borderRadius: '1em',
+  objectFit: 'cover',
+  objectPosition: 'center',
+});
+
+const background = css({
+  position: 'fixed',
+  inset: '0',
+  zIndex: '-1',
+  blockSize: '90vh',
+  inlineSize: '100%',
+  objectFit: 'cover',
+  objectPosition: 'center',
+});
+
+const detail = css({
+  gridArea: 'detail',
+});
+
+const summary = css({
+  gridArea: 'summary',
+  textWrap: 'balance',
+});

src/common/components/list.tsx

@@ -0,0 +1,55 @@
+import { ParentComponent, Index } from 'solid-js';
+import { css } from 'styled-system/css';
+
+type ListProps<T, U extends JSX.Element> = {
+  label: string;
+  items: T[];
+  children: (item: T) => U;
+};
+
+export const List: ParentComponent<{ label: string; items: T[] }> = (props) => {
+  return (
+    <section class={container}>
+      <b role="heading" class={heading}>
+        {props.label}
+      </b>
+
+      <ul class={list}>
+        <Index each={props.items}>{props.children}</Index>
+      </ul>
+    </section>
+  );
+};
+
+const container = css({
+  display: 'grid',
+  gridAutoFlow: 'row',
+  inlineSize: '100%',
+});
+
+const heading = css({
+  fontSize: '2em',
+});
+
+const list = css({
+  // layout
+  display: 'grid',
+  gridAutoFlow: 'column',
+  //   gridAutoColumns: '',
+
+  // spacing
+  gap: '2em',
+  padding: '10em 4em 5em',
+  scrollPadding: '4em',
+  margin: '-10em -4em 0em',
+  marginBlockStart: '-10em',
+
+  // scroll
+  overflowInline: 'auto',
+  overflowBlock: 'visible',
+  scrollSnapType: 'inline proximity',
+
+  '@media (hover: none)': {
+    '& > *': { scrollSnapAlign: 'start' },
+  },
+});

src/common/components/ui/avatar.tsx

@@ -0,0 +1,40 @@
+import { splitProps } from 'solid-js'
+import * as StyledAvatar from './styled/avatar'
+
+export interface AvatarProps extends StyledAvatar.RootProps {
+  name?: string
+  src?: string
+}
+
+export const Avatar = (props: AvatarProps) => {
+  const [localProps, rootProps] = splitProps(props, ['name', 'src'])
+
+  return (
+    <StyledAvatar.Root {...rootProps}>
+      <StyledAvatar.Fallback>{getInitials(localProps.name) || <UserIcon />}</StyledAvatar.Fallback>
+      <StyledAvatar.Image src={localProps.src} alt={localProps.name} />
+    </StyledAvatar.Root>
+  )
+}
+
+const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <title>User Icon</title>
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+)
+
+const getInitials = (name = '') =>
+  name
+    .split(' ')
+    .map((part) => part[0])
+    .splice(0, 2)
+    .join('')
+    .toUpperCase()

src/common/components/ui/badge.tsx

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from './styled/badge'

src/common/components/ui/button.tsx

@@ -0,0 +1,37 @@
+import type { JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { Center, styled } from 'styled-system/jsx'
+import { Spinner } from './spinner'
+import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: JSX.Element
+}
+
+export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}
+
+export const Button = (props: ButtonProps) => {
+  const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children'])
+  const trulyDisabled = () => localProps.loading || localProps.disabled
+
+  return (
+    <StyledButton disabled={trulyDisabled()} {...rest}>
+      <Show
+        when={localProps.loading && !localProps.loadingText}
+        fallback={localProps.loadingText || localProps.children}
+      >
+        <>
+          <ButtonSpinner />
+          <styled.span opacity={0}>{localProps.children}</styled.span>
+        </>
+      </Show>
+    </StyledButton>
+  )
+}
+
+const ButtonSpinner = () => (
+  <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
+    <Spinner borderColor="currentColor" />
+  </Center>
+)

src/common/components/ui/card.tsx

@@ -0,0 +1 @@
+export * as Card from './styled/card'

src/common/components/ui/checkbox.tsx

@@ -0,0 +1,51 @@
+import { Show, children } from 'solid-js'
+import * as StyledCheckbox from './styled/checkbox'
+
+export interface CheckboxProps extends StyledCheckbox.RootProps {}
+
+export const Checkbox = (props: CheckboxProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledCheckbox.Root {...props}>
+      <StyledCheckbox.Control>
+        <StyledCheckbox.Indicator>
+          <CheckIcon />
+        </StyledCheckbox.Indicator>
+        <StyledCheckbox.Indicator indeterminate>
+          <MinusIcon />
+        </StyledCheckbox.Indicator>
+      </StyledCheckbox.Control>
+      <Show when={getChildren()}>
+        <StyledCheckbox.Label>{getChildren()}</StyledCheckbox.Label>
+      </Show>
+      <StyledCheckbox.HiddenInput />
+    </StyledCheckbox.Root>
+  )
+}
+
+const CheckIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Check Icon</title>
+    <path
+      d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+const MinusIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Minus Icon</title>
+    <path
+      d="M2.91675 7H11.0834"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)

src/common/components/ui/code.tsx

@@ -0,0 +1 @@
+export { Code, type CodeProps } from './styled/code'

src/common/components/ui/color-picker.tsx

@@ -0,0 +1 @@
+export * as ColorPicker from './styled/color-picker'

src/common/components/ui/combobox.tsx

@@ -0,0 +1 @@
+export * as Combobox from './styled/combobox'

src/common/components/ui/date-picker.tsx

@@ -0,0 +1 @@
+export * as DatePicker from './styled/date-picker'

src/common/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * as Dialog from './styled/dialog'

src/common/components/ui/drawer.tsx

@@ -0,0 +1 @@
+export * as Drawer from './styled/drawer'

src/common/components/ui/editable.tsx

@@ -0,0 +1 @@
+export * as Editable from './styled/editable'

src/common/components/ui/field.tsx

@@ -0,0 +1 @@
+export * as Field from './styled/field'

src/common/components/ui/file-upload.tsx

@@ -0,0 +1 @@
+export * as FileUpload from './styled/file-upload'

src/common/components/ui/heading.tsx

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './styled/heading'

src/common/components/ui/icon-button.tsx

@@ -0,0 +1 @@
+export { IconButton, type IconButtonProps } from './styled/icon-button'

src/common/components/ui/icon.tsx

@@ -0,0 +1 @@
+export { Icon, type IconProps } from './styled/icon'

src/common/components/ui/input.tsx

@@ -0,0 +1 @@
+export { Input, type InputProps } from './styled/input'

src/common/components/ui/kbd.tsx

@@ -0,0 +1 @@
+export { Kbd, type KbdProps } from './styled/kbd'

src/common/components/ui/link.tsx

@@ -0,0 +1 @@
+export { Link, type LinkProps } from './styled/link'

src/common/components/ui/menu.tsx

@@ -0,0 +1 @@
+export * as Menu from './styled/menu'

src/common/components/ui/number-input.tsx

@@ -0,0 +1,53 @@
+import { Show, children } from 'solid-js'
+import * as StyledNumberInput from './styled/number-input'
+
+export interface NumberInputProps extends StyledNumberInput.RootProps {}
+
+export const NumberInput = (props: NumberInputProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledNumberInput.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledNumberInput.Label>{getChildren()}</StyledNumberInput.Label>
+      </Show>
+      <StyledNumberInput.Control>
+        <StyledNumberInput.Input />
+        <StyledNumberInput.IncrementTrigger>
+          <ChevronUpIcon />
+        </StyledNumberInput.IncrementTrigger>
+        <StyledNumberInput.DecrementTrigger>
+          <ChevronDownIcon />
+        </StyledNumberInput.DecrementTrigger>
+      </StyledNumberInput.Control>
+    </StyledNumberInput.Root>
+  )
+}
+
+const ChevronUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Up Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m18 15l-6-6l-6 6"
+    />
+  </svg>
+)
+
+const ChevronDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Down Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m6 9l6 6l6-6"
+    />
+  </svg>
+)

src/common/components/ui/pagination.tsx

@@ -0,0 +1,73 @@
+import { For } from 'solid-js'
+import { Button } from './button'
+import { IconButton } from './icon-button'
+import * as StyledPagination from './styled/pagination'
+
+export interface PaginationProps extends StyledPagination.RootProps {}
+
+export const Pagination = (props: PaginationProps) => {
+  return (
+    <StyledPagination.Root {...props}>
+      <StyledPagination.PrevTrigger
+        asChild={(props) => (
+          <IconButton {...props} variant="ghost" aria-label="Next Page">
+            <ChevronLeftIcon />
+          </IconButton>
+        )}
+      />
+      <StyledPagination.Context>
+        {(pagiation) => (
+          <For each={pagiation().pages}>
+            {(page, index) =>
+              page.type === 'page' ? (
+                <StyledPagination.Item
+                  {...page}
+                  asChild={(props) => <Button {...props} variant="outline" />}
+                >
+                  {page.value}
+                </StyledPagination.Item>
+              ) : (
+                <StyledPagination.Ellipsis index={index()}>&#8230;</StyledPagination.Ellipsis>
+              )
+            }
+          </For>
+        )}
+      </StyledPagination.Context>
+      <StyledPagination.NextTrigger
+        asChild={(props) => (
+          <IconButton {...props} variant="ghost" aria-label="Next Page">
+            <ChevronRightIcon />
+          </IconButton>
+        )}
+      />
+    </StyledPagination.Root>
+  )
+}
+
+const ChevronLeftIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Left Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m15 18l-6-6l6-6"
+    />
+  </svg>
+)
+
+const ChevronRightIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Right Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 18l6-6l-6-6"
+    />
+  </svg>
+)

src/common/components/ui/pin-input.tsx

@@ -0,0 +1,34 @@
+import { Index, Show, children } from 'solid-js'
+import { Input } from './input'
+import * as StyledPinInput from './styled/pin-input'
+
+export interface PinInputProps extends StyledPinInput.RootProps {
+  /**
+   * The number of inputs to render.
+   * @default 4
+   */
+  length?: number
+}
+
+export const PinInput = (props: PinInputProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledPinInput.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledPinInput.Label>{getChildren()}</StyledPinInput.Label>
+      </Show>
+      <StyledPinInput.Control>
+        <Index each={Array.from({ length: props.length ?? 4 }, (_, index) => index)}>
+          {(index) => (
+            <StyledPinInput.Input
+              index={index()}
+              asChild={(inputProps) => <Input {...inputProps()} size={props.size} />}
+            />
+          )}
+        </Index>
+      </StyledPinInput.Control>
+      <StyledPinInput.HiddenInput />
+    </StyledPinInput.Root>
+  )
+}

src/common/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * as Popover from './styled/popover'

src/common/components/ui/progress.tsx

@@ -0,0 +1,38 @@
+import { Show, children, splitProps } from 'solid-js'
+import * as StyledProgress from './styled/progress'
+
+export interface ProgressProps extends StyledProgress.RootProps {
+  /**
+   * The type of progress to render.
+   * @default linear
+   */
+  type?: 'linear' | 'circular'
+}
+
+export const Progress = (props: ProgressProps) => {
+  const [localProps, rootProps] = splitProps(props, ['children', 'type'])
+  const getChildren = children(() => localProps.children)
+
+  return (
+    <StyledProgress.Root {...rootProps}>
+      <Show when={getChildren()}>
+        <StyledProgress.Label>{getChildren()}</StyledProgress.Label>
+      </Show>
+      <Show
+        when={localProps.type === 'circular'}
+        fallback={
+          <StyledProgress.Track>
+            <StyledProgress.Range />
+          </StyledProgress.Track>
+        }
+      >
+        <StyledProgress.Circle>
+          <StyledProgress.CircleTrack />
+          <StyledProgress.CircleRange />
+          <StyledProgress.ValueText />
+        </StyledProgress.Circle>
+      </Show>
+      <StyledProgress.ValueText />
+    </StyledProgress.Root>
+  )
+}

src/common/components/ui/radio-button-group.tsx

@@ -0,0 +1 @@
+export * as RadioButtonGroup from './styled/radio-button-group'

src/common/components/ui/radio-group.tsx

@@ -0,0 +1 @@
+export * as RadioGroup from './styled/radio-group'

src/common/components/ui/rating-group.tsx

@@ -0,0 +1,66 @@
+import { Index, Show, children } from 'solid-js'
+import * as StyledRatingGroup from './styled/rating-group'
+
+export interface RatingGroupProps extends StyledRatingGroup.RootProps {}
+
+export const RatingGroup = (props: RatingGroupProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledRatingGroup.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledRatingGroup.Label>{getChildren()}</StyledRatingGroup.Label>
+      </Show>
+      <StyledRatingGroup.Control>
+        <StyledRatingGroup.Context>
+          {(context) => (
+            <Index each={context().items}>
+              {(index) => (
+                <StyledRatingGroup.Item index={index()}>
+                  <StyledRatingGroup.ItemContext>
+                    {(item) => (
+                      <Show when={item().highlighted} fallback={<StarIcon />}>
+                        <StarIcon half={item().half} />
+                      </Show>
+                    )}
+                  </StyledRatingGroup.ItemContext>
+                </StyledRatingGroup.Item>
+              )}
+            </Index>
+          )}
+        </StyledRatingGroup.Context>
+      </StyledRatingGroup.Control>
+      <StyledRatingGroup.HiddenInput />
+    </StyledRatingGroup.Root>
+  )
+}
+
+interface Props {
+  half?: boolean
+}
+
+const StarIcon = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="inherit"
+    stroke="inherit"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <title>Star Icon</title>
+    <defs>
+      <linearGradient id="half">
+        <stop offset="50%" stop-color="var(--colors-color-palette-default)" />
+        <stop offset="50%" stop-color="var(--colors-bg-emphasized)" />
+      </linearGradient>
+    </defs>
+    <polygon
+      fill={props.half ? 'url(#half)' : 'inherit'}
+      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+    />
+  </svg>
+)

src/common/components/ui/segment-group.tsx

@@ -0,0 +1 @@
+export * as SegmentGroup from './styled/segment-group'

src/common/components/ui/select.tsx

@@ -0,0 +1 @@
+export * as Select from './styled/select'

src/common/components/ui/slider.tsx

@@ -0,0 +1,49 @@
+import { Index, type JSX, Show, children, splitProps } from 'solid-js'
+import * as StyledSlider from './styled/slider'
+
+export interface SliderProps extends StyledSlider.RootProps {
+  marks?: {
+    value: number
+    label?: JSX.Element
+  }[]
+}
+
+export const Slider = (props: SliderProps) => {
+  const [localProps, rootProps] = splitProps(props, ['children', 'marks'])
+  const getChildren = children(() => localProps.children)
+
+  return (
+    <StyledSlider.Root {...rootProps}>
+      <StyledSlider.Context>
+        {(slider) => (
+          <>
+            <Show when={getChildren()}>
+              <StyledSlider.Label>{getChildren()}</StyledSlider.Label>
+            </Show>
+            <StyledSlider.Control>
+              <StyledSlider.Track>
+                <StyledSlider.Range />
+              </StyledSlider.Track>
+              <Index each={slider().value}>
+                {(_, index) => (
+                  <StyledSlider.Thumb index={index}>
+                    <StyledSlider.HiddenInput />
+                  </StyledSlider.Thumb>
+                )}
+              </Index>
+            </StyledSlider.Control>
+            <Show when={localProps.marks}>
+              <StyledSlider.MarkerGroup>
+                <Index each={localProps.marks}>
+                  {(mark) => (
+                    <StyledSlider.Marker value={mark().value}>{mark().label}</StyledSlider.Marker>
+                  )}
+                </Index>
+              </StyledSlider.MarkerGroup>
+            </Show>
+          </>
+        )}
+      </StyledSlider.Context>
+    </StyledSlider.Root>
+  )
+}

src/common/components/ui/spinner.tsx

@@ -0,0 +1,23 @@
+import { mergeProps, splitProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { Spinner as StyledSpinner, type SpinnerProps as StyledSpinnerProps } from './styled/spinner'
+
+export interface SpinnerProps extends StyledSpinnerProps {
+  /**
+   * For accessibility, it is important to add a fallback loading text.
+   * This text will be visible to screen readers.
+   * @default "Loading..."
+   */
+  label?: string
+}
+
+export const Spinner = (props: SpinnerProps) => {
+  const [_localProps, rootProps] = splitProps(props, ['label'])
+  const localProps = mergeProps({ label: 'Loading...' }, _localProps)
+
+  return (
+    <StyledSpinner borderBottomColor="transparent" borderLeftColor="transparent" {...rootProps}>
+      <styled.span srOnly>{localProps.label}</styled.span>
+    </StyledSpinner>
+  )
+}

src/common/components/ui/styled/avatar.tsx

@@ -0,0 +1,30 @@
+import { type Assign, Avatar } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type AvatarVariantProps, avatar } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(avatar)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootProviderBaseProps>, AvatarVariantProps>
+>(Avatar.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootBaseProps>, AvatarVariantProps>
+>(Avatar.Root, 'root')
+
+export const Fallback = withContext<Assign<HTMLStyledProps<'span'>, Avatar.FallbackBaseProps>>(
+  Avatar.Fallback,
+  'fallback',
+)
+
+export const Image = withContext<Assign<HTMLStyledProps<'img'>, Avatar.ImageBaseProps>>(
+  Avatar.Image,
+  'image',
+)
+
+export { AvatarContext as Context } from '@ark-ui/solid'
+export type { AvatarStatusChangeDetails as StatusChangeDetails } from '@ark-ui/solid'

src/common/components/ui/styled/badge.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+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/common/components/ui/styled/button.tsx

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

src/common/components/ui/styled/card.tsx

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

src/common/components/ui/styled/checkbox.tsx

@@ -0,0 +1,42 @@
+import { type Assign, Checkbox } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type CheckboxVariantProps, checkbox } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(checkbox)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Checkbox.RootProviderBaseProps>, CheckboxVariantProps>
+>(Checkbox.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Checkbox.RootBaseProps>, CheckboxVariantProps>
+>(Checkbox.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.ControlBaseProps>>(
+  Checkbox.Control,
+  'control',
+)
+
+export const Group = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.GroupBaseProps>>(
+  Checkbox.Group,
+  'group',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.IndicatorBaseProps>>(
+  Checkbox.Indicator,
+  'indicator',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'span'>, Checkbox.LabelBaseProps>>(
+  Checkbox.Label,
+  'label',
+)
+
+export {
+  CheckboxContext as Context,
+  CheckboxHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/code.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+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/common/components/ui/styled/color-picker.tsx

@@ -0,0 +1,129 @@
+import { type Assign, ColorPicker } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ColorPickerVariantProps, colorPicker } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(colorPicker)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ColorPicker.RootProviderBaseProps>, ColorPickerVariantProps>
+>(ColorPicker.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ColorPicker.RootBaseProps>, ColorPickerVariantProps>
+>(ColorPicker.Root, 'root')
+
+export const AreaBackground = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.AreaBackgroundBaseProps>
+>(ColorPicker.AreaBackground, 'areaBackground')
+
+export const Area = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.AreaBaseProps>>(
+  ColorPicker.Area,
+  'area',
+)
+
+export const AreaThumb = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.AreaThumbBaseProps>
+>(ColorPicker.AreaThumb, 'areaThumb')
+
+export const ChannelInput = withContext<
+  Assign<HTMLStyledProps<'input'>, ColorPicker.ChannelInputBaseProps>
+>(ColorPicker.ChannelInput, 'channelInput')
+
+export const ChannelSliderLabel = withContext<
+  Assign<HTMLStyledProps<'label'>, ColorPicker.ChannelSliderLabelBaseProps>
+>(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
+
+export const ChannelSlider = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderBaseProps>
+>(ColorPicker.ChannelSlider, 'channelSlider')
+
+export const ChannelSliderThumb = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderThumbBaseProps>
+>(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
+
+export const ChannelSliderTrack = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderTrackBaseProps>
+>(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
+
+export const ChannelSliderValueText = withContext<
+  Assign<HTMLStyledProps<'span'>, ColorPicker.ChannelSliderValueTextBaseProps>
+>(ColorPicker.ChannelSliderValueText, 'channelSliderValueText')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ContentBaseProps>>(
+  ColorPicker.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ControlBaseProps>>(
+  ColorPicker.Control,
+  'control',
+)
+
+export const EyeDropperTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.EyeDropperTriggerBaseProps>
+>(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
+
+export const FormatSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, ColorPicker.FormatSelectBaseProps>
+>(ColorPicker.FormatSelect, 'formatSelect')
+
+export const FormatTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.FormatTriggerBaseProps>
+>(ColorPicker.FormatTrigger, 'formatTrigger')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, ColorPicker.LabelBaseProps>>(
+  ColorPicker.Label,
+  'label',
+)
+
+export const Positioner = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.PositionerBaseProps>
+>(ColorPicker.Positioner, 'positioner')
+
+export const SwatchGroup = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchGroupBaseProps>
+>(ColorPicker.SwatchGroup, 'swatchGroup')
+
+export const SwatchIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchIndicatorBaseProps>
+>(ColorPicker.SwatchIndicator, 'swatchIndicator')
+
+export const Swatch = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchBaseProps>>(
+  ColorPicker.Swatch,
+  'swatch',
+)
+
+export const SwatchTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.SwatchTriggerBaseProps>
+>(ColorPicker.SwatchTrigger, 'swatchTrigger')
+
+export const TransparencyGrid = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.TransparencyGridBaseProps>
+>(ColorPicker.TransparencyGrid, 'transparencyGrid')
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, ColorPicker.TriggerBaseProps>>(
+  ColorPicker.Trigger,
+  'trigger',
+)
+
+export const ValueSwatch = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ValueSwatchBaseProps>
+>(ColorPicker.ValueSwatch, 'swatch')
+
+export const ValueText = withContext<
+  Assign<HTMLStyledProps<'span'>, ColorPicker.ValueTextBaseProps>
+>(ColorPicker.ValueText, 'valueText')
+
+export const View = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ViewBaseProps>>(
+  ColorPicker.View,
+  'view',
+)
+
+export {
+  ColorPickerContext as Context,
+  ColorPickerHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/combobox.tsx

@@ -0,0 +1,94 @@
+import { type Assign, Combobox } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ComboboxVariantProps, combobox } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(combobox)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Combobox.RootProviderBaseProps<Combobox.CollectionItem>>,
+    ComboboxVariantProps
+  >
+>(Combobox.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Combobox.RootBaseProps<Combobox.CollectionItem>>,
+    ComboboxVariantProps
+  >
+>(Combobox.Root)
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Combobox.ClearTriggerBaseProps>
+>(Combobox.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ContentBaseProps>>(
+  Combobox.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ControlBaseProps>>(
+  Combobox.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, Combobox.InputBaseProps>>(
+  Combobox.Input,
+  'input',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupLabelBaseProps>
+>(Combobox.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupBaseProps>>(
+  Combobox.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Combobox.ItemIndicatorBaseProps>
+>(Combobox.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ItemBaseProps>>(
+  Combobox.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, Combobox.ItemTextBaseProps>>(
+  Combobox.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Combobox.LabelBaseProps>>(
+  Combobox.Label,
+  'label',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ListBaseProps>>(
+  Combobox.List,
+  'list',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Combobox.PositionerBaseProps>>(
+  Combobox.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Combobox.TriggerBaseProps>>(
+  Combobox.Trigger,
+  'trigger',
+)
+
+export { ComboboxContext as Context } from '@ark-ui/solid'
+
+export type {
+  ComboboxHighlightChangeDetails as HighlightChangeDetails,
+  ComboboxInputValueChangeDetails as InputValueChangeDetails,
+  ComboboxOpenChangeDetails as OpenChangeDetails,
+  ComboboxValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/combobox'

src/common/components/ui/styled/date-picker.tsx

@@ -0,0 +1,121 @@
+import { type Assign, DatePicker } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type DatePickerVariantProps, datePicker } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(datePicker)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootProviderBaseProps>, DatePickerVariantProps>
+>(DatePicker.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootBaseProps>, DatePickerVariantProps>
+>(DatePicker.Root, 'root')
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.ClearTriggerBaseProps>
+>(DatePicker.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ContentBaseProps>>(
+  DatePicker.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ControlBaseProps>>(
+  DatePicker.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, DatePicker.InputBaseProps>>(
+  DatePicker.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, DatePicker.LabelBaseProps>>(
+  DatePicker.Label,
+  'label',
+)
+
+export const MonthSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, DatePicker.MonthSelectBaseProps>
+>(DatePicker.MonthSelect, 'monthSelect')
+
+export const NextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.NextTriggerBaseProps>
+>(DatePicker.NextTrigger, 'nextTrigger')
+
+export const Positioner = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.PositionerBaseProps>
+>(DatePicker.Positioner, 'positioner')
+
+export const PresetTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.PresetTriggerBaseProps>
+>(DatePicker.PresetTrigger, 'presetTrigger')
+
+export const PrevTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.PrevTriggerBaseProps>
+>(DatePicker.PrevTrigger, 'prevTrigger')
+
+export const RangeText = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.RangeTextBaseProps>>(
+  DatePicker.RangeText,
+  'rangeText',
+)
+
+export const TableBody = withContext<
+  Assign<HTMLStyledProps<'tbody'>, DatePicker.TableBodyBaseProps>
+>(DatePicker.TableBody, 'tableBody')
+
+export const TableCell = withContext<Assign<HTMLStyledProps<'td'>, DatePicker.TableCellBaseProps>>(
+  DatePicker.TableCell,
+  'tableCell',
+)
+
+export const TableCellTrigger = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.TableCellTriggerBaseProps>
+>(DatePicker.TableCellTrigger, 'tableCellTrigger')
+
+export const TableHead = withContext<
+  Assign<HTMLStyledProps<'thead'>, DatePicker.TableHeadBaseProps>
+>(DatePicker.TableHead, 'tableHead')
+
+export const TableHeader = withContext<
+  Assign<HTMLStyledProps<'th'>, DatePicker.TableHeaderBaseProps>
+>(DatePicker.TableHeader, 'tableHeader')
+
+export const Table = withContext<Assign<HTMLStyledProps<'table'>, DatePicker.TableBaseProps>>(
+  DatePicker.Table,
+  'table',
+)
+
+export const TableRow = withContext<Assign<HTMLStyledProps<'tr'>, DatePicker.TableRowBaseProps>>(
+  DatePicker.TableRow,
+  'tableRow',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, DatePicker.TriggerBaseProps>>(
+  DatePicker.Trigger,
+  'trigger',
+)
+
+export const ViewControl = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.ViewControlBaseProps>
+>(DatePicker.ViewControl, 'viewControl')
+
+export const View = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ViewBaseProps>>(
+  DatePicker.View,
+  'view',
+)
+
+export const ViewTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.ViewTriggerBaseProps>
+>(DatePicker.ViewTrigger, 'viewTrigger')
+
+export const YearSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, DatePicker.YearSelectBaseProps>
+>(DatePicker.YearSelect, 'yearSelect')
+
+export { DatePickerContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/dialog.tsx

@@ -0,0 +1,51 @@
+import { type Assign, Dialog } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type DialogVariantProps, dialog } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(dialog)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Assign<Dialog.RootProviderProps, DialogVariantProps>>(
+  Dialog.RootProvider,
+)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Dialog.RootProps, DialogVariantProps>>(Dialog.Root)
+
+export const Backdrop = withContext<Assign<HTMLStyledProps<'div'>, Dialog.BackdropBaseProps>>(
+  Dialog.Backdrop,
+  'backdrop',
+)
+
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Dialog.CloseTriggerBaseProps>
+>(Dialog.CloseTrigger, 'closeTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Dialog.ContentBaseProps>>(
+  Dialog.Content,
+  'content',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Dialog.DescriptionBaseProps>>(
+  Dialog.Description,
+  'description',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Dialog.PositionerBaseProps>>(
+  Dialog.Positioner,
+  'positioner',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'h2'>, Dialog.TitleBaseProps>>(
+  Dialog.Title,
+  'title',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Dialog.TriggerBaseProps>>(
+  Dialog.Trigger,
+  'trigger',
+)
+
+export { DialogContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/drawer.tsx

@@ -0,0 +1,74 @@
+import { type Assign, Dialog, type PolymorphicProps, ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { drawer } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(drawer)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Dialog.RootProviderProps>(Dialog.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Dialog.RootProps>(Dialog.Root)
+
+export type BackdropProps = ComponentProps<typeof Backdrop>
+export const Backdrop = withContext<Assign<HTMLStyledProps<'div'>, Dialog.BackdropProps>>(
+  Dialog.Backdrop,
+  'backdrop',
+)
+
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Dialog.CloseTriggerProps>
+>(Dialog.CloseTrigger, 'closeTrigger')
+
+export type ContentProps = ComponentProps<typeof Content>
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Dialog.ContentProps>>(
+  Dialog.Content,
+  'content',
+)
+
+export type DescriptionProps = ComponentProps<typeof Description>
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Dialog.DescriptionProps>>(
+  Dialog.Description,
+  'description',
+)
+
+export type PositionerProps = ComponentProps<typeof Positioner>
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Dialog.PositionerProps>>(
+  Dialog.Positioner,
+  'positioner',
+)
+
+export type TitleProps = ComponentProps<typeof Title>
+export const Title = withContext<Assign<HTMLStyledProps<'h2'>, Dialog.TitleProps>>(
+  Dialog.Title,
+  'title',
+)
+
+export type TriggerProps = ComponentProps<typeof Trigger>
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Dialog.TriggerProps>>(
+  Dialog.Trigger,
+  'trigger',
+)
+
+export const Header = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'header',
+)
+
+export const Body = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'body',
+)
+
+export const Footer = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'footer',
+)
+
+export {
+  DialogContext as Context,
+  type DialogContextProps as ContextProps,
+} from '@ark-ui/solid'

src/common/components/ui/styled/editable.tsx

@@ -0,0 +1,56 @@
+import { type Assign, Editable } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type EditableVariantProps, editable } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(editable)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootProviderBaseProps>, EditableVariantProps>
+>(Editable.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootBaseProps>, EditableVariantProps>
+>(Editable.Root, 'root')
+
+export const Area = withContext<Assign<HTMLStyledProps<'div'>, Editable.AreaBaseProps>>(
+  Editable.Area,
+  'area',
+)
+
+export const CancelTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.CancelTriggerBaseProps>
+>(Editable.CancelTrigger, 'cancelTrigger')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Editable.ControlBaseProps>>(
+  Editable.Control,
+  'control',
+)
+
+export const EditTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.EditTriggerBaseProps>
+>(Editable.EditTrigger, 'editTrigger')
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, Editable.InputBaseProps>>(
+  Editable.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Editable.LabelBaseProps>>(
+  Editable.Label,
+  'label',
+)
+
+export const Preview = withContext<Assign<HTMLStyledProps<'span'>, Editable.PreviewBaseProps>>(
+  Editable.Preview,
+  'preview',
+)
+
+export const SubmitTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.SubmitTriggerBaseProps>
+>(Editable.SubmitTrigger, 'submitTrigger')
+
+export { EditableContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/field.tsx

@@ -0,0 +1,46 @@
+import { type Assign, Field } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type FieldVariantProps, field, input, textarea } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(field)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Field.RootProviderBaseProps>, FieldVariantProps>
+>(Field.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Field.RootBaseProps>, FieldVariantProps>
+>(Field.Root, 'root')
+
+export const ErrorText = withContext<Assign<HTMLStyledProps<'span'>, Field.ErrorTextBaseProps>>(
+  Field.ErrorText,
+  'errorText',
+)
+
+export const HelperText = withContext<Assign<HTMLStyledProps<'span'>, Field.HelperTextBaseProps>>(
+  Field.HelperText,
+  'helperText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Field.LabelBaseProps>>(
+  Field.Label,
+  'label',
+)
+
+export const Select = withContext<Assign<HTMLStyledProps<'select'>, Field.SelectBaseProps>>(
+  Field.Select,
+  'select',
+)
+
+export type InputProps = ComponentProps<typeof Input>
+export const Input = styled(Field.Input, input)
+
+export type TextareaProps = ComponentProps<typeof Textarea>
+export const Textarea = styled(Field.Textarea, textarea)
+
+export { FieldContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/file-upload.tsx

@@ -0,0 +1,68 @@
+import { type Assign, FileUpload } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type FileUploadVariantProps, fileUpload } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(fileUpload)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, FileUpload.RootProviderBaseProps>, FileUploadVariantProps>
+>(FileUpload.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, FileUpload.RootBaseProps>, FileUploadVariantProps>
+>(FileUpload.Root, 'root')
+
+export const Dropzone = withContext<Assign<HTMLStyledProps<'div'>, FileUpload.DropzoneBaseProps>>(
+  FileUpload.Dropzone,
+  'dropzone',
+)
+
+export const ItemDeleteTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, FileUpload.ItemDeleteTriggerBaseProps>
+>(FileUpload.ItemDeleteTrigger, 'itemDeleteTrigger')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'ul'>, FileUpload.ItemGroupBaseProps>>(
+  FileUpload.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemName = withContext<Assign<HTMLStyledProps<'div'>, FileUpload.ItemNameBaseProps>>(
+  FileUpload.ItemName,
+  'itemName',
+)
+
+export const ItemPreviewImage = withContext<
+  Assign<HTMLStyledProps<'img'>, FileUpload.ItemPreviewImageBaseProps>
+>(FileUpload.ItemPreviewImage, 'itemPreviewImage')
+
+export const ItemPreview = withContext<
+  Assign<HTMLStyledProps<'div'>, FileUpload.ItemPreviewBaseProps>
+>(FileUpload.ItemPreview, 'itemPreview')
+
+export const Item = withContext<Assign<HTMLStyledProps<'li'>, FileUpload.ItemBaseProps>>(
+  FileUpload.Item,
+  'item',
+)
+
+export const ItemSizeText = withContext<
+  Assign<HTMLStyledProps<'div'>, FileUpload.ItemSizeTextBaseProps>
+>(FileUpload.ItemSizeText, 'itemSizeText')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, FileUpload.LabelBaseProps>>(
+  FileUpload.Label,
+  'label',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, FileUpload.TriggerBaseProps>>(
+  FileUpload.Trigger,
+  'trigger',
+)
+
+export {
+  FileUploadContext as Context,
+  FileUploadHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/heading.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type TextVariantProps, text } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+type TextProps = TextVariantProps & { as?: React.ElementType }
+
+export type HeadingProps = ComponentProps<typeof Heading>
+export const Heading = styled('h2', text, {
+  defaultProps: { variant: 'heading' },
+}) as StyledComponent<'h2', TextProps>

src/common/components/ui/styled/icon-button.tsx

@@ -0,0 +1,9 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type ButtonVariantProps, button } from 'styled-system/recipes'
+
+export type IconButtonProps = ComponentProps<typeof IconButton>
+export const IconButton = styled(ark.button, button, {
+  defaultProps: { px: '0' } as ButtonVariantProps,
+})

src/common/components/ui/styled/icon.tsx

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

src/common/components/ui/styled/input.tsx

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

src/common/components/ui/styled/kbd.tsx

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

src/common/components/ui/styled/link.tsx

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

src/common/components/ui/styled/menu.tsx

@@ -0,0 +1,98 @@
+import { type Assign, Menu } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type MenuVariantProps, menu } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(menu)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Assign<Menu.RootProviderProps, MenuVariantProps>>(
+  Menu.RootProvider,
+)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Menu.RootProps, MenuVariantProps>>(Menu.Root)
+
+export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowBaseProps>>(
+  Menu.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowTipBaseProps>>(
+  Menu.ArrowTip,
+  'arrowTip',
+)
+
+export const CheckboxItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.CheckboxItemBaseProps>>(
+  Menu.CheckboxItem,
+  'item',
+)
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Menu.ContentBaseProps>>(
+  Menu.Content,
+  'content',
+)
+
+export const ContextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Menu.ContextTriggerBaseProps>
+>(Menu.ContextTrigger, 'contextTrigger')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Menu.IndicatorBaseProps>>(
+  Menu.Indicator,
+  'indicator',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.ItemGroupLabelBaseProps>
+>(Menu.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemGroupBaseProps>>(
+  Menu.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.ItemIndicatorBaseProps>
+>(Menu.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemBaseProps>>(
+  Menu.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemTextBaseProps>>(
+  Menu.ItemText,
+  'itemText',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Menu.PositionerBaseProps>>(
+  Menu.Positioner,
+  'positioner',
+)
+
+export const RadioItemGroup = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.RadioItemGroupBaseProps>
+>(Menu.RadioItemGroup, 'itemGroup')
+
+export const RadioItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.RadioItemBaseProps>>(
+  Menu.RadioItem,
+  'item',
+)
+
+export const Separator = withContext<Assign<HTMLStyledProps<'hr'>, Menu.SeparatorBaseProps>>(
+  Menu.Separator,
+  'separator',
+)
+
+export const TriggerItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.TriggerItemBaseProps>>(
+  Menu.TriggerItem,
+  'triggerItem',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Menu.TriggerBaseProps>>(
+  Menu.Trigger,
+  'trigger',
+)
+
+export { MenuContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/number-input.tsx

@@ -0,0 +1,52 @@
+import { type Assign, NumberInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type NumberInputVariantProps, numberInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(numberInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootProviderBaseProps>, NumberInputVariantProps>
+>(NumberInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootBaseProps>, NumberInputVariantProps>
+>(NumberInput.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, NumberInput.ControlBaseProps>>(
+  NumberInput.Control,
+  'control',
+)
+
+export const DecrementTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, NumberInput.DecrementTriggerBaseProps>
+>(NumberInput.DecrementTrigger, 'decrementTrigger')
+
+export const IncrementTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, NumberInput.IncrementTriggerBaseProps>
+>(NumberInput.IncrementTrigger, 'incrementTrigger')
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, NumberInput.InputBaseProps>>(
+  NumberInput.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, NumberInput.LabelBaseProps>>(
+  NumberInput.Label,
+  'label',
+)
+
+export const Scrubber = withContext<Assign<HTMLStyledProps<'div'>, NumberInput.ScrubberBaseProps>>(
+  NumberInput.Scrubber,
+  'scrubber',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, NumberInput.ValueTextProps>>(
+  NumberInput.ValueText,
+  'valueText',
+)
+
+export { NumberInputContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/pagination.tsx

@@ -0,0 +1,37 @@
+import { type Assign, Pagination } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PaginationVariantProps, pagination } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(pagination)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootProviderBaseProps>, PaginationVariantProps>
+>(Pagination.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootBaseProps>, PaginationVariantProps>
+>(Pagination.Root, 'root', { forwardProps: ['page'] })
+
+export const Ellipsis = withContext<Assign<HTMLStyledProps<'div'>, Pagination.EllipsisBaseProps>>(
+  Pagination.Ellipsis,
+  'ellipsis',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'button'>, Pagination.ItemBaseProps>>(
+  Pagination.Item,
+  'item',
+)
+
+export const NextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Pagination.NextTriggerBaseProps>
+>(Pagination.NextTrigger, 'nextTrigger')
+
+export const PrevTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Pagination.PrevTriggerBaseProps>
+>(Pagination.PrevTrigger, 'prevTrigger')
+
+export { PaginationContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/pin-input.tsx

@@ -0,0 +1,37 @@
+import { type Assign, PinInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PinInputVariantProps, pinInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(pinInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootProviderBaseProps>, PinInputVariantProps>
+>(PinInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootBaseProps>, PinInputVariantProps>
+>(PinInput.Root, 'root', { forwardProps: ['mask'] })
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, PinInput.ControlBaseProps>>(
+  PinInput.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, PinInput.InputBaseProps>>(
+  PinInput.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, PinInput.LabelBaseProps>>(
+  PinInput.Label,
+  'label',
+)
+
+export {
+  PinInputContext as Context,
+  PinInputHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/popover.tsx

@@ -0,0 +1,65 @@
+import { type Assign, Popover } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PopoverVariantProps, popover } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(popover)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<Popover.RootProviderProps, PopoverVariantProps>
+>(Popover.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Popover.RootProps, PopoverVariantProps>>(Popover.Root)
+
+export const Anchor = withContext<Assign<HTMLStyledProps<'div'>, Popover.AnchorBaseProps>>(
+  Popover.Anchor,
+  'anchor',
+)
+
+export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Popover.ArrowBaseProps>>(
+  Popover.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Popover.ArrowTipBaseProps>>(
+  Popover.ArrowTip,
+  'arrowTip',
+)
+
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Popover.CloseTriggerBaseProps>
+>(Popover.CloseTrigger, 'closeTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Popover.ContentBaseProps>>(
+  Popover.Content,
+  'content',
+)
+
+export const Description = withContext<
+  Assign<HTMLStyledProps<'div'>, Popover.DescriptionBaseProps>
+>(Popover.Description, 'description')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Popover.IndicatorBaseProps>>(
+  Popover.Indicator,
+  'indicator',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Popover.PositionerBaseProps>>(
+  Popover.Positioner,
+  'positioner',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'div'>, Popover.TitleBaseProps>>(
+  Popover.Title,
+  'title',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Popover.TriggerBaseProps>>(
+  Popover.Trigger,
+  'trigger',
+)
+
+export { PopoverContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/progress.tsx

@@ -0,0 +1,57 @@
+import { type Assign, Progress } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ProgressVariantProps, progress } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(progress)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Progress.RootProviderBaseProps>, ProgressVariantProps>
+>(Progress.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Progress.RootBaseProps>, ProgressVariantProps>
+>(Progress.Root, 'root')
+
+export const Circle = withContext<Assign<HTMLStyledProps<'svg'>, Progress.CircleBaseProps>>(
+  Progress.Circle,
+  'circle',
+)
+
+export const CircleRange = withContext<
+  Assign<HTMLStyledProps<'circle'>, Progress.CircleRangeBaseProps>
+>(Progress.CircleRange, 'circleRange')
+
+export const CircleTrack = withContext<
+  Assign<HTMLStyledProps<'circle'>, Progress.CircleTrackBaseProps>
+>(Progress.CircleTrack, 'circleTrack')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Progress.LabelBaseProps>>(
+  Progress.Label,
+  'label',
+)
+
+export const Range = withContext<Assign<HTMLStyledProps<'div'>, Progress.RangeBaseProps>>(
+  Progress.Range,
+  'range',
+)
+
+export const Track = withContext<Assign<HTMLStyledProps<'div'>, Progress.TrackBaseProps>>(
+  Progress.Track,
+  'track',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Progress.ValueTextBaseProps>>(
+  Progress.ValueText,
+  'valueText',
+)
+
+export const View = withContext<Assign<HTMLStyledProps<'span'>, Progress.ViewBaseProps>>(
+  Progress.View,
+  'view',
+)
+
+export { ProgressContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/radio-button-group.tsx

@@ -0,0 +1,42 @@
+import { type Assign, RadioGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RadioButtonGroupVariantProps, radioButtonGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(radioButtonGroup)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootProps>, RadioButtonGroupVariantProps>
+>(RadioGroup.Root, 'root')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorProps>>(
+  RadioGroup.Indicator,
+  'indicator',
+)
+
+export const ItemControl = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlProps>>(
+  RadioGroup.ItemControl,
+  'itemControl',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.ItemProps>>(
+  RadioGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextProps>>(
+  RadioGroup.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.LabelProps>>(
+  RadioGroup.Label,
+  'label',
+)
+
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/radio-group.tsx

@@ -0,0 +1,46 @@
+import { type Assign, RadioGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RadioGroupVariantProps, radioGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(radioGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootProviderBaseProps>, RadioGroupVariantProps>
+>(RadioGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootBaseProps>, RadioGroupVariantProps>
+>(RadioGroup.Root, 'root')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorBaseProps>>(
+  RadioGroup.Indicator,
+  'indicator',
+)
+
+export const ItemControl = withContext<
+  Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlBaseProps>
+>(RadioGroup.ItemControl, 'itemControl')
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.ItemBaseProps>>(
+  RadioGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextBaseProps>>(
+  RadioGroup.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.LabelBaseProps>>(
+  RadioGroup.Label,
+  'label',
+)
+
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/rating-group.tsx

@@ -0,0 +1,38 @@
+import { type Assign, RatingGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RatingGroupVariantProps, ratingGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(ratingGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RatingGroup.RootProviderBaseProps>, RatingGroupVariantProps>
+>(RatingGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RatingGroup.RootBaseProps>, RatingGroupVariantProps>
+>(RatingGroup.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, RatingGroup.ControlBaseProps>>(
+  RatingGroup.Control,
+  'control',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'span'>, RatingGroup.ItemBaseProps>>(
+  RatingGroup.Item,
+  'item',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RatingGroup.LabelBaseProps>>(
+  RatingGroup.Label,
+  'label',
+)
+
+export {
+  RatingGroupContext as Context,
+  RatingGroupHiddenInput as HiddenInput,
+  RatingGroupItemContext as ItemContext,
+} from '@ark-ui/solid'

src/common/components/ui/styled/segment-group.tsx

@@ -0,0 +1,47 @@
+import { type Assign, SegmentGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SegmentGroupVariantProps, segmentGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(segmentGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, SegmentGroup.RootProviderBaseProps>,
+    SegmentGroupVariantProps
+  >
+>(SegmentGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, SegmentGroup.RootBaseProps>, SegmentGroupVariantProps>
+>(SegmentGroup.Root, 'root')
+
+export const Indicator = withContext<
+  Assign<HTMLStyledProps<'div'>, SegmentGroup.IndicatorBaseProps>
+>(SegmentGroup.Indicator, 'indicator')
+
+export const ItemControl = withContext<
+  Assign<HTMLStyledProps<'div'>, SegmentGroup.ItemControlBaseProps>
+>(SegmentGroup.ItemControl, 'itemControl')
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, SegmentGroup.ItemBaseProps>>(
+  SegmentGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<
+  Assign<HTMLStyledProps<'span'>, SegmentGroup.ItemTextBaseProps>
+>(SegmentGroup.ItemText, 'itemText')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, SegmentGroup.LabelBaseProps>>(
+  SegmentGroup.Label,
+  'label',
+)
+
+export {
+  SegmentGroupContext as Context,
+  SegmentGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/select.tsx

@@ -0,0 +1,95 @@
+import { type Assign, Select } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SelectVariantProps, select } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(select)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Select.RootProviderBaseProps<Select.CollectionItem>>,
+    SelectVariantProps
+  >
+>(Select.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Select.RootBaseProps<Select.CollectionItem>>,
+    SelectVariantProps
+  >
+>(Select.Root)
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Select.ClearTriggerBaseProps>
+>(Select.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Select.ContentBaseProps>>(
+  Select.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Select.ControlBaseProps>>(
+  Select.Control,
+  'control',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Select.IndicatorBaseProps>>(
+  Select.Indicator,
+  'indicator',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Select.ItemGroupLabelBaseProps>
+>(Select.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Select.ItemGroupBaseProps>>(
+  Select.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Select.ItemIndicatorBaseProps>
+>(Select.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Select.ItemBaseProps>>(
+  Select.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, Select.ItemTextBaseProps>>(
+  Select.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Select.LabelBaseProps>>(
+  Select.Label,
+  'label',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Select.ListBaseProps>>(
+  Select.List,
+  'list',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Select.PositionerBaseProps>>(
+  Select.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Select.TriggerBaseProps>>(
+  Select.Trigger,
+  'trigger',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Select.ValueTextBaseProps>>(
+  Select.ValueText,
+  'valueText',
+)
+
+export {
+  SelectContext as Context,
+  SelectHiddenSelect as HiddenSelect,
+} from '@ark-ui/solid'

src/common/components/ui/styled/slider.tsx

@@ -0,0 +1,62 @@
+import { type Assign, Slider } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SliderVariantProps, slider } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(slider)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootProviderBaseProps>, SliderVariantProps>
+>(Slider.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootBaseProps>, SliderVariantProps>
+>(Slider.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Slider.ControlBaseProps>>(
+  Slider.Control,
+  'control',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Slider.LabelBaseProps>>(
+  Slider.Label,
+  'label',
+)
+
+export const MarkerGroup = withContext<Assign<HTMLStyledProps<'div'>, Slider.MarkerGroupBaseProps>>(
+  Slider.MarkerGroup,
+  'markerGroup',
+)
+
+export const Marker = withContext<Assign<HTMLStyledProps<'span'>, Slider.MarkerBaseProps>>(
+  Slider.Marker,
+  'marker',
+)
+
+export const Range = withContext<Assign<HTMLStyledProps<'div'>, Slider.RangeBaseProps>>(
+  Slider.Range,
+  'range',
+)
+
+export const Thumb = withContext<Assign<HTMLStyledProps<'div'>, Slider.ThumbBaseProps>>(
+  Slider.Thumb,
+  'thumb',
+)
+
+export const Track = withContext<Assign<HTMLStyledProps<'div'>, Slider.TrackBaseProps>>(
+  Slider.Track,
+  'track',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Slider.ValueTextBaseProps>>(
+  Slider.ValueText,
+  'valueText',
+)
+
+export {
+  SliderContext as Context,
+  SliderHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/spinner.tsx

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

src/common/components/ui/styled/switch.tsx

@@ -0,0 +1,37 @@
+import { type Assign, Switch } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SwitchRecipeVariantProps, switchRecipe } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(switchRecipe)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Switch.RootProviderBaseProps>, SwitchRecipeVariantProps>
+>(Switch.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Switch.RootBaseProps>, SwitchRecipeVariantProps>
+>(Switch.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'span'>, Switch.ControlBaseProps>>(
+  Switch.Control,
+  'control',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'span'>, Switch.LabelBaseProps>>(
+  Switch.Label,
+  'label',
+)
+
+export const Thumb = withContext<Assign<HTMLStyledProps<'span'>, Switch.ThumbBaseProps>>(
+  Switch.Thumb,
+  'thumb',
+)
+
+export {
+  SwitchContext as Context,
+  SwitchHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/tabs.tsx

@@ -0,0 +1,39 @@
+import { type Assign, Tabs } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TabsVariantProps, tabs } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(tabs)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Tabs.RootProviderBaseProps>, TabsVariantProps>
+>(Tabs.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Tabs.RootBaseProps>, TabsVariantProps>
+>(Tabs.Root, 'root')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Tabs.ContentBaseProps>>(
+  Tabs.Content,
+  'content',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Tabs.IndicatorBaseProps>>(
+  Tabs.Indicator,
+  'indicator',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Tabs.ListBaseProps>>(
+  Tabs.List,
+  'list',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Tabs.TriggerBaseProps>>(
+  Tabs.Trigger,
+  'trigger',
+)
+
+export { TabsContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/tags-input.tsx

@@ -0,0 +1,63 @@
+import { type Assign, TagsInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TagsInputVariantProps, tagsInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(tagsInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TagsInput.RootProviderBaseProps>, TagsInputVariantProps>
+>(TagsInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TagsInput.RootBaseProps>, TagsInputVariantProps>
+>(TagsInput.Root, 'root')
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, TagsInput.ClearTriggerBaseProps>
+>(TagsInput.ClearTrigger, 'clearTrigger')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, TagsInput.ControlBaseProps>>(
+  TagsInput.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, TagsInput.InputBaseProps>>(
+  TagsInput.Input,
+  'input',
+)
+
+export const ItemDeleteTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, TagsInput.ItemDeleteTriggerBaseProps>
+>(TagsInput.ItemDeleteTrigger, 'itemDeleteTrigger')
+
+export const ItemInput = withContext<
+  Assign<HTMLStyledProps<'input'>, TagsInput.ItemInputBaseProps>
+>(TagsInput.ItemInput, 'itemInput')
+
+export const ItemPreview = withContext<
+  Assign<HTMLStyledProps<'div'>, TagsInput.ItemPreviewBaseProps>
+>(TagsInput.ItemPreview, 'itemPreview')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, TagsInput.ItemBaseProps>>(
+  TagsInput.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, TagsInput.ItemTextBaseProps>>(
+  TagsInput.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, TagsInput.LabelBaseProps>>(
+  TagsInput.Label,
+  'label',
+)
+
+export {
+  TagsInputContext as Context,
+  TagsInputHiddenInput as HiddenInput,
+} from '@ark-ui/solid'

src/common/components/ui/styled/textarea.tsx

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

src/common/components/ui/styled/toast.tsx

@@ -0,0 +1,40 @@
+import { type Assign, Toast } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { toast } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(toast)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<Assign<HTMLStyledProps<'div'>, Toast.RootProps>>(
+  Toast.Root,
+  'root',
+)
+
+export const ActionTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Toast.ActionTriggerProps>
+>(Toast.ActionTrigger, 'actionTrigger')
+
+export const CloseTrigger = withContext<Assign<HTMLStyledProps<'div'>, Toast.CloseTriggerProps>>(
+  Toast.CloseTrigger,
+  'closeTrigger',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Toast.DescriptionProps>>(
+  Toast.Description,
+  'description',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'div'>, Toast.TitleProps>>(
+  Toast.Title,
+  'title',
+)
+
+export {
+  ToastContext as Context,
+  createToaster,
+  Toaster,
+  type ToastContextProps as ContextProps,
+  type ToasterProps,
+} from '@ark-ui/solid'

src/common/components/ui/styled/toggle-group.tsx

@@ -0,0 +1,24 @@
+import { type Assign, ToggleGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ToggleGroupVariantProps, toggleGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(toggleGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ToggleGroup.RootProviderBaseProps>, ToggleGroupVariantProps>
+>(ToggleGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ToggleGroup.RootBaseProps>, ToggleGroupVariantProps>
+>(ToggleGroup.Root, 'root')
+
+export const Item = withContext<Assign<HTMLStyledProps<'button'>, ToggleGroup.ItemBaseProps>>(
+  ToggleGroup.Item,
+  'item',
+)
+
+export { ToggleGroupContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/tooltip.tsx

@@ -0,0 +1,42 @@
+import { type Assign, Tooltip } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TooltipVariantProps, tooltip } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(tooltip)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<Tooltip.RootProviderProps, TooltipVariantProps>
+>(Tooltip.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Tooltip.RootProps, TooltipVariantProps>>(Tooltip.Root)
+
+export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowBaseProps>>(
+  Tooltip.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowTipBaseProps>>(
+  Tooltip.ArrowTip,
+  'arrowTip',
+)
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ContentBaseProps>>(
+  Tooltip.Content,
+  'content',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.PositionerBaseProps>>(
+  Tooltip.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Tooltip.TriggerBaseProps>>(
+  Tooltip.Trigger,
+  'trigger',
+)
+
+export { TooltipContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/tree-view.tsx

@@ -0,0 +1,68 @@
+import { type Assign, TreeView } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TreeViewVariantProps, treeView } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(treeView)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootProviderBaseProps>, TreeViewVariantProps>
+>(TreeView.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootBaseProps>, TreeViewVariantProps>
+>(TreeView.Root, 'root')
+
+export const BranchContent = withContext<
+  Assign<HTMLStyledProps<'ul'>, TreeView.BranchContentBaseProps>
+>(TreeView.BranchContent, 'branchContent')
+
+export const BranchControl = withContext<
+  Assign<HTMLStyledProps<'div'>, TreeView.BranchControlBaseProps>
+>(TreeView.BranchControl, 'branchControl')
+
+export const BranchIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, TreeView.BranchIndicatorBaseProps>
+>(TreeView.BranchIndicator, 'branchIndicator')
+
+export const Branch = withContext<Assign<HTMLStyledProps<'li'>, TreeView.BranchBaseProps>>(
+  TreeView.Branch,
+  'branch',
+)
+
+export const BranchText = withContext<
+  Assign<HTMLStyledProps<'span'>, TreeView.BranchTextBaseProps>
+>(TreeView.BranchText, 'branchText')
+
+export const BranchTrigger = withContext<
+  Assign<HTMLStyledProps<'div'>, TreeView.BranchTriggerBaseProps>
+>(TreeView.BranchTrigger, 'branchTrigger')
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, TreeView.ItemIndicatorBaseProps>
+>(TreeView.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'li'>, TreeView.ItemBaseProps>>(
+  TreeView.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, TreeView.ItemTextBaseProps>>(
+  TreeView.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, TreeView.LabelBaseProps>>(
+  TreeView.Label,
+  'label',
+)
+
+export const Tree = withContext<Assign<HTMLStyledProps<'ul'>, TreeView.TreeBaseProps>>(
+  TreeView.Tree,
+  'tree',
+)
+
+export { TreeViewContext as Context } from '@ark-ui/solid'

src/common/components/ui/styled/utils/create-style-context.tsx

@@ -0,0 +1,89 @@
+import { type JSX, createContext, useContext } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { cx } from 'styled-system/css'
+import { isCssProperty, styled } from 'styled-system/jsx'
+import type { ElementType, StyledComponent } from 'styled-system/types'
+
+type Props = Record<string, unknown>
+type Recipe = {
+  (props?: Props): Props
+  splitVariantProps: (props: Props) => [Props, Props]
+}
+
+type Slot<R extends Recipe> = keyof ReturnType<R>
+type Options = { forwardProps?: string[] }
+
+const shouldForwardProp = (prop: string, variantKeys: string[], options: Options = {}) =>
+  options.forwardProps?.includes(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop))
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+  const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
+
+  const withRootProvider = <P extends {}>(Component: ElementType): ((props: P) => JSX.Element) => {
+    const StyledComponent = (props: P) => {
+      const [variantProps, localProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <Component {...localProps} />
+        </StyleContext.Provider>
+      )
+    }
+    return StyledComponent
+  }
+
+  const withProvider = <P extends { class?: string }>(
+    Component: ElementType,
+    slot: Slot<R>,
+    options?: Options,
+  ): ((props: P) => JSX.Element) => {
+    const StyledComponent = styled(
+      Component,
+      {},
+      {
+        shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options),
+      },
+    ) as StyledComponent<ElementType>
+
+    return (props: P) => {
+      const [variantProps, localProps] = recipe.splitVariantProps(props)
+      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
+
+      return (
+        <StyleContext.Provider value={slotStyles}>
+          <Dynamic
+            component={StyledComponent}
+            {...localProps}
+            class={cx(slotStyles?.[slot], props.class)}
+          />
+        </StyleContext.Provider>
+      )
+    }
+  }
+
+  const withContext = <P extends { class?: string }>(
+    Component: ElementType,
+    slot: Slot<R>,
+  ): ((props: P) => JSX.Element) => {
+    const StyledComponent = styled(Component)
+
+    const Foo = (props: P) => {
+      const slotStyles = useContext(StyleContext)
+      return (
+        <Dynamic
+          component={StyledComponent}
+          {...props}
+          class={cx(slotStyles?.[slot], props.class)}
+        />
+      )
+    }
+    return Foo
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+  }
+}

src/common/components/ui/switch.tsx

@@ -0,0 +1,20 @@
+import { Show, children } from 'solid-js'
+import * as StyledSwitch from './styled/switch'
+
+export interface SwitchProps extends StyledSwitch.RootProps {}
+
+export const Switch = (props: SwitchProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledSwitch.Root {...props}>
+      <StyledSwitch.Control>
+        <StyledSwitch.Thumb />
+      </StyledSwitch.Control>
+      <Show when={getChildren()}>
+        <StyledSwitch.Label>{getChildren()}</StyledSwitch.Label>
+      </Show>
+      <StyledSwitch.HiddenInput />
+    </StyledSwitch.Root>
+  )
+}

src/common/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * as Tabs from './styled/tabs'

src/common/components/ui/tags-input.tsx

@@ -0,0 +1 @@
+export * as TagsInput from './styled/tags-input'

src/common/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from './styled/textarea'

src/common/components/ui/toast.tsx

@@ -0,0 +1 @@
+export * as Toast from './styled/toast'

src/common/components/ui/toggle-group.tsx

@@ -0,0 +1 @@
+export * as ToggleGroup from './styled/toggle-group'

src/common/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * as Tooltip from './styled/tooltip'

src/common/components/ui/tree-view.tsx

@@ -0,0 +1,65 @@
+import { For, Show, splitProps } from 'solid-js'
+import * as StyledTreeView from './styled/tree-view'
+
+interface Child {
+  value: string
+  name: string
+  children?: Child[]
+}
+
+export interface TreeViewData {
+  label: string
+  children: Child[]
+}
+
+export interface TreeViewProps extends StyledTreeView.RootProps {
+  data: TreeViewData
+}
+export const TreeView = (props: TreeViewProps) => {
+  const [localProps, rootProps] = splitProps(props, ['data'])
+
+  const renderChild = (child: Child) => (
+    <Show
+      when={child.children}
+      fallback={
+        <StyledTreeView.Item value={child.value}>
+          <StyledTreeView.ItemText>{child.name}</StyledTreeView.ItemText>
+        </StyledTreeView.Item>
+      }
+    >
+      <StyledTreeView.Branch value={child.value}>
+        <StyledTreeView.BranchControl>
+          <StyledTreeView.BranchIndicator>
+            <ChevronRightIcon />
+          </StyledTreeView.BranchIndicator>
+          <StyledTreeView.BranchText>{child.name}</StyledTreeView.BranchText>
+        </StyledTreeView.BranchControl>
+        <StyledTreeView.BranchContent>
+          <For each={child.children}>{(child) => renderChild(child)}</For>
+        </StyledTreeView.BranchContent>
+      </StyledTreeView.Branch>
+    </Show>
+  )
+
+  return (
+    <StyledTreeView.Root aria-label={localProps.data.label} {...rootProps}>
+      <StyledTreeView.Tree>
+        <For each={localProps.data.children}>{(child) => renderChild(child)}</For>
+      </StyledTreeView.Tree>
+    </StyledTreeView.Root>
+  )
+}
+
+const ChevronRightIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Right Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 18l6-6l-6-6"
+    />
+  </svg>
+)

src/entry-client.tsx

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.body);

src/entry-server.tsx

@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+  <StartServer
+    document={({ assets, children, scripts }) => (
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="icon" href="/favicon.ico" />
+          {assets}
+        </head>
+        <body>
+          {children}
+          {scripts}
+        </body>
+      </html>
+    )}
+  />
+));

src/features/content/data.ts

@@ -0,0 +1,30 @@
+import type { Entry } from "./types";
+
+export const entries = new Map<number, Entry>([
+  { id: 1, title: 'Realtime with Bill Maher', thumbnail: 'https://www.themoviedb.org/t/p/w342/pbpoLLp4kvnYVfnEGiEhagpJuVZ.jpg' },
+  { id: 2, title: 'Binnelanders', thumbnail: 'https://www.themoviedb.org/t/p/w342/v9nGSRx5lFz6KEgfmgHJMSgaARC.jpg' },
+  { id: 3, title: 'Family guy', thumbnail: 'https://www.themoviedb.org/t/p/w342/y0HUz4eUNUe3TeEd8fQWYazPaC7.jpg' },
+  { id: 4, title: 'The Simpsons', thumbnail: 'https://www.themoviedb.org/t/p/w342/vHqeLzYl3dEAutojCO26g0LIkom.jpg' },
+  { id: 5, title: 'Breaking Bad', thumbnail: 'https://www.themoviedb.org/t/p/w342/ztkUQFLlC19CCMYHW9o1zWhJRNq.jpg' },
+  { id: 6, title: 'Loki', thumbnail: 'https://www.themoviedb.org/t/p/w342/oJdVHUYrjdS2IqiNztVIP4GPB1p.jpg' },
+  { id: 7, title: 'Dark desire', thumbnail: 'https://www.themoviedb.org/t/p/w342/uxFNAo2A6ZRcgNASLk02hJUbybn.jpg' },
+  { id: 8, title: 'Bridgerton', thumbnail: 'https://www.themoviedb.org/t/p/w342/luoKpgVwi1E5nQsi7W0UuKHu2Rq.jpg' },
+  { id: 9, title: 'Naruto', thumbnail: 'https://www.themoviedb.org/t/p/w342/xppeysfvDKVx775MFuH8Z9BlpMk.jpg' },
+  { id: 11, title: 'Teenwolf', thumbnail: 'https://www.themoviedb.org/t/p/w342/fmlMmxSBgPEunHS5gjokIej048g.jpg' },
+  { id: 12, title: 'Record of Ragnarok', thumbnail: 'https://www.themoviedb.org/t/p/w342/kTs2WNZOukpWdNhoRlH94pSJ3xf.jpg' },
+  { id: 13, title: 'The Mandalorian', thumbnail: 'https://www.themoviedb.org/t/p/w342/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg' },
+  {
+    id: 14,
+    title: 'Wednesday',
+    thumbnail: 'https://www.themoviedb.org/t/p/w342/9PFonBhy4cQy7Jz20NpMygczOkv.jpg',
+    image: 'https://www.themoviedb.org/t/p/original/iHSwvRVsRyxpX7FE7GbviaDvgGZ.jpg',
+    summary: 'Wednesday Addams is sent to Nevermore Academy, a bizarre boarding school where she attempts to master her psychic powers, stop a monstrous killing spree of the town citizens, and solve the supernatural mystery that affected her family',
+    releaseDate: '2022',
+    sources: [
+      { label: 'TMDB', url: new URL('https://themoviedb.org/tv/119051'), rating: { score: 8.5, max: 10 } }
+    ]
+  },
+].map((entry) => [ entry.id, entry ]));
+
+
+export const emptyEntry = Object.freeze<Entry>({ id: 0, title: '' });

src/features/content/index.ts

@@ -0,0 +1,4 @@
+export type * from './types';
+
+export { emptyEntry } from './data';
+export * from './service';

src/features/content/service.ts

@@ -0,0 +1,32 @@
+import type { Category, Entry } from './types';
+import { cache } from "@solidjs/router";
+import { entries } from './data';
+
+export const listCategories = cache(async (): Promise<Category[]> => {
+  "use server";
+
+  return [
+    {
+      label: 'Popular',
+      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Drama',
+      entries: [ entries.get(5)!, entries.get(6)!, entries.get(7)!, entries.get(8)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Now streaming',
+      entries: [ entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+    {
+      label: 'Sci-Fi & Fantasy',
+      entries: [ entries.get(9)!, entries.get(11)!, entries.get(12)!, entries.get(13)!, entries.get(1)!, entries.get(2)!, entries.get(3)!, entries.get(4)! ],
+    },
+  ];
+}, "series.categories.list");
+
+export const getEntry = cache(async (id: Entry['id']): Promise<Entry|undefined> => {
+  "use server";
+
+  return entries.get(id);
+}, "series.get");

src/features/content/types.ts

@@ -0,0 +1,31 @@
+
+export interface Category {
+  label: string;
+  entries: Entry[];
+}
+
+export interface Entry {
+  id: number;
+  title: string;
+  summary?: string;
+  releaseDate?: string;
+  sources?: Entry.Source[];
+  thumbnail?: string;
+  image?: string;
+}
+
+export namespace Entry {
+  export interface Source {
+    label: string;
+    url: URL;
+    rating: Source.Rating;
+  }
+
+  export namespace Source {
+    export interface Rating {
+      score: number;
+      max: number;
+    }
+  }
+}
+

src/features/overview/index.ts

@@ -0,0 +1,3 @@
+
+
+export { Overview } from './overview';

src/features/overview/list-item.tsx

@@ -0,0 +1,130 @@
+import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
+import { Hero } from '~/common/components/hero';
+import { List } from '~/common/components/list';
+import { emptyEntry } from '../content';
+import type { Entry, Category } from '../content';
+import { css } from 'styled-system/css';
+
+export const ListItem: Component<{ entry: Entry }> = (props) => {
+  return (
+    <div class={tile}>
+      <img src={props.entry.thumbnail} />
+
+      <main>
+        <a href={`/content/${props.entry.id}`}>Lets go!</a>
+      </main>
+    </div>
+  );
+};
+
+const tile = css({
+  '--padding': '2em',
+
+  display: 'grid',
+  grid: '100% / 100%',
+  placeItems: 'start center',
+  position: 'relative',
+  inlineSize: 'clamp(15em, 20vw, 30em)',
+  aspectRatio: '3 / 5',
+  transform: 'translateY(calc(-2 * var(--padding)))',
+  zIndex: '1',
+  contain: 'layout size style',
+
+  '& > img': {
+    gridArea: '1/ 1',
+    inlineSize: '100%',
+    blockSize: '100%',
+    borderRadius: '1em',
+    objectFit: 'cover',
+    objectPosition: 'center',
+    zIndex: '1',
+
+    boxShadow: '0 0 1em #000',
+    background: `
+      /* Dot */
+      radial-gradient(circle at 25% 30%, #7772, #7774 1em, transparent 1em),
+
+      /* Dot */
+      radial-gradient(circle at 85% 15%, #7772, #7774 1em, transparent 1em),
+
+      /* Bottom fade */
+      linear-gradient(165deg, transparent 60%, #555 60%, #333),
+
+      /* wave dark part */
+      radial-gradient(ellipse 5em 2.25em at .5em calc(50% - 1em), #333 100%, transparent 100%),
+
+      /* wave light part */
+      radial-gradient(ellipse 5em 2.25em at calc(100% - .5em) calc(50% + 1em), #555 100%, transparent 100%),
+
+      /* Base */
+      linear-gradient(to bottom, #333 50%, #555 50%)
+    `,
+
+    transformOrigin: '50% 0',
+    transform: 'scale(.8) translateY(calc(-4 * var(--padding)))',
+
+    userSelect: 'none',
+  },
+
+  '& > main': {
+    '--offset': 'calc(1.5 * var(--padding))',
+    gridArea: '1/ 1',
+    display: 'grid',
+    alignContent: 'end',
+    position: 'relative',
+    inlineSize: 'calc(100% + (3 * var(--padding)))',
+    blockSize: 'calc(100% + (4 * var(--padding)))',
+    padding: 'calc(.5 * var(--padding))',
+    backgroundColor: '#444',
+    borderRadius: '.5em',
+    transform: 'translate3d(0, 0, 0)',
+    clipPath: 'inset(-1em)',
+    boxShadow: '0 0 1em #000',
+    zIndex: '0',
+
+    '&:focus-within': {
+      outline: '1px solid #fff',
+      outlineOffset: '10px',
+    },
+  },
+
+  '@media (prefers-reduced-data: no-preference)': {},
+
+  '@media(hover)': {
+    '&:not(:hover):not(:focus-within)': {
+      transform: 'translateY(0)',
+      zIndex: '0',
+      willChange: 'transform',
+
+      '& > img': {
+        transform: 'scale(1) translateY(0)',
+        willChange: 'transform',
+      },
+
+      '& > main': {
+        clipPath: 'inset(40%)',
+      },
+    },
+
+    '@media (prefers-reduced-motion: no-preference)': {
+      transition: 'transform .2s linear',
+
+      '& > img': {
+        transition: 'transform .2s ease-in-out',
+      },
+
+      '& > main': {
+        transition: 'clip-path .2s ease-in-out',
+      },
+
+      '&:is(:hover, :focus-within)': {
+        transitionDelay: '0s, .3s',
+        zIndex: '1',
+
+        '& > img': {
+          transition: 'transform .2s ease-in-out',
+        },
+      },
+    },
+  },
+});

src/features/overview/overview.tsx

@@ -0,0 +1,38 @@
+import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
+import { Hero } from '~/common/components/hero';
+import { List } from '~/common/components/list';
+import { emptyEntry } from '../content';
+import type { Entry, Category } from '../content';
+import { ListItem } from './list-item';
+import { css } from 'styled-system/css';
+
+type OverviewProps = {
+  highlight: Entry;
+  categories: Category[];
+};
+
+export function Overview(props: OverviewProps) {
+  const finalProps = mergeProps(
+    {
+      highlight: emptyEntry,
+      categories: [],
+    },
+    props,
+  );
+
+  return (
+    <div class={container}>
+      <Hero entry={finalProps.highlight}></Hero>
+
+      <Index each={finalProps.categories}>
+        {(category) => (
+          <List label={category().label} items={category().entries}>
+            {(entry) => <ListItem entry={entry()} />}
+          </List>
+        )}
+      </Index>
+    </div>
+  );
+}
+
+const container = css({ display: 'grid', gridAutoFlow: 'row', gap: '2em' });

src/features/shell/index.ts

@@ -0,0 +1 @@
+export { Shell } from './shell';

src/features/shell/shell.tsx

@@ -0,0 +1,74 @@
+import { RouteSectionProps, A } from '@solidjs/router';
+import { css } from 'styled-system/css';
+import { Link, LinkProps } from '~/common/components/ui/link';
+
+export function Shell(props: RouteSectionProps) {
+  const items = [
+    { label: 'React', value: 'react' },
+    { label: 'Solid', value: 'solid' },
+    { label: 'Svelte', value: 'svelte', disabled: true },
+    { label: 'Vue', value: 'vue' },
+  ];
+
+  return (
+    <main class={container}>
+      <Nav />
+
+      <div class={body}>{props.children}</div>
+    </main>
+  );
+}
+
+function Nav(props) {
+  return (
+    <nav class={nav}>
+      <Link asChild={(props) => <span>kaas</span>}>
+        <A href="/">Home</A>
+      </Link>
+      <A href="/shows">Shows</A>
+      <A href="/movies">Movies</A>
+      <A href="/library">Library</A>
+      <A href="/search">Search</A>
+    </nav>
+  );
+}
+
+const container = css({
+  display: 'grid',
+  grid: '100% / 100%',
+
+  zIndex: '0',
+
+  overflowInline: 'clip',
+  overflowBlock: 'auto',
+  containerType: 'inline-size',
+});
+
+const body = css({
+  gridArea: '1 / 1',
+  inlineSize: '100%',
+  blockSize: 'fit-content',
+  paddingInline: '2em',
+  paddingBlockEnd: '5em',
+  background:
+    'linear-gradient(180deg, transparent, transparent 90vh, #333 90vh, #333)',
+
+  '@container (inline-size >= 600px)': {
+    paddingInlineStart: '7.5em',
+  },
+});
+
+const nav = css({
+  gridArea: '1 / 1',
+  display: 'none',
+  gridAutoFlow: 'row',
+  alignContent: 'start',
+  inlineSize: '7.5em',
+  padding: '1em',
+  position: 'sticky',
+  insetBlockStart: '0',
+
+  '@container (inline-size >= 600px)': {
+    display: 'grid',
+  },
+});

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@solidjs/start/env" />

src/index.css

@@ -0,0 +1,17 @@
+@layer reset, base, tokens, recipes, utilities;
+
+html {
+  display: grid;
+  grid: 100% / 100%;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: clip;
+
+  & > body {
+    display: grid;
+    grid: 100% / 100%;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow-y: auto;
+  }
+}

src/routes/(shell).tsx

@@ -0,0 +1,6 @@
+
+import { Shell } from "~/features/shell";
+
+export default function ShellPage(props) {
+  return <Shell>{props.children}</Shell>;
+}