@polastack/design-system 0.1.23 → 0.1.24

package/dist/index.d.ts

@@ -390,7 +390,10 @@ declare const progressVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, VariantProps<typeof progressVariants> {
     showLabel?: boolean | ((value: number | null | undefined) => React.ReactNode);
-    labelPosition?: 'right' | 'top';
+    /** @default 'right' */
+    labelPosition?: 'right' | 'top' | 'floating';
+    /** Show a dot marker at the progress edge */
+    showMarker?: boolean;
 }
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1849,6 +1849,27 @@ var progressIndicatorVariants = cva11(
     }
   }
 );
+var floatingBubbleVariants = {
+  default: "bg-primary-600 dark:bg-primary-400",
+  success: "bg-success-600 dark:bg-success-400",
+  warning: "bg-warning-600 dark:bg-warning-400",
+  error: "bg-error-600 dark:bg-error-400",
+  info: "bg-info-600 dark:bg-info-400"
+};
+var floatingArrowVariants = {
+  default: "border-t-primary-600 dark:border-t-primary-400",
+  success: "border-t-success-600 dark:border-t-success-400",
+  warning: "border-t-warning-600 dark:border-t-warning-400",
+  error: "border-t-error-600 dark:border-t-error-400",
+  info: "border-t-info-600 dark:border-t-info-400"
+};
+var markerVariants = {
+  default: "border-primary-500",
+  success: "border-success-500",
+  warning: "border-warning-500",
+  error: "border-error-500",
+  info: "border-info-500"
+};
 var Progress = React27.forwardRef(
   ({
     className,
@@ -1858,11 +1879,16 @@ var Progress = React27.forwardRef(
     max = 100,
     showLabel,
     labelPosition = "right",
+    showMarker,
     ...props
   }, ref) => {
     const isIndeterminate = value === null || value === void 0;
     const clampedValue = isIndeterminate ? null : Math.min(max, Math.max(0, value));
+    const percent = isIndeterminate ? 0 : clampedValue / max * 100;
+    const resolvedVariant = variant ?? "default";
     const labelContent = showLabel ? typeof showLabel === "function" ? showLabel(clampedValue) : isIndeterminate ? null : `${Math.round(clampedValue)}%` : null;
+    const isFloating = labelPosition === "floating" && labelContent && !isIndeterminate;
+    const hasMarker = showMarker && !isIndeterminate;
     const bar = /* @__PURE__ */ jsx26(
       ProgressPrimitive.Root,
       {
@@ -1880,11 +1906,62 @@ var Progress = React27.forwardRef(
                 indeterminate: isIndeterminate
               })
             ),
-            style: isIndeterminate ? void 0 : { width: `${clampedValue / max * 100}%` }
+            style: isIndeterminate ? void 0 : { width: `${percent}%` }
           }
         )
       }
     );
+    if (isFloating || hasMarker) {
+      return /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        isFloating && /* @__PURE__ */ jsx26(
+          "div",
+          {
+            className: "absolute bottom-full mb-2 transition-[left] duration-normal ease-default",
+            style: { left: `${percent}%` },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxs10("div", { className: "relative -translate-x-1/2", children: [
+              /* @__PURE__ */ jsx26(
+                "span",
+                {
+                  className: cn(
+                    "block rounded-md px-2 py-0.5 text-xs font-semibold tabular-nums text-white whitespace-nowrap shadow-sm",
+                    floatingBubbleVariants[resolvedVariant]
+                  ),
+                  children: labelContent
+                }
+              ),
+              /* @__PURE__ */ jsx26(
+                "div",
+                {
+                  className: cn(
+                    "mx-auto h-0 w-0 border-x-4 border-t-4 border-x-transparent",
+                    floatingArrowVariants[resolvedVariant]
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        bar,
+        hasMarker && /* @__PURE__ */ jsx26(
+          "div",
+          {
+            className: "absolute top-1/2 -translate-y-1/2 transition-[left] duration-normal ease-default pointer-events-none",
+            style: { left: `${percent}%` },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx26(
+              "div",
+              {
+                className: cn(
+                  "h-3.5 w-3.5 -translate-x-1/2 rounded-full border-2 bg-white shadow-sm dark:bg-[var(--color-surface-raised)]",
+                  markerVariants[resolvedVariant]
+                )
+              }
+            )
+          }
+        )
+      ] });
+    }
     if (!labelContent) return bar;
     if (labelPosition === "top") {
       return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [