starting fresh
This commit is contained in:
parent
85fa9aff4a
commit
3a762d2343
SSH key fingerprint:
SHA256:nG82MUfuVdRVyCKKWqhY+pCrbz9nbX6uzUns4RKa1Pg
111 changed files with 1939 additions and 2961 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -26,7 +26,3 @@ gitignore
|
||||||
# System Files
|
# System Files
|
||||||
.DS_Store
|
.DS_Store
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
|
|
||||||
## Panda
|
|
||||||
styled-system
|
|
||||||
styled-system-studio
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
trailingComma = "all"
|
|
||||||
tabWidth = 2
|
|
||||||
semi = true
|
|
||||||
singleQuote = true
|
|
||||||
bracketSpacing = true
|
|
||||||
bracketLine = false
|
|
||||||
arrowFunctionParenthesis = "avoid"
|
|
||||||
experimentalTernaries = true
|
|
||||||
31
README.md
31
README.md
|
|
@ -1,32 +1 @@
|
||||||
# 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)
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,31 @@
|
||||||
import { defineConfig } from '@solidjs/start/config';
|
import { defineConfig } from '@solidjs/start/config';
|
||||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
import solidSvg from 'vite-plugin-solid-svg';
|
||||||
|
import devtools from 'solid-devtools/vite';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
ssr: true,
|
vite: {
|
||||||
|
plugins: [
|
||||||
|
devtools({
|
||||||
|
autoname: true,
|
||||||
|
}),
|
||||||
|
solidSvg(),
|
||||||
|
{
|
||||||
|
name: 'temp',
|
||||||
|
configResolved(config) {
|
||||||
|
console.log(config.resolve.alias);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
solid: {
|
||||||
|
babel: {
|
||||||
|
compact: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
server: {
|
server: {
|
||||||
preset: 'bun',
|
preset: 'bun',
|
||||||
},
|
prerender: {
|
||||||
vite: {
|
routes: ['/sitemaps.xml'],
|
||||||
plugins: [tsconfigPaths({ root: './' })],
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
31
package.json
31
package.json
|
|
@ -1,27 +1,30 @@
|
||||||
{
|
{
|
||||||
"name": "example-basic",
|
"name": "streamarr",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18",
|
||||||
|
"bun": ">=1"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prepare": "panda codegen",
|
|
||||||
"dev": "vinxi dev",
|
"dev": "vinxi dev",
|
||||||
"build": "vinxi build",
|
"build": "vinxi build",
|
||||||
"start": "vinxi start",
|
"start": "vinxi start",
|
||||||
"version": "vinxi version"
|
"version": "vinxi version",
|
||||||
},
|
"test": "vitest --coverage",
|
||||||
"engines": {
|
"test:ci": "vitest run"
|
||||||
"node": ">=18"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ark-ui/solid": "^3.9.0",
|
|
||||||
"@solidjs/meta": "^0.29.4",
|
"@solidjs/meta": "^0.29.4",
|
||||||
"@solidjs/router": "^0.14.1",
|
"@solidjs/router": "^0.14.10",
|
||||||
"@solidjs/start": "^1.0.6",
|
"@solidjs/start": "^1.1.3",
|
||||||
"solid-js": "^1.8.18",
|
"solid-icons": "^1.1.0",
|
||||||
"vinxi": "^0.4.1"
|
"solid-js": "^1.9.5",
|
||||||
|
"vinxi": "^0.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@pandacss/dev": "^0.45.2",
|
"solid-devtools": "^0.33.0",
|
||||||
"@park-ui/panda-preset": "^0.42.0",
|
"vite-plugin-solid-svg": "^0.8.1",
|
||||||
"vite-tsconfig-paths": "^5.0.1"
|
"vite-tsconfig-paths": "^5.1.4",
|
||||||
|
"vitest": "^3.0.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
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',
|
|
||||||
})
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://park-ui.com/registry/latest/schema.json",
|
|
||||||
"jsFramework": "solid",
|
|
||||||
"outputPath": "./src/common/components/ui"
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
'@pandacss/dev/postcss': {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
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',
|
|
||||||
});
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
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' },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export { Badge, type BadgeProps } from './styled/badge'
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export * as Card from './styled/card'
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export { Code, type CodeProps } from './styled/code'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as ColorPicker from './styled/color-picker'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Combobox from './styled/combobox'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as DatePicker from './styled/date-picker'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Dialog from './styled/dialog'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Drawer from './styled/drawer'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Editable from './styled/editable'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Field from './styled/field'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as FileUpload from './styled/file-upload'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Heading, type HeadingProps } from './styled/heading'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { IconButton, type IconButtonProps } from './styled/icon-button'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Icon, type IconProps } from './styled/icon'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Input, type InputProps } from './styled/input'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Kbd, type KbdProps } from './styled/kbd'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Link, type LinkProps } from './styled/link'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Menu from './styled/menu'
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export * as Popover from './styled/popover'
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export * as RadioButtonGroup from './styled/radio-button-group'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as RadioGroup from './styled/radio-group'
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export * as SegmentGroup from './styled/segment-group'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Select from './styled/select'
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
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',
|
|
||||||
)
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
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>
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
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,
|
|
||||||
})
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
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)
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
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'
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
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 +0,0 @@
|
||||||
export * as Tabs from './styled/tabs'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as TagsInput from './styled/tags-input'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { Textarea, type TextareaProps } from './styled/textarea'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Toast from './styled/toast'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as ToggleGroup from './styled/toggle-group'
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * as Tooltip from './styled/tooltip'
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
45
src/components/hero/hero.module.css
Normal file
45
src/components/hero/hero.module.css
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid: repeat(3, auto) / 10em 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"thumbnail ."
|
||||||
|
"thumbnail title"
|
||||||
|
"thumbnail detail"
|
||||||
|
"thumbnail summary";
|
||||||
|
align-content: end;
|
||||||
|
gap: 1em;
|
||||||
|
block-size: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
grid-area: title;
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
grid-area: thumbnail;
|
||||||
|
inline-size: 15em;
|
||||||
|
aspect-ratio: 3 / 5;
|
||||||
|
border-radius: 1em;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
block-size: 90vh;
|
||||||
|
inline-size: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
grid-area: detail;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
grid-area: summary;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
35
src/components/hero/hero.tsx
Normal file
35
src/components/hero/hero.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { Index } from "solid-js";
|
||||||
|
import { Entry } from "~/features/content";
|
||||||
|
import css from "./hero.module.css";
|
||||||
|
|
||||||
|
type HeroProps = {
|
||||||
|
entry: Entry;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Hero(props: HeroProps) {
|
||||||
|
return (
|
||||||
|
<div class={css.container}>
|
||||||
|
<h2 class={css.title}>{props.entry.title}</h2>
|
||||||
|
|
||||||
|
<img src={props.entry.thumbnail} class={css.thumbnail} />
|
||||||
|
<img src={props.entry.image} class={css.background} />
|
||||||
|
|
||||||
|
<span class={css.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={css.summary}>{props.entry.summary}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/hero/index.ts
Normal file
1
src/components/hero/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { Hero } from "./hero";
|
||||||
1
src/components/list/index.ts
Normal file
1
src/components/list/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { List } from "./list";
|
||||||
29
src/components/list/list.module.css
Normal file
29
src/components/list/list.module.css
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: row;
|
||||||
|
inline-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
|
||||||
|
gap: 2em;
|
||||||
|
padding: 10em 4em 5em;
|
||||||
|
scroll-padding: 4em;
|
||||||
|
margin: -10em -4em 0em;
|
||||||
|
margin-block-start: -10em;
|
||||||
|
|
||||||
|
overflow: auto visible;
|
||||||
|
scroll-snap-type: inline proximity;
|
||||||
|
|
||||||
|
@media (hover: none) {
|
||||||
|
& > * {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
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