xertica-ui 2.6.0 → 2.7.0

package/dist/ImageWithFallback-bw-CxxDc.js

@@ -0,0 +1,98 @@
+import { jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { c as cn } from './button-DZHzN1Gd.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { useState } from 'react';
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "border-transparent bg-success text-success-foreground",
+        warning: "border-transparent bg-warning text-warning-foreground",
+        info: "border-transparent bg-info text-info-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props, children: /* @__PURE__ */ jsx(Slottable, { children }) });
+}
+
+const trackVariants = {
+  default: "bg-primary/20",
+  success: "bg-success/20",
+  info: "bg-info/20",
+  warning: "bg-warning/20",
+  destructive: "bg-destructive/20"
+};
+const indicatorVariants = {
+  default: "bg-primary",
+  success: "bg-success",
+  info: "bg-info",
+  warning: "bg-warning",
+  destructive: "bg-destructive"
+};
+function Progress({
+  className,
+  value,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      "aria-label": props["aria-label"] || "Progresso",
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full",
+        trackVariants[variant],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn("h-full w-full flex-1 transition-all", indicatorVariants[variant]),
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+const ERROR_IMG_SRC = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==";
+function ImageWithFallback(props) {
+  const [didError, setDidError] = useState(false);
+  const handleError = () => {
+    setDidError(true);
+  };
+  const { src, alt, style, className, ...rest } = props;
+  return didError ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `inline-block bg-gray-100 text-center align-middle ${className ?? ""}`,
+      style,
+      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx("img", { src: ERROR_IMG_SRC, alt: "Error loading image", ...rest, "data-original-url": src }) })
+    }
+  ) : /* @__PURE__ */ jsx("img", { src, alt, className, style, ...rest, onError: handleError });
+}
+
+export { Badge as B, ImageWithFallback as I, Progress as P, badgeVariants as b };