inital commit
This commit is contained in:
commit
85fa9aff4a
119 changed files with 3292 additions and 0 deletions
32
.gitignore
vendored
Normal file
32
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
|
||||||
|
dist
|
||||||
|
.solid
|
||||||
|
.output
|
||||||
|
.vercel
|
||||||
|
.netlify
|
||||||
|
.vinxi
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
/.idea
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
|
||||||
|
# Temp
|
||||||
|
gitignore
|
||||||
|
|
||||||
|
# System Files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
## Panda
|
||||||
|
styled-system
|
||||||
|
styled-system-studio
|
||||||
8
.prettierrc.toml
Normal file
8
.prettierrc.toml
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
trailingComma = "all"
|
||||||
|
tabWidth = 2
|
||||||
|
semi = true
|
||||||
|
singleQuote = true
|
||||||
|
bracketSpacing = true
|
||||||
|
bracketLine = false
|
||||||
|
arrowFunctionParenthesis = "avoid"
|
||||||
|
experimentalTernaries = true
|
||||||
32
README.md
Normal file
32
README.md
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
# SolidStart
|
||||||
|
|
||||||
|
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
|
||||||
|
|
||||||
|
## Creating a project
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# create a new project in the current directory
|
||||||
|
npm init solid@latest
|
||||||
|
|
||||||
|
# create a new project in my-app
|
||||||
|
npm init solid@latest my-app
|
||||||
|
```
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
|
||||||
|
|
||||||
|
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
|
||||||
|
|
||||||
|
## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
|
||||||
12
app.config.ts
Normal file
12
app.config.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { defineConfig } from '@solidjs/start/config';
|
||||||
|
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
ssr: true,
|
||||||
|
server: {
|
||||||
|
preset: 'bun',
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
plugins: [tsconfigPaths({ root: './' })],
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
bun.lockb
Normal file
BIN
bun.lockb
Normal file
Binary file not shown.
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "example-basic",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"prepare": "panda codegen",
|
||||||
|
"dev": "vinxi dev",
|
||||||
|
"build": "vinxi build",
|
||||||
|
"start": "vinxi start",
|
||||||
|
"version": "vinxi version"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ark-ui/solid": "^3.9.0",
|
||||||
|
"@solidjs/meta": "^0.29.4",
|
||||||
|
"@solidjs/router": "^0.14.1",
|
||||||
|
"@solidjs/start": "^1.0.6",
|
||||||
|
"solid-js": "^1.8.18",
|
||||||
|
"vinxi": "^0.4.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@pandacss/dev": "^0.45.2",
|
||||||
|
"@park-ui/panda-preset": "^0.42.0",
|
||||||
|
"vite-tsconfig-paths": "^5.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
panda.config.ts
Normal file
17
panda.config.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { defineConfig } from '@pandacss/dev'
|
||||||
|
import { createPreset } from '@park-ui/panda-preset'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
preflight: true,
|
||||||
|
presets: [
|
||||||
|
'@pandacss/preset-base',
|
||||||
|
createPreset({
|
||||||
|
accentColor: 'jade',
|
||||||
|
grayColor: 'neutral',
|
||||||
|
borderRadius: 'sm',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
|
||||||
|
jsxFramework: 'solid', // or 'solid' or 'vue'
|
||||||
|
outdir: 'styled-system',
|
||||||
|
})
|
||||||
5
park-ui.json
Normal file
5
park-ui.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://park-ui.com/registry/latest/schema.json",
|
||||||
|
"jsFramework": "solid",
|
||||||
|
"outputPath": "./src/common/components/ui"
|
||||||
|
}
|
||||||
5
postcss.config.cjs
Normal file
5
postcss.config.cjs
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'@pandacss/dev/postcss': {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
20
src/app.tsx
Normal file
20
src/app.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
src/common/components/hero.tsx
Normal file
82
src/common/components/hero.tsx
Normal file
|
|
@ -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) => (
|
||||||
|
<>
|
||||||
|
•
|
||||||
|
<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',
|
||||||
|
});
|
||||||
55
src/common/components/list.tsx
Normal file
55
src/common/components/list.tsx
Normal file
|
|
@ -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' },
|
||||||
|
},
|
||||||
|
});
|
||||||
40
src/common/components/ui/avatar.tsx
Normal file
40
src/common/components/ui/avatar.tsx
Normal file
|
|
@ -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()
|
||||||
1
src/common/components/ui/badge.tsx
Normal file
1
src/common/components/ui/badge.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Badge, type BadgeProps } from './styled/badge'
|
||||||
37
src/common/components/ui/button.tsx
Normal file
37
src/common/components/ui/button.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
1
src/common/components/ui/card.tsx
Normal file
1
src/common/components/ui/card.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Card from './styled/card'
|
||||||
51
src/common/components/ui/checkbox.tsx
Normal file
51
src/common/components/ui/checkbox.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
1
src/common/components/ui/code.tsx
Normal file
1
src/common/components/ui/code.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Code, type CodeProps } from './styled/code'
|
||||||
1
src/common/components/ui/color-picker.tsx
Normal file
1
src/common/components/ui/color-picker.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as ColorPicker from './styled/color-picker'
|
||||||
1
src/common/components/ui/combobox.tsx
Normal file
1
src/common/components/ui/combobox.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Combobox from './styled/combobox'
|
||||||
1
src/common/components/ui/date-picker.tsx
Normal file
1
src/common/components/ui/date-picker.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as DatePicker from './styled/date-picker'
|
||||||
1
src/common/components/ui/dialog.tsx
Normal file
1
src/common/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Dialog from './styled/dialog'
|
||||||
1
src/common/components/ui/drawer.tsx
Normal file
1
src/common/components/ui/drawer.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Drawer from './styled/drawer'
|
||||||
1
src/common/components/ui/editable.tsx
Normal file
1
src/common/components/ui/editable.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Editable from './styled/editable'
|
||||||
1
src/common/components/ui/field.tsx
Normal file
1
src/common/components/ui/field.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Field from './styled/field'
|
||||||
1
src/common/components/ui/file-upload.tsx
Normal file
1
src/common/components/ui/file-upload.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as FileUpload from './styled/file-upload'
|
||||||
1
src/common/components/ui/heading.tsx
Normal file
1
src/common/components/ui/heading.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Heading, type HeadingProps } from './styled/heading'
|
||||||
1
src/common/components/ui/icon-button.tsx
Normal file
1
src/common/components/ui/icon-button.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { IconButton, type IconButtonProps } from './styled/icon-button'
|
||||||
1
src/common/components/ui/icon.tsx
Normal file
1
src/common/components/ui/icon.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Icon, type IconProps } from './styled/icon'
|
||||||
1
src/common/components/ui/input.tsx
Normal file
1
src/common/components/ui/input.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Input, type InputProps } from './styled/input'
|
||||||
1
src/common/components/ui/kbd.tsx
Normal file
1
src/common/components/ui/kbd.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Kbd, type KbdProps } from './styled/kbd'
|
||||||
1
src/common/components/ui/link.tsx
Normal file
1
src/common/components/ui/link.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Link, type LinkProps } from './styled/link'
|
||||||
1
src/common/components/ui/menu.tsx
Normal file
1
src/common/components/ui/menu.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Menu from './styled/menu'
|
||||||
53
src/common/components/ui/number-input.tsx
Normal file
53
src/common/components/ui/number-input.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
73
src/common/components/ui/pagination.tsx
Normal file
73
src/common/components/ui/pagination.tsx
Normal file
|
|
@ -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()}>…</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>
|
||||||
|
)
|
||||||
34
src/common/components/ui/pin-input.tsx
Normal file
34
src/common/components/ui/pin-input.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
src/common/components/ui/popover.tsx
Normal file
1
src/common/components/ui/popover.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Popover from './styled/popover'
|
||||||
38
src/common/components/ui/progress.tsx
Normal file
38
src/common/components/ui/progress.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
src/common/components/ui/radio-button-group.tsx
Normal file
1
src/common/components/ui/radio-button-group.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as RadioButtonGroup from './styled/radio-button-group'
|
||||||
1
src/common/components/ui/radio-group.tsx
Normal file
1
src/common/components/ui/radio-group.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as RadioGroup from './styled/radio-group'
|
||||||
66
src/common/components/ui/rating-group.tsx
Normal file
66
src/common/components/ui/rating-group.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
1
src/common/components/ui/segment-group.tsx
Normal file
1
src/common/components/ui/segment-group.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as SegmentGroup from './styled/segment-group'
|
||||||
1
src/common/components/ui/select.tsx
Normal file
1
src/common/components/ui/select.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Select from './styled/select'
|
||||||
49
src/common/components/ui/slider.tsx
Normal file
49
src/common/components/ui/slider.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
23
src/common/components/ui/spinner.tsx
Normal file
23
src/common/components/ui/spinner.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
30
src/common/components/ui/styled/avatar.tsx
Normal file
30
src/common/components/ui/styled/avatar.tsx
Normal file
|
|
@ -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'
|
||||||
7
src/common/components/ui/styled/badge.tsx
Normal file
7
src/common/components/ui/styled/badge.tsx
Normal file
|
|
@ -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)
|
||||||
7
src/common/components/ui/styled/button.tsx
Normal file
7
src/common/components/ui/styled/button.tsx
Normal file
|
|
@ -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)
|
||||||
38
src/common/components/ui/styled/card.tsx
Normal file
38
src/common/components/ui/styled/card.tsx
Normal file
|
|
@ -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',
|
||||||
|
)
|
||||||
42
src/common/components/ui/styled/checkbox.tsx
Normal file
42
src/common/components/ui/styled/checkbox.tsx
Normal file
|
|
@ -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'
|
||||||
7
src/common/components/ui/styled/code.tsx
Normal file
7
src/common/components/ui/styled/code.tsx
Normal file
|
|
@ -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)
|
||||||
129
src/common/components/ui/styled/color-picker.tsx
Normal file
129
src/common/components/ui/styled/color-picker.tsx
Normal file
|
|
@ -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'
|
||||||
94
src/common/components/ui/styled/combobox.tsx
Normal file
94
src/common/components/ui/styled/combobox.tsx
Normal file
|
|
@ -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'
|
||||||
121
src/common/components/ui/styled/date-picker.tsx
Normal file
121
src/common/components/ui/styled/date-picker.tsx
Normal file
|
|
@ -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'
|
||||||
51
src/common/components/ui/styled/dialog.tsx
Normal file
51
src/common/components/ui/styled/dialog.tsx
Normal file
|
|
@ -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'
|
||||||
74
src/common/components/ui/styled/drawer.tsx
Normal file
74
src/common/components/ui/styled/drawer.tsx
Normal file
|
|
@ -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'
|
||||||
56
src/common/components/ui/styled/editable.tsx
Normal file
56
src/common/components/ui/styled/editable.tsx
Normal file
|
|
@ -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'
|
||||||
46
src/common/components/ui/styled/field.tsx
Normal file
46
src/common/components/ui/styled/field.tsx
Normal file
|
|
@ -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'
|
||||||
68
src/common/components/ui/styled/file-upload.tsx
Normal file
68
src/common/components/ui/styled/file-upload.tsx
Normal file
|
|
@ -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'
|
||||||
11
src/common/components/ui/styled/heading.tsx
Normal file
11
src/common/components/ui/styled/heading.tsx
Normal file
|
|
@ -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>
|
||||||
9
src/common/components/ui/styled/icon-button.tsx
Normal file
9
src/common/components/ui/styled/icon-button.tsx
Normal file
|
|
@ -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,
|
||||||
|
})
|
||||||
7
src/common/components/ui/styled/icon.tsx
Normal file
7
src/common/components/ui/styled/icon.tsx
Normal file
|
|
@ -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)
|
||||||
7
src/common/components/ui/styled/input.tsx
Normal file
7
src/common/components/ui/styled/input.tsx
Normal file
|
|
@ -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)
|
||||||
7
src/common/components/ui/styled/kbd.tsx
Normal file
7
src/common/components/ui/styled/kbd.tsx
Normal file
|
|
@ -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)
|
||||||
7
src/common/components/ui/styled/link.tsx
Normal file
7
src/common/components/ui/styled/link.tsx
Normal file
|
|
@ -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)
|
||||||
98
src/common/components/ui/styled/menu.tsx
Normal file
98
src/common/components/ui/styled/menu.tsx
Normal file
|
|
@ -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'
|
||||||
52
src/common/components/ui/styled/number-input.tsx
Normal file
52
src/common/components/ui/styled/number-input.tsx
Normal file
|
|
@ -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'
|
||||||
37
src/common/components/ui/styled/pagination.tsx
Normal file
37
src/common/components/ui/styled/pagination.tsx
Normal file
|
|
@ -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'
|
||||||
37
src/common/components/ui/styled/pin-input.tsx
Normal file
37
src/common/components/ui/styled/pin-input.tsx
Normal file
|
|
@ -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'
|
||||||
65
src/common/components/ui/styled/popover.tsx
Normal file
65
src/common/components/ui/styled/popover.tsx
Normal file
|
|
@ -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'
|
||||||
57
src/common/components/ui/styled/progress.tsx
Normal file
57
src/common/components/ui/styled/progress.tsx
Normal file
|
|
@ -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'
|
||||||
42
src/common/components/ui/styled/radio-button-group.tsx
Normal file
42
src/common/components/ui/styled/radio-button-group.tsx
Normal file
|
|
@ -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'
|
||||||
46
src/common/components/ui/styled/radio-group.tsx
Normal file
46
src/common/components/ui/styled/radio-group.tsx
Normal file
|
|
@ -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'
|
||||||
38
src/common/components/ui/styled/rating-group.tsx
Normal file
38
src/common/components/ui/styled/rating-group.tsx
Normal file
|
|
@ -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'
|
||||||
47
src/common/components/ui/styled/segment-group.tsx
Normal file
47
src/common/components/ui/styled/segment-group.tsx
Normal file
|
|
@ -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'
|
||||||
95
src/common/components/ui/styled/select.tsx
Normal file
95
src/common/components/ui/styled/select.tsx
Normal file
|
|
@ -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'
|
||||||
62
src/common/components/ui/styled/slider.tsx
Normal file
62
src/common/components/ui/styled/slider.tsx
Normal file
|
|
@ -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'
|
||||||
7
src/common/components/ui/styled/spinner.tsx
Normal file
7
src/common/components/ui/styled/spinner.tsx
Normal file
|
|
@ -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)
|
||||||
37
src/common/components/ui/styled/switch.tsx
Normal file
37
src/common/components/ui/styled/switch.tsx
Normal file
|
|
@ -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'
|
||||||
39
src/common/components/ui/styled/tabs.tsx
Normal file
39
src/common/components/ui/styled/tabs.tsx
Normal file
|
|
@ -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'
|
||||||
63
src/common/components/ui/styled/tags-input.tsx
Normal file
63
src/common/components/ui/styled/tags-input.tsx
Normal file
|
|
@ -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'
|
||||||
7
src/common/components/ui/styled/textarea.tsx
Normal file
7
src/common/components/ui/styled/textarea.tsx
Normal file
|
|
@ -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)
|
||||||
40
src/common/components/ui/styled/toast.tsx
Normal file
40
src/common/components/ui/styled/toast.tsx
Normal file
|
|
@ -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'
|
||||||
24
src/common/components/ui/styled/toggle-group.tsx
Normal file
24
src/common/components/ui/styled/toggle-group.tsx
Normal file
|
|
@ -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'
|
||||||
42
src/common/components/ui/styled/tooltip.tsx
Normal file
42
src/common/components/ui/styled/tooltip.tsx
Normal file
|
|
@ -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'
|
||||||
68
src/common/components/ui/styled/tree-view.tsx
Normal file
68
src/common/components/ui/styled/tree-view.tsx
Normal file
|
|
@ -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'
|
||||||
|
|
@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/common/components/ui/switch.tsx
Normal file
20
src/common/components/ui/switch.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
src/common/components/ui/tabs.tsx
Normal file
1
src/common/components/ui/tabs.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Tabs from './styled/tabs'
|
||||||
1
src/common/components/ui/tags-input.tsx
Normal file
1
src/common/components/ui/tags-input.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as TagsInput from './styled/tags-input'
|
||||||
1
src/common/components/ui/textarea.tsx
Normal file
1
src/common/components/ui/textarea.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Textarea, type TextareaProps } from './styled/textarea'
|
||||||
1
src/common/components/ui/toast.tsx
Normal file
1
src/common/components/ui/toast.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Toast from './styled/toast'
|
||||||
1
src/common/components/ui/toggle-group.tsx
Normal file
1
src/common/components/ui/toggle-group.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as ToggleGroup from './styled/toggle-group'
|
||||||
1
src/common/components/ui/tooltip.tsx
Normal file
1
src/common/components/ui/tooltip.tsx
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * as Tooltip from './styled/tooltip'
|
||||||
65
src/common/components/ui/tree-view.tsx
Normal file
65
src/common/components/ui/tree-view.tsx
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
4
src/entry-client.tsx
Normal file
4
src/entry-client.tsx
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
// @refresh reload
|
||||||
|
import { mount, StartClient } from "@solidjs/start/client";
|
||||||
|
|
||||||
|
mount(() => <StartClient />, document.body);
|
||||||
21
src/entry-server.tsx
Normal file
21
src/entry-server.tsx
Normal file
|
|
@ -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>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
));
|
||||||
30
src/features/content/data.ts
Normal file
30
src/features/content/data.ts
Normal file
|
|
@ -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: '' });
|
||||||
4
src/features/content/index.ts
Normal file
4
src/features/content/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
export type * from './types';
|
||||||
|
|
||||||
|
export { emptyEntry } from './data';
|
||||||
|
export * from './service';
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue