@anker-in/headless-ui 0.0.12 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +14 -0
- package/README.md +1 -1
- package/package.json +1 -1
- package/src/components/checkbox.tsx +1 -1
- package/src/components/dialog.tsx +1 -0
- package/src/components/heading.tsx +22 -3
- package/src/components/radio.tsx +16 -4
- package/src/components/skeleton.tsx +1 -1
- package/src/components/text.tsx +31 -4
- package/src/stories/dialog.stories.tsx +60 -31
- package/src/stories/heading.stories.tsx +17 -5
- package/src/stories/input.stories.tsx +5 -0
- package/src/stories/popover.stories.tsx +19 -2
- package/src/stories/radio.stories.tsx +3 -3
- package/src/stories/text.stories.tsx +18 -5
- package/dist/cjs/components/badge.d.ts +0 -9
- package/dist/cjs/components/badge.js +0 -2
- package/dist/cjs/components/badge.js.map +0 -7
- package/dist/cjs/components/button.d.ts +0 -20
- package/dist/cjs/components/button.js +0 -2
- package/dist/cjs/components/button.js.map +0 -7
- package/dist/cjs/components/checkbox.d.ts +0 -11
- package/dist/cjs/components/checkbox.js +0 -2
- package/dist/cjs/components/checkbox.js.map +0 -7
- package/dist/cjs/components/dialog.d.ts +0 -19
- package/dist/cjs/components/dialog.js +0 -2
- package/dist/cjs/components/dialog.js.map +0 -7
- package/dist/cjs/components/heading.d.ts +0 -15
- package/dist/cjs/components/heading.js +0 -2
- package/dist/cjs/components/heading.js.map +0 -7
- package/dist/cjs/components/index.d.ts +0 -12
- package/dist/cjs/components/index.js +0 -2
- package/dist/cjs/components/index.js.map +0 -7
- package/dist/cjs/components/input.d.ts +0 -21
- package/dist/cjs/components/input.js +0 -2
- package/dist/cjs/components/input.js.map +0 -7
- package/dist/cjs/components/popover.d.ts +0 -6
- package/dist/cjs/components/popover.js +0 -2
- package/dist/cjs/components/popover.js.map +0 -7
- package/dist/cjs/components/radio.d.ts +0 -16
- package/dist/cjs/components/radio.js +0 -2
- package/dist/cjs/components/radio.js.map +0 -7
- package/dist/cjs/components/skeleton.d.ts +0 -9
- package/dist/cjs/components/skeleton.js +0 -5
- package/dist/cjs/components/skeleton.js.map +0 -7
- package/dist/cjs/components/text.d.ts +0 -16
- package/dist/cjs/components/text.js +0 -2
- package/dist/cjs/components/text.js.map +0 -7
- package/dist/cjs/components/theme.d.ts +0 -13
- package/dist/cjs/components/theme.js +0 -2
- package/dist/cjs/components/theme.js.map +0 -7
- package/dist/cjs/helpers/component-props.d.ts +0 -7
- package/dist/cjs/helpers/component-props.js +0 -2
- package/dist/cjs/helpers/component-props.js.map +0 -7
- package/dist/cjs/helpers/constants.d.ts +0 -2
- package/dist/cjs/helpers/constants.js +0 -2
- package/dist/cjs/helpers/constants.js.map +0 -7
- package/dist/cjs/helpers/index.d.ts +0 -1
- package/dist/cjs/helpers/index.js +0 -2
- package/dist/cjs/helpers/index.js.map +0 -7
- package/dist/cjs/helpers/utils.d.ts +0 -2
- package/dist/cjs/helpers/utils.js +0 -2
- package/dist/cjs/helpers/utils.js.map +0 -7
- package/dist/cjs/icons/spinner.d.ts +0 -7
- package/dist/cjs/icons/spinner.js +0 -2
- package/dist/cjs/icons/spinner.js.map +0 -7
- package/dist/cjs/index.d.ts +0 -1
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/stories/badge.stories.d.ts +0 -26
- package/dist/cjs/stories/badge.stories.js +0 -2
- package/dist/cjs/stories/badge.stories.js.map +0 -7
- package/dist/cjs/stories/button.stories.d.ts +0 -47
- package/dist/cjs/stories/button.stories.js +0 -2
- package/dist/cjs/stories/button.stories.js.map +0 -7
- package/dist/cjs/stories/checkbox.stories.d.ts +0 -46
- package/dist/cjs/stories/checkbox.stories.js +0 -2
- package/dist/cjs/stories/checkbox.stories.js.map +0 -7
- package/dist/cjs/stories/dialog.stories.d.ts +0 -5
- package/dist/cjs/stories/dialog.stories.js +0 -2
- package/dist/cjs/stories/dialog.stories.js.map +0 -7
- package/dist/cjs/stories/heading.stories.d.ts +0 -68
- package/dist/cjs/stories/heading.stories.js +0 -2
- package/dist/cjs/stories/heading.stories.js.map +0 -7
- package/dist/cjs/stories/input.stories.d.ts +0 -30
- package/dist/cjs/stories/input.stories.js +0 -2
- package/dist/cjs/stories/input.stories.js.map +0 -7
- package/dist/cjs/stories/popover.stories.d.ts +0 -5
- package/dist/cjs/stories/popover.stories.js +0 -2
- package/dist/cjs/stories/popover.stories.js.map +0 -7
- package/dist/cjs/stories/radio.stories.d.ts +0 -36
- package/dist/cjs/stories/radio.stories.js +0 -2
- package/dist/cjs/stories/radio.stories.js.map +0 -7
- package/dist/cjs/stories/skeleton.stories.d.ts +0 -20
- package/dist/cjs/stories/skeleton.stories.js +0 -2
- package/dist/cjs/stories/skeleton.stories.js.map +0 -7
- package/dist/cjs/stories/text.stories.d.ts +0 -69
- package/dist/cjs/stories/text.stories.js +0 -10
- package/dist/cjs/stories/text.stories.js.map +0 -7
- package/dist/cjs/tsconfig.tsbuildinfo +0 -1
- package/dist/esm/components/badge.d.ts +0 -9
- package/dist/esm/components/badge.js +0 -2
- package/dist/esm/components/badge.js.map +0 -7
- package/dist/esm/components/button.d.ts +0 -20
- package/dist/esm/components/button.js +0 -2
- package/dist/esm/components/button.js.map +0 -7
- package/dist/esm/components/checkbox.d.ts +0 -11
- package/dist/esm/components/checkbox.js +0 -2
- package/dist/esm/components/checkbox.js.map +0 -7
- package/dist/esm/components/dialog.d.ts +0 -19
- package/dist/esm/components/dialog.js +0 -2
- package/dist/esm/components/dialog.js.map +0 -7
- package/dist/esm/components/heading.d.ts +0 -15
- package/dist/esm/components/heading.js +0 -2
- package/dist/esm/components/heading.js.map +0 -7
- package/dist/esm/components/index.d.ts +0 -12
- package/dist/esm/components/index.js +0 -2
- package/dist/esm/components/index.js.map +0 -7
- package/dist/esm/components/input.d.ts +0 -21
- package/dist/esm/components/input.js +0 -2
- package/dist/esm/components/input.js.map +0 -7
- package/dist/esm/components/popover.d.ts +0 -6
- package/dist/esm/components/popover.js +0 -2
- package/dist/esm/components/popover.js.map +0 -7
- package/dist/esm/components/radio.d.ts +0 -16
- package/dist/esm/components/radio.js +0 -2
- package/dist/esm/components/radio.js.map +0 -7
- package/dist/esm/components/skeleton.d.ts +0 -9
- package/dist/esm/components/skeleton.js +0 -5
- package/dist/esm/components/skeleton.js.map +0 -7
- package/dist/esm/components/text.d.ts +0 -16
- package/dist/esm/components/text.js +0 -2
- package/dist/esm/components/text.js.map +0 -7
- package/dist/esm/components/theme.d.ts +0 -13
- package/dist/esm/components/theme.js +0 -2
- package/dist/esm/components/theme.js.map +0 -7
- package/dist/esm/helpers/component-props.d.ts +0 -7
- package/dist/esm/helpers/component-props.js +0 -1
- package/dist/esm/helpers/component-props.js.map +0 -7
- package/dist/esm/helpers/constants.d.ts +0 -2
- package/dist/esm/helpers/constants.js +0 -2
- package/dist/esm/helpers/constants.js.map +0 -7
- package/dist/esm/helpers/index.d.ts +0 -1
- package/dist/esm/helpers/index.js +0 -2
- package/dist/esm/helpers/index.js.map +0 -7
- package/dist/esm/helpers/utils.d.ts +0 -2
- package/dist/esm/helpers/utils.js +0 -2
- package/dist/esm/helpers/utils.js.map +0 -7
- package/dist/esm/icons/spinner.d.ts +0 -7
- package/dist/esm/icons/spinner.js +0 -2
- package/dist/esm/icons/spinner.js.map +0 -7
- package/dist/esm/index.d.ts +0 -1
- package/dist/esm/index.js +0 -2
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/package.json +0 -3
- package/dist/esm/stories/badge.stories.d.ts +0 -26
- package/dist/esm/stories/badge.stories.js +0 -2
- package/dist/esm/stories/badge.stories.js.map +0 -7
- package/dist/esm/stories/button.stories.d.ts +0 -47
- package/dist/esm/stories/button.stories.js +0 -2
- package/dist/esm/stories/button.stories.js.map +0 -7
- package/dist/esm/stories/checkbox.stories.d.ts +0 -46
- package/dist/esm/stories/checkbox.stories.js +0 -2
- package/dist/esm/stories/checkbox.stories.js.map +0 -7
- package/dist/esm/stories/dialog.stories.d.ts +0 -5
- package/dist/esm/stories/dialog.stories.js +0 -2
- package/dist/esm/stories/dialog.stories.js.map +0 -7
- package/dist/esm/stories/heading.stories.d.ts +0 -68
- package/dist/esm/stories/heading.stories.js +0 -2
- package/dist/esm/stories/heading.stories.js.map +0 -7
- package/dist/esm/stories/input.stories.d.ts +0 -30
- package/dist/esm/stories/input.stories.js +0 -2
- package/dist/esm/stories/input.stories.js.map +0 -7
- package/dist/esm/stories/popover.stories.d.ts +0 -5
- package/dist/esm/stories/popover.stories.js +0 -2
- package/dist/esm/stories/popover.stories.js.map +0 -7
- package/dist/esm/stories/radio.stories.d.ts +0 -36
- package/dist/esm/stories/radio.stories.js +0 -2
- package/dist/esm/stories/radio.stories.js.map +0 -7
- package/dist/esm/stories/skeleton.stories.d.ts +0 -20
- package/dist/esm/stories/skeleton.stories.js +0 -2
- package/dist/esm/stories/skeleton.stories.js.map +0 -7
- package/dist/esm/stories/text.stories.d.ts +0 -69
- package/dist/esm/stories/text.stories.js +0 -10
- package/dist/esm/stories/text.stories.js.map +0 -7
- package/dist/esm/tsconfig.tsbuildinfo +0 -1
- package/style.css +0 -1342
package/CONTRIBUTING.md
CHANGED
|
@@ -152,3 +152,17 @@ unit test 使用 [jest](https://jestjs.io/) 和 [@test-library/react](https://te
|
|
|
152
152
|
```shell
|
|
153
153
|
pnpm test
|
|
154
154
|
```
|
|
155
|
+
|
|
156
|
+
# publish
|
|
157
|
+
|
|
158
|
+
```shell
|
|
159
|
+
# 发布ui库
|
|
160
|
+
cd packages/ui
|
|
161
|
+
# 发布新版本需要提升版本号
|
|
162
|
+
pnpm version (patch|minor|major)
|
|
163
|
+
pnpm publish
|
|
164
|
+
|
|
165
|
+
#发布文档
|
|
166
|
+
cd packages/storybook
|
|
167
|
+
netlify deploy --prod
|
|
168
|
+
```
|
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -38,7 +38,7 @@ const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root
|
|
|
38
38
|
</CheckboxPrimitive.Root>
|
|
39
39
|
)
|
|
40
40
|
)
|
|
41
|
-
Checkbox.displayName =
|
|
41
|
+
Checkbox.displayName = 'Checkbox'
|
|
42
42
|
|
|
43
43
|
export default Checkbox
|
|
44
44
|
export type { CheckboxProps }
|
|
@@ -6,6 +6,7 @@ import React from 'react'
|
|
|
6
6
|
const headingVariants = cva('', {
|
|
7
7
|
variants: {
|
|
8
8
|
size: {
|
|
9
|
+
none: '',
|
|
9
10
|
1: 'ai-text-xs',
|
|
10
11
|
2: 'ai-text-sm',
|
|
11
12
|
3: 'ai-text-base',
|
|
@@ -22,24 +23,41 @@ const headingVariants = cva('', {
|
|
|
22
23
|
medium: 'ai-font-medium',
|
|
23
24
|
bold: 'ai-font-bold',
|
|
24
25
|
},
|
|
26
|
+
align: {
|
|
27
|
+
left: 'ai-text-left',
|
|
28
|
+
center: 'ai-text-center',
|
|
29
|
+
right: 'ai-text-right',
|
|
30
|
+
},
|
|
25
31
|
},
|
|
26
32
|
defaultVariants: {
|
|
27
|
-
size:
|
|
33
|
+
size: 'none',
|
|
28
34
|
weights: 'normal',
|
|
35
|
+
align: 'left',
|
|
29
36
|
},
|
|
30
37
|
})
|
|
31
38
|
|
|
32
39
|
type HeadingElement = React.ElementRef<'h1'>
|
|
33
40
|
|
|
34
41
|
interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
|
|
35
|
-
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
42
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
36
43
|
asChild?: boolean
|
|
37
44
|
color?: string
|
|
38
45
|
html?: string
|
|
39
46
|
}
|
|
40
47
|
|
|
41
48
|
const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
|
|
42
|
-
const {
|
|
49
|
+
const {
|
|
50
|
+
children,
|
|
51
|
+
className,
|
|
52
|
+
size,
|
|
53
|
+
align = 'left',
|
|
54
|
+
weights,
|
|
55
|
+
asChild,
|
|
56
|
+
as: Tag = 'h1',
|
|
57
|
+
color,
|
|
58
|
+
html,
|
|
59
|
+
...headingProps
|
|
60
|
+
} = props
|
|
43
61
|
const htmlContentProps = html
|
|
44
62
|
? {
|
|
45
63
|
dangerouslySetInnerHTML: { __html: html },
|
|
@@ -61,6 +79,7 @@ const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwarded
|
|
|
61
79
|
headingVariants({
|
|
62
80
|
size,
|
|
63
81
|
weights,
|
|
82
|
+
align,
|
|
64
83
|
}),
|
|
65
84
|
className
|
|
66
85
|
)}
|
package/src/components/radio.tsx
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react'
|
|
4
4
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
|
|
5
|
+
import { Text } from './text.js'
|
|
5
6
|
import { CheckIcon } from '@radix-ui/react-icons'
|
|
6
7
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
7
8
|
import { cn } from '../helpers/index.js'
|
|
@@ -40,16 +41,17 @@ const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.
|
|
|
40
41
|
)
|
|
41
42
|
}
|
|
42
43
|
)
|
|
43
|
-
RadioGroup.displayName =
|
|
44
|
+
RadioGroup.displayName = 'RadioGroup'
|
|
44
45
|
|
|
45
46
|
interface RadioGroupItemProps
|
|
46
47
|
extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
|
|
47
48
|
VariantProps<typeof radioGroupVariants> {}
|
|
48
49
|
|
|
49
50
|
const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
|
|
50
|
-
({ className, size, ...props }, ref) => {
|
|
51
|
+
({ className, size, children, ...props }, ref) => {
|
|
51
52
|
const { size: sizeFromParent } = React.useContext(RadioContext)
|
|
52
|
-
|
|
53
|
+
|
|
54
|
+
const ItemRadio = (
|
|
53
55
|
<RadioGroupPrimitive.Item
|
|
54
56
|
ref={ref}
|
|
55
57
|
className={cn(
|
|
@@ -65,9 +67,19 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
|
|
|
65
67
|
</RadioGroupPrimitive.Indicator>
|
|
66
68
|
</RadioGroupPrimitive.Item>
|
|
67
69
|
)
|
|
70
|
+
|
|
71
|
+
if (children) {
|
|
72
|
+
return (
|
|
73
|
+
<Text as="label" className={cn('ai-flex ai-items-center ai-gap-1', className)}>
|
|
74
|
+
{ItemRadio}
|
|
75
|
+
{children}
|
|
76
|
+
</Text>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
return ItemRadio
|
|
68
80
|
}
|
|
69
81
|
)
|
|
70
|
-
RadioGroupItem.displayName =
|
|
82
|
+
RadioGroupItem.displayName = 'RadioGroupItem'
|
|
71
83
|
|
|
72
84
|
export { RadioGroup, RadioGroupItem }
|
|
73
85
|
export type { RadioGroupProps, RadioGroupItemProps }
|
|
@@ -6,7 +6,7 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
|
|
|
6
6
|
type SkeletonElement = React.ElementRef<'span'>
|
|
7
7
|
|
|
8
8
|
interface SkeletonProps extends ComponentPropsWithout<'span', RemovedProps> {
|
|
9
|
-
/** 是否正在加载 */
|
|
9
|
+
/** 是否正在加载 , 默认是true*/
|
|
10
10
|
loading?: boolean
|
|
11
11
|
}
|
|
12
12
|
|
package/src/components/text.tsx
CHANGED
|
@@ -2,10 +2,12 @@ import * as React from 'react'
|
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot'
|
|
3
3
|
import { cn } from '../helpers/index.js'
|
|
4
4
|
import { type VariantProps, cva } from 'class-variance-authority'
|
|
5
|
+
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
|
|
5
6
|
|
|
6
7
|
const textVariants = cva('', {
|
|
7
8
|
variants: {
|
|
8
9
|
size: {
|
|
10
|
+
none: '',
|
|
9
11
|
1: 'ai-text-xs',
|
|
10
12
|
2: 'ai-text-sm',
|
|
11
13
|
3: 'ai-text-base',
|
|
@@ -22,24 +24,48 @@ const textVariants = cva('', {
|
|
|
22
24
|
medium: 'ai-font-medium',
|
|
23
25
|
bold: 'ai-font-bold',
|
|
24
26
|
},
|
|
27
|
+
align: {
|
|
28
|
+
left: 'ai-text-left',
|
|
29
|
+
center: 'ai-text-center',
|
|
30
|
+
right: 'ai-text-right',
|
|
31
|
+
},
|
|
25
32
|
},
|
|
26
33
|
defaultVariants: {
|
|
27
|
-
size:
|
|
34
|
+
size: 'none',
|
|
28
35
|
weights: 'normal',
|
|
36
|
+
align: 'left',
|
|
29
37
|
},
|
|
30
38
|
})
|
|
31
39
|
|
|
32
40
|
type TextElement = React.ElementRef<'span'>
|
|
33
|
-
|
|
34
|
-
|
|
41
|
+
type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>
|
|
42
|
+
type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>
|
|
43
|
+
type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>
|
|
44
|
+
type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>
|
|
45
|
+
|
|
46
|
+
interface CommonTextProps extends VariantProps<typeof textVariants> {
|
|
47
|
+
as?: 'div' | 'label' | 'p' | 'span'
|
|
35
48
|
asChild?: boolean
|
|
36
49
|
color?: string
|
|
37
50
|
/** 相当于 dangerouslySetInnerHTML */
|
|
38
51
|
html?: string
|
|
39
52
|
}
|
|
40
53
|
|
|
54
|
+
type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)
|
|
55
|
+
|
|
41
56
|
const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
|
|
42
|
-
const {
|
|
57
|
+
const {
|
|
58
|
+
children,
|
|
59
|
+
size = 'none',
|
|
60
|
+
weights,
|
|
61
|
+
align = 'left',
|
|
62
|
+
className,
|
|
63
|
+
asChild,
|
|
64
|
+
as: Tag = 'span',
|
|
65
|
+
color,
|
|
66
|
+
html,
|
|
67
|
+
...textProps
|
|
68
|
+
} = props
|
|
43
69
|
|
|
44
70
|
const htmlContentProps = html
|
|
45
71
|
? {
|
|
@@ -63,6 +89,7 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
|
|
|
63
89
|
textVariants({
|
|
64
90
|
size,
|
|
65
91
|
weights,
|
|
92
|
+
align,
|
|
66
93
|
}),
|
|
67
94
|
className
|
|
68
95
|
)}
|
|
@@ -10,36 +10,65 @@ import {
|
|
|
10
10
|
DialogTrigger,
|
|
11
11
|
Input,
|
|
12
12
|
} from '../components/index'
|
|
13
|
+
import type { Meta, StoryObj } from '@storybook/react/*'
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
const meta = {
|
|
16
|
+
title: 'Components/Dialog',
|
|
17
|
+
component: Dialog,
|
|
18
|
+
subcomponents: {
|
|
19
|
+
DialogTrigger,
|
|
20
|
+
DialogContent,
|
|
21
|
+
DialogHeader,
|
|
22
|
+
DialogTitle,
|
|
23
|
+
DialogDescription,
|
|
24
|
+
DialogFooter,
|
|
25
|
+
} as any,
|
|
26
|
+
parameters: {
|
|
27
|
+
layout: 'centered',
|
|
28
|
+
docs: {
|
|
29
|
+
description: {
|
|
30
|
+
component: '弹窗组件,基于@radix-ui/react-dialog,https://www.radix-ui.com/primitives/docs/components/dialog ',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
tags: ['autodocs'],
|
|
35
|
+
} satisfies Meta<typeof Dialog>
|
|
15
36
|
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
export default meta
|
|
38
|
+
|
|
39
|
+
type Story = StoryObj<typeof Dialog>
|
|
40
|
+
|
|
41
|
+
export const Default: Story = {
|
|
42
|
+
args: {
|
|
43
|
+
children: (
|
|
44
|
+
<>
|
|
45
|
+
<DialogTrigger asChild>
|
|
46
|
+
<button>Edit Profile</button>
|
|
47
|
+
</DialogTrigger>
|
|
48
|
+
<DialogContent className="sm:ai-max-w-[425px]">
|
|
49
|
+
<DialogHeader>
|
|
50
|
+
<DialogTitle>Edit profile</DialogTitle>
|
|
51
|
+
<DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
|
|
52
|
+
</DialogHeader>
|
|
53
|
+
<div className="ai-grid ai-gap-4 ai-py-4">
|
|
54
|
+
<div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
|
|
55
|
+
<label htmlFor="name" className="ai-text-right">
|
|
56
|
+
Name
|
|
57
|
+
</label>
|
|
58
|
+
<Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
|
|
59
|
+
</div>
|
|
60
|
+
<div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
|
|
61
|
+
<label htmlFor="username" className="ai-text-right">
|
|
62
|
+
Username
|
|
63
|
+
</label>
|
|
64
|
+
<Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<DialogFooter>
|
|
68
|
+
<Button type="submit">Save changes</Button>
|
|
69
|
+
</DialogFooter>
|
|
70
|
+
</DialogContent>
|
|
71
|
+
</>
|
|
72
|
+
),
|
|
73
|
+
},
|
|
74
|
+
}
|
|
@@ -20,10 +20,10 @@ const meta = {
|
|
|
20
20
|
control: {
|
|
21
21
|
type: 'select',
|
|
22
22
|
},
|
|
23
|
-
options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
24
|
-
description: '1
|
|
23
|
+
options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
24
|
+
description: '文本尺寸,默认为none,浏览器默认大小和行高,1~9预设字体大小和行高',
|
|
25
25
|
table: {
|
|
26
|
-
defaultValue: { summary: '
|
|
26
|
+
defaultValue: { summary: 'none' },
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
29
|
weights: {
|
|
@@ -35,8 +35,19 @@ const meta = {
|
|
|
35
35
|
defaultValue: { summary: 'normal' },
|
|
36
36
|
},
|
|
37
37
|
},
|
|
38
|
+
align: {
|
|
39
|
+
control: {
|
|
40
|
+
type: 'select',
|
|
41
|
+
},
|
|
42
|
+
options: ['left', 'center', 'right'],
|
|
43
|
+
table: {
|
|
44
|
+
defaultValue: { summary: 'left' },
|
|
45
|
+
},
|
|
46
|
+
},
|
|
38
47
|
color: {
|
|
39
|
-
control:
|
|
48
|
+
control: {
|
|
49
|
+
type: 'color',
|
|
50
|
+
},
|
|
40
51
|
},
|
|
41
52
|
as: {
|
|
42
53
|
control: {
|
|
@@ -55,8 +66,9 @@ const meta = {
|
|
|
55
66
|
},
|
|
56
67
|
args: {
|
|
57
68
|
as: 'h1',
|
|
58
|
-
size:
|
|
69
|
+
size: 'none',
|
|
59
70
|
weights: 'normal',
|
|
71
|
+
align: 'left',
|
|
60
72
|
},
|
|
61
73
|
} satisfies Meta<typeof Heading>
|
|
62
74
|
|
|
@@ -10,6 +10,11 @@ const meta = {
|
|
|
10
10
|
subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: 检查type , 去掉as类型转换
|
|
11
11
|
parameters: {
|
|
12
12
|
layout: 'centered',
|
|
13
|
+
docs: {
|
|
14
|
+
description: {
|
|
15
|
+
component: 'Input 组件, 用于输入框, 可以通过插槽插入额外的内容, 比如icon, 按钮',
|
|
16
|
+
},
|
|
17
|
+
},
|
|
13
18
|
},
|
|
14
19
|
tags: ['autodocs'],
|
|
15
20
|
argTypes: {
|
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { Popover, PopoverContent, PopoverTrigger } from '../components/index'
|
|
3
|
+
import type { Meta } from '@storybook/react/*'
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/Popover',
|
|
7
|
+
component: Popover,
|
|
8
|
+
subcomponents: { Popover, PopoverTrigger, PopoverContent } as any,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: 'centered',
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component:
|
|
14
|
+
'popover组件,在一个portal展示复杂ui, 基于@radix-ui/react-popover, https://www.radix-ui.com/primitives/docs/components/popover',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
tags: ['autodocs'],
|
|
19
|
+
} satisfies Meta<typeof Popover>
|
|
20
|
+
|
|
21
|
+
export default meta
|
|
5
22
|
|
|
6
23
|
export const Default = () => (
|
|
7
24
|
<Popover>
|
|
8
25
|
<PopoverTrigger asChild>
|
|
9
26
|
<button>Open popover</button>
|
|
10
27
|
</PopoverTrigger>
|
|
11
|
-
<PopoverContent className="ai-w-80">
|
|
28
|
+
<PopoverContent className="ai-w-80 ai-bg-white" side="right">
|
|
12
29
|
<div className="ai-grid ai-gap-4">
|
|
13
30
|
<p>
|
|
14
31
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react/*'
|
|
2
2
|
import { RadioGroup, RadioGroupItem } from '../components/index'
|
|
3
|
-
import React from 'react'
|
|
3
|
+
import React, { type ComponentType } from 'react'
|
|
4
4
|
|
|
5
5
|
const meta = {
|
|
6
|
-
title: 'Components/
|
|
6
|
+
title: 'Components/RadioGroup',
|
|
7
7
|
component: RadioGroup,
|
|
8
|
-
|
|
8
|
+
subcomponents: { RadioGroupItem: RadioGroupItem as ComponentType<unknown> },
|
|
9
9
|
parameters: {
|
|
10
10
|
layout: 'centered',
|
|
11
11
|
docs: {
|
|
@@ -20,9 +20,10 @@ const meta = {
|
|
|
20
20
|
control: {
|
|
21
21
|
type: 'select',
|
|
22
22
|
},
|
|
23
|
-
|
|
23
|
+
description: '文本尺寸,默认为none,浏览器默认大小和行高,1~9预设字体大小和行高',
|
|
24
|
+
options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
24
25
|
table: {
|
|
25
|
-
defaultValue: { summary: '
|
|
26
|
+
defaultValue: { summary: 'none' },
|
|
26
27
|
},
|
|
27
28
|
},
|
|
28
29
|
weights: {
|
|
@@ -34,8 +35,19 @@ const meta = {
|
|
|
34
35
|
defaultValue: { summary: 'normal' },
|
|
35
36
|
},
|
|
36
37
|
},
|
|
38
|
+
align: {
|
|
39
|
+
control: {
|
|
40
|
+
type: 'select',
|
|
41
|
+
},
|
|
42
|
+
options: ['left', 'center', 'right'],
|
|
43
|
+
table: {
|
|
44
|
+
defaultValue: { summary: 'left' },
|
|
45
|
+
},
|
|
46
|
+
},
|
|
37
47
|
color: {
|
|
38
|
-
control:
|
|
48
|
+
control: {
|
|
49
|
+
type: 'color',
|
|
50
|
+
},
|
|
39
51
|
},
|
|
40
52
|
as: {
|
|
41
53
|
control: {
|
|
@@ -53,8 +65,9 @@ const meta = {
|
|
|
53
65
|
},
|
|
54
66
|
},
|
|
55
67
|
args: {
|
|
56
|
-
size:
|
|
68
|
+
size: 'none',
|
|
57
69
|
weights: 'normal',
|
|
70
|
+
align: 'left',
|
|
58
71
|
html: '',
|
|
59
72
|
},
|
|
60
73
|
} satisfies Meta<typeof Text>
|
|
@@ -65,7 +78,7 @@ type Story = StoryObj<typeof meta>
|
|
|
65
78
|
export const Default: Story = {
|
|
66
79
|
args: {
|
|
67
80
|
children: ' The quick brown fox jumps over the lazy dog.',
|
|
68
|
-
size:
|
|
81
|
+
size: 'none',
|
|
69
82
|
weights: 'normal',
|
|
70
83
|
},
|
|
71
84
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
-
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
|
|
5
|
-
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
6
|
-
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
7
|
-
}
|
|
8
|
-
declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime.js").JSX.Element;
|
|
9
|
-
export default Badge;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var c=(e,a)=>{for(var t in a)i(e,t,{get:a[t],enumerable:!0})},g=(e,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of u(a))!f.call(e,r)&&r!==t&&i(e,r,{get:()=>a[r],enumerable:!(n=p(a,r))||n.enumerable});return e};var b=e=>g(i({},"__esModule",{value:!0}),e);var v={};c(v,{default:()=>m});module.exports=b(v);var s=require("react/jsx-runtime"),V=require("react"),o=require("class-variance-authority"),d=require("../helpers/index.js");const x=(0,o.cva)("ai-inline-flex ai-items-center ai-font-medium ai-rounded-[20px] ai-border ai-px-[10px] ai-py-1 ai-text-xs ai-transition-colors focus:ai-outline-none",{variants:{variant:{default:"ai-bg-badge ai-text-badge-foreground ai-border-transparent",secondary:"ai-bg-secondary ai-text-secondary-foreground ai-border-transparent",destructive:"ai-bg-destructive ai-text-destructive-foreground ai-border-transparent",outline:"ai-text-foreground"}},defaultVariants:{variant:"default"}});function l({className:e,variant:a,...t}){return(0,s.jsx)("div",{className:(0,d.cn)(x({variant:a}),e),...t})}var m=l;
|
|
2
|
-
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'ai-inline-flex ai-items-center ai-font-medium ai-rounded-[20px] ai-border ai-px-[10px] ai-py-1 ai-text-xs ai-transition-colors focus:ai-outline-none',\n {\n variants: {\n variant: {\n default: 'ai-bg-badge ai-text-badge-foreground ai-border-transparent',\n secondary: 'ai-bg-secondary ai-text-secondary-foreground ai-border-transparent',\n destructive: 'ai-bg-destructive ai-text-destructive-foreground ai-border-transparent',\n outline: 'ai-text-foreground',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ variant }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBS,IAAAI,EAAA,6BAzBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,uJACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,6DACT,UAAW,qEACX,YAAa,yEACb,QAAS,oBACX,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,QAAAC,EAAS,GAAGC,CAAM,EAAe,CAC3D,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,QAAAG,CAAQ,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC/E,CAEA,IAAOV,EAAQO",
|
|
6
|
-
"names": ["badge_exports", "__export", "badge_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "badgeVariants", "Badge", "className", "variant", "props"]
|
|
7
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
-
/**
|
|
4
|
-
* Button Variants
|
|
5
|
-
*/
|
|
6
|
-
declare const buttonVariants: (props?: ({
|
|
7
|
-
variant?: "link" | "primary" | "secondary" | "ghost" | null | undefined;
|
|
8
|
-
size?: "sm" | "lg" | "base" | "icon" | null | undefined;
|
|
9
|
-
hoverEffect?: "none" | "slide" | null | undefined;
|
|
10
|
-
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
11
|
-
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
12
|
-
/** 设置按钮载入状态 */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** 设置按钮失效状态 */
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
/** 定义自组件作为父组件的类型, 详细使用方式请参考radix-ui */
|
|
17
|
-
asChild?: boolean;
|
|
18
|
-
}
|
|
19
|
-
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
20
|
-
export default Button;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";"use client";var h=Object.create;var n=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var E=(e,a)=>{for(var i in a)n(e,i,{get:a[i],enumerable:!0})},b=(e,a,i,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of B(a))!z.call(e,o)&&o!==i&&n(e,o,{get:()=>a[o],enumerable:!(t=w(a,o))||t.enumerable});return e};var d=(e,a,i)=>(i=e!=null?h(V(e)):{},b(a||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),H=e=>b(n({},"__esModule",{value:!0}),e);var M={};E(M,{default:()=>L});module.exports=H(M);var r=require("react/jsx-runtime"),P=d(require("react")),l=require("@radix-ui/react-slot"),p=require("@radix-ui/react-visually-hidden"),u=require("class-variance-authority"),c=d(require("../icons/spinner.js")),m=require("../helpers/index.js");const C=(0,u.cva)("ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none disabled:ai-opacity-50",{variants:{variant:{primary:"ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground",secondary:"ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid",link:"ai-text-primary ai-underline-offset-4 hover:ai-underline",ghost:"hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground"},size:{sm:"ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]",base:"ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]",lg:"ai-h-11 ai-px-8 ai-text-[16px]",icon:"ai-size-10 ai-rounded-full"},hoverEffect:{none:"",slide:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0'}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none"}}),f=P.forwardRef(({asChild:e=!1,size:a="base",children:i,variant:t,hoverEffect:o="none",className:y,disabled:s=!1,loading:v=!1,...g},x)=>(0,r.jsx)(e?l.Slot:"button",{disabled:s,className:(0,m.cn)(C({variant:t,size:a,hoverEffect:o}),{"ai-cursor-not-allowed":s},y),ref:x,...g,children:v?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:i}),(0,r.jsx)("span",{className:"ai-absolute",children:(0,r.jsx)(c.default,{})}),(0,r.jsx)(p.VisuallyHidden,{children:i})]}):i}));f.displayName="Button";var L=f;
|
|
2
|
-
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n 'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-whitespace-nowrap ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none disabled:ai-opacity-50',\n {\n variants: {\n variant: {\n primary:\n 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',\n secondary:\n 'ai-bg-btn-secondary ai-border-primary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground ai-border ai-border-solid',\n link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',\n ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',\n },\n size: {\n sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',\n base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',\n lg: 'ai-h-11 ai-px-8 ai-text-[16px]',\n icon: 'ai-size-10 ai-rounded-full',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[\"\"] hover:before:ai-translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0 before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[\"\"] hover:before:ai-translate-x-0',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n disabled={disabled}\n className={cn(\n buttonVariants({ variant, size, hoverEffect }),\n {\n 'ai-cursor-not-allowed': disabled,\n },\n className\n )}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"ai-absolute\">\n <Spinner />\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoGU,IAAAI,EAAA,6BAlGVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAKnB,MAAMC,KAAiB,OACrB,uUACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uKACF,UACE,yPACF,KAAM,2DACN,MAAO,8DACT,EACA,KAAM,CACJ,GAAI,wCACJ,KAAM,yCACN,GAAI,iCACJ,KAAM,4BACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,+VACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mWACJ,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,MACf,CACF,CACF,EAaMC,EAASP,EAAM,WACnB,CACE,CACE,QAAAQ,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,GAAGC,CACL,EACAC,OAKE,OAHWT,EAAU,OAAO,SAG3B,CACC,SAAUM,EACV,aAAW,MACTR,EAAe,CAAE,QAAAK,EAAS,KAAAF,EAAM,YAAAG,CAAY,CAAC,EAC7C,CACE,wBAAyBE,CAC3B,EACAD,CACF,EACA,IAAKI,EACJ,GAAGD,EAEH,SAAAD,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,cACd,mBAAC,EAAAQ,QAAA,EAAQ,EACX,KACA,OAAC,kBAAgB,SAAAR,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOV,EAAQU",
|
|
6
|
-
"names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "buttonVariants", "Button", "asChild", "size", "children", "variant", "hoverEffect", "className", "disabled", "loading", "props", "ref", "Spinner"]
|
|
7
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
-
import { type VariantProps } from 'class-variance-authority';
|
|
4
|
-
declare const checkboxVariants: (props?: ({
|
|
5
|
-
size?: "sm" | "lg" | "base" | null | undefined;
|
|
6
|
-
} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
|
|
7
|
-
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
|
|
8
|
-
}
|
|
9
|
-
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
-
export default Checkbox;
|
|
11
|
-
export type { CheckboxProps };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";"use client";var l=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var a in e)r(i,a,{get:e[a],enumerable:!0})},f=(i,e,a,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of x(e))!u.call(i,o)&&o!==a&&r(i,o,{get:()=>e[o],enumerable:!(t=h(e,o))||t.enumerable});return i};var p=(i,e,a)=>(a=i!=null?l(k(i)):{},f(e||!i||!i.__esModule?r(a,"default",{value:i,enumerable:!0}):a,i)),v=i=>f(r({},"__esModule",{value:!0}),i);var g={};y(g,{default:()=>R});module.exports=v(g);var s=require("react/jsx-runtime"),C=p(require("react")),c=p(require("@radix-ui/react-checkbox")),d=require("@radix-ui/react-icons"),n=require("../helpers/index.js"),m=require("class-variance-authority");const P=(0,m.cva)("ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled",{variants:{size:{sm:"ai-size-[14px]",base:"ai-size-4",lg:"ai-size-5"}},defaultVariants:{size:"base"}}),b=C.forwardRef(({className:i,size:e,...a},t)=>(0,s.jsx)(c.Root,{ref:t,className:(0,n.cn)(P({size:e}),i),...a,children:(0,s.jsx)(c.Indicator,{className:(0,n.cn)("ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full"),children:(0,s.jsx)(d.CheckIcon,{})})}));b.displayName=c.Root.displayName;var R=b;
|
|
2
|
-
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { CheckIcon } from '@radix-ui/react-icons'\n\nimport { cn } from '../helpers/index.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nconst checkboxVariants = cva(\n 'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled',\n {\n variants: {\n size: {\n sm: 'ai-size-[14px]',\n base: 'ai-size-4',\n lg: 'ai-size-5',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\ninterface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n ({ className, size, ...props }, ref) => (\n <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ size }), className)} {...props}>\n <CheckboxPrimitive.Indicator\n className={cn('ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full')}\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n)\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport default Checkbox\nexport type { CheckboxProps }\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAjCRC,EAAuB,oBACvBC,EAAmC,uCACnCC,EAA0B,iCAE1BC,EAAmB,+BACnBC,EAAuC,oCAEvC,MAAMC,KAAmB,OACvB,uXACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,iBACJ,KAAM,YACN,GAAI,WACN,CACF,EACA,gBAAiB,CACf,KAAM,MACR,CACF,CACF,EAMMC,EAAWN,EAAM,WACrB,CAAC,CAAE,UAAAO,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,OAC9B,OAACT,EAAkB,KAAlB,CAAuB,IAAKS,EAAK,aAAW,MAAGL,EAAiB,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAC1F,mBAACR,EAAkB,UAAlB,CACC,aAAW,MAAG,+EAA+E,EAE7F,mBAAC,cAAU,EACb,EACF,CAEJ,EACAK,EAAS,YAAcL,EAAkB,KAAK,YAE9C,IAAOJ,EAAQS",
|
|
6
|
-
"names": ["checkbox_exports", "__export", "checkbox_default", "__toCommonJS", "import_jsx_runtime", "React", "CheckboxPrimitive", "import_react_icons", "import_helpers", "import_class_variance_authority", "checkboxVariants", "Checkbox", "className", "size", "props", "ref"]
|
|
7
|
-
}
|