) {
34 | console.log(values)
35 | }
36 |
37 | return (
38 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/hover-card/index.tsx:
--------------------------------------------------------------------------------
1 | import { CalendarDays } from 'lucide-react'
2 | import { Flex } from '@shadow-panda/styled-system/jsx'
3 | import { css, cx } from '@shadow-panda/styled-system/css'
4 | import { icon, muted } from '@shadow-panda/styled-system/recipes'
5 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
6 | import { Button } from '@/components/ui/button'
7 | import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
8 |
9 | export default function Example() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | VC
20 |
21 |
22 | @nextjs
23 |
24 | The React Framework – created and maintained by @vercel.
25 |
26 |
27 | {' '}
28 | Joined December 2021
29 |
30 |
31 |
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/input/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from '@/components/ui/input'
2 |
3 | export default function Example() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/input/file.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 | import { Label } from '@/components/ui/label'
3 | import { Input } from '@/components/ui/input'
4 |
5 | export default function Example() {
6 | return (
7 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/input/index.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from '@/components/ui/input'
2 |
3 | export default function Example() {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/input/with-button.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 | import { Button } from '@/components/ui/button'
3 | import { Input } from '@/components/ui/input'
4 |
5 | export default function Example() {
6 | return (
7 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/input/with-label.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 | import { Label } from '@/components/ui/label'
3 | import { Input } from '@/components/ui/input'
4 |
5 | export default function Example() {
6 | return (
7 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/label/index.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 | import { Label } from '@/components/ui/label'
3 | import { Checkbox } from '@/components/ui/checkbox'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/progress/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { Progress } from '@/components/ui/progress'
5 |
6 | export default function Example() {
7 | const [progress, setProgress] = React.useState(13)
8 |
9 | React.useEffect(() => {
10 | const timer = setTimeout(() => setProgress(66), 500)
11 | return () => clearTimeout(timer)
12 | }, [])
13 |
14 | return
15 | }
16 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/radio-group/index.tsx:
--------------------------------------------------------------------------------
1 | import { Flex } from '@shadow-panda/styled-system/jsx'
2 | import { Label } from '@/components/ui/label'
3 | import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/scroll-area/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { styled } from '@shadow-panda/styled-system/jsx'
3 | import { ScrollArea } from '@/components/ui/scroll-area'
4 | import { Separator } from '@/components/ui/separator'
5 |
6 | const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
7 |
8 | export default function Example() {
9 | return (
10 |
11 |
12 |
13 | Tags
14 |
15 | {tags.map((tag) => (
16 |
17 | {tag}
18 |
19 |
20 | ))}
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/select/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectContent,
4 | SelectGroup,
5 | SelectItem,
6 | SelectLabel,
7 | SelectTrigger,
8 | SelectValue,
9 | } from '@/components/ui/select'
10 |
11 | export default function Example() {
12 | return (
13 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/separator/index.tsx:
--------------------------------------------------------------------------------
1 | import { Flex } from '@shadow-panda/styled-system/jsx'
2 | import { css } from '@shadow-panda/styled-system/css'
3 | import { muted } from '@shadow-panda/styled-system/recipes'
4 | import { Separator } from '@/components/ui/separator'
5 |
6 | export default function Example() {
7 | return (
8 |
9 |
10 |
17 | Radix Primitives
18 |
19 | An open-source UI component library.
20 |
21 |
22 |
23 | Blog
24 |
25 | Docs
26 |
27 | Source
28 |
29 |
Your message will be copied to the support team.
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toast/destructive.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/ui/button'
4 | import { ToastAction } from '@/components/ui/toast'
5 | import { useToast } from '@/components/ui/toast/use-toast'
6 |
7 | export default function Example() {
8 | const { toast } = useToast()
9 |
10 | return (
11 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toast/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/ui/button'
4 | import { ToastAction } from '@/components/ui/toast'
5 | import { useToast } from '@/components/ui/toast/use-toast'
6 |
7 | export default function Example() {
8 | const { toast } = useToast()
9 |
10 | return (
11 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toast/simple.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/ui/button'
4 | import { useToast } from '@/components/ui/toast/use-toast'
5 |
6 | export default function Example() {
7 | const { toast } = useToast()
8 |
9 | return (
10 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toast/with-action.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/ui/button'
4 | import { ToastAction } from '@/components/ui/toast'
5 | import { useToast } from '@/components/ui/toast/use-toast'
6 |
7 | export default function Example() {
8 | const { toast } = useToast()
9 |
10 | return (
11 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toast/with-title.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Button } from '@/components/ui/button'
4 | import { useToast } from '@/components/ui/toast/use-toast'
5 |
6 | export default function Example() {
7 | const { toast } = useToast()
8 |
9 | return (
10 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Underline } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import { Bold } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/large.tsx:
--------------------------------------------------------------------------------
1 | import { Italic } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/outline.tsx:
--------------------------------------------------------------------------------
1 | import { Italic } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/small.tsx:
--------------------------------------------------------------------------------
1 | import { Italic } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/toggle/with-text.tsx:
--------------------------------------------------------------------------------
1 | import { Italic } from 'lucide-react'
2 | import { icon } from '@shadow-panda/styled-system/recipes'
3 | import { Toggle } from '@/components/ui/toggle'
4 |
5 | export default function Example() {
6 | return (
7 |
8 |
9 | Italic
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button'
2 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
3 |
4 | export default function Example() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | Add to library
13 |
14 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/blockquote.tsx:
--------------------------------------------------------------------------------
1 | import { blockquote } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for
7 | the privilege."
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h1-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return Taxing Laughter: The Joke Tax Chronicles
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h1.tsx:
--------------------------------------------------------------------------------
1 | import { h1 } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return Taxing Laughter: The Joke Tax Chronicles
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h2-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return The People of the Kingdom
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h2.tsx:
--------------------------------------------------------------------------------
1 | import { h2 } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return The People of the Kingdom
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h3-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return The Joke Tax
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h3.tsx:
--------------------------------------------------------------------------------
1 | import { h3 } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return The Joke Tax
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h4-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return People stopped telling jokes
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/h4.tsx:
--------------------------------------------------------------------------------
1 | import { h4 } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return People stopped telling jokes
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/inline-code.tsx:
--------------------------------------------------------------------------------
1 | import { inlineCode } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return @radix-ui/react-alert-dialog
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/large-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return Are you sure absolutely sure?
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/large.tsx:
--------------------------------------------------------------------------------
1 | import { large } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return Are you sure absolutely sure?
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/lead-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | A modal dialog that interrupts the user with important content and expects a response.
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/lead.tsx:
--------------------------------------------------------------------------------
1 | import { lead } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | A modal dialog that interrupts the user with important content and expects a response.
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/list.tsx:
--------------------------------------------------------------------------------
1 | import { list } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | - 1st level of puns: 5 gold coins
7 | - 2nd level of jokes: 10 gold coins
8 | - 3rd level of one-liners : 20 gold coins
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/muted.tsx:
--------------------------------------------------------------------------------
1 | import { muted } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return Enter your email address.
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/p-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | The king, seeing how much happier his subjects were, realized the error of his ways and
7 | repealed the joke tax.
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/p.tsx:
--------------------------------------------------------------------------------
1 | import { p } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return (
5 |
6 | The king, seeing how much happier his subjects were, realized the error of his ways and
7 | repealed the joke tax.
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/small-text-style.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@shadow-panda/styled-system/css'
2 |
3 | export default function Example() {
4 | return Email address
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/small.tsx:
--------------------------------------------------------------------------------
1 | import { small } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return Email address
5 | }
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/previews/typography/table.tsx:
--------------------------------------------------------------------------------
1 | import { typographyTableContainer, typographyTable } from '@shadow-panda/styled-system/recipes'
2 |
3 | export default function Example() {
4 | return (
5 |
6 |
7 |
8 |
9 | | King's Treasury |
10 | People's happiness |
11 |
12 |
13 |
14 |
15 | | Empty |
16 | Overflowing |
17 |
18 |
19 | | Modest |
20 | Satisfied |
21 |
22 |
23 | | Full |
24 | Ecstatic |
25 |
26 |
27 |
28 |
{children}
33 |
34 | ))
35 | Content.displayName = AccordionPrimitive.Content.displayName
36 |
37 | export const Accordion = withProvider(styled(AccordionPrimitive.Root), 'root')
38 | export const AccordionItem = withContext(styled(AccordionPrimitive.Item), 'item')
39 | export const AccordionTrigger = withContext(styled(Trigger), 'trigger')
40 | export const AccordionContent = withContext(styled(Content), 'content')
41 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/alert/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { styled } from '@shadow-panda/styled-system/jsx'
3 | import { alert, alertTitle, alertDescription } from '@shadow-panda/styled-system/recipes'
4 |
5 | const BaseAlert = (
6 | props: React.HTMLAttributes,
7 | ref: React.ForwardedRef,
8 | ) =>
9 |
10 | export const Alert = styled(
11 | React.forwardRef>(BaseAlert),
12 | alert,
13 | )
14 | export const AlertTitle = styled('h5', alertTitle)
15 | export const AlertDescription = styled('div', alertDescription)
16 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/aspect-ratio/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
4 | import { styled } from '@shadow-panda/styled-system/jsx'
5 |
6 | export const AspectRatio = styled(AspectRatioPrimitive.Root)
7 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/avatar/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as AvatarPrimitive from '@radix-ui/react-avatar'
4 | import { createStyleContext } from '@shadow-panda/style-context'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { avatar } from '@shadow-panda/styled-system/recipes'
7 |
8 | const { withProvider, withContext } = createStyleContext(avatar)
9 |
10 | export const Avatar = withProvider(styled(AvatarPrimitive.Root), 'root')
11 | export const AvatarImage = withContext(styled(AvatarPrimitive.Image), 'image')
12 | export const AvatarFallback = withContext(styled(AvatarPrimitive.Fallback), 'fallback')
13 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/badge/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
2 | import { badge } from '@shadow-panda/styled-system/recipes'
3 |
4 | export const Badge = styled('div', badge)
5 |
6 | export type BadgeProps = HTMLStyledProps
7 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/button/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { Slot } from '@radix-ui/react-slot'
3 | import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
4 | import { button } from '@shadow-panda/styled-system/recipes'
5 |
6 | const BaseButton = React.forwardRef<
7 | HTMLButtonElement,
8 | React.ButtonHTMLAttributes & { asChild?: boolean; children?: React.ReactNode }
9 | >(({ asChild = false, ...props }, ref) => {
10 | const Comp = asChild ? Slot : 'button'
11 | return
12 | })
13 | BaseButton.displayName = 'Button'
14 |
15 | export const Button = styled(BaseButton, button)
16 | export type ButtonProps = HTMLStyledProps
17 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/calendar/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { ChevronLeft, ChevronRight } from 'lucide-react'
5 | import {
6 | DayPicker,
7 | type DayPickerDefaultProps,
8 | type DayPickerSingleProps,
9 | type DayPickerMultipleProps,
10 | type DayPickerRangeProps,
11 | } from 'react-day-picker'
12 | import { styled } from '@shadow-panda/styled-system/jsx'
13 | import { cx } from '@shadow-panda/styled-system/css'
14 | import { button, icon, calendar } from '@shadow-panda/styled-system/recipes'
15 |
16 | type DayPickerProps =
17 | | DayPickerDefaultProps
18 | | DayPickerSingleProps
19 | | DayPickerMultipleProps
20 | | DayPickerRangeProps
21 |
22 | function BaseCalendar({ className, classNames, showOutsideDays = true, ...props }: DayPickerProps) {
23 | const { root, nav_button: navButton, day, ...rest } = calendar()
24 |
25 | return (
26 | ,
36 | IconRight: () => ,
37 | }}
38 | showOutsideDays={showOutsideDays}
39 | {...props}
40 | />
41 | )
42 | }
43 | BaseCalendar.displayName = 'Calendar'
44 |
45 | export const Calendar = styled(BaseCalendar)
46 | export type CalendarProps = React.ComponentProps
47 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/card/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@shadow-panda/styled-system/jsx'
2 | import {
3 | card,
4 | cardHeader,
5 | cardTitle,
6 | cardDescription,
7 | cardContent,
8 | cardFooter,
9 | } from '@shadow-panda/styled-system/recipes'
10 |
11 | export const Card = styled('div', card)
12 | export const CardHeader = styled('div', cardHeader)
13 | export const CardTitle = styled('h3', cardTitle)
14 | export const CardDescription = styled('p', cardDescription)
15 | export const CardContent = styled('div', cardContent)
16 | export const CardFooter = styled('div', cardFooter)
17 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
5 | import { Check } from 'lucide-react'
6 | import { styled } from '@shadow-panda/styled-system/jsx'
7 | import { cx } from '@shadow-panda/styled-system/css'
8 | import { checkbox, icon } from '@shadow-panda/styled-system/recipes'
9 |
10 | const BaseCheckbox = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => {
14 | const styles = checkbox()
15 |
16 | return (
17 |
18 |
19 |
20 |
21 |
22 | )
23 | })
24 | BaseCheckbox.displayName = CheckboxPrimitive.Root.displayName
25 |
26 | export const Checkbox = styled(BaseCheckbox)
27 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/collapsible/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
4 | import { createStyleContext } from '@shadow-panda/style-context'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { collapsible } from '@shadow-panda/styled-system/recipes'
7 |
8 | const { withProvider, withContext } = createStyleContext(collapsible)
9 |
10 | export const Collapsible = withProvider(styled(CollapsiblePrimitive.Root), 'root')
11 | export const CollapsibleTrigger = withContext(
12 | styled(CollapsiblePrimitive.CollapsibleTrigger),
13 | 'trigger',
14 | )
15 | export const CollapsibleContent = withContext(
16 | styled(CollapsiblePrimitive.CollapsibleContent),
17 | 'content',
18 | )
19 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/hover-card/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
4 | import { createStyleContext } from '@shadow-panda/style-context'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { hoverCard } from '@shadow-panda/styled-system/recipes'
7 |
8 | const { withProvider, withContext } = createStyleContext(hoverCard)
9 |
10 | export const HoverCard = withProvider(styled(HoverCardPrimitive.Root), 'root')
11 | export const HoverCardTrigger = withContext(styled(HoverCardPrimitive.Trigger), 'trigger')
12 | export const HoverCardContent = withContext(styled(HoverCardPrimitive.Content), 'content', {
13 | align: 'center',
14 | sideOffset: 4,
15 | })
16 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/input/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
2 | import { input } from '@shadow-panda/styled-system/recipes'
3 |
4 | export const Input = styled('input', input)
5 | export type InputProps = HTMLStyledProps
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/label/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
2 | import { label } from '@shadow-panda/styled-system/recipes'
3 |
4 | export const Label = styled('label', label)
5 | export type LabelProps = HTMLStyledProps
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/popover/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as PopoverPrimitive from '@radix-ui/react-popover'
5 | import { createStyleContext } from '@shadow-panda/style-context'
6 | import { styled } from '@shadow-panda/styled-system/jsx'
7 | import { popover } from '@shadow-panda/styled-system/recipes'
8 |
9 | const { withProvider, withContext } = createStyleContext(popover)
10 |
11 | const Portal = withContext(styled(PopoverPrimitive.Portal), 'portal')
12 |
13 | const Content = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef
16 | >(({ align = 'center', sideOffset = 4, ...props }, ref) => (
17 |
18 |
19 |
20 | ))
21 | Content.displayName = PopoverPrimitive.Content.displayName
22 |
23 | export const Popover = withProvider(styled(PopoverPrimitive.Root), 'root')
24 | export const PopoverTrigger = withContext(styled(PopoverPrimitive.Trigger), 'trigger')
25 | export const PopoverContent = withContext(styled(Content), 'content')
26 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/progress/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as ProgressPrimitive from '@radix-ui/react-progress'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { cx } from '@shadow-panda/styled-system/css'
7 | import { progress } from '@shadow-panda/styled-system/recipes'
8 |
9 | const BaseProgress = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, value, ...props }, ref) => {
13 | const styles = progress()
14 |
15 | return (
16 |
17 |
21 |
22 | )
23 | })
24 | BaseProgress.displayName = ProgressPrimitive.Root.displayName
25 |
26 | export const Progress = styled(BaseProgress)
27 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/radio-group/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
5 | import { Circle } from 'lucide-react'
6 | import { createStyleContext } from '@shadow-panda/style-context'
7 | import { styled } from '@shadow-panda/styled-system/jsx'
8 | import { radioGroup } from '@shadow-panda/styled-system/recipes'
9 |
10 | const { withProvider, withContext } = createStyleContext(radioGroup)
11 |
12 | const Indicator = withContext(RadioGroupPrimitive.Indicator, 'indicator')
13 | const Icon = withContext(Circle, 'icon')
14 |
15 | const Item = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ children: _children, ...props }, ref) => {
19 | return (
20 |
21 |
22 |
23 |
24 |
25 | )
26 | })
27 | Item.displayName = RadioGroupPrimitive.Item.displayName
28 |
29 | export const RadioGroup = withProvider(styled(RadioGroupPrimitive.Root), 'root')
30 | export const RadioGroupItem = withContext(styled(Item), 'item')
31 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/separator/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as SeparatorPrimitive from '@radix-ui/react-separator'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { cx } from '@shadow-panda/styled-system/css'
7 | import { separator } from '@shadow-panda/styled-system/recipes'
8 |
9 | const BaseSeparator = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
13 |
20 | ))
21 | BaseSeparator.displayName = SeparatorPrimitive.Root.displayName
22 |
23 | export const Separator = styled(BaseSeparator)
24 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/skeleton/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@shadow-panda/styled-system/jsx'
2 | import { skeleton } from '@shadow-panda/styled-system/recipes'
3 |
4 | export const Skeleton = styled('div', skeleton)
5 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/slider/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as SliderPrimitive from '@radix-ui/react-slider'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { cx } from '@shadow-panda/styled-system/css'
7 | import { slider } from '@shadow-panda/styled-system/recipes'
8 |
9 | const BaseSlider = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => {
13 | const styles = slider()
14 |
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | })
24 | BaseSlider.displayName = SliderPrimitive.Root.displayName
25 |
26 | export const Slider = styled(BaseSlider)
27 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/switch/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as SwitchPrimitive from '@radix-ui/react-switch'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { cx } from '@shadow-panda/styled-system/css'
7 | import { switchRecipe } from '@shadow-panda/styled-system/recipes'
8 |
9 | const BaseSwitch = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => {
13 | const styles = switchRecipe()
14 |
15 | return (
16 |
17 |
18 |
19 | )
20 | })
21 | BaseSwitch.displayName = SwitchPrimitive.Root.displayName
22 |
23 | export const Switch = styled(BaseSwitch)
24 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/table/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { styled } from '@shadow-panda/styled-system/jsx'
3 | import {
4 | tableContainer,
5 | table,
6 | tableHeader,
7 | tableBody,
8 | tableFooter,
9 | tableHead,
10 | tableRow,
11 | tableCell,
12 | tableCaption,
13 | } from '@shadow-panda/styled-system/recipes'
14 |
15 | const TableContainer = styled('div', tableContainer)
16 |
17 | const BaseTable = React.forwardRef>(
18 | (props, ref) => (
19 |
20 |
21 |
22 | ),
23 | )
24 | BaseTable.displayName = 'Table'
25 |
26 | export const Table = styled(BaseTable, table)
27 | export const TableHeader = styled('thead', tableHeader)
28 | export const TableBody = styled('tbody', tableBody)
29 | export const TableFooter = styled('tfoot', tableFooter)
30 | export const TableHead = styled('th', tableHead)
31 | export const TableRow = styled('tr', tableRow)
32 | export const TableCell = styled('td', tableCell)
33 | export const TableCaption = styled('caption', tableCaption)
34 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as TabsPrimitive from '@radix-ui/react-tabs'
4 | import { createStyleContext } from '@shadow-panda/style-context'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { tabs } from '@shadow-panda/styled-system/recipes'
7 |
8 | const { withProvider, withContext } = createStyleContext(tabs)
9 |
10 | export const Tabs = withProvider(styled(TabsPrimitive.Root), 'root')
11 | export const TabsList = withContext(styled(TabsPrimitive.List), 'list')
12 | export const TabsTrigger = withContext(styled(TabsPrimitive.Trigger), 'trigger')
13 | export const TabsContent = withContext(styled(TabsPrimitive.Content), 'content')
14 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/textarea/index.tsx:
--------------------------------------------------------------------------------
1 | import { styled, HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
2 | import { textarea } from '@shadow-panda/styled-system/recipes'
3 |
4 | export const Textarea = styled('textarea', textarea)
5 | export type TextareaProps = HTMLStyledProps
6 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/toast/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import * as ToastPrimitive from '@radix-ui/react-toast'
5 | import { X } from 'lucide-react'
6 | import { createStyleContext } from '@shadow-panda/style-context'
7 | import { styled } from '@shadow-panda/styled-system/jsx'
8 | import { toast, toastViewport, icon } from '@shadow-panda/styled-system/recipes'
9 |
10 | const { withProvider, withContext } = createStyleContext(toast)
11 |
12 | export const ToastProvider = ToastPrimitive.Provider
13 | export const ToastViewport = styled(ToastPrimitive.Viewport, toastViewport)
14 | export const Toast = withProvider(styled(ToastPrimitive.Root), 'root', { className: 'group' })
15 | export const ToastAction = withContext(styled(ToastPrimitive.Action), 'action')
16 | export const ToastClose = withContext(styled(ToastPrimitive.Close), 'close', {
17 | children: ,
18 | })
19 | export const ToastTitle = withContext(styled(ToastPrimitive.Title), 'title')
20 | export const ToastDescription = withContext(styled(ToastPrimitive.Description), 'description')
21 |
22 | export type ToastProps = React.ComponentPropsWithoutRef
23 | export type ToastActionElement = React.ReactElement
24 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/toast/toaster.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from '@/components/ui/toast'
11 | import { useToast } from '@/components/ui/toast/use-toast'
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(({ id, title, description, action, ...props }) => (
19 |
20 |
21 | {title && {title}}
22 | {description && {description}}
23 |
24 | {action}
25 |
26 |
27 | ))}
28 |
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/toggle/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as TogglePrimitive from '@radix-ui/react-toggle'
4 | import { styled } from '@shadow-panda/styled-system/jsx'
5 | import { toggle } from '@shadow-panda/styled-system/recipes'
6 |
7 | export const Toggle = styled(TogglePrimitive.Root, toggle)
8 |
--------------------------------------------------------------------------------
/apps/docs/src/components/ui/tooltip/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
4 | import { createStyleContext } from '@shadow-panda/style-context'
5 | import { styled } from '@shadow-panda/styled-system/jsx'
6 | import { tooltip } from '@shadow-panda/styled-system/recipes'
7 |
8 | const { withProvider, withContext } = createStyleContext(tooltip)
9 |
10 | export const TooltipProvider = TooltipPrimitive.Provider
11 | export const Tooltip = withProvider(styled(TooltipPrimitive.Root), 'root')
12 | export const TooltipTrigger = withContext(styled(TooltipPrimitive.Trigger), 'trigger')
13 | export const TooltipContent = withContext(styled(TooltipPrimitive.Content), 'content', {
14 | sideOffset: 4,
15 | })
16 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/accordion.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Accordion
3 | description: A vertically stacked set of interactive headings that each reveal a section of content.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/accordion
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/accordion
8 | api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-accordion
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import {
34 | Accordion,
35 | AccordionContent,
36 | AccordionItem,
37 | AccordionTrigger,
38 | } from '@/components/ui/accordion'
39 | ```
40 |
41 | ```tsx
42 |
43 |
44 | Is it accessible?
45 | Yes. It adheres to the WAI-ARIA design pattern.
46 |
47 |
48 | ```
49 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/alert.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Alert
3 | description: Displays a callout for user attention.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/alert
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
25 | import { Terminal } from 'lucide-react' // Any icon of your choice
26 | ```
27 |
28 | ```tsx
29 |
30 |
31 | Heads up!
32 |
33 | You can add components and dependencies to your app using the cli.
34 |
35 |
36 | ```
37 |
38 | ## Examples
39 |
40 | ### Default
41 |
42 |
43 |
44 | ### Destructive
45 |
46 |
47 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/aspect-ratio.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Aspect Ratio
3 | description: Displays content within a desired ratio.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/aspect-ratio
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
8 | api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-aspect-ratio
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import Image from 'next/image'
34 | import { css } from '@shadow-panda/styled-system/css'
35 | import { AspectRatio } from '@/components/ui/aspect-ratio'
36 | ```
37 |
38 | ```tsx
39 |
44 | ```
45 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/avatar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Avatar
3 | description: An image element with a fallback for representing the user.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/avatar
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/avatar
8 | api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-avatar
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
34 | ```
35 |
36 | ```tsx
37 |
38 |
39 | NP
40 |
41 | ```
42 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/badge.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Badge
3 | description: Displays a badge or a component that looks like a badge.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/badge
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import { Badge } from '@/components/ui/badge'
25 | ```
26 |
27 | ```tsx
28 | Badge
29 | ```
30 |
31 | ## Recipe
32 |
33 | ### Usage
34 |
35 | You can use the `badge` recipe to apply the badge styles to any component.
36 |
37 | ```tsx
38 | import { badge, type BadgeVariantProps } from '@shadow-panda/styled-system/recipes'
39 | ```
40 |
41 | ```tsx
42 | Badge
43 | ```
44 |
45 | ### Link
46 |
47 | You can use the `badge` recipe to create a link that looks like a badge.
48 |
49 | ```tsx
50 | import { badge } from '@shadow-panda/styled-system/recipes'
51 | ```
52 |
53 | ```tsx
54 | Click here
55 | ```
56 |
57 | ## Examples
58 |
59 | ### Default (Primary)
60 |
61 |
62 |
63 | ### Secondary
64 |
65 |
66 |
67 | ### Destructive
68 |
69 |
70 |
71 | ### Outline
72 |
73 |
74 |
75 | ### With Icon
76 |
77 |
78 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/calendar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Calendar
3 | description: A date field component that allows users to enter and edit date.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/calendar
6 | ---
7 |
8 |
9 |
10 | ## About
11 |
12 | The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).
13 |
14 | ## Installation
15 |
16 |
17 | ### Install the following dependencies
18 |
19 | ```bash npm2yarn
20 | npm i react-day-picker date-fns
21 | ```
22 |
23 | ### Copy and paste the following code into your project
24 |
25 |
26 |
27 | ### Update the import paths to match your project setup
28 |
29 |
30 |
31 | ## Usage
32 |
33 | ```tsx
34 | import { Calendar } from '@/components/ui/calendar'
35 | ```
36 |
37 | ```tsx
38 | const [date, setDate] = React.useState(new Date())
39 |
40 | return (
41 |
50 | )
51 | ```
52 |
53 | See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
54 |
55 | ## Date Picker
56 |
57 | You can use the `Calendar` component to build a date picker. See the See the [React DayPicker](https://react-day-picker.js.org) page for more information.
58 |
59 | ## Examples
60 |
61 | ### Form
62 |
63 |
64 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Card
3 | description: Displays a card with header, content, and footer.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/card
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import {
25 | Card,
26 | CardContent,
27 | CardDescription,
28 | CardFooter,
29 | CardHeader,
30 | CardTitle,
31 | } from '@/components/ui/card'
32 | ```
33 |
34 | ```tsx
35 |
36 |
37 | Card Title
38 | Card Description
39 |
40 |
41 | Card Content
42 |
43 |
44 | Card Footer
45 |
46 |
47 | ```
48 |
49 | ## Examples
50 |
51 |
52 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/checkbox.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Checkbox
3 | description: A control that allows the user to toggle between checked and not checked.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/checkbox
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/checkbox
8 | api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-checkbox
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Checkbox } from '@/components/ui/checkbox'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
40 | ## Examples
41 |
42 | ### With Text
43 |
44 |
45 |
46 | ### Disabled
47 |
48 |
49 |
50 | ### Form
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/collapsible.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Collapsible
3 | description: An interactive component which expands/collapses a panel.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/collapsible
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/collapsible
8 | api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-collapsible
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import {
34 | Collapsible,
35 | CollapsibleContent,
36 | CollapsibleTrigger,
37 | } from '@/components/ui/collapsible'
38 | ```
39 |
40 | ```tsx
41 |
42 | Can I use this in my project?
43 |
44 | Yes. Free to use for personal and commercial projects. No attribution
45 | required.
46 |
47 |
48 | ```
49 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/context-menu.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Context Menu
3 | description: Displays a menu to the user - such as a set of actions or functions - triggered by a button.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/context-menu
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/context-menu
8 | api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-context-menu
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import {
34 | ContextMenu,
35 | ContextMenuContent,
36 | ContextMenuItem,
37 | ContextMenuTrigger,
38 | } from '@/components/ui/context-menu'
39 | ```
40 |
41 | ```tsx
42 |
43 | Right click
44 |
45 | Profile
46 | Billing
47 | Team
48 | Subscription
49 |
50 |
51 | ```
52 |
53 |
54 | Unlike `shadcn/ui`, the `inset` prop for `
55 | `, `` and `` is renamed to `insetLeft`, since it collides with
56 | the css `inset` property.
57 |
58 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/hover-card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hover Card
3 | description: For sighted users to preview content available behind a link.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/hover-card
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/hover-card
8 | api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-hover-card
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
34 | ```
35 |
36 | ```tsx
37 |
38 | Hover
39 | The React Framework - created and maintained by @vercel.
40 |
41 | ```
42 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/input.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Input
3 | description: Displays a form input field or a component that looks like an input field.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/input
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import { Input } from '@/components/ui/input'
25 | ```
26 |
27 | ```tsx
28 |
29 | ```
30 |
31 | ## Examples
32 |
33 | ### Default
34 |
35 |
36 |
37 | ### File
38 |
39 |
40 |
41 | ### Disabled
42 |
43 |
44 |
45 | ### With Label
46 |
47 |
48 |
49 | ### With Button
50 |
51 |
52 |
53 | ### Form
54 |
55 |
56 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/label.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Label
3 | description: Renders an accessible label associated with controls.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/label
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/label
8 | api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-label
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Label } from '@/components/ui/label'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/menubar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Menubar
3 | description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/menubar
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/menubar
8 | api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-menubar
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import {
34 | Menubar,
35 | MenubarContent,
36 | MenubarItem,
37 | MenubarMenu,
38 | MenubarSeparator,
39 | MenubarShortcut,
40 | MenubarTrigger,
41 | } from '@/components/ui/menubar'
42 | ```
43 |
44 | ```tsx
45 |
46 |
47 | File
48 |
49 |
50 | New Tab ⌘T
51 |
52 | New Window
53 |
54 | Share
55 |
56 | Print
57 |
58 |
59 |
60 | ```
61 |
62 |
63 | Unlike `shadcn/ui`, the `inset` prop for `
64 | `, `` and `` is renamed to `insetLeft`, since it collides with the css
65 | `inset` property.
66 |
67 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/popover.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Popover
3 | description: Displays rich content in a portal, triggered by a button.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/popover
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/popover
8 | api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-popover
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
34 | ```
35 |
36 | ```tsx
37 |
38 | Open
39 | Place content for the popover here.
40 |
41 | ```
42 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/progress.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Progress
3 | description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/progress
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/progress
8 | api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-progress
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Progress } from '@/components/ui/progress'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/radio-group.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Radio Group
3 | description: A set of checkable buttons - known as radio buttons - where no more than one of the buttons can be checked at a time.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/radio-group
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/radio-group
8 | api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-radio-group
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Flex } from '@shadow-panda/styled-system/jsx'
34 | import { Label } from '@/components/ui/label'
35 | import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
36 | ```
37 |
38 | ```tsx
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | ```
50 |
51 | ## Examples
52 |
53 | ### Form
54 |
55 |
56 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/scroll-area.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Scroll Area
3 | description: Augments native scroll functionality for custom, cross-browser styling.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/scroll-area
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/scroll-area
8 | api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-scroll-area
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { ScrollArea } from '@/components/ui/scroll-area'
34 | ```
35 |
36 | ```tsx
37 |
38 | Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the
39 | place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but
40 | he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that
41 | the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started
42 | laughing, they couldn't stop.
43 |
44 | ```
45 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/select.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Select
3 | description: Displays a list of options for the user to pick from - triggered by a button.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/select
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/select
8 | api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-select
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import {
34 | Select,
35 | SelectContent,
36 | SelectItem,
37 | SelectTrigger,
38 | SelectValue,
39 | } from '@/components/ui/select'
40 | ```
41 |
42 | ```tsx
43 |
53 | ```
54 |
55 | ## Examples
56 |
57 | ### Form
58 |
59 |
60 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/separator.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Separator
3 | description: Visually or semantically separates content.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/separator
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/separator
8 | api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-separator
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Separator } from '@/components/ui/separator'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/skeleton.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Skeleton
3 | description: Use to show a placeholder while content is loading.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/skeleton
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import { Skeleton } from '@/components/ui/skeleton'
25 | ```
26 |
27 | ```tsx
28 |
29 | ```
30 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/slider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Slider
3 | description: An input where the user selects a value from within a given range.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/slider
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/slider
8 | api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-slider
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Slider } from '@/components/ui/slider'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Switch
3 | description: A control that allows the user to toggle between checked and not checked.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/switch
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/switch
8 | api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-switch
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Switch } from '@/components/ui/switch'
34 | ```
35 |
36 | ```tsx
37 |
38 | ```
39 |
40 | ## Examples
41 |
42 | ### Default
43 |
44 |
45 |
46 | ### Disabled
47 |
48 |
49 |
50 | ### Form
51 |
52 |
53 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/table.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Table
3 | description: A responsive table component.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/table
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import {
25 | Table,
26 | TableBody,
27 | TableCaption,
28 | TableCell,
29 | TableHead,
30 | TableHeader,
31 | TableRow,
32 | } from '@/components/ui/table'
33 | ```
34 |
35 | ```tsx
36 |
37 | A list of your recent invoices.
38 |
39 |
40 | Invoice
41 | Status
42 | Method
43 | Amount
44 |
45 |
46 |
47 |
48 | INV001
49 | Paid
50 | Credit Card
51 | $250.00
52 |
53 |
54 |
55 | ```
56 |
57 | ## Data Table
58 |
59 | You can use the `` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table) to create tables with sorting, filtering and pagination.
60 |
61 | See the [Data Table](/docs/components/data-table) documentation for more information.
62 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/tabs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tabs
3 | description: A set of layered sections of content - known as tab panels - that are displayed one at a time.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/tabs
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/tabs
8 | api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-tabs
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
34 | ```
35 |
36 | ```tsx
37 |
38 |
39 | Account
40 | Password
41 |
42 | Make changes to your account here.
43 | Change your password here.
44 |
45 | ```
46 |
47 | ## Examples
48 |
49 | ### Alternate styles
50 |
51 |
52 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/textarea.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Textarea
3 | description: Displays a form textarea or a component that looks like a textarea.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/textarea
6 | ---
7 |
8 |
9 |
10 | ## Installation
11 |
12 |
13 | ### Copy and paste the following code into your project
14 |
15 |
16 |
17 | ### Update the import paths to match your project setup
18 |
19 |
20 |
21 | ## Usage
22 |
23 | ```tsx
24 | import { Textarea } from '@/components/ui/textarea'
25 | ```
26 |
27 | ```tsx
28 |
29 | ```
30 |
31 | ## Examples
32 |
33 | ### Default
34 |
35 |
36 |
37 | ### Disabled
38 |
39 |
40 |
41 | ### With Label
42 |
43 |
44 |
45 | ### With Text
46 |
47 |
48 |
49 | ### With Button
50 |
51 |
52 |
53 | ### Form
54 |
55 |
56 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/toggle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Toggle
3 | description: A two-state button that can be either on or off.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/toggle
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/toggle
8 | api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-toggle
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Toggle } from '@/components/ui/toggle'
34 | ```
35 |
36 | ```tsx
37 | Toggle
38 | ```
39 |
40 | ## Examples
41 |
42 | ### Default
43 |
44 |
45 |
46 | ### Outline
47 |
48 |
49 |
50 | ### With Text
51 |
52 |
53 |
54 | ### Small
55 |
56 |
57 |
58 | ### Large
59 |
60 |
61 |
62 | ### Disabled
63 |
64 |
65 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/components/tooltip.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Tooltip
3 | description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
4 | references:
5 | shadcnUiLink: https://ui.shadcn.com/docs/components/tooltip
6 | radix:
7 | link: https://www.radix-ui.com/docs/primitives/components/tooltip
8 | api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference
9 | ---
10 |
11 |
12 |
13 | ## Installation
14 |
15 |
16 | ### Install the following dependencies
17 |
18 | ```bash npm2yarn
19 | npm i @radix-ui/react-tooltip
20 | ```
21 |
22 | ### Copy and paste the following code into your project
23 |
24 |
25 |
26 | ### Update the import paths to match your project setup
27 |
28 |
29 |
30 | ## Usage
31 |
32 | ```tsx
33 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
34 | ```
35 |
36 | ```tsx
37 |
38 |
39 | Hover
40 |
41 | Add to library
42 |
43 |
44 |
45 | ```
46 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/guides/theming.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Theming
3 | description: Using PandaCSS or CSS Variables for theming.
4 | order: 1
5 | ---
6 |
7 | You can choose between extending the theme using PandaCSS or CSS variables.
8 |
9 | ## Extending PandaCSS theme
10 |
11 | The easiest way to configure the theme is to use the theme feature from PandaCSS.
12 |
13 | Variables used in Shadow Panda are defined as `semanticTokens`, so simply extend the theme and override them:
14 |
15 | ```ts title="panda.config.ts"
16 | import { defineConfig } from '@pandacss/dev'
17 |
18 | export default defineConfig({
19 | // Presets
20 | presets: ['@shadow-panda/preset'],
21 |
22 | // Extend theme
23 | theme: {
24 | extend: {
25 | // Override `semanticTokens`
26 | semanticTokens: {
27 | // Example: Set primary color to another value
28 | colors: {
29 | primary: {
30 | DEFAULT: {
31 | value: {
32 | // Light mode
33 | base: '{colors.grayscale.900}',
34 | // Dark mode
35 | _dark: '{colors.grayscale.50}',
36 | },
37 | },
38 | },
39 | },
40 | },
41 | },
42 | },
43 | })
44 | ```
45 |
46 | For a list of semanticTokens defined in Shadow Panda, [check out the config file](https://github.com/kumaaa-inc/shadow-panda/blob/main/packages/preset/src/semantic-tokens/index.ts).
47 |
48 | ## CSS Variables
49 |
50 |
51 | This section is under construction.
52 |
53 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/guides/utilities.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Utilities
3 | description: PandaCSS utilities included in our preset
4 | order: 2
5 | ---
6 |
7 |
8 | This page is under construction.
9 |
10 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/overview/figma.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Figma
3 | description: Open sourced Figma UI Kit
4 | order: 3
5 | ---
6 |
7 | import { css } from '@shadow-panda/styled-system/css'
8 | import { AspectRatio } from '@/components/ui/aspect-ratio'
9 |
10 | The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano).
11 |
12 | export const aspectRatioStyles = css({
13 | width: 'full',
14 | mt: '4',
15 | })
16 |
17 | export const iframeStyles = css({
18 | height: 'full',
19 | width: 'full',
20 | overflow: 'hidden',
21 | rounded: 'lg',
22 | border: 'base',
23 | bg: 'muted',
24 | })
25 |
26 |
27 |
31 |
32 |
33 | Dark mode version (made by a different author):
34 |
35 |
36 |
40 |
41 |
42 | ## Grab a copy
43 |
44 | ### Light Mode
45 |
46 | https://www.figma.com/community/file/1203061493325953101
47 |
48 | ### Dark Mode
49 |
50 | https://www.figma.com/community/file/1253738792915136237
51 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/overview/getting-started.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | description: Guide to get started with Shadow Panda
4 | order: 2
5 | ---
6 |
7 | ## Installation
8 |
9 |
10 | Before installing this package, make sure you have installed [Panda
11 | CSS](https://panda-css.com/docs/overview/getting-started#installation) in your project.
12 |
13 |
14 |
15 | ### Step 1
16 |
17 | Install the preset, and the style context utility package used by most components
18 |
19 | ```sh npm2yarn
20 | npm i -D @shadow-panda/preset
21 | ```
22 |
23 | ```sh npm2yarn
24 | npm i @shadow-panda/style-context
25 | ```
26 |
27 | ### Step 2
28 |
29 | Add the preset to your `panda.config.ts`
30 |
31 | ```ts title="panda.config.ts"
32 | import { defineConfig } from '@pandacss/dev'
33 |
34 | export default defineConfig({
35 | // Required: Add the preset to your config.
36 | presets: ['@shadow-panda/preset'],
37 |
38 | // Optional: Enable CSS reset
39 | preflight: true,
40 |
41 | // Use React
42 | jsxFramework: 'react',
43 |
44 | // Optional: Emit artifacts to `node_modules` as a package.
45 | // The copy-paste component examples use `@shadow-panda/styled-system` as the import path of the generated files.
46 | // If you choose not to use this option, you should rewrite your component imports as needed.
47 | // @see https://panda-css.com/docs/references/config#emitpackage
48 | emitPackage: true,
49 | outdir: '@shadow-panda/styled-system',
50 |
51 | // Other configurations and overrides...
52 | })
53 | ```
54 |
55 | ### Step 3
56 |
57 | Compile Panda CSS, copy [components](/docs/overview/supported-components) and use it!
58 |
59 |
60 |
--------------------------------------------------------------------------------
/apps/docs/src/contents/overview/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | description: Re-usable components built using Radix UI and Panda CSS.
4 | order: 1
5 | ---
6 |
7 | `Shadow Panda` is an adoption of [shadcn/ui](https://ui.shadcn.com/), tailored specifically for developers utilizing [Panda CSS](https://panda-css.com/) as an alternative to Tailwind CSS.
8 |
9 | > This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps.
10 | > _Use this as a reference to build your own component libraries._
11 |
12 | ## Acknowledgement
13 |
14 | A huge thanks to the creators of [shadcn/ui](https://ui.shadcn.com/) for providing an excellent set of components and documentation.
15 | Most of the components and documentation were taken from [shadcn/ui](https://ui.shadcn.com/).
16 |
17 | Also, we couldn't have done it without the help of:
18 |
19 | - [Panda CSS](https://panda-css.com/)
20 | - [Radix UI](https://radix-ui.com/)
21 |
--------------------------------------------------------------------------------
/apps/docs/src/lib/env.ts:
--------------------------------------------------------------------------------
1 | export const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://shadow-panda.dev'
2 |
--------------------------------------------------------------------------------
/apps/docs/src/lib/sort-docs.ts:
--------------------------------------------------------------------------------
1 | import type { DocumentTypes } from 'contentlayer/generated'
2 |
3 | const DOCUMENT_TYPE_ORDER = ['Overview', 'Guides', 'Component']
4 |
5 | // Sort document by document type and `order` field, else by title
6 | export const sortDocs = (docs: DocumentTypes[]) => {
7 | return [...docs].sort((a, b) => {
8 | const aTypeOrder = DOCUMENT_TYPE_ORDER.indexOf(a.type)
9 | const bTypeOrder = DOCUMENT_TYPE_ORDER.indexOf(b.type)
10 | if (aTypeOrder !== bTypeOrder) return aTypeOrder - bTypeOrder
11 | if (a.order !== b.order) return a.order - b.order
12 | return a.title.localeCompare(b.title)
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/apps/docs/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @layer reset, base, tokens, recipes, utilities;
2 |
--------------------------------------------------------------------------------
/apps/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "composite": false,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "moduleResolution": "node",
9 | "allowJs": false,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "jsx": "preserve",
13 | "paths": {
14 | "@/*": ["./src/*"],
15 | "contentlayer/generated": ["./.contentlayer/generated"]
16 | },
17 | "lib": ["dom", "dom.iterable", "esnext"],
18 | "noEmit": true,
19 | "incremental": true,
20 | "module": "esnext",
21 | "resolveJsonModule": true,
22 | "plugins": [
23 | {
24 | "name": "next"
25 | }
26 | ]
27 | },
28 | "include": [
29 | "next-env.d.ts",
30 | "**/*.ts",
31 | "**/*.tsx",
32 | ".next/types/**/*.ts",
33 | ".contentlayer/generated"
34 | ],
35 | "exclude": ["node_modules"]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/preset/.gitignore:
--------------------------------------------------------------------------------
1 | styled-system/
2 | node_modules/
3 | dist/
--------------------------------------------------------------------------------
/packages/preset/index.ts:
--------------------------------------------------------------------------------
1 | export * from './src'
2 | export { default } from './src'
3 |
--------------------------------------------------------------------------------
/packages/preset/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shadow-panda/preset",
3 | "description": "The preset for PandaCSS that contains the theme for Shadow Panda",
4 | "version": "0.7.1",
5 | "main": "dist/index.js",
6 | "module": "dist/index.mjs",
7 | "types": "dist/index.d.ts",
8 | "homepage": "https://shadow-panda.dev",
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/kumaaa-inc/shadow-panda.git"
12 | },
13 | "bugs": {
14 | "url": "https://github.com/kumaaa-inc/shadow-panda/issues"
15 | },
16 | "files": [
17 | "dist"
18 | ],
19 | "publishConfig": {
20 | "access": "public"
21 | },
22 | "sideEffects": false,
23 | "license": "MIT",
24 | "scripts": {
25 | "build": "tsup src/index.ts --format=esm,cjs --dts",
26 | "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts",
27 | "dev": "pnpm build-fast --watch",
28 | "typecheck": "tsc --noEmit"
29 | },
30 | "dependencies": {
31 | "@pandacss/preset-panda": "0.17.1"
32 | },
33 | "devDependencies": {
34 | "@pandacss/dev": "0.17.1",
35 | "@pandacss/types": "0.17.1"
36 | },
37 | "peerDependencies": {
38 | "@pandacss/dev": "0.17.1"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/preset/src/breakpoints.ts:
--------------------------------------------------------------------------------
1 | export const breakpoints = {
2 | sm: '640px',
3 | md: '768px',
4 | lg: '1024px',
5 | xl: '1280px',
6 | '2xl': '1536px',
7 | }
8 |
--------------------------------------------------------------------------------
/packages/preset/src/conditions.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from '@pandacss/types'
2 |
3 | export const conditions: Config['conditions'] = {
4 | extend: {},
5 | }
6 |
--------------------------------------------------------------------------------
/packages/preset/src/global-css.ts:
--------------------------------------------------------------------------------
1 | import { defineGlobalStyles } from '@pandacss/dev'
2 |
3 | export const globalCss = defineGlobalStyles({
4 | html: {
5 | MozOsxFontSmoothing: 'grayscale',
6 | textRendering: 'optimizeLegibility',
7 | WebkitFontSmoothing: 'antialiased',
8 | WebkitTextSizeAdjust: '100%',
9 | },
10 | body: {
11 | bg: 'background',
12 | color: 'foreground',
13 | fontFamily: 'sans',
14 | },
15 | button: {
16 | color: 'inherit',
17 | outline: '2px solid transparent',
18 | },
19 | })
20 |
--------------------------------------------------------------------------------
/packages/preset/src/index.ts:
--------------------------------------------------------------------------------
1 | import pandaPreset from '@pandacss/preset-panda'
2 | import type { Config } from '@pandacss/types'
3 | import { globalCss } from './global-css'
4 | import { tokens } from './tokens'
5 | import { textStyles } from './text-styles'
6 | import { keyframes } from './keyframes'
7 | import { semanticTokens } from './semantic-tokens'
8 | import { breakpoints } from './breakpoints'
9 | import { utilities } from './utilities'
10 | import { conditions } from './conditions'
11 | import { recipes } from './recipes'
12 | import { slotRecipes } from './slot-recipes'
13 | import { layerStyles } from './layer-styles'
14 |
15 | const defineConfig = (config: T) => config
16 |
17 | export const shadowPandaPreset = defineConfig({
18 | presets: [pandaPreset],
19 | globalCss,
20 | conditions,
21 | utilities,
22 | theme: {
23 | extend: {
24 | tokens,
25 | semanticTokens,
26 | breakpoints,
27 | textStyles,
28 | keyframes,
29 | recipes,
30 | slotRecipes,
31 | layerStyles,
32 | },
33 | },
34 | })
35 |
36 | export default shadowPandaPreset
37 |
--------------------------------------------------------------------------------
/packages/preset/src/keyframes.ts:
--------------------------------------------------------------------------------
1 | import { defineKeyframes } from '@pandacss/dev'
2 |
3 | export const keyframes = defineKeyframes({
4 | enter: {
5 | from: {
6 | opacity: 'var(--shadow-panda-enter-opacity, 1)',
7 | transform:
8 | 'translate3d(var(--shadow-panda-enter-translate-x, 0), var(--shadow-panda-enter-translate-y, 0), 0) scale3d(var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1)) rotate(var(--shadow-panda-enter-rotate, 0))',
9 | },
10 | },
11 | exit: {
12 | to: {
13 | opacity: 'var(--shadow-panda-exit-opacity, 1)',
14 | transform:
15 | 'translate3d(var(--shadow-panda-exit-translate-x, 0), var(--shadow-panda-exit-translate-y, 0), 0) scale3d(var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1)) rotate(var(--shadow-panda-exit-rotate, 0))',
16 | },
17 | },
18 | 'accordion-down': {
19 | from: { height: 0 },
20 | to: { height: 'var(--radix-accordion-content-height)' },
21 | },
22 | 'accordion-up': {
23 | from: { height: 'var(--radix-accordion-content-height)' },
24 | to: { height: 0 },
25 | },
26 | })
27 |
--------------------------------------------------------------------------------
/packages/preset/src/layer-styles.ts:
--------------------------------------------------------------------------------
1 | import { defineLayerStyles } from '@pandacss/dev'
2 |
3 | export const layerStyles = defineLayerStyles({})
4 |
--------------------------------------------------------------------------------
/packages/preset/src/lib/color-mix.ts:
--------------------------------------------------------------------------------
1 | import type { PropertyTransform } from '@pandacss/types'
2 |
3 | export const colorMix: (...args: Parameters) => {
4 | color: string
5 | amount: string | number
6 | value: string
7 | } = (value: string, { token }) => {
8 | const [color, opacityAmount] = value.split('/')
9 | const amount = !isNaN(Number(opacityAmount)) ? Number(opacityAmount) : 100
10 | const colorValue = token(`colors.${color}`)
11 | const opacityValue = token(`opacity.${amount}`)
12 | const amountValue = opacityValue ? Number(opacityValue) * 100 : `${100 - amount}%`
13 |
14 | return {
15 | color: colorValue ?? color,
16 | amount: amountValue,
17 | value: `color-mix(in srgb, transparent ${amountValue}, ${colorValue})`,
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/alert.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const alert = defineRecipe({
4 | className: 'alert',
5 | description: 'Styles for the Alert component',
6 | base: {
7 | position: 'relative',
8 | w: 'full',
9 | rounded: 'lg',
10 | border: 'base',
11 | p: '4',
12 |
13 | '&:has(svg)': {
14 | pl: '11',
15 | },
16 |
17 | '& > svg + div': {
18 | translateY: '-3px',
19 | },
20 |
21 | '& > svg': {
22 | position: 'absolute',
23 | left: '4',
24 | top: '4',
25 | color: 'foreground',
26 | h: '4',
27 | w: '4',
28 | },
29 | },
30 | variants: {
31 | variant: {
32 | default: {
33 | bg: 'background',
34 | color: 'foreground',
35 | },
36 | destructive: {
37 | bca: 'destructive/50',
38 | color: 'destructive',
39 |
40 | _dark: {
41 | borderColor: 'destructive',
42 | },
43 |
44 | '& > svg': {
45 | color: 'destructive',
46 | },
47 | },
48 | },
49 | },
50 | defaultVariants: {
51 | variant: 'default',
52 | },
53 | })
54 |
55 | export const alertTitle = defineRecipe({
56 | className: 'alertTitle',
57 | description: 'Styles for the AlertTitle component',
58 | base: {
59 | mb: '1',
60 | fontWeight: 'medium',
61 | leading: 'none',
62 | tracking: 'tight',
63 | },
64 | })
65 |
66 | export const alertDescription = defineRecipe({
67 | className: 'alertDescription',
68 | description: 'Styles for the AlertDescription component',
69 | base: {
70 | textStyle: 'sm',
71 |
72 | '& p': {
73 | leading: 'relaxed',
74 | },
75 | },
76 | })
77 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/badge.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const badge = defineRecipe({
4 | className: 'badge',
5 | description: 'Styles for the Badge component',
6 | base: {
7 | display: 'inline-flex',
8 | alignItems: 'center',
9 | rounded: 'full',
10 | border: 'base',
11 | px: '2.5',
12 | py: '0.5',
13 | textStyle: 'xs',
14 | fontWeight: 'semibold',
15 | transition: 'colors',
16 | focusRingOffsetColor: 'background',
17 |
18 | _focus: {
19 | outline: '2px solid transparent',
20 | outlineOffset: '2px',
21 | focusRingWidth: '2',
22 | focusRingColor: 'ring',
23 | focusRingOffsetWidth: '2',
24 | },
25 | },
26 | variants: {
27 | variant: {
28 | default: {
29 | borderColor: 'transparent',
30 | bg: 'primary',
31 | color: 'primary.foreground',
32 |
33 | _hover: {
34 | bga: 'primary/80',
35 | },
36 | },
37 | secondary: {
38 | borderColor: 'transparent',
39 | bg: 'secondary',
40 | color: 'secondary.foreground',
41 |
42 | _hover: {
43 | bga: 'secondary/80',
44 | },
45 | },
46 | destructive: {
47 | borderColor: 'transparent',
48 | bg: 'destructive',
49 | color: 'destructive.foreground',
50 |
51 | _hover: {
52 | bga: 'destructive/80',
53 | },
54 | },
55 | outline: {
56 | color: 'foreground',
57 | },
58 | },
59 | },
60 | defaultVariants: {
61 | variant: 'default',
62 | },
63 | })
64 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/card.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const card = defineRecipe({
4 | className: 'card',
5 | description: 'Styles for the Card component',
6 | base: {
7 | rounded: 'lg',
8 | border: 'base',
9 | bg: 'card',
10 | color: 'card.foreground',
11 | shadow: 'sm',
12 | },
13 | })
14 |
15 | export const cardHeader = defineRecipe({
16 | className: 'cardHeader',
17 | description: 'Styles for the CardHeader component',
18 | base: {
19 | display: 'flex',
20 | flexDirection: 'column',
21 | spaceY: '1.5',
22 | p: '6',
23 | },
24 | })
25 |
26 | export const cardTitle = defineRecipe({
27 | className: 'cardTitle',
28 | description: 'Styles for the CardTitle component',
29 | base: {
30 | textStyle: '2xl',
31 | fontWeight: 'semibold',
32 | leading: 'none',
33 | tracking: 'tight',
34 | },
35 | })
36 |
37 | export const cardDescription = defineRecipe({
38 | className: 'cardDescription',
39 | description: 'Styles for the CardDescription component',
40 | base: {
41 | textStyle: 'sm',
42 | color: 'muted.foreground',
43 | },
44 | })
45 |
46 | export const cardContent = defineRecipe({
47 | className: 'cardContent',
48 | description: 'Styles for the CardContent component',
49 | base: {
50 | p: '6',
51 | pt: '0',
52 | },
53 | })
54 |
55 | export const cardFooter = defineRecipe({
56 | className: 'cardFooter',
57 | description: 'Styles for the CardFooter component',
58 | base: {
59 | display: 'flex',
60 | alignItems: 'center',
61 | p: '6',
62 | pt: '0',
63 | },
64 | })
65 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/form.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const formLabel = defineRecipe({
4 | className: 'formLabel',
5 | description: 'Styles for the FormLabel component',
6 | base: {},
7 | })
8 |
9 | export const formItem = defineRecipe({
10 | className: 'formItem',
11 | description: 'Styles for the FormItem component',
12 | base: {
13 | display: 'flex',
14 | flexDirection: 'column',
15 | gap: '2',
16 | },
17 | })
18 |
19 | export const formControl = defineRecipe({
20 | className: 'formControl',
21 | description: 'Styles for the FormControl component',
22 | base: {},
23 | })
24 |
25 | export const formDescription = defineRecipe({
26 | className: 'formDescription',
27 | description: 'Styles for the FormDescription component',
28 | base: {
29 | textStyle: 'sm',
30 | color: 'muted.foreground',
31 | },
32 | })
33 |
34 | export const formMessage = defineRecipe({
35 | className: 'formMessage',
36 | description: 'Styles for the FormMessage component',
37 | base: {
38 | textStyle: 'sm',
39 | fontWeight: 'medium',
40 | color: 'destructive',
41 | },
42 | })
43 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/icon.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const icon = defineRecipe({
4 | className: 'icon',
5 | description: 'Styles for the icons',
6 | base: {},
7 | variants: {
8 | size: {
9 | xl: {
10 | h: '6',
11 | w: '6',
12 | },
13 | lg: {
14 | h: '5',
15 | w: '5',
16 | },
17 | md: {
18 | h: '4',
19 | w: '4',
20 | },
21 | sm: {
22 | h: '3',
23 | w: '3',
24 | },
25 | xs: {
26 | h: '2',
27 | w: '2',
28 | },
29 | },
30 | left: {
31 | none: {},
32 | sm: {
33 | ml: '2',
34 | },
35 | auto: {
36 | ml: 'auto',
37 | },
38 | },
39 | right: {
40 | none: {},
41 | sm: {
42 | mr: '2',
43 | },
44 | auto: {
45 | mr: 'auto',
46 | },
47 | },
48 | fillCurrent: {
49 | true: {
50 | fill: 'currentColor',
51 | },
52 | },
53 | dimmed: {
54 | true: {
55 | opacity: '0.5',
56 | },
57 | },
58 | },
59 | defaultVariants: {
60 | size: 'md',
61 | left: 'none',
62 | right: 'none',
63 | fillCurrent: false,
64 | dimmed: false,
65 | },
66 | })
67 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/index.ts:
--------------------------------------------------------------------------------
1 | import * as alert from './alert'
2 | import * as badge from './badge'
3 | import * as button from './button'
4 | import * as card from './card'
5 | import * as form from './form'
6 | import * as icon from './icon'
7 | import * as input from './input'
8 | import * as label from './label'
9 | import * as separator from './separator'
10 | import * as skeleton from './skeleton'
11 | import * as table from './table'
12 | import * as textarea from './textarea'
13 | import * as toast from './toast'
14 | import * as toggle from './toggle'
15 | import * as typography from './typography'
16 |
17 | export const recipes = {
18 | ...alert,
19 | ...typography,
20 | ...badge,
21 | ...button,
22 | ...card,
23 | ...form,
24 | ...icon,
25 | ...input,
26 | ...label,
27 | ...separator,
28 | ...skeleton,
29 | ...table,
30 | ...textarea,
31 | ...toast,
32 | ...toggle,
33 | }
34 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/input.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const input = defineRecipe({
4 | className: 'input',
5 | description: 'Styles for the Input component',
6 | base: {
7 | display: 'flex',
8 | h: '10',
9 | w: 'full',
10 | rounded: 'md',
11 | border: 'input',
12 | bg: 'background',
13 | px: '3',
14 | py: '2',
15 | textStyle: 'sm',
16 | focusRingOffsetColor: 'background',
17 |
18 | _file: {
19 | border: 'none',
20 | bg: 'transparent',
21 | textStyle: 'sm',
22 | fontWeight: 'medium',
23 | },
24 |
25 | _placeholder: {
26 | color: 'muted.foreground',
27 | },
28 |
29 | _focusVisible: {
30 | outline: '2px solid transparent',
31 | outlineOffset: '2px',
32 | focusRingWidth: '2',
33 | focusRingColor: 'ring',
34 | focusRingOffsetWidth: '2',
35 | },
36 |
37 | _disabled: {
38 | cursor: 'not-allowed',
39 | opacity: '0.5',
40 | },
41 | },
42 | })
43 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/label.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const label = defineRecipe({
4 | className: 'label',
5 | description: 'Styles for the Label component',
6 | base: {
7 | textStyle: 'sm',
8 | leading: 'none',
9 | fontWeight: 'medium',
10 |
11 | _peerDisabled: {
12 | cursor: 'not-allowed',
13 | opacity: '0.7',
14 | },
15 | },
16 | })
17 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/separator.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const separator = defineRecipe({
4 | className: 'separator',
5 | description: 'Styles for the Separator component',
6 | base: {
7 | flexShrink: 0,
8 | bg: 'border',
9 | },
10 | variants: {
11 | orientation: {
12 | horizontal: {
13 | h: '1px',
14 | w: 'full',
15 | },
16 | vertical: {
17 | h: 'full',
18 | w: '1px',
19 | },
20 | },
21 | },
22 | defaultVariants: {
23 | orientation: 'horizontal',
24 | },
25 | })
26 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/skeleton.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const skeleton = defineRecipe({
4 | className: 'skeleton',
5 | description: 'Styles for the Skeleton component',
6 | base: {
7 | animation: 'pulse',
8 | rounded: 'md',
9 | bg: 'muted',
10 | },
11 | })
12 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/textarea.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const textarea = defineRecipe({
4 | className: 'textarea',
5 | description: 'Styles for the Textarea component',
6 | base: {
7 | display: 'flex',
8 | minH: '80px',
9 | w: 'full',
10 | rounded: 'md',
11 | border: 'input',
12 | bg: 'transparent',
13 | px: '3',
14 | py: '2',
15 | textStyle: 'sm',
16 | focusRingOffsetColor: 'background',
17 |
18 | _placeholder: {
19 | color: 'muted.foreground',
20 | },
21 |
22 | _focusVisible: {
23 | outline: '2px solid transparent',
24 | outlineOffset: '2px',
25 | focusRingWidth: '2',
26 | focusRingColor: 'ring',
27 | focusRingOffsetWidth: '2',
28 | },
29 |
30 | _disabled: {
31 | cursor: 'not-allowed',
32 | opacity: '0.5',
33 | },
34 | },
35 | })
36 |
--------------------------------------------------------------------------------
/packages/preset/src/recipes/toast.ts:
--------------------------------------------------------------------------------
1 | import { defineRecipe } from '@pandacss/dev'
2 |
3 | export const toastViewport = defineRecipe({
4 | className: 'toastViewport',
5 | description: 'Styles for the ToastViewport component',
6 | base: {
7 | position: 'fixed',
8 | top: '0',
9 | zIndex: 100,
10 | display: 'flex',
11 | maxH: 'screen',
12 | w: 'full',
13 | flexDirection: 'column-reverse',
14 | p: '4',
15 |
16 | sm: {
17 | bottom: '0',
18 | right: '0',
19 | top: 'auto',
20 | flexDirection: 'column',
21 | },
22 |
23 | md: {
24 | maxW: '420px',
25 | },
26 | },
27 | })
28 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/accordion.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const accordion = defineSlotRecipe({
4 | className: 'accordion',
5 | description: 'Styles for the Accordion component',
6 | slots: ['root', 'item', 'header', 'trigger', 'content'],
7 | base: {
8 | item: {
9 | borderBottom: 'base',
10 | },
11 | header: {
12 | display: 'flex',
13 | },
14 | trigger: {
15 | display: 'flex',
16 | flex: '1',
17 | alignItems: 'center',
18 | justifyContent: 'space-between',
19 | py: '4',
20 | fontWeight: 'medium',
21 | transition: 'all',
22 | cursor: 'pointer',
23 |
24 | _hover: {
25 | textDecoration: 'underline',
26 | },
27 |
28 | '& > svg': {
29 | h: '4',
30 | w: '4',
31 | flexShrink: '0',
32 | transition: 'transform',
33 | transitionDuration: 'normal',
34 | },
35 |
36 | '&[data-state=open] > svg': {
37 | transform: 'rotate(180deg)',
38 | },
39 | },
40 | content: {
41 | overflow: 'hidden',
42 | textStyle: 'sm',
43 | transition: 'all',
44 |
45 | '&[data-state=closed]': {
46 | animation: 'accordion-up',
47 | },
48 |
49 | '&[data-state=open]': {
50 | animation: 'accordion-down',
51 | },
52 |
53 | '& > div': {
54 | pb: '4',
55 | pt: '0',
56 | },
57 | },
58 | },
59 | })
60 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/avatar.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const avatar = defineSlotRecipe({
4 | className: 'avatar',
5 | description: 'Styles for the Avatar component',
6 | slots: ['root', 'image', 'fallback'],
7 | base: {
8 | root: {
9 | position: 'relative',
10 | display: 'flex',
11 | h: '10',
12 | w: '10',
13 | flexShrink: '0',
14 | overflow: 'hidden',
15 | rounded: 'full',
16 | },
17 | image: {
18 | aspectRatio: 'square',
19 | h: 'full',
20 | w: 'full',
21 | },
22 | fallback: {
23 | display: 'flex',
24 | h: 'full',
25 | w: 'full',
26 | alignItems: 'center',
27 | justifyContent: 'center',
28 | rounded: 'full',
29 | bg: 'muted',
30 | },
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/checkbox.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const checkbox = defineSlotRecipe({
4 | className: 'checkbox',
5 | description: 'Styles for the Checkbox component',
6 | slots: ['root', 'indicator'],
7 | base: {
8 | root: {
9 | h: '4',
10 | w: '4',
11 | flexShrink: '0',
12 | rounded: 'sm',
13 | border: 'primary',
14 | cursor: 'pointer',
15 | focusRingOffsetColor: 'background',
16 |
17 | _focusVisible: {
18 | outline: '2px solid transparent',
19 | outlineOffset: '2px',
20 | focusRingWidth: '2',
21 | focusRingColor: 'ring',
22 | focusRingOffsetWidth: '2',
23 | },
24 |
25 | _disabled: {
26 | cursor: 'not-allowed',
27 | opacity: '0.5',
28 | },
29 |
30 | '&[data-state="checked"]': {
31 | bg: 'primary',
32 | color: 'primary.foreground',
33 | },
34 | },
35 | indicator: {
36 | display: 'flex',
37 | alignItems: 'center',
38 | justifyContent: 'center',
39 | color: 'currentColor',
40 | },
41 | },
42 | })
43 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/collapsible.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const collapsible = defineSlotRecipe({
4 | className: 'collapsible',
5 | description: 'Styles for the Collapsible component',
6 | slots: ['root', 'trigger', 'content'],
7 | base: {},
8 | })
9 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/hover-card.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const hoverCard = defineSlotRecipe({
4 | className: 'hoverCard',
5 | description: 'Styles for the HoverCard component',
6 | slots: ['root', 'trigger', 'content'],
7 | base: {
8 | content: {
9 | zIndex: 50,
10 | w: '64',
11 | rounded: 'md',
12 | border: 'base',
13 | bg: 'popover',
14 | p: '4',
15 | color: 'popover.foreground',
16 | shadow: 'md',
17 | outline: '2px solid transparent',
18 |
19 | '&[data-state=open]': {
20 | animateIn: true,
21 | fadeIn: 0,
22 | zoomIn: 95,
23 | },
24 |
25 | '&[data-state=closed]': {
26 | animateOut: true,
27 | fadeOut: 0,
28 | zoomOut: 95,
29 | },
30 |
31 | '&[data-side=top]': {
32 | slideInFromBottom: '2',
33 | },
34 |
35 | '&[data-side=bottom]': {
36 | slideInFromTop: '2',
37 | },
38 |
39 | '&[data-side=left]': {
40 | slideInFromRight: '2',
41 | },
42 |
43 | '&[data-side=right]': {
44 | slideInFromLeft: '2',
45 | },
46 | },
47 | },
48 | })
49 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/index.tsx:
--------------------------------------------------------------------------------
1 | import * as accordion from './accordion'
2 | import * as alertDialog from './alert-dialog'
3 | import * as avatar from './avatar'
4 | import * as calendar from './calendar'
5 | import * as checkbox from './checkbox'
6 | import * as collapsible from './collapsible'
7 | import * as command from './command'
8 | import * as contextMenu from './context-menu'
9 | import * as dialog from './dialog'
10 | import * as dropdownMenu from './dropdown-menu'
11 | import * as hoverCard from './hover-card'
12 | import * as menubar from './menubar'
13 | import * as navigationMenu from './navigation-menu'
14 | import * as popover from './popover'
15 | import * as progress from './progress'
16 | import * as radioGroup from './radio-group'
17 | import * as scrollArea from './scroll-area'
18 | import * as select from './select'
19 | import * as sheet from './sheet'
20 | import * as slider from './slider'
21 | import * as switchRecipe from './switch'
22 | import * as tabs from './tabs'
23 | import * as toast from './toast'
24 | import * as tooltip from './tooltip'
25 |
26 | export const slotRecipes = {
27 | ...accordion,
28 | ...alertDialog,
29 | ...avatar,
30 | ...calendar,
31 | ...checkbox,
32 | ...collapsible,
33 | ...command,
34 | ...contextMenu,
35 | ...dialog,
36 | ...dropdownMenu,
37 | ...hoverCard,
38 | ...menubar,
39 | ...navigationMenu,
40 | ...popover,
41 | ...progress,
42 | ...radioGroup,
43 | ...scrollArea,
44 | ...select,
45 | ...sheet,
46 | ...slider,
47 | ...switchRecipe,
48 | ...tabs,
49 | ...toast,
50 | ...tooltip,
51 | }
52 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/popover.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const popover = defineSlotRecipe({
4 | className: 'popover',
5 | description: 'Styles for the Popover component',
6 | slots: ['root', 'trigger', 'portal', 'content'],
7 | base: {
8 | content: {
9 | zIndex: 50,
10 | w: '72',
11 | rounded: 'md',
12 | border: 'base',
13 | bg: 'popover',
14 | p: '4',
15 | color: 'popover.foreground',
16 | boxShadow: 'md',
17 | outline: 'none',
18 |
19 | '&[data-state=open]': {
20 | animateIn: true,
21 | fadeIn: 0,
22 | zoomIn: 95,
23 | },
24 |
25 | '&[data-state=closed]': {
26 | animateOut: true,
27 | fadeOut: 0,
28 | zoomOut: 95,
29 | },
30 |
31 | '&[data-side=top]': {
32 | slideInFromBottom: '2',
33 | },
34 |
35 | '&[data-side=bottom]': {
36 | slideInFromTop: '2',
37 | },
38 |
39 | '&[data-side=left]': {
40 | slideInFromRight: '2',
41 | },
42 |
43 | '&[data-side=right]': {
44 | slideInFromLeft: '2',
45 | },
46 | },
47 | },
48 | })
49 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/progress.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const progress = defineSlotRecipe({
4 | className: 'progress',
5 | description: 'Styles for the Progress component',
6 | slots: ['root', 'indicator'],
7 | base: {
8 | root: {
9 | position: 'relative',
10 | h: '4',
11 | w: 'full',
12 | overflow: 'hidden',
13 | rounded: 'full',
14 | bg: 'secondary',
15 | },
16 | indicator: {
17 | h: 'full',
18 | w: 'full',
19 | flex: '1',
20 | bg: 'primary',
21 | transition: 'all',
22 | },
23 | },
24 | })
25 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/radio-group.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const radioGroup = defineSlotRecipe({
4 | className: 'radioGroup',
5 | description: 'Styles for the RadioGroup component',
6 | slots: ['root', 'item', 'indicator', 'icon'],
7 | base: {
8 | root: {
9 | display: 'grid',
10 | gap: '2',
11 | },
12 | item: {
13 | aspectRatio: 'square',
14 | h: '4',
15 | w: '4',
16 | rounded: 'full',
17 | border: 'primary',
18 | color: 'primary',
19 | cursor: 'pointer',
20 | focusRingOffsetColor: 'background',
21 |
22 | _focusVisible: {
23 | outline: '2px solid transparent',
24 | outlineOffset: '2px',
25 | focusRingWidth: '2',
26 | focusRingColor: 'ring',
27 | focusRingOffsetWidth: '2',
28 | },
29 |
30 | _disabled: {
31 | cursor: 'not-allowed',
32 | opacity: '0.5',
33 | },
34 | },
35 | indicator: {
36 | display: 'flex',
37 | alignItems: 'center',
38 | justifyContent: 'center',
39 | },
40 | icon: {
41 | h: '2.5',
42 | w: '2.5',
43 | fill: 'current',
44 | color: 'current',
45 | },
46 | },
47 | })
48 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/scroll-area.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const scrollArea = defineSlotRecipe({
4 | className: 'scrollArea',
5 | description: 'Styles for the ScrollArea component',
6 | slots: ['root', 'viewport', 'corner', 'scrollbar', 'thumb'],
7 | base: {
8 | root: {
9 | position: 'relative',
10 | overflow: 'hidden',
11 | },
12 | viewport: {
13 | h: 'full',
14 | w: 'full',
15 | rounded: 'inherit',
16 | },
17 | scrollbar: {
18 | display: 'flex',
19 | touchAction: 'none',
20 | userSelect: 'none',
21 | transition: 'colors',
22 |
23 | '&[data-orientation=vertical]': {
24 | h: 'full',
25 | w: '2.5',
26 | borderLeft: 'base',
27 | borderLeftColor: 'transparent',
28 | p: '1px',
29 | },
30 |
31 | '&[data-orientation=horizontal]': {
32 | h: '2.5',
33 | w: 'full',
34 | borderTop: 'base',
35 | borderTopColor: 'transparent',
36 | p: '1px',
37 | },
38 | },
39 | thumb: {
40 | position: 'relative',
41 | flex: '1',
42 | rounded: 'full',
43 | bg: 'border',
44 | },
45 | },
46 | })
47 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/slider.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const slider = defineSlotRecipe({
4 | className: 'slider',
5 | description: 'Styles for the Slider component',
6 | slots: ['root', 'track', 'range', 'thumb'],
7 | base: {
8 | root: {
9 | position: 'relative',
10 | display: 'flex',
11 | w: 'full',
12 | touchAction: 'none',
13 | userSelect: 'none',
14 | alignItems: 'center',
15 | },
16 | track: {
17 | position: 'relative',
18 | h: '2',
19 | w: 'full',
20 | flexGrow: '1',
21 | overflow: 'hidden',
22 | rounded: 'full',
23 | bg: 'secondary',
24 | },
25 | range: {
26 | position: 'absolute',
27 | h: 'full',
28 | bg: 'primary',
29 | },
30 | thumb: {
31 | display: 'block',
32 | h: '5',
33 | w: '5',
34 | cursor: 'pointer',
35 | rounded: 'full',
36 | borderWidth: '2px',
37 | borderStyle: 'solid',
38 | borderColor: 'primary',
39 | bg: 'background',
40 | focusRingOffsetColor: 'background',
41 | transition: 'colors',
42 |
43 | _focusVisible: {
44 | outline: '2px solid transparent',
45 | outlineOffset: '2px',
46 | focusRingWidth: '2',
47 | focusRingColor: 'ring',
48 | focusRingOffsetWidth: '2',
49 | },
50 |
51 | _disabled: {
52 | pointerEvents: 'none',
53 | opacity: '0.5',
54 | },
55 | },
56 | },
57 | })
58 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/switch.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const switchRecipe = defineSlotRecipe({
4 | className: 'switchRecipe',
5 | description: 'Styles for the Switch component',
6 | slots: ['root', 'thumb'],
7 | base: {
8 | root: {
9 | display: 'inline-flex',
10 | h: '24px',
11 | w: '44px',
12 | flexShrink: 0,
13 | cursor: 'pointer',
14 | alignItems: 'center',
15 | rounded: 'full',
16 | border: '2px solid transparent',
17 | transition: 'colors',
18 |
19 | _focusVisible: {
20 | outline: '2px solid transparent',
21 | outlineOffset: '2px',
22 | focusRingWidth: '2',
23 | focusRingColor: 'ring',
24 | focusRingOffsetWidth: '2',
25 | },
26 |
27 | _disabled: {
28 | cursor: 'not-allowed',
29 | opacity: '0.5',
30 | },
31 |
32 | '&[data-state=checked]': {
33 | bg: 'primary',
34 | },
35 |
36 | '&[data-state=unchecked]': {
37 | bg: 'input',
38 | },
39 | },
40 | thumb: {
41 | pointerEvents: 'none',
42 | display: 'block',
43 | h: '5',
44 | w: '5',
45 | rounded: 'full',
46 | bg: 'background',
47 | shadow: 'lg',
48 | focusRingWidth: '0',
49 | transition: 'transform',
50 |
51 | '&[data-state=checked]': {
52 | translateX: '5',
53 | },
54 |
55 | '&[data-state=unchecked]': {
56 | translateX: '0',
57 | },
58 | },
59 | },
60 | })
61 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/tabs.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const tabs = defineSlotRecipe({
4 | className: 'tabs',
5 | description: 'Styles for the Tabs component',
6 | slots: ['root', 'list', 'trigger', 'content'],
7 | base: {
8 | list: {
9 | display: 'inline-flex',
10 | h: '10',
11 | alignItems: 'center',
12 | justifyContent: 'center',
13 | rounded: 'md',
14 | bg: 'muted',
15 | p: '1',
16 | color: 'muted.foreground',
17 | },
18 | trigger: {
19 | display: 'inline-flex',
20 | alignItems: 'center',
21 | justifyContent: 'center',
22 | whiteSpace: 'nowrap',
23 | rounded: 'sm',
24 | px: '3',
25 | py: '1.5',
26 | textStyle: 'sm',
27 | fontWeight: 'medium',
28 | transition: 'all',
29 | cursor: 'pointer',
30 | focusRingOffsetColor: 'background',
31 |
32 | _focusVisible: {
33 | outline: '2px solid transparent',
34 | outlineOffset: '2px',
35 | focusRingWidth: '2',
36 | focusRingColor: 'ring',
37 | focusRingOffsetWidth: '2',
38 | },
39 |
40 | _disabled: {
41 | pointerEvents: 'none',
42 | opacity: '50%',
43 | },
44 |
45 | '&[data-state=active]': {
46 | bg: 'background',
47 | color: 'foreground',
48 | shadow: 'sm',
49 | },
50 | },
51 | content: {
52 | mt: '2',
53 | focusRingOffsetColor: 'background',
54 |
55 | _focusVisible: {
56 | outline: '2px solid transparent',
57 | outlineOffset: '2px',
58 | focusRingWidth: '2',
59 | focusRingColor: 'ring',
60 | focusRingOffsetWidth: '2',
61 | },
62 | },
63 | },
64 | })
65 |
--------------------------------------------------------------------------------
/packages/preset/src/slot-recipes/tooltip.ts:
--------------------------------------------------------------------------------
1 | import { defineSlotRecipe } from '@pandacss/dev'
2 |
3 | export const tooltip = defineSlotRecipe({
4 | className: 'tooltip',
5 | description: 'Styles for the Tooltip component',
6 | slots: ['root', 'trigger', 'content'],
7 | base: {
8 | content: {
9 | zIndex: 50,
10 | overflow: 'hidden',
11 | rounded: 'md',
12 | border: 'base',
13 | bg: 'popover',
14 | px: '3',
15 | py: '1.5',
16 | textStyle: 'sm',
17 | color: 'popover.foreground',
18 | shadow: 'md',
19 | animateIn: true,
20 | fadeIn: 0,
21 | zoomIn: 95,
22 |
23 | '&[data-state=closed]': {
24 | animateOut: true,
25 | fadeOut: 0,
26 | zoomOut: 95,
27 | },
28 |
29 | '&[data-side=top]': {
30 | slideInFromBottom: '2',
31 | },
32 |
33 | '&[data-side=bottom]': {
34 | slideInFromTop: '2',
35 | },
36 |
37 | '&[data-side=left]': {
38 | slideInFromRight: '2',
39 | },
40 |
41 | '&[data-side=right]': {
42 | slideInFromLeft: '2',
43 | },
44 | },
45 | },
46 | })
47 |
--------------------------------------------------------------------------------
/packages/preset/src/text-styles.ts:
--------------------------------------------------------------------------------
1 | import type { TextStyles } from '@pandacss/types'
2 |
3 | const defineTextStyles = (config: T) => config
4 |
5 | export const textStyles = defineTextStyles({
6 | h1: {
7 | description: 'Heading 1',
8 | value: {
9 | fontSize: {
10 | base: '4xl',
11 | lg: '5xl',
12 | },
13 | leading: {
14 | base: '10',
15 | lg: 'none',
16 | },
17 | fontWeight: 'extrabold',
18 | tracking: 'tight',
19 | },
20 | },
21 | h2: {
22 | description: 'Heading 2',
23 | value: {
24 | fontSize: '3xl',
25 | leading: '9',
26 | fontWeight: 'semibold',
27 | tracking: 'tight',
28 | },
29 | },
30 | h3: {
31 | description: 'Heading 3',
32 | value: {
33 | fontSize: '2xl',
34 | leading: '8',
35 | fontWeight: 'semibold',
36 | tracking: 'tight',
37 | },
38 | },
39 | h4: {
40 | description: 'Heading 4',
41 | value: {
42 | fontSize: 'xl',
43 | leading: '7',
44 | fontWeight: 'semibold',
45 | tracking: 'tight',
46 | },
47 | },
48 | p: {
49 | description: 'Paragraph',
50 | value: {
51 | leading: '7',
52 | },
53 | },
54 | lead: {
55 | description: 'Lead paragraph',
56 | value: {
57 | fontSize: 'xl',
58 | leading: '7',
59 | },
60 | },
61 | large: {
62 | description: 'Large text',
63 | value: {
64 | fontSize: 'lg',
65 | fontWeight: 'semibold',
66 | leading: '7',
67 | },
68 | },
69 | small: {
70 | description: 'Small text',
71 | value: {
72 | fontSize: 'sm',
73 | fontWeight: 'medium',
74 | leading: 'none',
75 | },
76 | },
77 | })
78 |
--------------------------------------------------------------------------------
/packages/preset/src/tokens/colors.ts:
--------------------------------------------------------------------------------
1 | import { defineTokens } from '@pandacss/dev'
2 |
3 | export const colors = defineTokens.colors({
4 | // Map colors to grayscale palette
5 | grayscale: {
6 | 0: { value: '{colors.white}' },
7 | 50: { value: '{colors.zinc.50}' },
8 | 100: { value: '{colors.zinc.100}' },
9 | 200: { value: '{colors.zinc.200}' },
10 | 300: { value: '{colors.zinc.300}' },
11 | 400: { value: '{colors.zinc.400}' },
12 | 500: { value: '{colors.zinc.500}' },
13 | 600: { value: '{colors.zinc.600}' },
14 | 700: { value: '{colors.zinc.700}' },
15 | 800: { value: '{colors.zinc.800}' },
16 | 900: { value: '{colors.zinc.900}' },
17 | 950: { value: '{colors.zinc.950}' },
18 | },
19 | })
20 |
--------------------------------------------------------------------------------
/packages/preset/src/tokens/fonts.ts:
--------------------------------------------------------------------------------
1 | import { defineTokens } from '@pandacss/dev'
2 |
3 | export const fonts = defineTokens.fonts({
4 | sans: {
5 | value: [
6 | 'var(--font-inter, Inter)',
7 | 'ui-sans-serif',
8 | 'system-ui',
9 | '-apple-system',
10 | 'BlinkMacSystemFont',
11 | '"Segoe UI"',
12 | 'Roboto',
13 | '"Helvetica Neue"',
14 | 'Arial',
15 | '"Noto Sans"',
16 | 'sans-serif',
17 | '"Apple Color Emoji"',
18 | '"Segoe UI Emoji"',
19 | '"Segoe UI Symbol"',
20 | '"Noto Color Emoji"',
21 | ]
22 | // Panda merges array when extending theme, so we need to join it to convert it to a string
23 | .join(', '),
24 | },
25 | })
26 |
--------------------------------------------------------------------------------
/packages/preset/src/tokens/index.ts:
--------------------------------------------------------------------------------
1 | import { defineTokens } from '@pandacss/dev'
2 | import { colors } from './colors'
3 | import { fonts } from './fonts'
4 | import { lineHeights } from './line-heights'
5 | import { radii } from './radii'
6 |
7 | export const tokens = defineTokens({
8 | colors,
9 | fonts,
10 | lineHeights,
11 | radii,
12 | })
13 |
--------------------------------------------------------------------------------
/packages/preset/src/tokens/line-heights.ts:
--------------------------------------------------------------------------------
1 | import { defineTokens } from '@pandacss/dev'
2 |
3 | export const lineHeights = defineTokens.lineHeights({
4 | 3: { value: '.75rem' },
5 | 4: { value: '1rem' },
6 | 5: { value: '1.25rem' },
7 | 6: { value: '1.5rem' },
8 | 7: { value: '1.75rem' },
9 | 8: { value: '2rem' },
10 | 9: { value: '2.25rem' },
11 | 10: { value: '2.5rem' },
12 | none: { value: '1' },
13 | tight: { value: '1.25' },
14 | snug: { value: '1.375' },
15 | normal: { value: '1.5' },
16 | relaxed: { value: '1.625' },
17 | loose: { value: '2' },
18 | })
19 |
--------------------------------------------------------------------------------
/packages/preset/src/tokens/radii.ts:
--------------------------------------------------------------------------------
1 | import { defineTokens } from '@pandacss/dev'
2 |
3 | export const radii = defineTokens.radii({
4 | radius: { value: '0.5rem' },
5 | })
6 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/backdrop-filter.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 |
3 | const blurValues = {
4 | none: 'blur(0)',
5 | sm: 'blur(4px)',
6 | base: 'blur(8px)',
7 | md: 'blur(12px)',
8 | lg: 'blur(16px)',
9 | xl: 'blur(24px)',
10 | '2xl': 'blur(40px)',
11 | '3xl': 'blur(64px)',
12 | } as const
13 |
14 | export const backdropFilter: UtilityConfig = {
15 | backdropBlur: {
16 | property: 'backdropFilter',
17 | className: 'backdrop_blur',
18 | values: blurValues,
19 | transform: (value) => {
20 | return {
21 | backdropFilter: value,
22 | }
23 | },
24 | },
25 | }
26 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/background-alpha.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 | import { colorMix } from '@/lib/color-mix'
3 |
4 | export const backgroundAlpha: UtilityConfig = {
5 | backgroundAlpha: {
6 | shorthand: ['bga'],
7 | property: 'backgroundColor',
8 | className: 'background-alpha',
9 | values: { type: 'string' },
10 | transform: (...args) => {
11 | const { value, color } = colorMix(...args)
12 |
13 | return {
14 | '--sp-bga': value,
15 | backgroundColor: `var(--sp-bga, ${color})`,
16 | }
17 | },
18 | },
19 | // Used with `bgGradient`
20 | gradientFromAlpha: {
21 | className: 'from-alpha',
22 | values: { type: 'string' },
23 | transform: (...args) => {
24 | const { value } = colorMix(...args)
25 |
26 | return {
27 | '--gradient-from': value,
28 | }
29 | },
30 | },
31 | // Used with `bgGradient`
32 | gradientToAlpha: {
33 | className: 'to-alpha',
34 | values: { type: 'string' },
35 | transform: (...args) => {
36 | const { value } = colorMix(...args)
37 |
38 | return {
39 | '--gradient-to': value,
40 | }
41 | },
42 | },
43 | }
44 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/border-color-alpha.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 | import { colorMix } from '@/lib/color-mix'
3 |
4 | export const borderColorAlpha: UtilityConfig = {
5 | borderAlpha: {
6 | shorthand: ['bca'],
7 | property: 'borderColor',
8 | className: 'border_color_alpha',
9 | transform: (...args) => {
10 | const { value, color } = colorMix(...args)
11 |
12 | return {
13 | '--sp-bca': value,
14 | borderColor: `var(--sp-bca, ${color})`,
15 | }
16 | },
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/container.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 | import { breakpoints } from '../breakpoints'
3 |
4 | export const container: UtilityConfig = {
5 | container: {
6 | className: 'container',
7 | values: { type: 'boolean' },
8 | transform: (value: boolean) => {
9 | if (!value) return {}
10 |
11 | return {
12 | width: '100%',
13 |
14 | '@breakpoint sm': {
15 | maxWidth: breakpoints['sm'],
16 | },
17 |
18 | '@breakpoint md': {
19 | maxWidth: breakpoints['md'],
20 | },
21 |
22 | '@breakpoint lg': {
23 | maxWidth: breakpoints['lg'],
24 | },
25 |
26 | '@breakpoint xl': {
27 | maxWidth: breakpoints['xl'],
28 | },
29 |
30 | '@breakpoint 2xl': {
31 | maxWidth: breakpoints['2xl'],
32 | },
33 | }
34 | },
35 | },
36 | }
37 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/index.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from '@pandacss/types'
2 | import { animate } from './animate'
3 | import { backdropFilter } from './backdrop-filter'
4 | import { backgroundAlpha } from './background-alpha'
5 | import { borderColorAlpha } from './border-color-alpha'
6 | import { container } from './container'
7 | import { focusRing } from './focus-ring'
8 | import { space } from './space'
9 | import { textAlpha } from './text-alpha'
10 | import { transform } from './transform'
11 | import { typography } from './typography'
12 |
13 | export const utilities: Config['utilities'] = {
14 | extend: {
15 | ...animate,
16 | ...backdropFilter,
17 | ...backgroundAlpha,
18 | ...borderColorAlpha,
19 | ...container,
20 | ...focusRing,
21 | ...space,
22 | ...transform,
23 | ...textAlpha,
24 | ...typography,
25 | },
26 | }
27 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/space.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 |
3 | export const space: UtilityConfig = {
4 | spaceY: {
5 | className: 'space_y',
6 | values: 'spacing',
7 | transform: (value: string) => {
8 | return {
9 | '& > * + *': {
10 | marginTop: value,
11 | },
12 | }
13 | },
14 | },
15 | spaceX: {
16 | className: 'space_x',
17 | values: 'spacing',
18 | transform: (value: string) => {
19 | return {
20 | '& > * + *': {
21 | marginLeft: value,
22 | },
23 | }
24 | },
25 | },
26 | }
27 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/text-alpha.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 | import { colorMix } from '@/lib/color-mix'
3 |
4 | export const textAlpha: UtilityConfig = {
5 | textAlpha: {
6 | shorthand: ['ca'],
7 | property: 'color',
8 | className: 'text_alpha',
9 | transform: (...args) => {
10 | const { value, color } = colorMix(...args)
11 |
12 | return {
13 | '--sp-ca': value,
14 | color: `var(--sp-ca, ${color})`,
15 | }
16 | },
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/transform.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 |
3 | const baseTransform = {
4 | transform:
5 | 'translate(var(--shadow-panda-translate-x, 0), var(--shadow-panda-translate-y, 0)) rotate(var(--shadow-panda-rotate, 0)) skewX(var(--shadow-panda-skew-x, 0)) skewY(var(--shadow-panda-skew-y, 0)) scaleX(var(--shadow-panda-scale-x, 1)) scaleY(var(--shadow-panda-scale-y, 1))',
6 | }
7 |
8 | export const transform: UtilityConfig = {
9 | translate: {
10 | className: 'translate',
11 | values: 'spacing',
12 | transform: (value: string) => {
13 | return {
14 | ...baseTransform,
15 | '--shadow-panda-translate-x': value,
16 | '--shadow-panda-translate-y': value,
17 | }
18 | },
19 | },
20 | translateY: {
21 | className: 'translate_y',
22 | values: 'spacing',
23 | transform: (value: string) => {
24 | return {
25 | ...baseTransform,
26 | '--shadow-panda-translate-y': value,
27 | }
28 | },
29 | },
30 | translateX: {
31 | className: 'translate_x',
32 | values: 'spacing',
33 | transform: (value: string) => {
34 | return {
35 | ...baseTransform,
36 | '--shadow-panda-translate-x': value,
37 | }
38 | },
39 | },
40 | }
41 |
--------------------------------------------------------------------------------
/packages/preset/src/utilities/typography.ts:
--------------------------------------------------------------------------------
1 | import type { UtilityConfig } from '@pandacss/types'
2 |
3 | export const typography: UtilityConfig = {
4 | lineHeight: {
5 | className: 'leading',
6 | shorthand: 'leading',
7 | values: 'lineHeights',
8 | },
9 | letterSpacing: {
10 | className: 'tracking',
11 | shorthand: 'tracking',
12 | values: 'letterSpacings',
13 | },
14 | }
15 |
--------------------------------------------------------------------------------
/packages/preset/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src", "index.ts"],
4 | "compilerOptions": {
5 | "paths": {
6 | "@/*": ["./src/*"]
7 | },
8 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/style-context/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 |
--------------------------------------------------------------------------------
/packages/style-context/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @shadow-panda/style-context
2 |
3 | ## 0.7.1
4 |
5 | ### Patch Changes
6 |
7 | - 2ff1412: Updated PandaCSS
8 | - 2d9db30: Fix dependencies
9 |
10 | ## 0.7.0
11 |
12 | ### Minor Changes
13 |
14 | - 72d0a05: Updated dependencies
15 |
16 | ## 0.6.0
17 |
18 | ## 0.5.0
19 |
20 | ## 0.4.0
21 |
22 | ## 0.3.0
23 |
24 | ### Minor Changes
25 |
26 | - ffdd964: Improve className merging
27 |
28 | ## 0.2.0
29 |
30 | ### Minor Changes
31 |
32 | - b5009c9: Initial release
33 |
--------------------------------------------------------------------------------
/packages/style-context/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shadow-panda/style-context",
3 | "description": "Shared style context for slot recipes in ShadowPanda",
4 | "version": "0.7.1",
5 | "main": "dist/index.js",
6 | "module": "dist/index.mjs",
7 | "types": "dist/index.d.ts",
8 | "homepage": "https://shadow-panda.dev",
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/kumaaa-inc/shadow-panda.git"
12 | },
13 | "bugs": {
14 | "url": "https://github.com/kumaaa-inc/shadow-panda/issues"
15 | },
16 | "files": [
17 | "dist"
18 | ],
19 | "publishConfig": {
20 | "access": "public"
21 | },
22 | "sideEffects": false,
23 | "license": "MIT",
24 | "scripts": {
25 | "build": "tsup src/index.ts --format=esm,cjs --dts --external react",
26 | "build-fast": "tsup src/index.ts --format=esm,cjs --no-dts --external react",
27 | "dev": "pnpm build-fast --watch",
28 | "typecheck": "tsc --noEmit"
29 | },
30 | "devDependencies": {
31 | "@types/react": "18.2.34",
32 | "@types/react-dom": "18.2.14"
33 | },
34 | "peerDependencies": {
35 | "@types/react": "^18.2",
36 | "@types/react-dom": "^18.2",
37 | "react": "^16.8 || ^17.0 || ^18.0",
38 | "react-dom": "^16.8 || ^17.0 || ^18.0"
39 | },
40 | "peerDependenciesMeta": {
41 | "@types/react": {
42 | "optional": true
43 | },
44 | "@types/react-dom": {
45 | "optional": true
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/packages/style-context/src/index.ts:
--------------------------------------------------------------------------------
1 | export { createStyleContext } from './style-context'
2 |
--------------------------------------------------------------------------------
/packages/style-context/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src", "index.ts"],
4 | "compilerOptions": {
5 | "paths": {
6 | "@/*": ["./src/*"]
7 | },
8 | "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": false,
4 | "allowSyntheticDefaultImports": true,
5 | "declaration": true,
6 | "downlevelIteration": true,
7 | "esModuleInterop": true,
8 | "jsx": "preserve",
9 | "incremental": true,
10 | "noEmit": true,
11 | "lib": ["dom", "dom.iterable", "esnext"],
12 | "target": "esnext",
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "noImplicitReturns": false,
16 | "resolveJsonModule": true,
17 | "skipLibCheck": true,
18 | "strict": true,
19 | "verbatimModuleSyntax": true
20 | },
21 | "include": ["packages"],
22 | "exclude": ["node_modules"]
23 | }
24 |
--------------------------------------------------------------------------------