@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/charts/RadialBarChart.js

@@ -1,116 +1,119 @@
-import { jsx as o, jsxs as U } from "react/jsx-runtime";
-import C from "react";
-import { Legend as R, ResponsiveContainer as V, RadialBarChart as _, RadialBar as G, Cell as H, PolarAngleAxis as q, DefaultLegendContent as J } from "recharts";
-import { isObject as x, isFunction as m } from "es-toolkit/compat";
-import { getColor as g, getFromDefaultColors as y, CURSOR_BACKGROUND_COLOR as M } from "./chartHelper.js";
-import { getLegendDefaultProps as Q } from "./Legend.js";
-import X from "./ChartTooltip.js";
-const ne = (B) => {
+import { jsx as t, jsxs as Y } from "react/jsx-runtime";
+import u from "react";
+import { Legend as v, ResponsiveContainer as Z, RadialBarChart as ee, RadialBar as te, Cell as oe, PolarAngleAxis as ne, DefaultLegendContent as ie } from "recharts";
+import { isObject as D, isFunction as f } from "es-toolkit/compat";
+import { getColor as g, getFromDefaultColors as A, CURSOR_BACKGROUND_COLOR as re } from "./chartHelper.js";
+import { getLegendDefaultProps as ae } from "./Legend.js";
+import le from "./ChartTooltip.js";
+import se from "../../hooks/useElementSize.js";
+const Ce = (w) => {
   const {
     width: l,
-    height: i,
-    data: s = [],
-    dataKey: a = "value",
-    startAngle: O = 180,
-    endAngle: P = 0,
-    innerRadius: A = "30%",
-    outerRadius: b = "100%",
-    legend: c = /* @__PURE__ */ o(R, {}),
-    textOptions: u,
-    radialBarOptions: L,
-    containerOptions: v,
-    showBarLabel: D = !1,
-    cornerRadius: T = 30,
-    background: k = !0,
-    range: f,
-    tooltip: d = !1,
-    ...w
-  } = B, {
-    text: S,
-    size: j = "500%",
+    height: s,
+    data: c = [],
+    dataKey: i = "value",
+    startAngle: L = 180,
+    endAngle: S = 0,
+    innerRadius: T = "30%",
+    outerRadius: W = "100%",
+    legend: d = /* @__PURE__ */ t(v, {}),
+    textOptions: C,
+    radialBarOptions: k,
+    containerOptions: r,
+    showBarLabel: j = !1,
+    cornerRadius: z = 30,
+    background: E = !0,
+    range: R,
+    tooltip: p = !1,
+    ...F
+  } = w, {
+    text: H,
+    size: I = "500%",
     weight: N = "normal",
-    color: n = "gray-darkest",
-    ...W
-  } = u || {}, $ = {
-    fontSize: j,
+    color: a = "gray-darkest",
+    ...$
+  } = C || {}, K = {
+    fontSize: I,
     fontWeight: N,
-    fill: n && g(n)
-  }, z = x(d) ? d.props : {}, E = x(c) ? { ...Q(), ...c.props } : {}, { content: r, iconType: h, ...F } = E, I = s.map((e, t) => {
-    const p = m(a) ? a(e) : e[a], K = g(e.color) ?? e.color ?? y(t);
+    fill: a && g(a)
+  }, U = D(p) ? p.props : {}, V = D(d) ? { ...ae(), ...d.props } : {}, { content: n, iconType: y, ..._ } = V, G = c.map((e, o) => {
+    const h = f(i) ? i(e) : e[i], X = g(e.color) ?? e.color ?? A(o);
     return {
-      value: e.name ?? `${t + 1}`,
-      color: K,
-      type: h ?? "circle",
-      payload: { value: p }
+      value: e.name ?? `${o + 1}`,
+      color: X,
+      type: y ?? "circle",
+      payload: { value: h }
     };
-  });
-  return /* @__PURE__ */ o(
-    V,
+  }), x = u.useRef(null), [P, B] = se(x), O = r?.width, b = r?.height, q = typeof O == "number" && O > 0 || typeof b == "number" && b > 0, J = P && B ? { width: P, height: B } : void 0, m = r?.initialDimension ?? J, M = !!m || q, Q = {
+    minHeight: 1,
+    minWidth: 1,
+    ...r,
+    ...m ? { initialDimension: m } : {}
+  };
+  return /* @__PURE__ */ t("div", { ref: x, style: { width: "100%", height: "100%" }, children: M && /* @__PURE__ */ t(Z, { ...Q, children: /* @__PURE__ */ Y(
+    ee,
     {
-      minHeight: 100,
-      minWidth: 100,
-      initialDimension: { width: 100, height: 100 },
-      ...v,
-      children: /* @__PURE__ */ U(
-        _,
-        {
-          width: l,
-          height: i,
-          data: s,
-          innerRadius: A,
-          outerRadius: b,
-          startAngle: O,
-          endAngle: P,
-          ...w,
-          children: [
-            /* @__PURE__ */ o(
-              G,
-              {
-                label: D && { fill: "#666", position: "insideStart" },
-                background: k,
-                dataKey: a,
-                cornerRadius: T,
-                ...L,
-                children: s.map((e, t) => {
-                  const p = g(e.color) || y(t);
-                  return /* @__PURE__ */ o(H, { fill: m(n) ? n(e, t) : p }, `cell-${t}`);
-                })
-              }
-            ),
-            f && /* @__PURE__ */ o(q, { type: "number", domain: f, angleAxisId: 0, tick: !1 }),
-            u && /* @__PURE__ */ o(
-              "text",
-              {
-                x: l ? l / 2 : "50%",
-                y: i ? i / 2 : "50%",
-                textAnchor: "middle",
-                dominantBaseline: "middle",
-                className: "radialbarchart-text",
-                style: $,
-                ...W,
-                children: S
-              }
-            ),
-            c && /* @__PURE__ */ o(
-              R,
-              {
-                formatter: (e) => /* @__PURE__ */ o("span", { className: "text-color-darker", children: e }),
-                iconType: h,
-                content: (e) => {
-                  const t = { ...e, payload: I };
-                  return r ? m(r) ? r(t) : C.isValidElement(r) ? C.cloneElement(r, t) : r : /* @__PURE__ */ o(J, { ...t });
+      width: l,
+      height: s,
+      data: c,
+      innerRadius: T,
+      outerRadius: W,
+      startAngle: L,
+      endAngle: S,
+      ...F,
+      children: [
+        /* @__PURE__ */ t(
+          te,
+          {
+            label: j && { fill: "#666", position: "insideStart" },
+            background: E,
+            dataKey: i,
+            cornerRadius: z,
+            ...k,
+            children: c.map((e, o) => {
+              const h = g(e.color) || A(o);
+              return /* @__PURE__ */ t(
+                oe,
+                {
+                  fill: f(a) ? a(e, o) : h
                 },
-                ...F
-              }
-            ),
-            d && /* @__PURE__ */ o(X, { cursor: { fill: M }, ...z })
-          ]
-        }
-      )
+                `cell-${o}`
+              );
+            })
+          }
+        ),
+        R && /* @__PURE__ */ t(ne, { type: "number", domain: R, angleAxisId: 0, tick: !1 }),
+        C && /* @__PURE__ */ t(
+          "text",
+          {
+            x: l ? l / 2 : "50%",
+            y: s ? s / 2 : "50%",
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            className: "radialbarchart-text",
+            style: K,
+            ...$,
+            children: H
+          }
+        ),
+        d && /* @__PURE__ */ t(
+          v,
+          {
+            formatter: (e) => /* @__PURE__ */ t("span", { className: "text-color-darker", children: e }),
+            iconType: y,
+            content: (e) => {
+              const o = { ...e, payload: G };
+              return n ? f(n) ? n(o) : u.isValidElement(n) ? u.cloneElement(n, o) : n : /* @__PURE__ */ t(ie, { ...o });
+            },
+            ..._
+          }
+        ),
+        p && /* @__PURE__ */ t(le, { cursor: { fill: re }, ...U })
+      ]
     }
-  );
+  ) }) });
 };
 export {
-  ne as default
+  Ce as default
 };
 //# sourceMappingURL=RadialBarChart.js.map

package/components/charts/RadialBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialBarChart.js","sources":["../../../src/components/charts/RadialBarChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    RadialBarChart as RechartsRadialBarChart,\n    RadialBar as RechartsRadialBar,\n    Legend as RechartsLegend,\n    DefaultLegendContent,\n    PolarAngleAxis,\n    Cell,\n    ResponsiveContainer,\n    type RadialBarProps as RechartsRadialBarProps,\n} from 'recharts';\nimport { isFunction, isObject } from 'es-toolkit/compat';\n\nimport { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR, type DataType } from './chartHelper';\nimport { getLegendDefaultProps, type LegendProps, type LegendPayload } from './Legend';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\n\nexport type RadialBarChartDataType = DataType;\n\nexport type RadialBarProps = Omit<RechartsRadialBarProps, 'ref'> & {};\n\nexport type TextOptions = Record<string, unknown> & {\n    text?: string;\n    size?: string;\n    weight?: string;\n    color?: string;\n};\n\ntype RechartsRadialBarChartProps = React.ComponentProps<typeof RechartsRadialBarChart>;\n\nexport type RadialBarChartProps<T extends DataType> = Omit<RechartsRadialBarChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    startAngle?: number;\n    endAngle?: number;\n    outerRadius?: number | string;\n    innerRadius?: number | string;\n    cx?: number | string;\n    cy?: number | string;\n    textOptions?: TextOptions;\n    radialBarOptions?: RadialBarProps;\n    containerOptions?: ResponsiveContainerProps;\n    showBarLabel?: boolean;\n    cornerRadius?: number;\n    background?: boolean;\n    range?: number[];\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n};\n\nconst RadialBarChart = <T extends DataType>(props: RadialBarChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataKey = 'value',\n        startAngle = 180,\n        endAngle = 0,\n        innerRadius = '30%',\n        outerRadius = '100%',\n        legend = <RechartsLegend />,\n        textOptions,\n        radialBarOptions,\n        containerOptions,\n        showBarLabel = false,\n        cornerRadius = 30,\n        background = true,\n        range,\n        tooltip = false,\n        ...remainingProps\n    } = props;\n\n    const {\n        text,\n        size = '500%',\n        weight = 'normal',\n        color = 'gray-darkest',\n        ...remainingTextOptions\n    } = textOptions || {};\n\n    const textStyle = {\n        fontSize: size,\n        fontWeight: weight,\n        fill: color && getColor(color),\n    };\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n\n    // Start from defaults, then merge any custom legend props passed in.\n    const legendBaseProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};\n    const { content: userLegendContent, iconType: legendIconType, ...legendProps } = legendBaseProps;\n\n    // Recharts v3 removed the Legend \"payload\" prop; build it here and feed it via content.\n    const legendPayload: LegendPayload[] = data.map((entry, index) => {\n        const entryValue = isFunction(dataKey) ? dataKey(entry) : (entry as Record<string, unknown>)[dataKey];\n        const resolvedColor = getColor(entry.color) ?? entry.color ?? getFromDefaultColors(index);\n\n        return {\n            value: (entry as { name?: string }).name ?? `${index + 1}`,\n            color: resolvedColor,\n            type: legendIconType ?? 'circle',\n            payload: { value: entryValue },\n        };\n    });\n\n    return (\n        <ResponsiveContainer\n            minHeight={100}\n            minWidth={100}\n            initialDimension={{ width: 100, height: 100 }}\n            {...containerOptions}\n        >\n            <RechartsRadialBarChart\n                width={width}\n                height={height}\n                data={data}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                {...remainingProps}\n            >\n                <RechartsRadialBar\n                    label={showBarLabel && { fill: '#666', position: 'insideStart' }}\n                    background={background}\n                    dataKey={dataKey}\n                    cornerRadius={cornerRadius}\n                    {...radialBarOptions}\n                >\n                    {data.map((entry, index) => {\n                        const cellColor = getColor(entry.color) || getFromDefaultColors(index);\n                        return (\n                            <Cell key={`cell-${index}`} fill={isFunction(color) ? color(entry, index) : cellColor} />\n                        );\n                    })}\n                </RechartsRadialBar>\n\n                {range && <PolarAngleAxis type='number' domain={range} angleAxisId={0} tick={false} />}\n\n                {textOptions && (\n                    <text\n                        x={width ? width / 2 : '50%'}\n                        y={height ? height / 2 : '50%'}\n                        textAnchor='middle'\n                        dominantBaseline='middle'\n                        className='radialbarchart-text'\n                        style={textStyle}\n                        {...remainingTextOptions}\n                    >\n                        {text}\n                    </text>\n                )}\n\n                {legend && (\n                    <RechartsLegend\n                        formatter={(value: number | string) => <span className='text-color-darker'>{value}</span>}\n                        iconType={legendIconType}\n                        content={contentProps => {\n                            // Supply our payload to either user-provided legend content or the default renderer.\n                            const propsWithPayload = { ...contentProps, payload: legendPayload };\n                            if (userLegendContent) {\n                                if (isFunction(userLegendContent)) {\n                                    return userLegendContent(propsWithPayload);\n                                }\n\n                                if (React.isValidElement(userLegendContent)) {\n                                    return React.cloneElement(userLegendContent, propsWithPayload);\n                                }\n\n                                return userLegendContent;\n                            }\n                            return <DefaultLegendContent {...propsWithPayload} />;\n                        }}\n                        {...legendProps}\n                    />\n                )}\n\n                {tooltip && <ChartTooltip cursor={{ fill: CURSOR_BACKGROUND_COLOR }} {...tooltipProps} />}\n            </RechartsRadialBarChart>\n        </ResponsiveContainer>\n    );\n};\n\nexport default RadialBarChart;\n"],"names":["RadialBarChart","props","width","height","data","dataKey","startAngle","endAngle","innerRadius","outerRadius","legend","RechartsLegend","textOptions","radialBarOptions","containerOptions","showBarLabel","cornerRadius","background","range","tooltip","remainingProps","text","size","weight","color","remainingTextOptions","textStyle","getColor","tooltipProps","isObject","legendBaseProps","getLegendDefaultProps","userLegendContent","legendIconType","legendProps","legendPayload","entry","index","entryValue","isFunction","resolvedColor","getFromDefaultColors","jsx","ResponsiveContainer","jsxs","RechartsRadialBarChart","RechartsRadialBar","cellColor","Cell","PolarAngleAxis","value","contentProps","propsWithPayload","React","DefaultLegendContent","ChartTooltip","CURSOR_BACKGROUND_COLOR"],"mappings":"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"}
+{"version":3,"file":"RadialBarChart.js","sources":["../../../src/components/charts/RadialBarChart.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    RadialBarChart as RechartsRadialBarChart,\n    RadialBar as RechartsRadialBar,\n    Legend as RechartsLegend,\n    DefaultLegendContent,\n    PolarAngleAxis,\n    Cell,\n    ResponsiveContainer,\n    type RadialBarProps as RechartsRadialBarProps,\n} from 'recharts';\nimport { isFunction, isObject } from 'es-toolkit/compat';\n\nimport { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR, type DataType } from './chartHelper';\nimport { getLegendDefaultProps, type LegendProps, type LegendPayload } from './Legend';\nimport ChartTooltip, { type ChartTooltipProps } from './ChartTooltip';\nimport type { ResponsiveContainerProps } from './ResponsiveContainer';\nimport useElementSize from '../../hooks/useElementSize';\n\nexport type RadialBarChartDataType = DataType;\n\nexport type RadialBarProps = Omit<RechartsRadialBarProps, 'ref'> & {};\n\nexport type TextOptions = Record<string, unknown> & {\n    text?: string;\n    size?: string;\n    weight?: string;\n    color?: string;\n};\n\ntype RechartsRadialBarChartProps = React.ComponentProps<typeof RechartsRadialBarChart>;\n\nexport type RadialBarChartProps<T extends DataType> = Omit<RechartsRadialBarChartProps, 'data'> & {\n    width?: number;\n    height?: number;\n    data: T[];\n    // biome-ignore lint/suspicious/noExplicitAny: unknown type\n    dataKey?: string | number | ((obj: T) => any);\n    startAngle?: number;\n    endAngle?: number;\n    outerRadius?: number | string;\n    innerRadius?: number | string;\n    cx?: number | string;\n    cy?: number | string;\n    textOptions?: TextOptions;\n    radialBarOptions?: RadialBarProps;\n    containerOptions?: ResponsiveContainerProps;\n    showBarLabel?: boolean;\n    cornerRadius?: number;\n    background?: boolean;\n    range?: number[];\n    legend?: React.ReactElement<LegendProps> | boolean;\n    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;\n};\n\nconst RadialBarChart = <T extends DataType>(props: RadialBarChartProps<T>) => {\n    const {\n        width,\n        height,\n        data = [],\n        dataKey = 'value',\n        startAngle = 180,\n        endAngle = 0,\n        innerRadius = '30%',\n        outerRadius = '100%',\n        legend = <RechartsLegend />,\n        textOptions,\n        radialBarOptions,\n        containerOptions,\n        showBarLabel = false,\n        cornerRadius = 30,\n        background = true,\n        range,\n        tooltip = false,\n        ...remainingProps\n    } = props;\n\n    const {\n        text,\n        size = '500%',\n        weight = 'normal',\n        color = 'gray-darkest',\n        ...remainingTextOptions\n    } = textOptions || {};\n\n    const textStyle = {\n        fontSize: size,\n        fontWeight: weight,\n        fill: color && getColor(color),\n    };\n\n    const tooltipProps = isObject(tooltip) ? tooltip.props : {};\n\n    // Start from defaults, then merge any custom legend props passed in.\n    const legendBaseProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};\n    const { content: userLegendContent, iconType: legendIconType, ...legendProps } = legendBaseProps;\n\n    // Recharts v3 removed the Legend \"payload\" prop; build it here and feed it via content.\n    const legendPayload: LegendPayload[] = data.map((entry, index) => {\n        const entryValue = isFunction(dataKey) ? dataKey(entry) : (entry as Record<string, unknown>)[dataKey];\n        const resolvedColor = getColor(entry.color) ?? entry.color ?? getFromDefaultColors(index);\n\n        return {\n            value: (entry as { name?: string }).name ?? `${index + 1}`,\n            color: resolvedColor,\n            type: legendIconType ?? 'circle',\n            payload: { value: entryValue },\n        };\n    });\n\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    // Measure before mounting ResponsiveContainer to avoid Recharts warning on initial 0x0.\n    const [containerWidth, containerHeight] = useElementSize(containerRef);\n\n    const containerWidthProp = containerOptions?.width;\n    const containerHeightProp = containerOptions?.height;\n\n    const hasFixedDimension =\n        (typeof containerWidthProp === 'number' && containerWidthProp > 0) ||\n        (typeof containerHeightProp === 'number' && containerHeightProp > 0);\n\n    const measuredInitialDimension =\n        containerWidth && containerHeight ? { width: containerWidth, height: containerHeight } : undefined;\n\n    // Prefer caller-provided initialDimension, otherwise seed with measured size once available.\n    const initialDimension = containerOptions?.initialDimension ?? measuredInitialDimension;\n\n    // Wait for a measured size so Recharts doesn't warn about non-positive dimensions.\n    const shouldRenderContainer = Boolean(initialDimension) || hasFixedDimension;\n\n    const responsiveContainerProps: ResponsiveContainerProps = {\n        minHeight: 1,\n        minWidth: 1,\n        ...containerOptions,\n        ...(initialDimension ? { initialDimension } : {}),\n    };\n\n    return (\n        <div ref={containerRef} style={{ width: '100%', height: '100%' }}>\n            {shouldRenderContainer && (\n                <ResponsiveContainer {...responsiveContainerProps}>\n                    <RechartsRadialBarChart\n                        width={width}\n                        height={height}\n                        data={data}\n                        innerRadius={innerRadius}\n                        outerRadius={outerRadius}\n                        startAngle={startAngle}\n                        endAngle={endAngle}\n                        {...remainingProps}\n                    >\n                        <RechartsRadialBar\n                            label={showBarLabel && { fill: '#666', position: 'insideStart' }}\n                            background={background}\n                            dataKey={dataKey}\n                            cornerRadius={cornerRadius}\n                            {...radialBarOptions}\n                        >\n                            {data.map((entry, index) => {\n                                const cellColor = getColor(entry.color) || getFromDefaultColors(index);\n                                return (\n                                    <Cell\n                                        key={`cell-${index}`}\n                                        fill={isFunction(color) ? color(entry, index) : cellColor}\n                                    />\n                                );\n                            })}\n                        </RechartsRadialBar>\n\n                        {range && <PolarAngleAxis type='number' domain={range} angleAxisId={0} tick={false} />}\n\n                        {textOptions && (\n                            <text\n                                x={width ? width / 2 : '50%'}\n                                y={height ? height / 2 : '50%'}\n                                textAnchor='middle'\n                                dominantBaseline='middle'\n                                className='radialbarchart-text'\n                                style={textStyle}\n                                {...remainingTextOptions}\n                            >\n                                {text}\n                            </text>\n                        )}\n\n                        {legend && (\n                            <RechartsLegend\n                                formatter={(value: number | string) => (\n                                    <span className='text-color-darker'>{value}</span>\n                                )}\n                                iconType={legendIconType}\n                                content={contentProps => {\n                                    // Supply our payload to either user-provided legend content or the default renderer.\n                                    const propsWithPayload = { ...contentProps, payload: legendPayload };\n                                    if (userLegendContent) {\n                                        if (isFunction(userLegendContent)) {\n                                            return userLegendContent(propsWithPayload);\n                                        }\n\n                                        if (React.isValidElement(userLegendContent)) {\n                                            return React.cloneElement(userLegendContent, propsWithPayload);\n                                        }\n\n                                        return userLegendContent;\n                                    }\n                                    return <DefaultLegendContent {...propsWithPayload} />;\n                                }}\n                                {...legendProps}\n                            />\n                        )}\n\n                        {tooltip && <ChartTooltip cursor={{ fill: CURSOR_BACKGROUND_COLOR }} {...tooltipProps} />}\n                    </RechartsRadialBarChart>\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n};\n\nexport default RadialBarChart;\n"],"names":["RadialBarChart","props","width","height","data","dataKey","startAngle","endAngle","innerRadius","outerRadius","legend","RechartsLegend","textOptions","radialBarOptions","containerOptions","showBarLabel","cornerRadius","background","range","tooltip","remainingProps","text","size","weight","color","remainingTextOptions","textStyle","getColor","tooltipProps","isObject","legendBaseProps","getLegendDefaultProps","userLegendContent","legendIconType","legendProps","legendPayload","entry","index","entryValue","isFunction","resolvedColor","getFromDefaultColors","containerRef","React","containerWidth","containerHeight","useElementSize","containerWidthProp","containerHeightProp","hasFixedDimension","measuredInitialDimension","initialDimension","shouldRenderContainer","responsiveContainerProps","jsx","ResponsiveContainer","jsxs","RechartsRadialBarChart","RechartsRadialBar","cellColor","Cell","PolarAngleAxis","value","contentProps","propsWithPayload","DefaultLegendContent","ChartTooltip","CURSOR_BACKGROUND_COLOR"],"mappings":"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"}

package/components/checkbox/Checkbox.d.ts

@@ -62,8 +62,6 @@ export type CheckboxProps = {
      * `checkbox-text`.
      *
      * @example
-     *
-     * ```tsx
      * <div className='checkbox-text-wrapper display-flex justify-content-between'>
      *     <div className='margin-right-15'>
      *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>
@@ -71,7 +69,6 @@ export type CheckboxProps = {
      *     </div>
      *     <div className='checkbox-text' />
      * </div>
-     * ```
      */
     custom?: boolean;
     /**

package/components/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsxs as F, jsx as r } from "react/jsx-runtime";
 import { useRef as H, useEffect as K } from "react";
-import k from "classnames";
-import { noop as p } from "es-toolkit/function";
+import { noop as k } from "es-toolkit/function";
+import p from "../../utils/classNames.js";
 import { CheckboxIcon as P } from "./CheckboxIcon.js";
 const S = 16, x = "vertical", V = "horizontal", I = (i) => {
   const {
@@ -21,8 +21,8 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
     inputRef: O,
     label: R,
     name: D,
-    onChange: h = p,
-    onClick: u = p,
+    onChange: h = k,
+    onClick: u = k,
     required: T = !1,
     right: y,
     size: C,
@@ -47,13 +47,13 @@ const S = 16, x = "vertical", V = "horizontal", I = (i) => {
       return;
     const t = n.current?.firstChild;
     t.indeterminate && (t.indeterminate = !1), t.checked = !t.checked, u(e), h(e);
-  }, a = R || o, Z = k(
+  }, a = R || o, Z = p(
     "checkbox",
     A && "checkbox-inline",
     C === "large" && "checkbox-large",
     y && "checkbox-right",
     l
-  ), j = k(
+  ), j = p(
     N && "error",
     C === "large" && "large",
     s && "indeterminate",

package/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     *\n     * ```tsx\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     * ```\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cA2JxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTlB;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useRef, useEffect, type ReactNode, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { CheckboxIcon } from './CheckboxIcon';\n\nconst DEFAULT_ICON_SIZE = 16;\n\nconst ICON_LABEL_VERTICAL = 'vertical';\nconst ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport type CheckboxProps = {\n    /**\n     * Passed through as HTML attribute to the underlying input.\n     * Set an `id` or a `name` otherwise.\n     */\n    id?: string;\n\n    /**\n     * Passed through as HTML attribute to the underlying input\n     */\n    name?: string;\n\n    /**\n     * Define some text or component as a label.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Define a custom icon for the checkbox by naming a rioglyph icon like `rioglyph-truck`.\n     */\n    icon?: string;\n\n    /**\n     * The icon size in pixel.\n     */\n    iconSize?: number;\n\n    /**\n     * The label position for a custom icon checkbox. Using this on a regular checkbox has no effect.\n     *\n     * Possible values are: `horizontal` or `vertical`.\n     */\n    iconLabelPosition?: typeof ICON_LABEL_VERTICAL | typeof ICON_LABEL_HORIZONTAL;\n\n    /**\n     * Callback function that is invoked when the checkbox is checked or unchecked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function that is invoked when the checkbox value changes.\n     * This will also be invoked by a keyboard event.\n     * @param event\n     * @returns\n     */\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines whether the checkbox is checked or not (state cannot be changed).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the checkbox is initially checked or not (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled or not.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a checkbox tick.\n     * Note, when using the `custom` option, make sure to wrap the children with the class name\n     * `checkbox-text-wrapper`. For using the checkbox tick, use an element with class name\n     * `checkbox-text`.\n     *\n     * @example\n     * <div className='checkbox-text-wrapper display-flex justify-content-between'>\n     *     <div className='margin-right-15'>\n     *         <div className='text-medium text-size-16 text-color-darker'>Option 1</div>\n     *         <div className='text-color-dark'>This option is a first option</div>\n     *     </div>\n     *     <div className='checkbox-text' />\n     * </div>\n     */\n    custom?: boolean;\n\n    /**\n     * Defines whether the checkbox is required or not.\n     *\n     * @default false\n     */\n    required?: boolean;\n\n    /**\n     * Defines if the checkbox is in an indeterminate state in regard to other checkboxes that may be in different\n     * selection state.\n     *\n     * @default false\n     */\n    indeterminate?: boolean;\n\n    /**\n     * Defines whether the checkbox is applying an inline style. Use this in combination\n     * with other checkboxes.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Defines whether the checkbox is on the right side.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Use \"error\" to change color of the checkbox.\n     *\n     * @default false\n     */\n    error?: boolean;\n\n    /**\n     * Defines the size of the checkbox. Omitting this prop renders the Checkbox in normal size.\n     *\n     * Possible values are:\n     * `large`\n     */\n    size?: 'large';\n\n    /**\n     * A React ref assigned to the input itself.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the input field.\n     */\n    className?: string;\n};\n\ntype CheckboxEvent =\n    | React.MouseEvent<HTMLInputElement>\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLLabelElement>;\n\nconst Checkbox = (props: PropsWithChildren<CheckboxProps>) => {\n    const {\n        checked,\n        children,\n        className,\n        custom = false,\n        defaultChecked,\n        disabled = false,\n        error = false,\n        icon = '',\n        iconLabelPosition = ICON_LABEL_VERTICAL,\n        iconSize = DEFAULT_ICON_SIZE,\n        id = props.name,\n        indeterminate = false,\n        inline = false,\n        inputRef,\n        label,\n        name,\n        onChange = noop,\n        onClick = noop,\n        required = false,\n        right,\n        size,\n        tabIndex = 0,\n        ...remainingProps\n    } = props;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useEffect(() => {\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n        if (input) {\n            input.indeterminate = indeterminate;\n        }\n    }, [indeterminate, labelRef.current]);\n\n    const handleToggleKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ':\n                // toggle on space\n                toggle(event);\n                break;\n            case 'Enter':\n                // open on enter\n                toggle(event);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: CheckboxEvent) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        const input = labelRef.current?.firstChild as HTMLInputElement;\n\n        if (input.indeterminate) {\n            input.indeterminate = false;\n        }\n\n        input.checked = !input.checked;\n\n        onClick(event as React.MouseEvent<HTMLInputElement>);\n        onChange(event as React.ChangeEvent<HTMLInputElement>);\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames(\n        'checkbox',\n        inline && 'checkbox-inline',\n        size === 'large' && 'checkbox-large',\n        right && 'checkbox-right',\n        className\n    );\n\n    const inputClassnames = classNames(\n        error && 'error',\n        size === 'large' && 'large',\n        indeterminate && 'indeterminate',\n        className\n    );\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            htmlFor={id}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                id={id}\n                name={name}\n                type='checkbox'\n                checked={checked}\n                required={required}\n                defaultChecked={defaultChecked}\n                disabled={disabled}\n                className={inputClassnames}\n                onClick={onClick}\n                onChange={onChange}\n                ref={inputRef}\n            />\n            {renderCustomIcon && (\n                <CheckboxIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && <span className='checkbox-text'>{text && <span>{text}</span>}</span>}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nCheckbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL as typeof ICON_LABEL_VERTICAL;\nCheckbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL as typeof ICON_LABEL_HORIZONTAL;\n\nexport default Checkbox;\n"],"names":["DEFAULT_ICON_SIZE","ICON_LABEL_VERTICAL","ICON_LABEL_HORIZONTAL","Checkbox","props","checked","children","className","custom","defaultChecked","disabled","error","icon","iconLabelPosition","iconSize","id","indeterminate","inline","inputRef","label","name","onChange","noop","onClick","required","right","size","tabIndex","remainingProps","labelRef","useRef","useEffect","input","handleToggleKeyDown","event","toggle","text","labelClassnames","classNames","inputClassnames","jsxs","jsx","CheckboxIcon"],"mappings":";;;;;AAMA,MAAMA,IAAoB,IAEpBC,IAAsB,YACtBC,IAAwB,cAwJxBC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,mBAAAC,IAAoBZ;AAAA,IACpB,UAAAa,IAAWd;AAAA,IACX,IAAAe,IAAKX,EAAM;AAAA,IACX,eAAAY,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,SAAAC,IAAUD;AAAA,IACV,UAAAE,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACHxB,GAEEyB,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAQH,EAAS,SAAS;AAChC,IAAIG,MACAA,EAAM,gBAAgBhB;AAAA,EAE9B,GAAG,CAACA,GAAea,EAAS,OAAO,CAAC;AAEpC,QAAMI,IAAsB,CAACC,MAAiD;AAC1E,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,MACJ,KAAK;AAED,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAEA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAAyB;AAGrC,QAFAA,EAAM,eAAA,GAEFxB;AACA;AAGJ,UAAMsB,IAAQH,EAAS,SAAS;AAEhC,IAAIG,EAAM,kBACNA,EAAM,gBAAgB,KAG1BA,EAAM,UAAU,CAACA,EAAM,SAEvBT,EAAQW,CAA2C,GACnDb,EAASa,CAA4C;AAAA,EACzD,GAEME,IAAOjB,KAASb,GAEhB+B,IAAkBC;AAAA,IACpB;AAAA,IACArB,KAAU;AAAA,IACVS,MAAS,WAAW;AAAA,IACpBD,KAAS;AAAA,IACTlB;AAAA,EAAA,GAGEgC,IAAkBD;AAAA,IACpB3B,KAAS;AAAA,IACTe,MAAS,WAAW;AAAA,IACpBV,KAAiB;AAAA,IACjBT;AAAA,EAAA;AAOJ,SACI,gBAAAiC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,WAAWS;AAAA,MACX,UAAAV;AAAA,MACA,SAASZ;AAAA,MACT,WAAWkB;AAAA,MACX,KAAKJ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAA1B;AAAA,YACA,MAAAK;AAAA,YACA,MAAK;AAAA,YACL,SAAAf;AAAA,YACA,UAAAmB;AAAA,YACA,gBAAAf;AAAA,YACA,UAAAC;AAAA,YACA,WAAW6B;AAAA,YACX,SAAAhB;AAAA,YACA,UAAAF;AAAA,YACA,KAAKH;AAAA,UAAA;AAAA,QAAA;AAAA,QAxBQ,CAAC,CAACN,KA2Bf,gBAAA6B,EAACC,GAAA,EAAa,MAAA9B,GAAY,UAAAE,GAAoB,mBAAAD,GAAsC,MAAAuB,GAAY;AAAA,QAzBtF,CAACxB,KAAQ,CAACJ,uBA2BL,QAAA,EAAK,WAAU,iBAAiB,UAAA4B,KAAQ,gBAAAK,EAAC,QAAA,EAAM,UAAAL,EAAA,CAAK,EAAA,CAAQ;AAAA,QA5B3D5B,KAAUF,KA6BNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAH,EAAS,sBAAsBF;AAC/BE,EAAS,wBAAwBD;"}

package/components/circularProgress/CircularProgress.d.ts

@@ -0,0 +1,139 @@
+export type CircularProgressColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white';
+export type CircularProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CircularProgressTrackColor = 'decent' | 'lightest' | 'lighter' | 'light' | 'gray' | 'dark' | 'darker' | 'darkest' | 'white';
+export type CircularProgressProps = {
+    /**
+     * Optional text or node shown below the ring.
+     */
+    label?: React.ReactNode;
+    /**
+     * Preset size for the component.
+     *
+     * Possible values are:
+     *
+     * - `'xs'`
+     * - `'sm'`
+     * - `'md'`
+     * - `'lg'`
+     * - `'xl'`
+     *
+     * @default 'md'
+     */
+    size?: CircularProgressSize;
+    /**
+     * Color preset for the progress ring.
+     *
+     * Possible values are:
+     *
+     * - `'default'`
+     * - `'primary'`
+     * - `'secondary'`
+     * - `'info'`
+     * - `'success'`
+     * - `'warning'`
+     * - `'danger'`
+     * - `'white'`
+     *
+     * @default 'primary'
+     */
+    color?: CircularProgressColor;
+    /**
+     * Defaults to 0 to avoid indeterminate/spinner visuals.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Override the rendered value label content.
+     */
+    valueLabel?: React.ReactNode;
+    /**
+     * Minimum value for the range.
+     *
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * Maximum value for the range.
+     *
+     * @default 100
+     */
+    maxValue?: number;
+    /**
+     * Formatting for the visible value label.
+     * - If style === "percent": formats ratio (value-min)/(max-min)
+     * - Otherwise: formats the raw value (e.g. unit)
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Indeterminate mode is opt-in. Animates the progress indefinitely.
+     * May come in handy when the value still loads to prevent layout shifting.
+     *
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Toggles the value label in the center of the ring.
+     *
+     * @default true
+     */
+    showValueLabel?: boolean;
+    /**
+     * Stroke width used for the ring and track.
+     *
+     * @default 8
+     */
+    strokeWidth?: number;
+    /**
+     * Track color preset for the background ring.
+     *
+     * Possible values are:
+     *
+     * - `'decent'`
+     * - `'lightest'`
+     * - `'lighter'`
+     * - `'light'`
+     * - `'gray'`
+     * - `'dark'`
+     * - `'darker'`
+     * - `'darkest'`
+     * - `'white'`
+     *
+     * @default 'lighter'
+     */
+    trackColor?: CircularProgressTrackColor;
+    /**
+     * Class name for the track (background ring).
+     */
+    trackClassName?: string;
+    /**
+     * Disable motion even if the user allows animations.
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Delay before the progress animation starts (in seconds).
+     *
+     * @default 0
+     */
+    animationDelay?: number;
+    /**
+     * Class name for the outer wrapper.
+     */
+    className?: string;
+    /**
+     * Class name for the ring wrapper.
+     */
+    ringWrapClassName?: string;
+    /**
+     * Class name for the center value label.
+     */
+    valueLabelClassName?: string;
+    /**
+     * Class name for the label under the ring.
+     */
+    labelClassName?: string;
+};
+declare const CircularProgress: (props: CircularProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default CircularProgress;