@telia/teddy 0.6.9 → 0.6.11

package/dist/components/circle-bar/circle-bar.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const components_tooltip_index = require("../tooltip/index.cjs");
+const components_circleBar_css = require("./css.cjs");
+const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
+  const radius = 180;
+  const gapSize = 150;
+  const rotate = 114;
+  const circumference = 2 * Math.PI * radius;
+  const fillableCircumference = circumference - gapSize;
+  const percentFilled = value / 100;
+  const offset = circumference - fillableCircumference * percentFilled;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("teddy-circle-bar"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${components_circleBar_css.css("__tooltip")} ${components_circleBar_css.css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: components_circleBar_css.css("__tooltip-content"), children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__svg-container"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox: "0 0 400 400",
+          className: components_circleBar_css.css("__svg"),
+          style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: "200",
+                cy: "200",
+                r: radius,
+                strokeWidth: "35.25",
+                stroke: "#4E0174",
+                fill: "none",
+                strokeDasharray: `${circumference}`,
+                strokeDashoffset: offset,
+                style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__info-box"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__value-label"), children: [
+          value,
+          " %"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title })
+      ] })
+    ] })
+  ] });
+};
+exports.CircleBar = CircleBar;
+exports.default = CircleBar;

package/dist/components/circle-bar/circle-bar.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export interface CircleBarProps {
+    title: string;
+    value: number;
+    tooltip?: string;
+    tooltipLocation?: 'left' | 'right';
+}
+export declare const CircleBar: React.FC<CircleBarProps>;
+export default CircleBar;

package/dist/components/circle-bar/circle-bar.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Tooltip } from "../tooltip/index.js";
+import { css } from "./css.js";
+const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
+  const radius = 180;
+  const gapSize = 150;
+  const rotate = 114;
+  const circumference = 2 * Math.PI * radius;
+  const fillableCircumference = circumference - gapSize;
+  const percentFilled = value / 100;
+  const offset = circumference - fillableCircumference * percentFilled;
+  return /* @__PURE__ */ jsxs("div", { className: css("teddy-circle-bar"), children: [
+    /* @__PURE__ */ jsx("div", { className: `${css("__tooltip")} ${css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, {}),
+      /* @__PURE__ */ jsx(Tooltip.Content, { className: css("__tooltip-content"), children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: css("__svg-container"), children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox: "0 0 400 400",
+          className: css("__svg"),
+          style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "200",
+                cy: "200",
+                r: radius,
+                strokeWidth: "35.25",
+                stroke: "#4E0174",
+                fill: "none",
+                strokeDasharray: `${circumference}`,
+                strokeDashoffset: offset,
+                style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: css("__info-box"), children: [
+        /* @__PURE__ */ jsxs("div", { className: css("__value-label"), children: [
+          value,
+          " %"
+        ] }),
+        /* @__PURE__ */ jsx("h3", { children: title })
+      ] })
+    ] })
+  ] });
+};
+export {
+  CircleBar,
+  CircleBar as default
+};

package/dist/components/circle-bar/css.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const styles = {
+  "teddy-circle-bar": "_teddy-circle-bar_40j64_1",
+  "teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
+  "teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
+  "teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
+  "teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
+  "teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
+  "teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
+  "teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
+  "teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
+};
+const rootClassName = "teddy-circle-bar";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+exports.css = css;

package/dist/components/circle-bar/css.d.ts

@@ -0,0 +1 @@
+export declare const css: (suffix: string | null) => string;

package/dist/components/circle-bar/css.js

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+const styles = {
+  "teddy-circle-bar": "_teddy-circle-bar_40j64_1",
+  "teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
+  "teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
+  "teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
+  "teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
+  "teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
+  "teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
+  "teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
+  "teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
+};
+const rootClassName = "teddy-circle-bar";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+export {
+  css
+};

package/dist/components/circle-bar/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_circleBar_circleBar = require("./circle-bar.cjs");
+exports.CircleBar = components_circleBar_circleBar.CircleBar;

package/dist/components/circle-bar/index.d.ts

@@ -0,0 +1,2 @@
+export type { CircleBarProps } from './circle-bar';
+export { CircleBar } from './circle-bar';

package/dist/components/circle-bar/index.js

@@ -0,0 +1,4 @@
+import { CircleBar } from "./circle-bar.js";
+export {
+  CircleBar
+};

package/dist/components/index.cjs

@@ -57,6 +57,7 @@ const components_textSpacing_textSpacing = require("./text-spacing/text-spacing.
 const components_container_container = require("./container/container.cjs");
 const components_carousel_carouselRoot = require("./carousel/carousel-root.cjs");
 const components_slider_slider = require("./slider/slider.cjs");
+const components_circleBar_circleBar = require("./circle-bar/circle-bar.cjs");
 const sonner = require("sonner");
 const components_input_inputGroup = require("./input/input-group.cjs");
 exports.Avatar = components_avatar_index.Avatar;
@@ -120,6 +121,7 @@ exports.TextSpacing = components_textSpacing_textSpacing.TextSpacing;
 exports.Container = components_container_container.Container;
 exports.Carousel = components_carousel_carouselRoot.Carousel;
 exports.Slider = components_slider_slider.Slider;
+exports.CircleBar = components_circleBar_circleBar.CircleBar;
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: () => sonner.toast

package/dist/components/index.d.ts

@@ -52,3 +52,4 @@ export * from './text-spacing';
 export * from './container';
 export * from './carousel';
 export * from './slider';
+export * from './circle-bar';

package/dist/components/index.js

@@ -55,6 +55,7 @@ import { TextSpacing } from "./text-spacing/text-spacing.js";
 import { Container } from "./container/container.js";
 import { Carousel } from "./carousel/carousel-root.js";
 import { Slider } from "./slider/slider.js";
+import { CircleBar } from "./circle-bar/circle-bar.js";
 import { toast } from "sonner";
 import { I } from "./input/input-group.js";
 export {
@@ -72,6 +73,7 @@ export {
   Checkbox,
   CheckboxGroup,
   Chip,
+  CircleBar,
   Collapsible,
   ColorDot,
   Container,

package/dist/main.cjs

@@ -57,6 +57,7 @@ const components_textSpacing_textSpacing = require("./components/text-spacing/te
 const components_container_container = require("./components/container/container.cjs");
 const components_carousel_carouselRoot = require("./components/carousel/carousel-root.cjs");
 const components_slider_slider = require("./components/slider/slider.cjs");
+const components_circleBar_circleBar = require("./components/circle-bar/circle-bar.cjs");
 const tokens_border_variables = require("./tokens/border/variables.cjs");
 const tokens_breakpoint_variables = require("./tokens/breakpoint/variables.cjs");
 const tokens_color_variables = require("./tokens/color/variables.cjs");
@@ -127,6 +128,7 @@ exports.TextSpacing = components_textSpacing_textSpacing.TextSpacing;
 exports.Container = components_container_container.Container;
 exports.Carousel = components_carousel_carouselRoot.Carousel;
 exports.Slider = components_slider_slider.Slider;
+exports.CircleBar = components_circleBar_circleBar.CircleBar;
 exports.border = tokens_border_variables.variables;
 exports.breakpoint = tokens_breakpoint_variables.variables;
 exports.color = tokens_color_variables.variables;

package/dist/main.js

@@ -55,6 +55,7 @@ import { TextSpacing } from "./components/text-spacing/text-spacing.js";
 import { Container } from "./components/container/container.js";
 import { Carousel } from "./components/carousel/carousel-root.js";
 import { Slider } from "./components/slider/slider.js";
+import { CircleBar } from "./components/circle-bar/circle-bar.js";
 import { v } from "./tokens/border/variables.js";
 import { v as v2 } from "./tokens/breakpoint/variables.js";
 import { v as v3 } from "./tokens/color/variables.js";
@@ -79,6 +80,7 @@ export {
   Checkbox,
   CheckboxGroup,
   Chip,
+  CircleBar,
   Collapsible,
   ColorDot,
   Container,

package/dist/style.css

@@ -6202,6 +6202,51 @@
 ._metricmeter__speed-unit-label_1wov3_70 {
   font-size: var(--teddy-typography-scale-75);
   font-weight: var(--teddy-typography-weight-normal);
+}._teddy-circle-bar_40j64_1 {
+  position: relative;
+  width: max-content;
+  padding: 17px;
+}
+._teddy-circle-bar__tooltip_40j64_6 {
+  width: max-content;
+  position: absolute;
+  top: -2px;
+  z-index: 1;
+}
+._teddy-circle-bar__tooltip-left_40j64_12 {
+  left: -2px;
+}
+._teddy-circle-bar__tooltip-right_40j64_15 {
+  right: -2px;
+}
+._teddy-circle-bar__tooltip-content_40j64_18 {
+  max-width: 300px;
+}
+._teddy-circle-bar__svg-container_40j64_21 {
+  width: 155px;
+  position: relative;
+}
+._teddy-circle-bar__svg_40j64_21 {
+  transform-origin: center center;
+  fill: transparent;
+  stroke-linecap: round;
+  stroke: #c4c4c4;
+}
+._teddy-circle-bar__info-box_40j64_31 {
+  position: absolute;
+  width: 100%;
+  top: 47px;
+  text-align: center;
+}
+._teddy-circle-bar__value-label_40j64_37 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+._teddy-circle-bar_40j64_1 h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
 }:root {
   --teddy-border-radius-xs: 2px;
   --teddy-border-radius-sm: 4px;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.6.9",
+  "version": "0.6.11",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"