@florianke/components 0.0.2 → 0.0.6
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 +467 -31
- package/dist/alert-dialog.d.mts +13 -0
- package/dist/alert-dialog.d.mts.map +1 -0
- package/dist/alert-dialog.mjs +13 -0
- package/dist/alert-dialog.mjs.map +1 -0
- package/dist/avatar.mjs +2 -2
- package/dist/button.d.mts +1 -1
- package/dist/button.d.mts.map +1 -1
- package/dist/button.mjs +4 -3
- package/dist/button.mjs.map +1 -1
- package/dist/card.mjs +1 -1
- package/dist/components/alert-dialog/alert-dialog.d.mts +35 -0
- package/dist/components/alert-dialog/alert-dialog.d.mts.map +1 -0
- package/dist/components/alert-dialog/alert-dialog.mjs +50 -0
- package/dist/components/alert-dialog/alert-dialog.mjs.map +1 -0
- package/dist/components/select/select.d.mts +42 -0
- package/dist/components/select/select.d.mts.map +1 -0
- package/dist/components/select/select.mjs +102 -0
- package/dist/components/select/select.mjs.map +1 -0
- package/dist/components/toast/toast.d.mts +45 -0
- package/dist/components/toast/toast.d.mts.map +1 -0
- package/dist/components/toast/toast.mjs +156 -0
- package/dist/components/toast/toast.mjs.map +1 -0
- package/dist/components/tooltip/tooltip.d.mts +30 -0
- package/dist/components/tooltip/tooltip.d.mts.map +1 -0
- package/dist/components/tooltip/tooltip.mjs +40 -0
- package/dist/components/tooltip/tooltip.mjs.map +1 -0
- package/dist/dropdown-menu.mjs +1 -1
- package/dist/field.d.mts +11 -0
- package/dist/field.d.mts.map +1 -0
- package/dist/field.mjs +14 -0
- package/dist/field.mjs.map +1 -0
- package/dist/heading.d.mts +17 -0
- package/dist/heading.d.mts.map +1 -0
- package/dist/heading.mjs +20 -0
- package/dist/heading.mjs.map +1 -0
- package/dist/hint.d.mts +17 -0
- package/dist/hint.d.mts.map +1 -0
- package/dist/hint.mjs +22 -0
- package/dist/hint.mjs.map +1 -0
- package/dist/hooks/use-confirm.d.mts +23 -0
- package/dist/hooks/use-confirm.d.mts.map +1 -0
- package/dist/hooks/use-confirm.mjs +97 -0
- package/dist/hooks/use-confirm.mjs.map +1 -0
- package/dist/index.d.mts +11 -1
- package/dist/index.mjs +12 -2
- package/dist/input.d.mts +1 -0
- package/dist/input.d.mts.map +1 -1
- package/dist/input.mjs +74 -7
- package/dist/input.mjs.map +1 -1
- package/dist/label.d.mts +20 -0
- package/dist/label.d.mts.map +1 -0
- package/dist/label.mjs +19 -0
- package/dist/label.mjs.map +1 -0
- package/dist/{cn-BpvCVwZv.mjs → lib/cn.mjs} +2 -2
- package/dist/lib/cn.mjs.map +1 -0
- package/dist/providers.d.mts +12 -0
- package/dist/providers.d.mts.map +1 -0
- package/dist/providers.mjs +14 -0
- package/dist/providers.mjs.map +1 -0
- package/dist/select.d.mts +2 -38
- package/dist/select.d.mts.map +1 -1
- package/dist/select.mjs +2 -98
- package/dist/select.mjs.map +1 -1
- package/dist/text.d.mts +30 -0
- package/dist/text.d.mts.map +1 -0
- package/dist/text.mjs +37 -0
- package/dist/text.mjs.map +1 -0
- package/dist/toast.d.mts +18 -0
- package/dist/toast.d.mts.map +1 -0
- package/dist/toast.mjs +17 -0
- package/dist/toast.mjs.map +1 -0
- package/dist/tooltip.d.mts +11 -0
- package/dist/tooltip.d.mts.map +1 -0
- package/dist/tooltip.mjs +11 -0
- package/dist/tooltip.mjs.map +1 -0
- package/package.json +41 -1
- package/src/styles.css +13 -1
- package/dist/cn-BpvCVwZv.mjs.map +0 -1
package/dist/avatar.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { cn } from "./lib/cn.mjs";
|
|
3
3
|
import { useInitials } from "./hooks/use-initials.mjs";
|
|
4
4
|
import "react";
|
|
5
|
-
import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
|
|
6
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
|
|
7
7
|
//#region src/components/avatar/avatar.tsx
|
|
8
8
|
const rootSizes = {
|
|
9
9
|
small: "size-7",
|
package/dist/button.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import { Button as Button$1 } from "@base-ui/react/button";
|
|
3
3
|
|
|
4
4
|
//#region src/components/button/button.d.ts
|
|
5
|
-
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "link";
|
|
5
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "link" | "destructive";
|
|
6
6
|
type ButtonSize = "sm" | "md";
|
|
7
7
|
type ButtonProps = React.ComponentPropsWithoutRef<typeof Button$1> & {
|
|
8
8
|
variant?: ButtonVariant;
|
package/dist/button.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.mts","names":[],"sources":["../src/components/button/button.tsx"],"mappings":";;;;KAIK,aAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"button.d.mts","names":[],"sources":["../src/components/button/button.tsx"],"mappings":";;;;KAIK,aAAA;AAAA,KAOA,UAAA;AAAA,KAEA,WAAA,GAAc,KAAA,CAAM,wBAAA,QAAgC,QAAA;EACvD,OAAA,GAAU,aAAA;EACV,IAAA,GAAO,UAAA;AAAA;AAAA,iBAuBO,MAAA,CAAA;EACd,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,KAAA,CAAA,GAAA,CAAA,OAAA"}
|
package/dist/button.mjs
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { cn } from "./lib/cn.mjs";
|
|
2
2
|
import "react";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
3
|
import { Button as Button$1 } from "@base-ui/react/button";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/button/button.tsx
|
|
6
6
|
const variants = {
|
|
7
7
|
primary: "bg-(--foreground) text-(--background) hover:bg-(--foreground)/85 active:bg-(--foreground)/75",
|
|
8
8
|
secondary: "bg-(--border) text-(--foreground) hover:bg-(--input-border) active:bg-(--input-border)",
|
|
9
9
|
outline: "border border-(--border) bg-transparent text-(--foreground) hover:bg-(--muted) active:bg-(--border)",
|
|
10
10
|
ghost: "text-(--foreground) hover:bg-(--muted) active:bg-(--border)",
|
|
11
|
-
link: "h-auto p-0 text-(--foreground) underline-offset-4 hover:underline"
|
|
11
|
+
link: "h-auto p-0 text-(--foreground) underline-offset-4 hover:underline",
|
|
12
|
+
destructive: "bg-(--destructive) text-white hover:bg-(--destructive)/90 active:bg-(--destructive)/80 dark:bg-(--destructive)/60"
|
|
12
13
|
};
|
|
13
14
|
const sizes = {
|
|
14
15
|
sm: "h-7 rounded-md px-3 gap-1.5 text-[12px] [&_svg]:size-3.5 [&_svg]:shrink-0",
|
package/dist/button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.mjs","names":["BaseButton"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/cn\";\n\ntype ButtonVariant
|
|
1
|
+
{"version":3,"file":"button.mjs","names":["BaseButton"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/cn\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"outline\"\n | \"ghost\"\n | \"link\"\n | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\";\n\ntype ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {\n variant?: ButtonVariant;\n size?: ButtonSize;\n};\n\nconst variants: Record<ButtonVariant, string> = {\n primary:\n \"bg-(--foreground) text-(--background) hover:bg-(--foreground)/85 active:bg-(--foreground)/75\",\n secondary:\n \"bg-(--border) text-(--foreground) hover:bg-(--input-border) active:bg-(--input-border)\",\n outline:\n \"border border-(--border) bg-transparent text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n ghost:\n \"text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n link:\n \"h-auto p-0 text-(--foreground) underline-offset-4 hover:underline\",\n destructive:\n \"bg-(--destructive) text-white hover:bg-(--destructive)/90 active:bg-(--destructive)/80 dark:bg-(--destructive)/60\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n sm: \"h-7 rounded-md px-3 gap-1.5 text-[12px] [&_svg]:size-3.5 [&_svg]:shrink-0\",\n md: \"h-8 rounded-md px-4 gap-2 text-[14px] [&_svg]:size-4 [&_svg]:shrink-0\",\n};\n\nexport function Button({\n className,\n variant = \"primary\",\n size = \"md\",\n ...props\n}: ButtonProps) {\n return (\n <BaseButton\n className={cn(\n \"inline-flex items-center justify-center font-medium transition-colors\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30\",\n variants[variant],\n variant !== \"link\" && sizes[size],\n className,\n )}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;AAkBA,MAAM,WAA0C;CAC9C,SACE;CACF,WACE;CACF,SACE;CACF,OACE;CACF,MACE;CACF,aACE;CACH;AAED,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,SACW;AACd,QACE,oBAACA,UAAD;EACE,WAAW,GACT,yEACA,oDACA,kFACA,SAAS,UACT,YAAY,UAAU,MAAM,OAC5B,UACD;EACD,GAAI;EACJ,CAAA"}
|
package/dist/card.mjs
CHANGED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
3
|
+
|
|
4
|
+
//#region src/components/alert-dialog/alert-dialog.d.ts
|
|
5
|
+
type AlertDialogRootProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Root>;
|
|
6
|
+
declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
|
|
7
|
+
type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Trigger>;
|
|
8
|
+
declare function AlertDialogTrigger({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: AlertDialogTriggerProps): React.JSX.Element;
|
|
12
|
+
type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Popup>;
|
|
13
|
+
declare function AlertDialogContent({
|
|
14
|
+
className,
|
|
15
|
+
children,
|
|
16
|
+
...props
|
|
17
|
+
}: AlertDialogContentProps): React.JSX.Element;
|
|
18
|
+
type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Title>;
|
|
19
|
+
declare function AlertDialogTitle({
|
|
20
|
+
className,
|
|
21
|
+
...props
|
|
22
|
+
}: AlertDialogTitleProps): React.JSX.Element;
|
|
23
|
+
type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Description>;
|
|
24
|
+
declare function AlertDialogDescription({
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: AlertDialogDescriptionProps): React.JSX.Element;
|
|
28
|
+
type AlertDialogCloseProps = React.ComponentPropsWithoutRef<typeof AlertDialog.Close>;
|
|
29
|
+
declare function AlertDialogClose({
|
|
30
|
+
render,
|
|
31
|
+
...props
|
|
32
|
+
}: AlertDialogCloseProps): React.JSX.Element;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger };
|
|
35
|
+
//# sourceMappingURL=alert-dialog.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.mts","names":[],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"mappings":";;;;KAQK,oBAAA,GAAuB,KAAA,CAAM,wBAAA,QACzB,WAAA,CAAgB,IAAA;AAAA,iBAGT,eAAA,CAAgB,KAAA,EAAO,oBAAA,GAAoB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAItD,uBAAA,GAA0B,KAAA,CAAM,wBAAA,QAC5B,WAAA,CAAgB,OAAA;AAAA,iBAGT,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,uBAAA,GAAuB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAY9E,uBAAA,GAA0B,KAAA,CAAM,wBAAA,QAC5B,WAAA,CAAgB,KAAA;AAAA,iBAGT,kBAAA,CAAA;EACd,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA0BrB,qBAAA,GAAwB,KAAA,CAAM,wBAAA,QAC1B,WAAA,CAAgB,KAAA;AAAA,iBAGT,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAS1E,2BAAA,GAA8B,KAAA,CAAM,wBAAA,QAChC,WAAA,CAAgB,WAAA;AAAA,iBAGT,sBAAA,CAAA;EACd,SAAA;EAAA,GACG;AAAA,GACF,2BAAA,GAA2B,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAUzB,qBAAA,GAAwB,KAAA,CAAM,wBAAA,QAC1B,WAAA,CAAgB,KAAA;AAAA,iBAGT,gBAAA,CAAA;EAAmB,MAAA;EAAA,GAAW;AAAA,GAAS,qBAAA,GAAqB,KAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/cn.mjs";
|
|
3
|
+
import { Button } from "../../button.mjs";
|
|
4
|
+
import { Text } from "../../text.mjs";
|
|
5
|
+
import "react";
|
|
6
|
+
import { AlertDialog } from "@base-ui/react/alert-dialog";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
//#region src/components/alert-dialog/alert-dialog.tsx
|
|
9
|
+
function AlertDialogRoot(props) {
|
|
10
|
+
return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
|
|
11
|
+
}
|
|
12
|
+
function AlertDialogTrigger({ className, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
|
|
14
|
+
className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30", className),
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function AlertDialogContent({ className, children, ...props }) {
|
|
19
|
+
return /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: cn("fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 dark:bg-black/50", "data-starting-style:opacity-0 data-ending-style:opacity-0", "supports-[-webkit-touch-callout:none]:absolute") }), /* @__PURE__ */ jsx(AlertDialog.Popup, {
|
|
20
|
+
className: cn("fixed top-1/2 left-1/2 z-50 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-(--border) bg-(--popover) p-4 text-(--popover-foreground) shadow-lg outline-none", "transition-[transform,opacity] duration-150 ease-out", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
21
|
+
...props,
|
|
22
|
+
children
|
|
23
|
+
})] });
|
|
24
|
+
}
|
|
25
|
+
function AlertDialogTitle({ className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(AlertDialog.Title, {
|
|
27
|
+
className: cn("text-base font-semibold", className),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function AlertDialogDescription({ className, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(AlertDialog.Description, {
|
|
33
|
+
render: /* @__PURE__ */ jsx(Text, {
|
|
34
|
+
as: "p",
|
|
35
|
+
size: "base"
|
|
36
|
+
}),
|
|
37
|
+
className: cn("text-(--muted-foreground)", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function AlertDialogClose({ render, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx(AlertDialog.Close, {
|
|
43
|
+
render: render ?? /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
44
|
+
...props
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
//#endregion
|
|
48
|
+
export { AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger };
|
|
49
|
+
|
|
50
|
+
//# sourceMappingURL=alert-dialog.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.mjs","names":["BaseAlertDialog"],"sources":["../../../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"../button/button\";\nimport { Text } from \"../text/text\";\n\ntype AlertDialogRootProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Root\n>;\n\nexport function AlertDialogRoot(props: AlertDialogRootProps) {\n return <BaseAlertDialog.Root {...props} />;\n}\n\ntype AlertDialogTriggerProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Trigger\n>;\n\nexport function AlertDialogTrigger({ className, ...props }: AlertDialogTriggerProps) {\n return (\n <BaseAlertDialog.Trigger\n className={cn(\n \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype AlertDialogContentProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Popup\n>;\n\nexport function AlertDialogContent({\n className,\n children,\n ...props\n}: AlertDialogContentProps) {\n return (\n <BaseAlertDialog.Portal>\n <BaseAlertDialog.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 dark:bg-black/50\",\n \"data-starting-style:opacity-0 data-ending-style:opacity-0\",\n \"supports-[-webkit-touch-callout:none]:absolute\",\n )}\n />\n <BaseAlertDialog.Popup\n className={cn(\n \"fixed top-1/2 left-1/2 z-50 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-(--border) bg-(--popover) p-4 text-(--popover-foreground) shadow-lg outline-none\",\n \"transition-[transform,opacity] duration-150 ease-out\",\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\n className,\n )}\n {...props}\n >\n {children}\n </BaseAlertDialog.Popup>\n </BaseAlertDialog.Portal>\n );\n}\n\ntype AlertDialogTitleProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Title\n>;\n\nexport function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n return (\n <BaseAlertDialog.Title\n className={cn(\"text-base font-semibold\", className)}\n {...props}\n />\n );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Description\n>;\n\nexport function AlertDialogDescription({\n className,\n ...props\n}: AlertDialogDescriptionProps) {\n return (\n <BaseAlertDialog.Description\n render={<Text as=\"p\" size=\"base\" />}\n className={cn(\"text-(--muted-foreground)\", className)}\n {...props}\n />\n );\n}\n\ntype AlertDialogCloseProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Close\n>;\n\nexport function AlertDialogClose({ render, ...props }: AlertDialogCloseProps) {\n return (\n <BaseAlertDialog.Close\n render={render ?? <Button variant=\"outline\" />}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,gBAAgB,OAA6B;AAC3D,QAAO,oBAACA,YAAgB,MAAjB,EAAsB,GAAI,OAAS,CAAA;;AAO5C,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AACnF,QACE,oBAACA,YAAgB,SAAjB;EACE,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAgB,mBAAmB,EACjC,WACA,UACA,GAAG,SACuB;AAC1B,QACE,qBAACA,YAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,UAAjB,EACE,WAAW,GACT,mFACA,6DACA,iDACD,EACD,CAAA,EACF,oBAACA,YAAgB,OAAjB;EACE,WAAW,GACT,6NACA,wDACA,8DACA,0DACA,UACD;EACD,GAAI;EAEH;EACqB,CAAA,CACD,EAAA,CAAA;;AAQ7B,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAACA,YAAgB,OAAjB;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAQN,SAAgB,uBAAuB,EACrC,WACA,GAAG,SAC2B;AAC9B,QACE,oBAACA,YAAgB,aAAjB;EACE,QAAQ,oBAAC,MAAD;GAAM,IAAG;GAAI,MAAK;GAAS,CAAA;EACnC,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;EACJ,CAAA;;AAQN,SAAgB,iBAAiB,EAAE,QAAQ,GAAG,SAAgC;AAC5E,QACE,oBAACA,YAAgB,OAAjB;EACE,QAAQ,UAAU,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;EAC9C,GAAI;EACJ,CAAA"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Select } from "@base-ui/react/select";
|
|
3
|
+
|
|
4
|
+
//#region src/components/select/select.d.ts
|
|
5
|
+
type SelectRootProps = React.ComponentProps<typeof Select.Root>;
|
|
6
|
+
declare function SelectRoot({
|
|
7
|
+
items,
|
|
8
|
+
children,
|
|
9
|
+
...props
|
|
10
|
+
}: SelectRootProps): React.JSX.Element;
|
|
11
|
+
type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof Select.Trigger> & {
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
};
|
|
14
|
+
declare function SelectTrigger({
|
|
15
|
+
className,
|
|
16
|
+
placeholder,
|
|
17
|
+
...props
|
|
18
|
+
}: SelectTriggerProps): React.JSX.Element;
|
|
19
|
+
type SelectContentProps = React.ComponentPropsWithoutRef<typeof Select.Popup> & Pick<React.ComponentPropsWithoutRef<typeof Select.Positioner>, "side" | "align" | "sideOffset" | "alignOffset">;
|
|
20
|
+
declare function SelectContent({
|
|
21
|
+
className,
|
|
22
|
+
children,
|
|
23
|
+
side,
|
|
24
|
+
align,
|
|
25
|
+
sideOffset,
|
|
26
|
+
alignOffset,
|
|
27
|
+
...props
|
|
28
|
+
}: SelectContentProps): React.JSX.Element;
|
|
29
|
+
type SelectItemProps = React.ComponentPropsWithoutRef<typeof Select.Item>;
|
|
30
|
+
declare function SelectItem({
|
|
31
|
+
className,
|
|
32
|
+
children,
|
|
33
|
+
...props
|
|
34
|
+
}: SelectItemProps): React.JSX.Element;
|
|
35
|
+
type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof Select.Separator>;
|
|
36
|
+
declare function SelectSeparator({
|
|
37
|
+
className,
|
|
38
|
+
...props
|
|
39
|
+
}: SelectSeparatorProps): React.JSX.Element;
|
|
40
|
+
//#endregion
|
|
41
|
+
export { SelectContent, SelectItem, SelectRoot, SelectSeparator, SelectTrigger };
|
|
42
|
+
//# sourceMappingURL=select.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/select/select.tsx"],"mappings":";;;;KAMK,eAAA,GAAkB,KAAA,CAAM,cAAA,QAAsB,MAAA,CAAW,IAAA;AAAA,iBAuB9C,UAAA,CAAA;EAAa,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAepE,kBAAA,GAAqB,KAAA,CAAM,wBAAA,QACvB,MAAA,CAAW,OAAA;EAElB,WAAA;AAAA;AAAA,iBAGc,aAAA,CAAA;EACd,SAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAoChB,kBAAA,GAAqB,KAAA,CAAM,wBAAA,QACvB,MAAA,CAAW,KAAA,IAElB,IAAA,CACE,KAAA,CAAM,wBAAA,QAAgC,MAAA,CAAW,UAAA;AAAA,iBAIrC,aAAA,CAAA;EACd,SAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EACA,UAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA8BhB,eAAA,GAAkB,KAAA,CAAM,wBAAA,QAAgC,MAAA,CAAW,IAAA;AAAA,iBAExD,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAgCxE,oBAAA,GAAuB,KAAA,CAAM,wBAAA,QACzB,MAAA,CAAW,SAAA;AAAA,iBAGJ,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,oBAAA,GAAoB,KAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/cn.mjs";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Select } from "@base-ui/react/select";
|
|
6
|
+
//#region src/components/select/select.tsx
|
|
7
|
+
function collectItemLabels(children, items) {
|
|
8
|
+
React.Children.forEach(children, (child) => {
|
|
9
|
+
if (!React.isValidElement(child)) return;
|
|
10
|
+
const props = child.props;
|
|
11
|
+
if (child.type === SelectItem) {
|
|
12
|
+
if (props.value != null) items[String(props.value)] = props.children;
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (props.children != null) collectItemLabels(props.children, items);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function SelectRoot({ items, children, ...props }) {
|
|
19
|
+
const derivedItems = React.useMemo(() => {
|
|
20
|
+
if (items) return items;
|
|
21
|
+
const map = {};
|
|
22
|
+
collectItemLabels(children, map);
|
|
23
|
+
return map;
|
|
24
|
+
}, [items, children]);
|
|
25
|
+
return /* @__PURE__ */ jsx(Select.Root, {
|
|
26
|
+
items: derivedItems,
|
|
27
|
+
...props,
|
|
28
|
+
children
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function SelectTrigger({ className, placeholder, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsxs(Select.Trigger, {
|
|
33
|
+
className: cn("flex h-8 w-full min-w-40 items-center justify-between gap-2 rounded-md border border-(--input-border) bg-(--input) px-2 text-[14px] text-(--foreground) outline-none", "transition-[border-color,box-shadow] duration-150 ease-out", "hover:not-data-disabled:bg-(--foreground)/4", "focus-visible:border-(--ring) focus-visible:ring-[3px] focus-visible:ring-(--ring)/20", "data-popup-open:border-(--ring) data-popup-open:ring-[3px] data-popup-open:ring-(--ring)/20", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
|
|
34
|
+
...props,
|
|
35
|
+
children: [/* @__PURE__ */ jsx(Select.Value, {
|
|
36
|
+
placeholder,
|
|
37
|
+
className: "data-placeholder:text-(--muted-foreground)"
|
|
38
|
+
}), /* @__PURE__ */ jsx(Select.Icon, {
|
|
39
|
+
className: "flex shrink-0 items-center text-(--muted-foreground) transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] data-popup-open:rotate-180",
|
|
40
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
41
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
42
|
+
viewBox: "0 0 24 24",
|
|
43
|
+
fill: "none",
|
|
44
|
+
stroke: "currentColor",
|
|
45
|
+
strokeWidth: "2",
|
|
46
|
+
strokeLinecap: "round",
|
|
47
|
+
strokeLinejoin: "round",
|
|
48
|
+
className: "size-3.5",
|
|
49
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
50
|
+
})
|
|
51
|
+
})]
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
function SelectContent({ className, children, side = "bottom", align = "start", sideOffset = 6, alignOffset, ...props }) {
|
|
55
|
+
return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
|
|
56
|
+
alignItemWithTrigger: false,
|
|
57
|
+
side,
|
|
58
|
+
align,
|
|
59
|
+
sideOffset,
|
|
60
|
+
alignOffset,
|
|
61
|
+
collisionAvoidance: { side: "none" },
|
|
62
|
+
className: "z-50 outline-none",
|
|
63
|
+
children: /* @__PURE__ */ jsx(Select.Popup, {
|
|
64
|
+
className: cn("min-w-(--anchor-width) origin-(--transform-origin) scale-100 rounded-lg border border-(--border) bg-(--popover) p-1 text-(--popover-foreground) opacity-100 shadow-lg outline-none", "transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]", "data-ending-style:duration-100 data-ending-style:ease-in", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
65
|
+
...props,
|
|
66
|
+
children: /* @__PURE__ */ jsx(Select.List, { children })
|
|
67
|
+
})
|
|
68
|
+
}) });
|
|
69
|
+
}
|
|
70
|
+
function SelectItem({ className, children, ...props }) {
|
|
71
|
+
return /* @__PURE__ */ jsxs(Select.Item, {
|
|
72
|
+
className: cn("grid cursor-default grid-cols-[0.875rem_1fr] items-center gap-2 rounded-md py-1.5 pr-2 pl-1.5 text-[13px] text-(--popover-foreground) select-none outline-none transition-colors duration-150 ease-out", "data-highlighted:bg-(--accent)", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
|
|
73
|
+
...props,
|
|
74
|
+
children: [/* @__PURE__ */ jsx(Select.ItemIndicator, {
|
|
75
|
+
className: "col-start-1 text-(--foreground)",
|
|
76
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
77
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
78
|
+
viewBox: "0 0 24 24",
|
|
79
|
+
fill: "none",
|
|
80
|
+
stroke: "currentColor",
|
|
81
|
+
strokeWidth: "2.5",
|
|
82
|
+
strokeLinecap: "round",
|
|
83
|
+
strokeLinejoin: "round",
|
|
84
|
+
className: "size-3.5",
|
|
85
|
+
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
86
|
+
})
|
|
87
|
+
}), /* @__PURE__ */ jsx(Select.ItemText, {
|
|
88
|
+
className: "col-start-2",
|
|
89
|
+
children
|
|
90
|
+
})]
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function SelectSeparator({ className, ...props }) {
|
|
94
|
+
return /* @__PURE__ */ jsx(Select.Separator, {
|
|
95
|
+
className: cn("-mx-1 my-1 h-px bg-(--border)", className),
|
|
96
|
+
...props
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
//#endregion
|
|
100
|
+
export { SelectContent, SelectItem, SelectRoot, SelectSeparator, SelectTrigger };
|
|
101
|
+
|
|
102
|
+
//# sourceMappingURL=select.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.mjs","names":["BaseSelect"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { cn } from \"@/lib/cn\";\n\ntype SelectRootProps = React.ComponentProps<typeof BaseSelect.Root>;\n\nfunction collectItemLabels(\n children: React.ReactNode,\n items: Record<string, React.ReactNode>,\n) {\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n\n const props = child.props as {\n value?: unknown;\n children?: React.ReactNode;\n };\n\n if (child.type === SelectItem) {\n if (props.value != null) items[String(props.value)] = props.children;\n return;\n }\n\n if (props.children != null) collectItemLabels(props.children, items);\n });\n}\n\nexport function SelectRoot({ items, children, ...props }: SelectRootProps) {\n const derivedItems = React.useMemo(() => {\n if (items) return items;\n const map: Record<string, React.ReactNode> = {};\n collectItemLabels(children, map);\n return map;\n }, [items, children]);\n\n return (\n <BaseSelect.Root items={derivedItems} {...props}>\n {children}\n </BaseSelect.Root>\n );\n}\n\ntype SelectTriggerProps = React.ComponentPropsWithoutRef<\n typeof BaseSelect.Trigger\n> & {\n placeholder?: string;\n};\n\nexport function SelectTrigger({\n className,\n placeholder,\n ...props\n}: SelectTriggerProps) {\n return (\n <BaseSelect.Trigger\n className={cn(\n \"flex h-8 w-full min-w-40 items-center justify-between gap-2 rounded-md border border-(--input-border) bg-(--input) px-2 text-[14px] text-(--foreground) outline-none\",\n \"transition-[border-color,box-shadow] duration-150 ease-out\",\n \"hover:not-data-disabled:bg-(--foreground)/4\",\n \"focus-visible:border-(--ring) focus-visible:ring-[3px] focus-visible:ring-(--ring)/20\",\n \"data-popup-open:border-(--ring) data-popup-open:ring-[3px] data-popup-open:ring-(--ring)/20\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseSelect.Value\n placeholder={placeholder}\n className=\"data-placeholder:text-(--muted-foreground)\"\n />\n <BaseSelect.Icon className=\"flex shrink-0 items-center text-(--muted-foreground) transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] data-popup-open:rotate-180\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-3.5\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </BaseSelect.Icon>\n </BaseSelect.Trigger>\n );\n}\n\ntype SelectContentProps = React.ComponentPropsWithoutRef<\n typeof BaseSelect.Popup\n> &\n Pick<\n React.ComponentPropsWithoutRef<typeof BaseSelect.Positioner>,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\"\n >;\n\nexport function SelectContent({\n className,\n children,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 6,\n alignOffset,\n ...props\n}: SelectContentProps) {\n return (\n <BaseSelect.Portal>\n <BaseSelect.Positioner\n alignItemWithTrigger={false}\n side={side}\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n collisionAvoidance={{ side: \"none\" }}\n className=\"z-50 outline-none\"\n >\n <BaseSelect.Popup\n className={cn(\n \"min-w-(--anchor-width) origin-(--transform-origin) scale-100 rounded-lg border border-(--border) bg-(--popover) p-1 text-(--popover-foreground) opacity-100 shadow-lg outline-none\",\n \"transition-[scale,opacity] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n \"data-ending-style:duration-100 data-ending-style:ease-in\",\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\n className,\n )}\n {...props}\n >\n <BaseSelect.List>{children}</BaseSelect.List>\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n );\n}\n\ntype SelectItemProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport function SelectItem({ className, children, ...props }: SelectItemProps) {\n return (\n <BaseSelect.Item\n className={cn(\n \"grid cursor-default grid-cols-[0.875rem_1fr] items-center gap-2 rounded-md py-1.5 pr-2 pl-1.5 text-[13px] text-(--popover-foreground) select-none outline-none transition-colors duration-150 ease-out\",\n \"data-highlighted:bg-(--accent)\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseSelect.ItemIndicator className=\"col-start-1 text-(--foreground)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-3.5\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </BaseSelect.ItemIndicator>\n <BaseSelect.ItemText className=\"col-start-2\">\n {children}\n </BaseSelect.ItemText>\n </BaseSelect.Item>\n );\n}\n\ntype SelectSeparatorProps = React.ComponentPropsWithoutRef<\n typeof BaseSelect.Separator\n>;\n\nexport function SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n return (\n <BaseSelect.Separator\n className={cn(\"-mx-1 my-1 h-px bg-(--border)\", className)}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;AAQA,SAAS,kBACP,UACA,OACA;AACA,OAAM,SAAS,QAAQ,WAAW,UAAU;AAC1C,MAAI,CAAC,MAAM,eAAe,MAAM,CAAE;EAElC,MAAM,QAAQ,MAAM;AAKpB,MAAI,MAAM,SAAS,YAAY;AAC7B,OAAI,MAAM,SAAS,KAAM,OAAM,OAAO,MAAM,MAAM,IAAI,MAAM;AAC5D;;AAGF,MAAI,MAAM,YAAY,KAAM,mBAAkB,MAAM,UAAU,MAAM;GACpE;;AAGJ,SAAgB,WAAW,EAAE,OAAO,UAAU,GAAG,SAA0B;CACzE,MAAM,eAAe,MAAM,cAAc;AACvC,MAAI,MAAO,QAAO;EAClB,MAAM,MAAuC,EAAE;AAC/C,oBAAkB,UAAU,IAAI;AAChC,SAAO;IACN,CAAC,OAAO,SAAS,CAAC;AAErB,QACE,oBAACA,OAAW,MAAZ;EAAiB,OAAO;EAAc,GAAI;EACvC;EACe,CAAA;;AAUtB,SAAgB,cAAc,EAC5B,WACA,aACA,GAAG,SACkB;AACrB,QACE,qBAACA,OAAW,SAAZ;EACE,WAAW,GACT,wKACA,8DACA,+CACA,yFACA,+FACA,8DACA,UACD;EACD,GAAI;YAVN,CAYE,oBAACA,OAAW,OAAZ;GACe;GACb,WAAU;GACV,CAAA,EACF,oBAACA,OAAW,MAAZ;GAAiB,WAAU;aACzB,oBAAC,OAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;cAEV,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;IACrB,CAAA;GACU,CAAA,CACC;;;AAYzB,SAAgB,cAAc,EAC5B,WACA,UACA,OAAO,UACP,QAAQ,SACR,aAAa,GACb,aACA,GAAG,SACkB;AACrB,QACE,oBAACA,OAAW,QAAZ,EAAA,UACE,oBAACA,OAAW,YAAZ;EACE,sBAAsB;EAChB;EACC;EACK;EACC;EACb,oBAAoB,EAAE,MAAM,QAAQ;EACpC,WAAU;YAEV,oBAACA,OAAW,OAAZ;GACE,WAAW,GACT,sLACA,6EACA,4DACA,8DACA,0DACA,UACD;GACD,GAAI;aAEJ,oBAACA,OAAW,MAAZ,EAAkB,UAA2B,CAAA;GAC5B,CAAA;EACG,CAAA,EACN,CAAA;;AAMxB,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0B;AAC7E,QACE,qBAACA,OAAW,MAAZ;EACE,WAAW,GACT,0MACA,kCACA,8DACA,UACD;EACD,GAAI;YAPN,CASE,oBAACA,OAAW,eAAZ;GAA0B,WAAU;aAClC,oBAAC,OAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;cAEV,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;IACxB,CAAA;GACmB,CAAA,EAC3B,oBAACA,OAAW,UAAZ;GAAqB,WAAU;GAC5B;GACmB,CAAA,CACN;;;AAQtB,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AAC7E,QACE,oBAACA,OAAW,WAAZ;EACE,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Toast } from "@base-ui/react/toast";
|
|
3
|
+
|
|
4
|
+
//#region src/components/toast/toast.d.ts
|
|
5
|
+
type ToastProviderProps = React.ComponentPropsWithoutRef<typeof Toast.Provider>;
|
|
6
|
+
declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
|
|
7
|
+
type ToastViewportProps = React.ComponentPropsWithoutRef<typeof Toast.Viewport>;
|
|
8
|
+
declare function ToastViewport({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: ToastViewportProps): React.JSX.Element;
|
|
12
|
+
type ToastRootProps = React.ComponentPropsWithoutRef<typeof Toast.Root>;
|
|
13
|
+
declare function ToastRoot({
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
}: ToastRootProps): React.JSX.Element;
|
|
17
|
+
type ToastContentProps = React.ComponentPropsWithoutRef<typeof Toast.Content>;
|
|
18
|
+
declare function ToastContent({
|
|
19
|
+
className,
|
|
20
|
+
...props
|
|
21
|
+
}: ToastContentProps): React.JSX.Element;
|
|
22
|
+
type ToastTitleProps = React.ComponentPropsWithoutRef<typeof Toast.Title>;
|
|
23
|
+
declare function ToastTitle({
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: ToastTitleProps): React.JSX.Element;
|
|
27
|
+
type ToastDescriptionProps = React.ComponentPropsWithoutRef<typeof Toast.Description>;
|
|
28
|
+
declare function ToastDescription({
|
|
29
|
+
className,
|
|
30
|
+
...props
|
|
31
|
+
}: ToastDescriptionProps): React.JSX.Element;
|
|
32
|
+
type ToastIconProps = React.SVGProps<SVGSVGElement> & {
|
|
33
|
+
type: string | undefined;
|
|
34
|
+
};
|
|
35
|
+
declare function ToastIcon({
|
|
36
|
+
type,
|
|
37
|
+
className,
|
|
38
|
+
...props
|
|
39
|
+
}: ToastIconProps): React.JSX.Element | null;
|
|
40
|
+
type ToastCloseProps = React.ComponentPropsWithoutRef<typeof Toast.Close>;
|
|
41
|
+
declare function ToastClose(props: ToastCloseProps): React.JSX.Element;
|
|
42
|
+
declare function ToastList(): React.JSX.Element[];
|
|
43
|
+
//#endregion
|
|
44
|
+
export { ToastClose, ToastContent, ToastDescription, ToastIcon, ToastList, ToastProvider, ToastRoot, ToastTitle, ToastViewport };
|
|
45
|
+
//# sourceMappingURL=toast.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;KAQK,kBAAA,GAAqB,KAAA,CAAM,wBAAA,QACvB,KAAA,CAAU,QAAA;AAAA,iBAGH,aAAA,CAAc,KAAA,EAAO,kBAAA,GAAkB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAIlD,kBAAA,GAAqB,KAAA,CAAM,wBAAA,QACvB,KAAA,CAAU,QAAA;AAAA,iBAGH,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAcpE,cAAA,GAAiB,KAAA,CAAM,wBAAA,QAAgC,KAAA,CAAU,IAAA;AAAA,iBAEtD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA6B5D,iBAAA,GAAoB,KAAA,CAAM,wBAAA,QACtB,KAAA,CAAU,OAAA;AAAA,iBAGH,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAiB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAalE,eAAA,GAAkB,KAAA,CAAM,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,iBAEvD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAS9D,qBAAA,GAAwB,KAAA,CAAM,wBAAA,QAC1B,KAAA,CAAU,WAAA;AAAA,iBAGH,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAuF1E,cAAA,GAAiB,KAAA,CAAM,QAAA,CAAS,aAAA;EACnC,IAAA;AAAA;AAAA,iBAGc,SAAA,CAAA;EAAY,IAAA;EAAM,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAgBlE,eAAA,GAAkB,KAAA,CAAM,wBAAA,QAAgC,KAAA,CAAU,KAAA;AAAA,iBAEvD,UAAA,CAAW,KAAA,EAAO,eAAA,GAAe,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBASjC,SAAA,CAAA,GAAS,KAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/cn.mjs";
|
|
3
|
+
import { Button } from "../../button.mjs";
|
|
4
|
+
import { Text } from "../../text.mjs";
|
|
5
|
+
import "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Toast } from "@base-ui/react/toast";
|
|
8
|
+
//#region src/components/toast/toast.tsx
|
|
9
|
+
function ToastProvider(props) {
|
|
10
|
+
return /* @__PURE__ */ jsx(Toast.Provider, { ...props });
|
|
11
|
+
}
|
|
12
|
+
function ToastViewport({ className, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
|
|
14
|
+
className: cn("fixed right-4 bottom-4 z-50 mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-90", className),
|
|
15
|
+
...props
|
|
16
|
+
}) });
|
|
17
|
+
}
|
|
18
|
+
function ToastRoot({ className, ...props }) {
|
|
19
|
+
return /* @__PURE__ */ jsx(Toast.Root, {
|
|
20
|
+
className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] w-full origin-bottom", "transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]", "rounded-lg border border-(--border) bg-(--popover) text-(--popover-foreground) shadow-lg select-none", "data-ending-style:opacity-0 data-limited:opacity-0", "data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-starting-style:transform-[translateY(150%)]", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]", "h-(--height) data-expanded:h-(--toast-height)", "[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]", className),
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function ToastContent({ className, ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Toast.Content, {
|
|
26
|
+
className: cn("flex h-full items-center gap-4 overflow-hidden p-3 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]", "data-behind:opacity-0 data-expanded:opacity-100", className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
function ToastTitle({ className, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx(Toast.Title, {
|
|
32
|
+
className: cn("text-[13px] font-semibold", className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
function ToastDescription({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx(Toast.Description, {
|
|
38
|
+
render: /* @__PURE__ */ jsx(Text, {
|
|
39
|
+
as: "p",
|
|
40
|
+
size: "small"
|
|
41
|
+
}),
|
|
42
|
+
className: cn("text-(--muted-foreground)", className),
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
const variantIcons = {
|
|
47
|
+
success: (props) => /* @__PURE__ */ jsxs("svg", {
|
|
48
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
49
|
+
viewBox: "0 0 24 24",
|
|
50
|
+
fill: "none",
|
|
51
|
+
stroke: "currentColor",
|
|
52
|
+
strokeWidth: "2",
|
|
53
|
+
strokeLinecap: "round",
|
|
54
|
+
strokeLinejoin: "round",
|
|
55
|
+
...props,
|
|
56
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
57
|
+
cx: "12",
|
|
58
|
+
cy: "12",
|
|
59
|
+
r: "9"
|
|
60
|
+
}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })]
|
|
61
|
+
}),
|
|
62
|
+
error: (props) => /* @__PURE__ */ jsxs("svg", {
|
|
63
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
64
|
+
viewBox: "0 0 24 24",
|
|
65
|
+
fill: "none",
|
|
66
|
+
stroke: "currentColor",
|
|
67
|
+
strokeWidth: "2",
|
|
68
|
+
strokeLinecap: "round",
|
|
69
|
+
strokeLinejoin: "round",
|
|
70
|
+
...props,
|
|
71
|
+
children: [/* @__PURE__ */ jsx("circle", {
|
|
72
|
+
cx: "12",
|
|
73
|
+
cy: "12",
|
|
74
|
+
r: "9"
|
|
75
|
+
}), /* @__PURE__ */ jsx("path", { d: "m9.5 9.5 5 5m0-5-5 5" })]
|
|
76
|
+
}),
|
|
77
|
+
warning: (props) => /* @__PURE__ */ jsxs("svg", {
|
|
78
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
79
|
+
viewBox: "0 0 24 24",
|
|
80
|
+
fill: "none",
|
|
81
|
+
stroke: "currentColor",
|
|
82
|
+
strokeWidth: "2",
|
|
83
|
+
strokeLinecap: "round",
|
|
84
|
+
strokeLinejoin: "round",
|
|
85
|
+
...props,
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx("path", { d: "M12 3.5 2.5 20h19L12 3.5Z" }),
|
|
88
|
+
/* @__PURE__ */ jsx("path", { d: "M12 10v4" }),
|
|
89
|
+
/* @__PURE__ */ jsx("path", { d: "M12 17.5h.01" })
|
|
90
|
+
]
|
|
91
|
+
}),
|
|
92
|
+
info: (props) => /* @__PURE__ */ jsxs("svg", {
|
|
93
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
94
|
+
viewBox: "0 0 24 24",
|
|
95
|
+
fill: "none",
|
|
96
|
+
stroke: "currentColor",
|
|
97
|
+
strokeWidth: "2",
|
|
98
|
+
strokeLinecap: "round",
|
|
99
|
+
strokeLinejoin: "round",
|
|
100
|
+
...props,
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ jsx("circle", {
|
|
103
|
+
cx: "12",
|
|
104
|
+
cy: "12",
|
|
105
|
+
r: "9"
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ jsx("path", { d: "M12 11v5.5" }),
|
|
108
|
+
/* @__PURE__ */ jsx("path", { d: "M12 7.5h.01" })
|
|
109
|
+
]
|
|
110
|
+
})
|
|
111
|
+
};
|
|
112
|
+
const variantColors = {
|
|
113
|
+
success: "text-(--success)",
|
|
114
|
+
error: "text-(--destructive)",
|
|
115
|
+
warning: "text-(--warning)",
|
|
116
|
+
info: "text-(--info)"
|
|
117
|
+
};
|
|
118
|
+
function ToastIcon({ type, className, ...props }) {
|
|
119
|
+
if (!isToastVariant(type)) return null;
|
|
120
|
+
const Icon = variantIcons[type];
|
|
121
|
+
return /* @__PURE__ */ jsx(Icon, {
|
|
122
|
+
className: cn("size-4 shrink-0", variantColors[type], className),
|
|
123
|
+
...props
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function isToastVariant(type) {
|
|
127
|
+
return !!type && type in variantIcons;
|
|
128
|
+
}
|
|
129
|
+
function ToastClose(props) {
|
|
130
|
+
return /* @__PURE__ */ jsx(Toast.Close, {
|
|
131
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
132
|
+
variant: "outline",
|
|
133
|
+
size: "sm"
|
|
134
|
+
}),
|
|
135
|
+
...props
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
function ToastList() {
|
|
139
|
+
const { toasts } = Toast.useToastManager();
|
|
140
|
+
return toasts.map((toast) => /* @__PURE__ */ jsx(ToastRoot, {
|
|
141
|
+
toast,
|
|
142
|
+
children: /* @__PURE__ */ jsxs(ToastContent, { children: [
|
|
143
|
+
/* @__PURE__ */ jsx(ToastIcon, { type: toast.type }),
|
|
144
|
+
/* @__PURE__ */ jsxs("div", {
|
|
145
|
+
className: "flex min-w-0 flex-1 flex-col gap-1",
|
|
146
|
+
children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
|
|
147
|
+
}),
|
|
148
|
+
/* @__PURE__ */ jsx(ToastClose, { children: "Dismiss" })
|
|
149
|
+
] })
|
|
150
|
+
}, toast.id));
|
|
151
|
+
}
|
|
152
|
+
const useToastManager = Toast.useToastManager;
|
|
153
|
+
//#endregion
|
|
154
|
+
export { ToastClose, ToastContent, ToastDescription, ToastIcon, ToastList, ToastProvider, ToastRoot, ToastTitle, ToastViewport, useToastManager };
|
|
155
|
+
|
|
156
|
+
//# sourceMappingURL=toast.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.mjs","names":["BaseToast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Toast as BaseToast } from \"@base-ui/react/toast\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"../button/button\";\nimport { Text } from \"../text/text\";\n\ntype ToastProviderProps = React.ComponentPropsWithoutRef<\n typeof BaseToast.Provider\n>;\n\nexport function ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\ntype ToastViewportProps = React.ComponentPropsWithoutRef<\n typeof BaseToast.Viewport\n>;\n\nexport function ToastViewport({ className, ...props }: ToastViewportProps) {\n return (\n <BaseToast.Portal>\n <BaseToast.Viewport\n className={cn(\n \"fixed right-4 bottom-4 z-50 mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-90\",\n className,\n )}\n {...props}\n />\n </BaseToast.Portal>\n );\n}\n\ntype ToastRootProps = React.ComponentPropsWithoutRef<typeof BaseToast.Root>;\n\nexport function ToastRoot({ className, ...props }: ToastRootProps) {\n return (\n <BaseToast.Root\n className={cn(\n \"[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]\",\n \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] w-full origin-bottom\",\n \"transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]\",\n \"rounded-lg border border-(--border) bg-(--popover) text-(--popover-foreground) shadow-lg select-none\",\n \"data-ending-style:opacity-0 data-limited:opacity-0\",\n \"data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]\",\n \"data-starting-style:transform-[translateY(150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]\",\n \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"h-(--height) data-expanded:h-(--toast-height)\",\n \"[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ToastContentProps = React.ComponentPropsWithoutRef<\n typeof BaseToast.Content\n>;\n\nexport function ToastContent({ className, ...props }: ToastContentProps) {\n return (\n <BaseToast.Content\n className={cn(\n \"flex h-full items-center gap-4 overflow-hidden p-3 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]\",\n \"data-behind:opacity-0 data-expanded:opacity-100\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ToastTitleProps = React.ComponentPropsWithoutRef<typeof BaseToast.Title>;\n\nexport function ToastTitle({ className, ...props }: ToastTitleProps) {\n return (\n <BaseToast.Title\n className={cn(\"text-[13px] font-semibold\", className)}\n {...props}\n />\n );\n}\n\ntype ToastDescriptionProps = React.ComponentPropsWithoutRef<\n typeof BaseToast.Description\n>;\n\nexport function ToastDescription({ className, ...props }: ToastDescriptionProps) {\n return (\n <BaseToast.Description\n render={<Text as=\"p\" size=\"small\" />}\n className={cn(\"text-(--muted-foreground)\", className)}\n {...props}\n />\n );\n}\n\ntype ToastVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst variantIcons: Record<\n ToastVariant,\n (props: React.SVGProps<SVGSVGElement>) => React.ReactElement\n> = {\n success: (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12.5 2.5 2.5 4.5-5\" />\n </svg>\n ),\n error: (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9.5 9.5 5 5m0-5-5 5\" />\n </svg>\n ),\n warning: (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M12 3.5 2.5 20h19L12 3.5Z\" />\n <path d=\"M12 10v4\" />\n <path d=\"M12 17.5h.01\" />\n </svg>\n ),\n info: (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5.5\" />\n <path d=\"M12 7.5h.01\" />\n </svg>\n ),\n};\n\nconst variantColors: Record<ToastVariant, string> = {\n success: \"text-(--success)\",\n error: \"text-(--destructive)\",\n warning: \"text-(--warning)\",\n info: \"text-(--info)\",\n};\n\ntype ToastIconProps = React.SVGProps<SVGSVGElement> & {\n type: string | undefined;\n};\n\nexport function ToastIcon({ type, className, ...props }: ToastIconProps) {\n if (!isToastVariant(type)) return null;\n\n const Icon = variantIcons[type];\n return (\n <Icon\n className={cn(\"size-4 shrink-0\", variantColors[type], className)}\n {...props}\n />\n );\n}\n\nfunction isToastVariant(type: string | undefined): type is ToastVariant {\n return !!type && type in variantIcons;\n}\n\ntype ToastCloseProps = React.ComponentPropsWithoutRef<typeof BaseToast.Close>;\n\nexport function ToastClose(props: ToastCloseProps) {\n return (\n <BaseToast.Close\n render={<Button variant=\"outline\" size=\"sm\" />}\n {...props}\n />\n );\n}\n\nexport function ToastList() {\n const { toasts } = BaseToast.useToastManager();\n\n return toasts.map((toast) => (\n <ToastRoot key={toast.id} toast={toast}>\n <ToastContent>\n <ToastIcon type={toast.type} />\n <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n <ToastTitle />\n <ToastDescription />\n </div>\n <ToastClose>Dismiss</ToastClose>\n </ToastContent>\n </ToastRoot>\n ));\n}\n\nexport const useToastManager = BaseToast.useToastManager;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Tooltip } from "@base-ui/react/tooltip";
|
|
3
|
+
|
|
4
|
+
//#region src/components/tooltip/tooltip.d.ts
|
|
5
|
+
type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof Tooltip.Provider>;
|
|
6
|
+
declare function TooltipProvider({
|
|
7
|
+
delay,
|
|
8
|
+
closeDelay,
|
|
9
|
+
...props
|
|
10
|
+
}: TooltipProviderProps): React.JSX.Element;
|
|
11
|
+
type TooltipRootProps = React.ComponentPropsWithoutRef<typeof Tooltip.Root>;
|
|
12
|
+
declare function TooltipRoot(props: TooltipRootProps): React.JSX.Element;
|
|
13
|
+
type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof Tooltip.Trigger>;
|
|
14
|
+
declare function TooltipTrigger({
|
|
15
|
+
className,
|
|
16
|
+
...props
|
|
17
|
+
}: TooltipTriggerProps): React.JSX.Element;
|
|
18
|
+
type TooltipContentProps = React.ComponentPropsWithoutRef<typeof Tooltip.Popup> & Pick<React.ComponentPropsWithoutRef<typeof Tooltip.Positioner>, "side" | "align" | "sideOffset" | "alignOffset">;
|
|
19
|
+
declare function TooltipContent({
|
|
20
|
+
className,
|
|
21
|
+
side,
|
|
22
|
+
align,
|
|
23
|
+
sideOffset,
|
|
24
|
+
alignOffset,
|
|
25
|
+
children,
|
|
26
|
+
...props
|
|
27
|
+
}: TooltipContentProps): React.JSX.Element;
|
|
28
|
+
//#endregion
|
|
29
|
+
export { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger };
|
|
30
|
+
//# sourceMappingURL=tooltip.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;KAMK,oBAAA,GAAuB,KAAA,CAAM,wBAAA,QACzB,OAAA,CAAY,QAAA;AAAA,iBAGL,eAAA,CAAA;EACd,KAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAMlB,gBAAA,GAAmB,KAAA,CAAM,wBAAA,QAAgC,OAAA,CAAY,IAAA;AAAA,iBAE1D,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAI9C,mBAAA,GAAsB,KAAA,CAAM,wBAAA,QACxB,OAAA,CAAY,OAAA;AAAA,iBAGL,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAYtE,mBAAA,GAAsB,KAAA,CAAM,wBAAA,QACxB,OAAA,CAAY,KAAA,IAEnB,IAAA,CACE,KAAA,CAAM,wBAAA,QAAgC,OAAA,CAAY,UAAA;AAAA,iBAItC,cAAA,CAAA;EACd,SAAA;EACA,IAAA;EACA,KAAA;EACA,UAAA;EACA,WAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,KAAA,CAAA,GAAA,CAAA,OAAA"}
|