@waveso/ui 0.0.2
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/README.md +142 -0
- package/dist/alert-dialog.d.ts +36 -0
- package/dist/alert-dialog.js +149 -0
- package/dist/alert-dialog.js.map +1 -0
- package/dist/alert.d.ts +14 -0
- package/dist/alert.js +76 -0
- package/dist/alert.js.map +1 -0
- package/dist/avatar.d.ts +14 -0
- package/dist/avatar.js +100 -0
- package/dist/avatar.js.map +1 -0
- package/dist/badge.d.ts +11 -0
- package/dist/badge.js +51 -0
- package/dist/badge.js.map +1 -0
- package/dist/button.d.ts +14 -0
- package/dist/button.js +4 -0
- package/dist/button.js.map +1 -0
- package/dist/card.d.ts +14 -0
- package/dist/card.js +97 -0
- package/dist/card.js.map +1 -0
- package/dist/checkbox.d.ts +6 -0
- package/dist/checkbox.js +33 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chunk-76UQO56T.js +19 -0
- package/dist/chunk-76UQO56T.js.map +1 -0
- package/dist/chunk-L3UIJEIQ.js +41 -0
- package/dist/chunk-L3UIJEIQ.js.map +1 -0
- package/dist/chunk-OUFYQLVN.js +56 -0
- package/dist/chunk-OUFYQLVN.js.map +1 -0
- package/dist/dialog.d.ts +30 -0
- package/dist/dialog.js +138 -0
- package/dist/dialog.js.map +1 -0
- package/dist/hooks/use-mobile.d.ts +3 -0
- package/dist/hooks/use-mobile.js +20 -0
- package/dist/hooks/use-mobile.js.map +1 -0
- package/dist/input.d.ts +6 -0
- package/dist/input.js +22 -0
- package/dist/input.js.map +1 -0
- package/dist/label.d.ts +6 -0
- package/dist/label.js +20 -0
- package/dist/label.js.map +1 -0
- package/dist/lib/utils.d.ts +40 -0
- package/dist/lib/utils.js +3 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/progress.d.ts +16 -0
- package/dist/progress.js +72 -0
- package/dist/progress.js.map +1 -0
- package/dist/separator.d.ts +8 -0
- package/dist/separator.js +26 -0
- package/dist/separator.js.map +1 -0
- package/dist/skeleton.d.ts +5 -0
- package/dist/skeleton.js +17 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/spinner.d.ts +5 -0
- package/dist/spinner.js +11 -0
- package/dist/spinner.js.map +1 -0
- package/dist/switch.d.ts +10 -0
- package/dist/switch.js +29 -0
- package/dist/switch.js.map +1 -0
- package/dist/textarea.d.ts +10 -0
- package/dist/textarea.js +25 -0
- package/dist/textarea.js.map +1 -0
- package/package.json +89 -0
package/dist/button.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
declare const buttonVariants: (props?: ({
|
|
8
|
+
variant?: "link" | "default" | "solid" | "outline" | "secondary" | "ghost" | "success" | "destructive" | null | undefined;
|
|
9
|
+
size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
10
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
+
type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
|
|
12
|
+
declare function Button({ className, variant, size, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
export { Button, buttonVariants };
|
package/dist/button.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"button.js"}
|
package/dist/card.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
|
|
5
|
+
size?: "default" | "sm";
|
|
6
|
+
}): react_jsx_runtime.JSX.Element;
|
|
7
|
+
declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
9
|
+
declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
10
|
+
declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
11
|
+
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
12
|
+
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
package/dist/card.js
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
function Card({
|
|
5
|
+
className,
|
|
6
|
+
size = "default",
|
|
7
|
+
...props
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
"data-slot": "card",
|
|
13
|
+
"data-size": size,
|
|
14
|
+
className: cn(
|
|
15
|
+
"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
|
16
|
+
className
|
|
17
|
+
),
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
function CardHeader({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
"data-slot": "card-header",
|
|
27
|
+
className: cn(
|
|
28
|
+
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
|
29
|
+
className
|
|
30
|
+
),
|
|
31
|
+
...props
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
function CardTitle({ className, ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
"data-slot": "card-title",
|
|
40
|
+
className: cn(
|
|
41
|
+
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
|
42
|
+
className
|
|
43
|
+
),
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
function CardDescription({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
"data-slot": "card-description",
|
|
53
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
54
|
+
...props
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function CardAction({ className, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
"div",
|
|
61
|
+
{
|
|
62
|
+
"data-slot": "card-action",
|
|
63
|
+
className: cn(
|
|
64
|
+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
|
65
|
+
className
|
|
66
|
+
),
|
|
67
|
+
...props
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
function CardContent({ className, ...props }) {
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
"data-slot": "card-content",
|
|
76
|
+
className: cn("px-4 group-data-[size=sm]/card:px-3", className),
|
|
77
|
+
...props
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
function CardFooter({ className, ...props }) {
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
"data-slot": "card-footer",
|
|
86
|
+
className: cn(
|
|
87
|
+
"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
|
|
88
|
+
className
|
|
89
|
+
),
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
|
|
96
|
+
//# sourceMappingURL=card.js.map
|
|
97
|
+
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/card.tsx"],"names":[],"mappings":";;;AAIA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,sVAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,oSAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,SAAA,CAAU,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,sEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,gEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qCAAA,EAAuC,SAAS,CAAA;AAAA,MAC7D,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,uFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"card.js","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n <div\n data-slot=\"card\"\n data-size={size}\n className={cn(\n \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\n \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\n \"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
5
|
+
|
|
6
|
+
export { Checkbox };
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { CheckIcon } from './chunk-L3UIJEIQ.js';
|
|
2
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var Checkbox = React.forwardRef(function Checkbox2({ className, ...props }, ref) {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
Checkbox$1.Root,
|
|
10
|
+
{
|
|
11
|
+
"data-slot": "checkbox",
|
|
12
|
+
ref,
|
|
13
|
+
className: cn(
|
|
14
|
+
"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props,
|
|
18
|
+
children: /* @__PURE__ */ jsx(
|
|
19
|
+
Checkbox$1.Indicator,
|
|
20
|
+
{
|
|
21
|
+
"data-slot": "checkbox-indicator",
|
|
22
|
+
className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
|
|
23
|
+
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
});
|
|
29
|
+
Checkbox.displayName = "Checkbox";
|
|
30
|
+
|
|
31
|
+
export { Checkbox };
|
|
32
|
+
//# sourceMappingURL=checkbox.js.map
|
|
33
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/checkbox.tsx"],"names":["Checkbox","CheckboxPrimitive"],"mappings":";;;;;;AAWA,IAAM,QAAA,GAAiB,iBAGrB,SAASA,SAAAA,CAAS,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAChD,EAAA,uBACE,GAAA;AAAA,IAACC,UAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,mqBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACA,UAAA,CAAkB,SAAA;AAAA,QAAlB;AAAA,UACC,WAAA,EAAU,oBAAA;AAAA,UACV,SAAA,EAAU,yEAAA;AAAA,UAEV,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb;AAAA,GACF;AAEJ,CAAC;AAED,QAAA,CAAS,WAAA,GAAc,UAAA","file":"checkbox.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"./lib/utils\"\nimport { CheckIcon } from \"./lib/internal-icons\"\n\ntype CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\nconst Checkbox = React.forwardRef<\n React.ComponentRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(function Checkbox({ className, ...props }, ref) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n ref={ref}\n className={cn(\n \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n})\n\nCheckbox.displayName = \"Checkbox\"\n\nexport { Checkbox }\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
|
|
4
|
+
function cn(...inputs) {
|
|
5
|
+
const hasFn = inputs.some((v) => typeof v === "function");
|
|
6
|
+
if (!hasFn) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
return (state) => {
|
|
10
|
+
const resolved = inputs.map(
|
|
11
|
+
(v) => typeof v === "function" ? v(state) : v
|
|
12
|
+
);
|
|
13
|
+
return twMerge(clsx(resolved));
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { cn };
|
|
18
|
+
//# sourceMappingURL=chunk-76UQO56T.js.map
|
|
19
|
+
//# sourceMappingURL=chunk-76UQO56T.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;AAyCO,SAAS,MAAa,MAAA,EAA0B;AACrD,EAAA,MAAM,QAAQ,MAAA,CAAO,IAAA,CAAK,CAAC,CAAA,KAAM,OAAO,MAAM,UAAU,CAAA;AAExD,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAsB,CAAC,CAAA;AAAA,EAC7C;AAEA,EAAA,OAAO,CAAC,KAAA,KAAiB;AACvB,IAAA,MAAM,WAAW,MAAA,CAAO,GAAA;AAAA,MAAI,CAAC,CAAA,KAC3B,OAAO,MAAM,UAAA,GAAc,CAAA,CAA+B,KAAK,CAAA,GAAI;AAAA,KACrE;AAEA,IAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,QAAwB,CAAC,CAAA;AAAA,EAC/C,CAAA;AACF","file":"chunk-76UQO56T.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * `cn()` is the single className helper.\n *\n * It does two things:\n * - Combines conditional class values (via `clsx`).\n * - Dedupes/conflict-resolves Tailwind utilities (via `tailwind-merge`).\n *\n * Why the overloads?\n * - Base UI primitives support `className` as either a string **or** a `(state) => string` function.\n * - DOM elements (`div`, `textarea`, etc.) only accept `className: string`.\n *\n * So `cn()` is overloaded:\n * - If you pass only string/clsx values, it returns a **string**.\n * - If you pass any function-valued input, it returns a **(state) => string** function.\n *\n * Examples:\n * ```ts\n * // DOM element (string only)\n * <div className={cn(\"p-4\", isActive && \"bg-muted\")} />\n *\n * // Base UI primitive (state function)\n * <SomeBaseUiThing\n * className={cn(\n * \"px-2\",\n * (s) => s.disabled && \"opacity-50\",\n * (s) => s.active && \"bg-muted\",\n * )}\n * />\n *\n * // Important: DOM elements only accept string className.\n * // So only pass string/clsx values to `cn()` for DOM elements.\n * ```\n */\n\ntype CnValue<State> = ClassValue | ((state: State) => ClassValue);\n\nexport function cn(...inputs: ClassValue[]): string;\nexport function cn<State>(...inputs: CnValue<State>[]): (state: State) => string;\nexport function cn<State>(...inputs: CnValue<State>[]) {\n const hasFn = inputs.some((v) => typeof v === \"function\");\n\n if (!hasFn) {\n return twMerge(clsx(inputs as ClassValue[]));\n }\n\n return (state: State) => {\n const resolved = inputs.map((v) =>\n typeof v === \"function\" ? (v as (s: State) => ClassValue)(state) : v,\n );\n\n return twMerge(clsx(resolved as ClassValue[]));\n };\n}\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var SVG_BASE = {
|
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
6
|
+
width: 24,
|
|
7
|
+
height: 24,
|
|
8
|
+
viewBox: "0 0 24 24",
|
|
9
|
+
fill: "none",
|
|
10
|
+
stroke: "currentColor",
|
|
11
|
+
strokeWidth: 2,
|
|
12
|
+
strokeLinecap: "round",
|
|
13
|
+
strokeLinejoin: "round"
|
|
14
|
+
};
|
|
15
|
+
function CheckIcon(props) {
|
|
16
|
+
return /* @__PURE__ */ jsx("svg", { ...SVG_BASE, ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
|
|
17
|
+
}
|
|
18
|
+
function CloseIcon(props) {
|
|
19
|
+
return /* @__PURE__ */ jsxs("svg", { ...SVG_BASE, ...props, children: [
|
|
20
|
+
/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
|
|
21
|
+
/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
|
|
22
|
+
] });
|
|
23
|
+
}
|
|
24
|
+
var LoaderIcon = forwardRef(
|
|
25
|
+
function LoaderIcon2(props, ref) {
|
|
26
|
+
return /* @__PURE__ */ jsxs("svg", { ...SVG_BASE, ref, ...props, children: [
|
|
27
|
+
/* @__PURE__ */ jsx("path", { d: "M12 2v4" }),
|
|
28
|
+
/* @__PURE__ */ jsx("path", { d: "m16.2 7.8 2.9-2.9" }),
|
|
29
|
+
/* @__PURE__ */ jsx("path", { d: "M18 12h4" }),
|
|
30
|
+
/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 2.9 2.9" }),
|
|
31
|
+
/* @__PURE__ */ jsx("path", { d: "M12 18v4" }),
|
|
32
|
+
/* @__PURE__ */ jsx("path", { d: "m4.9 19.1 2.9-2.9" }),
|
|
33
|
+
/* @__PURE__ */ jsx("path", { d: "M2 12h4" }),
|
|
34
|
+
/* @__PURE__ */ jsx("path", { d: "m4.9 4.9 2.9 2.9" })
|
|
35
|
+
] });
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
export { CheckIcon, CloseIcon, LoaderIcon };
|
|
40
|
+
//# sourceMappingURL=chunk-L3UIJEIQ.js.map
|
|
41
|
+
//# sourceMappingURL=chunk-L3UIJEIQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/internal-icons.tsx"],"names":["LoaderIcon"],"mappings":";;;AAUA,IAAM,QAAA,GAAW;AAAA,EACf,KAAA,EAAO,4BAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,MAAA,EAAQ,EAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,IAAA,EAAM,MAAA;AAAA,EACN,MAAA,EAAQ,cAAA;AAAA,EACR,WAAA,EAAa,CAAA;AAAA,EACb,aAAA,EAAe,OAAA;AAAA,EACf,cAAA,EAAgB;AAClB,CAAA;AA2CO,SAAS,UAAU,KAAA,EAAkB;AAC1C,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,QAAA,EAAW,GAAG,OACrB,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,iBAAA,EAAkB,CAAA,EAC5B,CAAA;AAEJ;AAEO,SAAS,UAAU,KAAA,EAAkB;AAC1C,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,QAAA,EAAW,GAAG,KAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EACvB,CAAA;AAEJ;AAqDO,IAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,4BACG,KAAA,EAAA,EAAK,GAAG,QAAA,EAAU,GAAA,EAAW,GAAG,KAAA,EAC/B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,sBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,mBAAA,EAAoB,CAAA;AAAA,sBAC5B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,sBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oBAAA,EAAqB,CAAA;AAAA,sBAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW,CAAA;AAAA,sBACnB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,mBAAA,EAAoB,CAAA;AAAA,sBAC5B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,SAAA,EAAU,CAAA;AAAA,sBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kBAAA,EAAmB;AAAA,KAAA,EAC7B,CAAA;AAAA,EAEJ;AACF","file":"chunk-L3UIJEIQ.js","sourcesContent":["/**\n * Internal-only SVG icons used by wave-ui components.\n *\n * NOT a public entry point — bundled into shared chunks via tsup splitting.\n */\n\nimport { forwardRef } from 'react';\n\ntype IconProps = React.SVGProps<SVGSVGElement>;\n\nconst SVG_BASE = {\n xmlns: 'http://www.w3.org/2000/svg',\n width: 24,\n height: 24,\n viewBox: '0 0 24 24',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n} as const;\n\n// ---------------------------------------------------------------------------\n// Navigation chevrons\n// ---------------------------------------------------------------------------\n\nexport function ChevronDownIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\nexport function ChevronUpIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m18 15-6-6-6 6\" />\n </svg>\n );\n}\n\nexport function ChevronLeftIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n );\n}\n\n\nexport function ChevronRightIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n );\n}\n\n// ---------------------------------------------------------------------------\n// Actions\n// ---------------------------------------------------------------------------\n\nexport function CheckIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n );\n}\n\nexport function CloseIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n\nexport function MinusIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"M5 12h14\" />\n </svg>\n );\n}\n\nexport function EllipsisIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"19\" cy=\"12\" r=\"1\" />\n <circle cx=\"5\" cy=\"12\" r=\"1\" />\n </svg>\n );\n}\n\nexport function EllipsisVerticalIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"1\" />\n <circle cx=\"12\" cy=\"5\" r=\"1\" />\n <circle cx=\"12\" cy=\"19\" r=\"1\" />\n </svg>\n );\n}\n\nexport function ChevronsUpDownIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n );\n}\n\n// ---------------------------------------------------------------------------\n// UI chrome\n// ---------------------------------------------------------------------------\n\nexport function SidebarPanelIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n <path d=\"M9 3v18\" />\n </svg>\n );\n}\n\n/** `forwardRef` because `Spinner` exposes this as `React.ComponentProps<\"svg\">`. */\nexport const LoaderIcon = forwardRef<SVGSVGElement, IconProps>(\n function LoaderIcon(props, ref) {\n return (\n <svg {...SVG_BASE} ref={ref} {...props}>\n <path d=\"M12 2v4\" />\n <path d=\"m16.2 7.8 2.9-2.9\" />\n <path d=\"M18 12h4\" />\n <path d=\"m16.2 16.2 2.9 2.9\" />\n <path d=\"M12 18v4\" />\n <path d=\"m4.9 19.1 2.9-2.9\" />\n <path d=\"M2 12h4\" />\n <path d=\"m4.9 4.9 2.9 2.9\" />\n </svg>\n );\n },\n);\n\n// ---------------------------------------------------------------------------\n// Toast status icons\n// ---------------------------------------------------------------------------\n\nexport function AlertTriangleIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n}\n\nexport function SuccessCircleIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n <path d=\"m9 11 3 3L22 4\" />\n </svg>\n );\n}\n\nexport function InfoCircleIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M12 16v-4\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n}\n\nexport function ErrorCircleIcon(props: IconProps) {\n return (\n <svg {...SVG_BASE} {...props}>\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m15 9-6 6\" />\n <path d=\"m9 9 6 6\" />\n </svg>\n );\n}\n"]}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
2
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var buttonVariants = cva(
|
|
7
|
+
"cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: "bg-primary/10 text-primary hover:bg-primary/20",
|
|
12
|
+
solid: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
13
|
+
outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
|
14
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
15
|
+
ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
|
|
16
|
+
success: "bg-success/10 hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/20 text-success focus-visible:border-success/40 dark:hover:bg-success/30",
|
|
17
|
+
destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
|
|
18
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
22
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
23
|
+
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
24
|
+
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
|
25
|
+
icon: "size-8",
|
|
26
|
+
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
27
|
+
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
|
28
|
+
"icon-lg": "size-9"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
variant: "default",
|
|
33
|
+
size: "default"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
function Button({
|
|
38
|
+
className,
|
|
39
|
+
variant = "default",
|
|
40
|
+
size = "default",
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
Button$1,
|
|
45
|
+
{
|
|
46
|
+
"data-slot": "button",
|
|
47
|
+
nativeButton: props.render ? false : void 0,
|
|
48
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
49
|
+
...props
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export { Button, buttonVariants };
|
|
55
|
+
//# sourceMappingURL=chunk-OUFYQLVN.js.map
|
|
56
|
+
//# sourceMappingURL=chunk-OUFYQLVN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx"],"names":["ButtonPrimitive"],"mappings":";;;;;AAQA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,ikBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gDAAA;AAAA,QACT,KAAA,EAAO,wDAAA;AAAA,QACP,OAAA,EAAS,iLAAA;AAAA,QACT,SAAA,EAAW,iIAAA;AAAA,QACX,KAAA,EAAO,kHAAA;AAAA,QACP,OAAA,EAAS,6LAAA;AAAA,QACT,WAAA,EAAa,6NAAA;AAAA,QACb,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,sFAAA;AAAA,QACT,EAAA,EAAI,+MAAA;AAAA,QACJ,EAAA,EAAI,yNAAA;AAAA,QACJ,EAAA,EAAI,sFAAA;AAAA,QACJ,IAAA,EAAM,QAAA;AAAA,QACN,SAAA,EACE,yHAAA;AAAA,QACF,SAAA,EACE,oFAAA;AAAA,QACF,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAIA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,YAAA,EAAc,KAAA,CAAM,MAAA,GAAS,KAAA,GAAQ,MAAA;AAAA,MACrC,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-OUFYQLVN.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst buttonVariants = cva(\n \"cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary/10 text-primary hover:bg-primary/20\",\n solid: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n success: \"bg-success/10 hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/20 text-success focus-visible:border-success/40 dark:hover:bg-success/30\",\n destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\ntype ButtonProps = React.ComponentProps<typeof ButtonPrimitive> & VariantProps<typeof buttonVariants>\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonProps) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n nativeButton={props.render ? false : undefined}\n className={cn(buttonVariants({ variant, size }), className)}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
|
package/dist/dialog.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
4
|
+
|
|
5
|
+
type DialogProps = React.ComponentProps<typeof Dialog$1.Root>;
|
|
6
|
+
type DialogTriggerProps = React.ComponentProps<typeof Dialog$1.Trigger>;
|
|
7
|
+
type DialogPortalProps = React.ComponentProps<typeof Dialog$1.Portal>;
|
|
8
|
+
type DialogCloseProps = React.ComponentProps<typeof Dialog$1.Close>;
|
|
9
|
+
type DialogOverlayProps = React.ComponentProps<typeof Dialog$1.Backdrop>;
|
|
10
|
+
type DialogPopupProps = React.ComponentProps<typeof Dialog$1.Popup>;
|
|
11
|
+
type DialogTitleProps = React.ComponentProps<typeof Dialog$1.Title>;
|
|
12
|
+
type DialogDescriptionProps = React.ComponentProps<typeof Dialog$1.Description>;
|
|
13
|
+
type DialogContentProps = DialogPopupProps & {
|
|
14
|
+
showCloseButton?: boolean;
|
|
15
|
+
};
|
|
16
|
+
type DialogFooterProps = React.ComponentProps<"div"> & {
|
|
17
|
+
showCloseButton?: boolean;
|
|
18
|
+
};
|
|
19
|
+
declare function Dialog({ ...props }: DialogProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function DialogTrigger({ ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
declare function DialogPortal({ ...props }: DialogPortalProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
declare function DialogClose({ ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
declare function DialogOverlay({ className, ...props }: DialogOverlayProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
26
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: DialogFooterProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
declare function DialogTitle({ className, ...props }: DialogTitleProps): react_jsx_runtime.JSX.Element;
|
|
28
|
+
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
29
|
+
|
|
30
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
|
package/dist/dialog.js
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { Button } from './chunk-OUFYQLVN.js';
|
|
2
|
+
import { CloseIcon } from './chunk-L3UIJEIQ.js';
|
|
3
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
4
|
+
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function Dialog({ ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
|
|
9
|
+
}
|
|
10
|
+
function DialogTrigger({ ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
12
|
+
}
|
|
13
|
+
function DialogPortal({ ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
|
|
15
|
+
}
|
|
16
|
+
function DialogClose({ ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
|
|
18
|
+
}
|
|
19
|
+
function DialogOverlay({
|
|
20
|
+
className,
|
|
21
|
+
...props
|
|
22
|
+
}) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
Dialog$1.Backdrop,
|
|
25
|
+
{
|
|
26
|
+
"data-slot": "dialog-overlay",
|
|
27
|
+
className: cn(
|
|
28
|
+
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
|
|
29
|
+
className
|
|
30
|
+
),
|
|
31
|
+
...props
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
function DialogContent({
|
|
36
|
+
className,
|
|
37
|
+
children,
|
|
38
|
+
showCloseButton = true,
|
|
39
|
+
...props
|
|
40
|
+
}) {
|
|
41
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { children: [
|
|
42
|
+
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
43
|
+
/* @__PURE__ */ jsxs(
|
|
44
|
+
Dialog$1.Popup,
|
|
45
|
+
{
|
|
46
|
+
"data-slot": "dialog-content",
|
|
47
|
+
className: cn(
|
|
48
|
+
"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm",
|
|
49
|
+
className
|
|
50
|
+
),
|
|
51
|
+
...props,
|
|
52
|
+
children: [
|
|
53
|
+
children,
|
|
54
|
+
showCloseButton && /* @__PURE__ */ jsxs(
|
|
55
|
+
Dialog$1.Close,
|
|
56
|
+
{
|
|
57
|
+
"data-slot": "dialog-close",
|
|
58
|
+
render: /* @__PURE__ */ jsx(
|
|
59
|
+
Button,
|
|
60
|
+
{
|
|
61
|
+
variant: "ghost",
|
|
62
|
+
className: "absolute top-2 right-2",
|
|
63
|
+
size: "icon-sm"
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx(CloseIcon, {}),
|
|
68
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
] });
|
|
76
|
+
}
|
|
77
|
+
function DialogHeader({ className, ...props }) {
|
|
78
|
+
return /* @__PURE__ */ jsx(
|
|
79
|
+
"div",
|
|
80
|
+
{
|
|
81
|
+
"data-slot": "dialog-header",
|
|
82
|
+
className: cn("flex flex-col gap-2", className),
|
|
83
|
+
...props
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
function DialogFooter({
|
|
88
|
+
className,
|
|
89
|
+
showCloseButton = false,
|
|
90
|
+
children,
|
|
91
|
+
...props
|
|
92
|
+
}) {
|
|
93
|
+
return /* @__PURE__ */ jsxs(
|
|
94
|
+
"div",
|
|
95
|
+
{
|
|
96
|
+
"data-slot": "dialog-footer",
|
|
97
|
+
className: cn(
|
|
98
|
+
"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
|
|
99
|
+
className
|
|
100
|
+
),
|
|
101
|
+
...props,
|
|
102
|
+
children: [
|
|
103
|
+
children,
|
|
104
|
+
showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Close" })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
function DialogTitle({ className, ...props }) {
|
|
110
|
+
return /* @__PURE__ */ jsx(
|
|
111
|
+
Dialog$1.Title,
|
|
112
|
+
{
|
|
113
|
+
"data-slot": "dialog-title",
|
|
114
|
+
className: cn("text-base leading-none font-medium", className),
|
|
115
|
+
...props
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
function DialogDescription({
|
|
120
|
+
className,
|
|
121
|
+
...props
|
|
122
|
+
}) {
|
|
123
|
+
return /* @__PURE__ */ jsx(
|
|
124
|
+
Dialog$1.Description,
|
|
125
|
+
{
|
|
126
|
+
"data-slot": "dialog-description",
|
|
127
|
+
className: cn(
|
|
128
|
+
"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
|
|
129
|
+
className
|
|
130
|
+
),
|
|
131
|
+
...props
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
|
|
137
|
+
//# sourceMappingURL=dialog.js.map
|
|
138
|
+
//# sourceMappingURL=dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/dialog.tsx"],"names":["DialogPrimitive"],"mappings":"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","file":"dialog.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean\n}\n\nfunction Dialog({ ...props }: DialogProps) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogOverlayProps) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogContentProps) {\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n render={\n <Button\n variant=\"ghost\"\n className=\"absolute top-2 right-2\"\n size=\"icon-sm\"\n />\n }\n >\n <CloseIcon />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Popup>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: DialogFooterProps) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n Close\n </DialogPrimitive.Close>\n )}\n </div>\n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn(\"text-base leading-none font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
var MOBILE_BREAKPOINT = 768;
|
|
4
|
+
function useIsMobile() {
|
|
5
|
+
const [isMobile, setIsMobile] = React.useState(void 0);
|
|
6
|
+
React.useEffect(() => {
|
|
7
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
8
|
+
const onChange = () => {
|
|
9
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
10
|
+
};
|
|
11
|
+
mql.addEventListener("change", onChange);
|
|
12
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
13
|
+
return () => mql.removeEventListener("change", onChange);
|
|
14
|
+
}, []);
|
|
15
|
+
return !!isMobile;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { useIsMobile };
|
|
19
|
+
//# sourceMappingURL=use-mobile.js.map
|
|
20
|
+
//# sourceMappingURL=use-mobile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":";;AAIA,IAAM,iBAAA,GAAoB,GAAA;AAEnB,SAAS,WAAA,GAAc;AAC5B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAU,eAA8B,MAAS,CAAA;AAE7E,EAAM,gBAAU,MAAM;AACpB,IAAA,MAAM,MAAM,MAAA,CAAO,UAAA,CAAW,CAAA,YAAA,EAAe,iBAAA,GAAoB,CAAC,CAAA,GAAA,CAAK,CAAA;AACvE,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,WAAA,CAAY,MAAA,CAAO,aAAa,iBAAiB,CAAA;AAAA,IACnD,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,IAAA,WAAA,CAAY,MAAA,CAAO,aAAa,iBAAiB,CAAA;AACjD,IAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AAAA,EACzD,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,CAAC,CAAC,QAAA;AACX","file":"use-mobile.js","sourcesContent":["'use client';\n\nimport * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => {\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n };\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n"]}
|
package/dist/input.d.ts
ADDED
package/dist/input.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { cn } from './chunk-76UQO56T.js';
|
|
2
|
+
import { Input as Input$1 } from '@base-ui/react/input';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function Input({ className, type, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
Input$1,
|
|
8
|
+
{
|
|
9
|
+
type,
|
|
10
|
+
"data-slot": "input",
|
|
11
|
+
className: cn(
|
|
12
|
+
"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
|
|
13
|
+
className
|
|
14
|
+
),
|
|
15
|
+
...props
|
|
16
|
+
}
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { Input };
|
|
21
|
+
//# sourceMappingURL=input.js.map
|
|
22
|
+
//# sourceMappingURL=input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/input.tsx"],"names":["InputPrimitive"],"mappings":";;;;AAKA,SAAS,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,OAAM,EAAkC;AAC3E,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,6oBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"input.js","sourcesContent":["import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"./lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n <InputPrimitive\n type={type}\n data-slot=\"input\"\n className={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Input }\n"]}
|