plainframe-ui 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -303,22 +303,6 @@ type LoadingPosition = "start" | "end" | "center";
 type WithCssProp$5 = {
     css?: Interpolation<Theme>;
 };
-type ButtonBase = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style"> & WithCssProp$5 & {
-    size?: ButtonSize;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
-    rounded?: boolean;
-    fullWidth?: boolean;
-    loading?: boolean;
-    loadingIndicator?: ReactNode;
-    loadingPosition?: LoadingPosition;
-    className?: string;
-    hoverEffect?: boolean;
-    children?: ReactNode;
-};
-type ButtonProps = ButtonBase & {
-    variant?: ButtonVariant;
-};
 declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "style" | "color"> & WithCssProp$5 & {
     size?: ButtonSize;
     startIcon?: ReactNode;
@@ -389,6 +373,12 @@ type WithCssProp$3 = {
     css?: Interpolation<Theme>;
 };
 type CardDirection = "horizontal" | "vertical";
+type Align$3 = "start" | "center" | "end";
+type SectionPadding = {
+    padding?: ContainerProps["padding"];
+    paddingX?: ContainerProps["padding"];
+    paddingY?: ContainerProps["padding"];
+};
 type CardProps = WithCssProp$3 & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "className"> & {
     variant?: ContainerProps["variant"];
     padding?: ContainerProps["padding"];
@@ -404,7 +394,22 @@ type CardProps = WithCssProp$3 & Omit<React.HTMLAttributes<HTMLDivElement>, "onC
     direction?: CardDirection;
     className?: string;
 };
+type CardSectionBaseProps = WithCssProp$3 & SectionPadding & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    align?: Align$3;
+};
+type CardSideProps = CardSectionBaseProps;
 declare const Card: React.ForwardRefExoticComponent<React.PropsWithoutRef<CardProps> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.FC<CardSectionBaseProps>;
+declare const CardStart: React.FC<CardSideProps>;
+declare const CardEnd: React.FC<CardSideProps>;
+type TextTune = {
+    weight?: number | string;
+    size?: number | string;
+    color?: string | "primary" | "secondary";
+};
+declare const CardTitle: React.FC<CardSectionBaseProps & TextTune>;
+declare const CardDescription: React.FC<CardSectionBaseProps & TextTune>;
 
 /** @jsxImportSource @emotion/react */
 
@@ -1407,6 +1412,7 @@ declare const toast: {
         bareRenderer: boolean;
     }>) => void;
 };
+declare function ToastViewport(): JSX.Element | null;
 
 /** @jsxImportSource @emotion/react */
 
@@ -1588,4 +1594,4 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
 
 declare function CssBaseline(): _emotion_react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionBar, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarGroup, Backdrop, Badge, BreadCrumbItem, BreadCrumbs, Button, ButtonGroup, type ButtonProps, Card, CardGroup, Checkbox, Chip, CodeField, ColorPatches, Container, ContextZone, CssBaseline, Divider, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fade, Flex, Grow, Image, type ImageProps, ImageStack, Kbd, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSwitchItem, MenuVariantCtx, Modal, ModalContent, type ModalProps, ModalTrigger, type Mode, Pagination, type PlainframeUITheme, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps, Progress, Quote, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, Rotate, type Scale, Select, Skeleton, Slide, Slider, Step, Stepper, SubMenu, SubMenuContent, SubMenuTrigger, Switch, Tab, TabContent, Tabs, TextArea, TextField, type TextFieldProps, type ThemeProp, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipTrigger, Typography, defaultDarkTheme, defaultLightTheme, surfaceFromNeutral, textDark, textLight, toast, useColorMode, useColorModeValue, useDropdownMenuActiveIndex, usePlainframeUITheme, usePopoverContext, usePrimary, usePrimitives };
+export { Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionBar, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarGroup, Backdrop, Badge, BreadCrumbItem, BreadCrumbs, Button, ButtonGroup, Card, CardContent, CardDescription, CardEnd, CardGroup, CardStart, CardTitle, Checkbox, Chip, CodeField, ColorPatches, Container, ContextZone, CssBaseline, Divider, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fade, Flex, Grow, Image, ImageStack, Kbd, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSwitchItem, MenuVariantCtx, Modal, ModalContent, ModalTrigger, type Mode, Pagination, type PlainframeUITheme, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, RadioGroup, RadioItem, Rotate, type Scale, Select, Skeleton, Slide, Slider, Step, Stepper, SubMenu, SubMenuContent, SubMenuTrigger, Switch, Tab, TabContent, Tabs, TextArea, TextField, type ThemeProp, ThemeProvider, type ThemeProviderProps, ToastViewport, Tooltip, TooltipContent, TooltipTrigger, Typography, defaultDarkTheme, defaultLightTheme, surfaceFromNeutral, textDark, textLight, toast, useColorMode, useColorModeValue, useDropdownMenuActiveIndex, usePlainframeUITheme, usePopoverContext, usePrimary, usePrimitives };

package/dist/index.js

@@ -1691,14 +1691,14 @@ import { jsx as jsx8, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var u = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
 var asArray = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
 var mergeCss = (...parts) => css8(parts.filter(Boolean));
-function cloneIcon(icon, px4, color = "currentColor") {
+function cloneIcon(icon, px5, color = "currentColor") {
   if (!isValidElement3(icon)) return icon;
   const props = icon.props || {};
   const next = {};
-  if (props.size == null) next.size = px4;
+  if (props.size == null) next.size = px5;
   if (props.color == null) next.color = color;
   if (props.style?.fontSize == null)
-    next.style = { ...props.style || {}, fontSize: px4 };
+    next.style = { ...props.style || {}, fontSize: px5 };
   return cloneElement3(icon, { ...props, ...next });
 }
 var TextField = forwardRef3(function TextField2({
@@ -2251,7 +2251,7 @@ var SubMenuTrigger = ({ children, chevron, asChild = true }) => {
     transition: "transform 300ms cubic-bezier(.6,1.3,.5,1)",
     "& > svg": { width: 16, height: 16, display: "block" }
   });
-  const ChevronNode = /* @__PURE__ */ jsx9("span", { className: "pfui-submenu-chevron", css: chevronCss, "aria-hidden": true, children: chevron ?? /* @__PURE__ */ jsx9(ChevronDown2, { strokeWidth: 2.125 }) });
+  const ChevronNode = /* @__PURE__ */ jsx9("span", { className: "pfui-submenu-chevron", css: chevronCss, "aria-hidden": true, children: chevron ?? /* @__PURE__ */ jsx9(ChevronDown2, { strokeWidth: 2.5 }) });
   const inject = (el) => cloneElement4(el, {
     ...el.props,
     "data-subtrigger": "",
@@ -2955,7 +2955,7 @@ var DropdownMenuContent = React9.forwardRef(
       y: { type: "spring", stiffness: 420, damping: 30, mass: 0.6 },
       opacity: { duration: 0.12, ease: "linear" }
     };
-    const positionCss = emCss2({
+    const positionCss2 = emCss2({
       position: strategy,
       top: y ?? 0,
       left: x ?? 0,
@@ -2971,7 +2971,7 @@ var DropdownMenuContent = React9.forwardRef(
           ref: mergeRefs(ref, refs.setFloating)
         }),
         className,
-        css: [baseCss, positionCss, userCss],
+        css: [baseCss, positionCss2, userCss],
         initial,
         animate: { opacity: 1, x: 0, y: 0, scale: 1 },
         exit,
@@ -4305,15 +4305,15 @@ function resolveGap(gap, theme) {
 }
 function sectionPaddingStyles(theme, padding, paddingX, paddingY) {
   const p = resolveTokenPadding(padding, theme);
-  const px4 = resolveTokenPadding(paddingX, theme);
+  const px5 = resolveTokenPadding(paddingX, theme);
   const py = resolveTokenPadding(paddingY, theme);
   const styles = {};
-  if (p && !px4 && !py) {
+  if (p && !px5 && !py) {
     styles.padding = p;
   }
-  if (px4) {
-    styles.paddingLeft = px4;
-    styles.paddingRight = px4;
+  if (px5) {
+    styles.paddingLeft = px5;
+    styles.paddingRight = px5;
   }
   if (py) {
     styles.paddingTop = py;
@@ -4750,10 +4750,10 @@ var Autocomplete = ({
     if (typeof document === "undefined") return;
     const menu = document.querySelector(`.${cls("menu")}`);
     if (!menu) return;
-    const first = menu.querySelector(
+    const first2 = menu.querySelector(
       '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
     );
-    first?.focus();
+    first2?.focus();
   };
   const handleKeyDown = (e) => {
     if (e.key === " " || e.code === "Space" || e.key === "Spacebar") {
@@ -4773,12 +4773,12 @@ var Autocomplete = ({
     if (e.key === "Tab" && !e.shiftKey && open) {
       const menu = typeof document !== "undefined" ? document.querySelector(`.${cls("menu")}`) : null;
       if (menu) {
-        const first = menu.querySelector(
+        const first2 = menu.querySelector(
           '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
         );
-        if (first) {
+        if (first2) {
           e.preventDefault();
-          first.focus();
+          first2.focus();
           return;
         }
       }
@@ -5000,16 +5000,16 @@ var Avatar = forwardRef10(
     useEffect7(() => {
       setShowImg(!!src);
     }, [src]);
-    const px4 = getSize2(size, theme);
-    const numeric = typeof px4 === "number" ? px4 : Number.parseFloat(String(px4)) || 0;
+    const px5 = getSize2(size, theme);
+    const numeric = typeof px5 === "number" ? px5 : Number.parseFloat(String(px5)) || 0;
     const fontSize = numeric ? Math.round(numeric * (numeric <= 28 ? 0.55 : 0.52)) : void 0;
     const radius2 = rounded ? theme.radius.full : theme.radius.md;
     const bg = getPaletteColor(theme, color);
     const fg = getForegroundColor(theme, color);
     const fallbackText = getFallbackText(children, alt);
     const baseCss = css14({
-      width: px4,
-      height: px4,
+      width: px5,
+      height: px5,
       borderRadius: radius2,
       display: "inline-flex",
       alignItems: "center",
@@ -6285,17 +6285,17 @@ var toPx2 = (v, fallback = 1) => {
   return /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v;
 };
 var isOutlinedVariant = (v) => typeof v === "string" && /^(outlined|outlined-soft|outline-soft)$/i.test(v);
-var visualLeaf = (node, first) => {
+var visualLeaf = (node, first2) => {
   if (!isEl2(node)) return null;
   if (isGroup(node)) {
     const kids = Children3.toArray(node.props.children).filter(isValidElement8);
     if (!kids.length) return null;
-    return visualLeaf(first ? kids[0] : kids[kids.length - 1], first);
+    return visualLeaf(first2 ? kids[0] : kids[kids.length - 1], first2);
   }
   if (isMenu(node)) {
     const kids = Children3.toArray(node.props.children).filter(isValidElement8);
     const trig = kids.find(isTrigger);
-    return trig ? visualLeaf(trig, first) : null;
+    return trig ? visualLeaf(trig, first2) : null;
   }
   if (isTrigger(node)) {
     const kids = Children3.toArray(node.props.children ?? []).filter(isValidElement8);
@@ -11678,7 +11678,24 @@ function isOptionsInput(x) {
     "id"
   ].some((k) => k in x);
 }
+var ENTER_SPRING = { type: "spring", stiffness: 920, damping: 100 };
 var ROOT_ID = "toast-host";
+var getIn = (obj, path) => path.split(".").reduce((o, k) => o == null ? o : o[k], obj);
+var first = (theme, paths) => {
+  for (const p of paths) {
+    const v = getIn(theme, p);
+    if (v != null && v !== "") return v;
+  }
+  return void 0;
+};
+var px4 = (v, fb) => v == null ? `${fb}px` : typeof v === "number" ? `${v}px` : String(v);
+function resolveToastTokens(theme) {
+  const radius2 = first(theme, ["radius.md", "shape.borderRadius", "radii.md"]);
+  const padX = first(theme, ["spacing.lg", "space.4", "spacing.4"]);
+  const padY = first(theme, ["spacing.md", "space.3", "spacing.3"]);
+  const shadow = first(theme, ["shadows.lg", "elevation.lg"]) ?? "0 8px 24px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.05)";
+  return { radius: px4(radius2, 16), padX: px4(padX, 14), padY: px4(padY, 12), shadow: String(shadow) };
+}
 var hostEl = null;
 function ensureHost() {
   if (typeof document === "undefined") return;
@@ -11787,6 +11804,28 @@ function pushOutOldestIntoQueue() {
   store.queue.push(oldest);
   syncAndNotify();
 }
+var normalizeStatus = (s) => {
+  if (s === "danger") return "error";
+  const allowed = ["default", "success", "error", "warning", "info"];
+  return allowed.includes(s) ? s : "default";
+};
+function statusColors(theme, s) {
+  const st = normalizeStatus(s);
+  const panelBg = theme.surface?.panelBg ?? "#fff";
+  const panelFg = theme.text?.primary ?? "#111";
+  const border = theme.surface?.border;
+  if (st === "default" || st === "info") return { bg: panelBg, fg: panelFg, border };
+  const on = theme.text?.onColors ?? {};
+  const pick = (k, fallbackBg, fallbackFg) => ({
+    bg: theme.colors?.[k] ?? theme.palette?.[k]?.[700] ?? fallbackBg,
+    fg: on?.[k] ?? fallbackFg,
+    border: "transparent"
+  });
+  if (st === "success") return pick("success", "#22C55E", "#fff");
+  if (st === "warning") return pick("warning", "#F59E0B", "#fff");
+  if (st === "error") return pick("error", "#EF4444", "#fff");
+  return { bg: panelBg, fg: panelFg, border };
+}
 var toast = Object.assign(
   (contentOrOptions, opts) => {
     ensureHost();
@@ -11873,8 +11912,8 @@ var toast = Object.assign(
     update: (id, o) => toast({ id, ...o }),
     dismiss: (id) => {
       if (!id) {
-        const first = store.displayed.find((d) => !store.exiting[d.id])?.id;
-        if (first) toast.dismiss(first);
+        const first2 = store.displayed.find((d) => !store.exiting[d.id])?.id;
+        if (first2) toast.dismiss(first2);
         return;
       }
       clearTimer(id);
@@ -11945,6 +11984,23 @@ var toast = Object.assign(
     }
   }
 );
+function normalizeDismiss(show) {
+  if (typeof show === "string") return show;
+  if (show === true) return "always";
+  if (show === false) return "never";
+  return cfg.showDismiss;
+}
+function positionCss(pos) {
+  const map = {
+    "top-left": { top: 16, left: 16, alignItems: "flex-start" },
+    "top-center": { top: 16, left: "50%", transform: "translateX(-50%)", alignItems: "center" },
+    "top-right": { top: 16, right: 16, alignItems: "flex-end" },
+    "bottom-left": { bottom: 16, left: 16, alignItems: "flex-start" },
+    "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)", alignItems: "center" },
+    "bottom-right": { bottom: 16, right: 16, alignItems: "flex-end" }
+  };
+  return map[pos];
+}
 var rowCss = css44({ display: "flex", alignItems: "flex-start", gap: 10 });
 var iconWrapCss = css44({
   flex: "0 0 auto",
@@ -11955,6 +12011,193 @@ var iconWrapCss = css44({
 });
 var textCss = css44({ fontSize: 14, lineHeight: 1.4, fontWeight: 500, flex: 1, minWidth: 0 });
 var actionRowCss = css44({ display: "flex", alignItems: "center", gap: 6, marginRight: -2 });
+function ToastHost() {
+  const snap = useSyncExternalStore(store.subscribe.bind(store), () => store.snapshot, () => store.snapshot);
+  const theme = usePlainframeUITheme();
+  const TOK = resolveToastTokens(theme);
+  const isBottom = cfg.position.startsWith("bottom");
+  const list = isBottom ? snap.displayed : [...snap.displayed].reverse();
+  const stackStyle = {
+    position: "fixed",
+    zIndex: cfg.zIndex,
+    pointerEvents: "none",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    ...positionCss(cfg.position),
+    ...cfg.styles.stack ?? {}
+  };
+  return /* @__PURE__ */ jsx52("div", { className: "plainframe-ui-toast-stack", css: css44(stackStyle), children: /* @__PURE__ */ jsx52(AnimatePresence5, { initial: false, children: list.map((t, index) => {
+    const from = snap.enterFrom[t.id] || "tail";
+    const enterY = isBottom ? from === "head" ? -16 : 16 : from === "head" ? 16 : -16;
+    const mt = index > 0 ? cfg.gutter : 0;
+    const ctx = {
+      toast: t,
+      close: toast.dismiss,
+      pause: toast.pause,
+      resume: toast.resume
+    };
+    const { bg, fg, border } = statusColors(theme, t.status);
+    const baseSurface = {
+      position: "relative",
+      overflow: "hidden",
+      borderRadius: TOK.radius,
+      boxShadow: TOK.shadow,
+      padding: `${TOK.padY} calc(${TOK.padX} + 30px) ${TOK.padY} ${TOK.padX}`,
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      gap: 10,
+      background: bg,
+      color: fg,
+      cursor: t.onClick ? "pointer" : "default",
+      border: border ? `1px solid ${border}` : "1px solid transparent"
+    };
+    const extraSurface = typeof cfg.styles.surface === "function" ? cfg.styles.surface(t) : cfg.styles.surface ?? {};
+    const dismissMode = normalizeDismiss(t.showDismiss);
+    const modeStyles = {};
+    const closeSel = "& .plainframe-ui-toast-close";
+    const hoverSel = "&:hover .plainframe-ui-toast-close";
+    if (dismissMode === "hover") {
+      modeStyles[closeSel] = { opacity: 0, pointerEvents: "none" };
+      modeStyles[hoverSel] = { opacity: 1, pointerEvents: "auto" };
+    } else if (dismissMode === "always") {
+      modeStyles[closeSel] = { opacity: 1, pointerEvents: "auto" };
+    } else if (dismissMode === "never") {
+      modeStyles[closeSel] = { display: "none" };
+    }
+    const wrapCss = css44({ ...baseSurface, ...extraSurface, ...modeStyles });
+    const closeCss = css44({
+      position: "absolute",
+      top: 8,
+      right: 8,
+      appearance: "none",
+      border: 0,
+      background: "transparent",
+      color: fg,
+      width: 28,
+      height: 28,
+      borderRadius: 8,
+      cursor: "pointer",
+      lineHeight: 1,
+      transition: "opacity .12s ease",
+      display: "grid",
+      placeItems: "center",
+      ...cfg.styles.close ?? {}
+    });
+    let content;
+    if (t.bare && t.render) {
+      const inner = typeof t.render === "function" ? t.render(ctx) : t.render;
+      content = /* @__PURE__ */ jsx52("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
+    } else if (cfg.bareRenderer && cfg.renderer) {
+      const inner = typeof cfg.renderer === "function" ? cfg.renderer(ctx) : cfg.renderer;
+      content = /* @__PURE__ */ jsx52("div", { style: { pointerEvents: "auto" }, onClick: (e) => t.onClick?.(t.id, e), children: inner });
+    } else {
+      let innerBlock;
+      if (cfg.renderer) {
+        innerBlock = typeof cfg.renderer === "function" ? cfg.renderer(ctx) : cfg.renderer;
+      } else if (t.render && !t.bare) {
+        innerBlock = typeof t.render === "function" ? t.render(ctx) : t.render;
+      } else {
+        innerBlock = /* @__PURE__ */ jsxs31(Fragment9, { children: [
+          /* @__PURE__ */ jsxs31("div", { css: rowCss, children: [
+            t.startIcon && /* @__PURE__ */ jsx52("div", { css: iconWrapCss, children: t.startIcon }),
+            /* @__PURE__ */ jsx52("div", { css: textCss, children: t.content }),
+            t.endIcon && /* @__PURE__ */ jsx52("div", { css: iconWrapCss, children: t.endIcon })
+          ] }),
+          t.action && /* @__PURE__ */ jsx52("div", { css: actionRowCss, children: t.action })
+        ] });
+      }
+      content = /* @__PURE__ */ jsxs31("div", { css: wrapCss, onClick: (e) => t.onClick?.(t.id, e), children: [
+        innerBlock,
+        /* @__PURE__ */ jsx52(
+          "button",
+          {
+            className: "plainframe-ui-toast-close",
+            "aria-label": "Close",
+            css: closeCss,
+            onClick: (e) => {
+              e.stopPropagation();
+              toast.dismiss(t.id);
+            },
+            children: /* @__PURE__ */ jsx52(X4, { strokeWidth: 2.5, size: 14 })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx52(
+      SwipeItem,
+      {
+        id: t.id,
+        isBottom,
+        mt,
+        enterY,
+        width: t.width,
+        pauseOnHover: t.pauseOnHover !== false,
+        children: content
+      },
+      t.id
+    );
+  }) }) });
+}
+function SwipeItem(props) {
+  const { id, isBottom, mt, enterY, width, pauseOnHover, children } = props;
+  const controls = useAnimationControls();
+  useEffect14(() => {
+    controls.start({ opacity: 1, y: 0, height: "auto", x: 0, transition: ENTER_SPRING });
+  }, [controls]);
+  const itemStyle = {
+    pointerEvents: "auto",
+    willChange: "transform, opacity, height, margin, scale, width, max-width",
+    marginTop: mt,
+    width: "100%",
+    maxWidth: width != null ? typeof width === "number" ? `${width}px` : width : "none",
+    ...cfg.styles.item ?? {}
+  };
+  return /* @__PURE__ */ jsx52(
+    motion5.div,
+    {
+      layout: true,
+      className: "plainframe-ui-toast-item",
+      css: css44(itemStyle),
+      initial: { opacity: 0, y: enterY, height: "auto", x: 0 },
+      animate: controls,
+      exit: {
+        opacity: 0,
+        y: isBottom ? 6 : -6,
+        height: 0,
+        marginTop: 0,
+        transition: { type: "tween", ease: "easeInOut", duration: 0.14 }
+      },
+      drag: "x",
+      dragElastic: 0.2,
+      dragMomentum: true,
+      whileDrag: { scale: 0.98, opacity: 0.95 },
+      onDragEnd: (_, info) => {
+        const dist = Math.abs(info.offset.x);
+        const velo = Math.abs(info.velocity.x);
+        const shouldFling = dist > 60 || velo > 600;
+        if (!shouldFling) {
+          controls.start({ x: 0, opacity: 1, transition: { type: "spring", stiffness: 700, damping: 40 } });
+          return;
+        }
+        const dir = info.offset.x !== 0 ? Math.sign(info.offset.x) : Math.sign(info.velocity.x || 1);
+        const targetX = dir * (window.innerWidth + 160);
+        controls.start({
+          x: targetX,
+          opacity: 0.9,
+          transition: { type: "spring", stiffness: 280, damping: 24, velocity: info.velocity.x / 10 }
+        }).then(() => toast.dismiss(id));
+      },
+      onMouseEnter: pauseOnHover ? () => toast.pause(id) : void 0,
+      onMouseLeave: pauseOnHover ? () => toast.resume(id) : void 0,
+      children
+    }
+  );
+}
+function ToastViewport() {
+  ensureHost();
+  return hostEl ? createPortal(/* @__PURE__ */ jsx52(ToastHost, {}), hostEl) : null;
+}
 
 // src/components/Tooltip.tsx
 import React47, {
@@ -12278,7 +12521,12 @@ export {
   Button,
   ButtonGroup,
   Card,
+  CardContent,
+  CardDescription,
+  CardEnd,
   CardGroup,
+  CardStart,
+  CardTitle,
   Checkbox,
   Chip,
   CodeField,
@@ -12339,6 +12587,7 @@ export {
   TextArea,
   TextField,
   ThemeProvider,
+  ToastViewport,
   Tooltip,
   TooltipContent,
   TooltipTrigger,