@sfperusacdev/sf-ui 0.2.8 → 0.2.9

package/dist/types/src/components/dashboard/DonutBreakdown.d.ts

@@ -10,7 +10,9 @@ export type DonutBreakdownProps = {
     /** Contenido central grande (ej. el total). Si se omite, se autocalcula como la suma de `segments`. */
     centerValue?: string | number;
     centerLabel?: string;
+    /** Diámetro máximo; la dona se encoge con su contenedor y el texto del centro escala con ella. */
     size?: DonutGaugeSize;
+    /** Grosor del anillo. Se acota a un quinto del diámetro para que el centro siempre tenga hueco. */
     strokeWidth?: number;
     /** Leyenda con nombre, cantidad y porcentaje debajo del donut. Por defecto `true`. */
     showLegend?: boolean;

package/dist/types/src/components/dashboard/DonutGauge.d.ts

@@ -3,6 +3,7 @@ export type DonutGaugeProps = {
     value: number;
     label?: string;
     sublabel?: string;
+    /** Diámetro máximo; la dona se encoge con su contenedor y la cifra del centro escala con ella. */
     size?: DonutGaugeSize;
     color?: string;
     thresholds?: {
@@ -11,6 +12,7 @@ export type DonutGaugeProps = {
     };
     inverse?: boolean;
     showValue?: boolean;
+    /** Grosor del anillo. Se acota a un quinto del diámetro para que el centro siempre tenga hueco. */
     strokeWidth?: number;
     className?: string;
 };

package/dist/types/src/components/dashboard/DonutGauge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/donutSizing.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import { DonutGaugeSize } from './types';
+/** Diámetro de cada tamaño, en px. Es el máximo: la dona se encoge cuando su contenedor es más angosto. */
+export declare const DONUT_SIZE_PX: Record<DonutGaugeSize, number>;
+export declare const DONUT_STROKE_PX: Record<DonutGaugeSize, number>;
+export declare const DONUT_FONT_VALUE_PX: Record<DonutGaugeSize, number>;
+export declare const DONUT_FONT_LABEL_PX: Record<DonutGaugeSize, number>;
+/** Con más de un quinto del diámetro de anillo, el hueco no deja sitio al texto del centro. */
+export declare const DONUT_MAX_STROKE_RATIO = 0.2;
+export type DonutGeometry = {
+    dim: number;
+    stroke: number;
+    radius: number;
+    center: number;
+    circumference: number;
+    /** Diámetro del hueco interior, donde va el texto. */
+    hole: number;
+};
+/** Geometría del anillo. El grosor se acota a `DONUT_MAX_STROKE_RATIO` para que siempre quede hueco. */
+export declare const donutGeometry: (size: DonutGaugeSize, strokeWidth?: number) => DonutGeometry;
+/**
+ * Tamaño de fuente (px del viewBox) con el que `text` cabe en una línea dentro del hueco: el menor entre el tamaño
+ * base del donut y el que deja el ancho del hueco. Así «98.75%» no se monta sobre el anillo en una dona chica.
+ */
+export declare const fontThatFits: (basePx: number, hole: number, text: string) => number;
+/** px del viewBox → unidades del contenedor (`cqw`), para que el texto escale con el ancho real de la dona. */
+export declare const toCqw: (px: number, dim: number) => string;
+/**
+ * Variables CSS del anillo: diámetro máximo, hueco (inset del centro) y fuentes en `cqw`. Van en el elemento
+ * `.sf-donut__ring`, que es el contenedor de consulta (`container-type: inline-size`).
+ */
+export declare const donutRingStyle: (g: DonutGeometry, valueText: string, baseValuePx: number, baseLabelPx: number) => CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",