@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-WK324C6D.js

@@ -0,0 +1,146 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-TEVGCTUN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var markerBarContainerVariants = cva(
+  [
+    "relative flex w-full items-center rounded-full",
+    "bg-muted"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var markerBarRangeVariants = cva(
+  "absolute h-full rounded-full",
+  {
+    variants: {
+      animated: {
+        true: "transition-all duration-300 ease-out",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      animated: true
+    }
+  }
+);
+var markerBarMarkerWrapperVariants = cva(
+  "absolute -translate-x-1/2",
+  {
+    variants: {
+      size: {
+        sm: "w-3",
+        md: "w-4",
+        lg: "w-5"
+      },
+      animated: {
+        true: "transition-all duration-300 ease-out",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      animated: true
+    }
+  }
+);
+var markerBarMarkerVariants = cva(
+  [
+    "mx-auto rounded-full ring-2",
+    "ring-background"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-2.5 w-1",
+        md: "h-4 w-1.5",
+        lg: "h-5 w-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function MarkerBar({
+  className,
+  color = "var(--primary)",
+  markerTooltip,
+  maxValue,
+  minValue,
+  rangeColor = "var(--muted-foreground)",
+  rangeTooltip,
+  showAnimation = true,
+  size = "md",
+  value,
+  ...props
+}) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const hasRange = minValue !== void 0 && maxValue !== void 0;
+  const rangeMin = hasRange ? Math.max(0, Math.min(100, minValue)) : 0;
+  const rangeMax = hasRange ? Math.max(0, Math.min(100, maxValue)) : 0;
+  const rangeElement = hasRange && /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        backgroundColor: rangeColor,
+        left: `${String(rangeMin)}%`,
+        opacity: 0.3,
+        width: `${String(rangeMax - rangeMin)}%`
+      },
+      className: cn(markerBarRangeVariants({ animated: showAnimation })),
+      "data-slot": "marker-bar-range"
+    }
+  );
+  const markerElement = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(markerBarMarkerWrapperVariants({ animated: showAnimation, size })),
+      "data-slot": "marker-bar-marker-wrapper",
+      style: { left: `${String(clampedValue)}%` },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(markerBarMarkerVariants({ size })),
+          "data-slot": "marker-bar-marker",
+          style: { backgroundColor: color }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(markerBarContainerVariants({ size }), className),
+      "data-slot": "marker-bar",
+      ...props,
+      children: [
+        hasRange && rangeTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: rangeElement }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: rangeTooltip })
+        ] }) : rangeElement,
+        markerTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: markerElement }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: markerTooltip })
+        ] }) : markerElement
+      ]
+    }
+  ) });
+}
+MarkerBar.displayName = "MarkerBar";
+
+export { MarkerBar, markerBarContainerVariants, markerBarMarkerVariants, markerBarMarkerWrapperVariants, markerBarRangeVariants };
+//# sourceMappingURL=chunk-WK324C6D.js.map
+//# sourceMappingURL=chunk-WK324C6D.js.map

package/dist/chunk-WK324C6D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MarkerBar/MarkerBar.variants.ts","../src/components/data-display/MarkerBar/MarkerBar.tsx"],"names":[],"mappings":"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","file":"chunk-WK324C6D.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const markerBarContainerVariants = cva(\n  [\n    \"relative flex w-full items-center rounded-full\",\n    \"bg-muted\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-1\",\n        md: \"h-2\",\n        lg: \"h-3\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const markerBarRangeVariants = cva(\n  \"absolute h-full rounded-full\",\n  {\n    variants: {\n      animated: {\n        true: \"transition-all duration-300 ease-out\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      animated: true,\n    },\n  }\n)\n\nexport const markerBarMarkerWrapperVariants = cva(\n  \"absolute -translate-x-1/2\",\n  {\n    variants: {\n      size: {\n        sm: \"w-3\",\n        md: \"w-4\",\n        lg: \"w-5\",\n      },\n      animated: {\n        true: \"transition-all duration-300 ease-out\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      animated: true,\n    },\n  }\n)\n\nexport const markerBarMarkerVariants = cva(\n  [\n    \"mx-auto rounded-full ring-2\",\n    \"ring-background\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-2.5 w-1\",\n        md: \"h-4 w-1.5\",\n        lg: \"h-5 w-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n","\"use client\"\n\nimport type { MarkerBarProps } from \"./MarkerBar.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  markerBarContainerVariants,\n  markerBarMarkerVariants,\n  markerBarMarkerWrapperVariants,\n  markerBarRangeVariants,\n} from \"./MarkerBar.variants\"\n\n/**\n * MarkerBar - Position indicator on a horizontal scale\n *\n * Displays a marker at a specific position along a bar,\n * optionally showing a highlighted range. Ideal for showing\n * current position within a range, target values, or thresholds.\n *\n * @example\n * ```tsx\n * // Simple marker\n * <MarkerBar value={75} />\n *\n * // With range highlight\n * <MarkerBar\n *   value={65}\n *   minValue={40}\n *   maxValue={80}\n *   markerTooltip=\"Current: 65%\"\n *   rangeTooltip=\"Target range: 40-80%\"\n * />\n *\n * // Custom colors\n * <MarkerBar\n *   value={50}\n *   color=\"var(--success)\"\n *   rangeColor=\"var(--success-muted)\"\n * />\n * ```\n */\nexport function MarkerBar({\n  className,\n  color = \"var(--primary)\",\n  markerTooltip,\n  maxValue,\n  minValue,\n  rangeColor = \"var(--muted-foreground)\",\n  rangeTooltip,\n  showAnimation = true,\n  size = \"md\",\n  value,\n  ...props\n}: MarkerBarProps) {\n  // Clamp value between 0 and 100\n  const clampedValue = Math.max(0, Math.min(100, value))\n\n  // Check if range should be displayed\n  const hasRange = minValue !== undefined && maxValue !== undefined\n\n  // Clamp range values\n  const rangeMin = hasRange ? Math.max(0, Math.min(100, minValue)) : 0\n  const rangeMax = hasRange ? Math.max(0, Math.min(100, maxValue)) : 0\n\n  const rangeElement = hasRange && (\n    <div\n      style={{\n        backgroundColor: rangeColor,\n        left: `${String(rangeMin)}%`,\n        opacity: 0.3,\n        width: `${String(rangeMax - rangeMin)}%`,\n      }}\n      className={cn(markerBarRangeVariants({ animated: showAnimation }))}\n      data-slot=\"marker-bar-range\"\n    />\n  )\n\n  const markerElement = (\n    <div\n      className={cn(markerBarMarkerWrapperVariants({ animated: showAnimation, size }))}\n      data-slot=\"marker-bar-marker-wrapper\"\n      style={{ left: `${String(clampedValue)}%` }}\n    >\n      <div\n        className={cn(markerBarMarkerVariants({ size }))}\n        data-slot=\"marker-bar-marker\"\n        style={{ backgroundColor: color }}\n      />\n    </div>\n  )\n\n  return (\n    <TooltipProvider>\n      <div\n        className={cn(markerBarContainerVariants({ size }), className)}\n        data-slot=\"marker-bar\"\n        {...props}\n      >\n        {/* Range bar with optional tooltip */}\n        {hasRange && rangeTooltip ? (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              {rangeElement}\n            </TooltipTrigger>\n            <TooltipContent>{rangeTooltip}</TooltipContent>\n          </Tooltip>\n        ) : (\n          rangeElement\n        )}\n\n        {/* Marker with optional tooltip */}\n        {markerTooltip ? (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              {markerElement}\n            </TooltipTrigger>\n            <TooltipContent>{markerTooltip}</TooltipContent>\n          </Tooltip>\n        ) : (\n          markerElement\n        )}\n      </div>\n    </TooltipProvider>\n  )\n}\n\nMarkerBar.displayName = \"MarkerBar\"\n"]}