@trycompai/design-system 1.0.36 → 1.0.38
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/package.json
CHANGED
|
@@ -70,6 +70,8 @@ const buttonVariants = cva(
|
|
|
70
70
|
|
|
71
71
|
type ButtonProps = Omit<ButtonPrimitive.Props, 'className'> &
|
|
72
72
|
VariantProps<typeof buttonVariants> & {
|
|
73
|
+
/** Button type attribute for native button usage */
|
|
74
|
+
type?: 'button' | 'submit' | 'reset';
|
|
73
75
|
/** Show loading spinner and disable button */
|
|
74
76
|
loading?: boolean;
|
|
75
77
|
/** Icon to show on the left side of the button */
|
|
@@ -88,6 +90,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
88
90
|
iconLeft,
|
|
89
91
|
iconRight,
|
|
90
92
|
disabled,
|
|
93
|
+
type = 'button',
|
|
91
94
|
children,
|
|
92
95
|
render,
|
|
93
96
|
...props
|
|
@@ -105,6 +108,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
105
108
|
className={buttonVariants({ variant, width, size })}
|
|
106
109
|
render={render}
|
|
107
110
|
nativeButton={!render}
|
|
111
|
+
type={render ? undefined : type}
|
|
108
112
|
{...props}
|
|
109
113
|
>
|
|
110
114
|
{loading ? (
|
|
@@ -22,22 +22,28 @@ const inputGroupAddonVariants = cva(
|
|
|
22
22
|
{
|
|
23
23
|
variants: {
|
|
24
24
|
align: {
|
|
25
|
-
'inline-start': '
|
|
26
|
-
'inline-end': '
|
|
25
|
+
'inline-start': 'px-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first',
|
|
26
|
+
'inline-end': 'px-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last',
|
|
27
27
|
'block-start':
|
|
28
28
|
'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
|
|
29
29
|
'block-end':
|
|
30
30
|
'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
|
|
31
31
|
},
|
|
32
|
+
variant: {
|
|
33
|
+
default: 'bg-muted/50',
|
|
34
|
+
icon: 'bg-transparent',
|
|
35
|
+
},
|
|
32
36
|
},
|
|
33
37
|
defaultVariants: {
|
|
34
38
|
align: 'inline-start',
|
|
39
|
+
variant: 'default',
|
|
35
40
|
},
|
|
36
41
|
},
|
|
37
42
|
);
|
|
38
43
|
|
|
39
44
|
function InputGroupAddon({
|
|
40
45
|
align = 'inline-start',
|
|
46
|
+
variant = 'default',
|
|
41
47
|
...props
|
|
42
48
|
}: Omit<React.ComponentProps<'div'>, 'className'> & VariantProps<typeof inputGroupAddonVariants>) {
|
|
43
49
|
return (
|
|
@@ -45,7 +51,7 @@ function InputGroupAddon({
|
|
|
45
51
|
role="group"
|
|
46
52
|
data-slot="input-group-addon"
|
|
47
53
|
data-align={align}
|
|
48
|
-
className={inputGroupAddonVariants({ align })}
|
|
54
|
+
className={inputGroupAddonVariants({ align, variant })}
|
|
49
55
|
onClick={(e) => {
|
|
50
56
|
if ((e.target as HTMLElement).closest('button')) {
|
|
51
57
|
return;
|
|
@@ -643,7 +643,7 @@ function AppShellSearch({
|
|
|
643
643
|
return (
|
|
644
644
|
<div className={appShellSearchVariants({ searchWidth })}>
|
|
645
645
|
<InputGroup>
|
|
646
|
-
<InputGroupAddon align="inline-start">
|
|
646
|
+
<InputGroupAddon align="inline-start" variant="icon">
|
|
647
647
|
<Search />
|
|
648
648
|
</InputGroupAddon>
|
|
649
649
|
<InputGroupInput placeholder={placeholder} {...props} />
|
|
@@ -54,7 +54,7 @@ function ComboboxInput({
|
|
|
54
54
|
return (
|
|
55
55
|
<InputGroup>
|
|
56
56
|
<ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
|
|
57
|
-
<InputGroupAddon align="inline-end">
|
|
57
|
+
<InputGroupAddon align="inline-end" variant="icon">
|
|
58
58
|
{showTrigger && (
|
|
59
59
|
<InputGroupButton
|
|
60
60
|
size="icon-xs"
|