@seakoi/native-ui 1.0.0

package/dist/module/components/base/calendar/utils/lunar.js

@@ -0,0 +1,296 @@
+"use strict";
+
+/**
+ * 农历工具函数
+ * 基于农历算法实现，无需外部依赖
+ */
+
+// 模块级别的缓存
+const lunarCache = new Map();
+const MAX_CACHE_SIZE = 1000;
+
+// 农历数据：1900-2100年
+// 每个元素的含义：前12位表示12个月的大小月（1为30天，0为29天），后4位表示闰月月份（0表示无闰月）
+const LUNAR_INFO = [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, 0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, 0x0d520];
+
+// 天干
+const HEAVENLY_STEMS = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
+
+// 地支
+const EARTHLY_BRANCHES = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
+
+// 生肖
+const ZODIAC = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
+
+// 农历月份
+const LUNAR_MONTHS = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
+
+// 农历日期
+const LUNAR_DAYS = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
+
+// 节气
+const SOLAR_TERMS = ['小寒', '大寒', '立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至'];
+
+// 节气数据（简化版，基于1900-2100年）
+const SOLAR_TERM_BASE = [[5, 20], [4, 19], [6, 21], [5, 21], [6, 22], [6, 22], [6, 23], [6, 23], [7, 24], [6, 23], [7, 24], [7, 24], [8, 25], [8, 25], [9, 26], [8, 25], [8, 25], [8, 25], [9, 26], [9, 26], [8, 25], [8, 25], [8, 25], [7, 24]];
+
+// 传统节日
+const TRADITIONAL_FESTIVALS = {
+  '1-1': '春节',
+  '1-15': '元宵',
+  '2-2': '龙抬头',
+  '5-5': '端午',
+  '7-7': '七夕',
+  '7-15': '中元',
+  '8-15': '中秋',
+  '9-9': '重阳',
+  '12-8': '腊八',
+  '12-23': '小年'
+};
+
+// 公历节日
+const SOLAR_FESTIVALS = {
+  '1-1': '元旦',
+  '2-14': '情人节',
+  '3-8': '妇女节',
+  '3-12': '植树节',
+  '4-1': '愚人节',
+  '5-1': '劳动节',
+  '5-4': '青年节',
+  '6-1': '儿童节',
+  '7-1': '建党节',
+  '8-1': '建军节',
+  '9-10': '教师节',
+  '10-1': '国庆节',
+  '12-25': '圣诞节'
+};
+
+/**
+ * 获取农历年份的闰月月份
+ */
+function getLeapMonth(year) {
+  return LUNAR_INFO[year - 1900] & 0xf;
+}
+
+/**
+ * 获取农历年份的闰月天数
+ */
+function getLeapDays(year) {
+  if (getLeapMonth(year)) {
+    return LUNAR_INFO[year - 1900] & 0x10000 ? 30 : 29;
+  }
+  return 0;
+}
+
+/**
+ * 获取农历年份的总天数
+ */
+function getYearDays(year) {
+  let sum = 348;
+  for (let i = 0x8000; i > 0x8; i >>= 1) {
+    sum += LUNAR_INFO[year - 1900] & i ? 1 : 0;
+  }
+  return sum + getLeapDays(year);
+}
+
+/**
+ * 获取农历月份的天数
+ */
+function getMonthDays(year, month) {
+  return LUNAR_INFO[year - 1900] & 0x10000 >> month ? 30 : 29;
+}
+
+/**
+ * 将公历日期转换为农历（内部实现，不带缓存）
+ */
+function solarToLunarInternal(date) {
+  const baseDate = new Date(1900, 0, 31);
+  let offset = Math.floor((date.getTime() - baseDate.getTime()) / 86400000);
+  let lunarYear = 1900;
+  let lunarMonth = 1;
+  let lunarDay = 1;
+  let isLeap = false;
+
+  // 计算农历年份
+  for (let i = 1900; i < 2101 && offset > 0; i++) {
+    const yearDays = getYearDays(i);
+    if (offset < yearDays) {
+      lunarYear = i;
+      break;
+    }
+    offset -= yearDays;
+  }
+
+  // 计算农历月份
+  const leapMonth = getLeapMonth(lunarYear);
+  for (let i = 1; i < 13 && offset > 0; i++) {
+    // 闰月
+    if (leapMonth > 0 && i === leapMonth + 1 && !isLeap) {
+      --i;
+      isLeap = true;
+      const leapDays = getLeapDays(lunarYear);
+      if (offset < leapDays) {
+        lunarMonth = i;
+        break;
+      }
+      offset -= leapDays;
+    } else {
+      const monthDays = getMonthDays(lunarYear, i);
+      if (offset < monthDays) {
+        lunarMonth = i;
+        break;
+      }
+      offset -= monthDays;
+    }
+    if (isLeap && i === leapMonth + 1) {
+      isLeap = false;
+    }
+  }
+  lunarDay = offset + 1;
+  return {
+    year: lunarYear,
+    month: lunarMonth,
+    day: lunarDay,
+    isLeap
+  };
+}
+
+/**
+ * 将公历日期转换为农历（带缓存优化）
+ */
+export function solarToLunar(date) {
+  // 使用日期字符串作为缓存键
+  const cacheKey = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+
+  // 检查缓存
+  if (lunarCache.has(cacheKey)) {
+    return lunarCache.get(cacheKey);
+  }
+
+  // 计算农历
+  const result = solarToLunarInternal(date);
+
+  // 缓存结果
+  lunarCache.set(cacheKey, result);
+
+  // 限制缓存大小，防止内存泄漏
+  if (lunarCache.size > MAX_CACHE_SIZE) {
+    const firstKey = lunarCache.keys().next().value;
+    if (firstKey) {
+      lunarCache.delete(firstKey);
+    }
+  }
+  return result;
+}
+
+/**
+ * 获取农历日期的显示文本
+ */
+export function getLunarDayText(date) {
+  const lunar = solarToLunar(date);
+
+  // 如果是初一，显示月份
+  if (lunar.day === 1) {
+    const monthText = LUNAR_MONTHS[lunar.month - 1];
+    return lunar.isLeap ? `闰${monthText}` : monthText;
+  }
+  return LUNAR_DAYS[lunar.day - 1];
+}
+
+/**
+ * 获取天干地支年份
+ */
+export function getGanZhiYear(year) {
+  const ganIndex = (year - 4) % 10;
+  const zhiIndex = (year - 4) % 12;
+  return HEAVENLY_STEMS[ganIndex] + EARTHLY_BRANCHES[zhiIndex];
+}
+
+/**
+ * 获取生肖
+ */
+export function getZodiac(year) {
+  return ZODIAC[(year - 4) % 12];
+}
+
+/**
+ * 获取节气
+ */
+export function getSolarTerm(date) {
+  const month = date.getMonth();
+  const day = date.getDate();
+
+  // 每个月有两个节气
+  const termIndex = month * 2;
+  const [day1, day2] = SOLAR_TERM_BASE[termIndex];
+  if (day === day1) {
+    return SOLAR_TERMS[termIndex];
+  }
+  if (day === day2 && termIndex + 1 < SOLAR_TERMS.length) {
+    return SOLAR_TERMS[termIndex + 1];
+  }
+  return null;
+}
+
+/**
+ * 获取传统节日
+ */
+export function getTraditionalFestival(date) {
+  const lunar = solarToLunar(date);
+  const key = `${lunar.month}-${lunar.day}`;
+  return TRADITIONAL_FESTIVALS[key] || null;
+}
+
+/**
+ * 获取公历节日
+ */
+export function getSolarFestival(date) {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const key = `${month}-${day}`;
+  return SOLAR_FESTIVALS[key] || null;
+}
+
+/**
+ * 获取日期的完整农历信息
+ */
+
+export function getLunarInfo(date) {
+  const lunar = solarToLunar(date);
+  return {
+    lunarDay: getLunarDayText(date),
+    solarTerm: getSolarTerm(date),
+    festival: getTraditionalFestival(date),
+    solarFestival: getSolarFestival(date),
+    lunarYear: lunar.year,
+    lunarMonth: lunar.month,
+    isLeap: lunar.isLeap,
+    ganZhiYear: getGanZhiYear(lunar.year),
+    zodiac: getZodiac(lunar.year)
+  };
+}
+
+/**
+ * 获取日期单元格显示的文本（优先级：节日 > 节气 > 农历）
+ */
+export function getDateCellSubText(date) {
+  const info = getLunarInfo(date);
+
+  // 优先显示公历节日
+  if (info.solarFestival) {
+    return info.solarFestival;
+  }
+
+  // 其次显示传统节日
+  if (info.festival) {
+    return info.festival;
+  }
+
+  // 再显示节气
+  if (info.solarTerm) {
+    return info.solarTerm;
+  }
+
+  // 最后显示农历日期
+  return info.lunarDay;
+}

package/dist/module/components/base/calendar/utils/utils.js

@@ -0,0 +1,101 @@
+"use strict";
+
+/**
+ * 日历组件工具函数
+ */
+
+/**
+ * 判断两个日期是否相同（忽略时间）
+ */
+export const isSameDate = (date1, date2) => {
+  if (!date1 || !date2) return false;
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
+
+/**
+ * 判断日期是否在范围内（不包括起始和结束日期）
+ */
+export const isDateInRange = (date, start, end) => {
+  if (!start || !end) return false;
+  const time = date.getTime();
+  const startTime = start.getTime();
+  const endTime = end.getTime();
+  return time > startTime && time < endTime;
+};
+
+/**
+ * 判断是否是今天
+ */
+export const isToday = date => {
+  const today = new Date();
+  return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+};
+
+/**
+ * 判断日期是否有效
+ */
+export const isValidDate = date => {
+  return date instanceof Date && !isNaN(date.getTime());
+};
+
+/**
+ * 获取月份的所有日期（包括前后月份填充）
+ */
+export const getMonthDates = currentDate => {
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+
+  // 当月第一天
+  const firstDay = new Date(year, month, 1);
+  // 当月最后一天
+  const lastDay = new Date(year, month + 1, 0);
+
+  // 需要显示的第一天（可能是上个月）
+  const startDay = new Date(firstDay);
+  startDay.setDate(startDay.getDate() - firstDay.getDay());
+
+  // 需要显示的最后一天（可能是下个月）
+  const endDay = new Date(lastDay);
+  endDay.setDate(endDay.getDate() + (6 - lastDay.getDay()));
+  const result = [];
+  const current = new Date(startDay);
+  while (current <= endDay) {
+    result.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return result;
+};
+
+/**
+ * 将日期数组按周分组
+ */
+export const groupDatesByWeek = dates => {
+  const result = [];
+  for (let i = 0; i < dates.length; i += 7) {
+    result.push(dates.slice(i, i + 7));
+  }
+  return result;
+};
+
+/**
+ * 格式化日期为可访问性标签
+ */
+export const formatDateForAccessibility = date => {
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+};
+
+/**
+ * 时间戳转换为 Date 对象
+ */
+export const timestampToDate = timestamp => {
+  if (timestamp === undefined || timestamp === null) return undefined;
+  return new Date(timestamp);
+};
+
+/**
+ * Date 对象转换为时间戳
+ */
+export const dateToTimestamp = date => {
+  if (!date) return undefined;
+  return date.getTime();
+};

package/dist/module/components/base/cell/cell-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const CellContext = /*#__PURE__*/React.createContext(null);

package/dist/module/components/base/cell/cell-group.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { Surface, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { CellContext } from "./cell-context.js";
+import { useGroupStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CellGroup = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useGroupStyles();
+  const children = React.Children.toArray(props.children);
+  const elevation = props.elevation ?? (variant === 'card' ? 1 : 0);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, props.style],
+    children: [safetyRenderChildren(props.title, textValue => /*#__PURE__*/_jsx(Text, {
+      size: 16,
+      font: "medium",
+      numberOfLines: 1,
+      style: styles.title,
+      color: theme.palette.fontGray1,
+      children: textValue
+    })), /*#__PURE__*/_jsx(Surface, {
+      elevation: elevation,
+      style: [styles.contentContainer, props.contentContainerStyle, variant === 'card' && styles.card],
+      children: children.filter(React.isValidElement).map((childNode, index) => {
+        const isBordered = !!props.bordered && index < children.length - 1;
+        return /*#__PURE__*/_jsx(CellContext.Provider, {
+          value: {
+            bordered: isBordered && props.bordered,
+            borderedColor: props.borderedColor
+          },
+          children: childNode
+        }, index);
+      })
+    })]
+  });
+};

package/dist/module/components/base/cell/cell.js

@@ -0,0 +1,85 @@
+"use strict";
+
+import { RightOutlined } from '@seakoi/svg-icons';
+import React, { useContext, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { Flex } from "../flex/index.js";
+import { Text } from "../text/index.js";
+import { CellContext } from "./cell-context.js";
+import { useCellStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DEFAULT_INSET_SIZE = 16;
+export const Cell = ({
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 1,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCellStyles();
+  const context = useContext(CellContext);
+  const bordered = props.bordered ?? context?.bordered;
+  const borderedColor = props.borderedColor ?? context?.borderedColor;
+  const borderedInset = useMemo(() => {
+    if (typeof bordered !== 'object') return;
+    if (typeof bordered.inset !== 'object') {
+      return {
+        left: bordered.inset ?? DEFAULT_INSET_SIZE,
+        right: bordered.inset ?? DEFAULT_INSET_SIZE
+      };
+    }
+    return bordered.inset;
+  }, [bordered]);
+  const showRightContent = !!(props.showArrow || props.extra);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    activeOpacity: 0.8,
+    disabled: props.disabledPress || !props.onPress,
+    onPress: props.onPress,
+    onLayout: props.onLayout,
+    onLongPress: props.onLongPress,
+    style: [styles.container, props.style, props.align && {
+      alignItems: props.align
+    }],
+    children: [props.prefix, /*#__PURE__*/_jsxs(Flex, {
+      vertical: true,
+      gap: 4,
+      align: "flex-start",
+      justify: "flex-start",
+      style: [styles.contentContainer, props.contentContainerStyle],
+      children: [safetyRenderChildren(props.title, title => /*#__PURE__*/_jsx(Text, {
+        size: 16,
+        style: props.titleStyle,
+        color: theme.palette.fontGray1,
+        numberOfLines: titleNumberOfLines,
+        children: title
+      })), safetyRenderChildren(props.description, description => /*#__PURE__*/_jsx(Text, {
+        size: 14,
+        style: props.descriptionStyle,
+        color: theme.palette.fontGray3,
+        numberOfLines: descriptionNumberOfLines,
+        children: description
+      }))]
+    }), !!showRightContent && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!!props.extra && /*#__PURE__*/_jsx(View, {
+        style: [styles.extra, props.extraStyle],
+        children: safetyRenderChildren(props.extra, content => /*#__PURE__*/_jsx(Text, {
+          size: 14,
+          color: theme.palette.fontGray3,
+          numberOfLines: 1,
+          children: content
+        }))
+      }), !!props.showArrow && /*#__PURE__*/_jsx(View, {
+        style: styles.arrow,
+        children: props.renderArrowIcon?.() ?? /*#__PURE__*/_jsx(RightOutlined, {
+          size: 16,
+          color: theme.palette.fontGray4
+        })
+      })]
+    }), !!bordered && /*#__PURE__*/_jsx(View, {
+      style: [styles.bordered, borderedInset, {
+        backgroundColor: borderedColor ?? theme.palette.blueGray3
+      }]
+    })]
+  });
+};

package/dist/module/components/base/cell/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { Cell as _Cell } from "./cell.js";
+import { CellGroup } from "./cell-group.js";
+export * from "./cell.js";
+export * from "./cell-group.js";
+export const Cell = Object.assign(_Cell, {
+  Group: CellGroup
+});

package/dist/module/components/base/cell/style/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useCellStyles = createThemedStyles(theme => ({
+  container: {
+    width: '100%',
+    padding: 16,
+    gap: theme.spacing.sm,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderBottomColor: 'transparent',
+    backgroundColor: theme.palette.white
+  },
+  contentContainer: {
+    flex: 1
+  },
+  bordered: {
+    height: 1,
+    insetInline: 16,
+    insetBlockEnd: 0,
+    position: 'absolute'
+  },
+  extra: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end'
+  },
+  arrow: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto'
+  }
+}));
+export const useGroupStyles = createThemedStyles(theme => ({
+  container: {
+    width: '100%'
+  },
+  title: {
+    marginBottom: 6
+  },
+  contentContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  card: {
+    borderRadius: theme.roundness.xl
+  }
+}));

package/dist/module/components/base/checkbox/checkbox-card.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { CheckOutlined } from '@seakoi/svg-icons';
+import { useMemoizedFn } from 'ahooks';
+import React, { useContext, useState } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { Checkbox } from "./checkbox.js";
+import { CheckboxContext } from "./checkbox-context.js";
+import { useCheckboxCardStyles } from "./style/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckboxCard = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCheckboxCardStyles();
+  const context = useContext(CheckboxContext);
+  const [checkboxIconState, setCheckboxIconState] = useState();
+  const isRibbonVariant = variant === 'ribbon';
+  const titleIsSemiBold = !!(isRibbonVariant || props.description);
+  const checkboxIconPlacement = props.checkboxIconPlacement ?? context.checkboxIconPlacement;
+  const isRibbonUncheckedDisabled = isRibbonVariant && checkboxIconState?.disabled && !checkboxIconState.checked;
+  const iconRender = useMemoizedFn(iconState => {
+    if (!iconState.checked) return null;
+    const borderColor = iconState.disabled ? theme.palette.brand4 : theme.palette.brand7;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.ribbon, {
+          borderColor,
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent'
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.checkIcon,
+        children: /*#__PURE__*/_jsx(CheckOutlined, {
+          size: 20,
+          color: theme.palette.white
+        })
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsx(Checkbox, {
+    ...props,
+    titleStyle: [titleIsSemiBold && theme.fonts.medium.size16, isRibbonUncheckedDisabled && {
+      color: theme.palette.fontGray5
+    }, props.titleStyle],
+    descriptionStyle: [!isRibbonVariant && {
+      color: theme.palette.fontGray3
+    }, isRibbonUncheckedDisabled && {
+      color: theme.palette.fontGray5
+    }, props.descriptionStyle],
+    iconRender: isRibbonVariant ? iconRender : props.iconRender,
+    checkboxIconPlacement: isRibbonVariant ? 'left' : checkboxIconPlacement ?? 'right',
+    onCheckboxIconStateChange: iconState => {
+      setCheckboxIconState(iconState);
+      props.onCheckboxIconStateChange?.(iconState);
+    },
+    style: [styles.checkbox, checkboxIconState?.checked && {
+      borderColor: checkboxIconState.disabled ? theme.palette.brand4 : theme.palette.brand7
+    }, props.style]
+  });
+};

package/dist/module/components/base/checkbox/checkbox-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const CheckboxContext = /*#__PURE__*/React.createContext({});