zkit-ui 1.0.6 → 2.0.1

package/src/ui/Button/README.md

@@ -5,7 +5,7 @@
 ## 基础用法
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 
 export function Demo() {
   return <Button onPress={() => {}}>确定</Button>;
@@ -15,7 +15,7 @@ export function Demo() {
 ## 外观语义
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 
 export function Demo() {
   return (
@@ -37,7 +37,7 @@ export function Demo() {
 ## 尺寸与布局
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 import { sp, wp } from 'zkit-tools';
 
 export function Demo() {
@@ -67,7 +67,7 @@ export function Demo() {
 ## 图标
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 import { wp } from 'zkit-tools';
 
 export function Demo() {
@@ -94,7 +94,7 @@ export function Demo() {
 ## 加载状态
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 
 export function Demo() {
   return (
@@ -114,7 +114,7 @@ export function Demo() {
 ## 精确覆盖
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 import { wp } from 'zkit-tools';
 
 export function Demo() {
@@ -139,7 +139,7 @@ export function Demo() {
 ## 渐变、阴影与按压反馈
 
 ```tsx
-import { Button } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
 
 export function Demo() {
   return (

package/src/ui/Checkbox/README.md

@@ -16,7 +16,7 @@ Checkbox 是三端一致的复选框组件，适合协议勾选、多选列表
 
 ```tsx
 import * as React from 'react';
-import { Checkbox } from 'zkit-ui';
+import { Checkbox } from 'zkit-ui/checkbox';
 
 export function Demo() {
   const [checked, setChecked] = React.useState(false);
@@ -51,7 +51,7 @@ const partiallyChecked = selected.length > 0 && !allChecked;
 ## CheckboxGroup
 
 ```tsx
-import { Checkbox, CheckboxGroup } from 'zkit-ui';
+import { Checkbox, CheckboxGroup } from 'zkit-ui/checkbox';
 import { wp } from 'zkit-tools';
 
 const options = [

package/src/ui/DatePicker/README.md

@@ -13,7 +13,8 @@ DatePicker 是日期语义组件，底层复用 Picker 的三端滚轮与 Sheet
 
 ```tsx
 import * as React from 'react';
-import { Button, DatePicker } from 'zkit-ui';
+import { Button } from 'zkit-ui/button';
+import { DatePicker } from 'zkit-ui/date-picker';
 
 export function Demo() {
   const [value, setValue] = React.useState<string | null>(null);

package/src/ui/DatePicker/index.tsx

@@ -10,6 +10,8 @@ import {
 import { useI18n } from '../../i18n/useI18n';
 import {
   buildDatePickerOptions,
+  createDatePickerOptionChildrenResolver,
+  createDatePickerOptionDisabledResolver,
   createDatePickerSelection,
   createDatePickerSelectionFromDate,
   DATE_PICKER_COLUMNS,
@@ -138,10 +140,19 @@ export const DatePicker = React.forwardRef<DatePickerHandle, DatePickerProps>(fu
   const committedValue = isValueControlled ? valueProp : innerValue;
 
   const bounds = React.useMemo(() => resolveDatePickerBounds(min, max), [max, min]);
-  const options = React.useMemo(
-    () => buildDatePickerOptions({ bounds, precision, isDateDisabled }),
+  const optionConfig = React.useMemo(
+    () => ({ bounds, precision, isDateDisabled }),
     [bounds, isDateDisabled, precision]
   );
+  const options = React.useMemo(() => buildDatePickerOptions(optionConfig), [optionConfig]);
+  const getDateOptionChildren = React.useMemo(
+    () => createDatePickerOptionChildrenResolver(optionConfig),
+    [optionConfig]
+  );
+  const isDateOptionDisabled = React.useMemo(
+    () => createDatePickerOptionDisabledResolver(optionConfig, getDateOptionChildren),
+    [getDateOptionChildren, optionConfig]
+  );
   const committedDate = React.useMemo(
     () => resolveCommittedDate(committedValue, bounds, precision),
     [bounds, committedValue, precision]
@@ -154,9 +165,15 @@ export const DatePicker = React.forwardRef<DatePickerHandle, DatePickerProps>(fu
   const committedSelection = React.useMemo(
     () =>
       committedDate
-        ? createDatePickerSelectionFromDate(committedDate, precision, options, labelFormat)
+        ? createDatePickerSelectionFromDate(
+            committedDate,
+            precision,
+            options,
+            labelFormat,
+            getDateOptionChildren
+          )
         : null,
-    [committedDate, labelFormat, options, precision]
+    [committedDate, getDateOptionChildren, labelFormat, options, precision]
   );
 
   const resolveSelection = React.useCallback(
@@ -281,6 +298,8 @@ export const DatePicker = React.forwardRef<DatePickerHandle, DatePickerProps>(fu
       emptyText={emptyText}
       formatLabel={formatPickerLabel}
       renderColumnHeader={handleRenderColumnHeader}
+      getOptionChildren={getDateOptionChildren}
+      isOptionDisabled={isDateOptionDisabled}
       maxColumns={getColumnCount(precision)}
       lazyContent={lazyContent}
       sheetHeight={sheetHeight}

package/src/ui/DatePicker/utils.ts

@@ -51,6 +51,18 @@ type BuildOptionsConfig = {
   isDateDisabled?: DatePickerProps['isDateDisabled'];
 };
 
+export type DatePickerOptionChildrenResolver = (
+  option: DatePickerOption,
+  index: number,
+  path: DatePickerOption[]
+) => readonly DatePickerOption[] | undefined;
+
+export type DatePickerOptionDisabledResolver = (
+  option: DatePickerOption,
+  index: number,
+  path: DatePickerOption[]
+) => boolean;
+
 function pad2(n: number) {
   return String(n).padStart(2, '0');
 }
@@ -261,11 +273,6 @@ function buildMonths(year: number, config: BuildOptionsConfig) {
         : false
     );
 
-    if (precision === 'day') {
-      option.children = buildDays(year, month, config);
-      option.disabled = option.children.length > 0 && option.children.every((child) => child.disabled);
-    }
-
     months.push(option);
   }
 
@@ -286,17 +293,81 @@ export function buildDatePickerOptions(config: BuildOptionsConfig) {
         : false
     );
 
-    if (precision !== 'year') {
-      option.children = buildMonths(year, config);
-      option.disabled = option.children.length > 0 && option.children.every((child) => child.disabled);
-    }
-
     years.push(option);
   }
 
   return years;
 }
 
+export function createDatePickerOptionChildrenResolver(
+  config: BuildOptionsConfig
+): DatePickerOptionChildrenResolver {
+  const cache = new Map<string, DatePickerOption[]>();
+
+  return (option) => {
+    if (option.column === 'year' && config.precision !== 'year') {
+      const key = `months:${option.year}`;
+      const cached = cache.get(key);
+      if (cached) return cached;
+
+      const months = buildMonths(option.year, config);
+      cache.set(key, months);
+      return months;
+    }
+
+    if (option.column === 'month' && config.precision === 'day' && option.month != null) {
+      const key = `days:${option.year}-${option.month}`;
+      const cached = cache.get(key);
+      if (cached) return cached;
+
+      const days = buildDays(option.year, option.month, config);
+      cache.set(key, days);
+      return days;
+    }
+
+    return [];
+  };
+}
+
+function getOptionPathKey(option: DatePickerOption) {
+  return `${option.column}:${option.year}-${option.month ?? 0}-${option.day ?? 0}`;
+}
+
+export function createDatePickerOptionDisabledResolver(
+  config: BuildOptionsConfig,
+  getOptionChildren: DatePickerOptionChildrenResolver
+): DatePickerOptionDisabledResolver {
+  const cache = new Map<string, boolean>();
+
+  const resolveOption = (
+    option: DatePickerOption,
+    index: number,
+    path: DatePickerOption[]
+  ): boolean => {
+    const key = getOptionPathKey(option);
+    const cached = cache.get(key);
+    if (cached != null) return cached;
+
+    let disabled = false;
+
+    if (option.column === config.precision) {
+      disabled =
+        option.disabled ??
+        resolveDisabled(optionDate(option), option, option.column, config.precision, config.isDateDisabled);
+    } else if (config.isDateDisabled) {
+      const children = getOptionChildren(option, index, path) ?? [];
+      disabled =
+        children.length > 0 &&
+        children.every((child, childIndex) => resolveOption(child, childIndex, [...path, child]));
+    }
+
+    cache.set(key, disabled);
+    return disabled;
+  };
+
+  return resolveOption;
+}
+
 function numberValues(values: PickerSelection<DatePickerOption>['values']) {
   return values.map((value) => Number(value)).filter((value) => Number.isFinite(value));
 }
@@ -348,11 +419,16 @@ export function createDatePickerSelection(
   };
 }
 
-function findOptionPath(options: DatePickerOption[], values: number[]) {
+function findOptionPath(
+  options: DatePickerOption[],
+  values: number[],
+  getOptionChildren?: DatePickerOptionChildrenResolver
+) {
   const items: DatePickerOption[] = [];
   const columns: DatePickerOption[][] = [];
   const indices: number[] = [];
   let current = options;
+  let path: DatePickerOption[] = [];
 
   for (const value of values) {
     columns.push(current);
@@ -364,7 +440,9 @@ function findOptionPath(options: DatePickerOption[], values: number[]) {
 
     items.push(item);
     indices.push(index);
-    current = Array.isArray(item.children) ? item.children : [];
+    const nextPath = [...path, item];
+    current = [...(getOptionChildren?.(item, index, nextPath) ?? item.children ?? [])];
+    path = nextPath;
   }
 
   return { items, columns, indices };
@@ -374,10 +452,11 @@ export function createDatePickerSelectionFromDate(
   date: Dayjs,
   precision: DatePickerPrecision,
   options: DatePickerOption[],
-  labelFormat?: DatePickerLabelFormat
+  labelFormat?: DatePickerLabelFormat,
+  getOptionChildren?: DatePickerOptionChildrenResolver
 ): DatePickerSelection {
   const values = pathFromDate(date, precision);
-  const { items, columns, indices } = findOptionPath(options, values);
+  const { items, columns, indices } = findOptionPath(options, values, getOptionChildren);
   const labels = values.map((value, index) => (index === 0 ? String(value) : pad2(value)));
   const base: DatePickerSelection = {
     value: formatDatePickerValue(date, precision),

package/src/ui/LinkedScroll/README.md

@@ -8,7 +8,8 @@
 
 ```tsx
 import { View } from 'react-native';
-import { LinkedScroll, Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
+import { LinkedScroll } from 'zkit-ui/linked-scroll';
 import { wp } from 'zkit-tools';
 
 const items = [

package/src/ui/Picker/README.md

@@ -11,7 +11,8 @@
 
 ```tsx
 import * as React from 'react';
-import { Picker, Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
+import { Picker } from 'zkit-ui/picker';
 
 const options = [
   { value: 'design', label: 'Design' },

package/src/ui/Radio/README.md

@@ -17,7 +17,8 @@ Radio 是三端一致的单选组件，适合互斥选项、设置项模式选
 
 ```tsx
 import * as React from 'react';
-import { Radio, RadioGroup, Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
+import { Radio, RadioGroup } from 'zkit-ui/radio';
 import { wp } from 'zkit-tools';
 
 type Density = 'compact' | 'comfortable' | 'spacious';

package/src/ui/Sheet/README.md

@@ -6,7 +6,9 @@
 
 ```tsx
 import * as React from 'react';
-import { Button, Sheet, Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
+import { Button } from 'zkit-ui/button';
+import { Sheet } from 'zkit-ui/sheet';
 
 export function Demo() {
   const [open, setOpen] = React.useState(false);

package/src/ui/SliderCaptcha/README.md

@@ -19,7 +19,7 @@
 
 ```tsx
 import * as React from 'react';
-import { SliderCaptcha, type SliderCaptchaChallenge } from 'zkit-ui';
+import { SliderCaptcha, type SliderCaptchaChallenge } from 'zkit-ui/slider-captcha';
 
 type LoginCaptchaChallenge = SliderCaptchaChallenge & {
   nonceStr: string;

package/src/ui/Switch/README.md

@@ -14,7 +14,7 @@ Switch 是布尔开关组件，适合“立即启用/停用某项设置”的场
 
 ```tsx
 import * as React from 'react';
-import { Switch } from 'zkit-ui';
+import { Switch } from 'zkit-ui/switch';
 
 export function Demo() {
   const [checked, setChecked] = React.useState(false);

package/src/ui/Text/README.md

@@ -17,7 +17,7 @@
 ## 基础用法
 
 ```tsx
-import { Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
 
 export function Demo() {
   return <Text>默认正文</Text>;
@@ -35,7 +35,7 @@ export function Demo() {
 ## 排版语义
 
 ```tsx
-import { Text } from 'zkit-ui';
+import { Text } from 'zkit-ui/text';
 
 export function Demo() {
   return (

package/src/ui/TextInput/README.md

@@ -17,7 +17,7 @@
 
 ```tsx
 import * as React from 'react';
-import { TextInput } from 'zkit-ui';
+import { TextInput } from 'zkit-ui/text-input';
 
 export function Demo() {
   const [value, setValue] = React.useState('');
@@ -36,7 +36,7 @@ export function Demo() {
 ## 原生薄封装
 
 ```tsx
-import { TextInputPrimitive } from 'zkit-ui';
+import { TextInputPrimitive } from 'zkit-ui/text-input';
 import { wp } from 'zkit-tools';
 
 export function Demo() {
@@ -54,7 +54,7 @@ export function Demo() {
 ## 非受控
 
 ```tsx
-import { TextInput } from 'zkit-ui';
+import { TextInput } from 'zkit-ui/text-input';
 
 export function Demo() {
   return (
@@ -72,7 +72,7 @@ export function Demo() {
 ## 描述、错误和计数
 
 ```tsx
-import { TextInput } from 'zkit-ui';
+import { TextInput } from 'zkit-ui/text-input';
 
 export function Demo() {
   return (
@@ -95,7 +95,7 @@ export function Demo() {
 ## 前后缀与清除按钮
 
 ```tsx
-import { TextInput } from 'zkit-ui';
+import { TextInput } from 'zkit-ui/text-input';
 
 export function Demo() {
   return (
@@ -116,7 +116,7 @@ export function Demo() {
 ## 外观
 
 ```tsx
-import { TextInput } from 'zkit-ui';
+import { TextInput } from 'zkit-ui/text-input';
 import { wp } from 'zkit-tools';
 
 export function Demo() {

package/src/ui/WheelColumn/README.md

@@ -14,7 +14,7 @@
 ## 基础用法
 
 ```tsx
-import { WheelColumn, type WheelColumnOption } from 'zkit-ui';
+import { WheelColumn, type WheelColumnOption } from 'zkit-ui/wheel-column';
 import { wp } from 'zkit-tools';
 
 const options: WheelColumnOption[] = [