···11+## Usage
22+33+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
44+55+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
66+77+```bash
88+$ npm install # or pnpm install or yarn install
99+```
1010+1111+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
1212+1313+## Available Scripts
1414+1515+In the project directory, you can run:
1616+1717+### `npm run dev` or `npm start`
1818+1919+Runs the app in the development mode.<br>
2020+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
2121+2222+The page will reload if you make edits.<br>
2323+2424+### `npm run build`
2525+2626+Builds the app for production to the `dist` folder.<br>
2727+It correctly bundles Solid in production mode and optimizes the build for the best performance.
2828+2929+The build is minified and the filenames include the hashes.<br>
3030+Your app is ready to be deployed!
3131+3232+## Deployment
3333+3434+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
3535+3636+## This project was created with the [Solid CLI](https://github.com/solidjs-community/solid-cli)
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { formLabel } from 'styled-system/recipes'
55+66+export type FormLabelProps = ComponentProps<typeof FormLabel>
77+export const FormLabel = styled(ark.label, formLabel)
+9
src/components/ui/styled/icon-button.tsx
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { type ButtonVariantProps, button } from 'styled-system/recipes'
55+66+export type IconButtonProps = ComponentProps<typeof IconButton>
77+export const IconButton = styled(ark.button, button, {
88+ defaultProps: { px: '0' } as ButtonVariantProps,
99+})
+7
src/components/ui/styled/input.tsx
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { input } from 'styled-system/recipes'
55+66+export type InputProps = ComponentProps<typeof Input>
77+export const Input = styled(ark.input, input)
+7
src/components/ui/styled/link.tsx
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { link } from 'styled-system/recipes'
55+66+export type LinkProps = ComponentProps<typeof Link>
77+export const Link = styled(ark.a, link)
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { spinner } from 'styled-system/recipes'
55+66+export type SpinnerProps = ComponentProps<typeof Spinner>
77+export const Spinner = styled(ark.div, spinner)
+37
src/components/ui/styled/switch.tsx
···11+import { type Assign, Switch } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { type SwitchRecipeVariantProps, switchRecipe } from 'styled-system/recipes'
44+import type { HTMLStyledProps } from 'styled-system/types'
55+import { createStyleContext } from './utils/create-style-context'
66+77+const { withProvider, withContext } = createStyleContext(switchRecipe)
88+99+export type RootProviderProps = ComponentProps<typeof RootProvider>
1010+export const RootProvider = withProvider<
1111+ Assign<Assign<HTMLStyledProps<'label'>, Switch.RootProviderBaseProps>, SwitchRecipeVariantProps>
1212+>(Switch.RootProvider, 'root')
1313+1414+export type RootProps = ComponentProps<typeof Root>
1515+export const Root = withProvider<
1616+ Assign<Assign<HTMLStyledProps<'label'>, Switch.RootBaseProps>, SwitchRecipeVariantProps>
1717+>(Switch.Root, 'root')
1818+1919+export const Control = withContext<Assign<HTMLStyledProps<'span'>, Switch.ControlBaseProps>>(
2020+ Switch.Control,
2121+ 'control',
2222+)
2323+2424+export const Label = withContext<Assign<HTMLStyledProps<'span'>, Switch.LabelBaseProps>>(
2525+ Switch.Label,
2626+ 'label',
2727+)
2828+2929+export const Thumb = withContext<Assign<HTMLStyledProps<'span'>, Switch.ThumbBaseProps>>(
3030+ Switch.Thumb,
3131+ 'thumb',
3232+)
3333+3434+export {
3535+ SwitchContext as Context,
3636+ SwitchHiddenInput as HiddenInput,
3737+} from '@ark-ui/solid'
+9
src/components/ui/styled/text.tsx
···11+import type { ComponentProps, JSX } from 'solid-js'
22+import { styled } from 'styled-system/jsx'
33+import { type TextVariantProps, text } from 'styled-system/recipes'
44+import type { StyledComponent } from 'styled-system/types'
55+66+type ParagraphProps = TextVariantProps & { as?: JSX.Element }
77+88+export type TextProps = ComponentProps<typeof Text>
99+export const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>
+7
src/components/ui/styled/textarea.tsx
···11+import { ark } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { styled } from 'styled-system/jsx'
44+import { textarea } from 'styled-system/recipes'
55+66+export type TextareaProps = ComponentProps<typeof Textarea>
77+export const Textarea = styled(ark.textarea, textarea)
+40
src/components/ui/styled/toast.tsx
···11+import { type Assign, Toast } from '@ark-ui/solid'
22+import type { ComponentProps } from 'solid-js'
33+import { toast } from 'styled-system/recipes'
44+import type { HTMLStyledProps } from 'styled-system/types'
55+import { createStyleContext } from './utils/create-style-context'
66+77+const { withProvider, withContext } = createStyleContext(toast)
88+99+export type RootProps = ComponentProps<typeof Root>
1010+export const Root = withProvider<Assign<HTMLStyledProps<'div'>, Toast.RootProps>>(
1111+ Toast.Root,
1212+ 'root',
1313+)
1414+1515+export const ActionTrigger = withContext<
1616+ Assign<HTMLStyledProps<'button'>, Toast.ActionTriggerProps>
1717+>(Toast.ActionTrigger, 'actionTrigger')
1818+1919+export const CloseTrigger = withContext<Assign<HTMLStyledProps<'div'>, Toast.CloseTriggerProps>>(
2020+ Toast.CloseTrigger,
2121+ 'closeTrigger',
2222+)
2323+2424+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Toast.DescriptionProps>>(
2525+ Toast.Description,
2626+ 'description',
2727+)
2828+2929+export const Title = withContext<Assign<HTMLStyledProps<'div'>, Toast.TitleProps>>(
3030+ Toast.Title,
3131+ 'title',
3232+)
3333+3434+export {
3535+ ToastContext as Context,
3636+ createToaster,
3737+ Toaster,
3838+ type ToastContextProps as ContextProps,
3939+ type ToasterProps,
4040+} from '@ark-ui/solid'