@florianke/components 0.0.1 → 0.0.3

package/dist/toast.mjs

@@ -0,0 +1,166 @@
+"use client";
+import { t as cn } from "./cn-BpvCVwZv.mjs";
+import { Button } from "./button.mjs";
+import { Text } from "./text.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast as Toast$1 } from "@base-ui/react/toast";
+//#region src/components/toast/toast.tsx
+function ToastProvider(props) {
+	return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
+}
+function ToastViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Portal, { children: /* @__PURE__ */ jsx(Toast$1.Viewport, {
+		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),
+		...props
+	}) });
+}
+function ToastRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Root, {
+		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),
+		...props
+	});
+}
+function ToastContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Content, {
+		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),
+		...props
+	});
+}
+function ToastTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Title, {
+		className: cn("text-[13px] font-semibold", className),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toast$1.Description, {
+		render: /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			size: "small"
+		}),
+		className: cn("text-(--muted-foreground)", className),
+		...props
+	});
+}
+const variantIcons = {
+	success: (props) => /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })]
+	}),
+	error: (props) => /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "m9.5 9.5 5 5m0-5-5 5" })]
+	}),
+	warning: (props) => /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 3.5 2.5 20h19L12 3.5Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 10v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17.5h.01" })
+		]
+	}),
+	info: (props) => /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 11v5.5" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 7.5h.01" })
+		]
+	})
+};
+const variantColors = {
+	success: "text-(--success)",
+	error: "text-(--destructive)",
+	warning: "text-(--warning)",
+	info: "text-(--info)"
+};
+function ToastIcon({ type, className, ...props }) {
+	if (!isToastVariant(type)) return null;
+	const Icon = variantIcons[type];
+	return /* @__PURE__ */ jsx(Icon, {
+		className: cn("size-4 shrink-0", variantColors[type], className),
+		...props
+	});
+}
+function isToastVariant(type) {
+	return !!type && type in variantIcons;
+}
+function ToastClose(props) {
+	return /* @__PURE__ */ jsx(Toast$1.Close, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm"
+		}),
+		...props
+	});
+}
+function ToastList() {
+	const { toasts } = Toast$1.useToastManager();
+	return toasts.map((toast) => /* @__PURE__ */ jsx(ToastRoot, {
+		toast,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastIcon, { type: toast.type }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
+			}),
+			/* @__PURE__ */ jsx(ToastClose, { children: "Dismiss" })
+		] })
+	}, toast.id));
+}
+const Toast = Object.assign(ToastRoot, {
+	Provider: ToastProvider,
+	Viewport: ToastViewport,
+	Content: ToastContent,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Close: ToastClose,
+	Icon: ToastIcon,
+	List: ToastList,
+	useToastManager: Toast$1.useToastManager
+});
+//#endregion
+export { Toast };
+
+//# sourceMappingURL=toast.mjs.map

package/dist/toast.mjs.map

@@ -0,0 +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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"}

package/dist/tooltip.d.mts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+
+//#region src/components/tooltip/tooltip.d.ts
+type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof Tooltip$1.Provider>;
+declare function TooltipProvider({
+  delay,
+  closeDelay,
+  ...props
+}: TooltipProviderProps): React.JSX.Element;
+type TooltipRootProps = React.ComponentPropsWithoutRef<typeof Tooltip$1.Root>;
+declare function TooltipRoot(props: TooltipRootProps): React.JSX.Element;
+type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof Tooltip$1.Trigger>;
+declare function TooltipTrigger({
+  className,
+  ...props
+}: TooltipTriggerProps): React.JSX.Element;
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof Tooltip$1.Popup> & Pick<React.ComponentPropsWithoutRef<typeof Tooltip$1.Positioner>, "side" | "align" | "sideOffset" | "alignOffset">;
+declare function TooltipContent({
+  className,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  children,
+  ...props
+}: TooltipContentProps): React.JSX.Element;
+declare const Tooltip: typeof TooltipRoot & {
+  Provider: typeof TooltipProvider;
+  Trigger: typeof TooltipTrigger;
+  Content: typeof TooltipContent;
+};
+//#endregion
+export { Tooltip };
+//# sourceMappingURL=tooltip.d.mts.map

package/dist/tooltip.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"mappings":";;;;KAMK,oBAAA,GAAuB,KAAA,CAAM,wBAAA,QACzB,SAAA,CAAY,QAAA;AAAA,iBAGZ,eAAA,CAAA;EACP,KAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAMlB,gBAAA,GAAmB,KAAA,CAAM,wBAAA,QAAgC,SAAA,CAAY,IAAA;AAAA,iBAEjE,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAIvC,mBAAA,GAAsB,KAAA,CAAM,wBAAA,QACxB,SAAA,CAAY,OAAA;AAAA,iBAGZ,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,mBAAA,GAAmB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAY/D,mBAAA,GAAsB,KAAA,CAAM,wBAAA,QACxB,SAAA,CAAY,KAAA,IAEnB,IAAA,CACE,KAAA,CAAM,wBAAA,QAAgC,SAAA,CAAY,UAAA;AAAA,iBAI7C,cAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,KAAA;EACA,UAAA;EACA,WAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cA4BT,OAAA,SAAO,WAAA"}

package/dist/tooltip.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { t as cn } from "./cn-BpvCVwZv.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip.tsx
+function TooltipProvider({ delay = 150, closeDelay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay,
+		closeDelay,
+		...props
+	});
+}
+function TooltipRoot(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30", className),
+		...props
+	});
+}
+function TooltipContent({ className, side, align = "center", sideOffset = 8, alignOffset, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		className: "z-50 outline-none",
+		children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+			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),
+			...props,
+			children
+		})
+	}) });
+}
+const Tooltip = Object.assign(TooltipRoot, {
+	Provider: TooltipProvider,
+	Trigger: TooltipTrigger,
+	Content: TooltipContent
+});
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=tooltip.mjs.map

package/dist/tooltip.mjs.map

@@ -0,0 +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\nfunction 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\nfunction TooltipRoot(props: TooltipRootProps) {\n  return <BaseTooltip.Root {...props} />;\n}\n\ntype TooltipTriggerProps = React.ComponentPropsWithoutRef<\n  typeof BaseTooltip.Trigger\n>;\n\nfunction 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\nfunction 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\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Provider: TooltipProvider,\n  Trigger: TooltipTrigger,\n  Content: TooltipContent,\n});\n"],"mappings":";;;;;;AAUA,SAAS,gBAAgB,EACvB,QAAQ,KACR,aAAa,GACb,GAAG,SACoB;AACvB,QACE,oBAACA,UAAY,UAAb;EAA6B;EAAmB;EAAY,GAAI;EAAS,CAAA;;AAM7E,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,UAAY,MAAb,EAAkB,GAAI,OAAS,CAAA;;AAOxC,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,QACE,oBAACA,UAAY,SAAb;EACE,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAYN,SAAS,eAAe,EACtB,WACA,MACA,QAAQ,UACR,aAAa,GACb,aACA,UACA,GAAG,SACmB;AACtB,QACE,oBAACA,UAAY,QAAb,EAAA,UACE,oBAACA,UAAY,YAAb;EACQ;EACC;EACK;EACC;EACb,WAAU;YAEV,oBAACA,UAAY,OAAb;GACE,WAAW,GACT,yLACA,wDACA,8DACA,0DACA,gCACA,UACD;GACD,GAAI;GAEH;GACiB,CAAA;EACG,CAAA,EACN,CAAA;;AAIzB,MAAa,UAAU,OAAO,OAAO,aAAa;CAChD,UAAU;CACV,SAAS;CACT,SAAS;CACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florianke/components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/styles.css

@@ -5,7 +5,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-    --background: oklch(0.984 0 0);
+    --background: oklch(1 0 0);
     --foreground: oklch(0.15 0 0);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.15 0 0);
@@ -19,6 +19,10 @@
     --accent: oklch(0.975 0 0);
     --accent-foreground: oklch(0.15 0 0);
     --ring: oklch(0.62 0.19 259);
+    --success: oklch(0.6 0.15 145);
+    --warning: oklch(0.72 0.16 80);
+    --destructive: oklch(0.58 0.22 25);
+    --info: oklch(0.6 0.19 259);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -37,6 +41,10 @@
         --accent: oklch(0.23 0.006 264);
         --accent-foreground: oklch(0.97 0.003 264);
         --ring: oklch(0.72 0.16 262);
+        --success: oklch(0.72 0.17 145);
+        --warning: oklch(0.8 0.16 80);
+        --destructive: oklch(0.7 0.19 25);
+        --info: oklch(0.72 0.16 262);
     }
 }
 
@@ -55,6 +63,10 @@
     --accent: oklch(0.23 0.006 264);
     --accent-foreground: oklch(0.97 0.003 264);
     --ring: oklch(0.72 0.16 262);
+    --success: oklch(0.72 0.17 145);
+    --warning: oklch(0.8 0.16 80);
+    --destructive: oklch(0.7 0.19 25);
+    --info: oklch(0.72 0.16 262);
 }
 
 body {