console.log(value)}
35 | />
36 | )
37 | }
38 | ```
39 |
40 | ### Props
41 |
42 | | Name | Type | Default | Description |
43 | | :------------ | :----------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------- |
44 | | defaultValue | `string` | `''` | Default selected value. Use for uncontrolled operation. |
45 | | items | `Array<{ label: string, value: string, disabled: boolean }>` | [] | Array of items to display in the select |
46 | | name | `string` | `''` | Name of the select component |
47 | | onValueChange | `(item: { label: string, value: string }) => void` | - | Callback when the value changes |
48 | | value | `string` | `''` | Currently selected value. Use for controlled operation along with `onValueChange`. |
49 |
--------------------------------------------------------------------------------
/docs/pages/docs/separator.mdx:
--------------------------------------------------------------------------------
1 | import { Separator } from '@i4o/catalystui'
2 | import DemoCard from '../../components/demo-card'
3 |
4 | # Separator
5 |
6 |
7 |
8 |
Catalyst UI
9 |
10 | React component library built with Radix Primitives and Tailwind CSS
11 |
12 |
13 |
18 |
20 |
21 | ### Example
22 |
23 | ```tsx
24 | import { Separator } from '@i4o/catalystui'
25 |
26 | export default () => {
27 | return (
28 |
29 |
Catalyst UI
30 |
31 | React component library built with Radix Primitives and Tailwind
32 | CSS
33 |
34 |
35 |
40 |
7 |
16 |
17 | ### Example
18 |
19 | ```tsx
20 | import { Slider } from '@i4o/catalystui'
21 |
22 | export default () => {
23 | return (
24 |
7 |
9 |
10 | ### Example
11 |
12 | ```tsx
13 | import { Switch } from '@i4o/catalystui'
14 |
15 | export default () => {
16 | return
7 |
8 |
9 |
Tab 1 Content,
15 | },
16 | {
17 | id: '2',
18 | title: 'Tab 2',
19 | content: Tab 2 Content
,
20 | },
21 | {
22 | id: '3',
23 | title: 'Tab 3',
24 | content: Tab 3 Content
,
25 | },
26 | ]}
27 | />
28 |
29 |
Tab 1 Content,
35 | },
36 | {
37 | id: '2',
38 | title: 'Tab 2',
39 | content: Tab 2 Content
,
40 | },
41 | {
42 | id: '3',
43 | title: 'Tab 3',
44 | content: Tab 3 Content
,
45 | },
46 | ]}
47 | />
48 |
51 |
52 |
53 | ### Example
54 |
55 | ```tsx
56 | import { Tabs } from '@i4o/catalystui'
57 |
58 | export default () => {
59 | const tabs = [
60 | {
61 | id: '1',
62 | title: 'Tab 1',
63 | content: Tab 1 Content
,
64 | },
65 | {
66 | id: '2',
67 | title: 'Tab 2',
68 | content: Tab 2 Content
,
69 | },
70 | {
71 | id: '3',
72 | title: 'Tab 3',
73 | content: Tab 3 Content
,
74 | },
75 | ]
76 |
77 | return (
78 |
79 |
85 |
86 | )
87 | }
88 | ```
89 |
90 | ### Props
91 |
92 | | Name | Type | Default | Description |
93 | | :----------- | :-------------------------------------------------------------------------------- | :------ | :-------------------------------------- |
94 | | defaultValue | `string` | `''` | Id of the tab to be selected by default |
95 | | tabs | `Array<{ id: string, title: string \| ReactNode, content: string \| ReactNode }>` | [] | Array of tabs to render |
96 | | type | `row \| column` | `row` | Layout of the tabs list and content |
97 |
--------------------------------------------------------------------------------
/docs/pages/docs/toast.mdx:
--------------------------------------------------------------------------------
1 | import { Toast } from '@i4o/catalystui'
2 | import DemoCard from '../../components/demo-card'
3 |
4 | # Toast
5 |
6 |
7 |
16 |
17 | ### Example
18 |
19 | ```tsx
20 | import { Toast } from '@i4o/catalystui'
21 |
22 | export default () => {
23 | return (
24 |
15 |
58 |
59 | ### Example
60 |
61 | ```tsx
62 | import { ToggleGroup } from '@i4o/catalystui'
63 | import {
64 | FontBoldIcon,
65 | FontItalicIcon,
66 | UnderlineIcon,
67 | TextAlignLeftIcon,
68 | TextAlignCenterIcon,
69 | TextAlignRightIcon,
70 | } from '@radix-ui/react-icons'
71 |
72 | export default function ToggleGroupExample() {
73 | return (
74 |
75 |
116 | )
117 | }
118 | ```
119 |
120 | ### Props
121 |
122 | | Name | Type | Default | Description |
123 | | :---- | :---------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------- |
124 | | items | `Array<{ value: string, label: string, icon: ReactNode }>` | [] | Array of items to render |
125 | | type | 'single' \| 'multiple' | 'single' | Type of toggle group. Single allows only one button to be toggled in a group. Multiple allows multiple toggles in the group. |
126 |
127 | // TODO: Update docs
128 |
--------------------------------------------------------------------------------
/docs/pages/docs/toggle.mdx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { Toggle } from '@i4o/catalystui'
3 | import DemoCard from '../../components/demo-card'
4 |
5 | # Toggle
6 |
7 | export function ToggleDemo() {
8 | const [pressed, setPressed] = useState(false)
9 |
10 | return (
11 |
12 |
13 | {pressed ? 'Starred' : 'Star'}
14 |
15 |
16 | )
17 |
18 | }
19 |
20 |
32 | {pressed ? 'Starred' : 'Star'}
33 |
34 | )
35 | }
36 | ```
37 |
38 | ### Props
39 |
40 | | Name | Type | Default | Description |
41 | | :-------------- | :--------------------------- | :------ | :------------------------------------------------------------------------------ |
42 | | ariaLabel | `string` | `''` | `aria-label` for the Toggle component |
43 | | defaultPressed | `boolean` | `false` | If the Toggle should be active by default. Use for uncontrolled operation. |
44 | | pressed | `boolean` | `-` | Pressed state of the Toggle. Use for controlled operation with onPressedChange. |
45 | | onPressedChange | `(pressed: boolean) => void` | `-` | Event handler called when the pressed state of the Toggle changes. |
46 |
--------------------------------------------------------------------------------
/docs/pages/docs/toolbar.mdx:
--------------------------------------------------------------------------------
1 | import { Toolbar } from '@i4o/catalystui'
2 | import {
3 | FontBoldIcon,
4 | FontItalicIcon,
5 | UnderlineIcon,
6 | TextAlignLeftIcon,
7 | TextAlignCenterIcon,
8 | TextAlignRightIcon,
9 | } from '@radix-ui/react-icons'
10 | import DemoCard from '../../components/demo-card.tsx'
11 |
12 | # Toolbar
13 |
14 |
15 | Edited 2 hours ago
,
70 | },
71 | ]}
72 | />
73 |
74 |
75 | ### Example
76 |
77 | ```tsx
78 | import { Toolbar } from '@i4o/catalystui'
79 | import {
80 | FontBoldIcon,
81 | FontItalicIcon,
82 | UnderlineIcon,
83 | TextAlignLeftIcon,
84 | TextAlignCenterIcon,
85 | TextAlignRightIcon,
86 | } from '@radix-ui/react-icons'
87 |
88 | export default () => {
89 | return (
90 |
7 |
8 | Hover me
9 |
10 |
11 |
12 | ### Example
13 |
14 | ```tsx
15 | import { Button, Tooltip } from '@i4o/catalystui'
16 |
17 | export default () => (
18 |
19 | Hover me
20 |
21 | )
22 | ```
23 |
24 | ### Props
25 |
26 | | Name | Type | Default | Description |
27 | | :------- | :------------------------------- | :------- | :------------------------------------------ |
28 | | content | `ReactNode \| string` | - | The content of the tooltip |
29 | | side | `top \| right \| bottom \| left` | 'top' | The placement of the tooltip |
30 | | align | `start \| center \| end` | 'center' | Alignment of the content inside the tooltip |
31 | | children | `ReactNode` | - | The element to be wrapped by the tooltip |
32 |
--------------------------------------------------------------------------------
/docs/pages/index.mdx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import { Button, CopyToClipboard } from '@i4o/catalystui'
3 | import Link from 'next/link'
4 |
5 |
17 |
18 | {
19 |
20 |
21 | Catalyst UI is a component library built on top of Radix UI Primitives,
22 | styled with Tailwind CSS to make prototyping faster.
23 |
24 |
25 | }
26 |
27 | {
28 |
29 |
30 | It also comes with more than just the styled Radix UI Primitives. It builds
31 | on top of them to provide you with more components and utilities to use in
32 | your apps.
33 |
34 | }
35 |
36 |
37 |
38 |
39 | Documentation
40 |
41 |
42 |
43 |
44 | npm install @i4o/catalystui
45 |
47 |
48 |
Get Started
51 |
52 | {Example Usage
}
53 |
54 | ```tsx
55 | import { Button } from '@i4o/catalystui'
56 |
57 | export default function Home() {
58 | return (
59 |
60 | Click Me
61 |
62 | )
63 | }
64 | ```
65 |
66 | Features
67 |
68 | - Built on top of [Radix UI Primitives](https://www.radix-ui.com/) styled with [Tailwind CSS](https://tailwindcss.com/)
69 | - Additional utility components and hooks
70 | - Built-in dark mode support
71 | - Icons from [Radix UI Icons](https://icons.radix-ui.com/)
72 | - TypeScript support
73 |
74 | Roadmap
75 |
76 | - [x] Have a base list of usable components
77 | - [x] Fix library styles being overridden by nextra styles
78 | - [ ] Make the API and styles more consistent
79 | - [ ] Make docs light/dark mode work for the components
80 | - [ ] Implement all Radix UI Primitives
81 | - [ ] Fix accessibility issues
82 | - [ ] Add explanation for props in the docs
83 |
--------------------------------------------------------------------------------
/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/docs/public/assets/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/android-chrome-192x192.png
--------------------------------------------------------------------------------
/docs/public/assets/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/android-chrome-512x512.png
--------------------------------------------------------------------------------
/docs/public/assets/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/apple-touch-icon.png
--------------------------------------------------------------------------------
/docs/public/assets/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | #da532c
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/docs/public/assets/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/favicon-16x16.png
--------------------------------------------------------------------------------
/docs/public/assets/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/favicon-32x32.png
--------------------------------------------------------------------------------
/docs/public/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/favicon.ico
--------------------------------------------------------------------------------
/docs/public/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/logo.png
--------------------------------------------------------------------------------
/docs/public/assets/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/assets/mstile-150x150.png
--------------------------------------------------------------------------------
/docs/public/assets/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 |
8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
9 |
10 |
12 |
62 |
63 |
--------------------------------------------------------------------------------
/docs/public/assets/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "short_name": "",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/i4o-oss/catalystui/581952069a769d8bb1542f07cb27ee4a3c4d012e/docs/public/favicon.ico
--------------------------------------------------------------------------------
/docs/public/next.svg:
--------------------------------------------------------------------------------
1 |
15 | Catalyst UI
23 |
24 | ),
25 | project: {
26 | link: 'https://github.com/i4o-oss/catalystui',
27 | newWindow: true,
28 | },
29 | head: ({ title }) => {
30 | return (
31 | <>
32 |
58 | {title
59 | ? `${title} - Catalyst UI`
60 | : 'Styled Radix UI components and utilities — Catalyst UI'}
61 |
62 |
63 | )
64 | },
65 | gitTimestamp: null,
66 | sidebar: {
67 | titleComponent({ title }) {
68 | if (newItems.includes(title)) {
69 | return (
70 |
71 | {title}
72 |
73 | New
74 |
75 |
76 | )
77 | }
78 |
79 | return title
80 | },
81 | },
82 | // footer: {
83 | // component: (
84 | //
85 | //
86 | //
87 | //
98 | //
109 | //
110 | // Built by{' '}
111 | //
117 | // i4o
118 | //
119 | // .
120 | //
121 | //
122 | //
135 | //
136 | //
= ({
31 | collapsible = true,
32 | defaultValue,
33 | items,
34 | type = 'single',
35 | }) => {
36 | return (
37 | // @ts-ignore
38 |
48 | {items.map((item, index) => {
49 | return (
50 |
55 |
56 |
73 |
74 | {item.title}
75 |
76 |
83 |
93 |
94 | {item.content}
95 |
96 |
97 |
98 |
99 | )
100 | })}
101 |
102 | )
103 | }
104 |
105 | export default Accordion
106 |
--------------------------------------------------------------------------------
/packages/ui/src/components/alert.tsx:
--------------------------------------------------------------------------------
1 | import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
2 | import * as AlertPrimitive from '@radix-ui/react-alert-dialog'
3 | import clsx from 'clsx'
4 |
5 | type AlertProps = {
6 | title?: ReactNode | string
7 | description?: ReactNode | string
8 | cancel: ReactNode
9 | action: ReactNode
10 | trigger?: ReactNode
11 | open?: boolean
12 | onOpenChange?: Dispatch>
13 | }
14 |
15 | const Alert: FC = ({
16 | title = '',
17 | description = '',
18 | cancel,
19 | action,
20 | trigger = null,
21 | open,
22 | onOpenChange,
23 | }) => {
24 | return (
25 |
26 | {trigger ? (
27 |
28 | {trigger}
29 |
30 | ) : null}
31 |
32 |
45 | {title && (
46 |
47 | {title}
48 |
49 | )}
50 | {description && (
51 |
52 | {description}
53 |
54 | )}
55 |
56 |
{cancel}
57 |
{action}
58 |
60 |
61 |
62 | )
63 | }
64 |
65 | export default Alert
66 |
--------------------------------------------------------------------------------
/packages/ui/src/components/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import { FC, Fragment } from 'react'
2 | import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
3 | import clsx from 'clsx'
4 |
5 | interface AspectRatioProps {
6 | alt: string
7 | ratio: number
8 | src: string
9 | }
10 |
11 | const AspectRatio: FC = ({ alt, ratio, src }) => {
12 | return (
13 |
14 |
18 |
24 |
30 |
32 |
33 | )
34 | }
35 |
36 | export default AspectRatio
37 |
--------------------------------------------------------------------------------
/packages/ui/src/components/avatar.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as AvatarPrimitive from '@radix-ui/react-avatar'
3 | import clsx from 'clsx'
4 |
5 | interface AvatarProps {
6 | alt?: string
7 | fallback?: ReactNode | string
8 | size: 'small' | 'base' | 'large'
9 | src?: string
10 | variant?: 'circle' | 'rounded'
11 | }
12 |
13 | const Avatar: FC = ({
14 | alt,
15 | fallback,
16 | size = 'base',
17 | src,
18 | variant,
19 | }) => {
20 | return (
21 |
33 |
56 |
57 | {fallback}
58 |
59 |
60 |
61 | )
62 | }
63 |
64 | export default Avatar
65 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/button.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import type { ButtonProps } from './types'
4 | import Tooltip from '../tooltip'
5 |
6 | // TODO: Remove important ! modifier here when switching to Rescribe
7 | const Button = React.forwardRef(
8 | (
9 | {
10 | ariaLabel = '',
11 | children,
12 | className,
13 | disabled,
14 | leftIcon,
15 | loading,
16 | loadingText,
17 | onClick,
18 | onMouseDown,
19 | rightIcon,
20 | textSize = 'cui-text-sm',
21 | tooltip = '',
22 | type = 'button',
23 | ...props
24 | },
25 | ref
26 | ) => {
27 | const button = (
28 |
48 | {leftIcon}
49 | {loading && (
50 |
56 |
70 | )}
71 |
72 | {loading ? loadingText : children}
73 |
74 | {rightIcon}
75 |
76 | )
77 |
78 | if (tooltip) {
79 | return {button}
80 | }
81 |
82 | return button
83 | }
84 | )
85 |
86 | Button.displayName = 'Button'
87 | export default Button
88 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/danger.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import type { ButtonProps } from './types'
3 | import Tooltip from '../tooltip'
4 | import clsx from 'clsx'
5 |
6 | // TODO: Remove important ! modifier here when switching to Rescribe
7 | const DangerButton = React.forwardRef(
8 | (
9 | {
10 | ariaLabel = '',
11 | children,
12 | className,
13 | disabled,
14 | leftIcon,
15 | loading,
16 | loadingText,
17 | onClick,
18 | onMouseDown,
19 | rightIcon,
20 | shadow = '',
21 | textSize = 'cui-text-sm',
22 | tooltip = '',
23 | type = 'button',
24 | ...props
25 | },
26 | ref
27 | ) => {
28 | const button = (
29 |
49 | {leftIcon}
50 | {loading && (
51 |
57 |
71 | )}
72 |
73 | {loading ? loadingText : children}
74 |
75 | {rightIcon}
76 |
77 | )
78 |
79 | if (tooltip) {
80 | return {button}
81 | }
82 |
83 | return button
84 | }
85 | )
86 |
87 | export default DangerButton
88 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/icon-button.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import type { ReactNode } from 'react'
3 | import type { ButtonProps } from './types'
4 | import Tooltip from '../tooltip'
5 | import clsx from 'clsx'
6 |
7 | interface IconButtonProps extends ButtonProps {
8 | icon: ReactNode
9 | }
10 |
11 | const IconButton = React.forwardRef(
12 | (
13 | {
14 | ariaLabel = '',
15 | bg = 'cui-bg-transparent',
16 | className,
17 | disabled,
18 | icon,
19 | onClick,
20 | onMouseDown,
21 | tooltip = '',
22 | type = 'button',
23 | ...props
24 | },
25 | ref
26 | ) => {
27 | const button = (
28 |
46 | {icon}
47 |
48 | )
49 |
50 | if (tooltip) {
51 | return {button}
52 | }
53 |
54 | return button
55 | }
56 | )
57 |
58 | export default IconButton
59 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Button } from './button'
2 | export { default as DangerButton } from './danger'
3 | export { default as PrimaryButton } from './primary'
4 | export { default as IconButton } from './icon-button'
5 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/primary.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import clsx from 'clsx'
3 | import type { ButtonProps } from './types'
4 | import Tooltip from '../tooltip'
5 |
6 | // TODO: Remove important ! modifier here when switching to Rescribe
7 | const PrimaryButton = React.forwardRef(
8 | (
9 | {
10 | ariaLabel = '',
11 | children,
12 | className,
13 | disabled,
14 | leftIcon,
15 | loading,
16 | loadingText,
17 | onClick,
18 | onMouseDown,
19 | rightIcon,
20 | textSize = 'cui-text-sm',
21 | tooltip = '',
22 | type = 'button',
23 | ...props
24 | },
25 | ref
26 | ) => {
27 | const button = (
28 |
48 | {leftIcon}
49 | {loading && (
50 |
56 |
70 | )}
71 |
72 | {loading ? loadingText : children}
73 |
74 | {rightIcon}
75 |
76 | )
77 |
78 | if (tooltip) {
79 | return {button}
80 | }
81 |
82 | return button
83 | }
84 | )
85 |
86 | export default PrimaryButton
87 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/shared/button.tsx:
--------------------------------------------------------------------------------
1 | import type { ButtonProps } from '../types'
2 | import clsx from 'clsx'
3 | import React from 'react'
4 |
5 | const Button = React.forwardRef(
6 | ({ children, ...props }, ref) => {
7 | return (
8 |
26 | {props.leftIcon}
27 | {props.loading && (
28 |
34 |
48 | )}
49 | {props.loading ? props.loadingText : children}
50 | {props.rightIcon}
51 |
52 | )
53 | }
54 | )
55 |
56 | Button.displayName = 'Button'
57 | export default Button
58 |
--------------------------------------------------------------------------------
/packages/ui/src/components/buttons/types.ts:
--------------------------------------------------------------------------------
1 | import type { MouseEventHandler, ReactNode } from 'react'
2 |
3 | export enum ButtonSize {
4 | LG,
5 | MD,
6 | sm,
7 | XS,
8 | }
9 |
10 | export interface ButtonProps {
11 | ariaLabel?: string
12 | bg?: string
13 | borderRadius?: string
14 | children?: ReactNode | string
15 | className?: string
16 | disabled?: boolean
17 | loading?: boolean
18 | loadingText?: string
19 | onClick?: MouseEventHandler
20 | onMouseDown?: MouseEventHandler
21 | padding?: string
22 | leftIcon?: ReactNode
23 | rightIcon?: ReactNode
24 | shadow?: string
25 | size?: ButtonSize
26 | textColor?: string
27 | textSize?: string
28 | tooltip?: string
29 | type?: 'button' | 'submit' | 'reset'
30 | }
31 |
--------------------------------------------------------------------------------
/packages/ui/src/components/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
3 | import { CheckIcon } from '@radix-ui/react-icons'
4 | import * as LabelPrimitive from '@radix-ui/react-label'
5 | import clsx from 'clsx'
6 |
7 | const CheckboxRoot = CheckboxPrimitive.Root
8 | const CheckboxIndicator = CheckboxPrimitive.Indicator
9 | const Label = LabelPrimitive.Label
10 |
11 | interface Props {
12 | checked?: boolean
13 | defaultChecked?: boolean
14 | disabled?: boolean
15 | label: string | ReactNode
16 | name: string
17 | onCheckedChange?: (checked: boolean) => void
18 | required?: boolean
19 | }
20 |
21 | const Checkbox: FC = ({
22 | checked,
23 | defaultChecked = false,
24 | disabled = false,
25 | label,
26 | name,
27 | onCheckedChange,
28 | required = false,
29 | }) => {
30 | return (
31 |
32 |
47 |
48 |
59 |
60 |
61 |
65 | {label}
66 |
67 |
68 | )
69 | }
70 |
71 | export default Checkbox
72 |
--------------------------------------------------------------------------------
/packages/ui/src/components/collapsible.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import { useState } from 'react'
3 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
4 | import { Cross2Icon, RowSpacingIcon } from '@radix-ui/react-icons'
5 | import clsx from 'clsx'
6 | import { IconButton } from './buttons'
7 |
8 | type CollapsedItem = ReactNode | string
9 |
10 | interface CollapsibeProps {
11 | first: ReactNode | string
12 | items?: CollapsedItem[]
13 | title: ReactNode | string
14 | trigger: ReactNode | string
15 | }
16 |
17 | const Collapsibe: FC = ({ first, items, title, trigger }) => {
18 | const [open, setOpen] = useState(false)
19 | return (
20 |
25 |
26 |
27 | {title}
28 |
29 |
30 | {typeof trigger !== 'string' ? (
31 | trigger
32 | ) : (
33 |
42 |
43 |
44 |
45 | {first}
46 |
47 |
48 |
49 | {items?.map((item, index) => (
50 |
54 | {item}
55 |
56 | ))}
57 |
58 |
59 | )
60 | }
61 |
62 | export default Collapsibe
63 |
--------------------------------------------------------------------------------
/packages/ui/src/components/copy-to-clipboard.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 | import copy from 'copy-to-clipboard'
3 | import { CopyIcon } from '@radix-ui/react-icons'
4 | import { IconButton } from './buttons'
5 | import Tooltip from './tooltip'
6 |
7 | interface Props {
8 | text: string
9 | }
10 |
11 | const CopyToClipboard: FC = ({ text }) => {
12 | return (
13 |
14 |
17 | copy(text, {
18 | format: 'text/plain',
19 | })
20 | }
21 | icon={
25 | )
26 | }
27 |
28 | export default CopyToClipboard
29 |
--------------------------------------------------------------------------------
/packages/ui/src/components/date-picker.tsx:
--------------------------------------------------------------------------------
1 | import * as PopoverPrimitive from '@radix-ui/react-popover'
2 | import Calendar from '../internal/calendar'
3 | import { Dispatch, ReactNode, SetStateAction, useState } from 'react'
4 | import clsx from 'clsx'
5 |
6 | interface DatePickerProps {
7 | onDateChange?: Dispatch>
8 | trigger: ReactNode
9 | }
10 |
11 | export default function DatePicker({ onDateChange, trigger }: DatePickerProps) {
12 | const [date, setDate] = useState(new Date())
13 |
14 | const dateChangeHandler = (day: Date | undefined) => {
15 | onDateChange?.(day)
16 | setDate(day)
17 | }
18 |
19 | return (
20 |
21 |
22 |
23 | {trigger}
24 |
25 |
26 |
34 |
40 |
41 |
42 |
>
15 | }
16 |
17 | const Dialog: FC = ({
18 | action,
19 | cancel,
20 | children,
21 | description,
22 | title,
23 | trigger = null,
24 | open,
25 | onOpenChange,
26 | }) => {
27 | return (
28 |
29 | {trigger ? (
30 |
31 | {trigger}
32 |
33 | ) : null}
34 |
35 |
48 | {title ? (
49 |
50 | {title}
51 |
52 | ) : null}
53 | {description ? (
54 |
55 | {description}
56 |
57 | ) : null}
58 |
59 | {children}
60 |
61 | {action || cancel ? (
62 |
63 | {cancel && (
64 |
65 | {cancel}
66 |
67 | )}
68 | {action && (
69 |
70 | {action}
71 |
72 | )}
73 |
74 | ) : null}
75 |
76 |
82 |
84 |
85 |
86 |
87 | )
88 | }
89 |
90 | export default Dialog
91 |
--------------------------------------------------------------------------------
/packages/ui/src/components/hover-card.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
3 | import clsx from 'clsx'
4 | import { Button } from './buttons'
5 |
6 | interface HoverCardProps {
7 | children: ReactNode
8 | defaultOpen?: boolean
9 | open?: boolean
10 | onOpenChange?: (open: boolean) => void
11 | trigger: ReactNode | string
12 | }
13 |
14 | const HoverCard: FC = ({
15 | children,
16 | defaultOpen,
17 | open,
18 | onOpenChange,
19 | trigger,
20 | }) => {
21 | return (
22 |
27 |
28 | {typeof trigger !== 'string' ? (
29 | trigger
30 | ) : (
31 | {trigger}
32 | )}
33 |
34 |
45 |
48 |
49 | )
50 | }
51 |
52 | export default HoverCard
53 |
--------------------------------------------------------------------------------
/packages/ui/src/components/label.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 | import * as LabelPrimitive from '@radix-ui/react-label'
3 |
4 | interface LabelProps {
5 | htmlFor: string
6 | label: string
7 | }
8 |
9 | const Label: FC = ({ htmlFor, label }) => {
10 | return (
11 |
15 | {label}
16 |
17 | )
18 | }
19 |
20 | export default Label
21 |
--------------------------------------------------------------------------------
/packages/ui/src/components/nav.tsx:
--------------------------------------------------------------------------------
1 | import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
2 | import clsx from 'clsx'
3 | import type { FC, ReactNode } from 'react'
4 | import { useEffect, useState } from 'react'
5 |
6 | interface NavItem {
7 | content?: string | ReactNode
8 | href?: string
9 | label: string | ReactNode
10 | id: string
11 | }
12 |
13 | interface Props {
14 | items: NavItem[]
15 | type?: 'row' | 'column'
16 | Link?: React.ElementType
17 | }
18 |
19 | const Nav: FC = ({ items, type = 'row', Link }) => {
20 | const [pathname, setPathname] = useState('')
21 |
22 | useEffect(() => {
23 | setPathname(window?.location?.pathname)
24 | }, [])
25 |
26 | return (
27 |
28 |
35 | {items.map(({ content, href, label, id }) => {
36 | if (content) {
37 | return (
38 |
41 |
50 | {label}
51 |
52 |
62 | {content}
63 |
64 |
65 | )
66 | }
67 |
68 | return (
69 |
73 | {Link ? (
74 |
103 | {label}
104 |
105 | )}
106 |
107 | )
108 | })}
109 |
110 |
119 |
120 |
121 |
122 |
123 |
132 |
143 |
144 | )
145 | }
146 |
147 | export default Nav
148 |
--------------------------------------------------------------------------------
/packages/ui/src/components/popover.tsx:
--------------------------------------------------------------------------------
1 | import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
2 | import * as PopoverPrimitive from '@radix-ui/react-popover'
3 | import clsx from 'clsx'
4 | import { Cross1Icon } from '@radix-ui/react-icons'
5 |
6 | interface PopoverProps {
7 | align?: 'start' | 'end' | 'center'
8 | close?: boolean
9 | children: string | ReactNode
10 | side?: 'top' | 'right' | 'bottom' | 'left'
11 | sideOffset?: number
12 | title?: string | ReactNode
13 | trigger: ReactNode
14 | open?: boolean
15 | onOpenChange?: Dispatch>
16 | }
17 |
18 | const Popover: FC = ({
19 | align = 'center',
20 | close = true,
21 | children,
22 | side = 'bottom',
23 | sideOffset = 0,
24 | title,
25 | trigger,
26 | open,
27 | onOpenChange,
28 | }) => {
29 | return (
30 |
31 |
32 | {trigger ? (
33 |
34 | {trigger}
35 |
36 | ) : null}
37 |
38 |
49 |
52 | {title}
53 |
54 | ) : null}
55 | {children}
56 | {close && (
57 |
63 |
65 | )}
66 |
67 |
68 |
69 |
= ({ percent }) => {
9 | return (
10 |
14 |
19 | )
20 | }
21 |
22 | export default Progress
23 |
--------------------------------------------------------------------------------
/packages/ui/src/components/radio-group.tsx:
--------------------------------------------------------------------------------
1 | import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
2 | import type { FC, ReactNode } from 'react'
3 | import clsx from 'clsx'
4 |
5 | type RadioOption = {
6 | value: string
7 | id: string
8 | label: string | ReactNode
9 | }
10 |
11 | type RadioGroupProps = {
12 | className?: string
13 | defaultValue: string
14 | options: RadioOption[]
15 | name: string
16 | onChange?: (value: string) => void
17 | }
18 |
19 | // TODO: Clicking on label should select the radio
20 | const RadioGroup: FC = ({
21 | className,
22 | defaultValue,
23 | options,
24 | name,
25 | onChange,
26 | }) => {
27 | return (
28 |
34 | {options.map((option, index) => (
35 |
39 |
49 |
51 |
52 | {option.label}
53 |
54 |
55 | ))}
56 |
57 | )
58 | }
59 |
60 | export default RadioGroup
61 |
--------------------------------------------------------------------------------
/packages/ui/src/components/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
3 | import clsx from 'clsx'
4 |
5 | interface ScrollAreaProps {
6 | className?: string
7 | children: ReactNode
8 | title?: ReactNode | string
9 | }
10 |
11 | const ScrollArea: FC = ({ className, children, title }) => (
12 |
15 |
16 |
17 | {title ? (
18 |
19 | {title}
20 |
21 | ) : null}
22 |
{children}
23 |
25 |
32 |
40 |
41 | )
42 |
43 | export default ScrollArea
44 |
--------------------------------------------------------------------------------
/packages/ui/src/components/select.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CheckIcon,
3 | ChevronDownIcon,
4 | ChevronUpIcon,
5 | } from '@radix-ui/react-icons'
6 | import * as SelectPrimitive from '@radix-ui/react-select'
7 | import clsx from 'clsx'
8 | import { Dispatch, SetStateAction, useState } from 'react'
9 | import type { FC, ReactNode } from 'react'
10 | import { Button } from './buttons'
11 |
12 | interface SelectItem {
13 | disabled?: boolean
14 | label: string | ReactNode
15 | value: string
16 | }
17 |
18 | // TODO: Add default label, onchange
19 | interface Props {
20 | defaultOpen?: boolean
21 | defaultValue?: string
22 | items: SelectItem[]
23 | name: string
24 | open?: boolean
25 | onOpenChange?: Dispatch>
26 | onValueChange?: (value: string) => void
27 | value?: string
28 | }
29 |
30 | const Select: FC = ({
31 | defaultOpen = false,
32 | defaultValue,
33 | items,
34 | name,
35 | open,
36 | onOpenChange,
37 | onValueChange,
38 | value,
39 | }) => {
40 | const defaultItem = items.find((item) =>
41 | defaultValue ? item.value === defaultValue : item.value === value
42 | )
43 | const [selected, setSelected] = useState(defaultItem || items[0])
44 |
45 | const handleSelect = (value: string) => {
46 | const item = items.find((item) => item.value === value)
47 | if (item) {
48 | setSelected(item)
49 | onValueChange?.(item.value)
50 | }
51 | }
52 |
53 | return (
54 |
63 |
64 |
65 |
66 |
67 | {selected.label}
68 |
69 |
70 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
80 |
81 |
82 | {items.map((f, i) => (
83 |
94 |
95 | {f.label}
96 |
97 |
98 |
100 |
101 | ))}
102 |
103 |
104 |
105 |
107 |
108 |
109 |
110 | )
111 | }
112 |
113 | export default Select
114 |
--------------------------------------------------------------------------------
/packages/ui/src/components/separator.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 | import * as SeparatorPrimitive from '@radix-ui/react-separator'
3 | import clsx from 'clsx'
4 |
5 | interface SeparatorProps {
6 | decorative?: boolean
7 | orientation: 'horizontal' | 'vertical'
8 | }
9 |
10 | const Separator: FC = ({ decorative = true, orientation }) => {
11 | return (
12 | = ({
19 | ariaLabel,
20 | defaultValue,
21 | min = 0,
22 | max,
23 | name,
24 | onValueChange,
25 | onValueCommit,
26 | step,
27 | value,
28 | }) => {
29 | return (
30 |
42 |
43 |
45 | {defaultValue && defaultValue.length > 0
46 | ? defaultValue.map((_, index) => (
47 |
65 | )
66 | }
67 |
68 | export default Slider
69 |
--------------------------------------------------------------------------------
/packages/ui/src/components/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as SwitchPrimitive from '@radix-ui/react-switch'
2 | import clsx from 'clsx'
3 | import type { FC, ReactNode } from 'react'
4 |
5 | const SwitchRoot = SwitchPrimitive.Root
6 | const SwitchThumb = SwitchPrimitive.Thumb
7 |
8 | interface Props {
9 | defaultChecked?: boolean
10 | icon?: ReactNode
11 | onCheckedChange?: (checked: boolean) => void
12 | name: string
13 | }
14 |
15 | const Switch: FC = ({ defaultChecked, icon, onCheckedChange, name }) => {
16 | return (
17 |
29 |
37 | {icon}
38 |
39 |
40 | )
41 | }
42 |
43 | export default Switch
44 |
--------------------------------------------------------------------------------
/packages/ui/src/components/tabs.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import * as TabsPrimitive from '@radix-ui/react-tabs'
3 | import clsx from 'clsx'
4 | import React from 'react'
5 |
6 | interface TabContent {
7 | content: string | ReactNode
8 | id: string
9 | title: string | ReactNode
10 | }
11 |
12 | // TODO: Add support for onchange, orientation, etc.
13 | // TODO: Update styles so they're consistent with the rest of the components
14 | interface TabsProps {
15 | defaultValue: string
16 | type: 'row' | 'column'
17 | }
18 |
19 | interface TabsData {
20 | tabs: TabContent[]
21 | type: 'row' | 'column'
22 | }
23 |
24 | const Tabs = TabsPrimitive.Root
25 |
26 | const TabsList = React.forwardRef(
27 | ({ className, ...props }, ref) => (
28 |
36 | {props.tabs.map(
37 | ({ title, id }: { title: string | ReactNode; id: string }) => (
38 |
54 |
55 | {title}
56 |
57 |
58 | )
59 | )}
60 |
61 | )
62 | )
63 | TabsList.displayName = TabsPrimitive.List.displayName
64 |
65 | const TabsContent = React.forwardRef(
66 | ({ className, ...props }, ref) => (
67 | <>
68 | {props.tabs.map(
69 | ({
70 | content,
71 | id,
72 | }: {
73 | content: string | ReactNode
74 | id: string
75 | }) => (
76 |
86 | {content}
87 |
88 | )
89 | )}
90 |
91 | )
92 | )
93 | TabsContent.displayName = TabsPrimitive.Content.displayName
94 |
95 | export { Tabs, TabsContent, TabsList }
96 |
--------------------------------------------------------------------------------
/packages/ui/src/components/toast.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import { useEffect, useRef, useState } from 'react'
3 | import * as ToastPrimitive from '@radix-ui/react-toast'
4 | import clsx from 'clsx'
5 | import { Button } from './buttons'
6 |
7 | interface ToastProps {
8 | action: ReactNode | string
9 | actionAltText: string
10 | defaultOpen?: boolean
11 | description?: ReactNode | string
12 | dismiss?: ReactNode | string
13 | duration?: number
14 | open?: boolean
15 | onOpenChange?: (open: boolean) => void
16 | title?: ReactNode | string
17 | trigger?: ReactNode | string
18 | }
19 |
20 | // TODO: Fix description and action styles
21 | // TODO: Add support for triggering toast from a function call
22 | // TODO: Add examples for triggering the toast from a button click and from a function call
23 |
24 | const Toast: FC = ({
25 | action,
26 | actionAltText,
27 | defaultOpen = false,
28 | description,
29 | dismiss,
30 | duration = 3000,
31 | open,
32 | onOpenChange,
33 | title,
34 | trigger,
35 | }) => {
36 | const [isToastOpen, setIsToastOpen] = useState(
37 | defaultOpen || false
38 | )
39 | const timerRef = useRef(0)
40 |
41 | useEffect(() => {
42 | if (!trigger) {
43 | setIsToastOpen(false)
44 | onOpenChange?.(false)
45 | timerRef.current = window.setTimeout(() => {
46 | setIsToastOpen(true)
47 | onOpenChange?.(true)
48 | }, 100)
49 | }
50 |
51 | return () => clearTimeout(timerRef.current)
52 | }, [trigger, duration, open])
53 |
54 | return (
55 |
56 | {trigger && (
57 | {
59 | setIsToastOpen(false)
60 | onOpenChange?.(false)
61 | window.clearTimeout(timerRef.current)
62 | timerRef.current = window.setTimeout(() => {
63 | setIsToastOpen(true)
64 | onOpenChange?.(true)
65 | }, 100)
66 | }}
67 | >
68 | {trigger}
69 |
70 | )}
71 |
87 |
88 |
89 |
90 |
91 | {title}
92 |
93 |
94 | {description}
95 |
96 |
97 |
98 | {action && dismiss && (
99 |
100 |
108 |
113 | {action}
114 |
115 |
116 |
125 |
129 | {dismiss}
130 |
131 |
132 |
133 | )}
134 | {action && !dismiss && (
135 |
136 |
146 | {action}
147 |
148 |
149 | )}
150 |
152 |
154 | )
155 | }
156 |
157 | export default Toast
158 |
--------------------------------------------------------------------------------
/packages/ui/src/components/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactElement } from 'react'
2 | import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
3 | import clsx from 'clsx'
4 |
5 | interface ToggleItem {
6 | value: string
7 | label: string
8 | icon: ReactElement
9 | }
10 |
11 | interface ToggleGroupProps {
12 | defaultValue?: string | string[]
13 | items: ToggleItem[]
14 | onValueChange?: (value: string) => void
15 | orientation?: 'vertical' | 'horizontal'
16 | style?: 'stitched' | 'pills'
17 | type: 'single' | 'multiple'
18 | }
19 |
20 | const ToggleGroup: FC = ({
21 | defaultValue,
22 | items,
23 | onValueChange,
24 | orientation = 'horizontal',
25 | style = 'stitched',
26 | type,
27 | }) => {
28 | return (
29 | // @ts-ignore
30 |
49 | {items.map(({ value, label, icon }, i) => (
50 |
67 | {icon}
68 |
69 | ))}
70 |
71 | )
72 | }
73 |
74 | export default ToggleGroup
75 |
--------------------------------------------------------------------------------
/packages/ui/src/components/toggle.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as TogglePrimitive from '@radix-ui/react-toggle'
3 | import Button from './buttons/shared/button'
4 |
5 | interface ToggleProps {
6 | ariaLabel: string
7 | children: ReactNode
8 | defaultPressed?: boolean
9 | pressed?: boolean
10 | onPressedChange?: (pressed: boolean) => void
11 | }
12 |
13 | // TODO: update styles after changing shared button styles
14 | const Toggle: FC = ({
15 | ariaLabel,
16 | children,
17 | defaultPressed = false,
18 | pressed,
19 | onPressedChange,
20 | }) => (
21 |
27 | {children}
28 |
29 | )
30 |
31 | export default Toggle
32 |
--------------------------------------------------------------------------------
/packages/ui/src/components/toolbar.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as ToolbarPrimitive from '@radix-ui/react-toolbar'
3 | import clsx from 'clsx'
4 | import { PrimaryButton } from './buttons'
5 |
6 | interface ToggleGroupItem {
7 | id: string
8 | icon: ReactNode
9 | onSelect: () => void
10 | }
11 |
12 | interface ToolbarItem {
13 | buttonOnSelect?: () => void
14 | buttonText?: ReactNode | string
15 | groupItems?: ToggleGroupItem[]
16 | groupType?: 'single' | 'multiple'
17 | link?: string
18 | linkText?: ReactNode | string
19 | type: 'toggle-group' | 'separator' | 'link' | 'button'
20 | }
21 |
22 | interface ToolbarProps {
23 | className?: string
24 | items: ToolbarItem[]
25 | }
26 |
27 | const Toolbar: FC = ({ className, items }) => {
28 | return (
29 |
32 | {items.map(
33 | (
34 | {
35 | buttonOnSelect,
36 | buttonText,
37 | groupItems,
38 | groupType = 'multiple',
39 | link,
40 | linkText,
41 | type,
42 | },
43 | index
44 | ) => {
45 | if (type === 'link') {
46 | return (
47 |
57 | {linkText}
58 |
59 | )
60 | } else if (type === 'button') {
61 | return (
62 |
63 |
67 | {buttonText}
68 |
69 |
70 | )
71 | } else if (type === 'separator') {
72 | return (
73 |
85 | {groupItems?.map(
86 | ({ id, icon, onSelect }, index) => (
87 |
92 |
102 | {icon}
103 |
104 |
105 | )
106 | )}
107 |
108 | )
109 | }
110 | }
111 | )}
112 |
113 | )
114 | }
115 |
116 | export default Toolbar
117 |
--------------------------------------------------------------------------------
/packages/ui/src/components/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
3 | import clsx from 'clsx'
4 |
5 | interface Props {
6 | align?: 'start' | 'center' | 'end'
7 | defaultOpen?: boolean
8 | content: string | ReactNode
9 | children: ReactNode
10 | open?: boolean
11 | onOpenChange?: (open: boolean) => void
12 | side?: 'top' | 'right' | 'bottom' | 'left'
13 | }
14 |
15 | const Tooltip: FC = ({
16 | align = 'center',
17 | defaultOpen,
18 | content,
19 | children,
20 | open,
21 | onOpenChange,
22 | side = 'top',
23 | }) => {
24 | return (
25 |
26 |
31 | {children}
32 |
33 |
47 |
49 | {content}
50 |
51 |
52 |
53 |
54 |
55 | )
56 | }
57 |
58 | export default Tooltip
59 |
--------------------------------------------------------------------------------
/packages/ui/src/internal/calendar.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from 'react'
2 | import { DayPicker } from 'react-day-picker'
3 | import clsx from 'clsx'
4 |
5 | import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
6 |
7 | export type CalendarProps = ComponentProps
8 |
9 | export default function Calendar({
10 | className,
11 | classNames,
12 | showOutsideDays = true,
13 | ...props
14 | }: CalendarProps) {
15 | return (
16 | (
56 | )',
31 | subtle: 'hsl(var(--primary-subtle) / )',
32 | },
33 |
34 | ui: {
35 | DEFAULT: 'hsl(var(--ui) / )',
36 | hover: 'hsl(var(--ui-hover) / )',
37 | states: 'hsl(var(--ui-states) / )',
38 | },
39 |
40 | subtle: {
41 | DEFAULT: 'hsl(var(--subtle) / )',
42 | int: 'hsl(var(--subtle-int) / )',
43 | 'int-states':
44 | 'hsl(var(--subtle-int-states) / )',
45 | },
46 |
47 | brand: {
48 | DEFAULT: 'hsl(var(--brand) / )',
49 | states: 'hsl(var(--brand-states) / )',
50 | },
51 |
52 | foreground: {
53 | DEFAULT: 'hsl(var(--foreground) / )',
54 | subtle: 'hsl(var(--foreground-subtle) / )',
55 | btn: 'hsl(var(--foreground-btn) / )',
56 | },
57 |
58 | danger: {
59 | DEFAULT: 'hsl(var(--danger) / )',
60 | states: 'hsl(var(--danger-states) / )',
61 | },
62 |
63 | success: {
64 | DEFAULT: 'hsl(var(--success) / )',
65 | states: 'hsl(var(--success-states) / )',
66 | },
67 | },
68 | fontFamily: {
69 | mono: 'var(--font-mono)',
70 | sans: 'var(--font-sans)',
71 | serif: 'var(--font-serif)',
72 | },
73 | keyframes: {
74 | 'enter-from-right': {
75 | '0%': { transform: 'translateX(200px)', opacity: 0 },
76 | '100%': { transform: 'translateX(0)', opacity: 1 },
77 | },
78 | 'enter-from-left': {
79 | '0%': { transform: 'translateX(-200px)', opacity: 0 },
80 | '100%': { transform: 'translateX(0)', opacity: 1 },
81 | },
82 | 'exit-to-right': {
83 | '0%': { transform: 'translateX(0)', opacity: 1 },
84 | '100%': { transform: 'translateX(200px)', opacity: 0 },
85 | },
86 | 'exit-to-left': {
87 | '0%': { transform: 'translateX(0)', opacity: 1 },
88 | '100%': { transform: 'translateX(-200px)', opacity: 0 },
89 | },
90 | // toast
91 | 'toast-hide': {
92 | '0%': { opacity: 1 },
93 | '100%': { opacity: 0 },
94 | },
95 | 'toast-slide-in-right': {
96 | '0%': { transform: `translateX(calc(100% + 1rem))` },
97 | '100%': { transform: 'translateX(0)' },
98 | },
99 | 'toast-slide-in-bottom': {
100 | '0%': { transform: `translateY(calc(100% + 1rem))` },
101 | '100%': { transform: 'translateY(0)' },
102 | },
103 | 'toast-swipe-out-x': {
104 | '0%': {
105 | transform: 'translateX(var(--radix-toast-swipe-end-x))',
106 | },
107 | '100%': {
108 | transform: `translateX(calc(100% + 1rem))`,
109 | },
110 | },
111 | 'toast-swipe-out-y': {
112 | '0%': {
113 | transform: 'translateY(var(--radix-toast-swipe-end-y))',
114 | },
115 | '100%': {
116 | transform: `translateY(calc(100% + 1rem))`,
117 | },
118 | },
119 | },
120 | padding: {
121 | DEFAULT: 'var(--ui-p)',
122 | btn: 'var(--ui-p-btn)',
123 | select: 'var(--ui-p-select)',
124 | 'icon-btn': 'var(--ui-p-icon-btn)',
125 | },
126 | },
127 | },
128 | plugins: [tailwindRadix()],
129 | }
130 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@catalystui/tsconfig/ui.json",
3 | "include": ["."],
4 | "exclude": ["dist", "build", "node_modules"]
5 | }
6 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'docs'
3 | - 'packages/*'
4 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "pipeline": {
4 | "build": {
5 | "dependsOn": ["^build"],
6 | "outputs": ["dist/**", ".next/**"]
7 | },
8 | "lint": {
9 | "outputs": []
10 | },
11 | "dev": {
12 | "cache": false
13 | },
14 | "start": {
15 | "outputs": []
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
15 |