@florianke/components 0.0.3 → 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 +466 -30
- package/dist/alert-dialog.d.mts +2 -31
- package/dist/alert-dialog.d.mts.map +1 -1
- package/dist/alert-dialog.mjs +2 -46
- package/dist/alert-dialog.mjs.map +1 -1
- package/dist/avatar.mjs +1 -1
- package/dist/button.mjs +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.mjs +1 -1
- package/dist/heading.mjs +1 -1
- package/dist/hint.mjs +1 -1
- package/dist/hooks/use-confirm.mjs.map +1 -1
- package/dist/input.mjs +1 -1
- package/dist/label.mjs +1 -1
- package/dist/{cn-BpvCVwZv.mjs → lib/cn.mjs} +2 -2
- package/dist/lib/cn.mjs.map +1 -0
- package/dist/providers.mjs.map +1 -1
- 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.mjs +1 -1
- package/dist/toast.d.mts +4 -42
- package/dist/toast.d.mts.map +1 -1
- package/dist/toast.mjs +3 -152
- package/dist/toast.mjs.map +1 -1
- package/dist/tooltip.d.mts +2 -26
- package/dist/tooltip.d.mts.map +1 -1
- package/dist/tooltip.mjs +2 -36
- package/dist/tooltip.mjs.map +1 -1
- package/package.json +41 -1
- package/dist/cn-BpvCVwZv.mjs.map +0 -1
|
@@ -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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/cn.mjs";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Tooltip } from "@base-ui/react/tooltip";
|
|
6
|
+
//#region src/components/tooltip/tooltip.tsx
|
|
7
|
+
function TooltipProvider({ delay = 150, closeDelay = 0, ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(Tooltip.Provider, {
|
|
9
|
+
delay,
|
|
10
|
+
closeDelay,
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function TooltipRoot(props) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
|
|
16
|
+
}
|
|
17
|
+
function TooltipTrigger({ className, ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsx(Tooltip.Trigger, {
|
|
19
|
+
className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30", className),
|
|
20
|
+
...props
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function TooltipContent({ className, side, align = "center", sideOffset = 8, alignOffset, children, ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
|
|
25
|
+
side,
|
|
26
|
+
align,
|
|
27
|
+
sideOffset,
|
|
28
|
+
alignOffset,
|
|
29
|
+
className: "z-50 outline-none",
|
|
30
|
+
children: /* @__PURE__ */ jsx(Tooltip.Popup, {
|
|
31
|
+
className: cn("relative max-w-64 origin-(--transform-origin) text-pretty rounded-md border border-(--border) bg-(--popover) px-2 py-1 text-[12px] text-(--popover-foreground) shadow-md outline-none", "transition-[transform,opacity] duration-150 ease-out", "data-starting-style:scale-90 data-starting-style:opacity-0", "data-ending-style:scale-90 data-ending-style:opacity-0", "data-instant:transition-none", className),
|
|
32
|
+
...props,
|
|
33
|
+
children
|
|
34
|
+
})
|
|
35
|
+
}) });
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
export { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=tooltip.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip.mjs","names":["BaseTooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { cn } from \"@/lib/cn\";\n\ntype TooltipProviderProps = React.ComponentPropsWithoutRef<\n typeof BaseTooltip.Provider\n>;\n\nexport function TooltipProvider({\n delay = 150,\n closeDelay = 0,\n ...props\n}: TooltipProviderProps) {\n return (\n <BaseTooltip.Provider delay={delay} closeDelay={closeDelay} {...props} />\n );\n}\n\ntype TooltipRootProps = React.ComponentPropsWithoutRef<typeof BaseTooltip.Root>;\n\nexport function TooltipRoot(props: TooltipRootProps) {\n return <BaseTooltip.Root {...props} />;\n}\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<\n typeof BaseTooltip.Trigger\n>;\n\nexport function TooltipTrigger({ className, ...props }: TooltipTriggerProps) {\n return (\n <BaseTooltip.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 TooltipContentProps = React.ComponentPropsWithoutRef<\n typeof BaseTooltip.Popup\n> &\n Pick<\n React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\"\n >;\n\nexport function TooltipContent({\n className,\n side,\n align = \"center\",\n sideOffset = 8,\n alignOffset,\n children,\n ...props\n}: TooltipContentProps) {\n return (\n <BaseTooltip.Portal>\n <BaseTooltip.Positioner\n side={side}\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n className=\"z-50 outline-none\"\n >\n <BaseTooltip.Popup\n className={cn(\n \"relative max-w-64 origin-(--transform-origin) text-pretty rounded-md border border-(--border) bg-(--popover) px-2 py-1 text-[12px] text-(--popover-foreground) shadow-md outline-none\",\n \"transition-[transform,opacity] duration-150 ease-out\",\n \"data-starting-style:scale-90 data-starting-style:opacity-0\",\n \"data-ending-style:scale-90 data-ending-style:opacity-0\",\n \"data-instant:transition-none\",\n className,\n )}\n {...props}\n >\n {children}\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n </BaseTooltip.Portal>\n );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAgB,EAC9B,QAAQ,KACR,aAAa,GACb,GAAG,SACoB;AACvB,QACE,oBAACA,QAAY,UAAb;EAA6B;EAAmB;EAAY,GAAI;EAAS,CAAA;;AAM7E,SAAgB,YAAY,OAAyB;AACnD,QAAO,oBAACA,QAAY,MAAb,EAAkB,GAAI,OAAS,CAAA;;AAOxC,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,QACE,oBAACA,QAAY,SAAb;EACE,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAYN,SAAgB,eAAe,EAC7B,WACA,MACA,QAAQ,UACR,aAAa,GACb,aACA,UACA,GAAG,SACmB;AACtB,QACE,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;EACQ;EACC;EACK;EACC;EACb,WAAU;YAEV,oBAACA,QAAY,OAAb;GACE,WAAW,GACT,yLACA,wDACA,8DACA,0DACA,gCACA,UACD;GACD,GAAI;GAEH;GACiB,CAAA;EACG,CAAA,EACN,CAAA"}
|
package/dist/dropdown-menu.mjs
CHANGED
package/dist/field.mjs
CHANGED
package/dist/heading.mjs
CHANGED
package/dist/hint.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-confirm.mjs","names":[],"sources":["../../src/hooks/use-confirm.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog } from \"../components/alert-dialog
|
|
1
|
+
{"version":3,"file":"use-confirm.mjs","names":[],"sources":["../../src/hooks/use-confirm.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog } from \"../components/alert-dialog\";\nimport { Button } from \"../components/button/button\";\nimport { Input } from \"../components/input/input\";\nimport { Label } from \"../components/label/label\";\n\ntype ConfirmVariant = \"default\" | \"danger\";\n\ntype ConfirmOptions = {\n title?: React.ReactNode;\n description?: React.ReactNode;\n confirmText?: string;\n cancelText?: string;\n variant?: ConfirmVariant;\n verificationText?: string;\n verificationInstruction?: React.ReactNode;\n};\n\ntype ConfirmRequest = {\n options: ConfirmOptions;\n resolve: (value: boolean) => void;\n};\n\ntype ConfirmFn = (options?: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = React.createContext<ConfirmFn | null>(null);\n\nexport function ConfirmProvider({ children }: { children?: React.ReactNode }) {\n const [request, setRequest] = React.useState<ConfirmRequest | null>(null);\n const [verification, setVerification] = React.useState(\"\");\n const resolvedRef = React.useRef(false);\n\n const confirm = React.useCallback<ConfirmFn>((options = {}) => {\n return new Promise<boolean>((resolve) => {\n setVerification(\"\");\n setRequest({ options, resolve });\n });\n }, []);\n\n function close(value: boolean) {\n request?.resolve(value);\n resolvedRef.current = true;\n setRequest(null);\n setVerification(\"\");\n }\n\n function handleOpenChange(open: boolean) {\n if (open) return;\n if (!resolvedRef.current) {\n request?.resolve(false);\n }\n resolvedRef.current = false;\n setRequest(null);\n setVerification(\"\");\n }\n\n const verificationText = request?.options.verificationText;\n const requiresVerification = !!verificationText;\n const canConfirm = !requiresVerification || verification === verificationText;\n\n return (\n <ConfirmContext.Provider value={confirm}>\n {children}\n <AlertDialog open={request !== null} onOpenChange={handleOpenChange}>\n <AlertDialog.Content>\n <div className=\"flex flex-col gap-1\">\n <AlertDialog.Title>\n {request?.options.title ?? \"Are you sure?\"}\n </AlertDialog.Title>\n {request?.options.description && (\n <AlertDialog.Description>\n {request.options.description}\n </AlertDialog.Description>\n )}\n </div>\n {requiresVerification && (\n <div className=\"flex flex-col gap-1.5\">\n <Label size=\"small\" htmlFor=\"confirm-verification-text\">\n {request?.options.verificationInstruction ?? (\n <>\n Type <span className=\"font-semibold\">{verificationText}</span>{\" \"}\n to confirm.\n </>\n )}\n </Label>\n <Input\n id=\"confirm-verification-text\"\n autoFocus\n value={verification}\n onValueChange={(value) => setVerification(value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\" && verification === verificationText) {\n close(true);\n }\n }}\n />\n </div>\n )}\n <div className=\"flex justify-end gap-2\">\n <AlertDialog.Close onClick={() => close(false)}>\n {request?.options.cancelText ?? \"Cancel\"}\n </AlertDialog.Close>\n <AlertDialog.Close\n render={\n <Button\n variant={\n request?.options.variant === \"danger\"\n ? \"destructive\"\n : \"primary\"\n }\n />\n }\n disabled={!canConfirm}\n onClick={() => close(true)}\n >\n {request?.options.confirmText ?? \"Confirm\"}\n </AlertDialog.Close>\n </div>\n </AlertDialog.Content>\n </AlertDialog>\n </ConfirmContext.Provider>\n );\n}\n\nexport function useConfirm(): ConfirmFn {\n const confirm = React.useContext(ConfirmContext);\n if (!confirm) {\n throw new Error(\"useConfirm must be used within a ConfirmProvider\");\n }\n return confirm;\n}\n"],"mappings":";;;;;;;;AA2BA,MAAM,iBAAiB,MAAM,cAAgC,KAAK;AAElE,SAAgB,gBAAgB,EAAE,YAA4C;CAC5E,MAAM,CAAC,SAAS,cAAc,MAAM,SAAgC,KAAK;CACzE,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,GAAG;CAC1D,MAAM,cAAc,MAAM,OAAO,MAAM;CAEvC,MAAM,UAAU,MAAM,aAAwB,UAAU,EAAE,KAAK;AAC7D,SAAO,IAAI,SAAkB,YAAY;AACvC,mBAAgB,GAAG;AACnB,cAAW;IAAE;IAAS;IAAS,CAAC;IAChC;IACD,EAAE,CAAC;CAEN,SAAS,MAAM,OAAgB;AAC7B,WAAS,QAAQ,MAAM;AACvB,cAAY,UAAU;AACtB,aAAW,KAAK;AAChB,kBAAgB,GAAG;;CAGrB,SAAS,iBAAiB,MAAe;AACvC,MAAI,KAAM;AACV,MAAI,CAAC,YAAY,QACf,UAAS,QAAQ,MAAM;AAEzB,cAAY,UAAU;AACtB,aAAW,KAAK;AAChB,kBAAgB,GAAG;;CAGrB,MAAM,mBAAmB,SAAS,QAAQ;CAC1C,MAAM,uBAAuB,CAAC,CAAC;CAC/B,MAAM,aAAa,CAAC,wBAAwB,iBAAiB;AAE7D,QACE,qBAAC,eAAe,UAAhB;EAAyB,OAAO;YAAhC,CACG,UACD,oBAAC,aAAD;GAAa,MAAM,YAAY;GAAM,cAAc;aACjD,qBAAC,YAAY,SAAb,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,YAAY,OAAb,EAAA,UACG,SAAS,QAAQ,SAAS,iBACT,CAAA,EACnB,SAAS,QAAQ,eAChB,oBAAC,YAAY,aAAb,EAAA,UACG,QAAQ,QAAQ,aACO,CAAA,CAExB;;IACL,wBACC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAO,MAAK;MAAQ,SAAQ;gBACzB,SAAS,QAAQ,2BAChB,qBAAA,UAAA,EAAA,UAAA;OAAE;OACK,oBAAC,QAAD;QAAM,WAAU;kBAAiB;QAAwB,CAAA;OAAC;OAAI;OAElE,EAAA,CAAA;MAEC,CAAA,EACR,oBAAC,OAAD;MACE,IAAG;MACH,WAAA;MACA,OAAO;MACP,gBAAgB,UAAU,gBAAgB,MAAM;MAChD,YAAY,UAAU;AACpB,WAAI,MAAM,QAAQ,WAAW,iBAAiB,iBAC5C,OAAM,KAAK;;MAGf,CAAA,CACE;;IAER,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,YAAY,OAAb;MAAmB,eAAe,MAAM,MAAM;gBAC3C,SAAS,QAAQ,cAAc;MACd,CAAA,EACpB,oBAAC,YAAY,OAAb;MACE,QACE,oBAAC,QAAD,EACE,SACE,SAAS,QAAQ,YAAY,WACzB,gBACA,WAEN,CAAA;MAEJ,UAAU,CAAC;MACX,eAAe,MAAM,KAAK;gBAEzB,SAAS,QAAQ,eAAe;MACf,CAAA,CAChB;;IACc,EAAA,CAAA;GACV,CAAA,CACU;;;AAI9B,SAAgB,aAAwB;CACtC,MAAM,UAAU,MAAM,WAAW,eAAe;AAChD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,mDAAmD;AAErE,QAAO"}
|
package/dist/input.mjs
CHANGED
package/dist/label.mjs
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cn.mjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAGA,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,QAAQ,KAAK,OAAO,CAAC"}
|
package/dist/providers.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"providers.mjs","names":[],"sources":["../src/components/providers/providers.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ConfirmProvider } from \"../../hooks/use-confirm\";\nimport { Toast } from \"../toast
|
|
1
|
+
{"version":3,"file":"providers.mjs","names":[],"sources":["../src/components/providers/providers.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ConfirmProvider } from \"../../hooks/use-confirm\";\nimport { Toast } from \"../toast\";\nimport { Tooltip } from \"../tooltip\";\n\ntype ProvidersProps = {\n children?: React.ReactNode;\n};\n\nexport function Providers({ children }: ProvidersProps) {\n return (\n <Toast.Provider>\n <Tooltip.Provider>\n <ConfirmProvider>\n {children}\n <Toast.Viewport>\n <Toast.List />\n </Toast.Viewport>\n </ConfirmProvider>\n </Tooltip.Provider>\n </Toast.Provider>\n );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,UAAU,EAAE,YAA4B;AACtD,QACE,oBAAC,MAAM,UAAP,EAAA,UACE,oBAAC,QAAQ,UAAT,EAAA,UACE,qBAAC,iBAAD,EAAA,UAAA,CACG,UACD,oBAAC,MAAM,UAAP,EAAA,UACE,oBAAC,MAAM,MAAP,EAAc,CAAA,EACC,CAAA,CACD,EAAA,CAAA,EACD,CAAA,EACJ,CAAA"}
|
package/dist/select.d.mts
CHANGED
|
@@ -1,42 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Select as Select$1 } from "@base-ui/react/select";
|
|
1
|
+
import { SelectContent, SelectItem, SelectRoot, SelectSeparator, SelectTrigger } from "./components/select/select.mjs";
|
|
3
2
|
|
|
4
|
-
//#region src/components/select/
|
|
5
|
-
type SelectRootProps = React.ComponentProps<typeof Select$1.Root>;
|
|
6
|
-
declare function SelectRoot({
|
|
7
|
-
items,
|
|
8
|
-
children,
|
|
9
|
-
...props
|
|
10
|
-
}: SelectRootProps): React.JSX.Element;
|
|
11
|
-
type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof Select$1.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$1.Popup> & Pick<React.ComponentPropsWithoutRef<typeof Select$1.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$1.Item>;
|
|
30
|
-
declare function SelectItem({
|
|
31
|
-
className,
|
|
32
|
-
children,
|
|
33
|
-
...props
|
|
34
|
-
}: SelectItemProps): React.JSX.Element;
|
|
35
|
-
type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof Select$1.Separator>;
|
|
36
|
-
declare function SelectSeparator({
|
|
37
|
-
className,
|
|
38
|
-
...props
|
|
39
|
-
}: SelectSeparatorProps): React.JSX.Element;
|
|
3
|
+
//#region src/components/select/index.d.ts
|
|
40
4
|
declare const Select: typeof SelectRoot & {
|
|
41
5
|
Trigger: typeof SelectTrigger;
|
|
42
6
|
Content: typeof SelectContent;
|
package/dist/select.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.mts","names":[],"sources":["../src/components/select/
|
|
1
|
+
{"version":3,"file":"select.d.mts","names":[],"sources":["../src/components/select/index.ts"],"mappings":";;;cAca,MAAA,SAAM,UAAA"}
|
package/dist/select.mjs
CHANGED
|
@@ -1,101 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { Select as Select$1 } 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$1.Root, {
|
|
26
|
-
items: derivedItems,
|
|
27
|
-
...props,
|
|
28
|
-
children
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
function SelectTrigger({ className, placeholder, ...props }) {
|
|
32
|
-
return /* @__PURE__ */ jsxs(Select$1.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$1.Value, {
|
|
36
|
-
placeholder,
|
|
37
|
-
className: "data-placeholder:text-(--muted-foreground)"
|
|
38
|
-
}), /* @__PURE__ */ jsx(Select$1.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$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.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$1.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$1.List, { children })
|
|
67
|
-
})
|
|
68
|
-
}) });
|
|
69
|
-
}
|
|
70
|
-
function SelectItem({ className, children, ...props }) {
|
|
71
|
-
return /* @__PURE__ */ jsxs(Select$1.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$1.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$1.ItemText, {
|
|
88
|
-
className: "col-start-2",
|
|
89
|
-
children
|
|
90
|
-
})]
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
function SelectSeparator({ className, ...props }) {
|
|
94
|
-
return /* @__PURE__ */ jsx(Select$1.Separator, {
|
|
95
|
-
className: cn("-mx-1 my-1 h-px bg-(--border)", className),
|
|
96
|
-
...props
|
|
97
|
-
});
|
|
98
|
-
}
|
|
1
|
+
import { SelectContent, SelectItem, SelectRoot, SelectSeparator, SelectTrigger } from "./components/select/select.mjs";
|
|
2
|
+
//#region src/components/select/index.ts
|
|
99
3
|
const Select = Object.assign(SelectRoot, {
|
|
100
4
|
Trigger: SelectTrigger,
|
|
101
5
|
Content: SelectContent,
|
package/dist/select.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.mjs","names":[
|
|
1
|
+
{"version":3,"file":"select.mjs","names":[],"sources":["../src/components/select/index.ts"],"sourcesContent":["import {\n SelectContent,\n SelectItem,\n SelectRoot,\n SelectSeparator,\n SelectTrigger,\n} from \"./select\";\n\n// Composed in a module without \"use client\" on purpose: Next.js/Turbopack\n// generates a client-reference proxy for each export of a \"use client\"\n// module, and that proxy does not forward extra static properties attached\n// via Object.assign. Doing the composition here (a plain module that just\n// re-imports the already-resolved client references) keeps `Select.Trigger`\n// etc. working when consumed from a Server Component.\nexport const Select = Object.assign(SelectRoot, {\n Trigger: SelectTrigger,\n Content: SelectContent,\n Item: SelectItem,\n Separator: SelectSeparator,\n});\n"],"mappings":";;AAcA,MAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,SAAS;CACT,MAAM;CACN,WAAW;CACZ,CAAC"}
|
package/dist/text.mjs
CHANGED
package/dist/toast.d.mts
CHANGED
|
@@ -1,45 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { ToastClose, ToastContent, ToastDescription, ToastIcon, ToastList, ToastProvider, ToastRoot, ToastTitle, ToastViewport } from "./components/toast/toast.mjs";
|
|
2
|
+
import * as _$_base_ui_react0 from "@base-ui/react";
|
|
3
3
|
|
|
4
|
-
//#region src/components/toast/
|
|
5
|
-
type ToastProviderProps = React.ComponentPropsWithoutRef<typeof Toast$1.Provider>;
|
|
6
|
-
declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
|
|
7
|
-
type ToastViewportProps = React.ComponentPropsWithoutRef<typeof Toast$1.Viewport>;
|
|
8
|
-
declare function ToastViewport({
|
|
9
|
-
className,
|
|
10
|
-
...props
|
|
11
|
-
}: ToastViewportProps): React.JSX.Element;
|
|
12
|
-
type ToastRootProps = React.ComponentPropsWithoutRef<typeof Toast$1.Root>;
|
|
13
|
-
declare function ToastRoot({
|
|
14
|
-
className,
|
|
15
|
-
...props
|
|
16
|
-
}: ToastRootProps): React.JSX.Element;
|
|
17
|
-
type ToastContentProps = React.ComponentPropsWithoutRef<typeof Toast$1.Content>;
|
|
18
|
-
declare function ToastContent({
|
|
19
|
-
className,
|
|
20
|
-
...props
|
|
21
|
-
}: ToastContentProps): React.JSX.Element;
|
|
22
|
-
type ToastTitleProps = React.ComponentPropsWithoutRef<typeof Toast$1.Title>;
|
|
23
|
-
declare function ToastTitle({
|
|
24
|
-
className,
|
|
25
|
-
...props
|
|
26
|
-
}: ToastTitleProps): React.JSX.Element;
|
|
27
|
-
type ToastDescriptionProps = React.ComponentPropsWithoutRef<typeof Toast$1.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$1.Close>;
|
|
41
|
-
declare function ToastClose(props: ToastCloseProps): React.JSX.Element;
|
|
42
|
-
declare function ToastList(): React.JSX.Element[];
|
|
4
|
+
//#region src/components/toast/index.d.ts
|
|
43
5
|
declare const Toast: typeof ToastRoot & {
|
|
44
6
|
Provider: typeof ToastProvider;
|
|
45
7
|
Viewport: typeof ToastViewport;
|
|
@@ -49,7 +11,7 @@ declare const Toast: typeof ToastRoot & {
|
|
|
49
11
|
Close: typeof ToastClose;
|
|
50
12
|
Icon: typeof ToastIcon;
|
|
51
13
|
List: typeof ToastList;
|
|
52
|
-
useToastManager: typeof
|
|
14
|
+
useToastManager: typeof _$_base_ui_react0.useToastManager;
|
|
53
15
|
};
|
|
54
16
|
//#endregion
|
|
55
17
|
export { Toast };
|
package/dist/toast.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.d.mts","names":[],"sources":["../src/components/toast/
|
|
1
|
+
{"version":3,"file":"toast.d.mts","names":[],"sources":["../src/components/toast/index.ts"],"mappings":";;;;cAmBa,KAAA,SAAK,SAAA"}
|
package/dist/toast.mjs
CHANGED
|
@@ -1,154 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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 as Toast$1 } from "@base-ui/react/toast";
|
|
8
|
-
//#region src/components/toast/toast.tsx
|
|
9
|
-
function ToastProvider(props) {
|
|
10
|
-
return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
|
|
11
|
-
}
|
|
12
|
-
function ToastViewport({ className, ...props }) {
|
|
13
|
-
return /* @__PURE__ */ jsx(Toast$1.Portal, { children: /* @__PURE__ */ jsx(Toast$1.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$1.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$1.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$1.Title, {
|
|
32
|
-
className: cn("text-[13px] font-semibold", className),
|
|
33
|
-
...props
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
function ToastDescription({ className, ...props }) {
|
|
37
|
-
return /* @__PURE__ */ jsx(Toast$1.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$1.Close, {
|
|
131
|
-
render: /* @__PURE__ */ jsx(Button, {
|
|
132
|
-
variant: "outline",
|
|
133
|
-
size: "sm"
|
|
134
|
-
}),
|
|
135
|
-
...props
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
function ToastList() {
|
|
139
|
-
const { toasts } = Toast$1.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
|
-
}
|
|
1
|
+
import { ToastClose, ToastContent, ToastDescription, ToastIcon, ToastList, ToastProvider, ToastRoot, ToastTitle, ToastViewport, useToastManager } from "./components/toast/toast.mjs";
|
|
2
|
+
//#region src/components/toast/index.ts
|
|
152
3
|
const Toast = Object.assign(ToastRoot, {
|
|
153
4
|
Provider: ToastProvider,
|
|
154
5
|
Viewport: ToastViewport,
|
|
@@ -158,7 +9,7 @@ const Toast = Object.assign(ToastRoot, {
|
|
|
158
9
|
Close: ToastClose,
|
|
159
10
|
Icon: ToastIcon,
|
|
160
11
|
List: ToastList,
|
|
161
|
-
useToastManager
|
|
12
|
+
useToastManager
|
|
162
13
|
});
|
|
163
14
|
//#endregion
|
|
164
15
|
export { Toast };
|
package/dist/toast.mjs.map
CHANGED
|
@@ -1 +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\nfunction ToastProvider(props: ToastProviderProps) {\n return <BaseToast.Provider {...props} />;\n}\n\ntype ToastViewportProps = React.ComponentPropsWithoutRef<\n typeof BaseToast.Viewport\n>;\n\nfunction 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\nfunction 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\nfunction 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\nfunction 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\nfunction 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\nfunction 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\nfunction ToastClose(props: ToastCloseProps) {\n return (\n <BaseToast.Close\n render={<Button variant=\"outline\" size=\"sm\" />}\n {...props}\n />\n );\n}\n\nfunction 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 Toast = Object.assign(ToastRoot, {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Content: ToastContent,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Icon: ToastIcon,\n List: ToastList,\n useToastManager: BaseToast.useToastManager,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toast.mjs","names":[],"sources":["../src/components/toast/index.ts"],"sourcesContent":["import {\n ToastClose,\n ToastContent,\n ToastDescription,\n ToastIcon,\n ToastList,\n ToastProvider,\n ToastRoot,\n ToastTitle,\n ToastViewport,\n useToastManager,\n} from \"./toast\";\n\n// Composed in a module without \"use client\" on purpose: Next.js/Turbopack\n// generates a client-reference proxy for each export of a \"use client\"\n// module, and that proxy does not forward extra static properties attached\n// via Object.assign. Doing the composition here (a plain module that just\n// re-imports the already-resolved client references) keeps `Toast.Content`\n// etc. working when consumed from a Server Component.\nexport const Toast = Object.assign(ToastRoot, {\n Provider: ToastProvider,\n Viewport: ToastViewport,\n Content: ToastContent,\n Title: ToastTitle,\n Description: ToastDescription,\n Close: ToastClose,\n Icon: ToastIcon,\n List: ToastList,\n useToastManager,\n});\n"],"mappings":";;AAmBA,MAAa,QAAQ,OAAO,OAAO,WAAW;CAC5C,UAAU;CACV,UAAU;CACV,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACP,MAAM;CACN,MAAM;CACN;CACD,CAAC"}
|