@appfunnel-dev/sdk 0.7.0 → 0.9.0

package/dist/elements/index.d.cts

@@ -599,4 +599,22 @@ interface MultiSelectProps<T> {
 }
 declare function MultiSelect<T>({ responseKey, options, keyExtractor, renderItem, min, max, className, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Carousel, type CarouselHandle, type CarouselProps, CountUp, type CountUpHandle, type CountUpProps, Dialog, type DialogHandle, type DialogProps, Drawer, type DrawerHandle, type DrawerProps, type EasingType, Marquee, type MarqueeHandle, type MarqueeProps, MultiSelect, type MultiSelectProps, ProgressBar, type ProgressBarCheckpoint, type ProgressBarHandle, type ProgressBarProps, ProgressCircle, type ProgressCircleCheckpoint, type ProgressCircleHandle, type ProgressCircleProps, SingleSelect, type SingleSelectProps, type SpinnerSegment, SpinnerWheel, type SpinnerWheelHandle, type SpinnerWheelProps };
+interface LoadingProps {
+    /** Spinner color (default: currentColor, inherits from parent) */
+    color?: string;
+    /** Predefined size preset (default: 'md') */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Custom size in pixels — overrides the size preset */
+    customSize?: number;
+    /** Border width in pixels — overrides the size preset */
+    borderWidth?: number;
+    /** Animation speed in milliseconds (default: 800) */
+    speed?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+declare function Loading({ color, size, customSize, borderWidth, speed, className, style, }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+export { Carousel, type CarouselHandle, type CarouselProps, CountUp, type CountUpHandle, type CountUpProps, Dialog, type DialogHandle, type DialogProps, Drawer, type DrawerHandle, type DrawerProps, type EasingType, Loading, type LoadingProps, Marquee, type MarqueeHandle, type MarqueeProps, MultiSelect, type MultiSelectProps, ProgressBar, type ProgressBarCheckpoint, type ProgressBarHandle, type ProgressBarProps, ProgressCircle, type ProgressCircleCheckpoint, type ProgressCircleHandle, type ProgressCircleProps, SingleSelect, type SingleSelectProps, type SpinnerSegment, SpinnerWheel, type SpinnerWheelHandle, type SpinnerWheelProps };

package/dist/elements/index.d.ts

@@ -599,4 +599,22 @@ interface MultiSelectProps<T> {
 }
 declare function MultiSelect<T>({ responseKey, options, keyExtractor, renderItem, min, max, className, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Carousel, type CarouselHandle, type CarouselProps, CountUp, type CountUpHandle, type CountUpProps, Dialog, type DialogHandle, type DialogProps, Drawer, type DrawerHandle, type DrawerProps, type EasingType, Marquee, type MarqueeHandle, type MarqueeProps, MultiSelect, type MultiSelectProps, ProgressBar, type ProgressBarCheckpoint, type ProgressBarHandle, type ProgressBarProps, ProgressCircle, type ProgressCircleCheckpoint, type ProgressCircleHandle, type ProgressCircleProps, SingleSelect, type SingleSelectProps, type SpinnerSegment, SpinnerWheel, type SpinnerWheelHandle, type SpinnerWheelProps };
+interface LoadingProps {
+    /** Spinner color (default: currentColor, inherits from parent) */
+    color?: string;
+    /** Predefined size preset (default: 'md') */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Custom size in pixels — overrides the size preset */
+    customSize?: number;
+    /** Border width in pixels — overrides the size preset */
+    borderWidth?: number;
+    /** Animation speed in milliseconds (default: 800) */
+    speed?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+declare function Loading({ color, size, customSize, borderWidth, speed, className, style, }: LoadingProps): react_jsx_runtime.JSX.Element;
+
+export { Carousel, type CarouselHandle, type CarouselProps, CountUp, type CountUpHandle, type CountUpProps, Dialog, type DialogHandle, type DialogProps, Drawer, type DrawerHandle, type DrawerProps, type EasingType, Loading, type LoadingProps, Marquee, type MarqueeHandle, type MarqueeProps, MultiSelect, type MultiSelectProps, ProgressBar, type ProgressBarCheckpoint, type ProgressBarHandle, type ProgressBarProps, ProgressCircle, type ProgressCircleCheckpoint, type ProgressCircleHandle, type ProgressCircleProps, SingleSelect, type SingleSelectProps, type SpinnerSegment, SpinnerWheel, type SpinnerWheelHandle, type SpinnerWheelProps };

package/dist/elements/index.js

@@ -11392,8 +11392,8 @@ var Dialog2 = forwardRef(function Dialog3({
   overlayColor = "rgba(0, 0, 0, 0.5)",
   backgroundColor = "#ffffff",
   borderRadius = 16,
-  maxWidth = 500,
-  padding = 24,
+  maxWidth = 600,
+  padding = 16,
   style,
   className
 }, ref) {
@@ -11480,8 +11480,7 @@ var Dialog2 = forwardRef(function Dialog3({
                     display: "flex",
                     flexDirection: "row",
                     alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: "16px 16px"
+                    justifyContent: "space-between"
                   },
                   children: [
                     showClose ? /* @__PURE__ */ jsx(
@@ -12131,7 +12130,52 @@ function MultiSelect({
     return /* @__PURE__ */ jsx("div", { onClick: () => handleToggle(key), style: { cursor: "pointer" }, children: renderItem({ item, index, active }) }, key);
   }) });
 }
+var SIZE = {
+  xs: { size: 20, border: 2 },
+  sm: { size: 30, border: 3 },
+  md: { size: 40, border: 3 },
+  lg: { size: 50, border: 4 },
+  xl: { size: 60, border: 4 }
+};
+function Loading({
+  color: color2,
+  size = "md",
+  customSize,
+  borderWidth,
+  speed = 800,
+  className,
+  style
+}) {
+  const preset = SIZE[size];
+  const finalSize = customSize ?? preset.size;
+  const finalBorder = borderWidth ?? preset.border;
+  const borderColor = color2 ? `color-mix(in srgb, ${color2} 30%, transparent)` : "color-mix(in srgb, currentColor 30%, transparent)";
+  const topColor = color2 ?? "currentColor";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes appfunnel-loading-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: {
+          display: "inline-block",
+          width: finalSize,
+          height: finalSize,
+          border: `${finalBorder}px solid ${borderColor}`,
+          borderRadius: "50%",
+          borderTopColor: topColor,
+          animation: `appfunnel-loading-spin ${speed}ms linear infinite`,
+          ...style
+        }
+      }
+    )
+  ] });
+}
 
-export { Carousel, CountUp, Dialog2 as Dialog, Drawer, Marquee, MultiSelect, ProgressBar, ProgressCircle, SingleSelect, SpinnerWheel, motion };
+export { Carousel, CountUp, Dialog2 as Dialog, Drawer, Loading, Marquee, MultiSelect, ProgressBar, ProgressCircle, SingleSelect, SpinnerWheel, motion };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map