@biotechusa/pdo-ui 1.0.1 → 1.0.3

package/dist/index.css

@@ -7,6 +7,11 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -525,6 +530,10 @@
     z-index: 50;
   }
 
+  .z-\[calc\(9999-var\(--toast-index\)\)\] {
+    z-index: calc(9999 - var(--toast-index));
+  }
+
   .order-first {
     order: -9999;
   }
@@ -697,6 +706,10 @@
     height: var(--active-tab-height);
   }
 
+  .h-\(--toast-calc-height\) {
+    height: var(--toast-calc-height);
+  }
+
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -825,6 +838,10 @@
     width: calc(100% - (calc(var(--spacing) * 12)));
   }
 
+  .w-\[calc\(100\%-var\(--toast-inset\)\*2\)\] {
+    width: calc(100% - var(--toast-inset) * 2);
+  }
+
   .w-fit {
     width: fit-content;
   }
@@ -845,6 +862,10 @@
     max-width: calc(var(--spacing) * 64);
   }
 
+  .max-w-90 {
+    max-width: calc(var(--spacing) * 90);
+  }
+
   .max-w-92 {
     max-width: calc(var(--spacing) * 92);
   }
@@ -961,6 +982,10 @@
     rotate: 10deg;
   }
 
+  .transform {
+    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+  }
+
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -1954,6 +1979,11 @@
     transition-duration: .2s;
   }
 
+  .duration-250 {
+    --tw-duration: .25s;
+    transition-duration: .25s;
+  }
+
   .duration-300 {
     --tw-duration: .3s;
     transition-duration: .3s;
@@ -2006,10 +2036,38 @@
     }
   }
 
+  .\[--toast-calc-height\:var\(--toast-frontmost-height\,var\(--toast-height\)\)\] {
+    --toast-calc-height: var(--toast-frontmost-height, var(--toast-height));
+  }
+
+  .\[--toast-gap\:--spacing\(3\)\] {
+    --toast-gap: calc(var(--spacing) * 3);
+  }
+
+  .\[--toast-inset\:--spacing\(4\)\] {
+    --toast-inset: calc(var(--spacing) * 4);
+  }
+
+  .\[--toast-peek\:--spacing\(3\)\] {
+    --toast-peek: calc(var(--spacing) * 3);
+  }
+
+  .\[--toast-scale\:calc\(max\(0\,1-\(var\(--toast-index\)\*\.1\)\)\)\] {
+    --toast-scale: calc(max(0, 1 - (var(--toast-index) * .1)));
+  }
+
+  .\[--toast-shrink\:calc\(1-var\(--toast-scale\)\)\] {
+    --toast-shrink: calc(1 - var(--toast-scale));
+  }
+
   .\[background\:linear-gradient\(120deg\,transparent_40\%\,var\(--skeleton-highlight\)\,transparent_60\%\)_var\(--color-muted\)_0_0_\/_200\%_100\%_fixed\] {
     background: linear-gradient(120deg, transparent 40%, var(--skeleton-highlight), transparent 60%) var(--color-muted) 0 0 / 200% 100% fixed;
   }
 
+  .\[transition\:transform_\.5s_cubic-bezier\(\.22\,1\,\.36\,1\)\,opacity_\.5s\,height_\.15s\] {
+    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s, height .15s;
+  }
+
   :is(.\*\:min-h-6 > *) {
     min-height: calc(var(--spacing) * 6);
   }
@@ -2494,6 +2552,26 @@
     border-bottom-left-radius: 0;
   }
 
+  .after\:absolute:after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .after\:left-0:after {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 0);
+  }
+
+  .after\:h-\[calc\(var\(--toast-gap\)\+1px\)\]:after {
+    content: var(--tw-content);
+    height: calc(var(--toast-gap)  + 1px);
+  }
+
+  .after\:w-full:after {
+    content: var(--tw-content);
+    width: 100%;
+  }
+
   .last\:hidden:last-child {
     display: none;
   }
@@ -2684,6 +2762,30 @@
     }
   }
 
+  :where([data-type="error"]) .in-data-\[type\=error\]\:text-destructive {
+    color: var(--destructive);
+  }
+
+  :where([data-type="info"]) .in-data-\[type\=info\]\:text-info {
+    color: var(--info);
+  }
+
+  :where([data-type="loading"]) .in-data-\[type\=loading\]\:animate-spin {
+    animation: var(--animate-spin);
+  }
+
+  :where([data-type="loading"]) .in-data-\[type\=loading\]\:opacity-72 {
+    opacity: .72;
+  }
+
+  :where([data-type="success"]) .in-data-\[type\=success\]\:text-success {
+    color: var(--success);
+  }
+
+  :where([data-type="warning"]) .in-data-\[type\=warning\]\:text-warning {
+    color: var(--warning);
+  }
+
   .not-has-disabled\:has-not-focus-visible\:not-has-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/4\%\)\]:not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid="true"])):before {
     content: var(--tw-content);
     --tw-shadow: 0 1px var(--tw-shadow-color, #0000000a);
@@ -3027,6 +3129,14 @@
     }
   }
 
+  .data-behind\:pointer-events-none[data-behind] {
+    pointer-events: none;
+  }
+
+  .data-behind\:opacity-0[data-behind] {
+    opacity: 0;
+  }
+
   .data-checked\:translate-x-3[data-checked] {
     --tw-translate-x: calc(var(--spacing) * 3);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3095,6 +3205,22 @@
     opacity: 0;
   }
 
+  .data-ending-style\:not-data-limited\:not-data-swipe-direction\:\[transform\:translateY\(calc\(100\%\+var\(--toast-inset\)\)\)\][data-ending-style]:not([data-limited]):not([data-swipe-direction]) {
+    transform: translateY(calc(100% + var(--toast-inset)));
+  }
+
+  .data-expanded\:pointer-events-auto[data-expanded] {
+    pointer-events: auto;
+  }
+
+  .data-expanded\:h-\(--toast-height\)[data-expanded] {
+    height: var(--toast-height);
+  }
+
+  .data-expanded\:opacity-100[data-expanded] {
+    opacity: 1;
+  }
+
   .data-highlighted\:bg-accent[data-highlighted] {
     background-color: var(--accent);
   }
@@ -3138,6 +3264,10 @@
     transition-duration: 0s;
   }
 
+  .data-limited\:opacity-0[data-limited] {
+    opacity: 0;
+  }
+
   .data-pressed\:bg-accent[data-pressed] {
     background-color: var(--accent);
   }
@@ -3356,6 +3486,117 @@
     inset-block: calc(var(--spacing) * .5);
   }
 
+  .data-\[position\]\:data-expanded\:\[transform\:translateX\(var\(--toast-swipe-movement-x\)\)_translateY\(var\(--toast-calc-offset-y\)\)\][data-position][data-expanded] {
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--toast-calc-offset-y));
+  }
+
+  .data-\[position\*\=bottom\]\:top-auto[data-position*="bottom"] {
+    top: auto;
+  }
+
+  .data-\[position\*\=bottom\]\:bottom-\(--toast-inset\)[data-position*="bottom"] {
+    bottom: var(--toast-inset);
+  }
+
+  .data-\[position\*\=bottom\]\:bottom-0[data-position*="bottom"] {
+    bottom: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=bottom\]\:origin-bottom[data-position*="bottom"] {
+    transform-origin: bottom;
+  }
+
+  .data-\[position\*\=bottom\]\:\[transform\:translateX\(var\(--toast-swipe-movement-x\)\)_translateY\(calc\(var\(--toast-swipe-movement-y\)-\(var\(--toast-index\)\*var\(--toast-peek\)\)-\(var\(--toast-shrink\)\*var\(--toast-calc-height\)\)\)\)_scale\(var\(--toast-scale\)\)\][data-position*="bottom"] {
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y)  - (var(--toast-index) * var(--toast-peek))  - (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+  }
+
+  .data-\[position\*\=bottom\]\:\[--toast-calc-offset-y\:calc\(var\(--toast-offset-y\)\*-1\+var\(--toast-index\)\*var\(--toast-gap\)\*-1\+var\(--toast-swipe-movement-y\)\)\][data-position*="bottom"] {
+    --toast-calc-offset-y: calc(var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1 + var(--toast-swipe-movement-y));
+  }
+
+  .data-\[position\*\=bottom\]\:after\:bottom-full[data-position*="bottom"]:after {
+    content: var(--tw-content);
+    bottom: 100%;
+  }
+
+  .data-\[position\*\=bottom\]\:data-starting-style\:\[transform\:translateY\(calc\(100\%\+var\(--toast-inset\)\)\)\][data-position*="bottom"][data-starting-style] {
+    transform: translateY(calc(100% + var(--toast-inset)));
+  }
+
+  .data-\[position\*\=center\]\:right-0[data-position*="center"] {
+    right: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=center\]\:left-0[data-position*="center"] {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=center\]\:left-1\/2[data-position*="center"] {
+    left: 50%;
+  }
+
+  .data-\[position\*\=center\]\:-translate-x-1\/2[data-position*="center"] {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[position\*\=left\]\:right-auto[data-position*="left"] {
+    right: auto;
+  }
+
+  .data-\[position\*\=left\]\:left-\(--toast-inset\)[data-position*="left"] {
+    left: var(--toast-inset);
+  }
+
+  .data-\[position\*\=left\]\:left-0[data-position*="left"] {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=right\]\:right-\(--toast-inset\)[data-position*="right"] {
+    right: var(--toast-inset);
+  }
+
+  .data-\[position\*\=right\]\:right-0[data-position*="right"] {
+    right: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=right\]\:left-auto[data-position*="right"] {
+    left: auto;
+  }
+
+  .data-\[position\*\=top\]\:top-\(--toast-inset\)[data-position*="top"] {
+    top: var(--toast-inset);
+  }
+
+  .data-\[position\*\=top\]\:top-0[data-position*="top"] {
+    top: calc(var(--spacing) * 0);
+  }
+
+  .data-\[position\*\=top\]\:bottom-auto[data-position*="top"] {
+    bottom: auto;
+  }
+
+  .data-\[position\*\=top\]\:origin-top[data-position*="top"] {
+    transform-origin: top;
+  }
+
+  .data-\[position\*\=top\]\:\[transform\:translateX\(var\(--toast-swipe-movement-x\)\)_translateY\(calc\(var\(--toast-swipe-movement-y\)\+\(var\(--toast-index\)\*var\(--toast-peek\)\)\+\(var\(--toast-shrink\)\*var\(--toast-calc-height\)\)\)\)_scale\(var\(--toast-scale\)\)\][data-position*="top"] {
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y)  + (var(--toast-index) * var(--toast-peek))  + (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+  }
+
+  .data-\[position\*\=top\]\:\[--toast-calc-offset-y\:calc\(var\(--toast-offset-y\)\+var\(--toast-index\)\*var\(--toast-gap\)\+var\(--toast-swipe-movement-y\)\)\][data-position*="top"] {
+    --toast-calc-offset-y: calc(var(--toast-offset-y)  + var(--toast-index) * var(--toast-gap)  + var(--toast-swipe-movement-y));
+  }
+
+  .data-\[position\*\=top\]\:after\:top-full[data-position*="top"]:after {
+    content: var(--tw-content);
+    top: 100%;
+  }
+
+  .data-\[position\*\=top\]\:data-starting-style\:\[transform\:translateY\(calc\(-100\%-var\(--toast-inset\)\)\)\][data-position*="top"][data-starting-style] {
+    transform: translateY(calc(-100% - var(--toast-inset)));
+  }
+
   :is(.has-\[\+\[data-slot\=autocomplete-trigger\]\,\+\[data-slot\=autocomplete-clear\]\]\:\*\:data-\[slot\=autocomplete-input\]\:pe-6\.5:has( + [data-slot="autocomplete-trigger"],  + [data-slot="autocomplete-clear"]) > *)[data-slot="autocomplete-input"] {
     padding-inline-end: calc(var(--spacing) * 6.5);
   }
@@ -3386,6 +3627,22 @@
     background-color: #0000;
   }
 
+  .data-ending-style\:data-\[swipe-direction\=down\]\:\[transform\:translateY\(calc\(var\(--toast-swipe-movement-y\)\+100\%\+var\(--toast-inset\)\)\)\][data-ending-style][data-swipe-direction="down"], .data-expanded\:data-ending-style\:data-\[swipe-direction\=down\]\:\[transform\:translateY\(calc\(var\(--toast-swipe-movement-y\)\+100\%\+var\(--toast-inset\)\)\)\][data-expanded][data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y)  + 100% + var(--toast-inset)));
+  }
+
+  .data-ending-style\:data-\[swipe-direction\=left\]\:\[transform\:translateX\(calc\(var\(--toast-swipe-movement-x\)-100\%-var\(--toast-inset\)\)\)_translateY\(var\(--toast-calc-offset-y\)\)\][data-ending-style][data-swipe-direction="left"], .data-expanded\:data-ending-style\:data-\[swipe-direction\=left\]\:\[transform\:translateX\(calc\(var\(--toast-swipe-movement-x\)-100\%-var\(--toast-inset\)\)\)_translateY\(var\(--toast-calc-offset-y\)\)\][data-expanded][data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x)  - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+  }
+
+  .data-ending-style\:data-\[swipe-direction\=right\]\:\[transform\:translateX\(calc\(var\(--toast-swipe-movement-x\)\+100\%\+var\(--toast-inset\)\)\)_translateY\(var\(--toast-calc-offset-y\)\)\][data-ending-style][data-swipe-direction="right"], .data-expanded\:data-ending-style\:data-\[swipe-direction\=right\]\:\[transform\:translateX\(calc\(var\(--toast-swipe-movement-x\)\+100\%\+var\(--toast-inset\)\)\)_translateY\(var\(--toast-calc-offset-y\)\)\][data-expanded][data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x)  + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+  }
+
+  .data-ending-style\:data-\[swipe-direction\=up\]\:\[transform\:translateY\(calc\(var\(--toast-swipe-movement-y\)-100\%-var\(--toast-inset\)\)\)\][data-ending-style][data-swipe-direction="up"], .data-expanded\:data-ending-style\:data-\[swipe-direction\=up\]\:\[transform\:translateY\(calc\(var\(--toast-swipe-movement-y\)-100\%-var\(--toast-inset\)\)\)\][data-expanded][data-ending-style][data-swipe-direction="up"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y)  - 100% - var(--toast-inset)));
+  }
+
   .data-\[variant\=destructive\]\:text-destructive-foreground[data-variant="destructive"] {
     color: var(--destructive-foreground);
   }
@@ -3571,6 +3828,10 @@
       --sheet-inset: 1rem;
     }
 
+    .sm\:\[--toast-inset\:--spacing\(8\)\] {
+      --toast-inset: calc(var(--spacing) * 8);
+    }
+
     .sm\:before\:basis-\[20vh\]:before {
       content: var(--tw-content);
       flex-basis: 20vh;
@@ -4697,6 +4958,31 @@
   initial-value: 1;
 }
 
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/dist/toast.d.ts

@@ -0,0 +1,8 @@
+import { Toast } from "@base-ui-components/react/toast";
+declare const toastManager: import("@base-ui-components/react/toast").ToastManager;
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastProviderProps extends Toast.Provider.Props {
+    position?: ToastPosition;
+}
+declare function ToastProvider({ children, position, ...props }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export { ToastProvider, type ToastPosition, toastManager };

package/dist/toast.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui-components/react/toast";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon } from "lucide-react";
+import { cn } from "./lib/utils.js";
+import { buttonVariants } from "./button.js";
+const toastManager = Toast.createToastManager();
+const TOAST_ICONS = {
+    error: CircleAlertIcon,
+    info: InfoIcon,
+    loading: LoaderCircleIcon,
+    success: CircleCheckIcon,
+    warning: TriangleAlertIcon
+};
+function ToastProvider({ children, position = "bottom-right", ...props }) {
+    return /*#__PURE__*/ jsxs(Toast.Provider, {
+        toastManager: toastManager,
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ToastList, {
+                position: position
+            })
+        ]
+    });
+}
+function ToastList({ position = "bottom-right" }) {
+    const { toasts } = Toast.useToastManager();
+    const isTop = position.startsWith("top");
+    return /*#__PURE__*/ jsx(Toast.Portal, {
+        "data-slot": "toast-portal",
+        children: /*#__PURE__*/ jsx(Toast.Viewport, {
+            className: cn("fixed z-50 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]", "data-[position*=top]:top-(--toast-inset)", "data-[position*=bottom]:bottom-(--toast-inset)", "data-[position*=left]:left-(--toast-inset)", "data-[position*=right]:right-(--toast-inset)", "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-1/2"),
+            "data-position": position,
+            "data-slot": "toast-viewport",
+            children: toasts.map((toast)=>{
+                const Icon = toast.type ? TOAST_ICONS[toast.type] : null;
+                return /*#__PURE__*/ jsx(Toast.Root, {
+                    className: cn("absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover bg-clip-padding px-3.5 py-3 text-popover-foreground shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", "data-[position*=right]:right-0 data-[position*=right]:left-auto", "data-[position*=left]:right-auto data-[position*=left]:left-0", "data-[position*=center]:right-0 data-[position*=center]:left-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-[position]:data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:[transform:translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
+                    "data-position": position,
+                    swipeDirection: position.includes("center") ? [
+                        isTop ? "up" : "down"
+                    ] : position.includes("left") ? [
+                        "left",
+                        isTop ? "up" : "down"
+                    ] : [
+                        "right",
+                        isTop ? "up" : "down"
+                    ],
+                    toast: toast,
+                    children: /*#__PURE__*/ jsxs(Toast.Content, {
+                        className: "flex items-center justify-between gap-1.5 overflow-hidden text-sm transition-opacity duration-250 data-behind:pointer-events-none data-expanded:pointer-events-auto data-behind:opacity-0 data-expanded:opacity-100",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex gap-2",
+                                children: [
+                                    Icon && /*#__PURE__*/ jsx("div", {
+                                        className: "mt-.5 [&>svg]:h-[1lh] [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                                        "data-slot": "toast-icon",
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            className: "in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-72"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-0.5",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Toast.Title, {
+                                                className: "font-medium",
+                                                "data-slot": "toast-title"
+                                            }),
+                                            /*#__PURE__*/ jsx(Toast.Description, {
+                                                className: "text-muted-foreground",
+                                                "data-slot": "toast-description"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            toast.actionProps && /*#__PURE__*/ jsx(Toast.Action, {
+                                className: buttonVariants({
+                                    size: "xs"
+                                }),
+                                "data-slot": "toast-action",
+                                children: toast.actionProps.children
+                            })
+                        ]
+                    })
+                }, toast.id);
+            })
+        })
+    });
+}
+export { ToastProvider, toastManager };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biotechusa/pdo-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "exports": {
     ".": {
@@ -43,7 +43,8 @@
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "lucide-react": "^0.554.0"
   },
   "private": false,
   "dependencies": {
@@ -51,7 +52,6 @@
     "@tailwindcss/postcss": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.554.0",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.2.0",
     "tailwind-merge": "^3.4.0",