@unif/react-native-design 0.27.1 → 0.29.0

package/lib/typescript/src/components/ui/CircularProgress/normalizeCircularProgress.d.ts

@@ -0,0 +1,15 @@
+export type NormalizedCircularProgress = Readonly<{
+    safeValue: number;
+    percentage: number;
+    safeSize: number;
+    safeThickness: number;
+    radius: number;
+    circumference: number;
+    dashOffset: number;
+}>;
+export declare function normalizeCircularProgress(input: {
+    value: number;
+    size: number;
+    thickness: number;
+}): NormalizedCircularProgress;
+//# sourceMappingURL=normalizeCircularProgress.d.ts.map

package/lib/typescript/src/components/ui/CircularProgress/normalizeCircularProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeCircularProgress.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/CircularProgress/normalizeCircularProgress.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAQH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,0BAA0B,CAsC7B"}

package/lib/typescript/src/components/ui/CircularProgress/types.d.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type CircularProgressProps = {
+    /** 当前进度，使用 0..1；越界值会收敛到边界，非有限值按 0 处理。 */
+    value: number;
+    /** 圆环直径，默认 32，最小 16。 */
+    size?: number;
+    /** 圆环描边宽度，默认 2，最大为半径。 */
+    thickness?: number;
+    /** 进度颜色，默认 c.primary。 */
+    color?: string;
+    /** 轨道颜色，默认 c.outline。 */
+    trackColor?: string;
+    /** 是否在圆环中央显示取整后的百分比，默认 false。 */
+    showLabel?: boolean;
+    /** 百分比文字颜色，默认 c.foreground。 */
+    labelColor?: string;
+    /** 进度条可访问性名称，默认“进度”。 */
+    accessibilityLabel?: string;
+    /** 外层布局样式。 */
+    style?: StyleProp<ViewStyle>;
+    /** E2E / 测试定位。 */
+    testID?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/ui/CircularProgress/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/CircularProgress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG;IAClC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/typescript/src/components/ui/Ribbon/Ribbon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RibbonProps } from './types';
+export declare function Ribbon({ label, tone, children, accessibilityLabel, style, testID, }: RibbonProps): React.JSX.Element;
+//# sourceMappingURL=Ribbon.d.ts.map

package/lib/typescript/src/components/ui/Ribbon/Ribbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/Ribbon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,KAAK,EACL,MAAM,GACP,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEjC"}

package/lib/typescript/src/components/ui/Ribbon/index.d.ts

@@ -0,0 +1,3 @@
+export { Ribbon } from './Ribbon';
+export type { RibbonProps, RibbonTone } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ui/Ribbon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/src/components/ui/Ribbon/layout.d.ts

@@ -0,0 +1,23 @@
+export type ResolvedRibbonLayout = {
+    overlay: {
+        position: 'absolute';
+        top: number;
+        right: number;
+        zIndex: number;
+        alignItems: 'flex-end';
+    };
+    bar: {
+        height: number;
+    };
+    fold: {
+        width: 0;
+        height: 0;
+        borderWidth: number;
+    };
+};
+export declare function resolveRibbonLayout({ top, barHeight, foldSize, }: {
+    top: number;
+    barHeight: number;
+    foldSize: number;
+}): ResolvedRibbonLayout;
+//# sourceMappingURL=layout.d.ts.map

package/lib/typescript/src/components/ui/Ribbon/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/layout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,GAAG,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,MAAM,EAAE,CAAC,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,QAAQ,GACT,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,oBAAoB,CAYvB"}

package/lib/typescript/src/components/ui/Ribbon/styles.d.ts

@@ -0,0 +1,31 @@
+import { type ColorTokens } from '../../../theme';
+import type { RibbonTone } from './types';
+export declare const makeStyles: (_c: ColorTokens) => Readonly<{
+    root: {
+        position: "relative";
+    };
+    visual: {
+        alignItems: "flex-end";
+    };
+    bar: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    text: {
+        fontSize: number;
+        fontWeight: "500";
+    };
+    fold: {
+        borderRightColor: string;
+        borderBottomColor: string;
+    };
+}>;
+export declare function paletteFor(tone: RibbonTone, c: ColorTokens): {
+    bg: string;
+    fg: string;
+    fold: string;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/ui/Ribbon/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,UAAU,GAAI,IAAI,WAAW;;;;;;;;;;;;;;;;;;;;;;EAgBtC,CAAC;AAEL,wBAAgB,UAAU,CACxB,IAAI,EAAE,UAAU,EAChB,CAAC,EAAE,WAAW,GACb;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAO1C"}

package/lib/typescript/src/components/ui/Ribbon/types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type RibbonTone = 'brand' | 'danger';
+export type RibbonProps = {
+    /** 右上缎带的可见文案 */
+    label: string;
+    /** 语义色，默认 'brand' */
+    tone?: RibbonTone;
+    /** 被缎带标记的内容 */
+    children: ReactNode;
+    /** 可选读屏文案；不传时缎带只作为装饰，避免与内容重复播报 */
+    accessibilityLabel?: string;
+    /** 外层布局样式 */
+    style?: StyleProp<ViewStyle>;
+    /** E2E / 测试定位 */
+    testID?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/ui/Ribbon/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/typescript/src/components/ui/Stepper/Stepper.d.ts

@@ -7,5 +7,5 @@ import type { StepperProps } from './types';
  * 健壮性：value/min/max 的非法或非有限输入均折叠到安全范围；step <=0 或
  * 非有限数时回退 1；min > max 时折叠为 min 的零范围。
  */
-export declare function Stepper({ value, onChange, accessibilityLabel, min, max, step, size, disabled, testID, }: StepperProps): React.JSX.Element;
+export declare function Stepper({ value, onChange, accessibilityLabel, min, max, step, size, formatValue, disabled, testID, }: StepperProps): React.JSX.Element;
 //# sourceMappingURL=Stepper.d.ts.map

package/lib/typescript/src/components/ui/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,IAAW,EACX,QAAgB,EAChB,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwKlC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAkBzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,IAAW,EACX,WAAW,EACX,QAAgB,EAChB,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkLlC"}

package/lib/typescript/src/components/ui/Stepper/displayValue.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveStepperDisplayValue(value: number, formatValue?: (value: number) => string): number | string;
+//# sourceMappingURL=displayValue.d.ts.map

package/lib/typescript/src/components/ui/Stepper/displayValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayValue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/displayValue.ts"],"names":[],"mappings":"AAAA,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACtC,MAAM,GAAG,MAAM,CAEjB"}

package/lib/typescript/src/components/ui/Stepper/layout.d.ts

@@ -18,5 +18,7 @@ export declare function resolveStepperLayout({ h, btn, w, }: {
     h: number;
     btn: number;
     w: number;
+}, options?: {
+    compact?: boolean;
 }): ResolvedStepperLayout;
 //# sourceMappingURL=layout.d.ts.map

package/lib/typescript/src/components/ui/Stepper/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/layout.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,YAAY,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,CAAC,EACD,GAAG,EACH,CAAC,GACF,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;CACX,GAAG,qBAAqB,CAmBxB"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/layout.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,YAAY,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,EACE,CAAC,EACD,GAAG,EACH,CAAC,GACF,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;CACX,EACD,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC9B,qBAAqB,CAmCvB"}

package/lib/typescript/src/components/ui/Stepper/styles.d.ts

@@ -47,7 +47,8 @@ export declare const makeStyles: (c: ColorTokens) => Readonly<{
         fontWeight: "500";
     };
 }>;
-/** Stepper 尺寸推导:sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
+/** Stepper 尺寸推导:xs(r(24) 高 / r(24) 按钮 / r(40) 值宽 / micro 字)/
+ *  sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
  *  md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
  *  新增 size 在 types.ts 加 union + 这里加 case。 */
 export declare function sizingFor(size: StepperSize): {

package/lib/typescript/src/components/ui/Stepper/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;qEAEqE;AACrE,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;IAcrC;2DACuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvD,CAAC;AAEL;;6CAE6C;AAC7C,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;CACZ,CAOA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;qEAEqE;AACrE,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;IAcrC;2DACuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvD,CAAC;AAEL;;;6CAG6C;AAC7C,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;CACZ,CASA"}

package/lib/typescript/src/components/ui/Stepper/types.d.ts

@@ -1,5 +1,5 @@
-/** Stepper 尺寸：sm=28px / md=32px */
-export type StepperSize = 'sm' | 'md';
+/** Stepper 尺寸：xs=24px / sm=28px / md=32px */
+export type StepperSize = 'xs' | 'sm' | 'md';
 export type StepperProps = {
     /** 当前值（受控） */
     value: number;
@@ -15,6 +15,8 @@ export type StepperProps = {
     step?: number;
     /** 尺寸，默认 'md' */
     size?: StepperSize;
+    /** 自定义中央值的可见文案；数值运算与 adjustable 语义仍使用归一化后的 number */
+    formatValue?: (value: number) => string;
     /** 整体禁用（三个操作节点都不暴露 action） */
     disabled?: boolean;
     /** E2E / 测试定位 */

package/lib/typescript/src/components/ui/Stepper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/types.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/types.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/lib/typescript/src/components/ui/index.d.ts

@@ -14,6 +14,8 @@ export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { Chip } from './Chip';
 export type { ChipProps } from './Chip';
+export { CircularProgress } from './CircularProgress';
+export type { CircularProgressProps } from './CircularProgress';
 export { confirm, ConfirmHost } from './Confirm';
 export type { ConfirmOptions } from './Confirm';
 export { DrawerHeader } from './DrawerHeader';
@@ -44,6 +46,8 @@ export { Radio } from './Radio';
 export type { GroupProps as RadioGroupProps, RadioProps } from './Radio';
 export { Reveal } from './Reveal';
 export type { RevealProps } from './Reveal';
+export { Ribbon } from './Ribbon';
+export type { RibbonProps, RibbonTone } from './Ribbon';
 export { Search } from './Search';
 export type { SearchProps } from './Search';
 export { Skeleton } from './Skeleton';

package/lib/typescript/src/components/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AACpC,YAAY,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,uBAAuB,EACvB,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,aAAa,GACd,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/ui/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,111 @@
+import { Text, View } from 'react-native';
+import type { TextStyle, ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { r, type, useColors } from '../../../theme';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import { normalizeCircularProgress } from './normalizeCircularProgress';
+import type { CircularProgressProps } from './types';
+
+const OUTER_CENTER_STYLE = {
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const satisfies ViewStyle;
+
+const VISUAL_CONTAINER_STYLE = {
+  position: 'relative',
+} as const satisfies ViewStyle;
+
+const LABEL_CENTER_STYLE = {
+  fontWeight: '600',
+  left: 0,
+  position: 'absolute',
+  textAlign: 'center',
+  top: 0,
+} as const satisfies TextStyle;
+
+export function CircularProgress({
+  value,
+  size = r(32),
+  thickness = r(2),
+  color,
+  trackColor,
+  showLabel = false,
+  labelColor,
+  accessibilityLabel = '进度',
+  style,
+  testID,
+}: CircularProgressProps): React.JSX.Element {
+  const colors = useColors();
+  const normalized = normalizeCircularProgress({ value, size, thickness });
+  const {
+    circumference,
+    dashOffset,
+    percentage,
+    radius,
+    safeSize,
+    safeThickness,
+  } = normalized;
+  const center = safeSize / 2;
+
+  return (
+    <View
+      accessible
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max: 100,
+        now: percentage,
+        text: `${percentage}%`,
+      }}
+      style={[{ height: safeSize, width: safeSize }, style, OUTER_CENTER_STYLE]}
+      testID={testID}
+    >
+      <View
+        style={[{ height: safeSize, width: safeSize }, VISUAL_CONTAINER_STYLE]}
+        {...A11Y_HIDDEN_PROPS}
+      >
+        <Svg height={safeSize} width={safeSize}>
+          <Circle
+            cx={center}
+            cy={center}
+            fill="none"
+            r={radius}
+            stroke={trackColor ?? colors.outline}
+            strokeWidth={safeThickness}
+          />
+          <Circle
+            cx={center}
+            cy={center}
+            fill="none"
+            r={radius}
+            rotation={-90}
+            originX={center}
+            originY={center}
+            stroke={color ?? colors.primary}
+            strokeDasharray={circumference}
+            strokeDashoffset={dashOffset}
+            strokeLinecap="round"
+            strokeWidth={safeThickness}
+          />
+        </Svg>
+        {showLabel ? (
+          <Text
+            style={[
+              {
+                color: labelColor ?? colors.foreground,
+                fontSize: type.nano,
+                height: safeSize,
+                lineHeight: safeSize,
+                width: safeSize,
+              },
+              LABEL_CENTER_STYLE,
+            ]}
+          >
+            {`${percentage}%`}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/components/ui/CircularProgress/index.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from './CircularProgress';
+export type { CircularProgressProps } from './types';

package/src/components/ui/CircularProgress/normalizeCircularProgress.ts

@@ -0,0 +1,64 @@
+import { createLogger } from '../../../utils/logger';
+
+const log = createLogger('CircularProgress');
+const warnedKeys = new Set<string>();
+
+export type NormalizedCircularProgress = Readonly<{
+  safeValue: number;
+  percentage: number;
+  safeSize: number;
+  safeThickness: number;
+  radius: number;
+  circumference: number;
+  dashOffset: number;
+}>;
+
+function warnOnce(key: string, message: string): void {
+  if (warnedKeys.has(key)) return;
+  warnedKeys.add(key);
+  log.warn(message);
+}
+
+export function normalizeCircularProgress(input: {
+  value: number;
+  size: number;
+  thickness: number;
+}): NormalizedCircularProgress {
+  const { value, size, thickness } = input;
+
+  if (!Number.isFinite(value) || value < 0 || value > 1) {
+    warnOnce(
+      `value:${value}`,
+      `value 应为 0..1 的有限数，传入 ${value}，已收敛到安全范围`
+    );
+  }
+  if (!Number.isFinite(size) || size < 16) {
+    warnOnce(`size:${size}`, `size 应为 ≥16 的有限数，传入 ${size}，已钳到 16`);
+  }
+  if (!Number.isFinite(thickness) || thickness <= 0) {
+    warnOnce(
+      `thickness:${thickness}`,
+      `thickness 应为正有限数，传入 ${thickness}，已 fallback 为 2`
+    );
+  }
+
+  const safeValue = Number.isFinite(value)
+    ? Math.min(1, Math.max(0, value))
+    : 0;
+  const safeSize = Number.isFinite(size) && size >= 16 ? size : 16;
+  const fallbackThickness =
+    Number.isFinite(thickness) && thickness > 0 ? thickness : 2;
+  const safeThickness = Math.min(fallbackThickness, safeSize / 2);
+  const radius = (safeSize - safeThickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  return {
+    safeValue,
+    percentage: Math.round(safeValue * 100),
+    safeSize,
+    safeThickness,
+    radius,
+    circumference,
+    dashOffset: circumference * (1 - safeValue),
+  };
+}

package/src/components/ui/CircularProgress/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type CircularProgressProps = {
+  /** 当前进度，使用 0..1；越界值会收敛到边界，非有限值按 0 处理。 */
+  value: number;
+  /** 圆环直径，默认 32，最小 16。 */
+  size?: number;
+  /** 圆环描边宽度，默认 2，最大为半径。 */
+  thickness?: number;
+  /** 进度颜色，默认 c.primary。 */
+  color?: string;
+  /** 轨道颜色，默认 c.outline。 */
+  trackColor?: string;
+  /** 是否在圆环中央显示取整后的百分比，默认 false。 */
+  showLabel?: boolean;
+  /** 百分比文字颜色，默认 c.foreground。 */
+  labelColor?: string;
+  /** 进度条可访问性名称，默认“进度”。 */
+  accessibilityLabel?: string;
+  /** 外层布局样式。 */
+  style?: StyleProp<ViewStyle>;
+  /** E2E / 测试定位。 */
+  testID?: string;
+};

package/src/components/ui/Ribbon/Ribbon.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import {
+  r,
+  scaleFontMetric,
+  space,
+  type as t,
+  useColors,
+  useFontScale,
+  useThemedStyles,
+} from '../../../theme';
+import { childTestID } from '../../../utils/testID';
+import { A11Y_HIDDEN_PROPS, A11Y_TEXT_ONLY_STYLE } from '../shared/a11y';
+import { normalizeNonBlankText } from '../shared/accessibilityName';
+import { resolveRibbonLayout } from './layout';
+import { makeStyles, paletteFor } from './styles';
+import type { RibbonProps } from './types';
+
+export function Ribbon({
+  label,
+  tone = 'brand',
+  children,
+  accessibilityLabel,
+  style,
+  testID,
+}: RibbonProps): React.JSX.Element {
+  const c = useColors();
+  const fontScale = useFontScale();
+  const styles = useThemedStyles(makeStyles);
+  const layout = resolveRibbonLayout({
+    top: space['3'],
+    barHeight: r(20),
+    foldSize: r(3),
+  });
+  const palette = paletteFor(tone, c);
+  const accessibleName = normalizeNonBlankText(accessibilityLabel);
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      {children}
+      <View
+        pointerEvents="none"
+        style={layout.overlay}
+        testID={childTestID(testID, 'overlay')}
+      >
+        <View
+          {...A11Y_HIDDEN_PROPS}
+          style={styles.visual}
+          testID={childTestID(testID, 'visual')}
+        >
+          <View
+            style={[styles.bar, layout.bar, { backgroundColor: palette.bg }]}
+            testID={childTestID(testID, 'bar')}
+          >
+            <Text
+              style={[
+                styles.text,
+                {
+                  color: palette.fg,
+                  fontSize: scaleFontMetric(t.micro, fontScale),
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          </View>
+          <View
+            style={[
+              styles.fold,
+              layout.fold,
+              {
+                borderTopColor: palette.fold,
+                borderLeftColor: palette.fold,
+              },
+            ]}
+            testID={childTestID(testID, 'fold')}
+          />
+        </View>
+        {accessibleName === undefined ? null : (
+          <Text
+            accessible
+            accessibilityLabel={accessibleName}
+            style={A11Y_TEXT_ONLY_STYLE}
+            testID={childTestID(testID, 'accessibility-label')}
+          >
+            {accessibleName}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/ui/Ribbon/index.ts

@@ -0,0 +1,2 @@
+export { Ribbon } from './Ribbon';
+export type { RibbonProps, RibbonTone } from './types';

package/src/components/ui/Ribbon/layout.ts

@@ -0,0 +1,33 @@
+export type ResolvedRibbonLayout = {
+  overlay: {
+    position: 'absolute';
+    top: number;
+    right: number;
+    zIndex: number;
+    alignItems: 'flex-end';
+  };
+  bar: { height: number };
+  fold: { width: 0; height: 0; borderWidth: number };
+};
+
+export function resolveRibbonLayout({
+  top,
+  barHeight,
+  foldSize,
+}: {
+  top: number;
+  barHeight: number;
+  foldSize: number;
+}): ResolvedRibbonLayout {
+  return {
+    overlay: {
+      position: 'absolute',
+      top,
+      right: 0,
+      zIndex: 1,
+      alignItems: 'flex-end',
+    },
+    bar: { height: barHeight },
+    fold: { width: 0, height: 0, borderWidth: foldSize },
+  };
+}