inital commit

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,
+  }
+}