@hanwenbo/x-taro-ui 0.0.1

package/lib/components/cascaderView/cascaderView.js

@@ -0,0 +1,683 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/cascaderView/cascaderView.tsx
+var cascaderView_exports = {};
+__export(cascaderView_exports, {
+  default: () => cascaderView_default
+});
+module.exports = __toCommonJS(cascaderView_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_iconSlot = require("../../utils/iconSlot");
+var import_locale = require("../../utils/locale");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_shared = require("../cascadePicker/shared");
+var sizeTokens = {
+  mini: {
+    height: 320,
+    tabPadding: "4px 8px",
+    tabFontSize: 12,
+    tabLineHeight: 16,
+    labelFontSize: 11,
+    labelLineHeight: 16,
+    optionPadding: "8px 12px",
+    optionFontSize: 14,
+    optionLineHeight: 20,
+    optionMinHeight: 36,
+    iconSize: 14,
+    shellPadding: 12,
+    columnGap: 8
+  },
+  small: {
+    height: 320,
+    tabPadding: "6px 10px",
+    tabFontSize: 14,
+    tabLineHeight: 20,
+    labelFontSize: 12,
+    labelLineHeight: 16,
+    optionPadding: "10px 14px",
+    optionFontSize: 14,
+    optionLineHeight: 20,
+    optionMinHeight: 40,
+    iconSize: 16,
+    shellPadding: 16,
+    columnGap: 8
+  },
+  middle: {
+    height: 320,
+    tabPadding: "8px 12px",
+    tabFontSize: 14,
+    tabLineHeight: 20,
+    labelFontSize: 12,
+    labelLineHeight: 16,
+    optionPadding: "12px 16px",
+    optionFontSize: 16,
+    optionLineHeight: 24,
+    optionMinHeight: 44,
+    iconSize: 16,
+    shellPadding: 20,
+    columnGap: 12
+  },
+  large: {
+    height: 320,
+    tabPadding: "10px 16px",
+    tabFontSize: 16,
+    tabLineHeight: 24,
+    labelFontSize: 14,
+    labelLineHeight: 20,
+    optionPadding: "14px 18px",
+    optionFontSize: 16,
+    optionLineHeight: 24,
+    optionMinHeight: 48,
+    iconSize: 20,
+    shellPadding: 20,
+    columnGap: 12
+  }
+};
+var renderNode = (content, textStyle) => {
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style: textStyle }, content);
+  }
+  return content;
+};
+var pressableRowStyle = {
+  userSelect: "none",
+  WebkitUserSelect: "none",
+  cursor: "pointer"
+};
+var buildCascadeSelection = (currentValue, depth, nextValue) => {
+  const nextSelection = currentValue.slice(0, depth);
+  nextSelection[depth] = nextValue;
+  return nextSelection;
+};
+var CascaderView = ({
+  options = [],
+  value,
+  defaultValue = [],
+  columnCount,
+  columnTitles = [],
+  placeholder: placeholderProp,
+  emptyText = "暂无选项",
+  layout = "tabs",
+  showBreadcrumb,
+  disabled = false,
+  onChange,
+  onTabsChange,
+  activeIcon,
+  height: heightProp,
+  size: sizeProp,
+  children,
+  className,
+  style
+}) => {
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const size = sizeProp ?? config.size;
+  const tokens = sizeTokens[size];
+  const height = heightProp ?? tokens.height;
+  const placeholder = placeholderProp ?? (0, import_locale.resolveLocaleText)(config.locale, "picker.placeholder", "请选择");
+  const isDisabled = Boolean(disabled || config.disabled);
+  const visualTokens = {
+    panelSurface: `var(--x-cascader-panel-surface, ${colors.popover})`,
+    panelRadius: `var(--x-cascader-panel-radius, ${radius.xl}px)`,
+    title: `var(--x-cascader-title, ${colors.foreground})`,
+    actionRadius: `var(--x-cascader-action-radius, ${radius.md}px)`,
+    actionPrimary: `var(--x-cascader-action-primary, ${colors.primary})`,
+    columnDivider: `var(--x-cascader-column-divider, ${colors.border})`,
+    columnSurface: `var(--x-cascader-column-surface, ${colors.popover})`,
+    columnLabel: `var(--x-cascader-column-label, ${colors["muted-foreground"]})`,
+    optionRadius: `var(--x-cascader-option-radius, ${radius.md}px)`,
+    optionForeground: `var(--x-cascader-option-foreground, ${colors["popover-foreground"]})`,
+    optionSelectedSurface: `var(--x-cascader-option-selected-surface, ${colors.accent})`,
+    optionSelectedForeground: `var(--x-cascader-option-selected-foreground, ${colors["accent-foreground"]})`,
+    // Mini-program SVG data URIs cannot resolve CSS variables, so icons need concrete colors.
+    selectedIcon: colors["accent-foreground"],
+    chevronIcon: colors["muted-foreground"]
+  };
+  const resolvedShowBreadcrumb = showBreadcrumb ?? layout === "columns";
+  const [internalValue, setInternalValue] = (0, import_react.useState)(
+    () => (0, import_shared.sanitizeCascadeValue)(options, defaultValue)
+  );
+  const selectedValue = (0, import_react.useMemo)(
+    () => (0, import_shared.sanitizeCascadeValue)(options, value !== void 0 ? value : internalValue),
+    [internalValue, options, value]
+  );
+  const selectedOptions = (0, import_react.useMemo)(
+    () => (0, import_shared.getCascadeSelectedOptions)(options, selectedValue),
+    [options, selectedValue]
+  );
+  const listColumns = (0, import_react.useMemo)(() => {
+    const nextColumns = (0, import_shared.getCascadeColumns)(options, selectedValue);
+    return columnCount ? nextColumns.slice(0, columnCount) : nextColumns;
+  }, [columnCount, options, selectedValue]);
+  const handleValueChange = (nextValue) => {
+    const sanitizedValue = (0, import_shared.sanitizeCascadeValue)(options, nextValue);
+    if (value === void 0) {
+      setInternalValue(sanitizedValue);
+    }
+    onChange == null ? void 0 : onChange(sanitizedValue, (0, import_shared.getCascadeValueExtend)(options, sanitizedValue));
+  };
+  if (options.length === 0) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-cascader-view`,
+          `${config.prefixCls}-cascader-view--${layout}`,
+          className
+        ),
+        style: {
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: visualTokens.columnSurface,
+          ...style
+        },
+        "data-slot": "cascader-view"
+      },
+      children ?? /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            color: visualTokens.columnLabel,
+            fontSize: tokens.optionFontSize,
+            lineHeight: `${tokens.optionLineHeight}px`
+          }
+        },
+        emptyText
+      )
+    );
+  }
+  if (layout === "columns") {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-cascader-view`,
+          `${config.prefixCls}-cascader-view--columns`,
+          className
+        ),
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          padding: tokens.shellPadding,
+          borderRadius: visualTokens.panelRadius,
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: visualTokens.columnDivider,
+          backgroundColor: visualTokens.columnSurface,
+          opacity: isDisabled ? 0.6 : 1,
+          ...style
+        },
+        "data-slot": "cascader-view"
+      },
+      resolvedShowBreadcrumb ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "column", gap: 6 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            fontSize: tokens.labelFontSize,
+            lineHeight: `${tokens.labelLineHeight}px`,
+            color: visualTokens.columnLabel
+          }
+        },
+        "已选路径"
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            fontSize: tokens.optionFontSize,
+            lineHeight: `${tokens.optionLineHeight}px`,
+            fontWeight: "600",
+            color: visualTokens.title
+          }
+        },
+        (0, import_shared.getCascadeDisplayLabel)(selectedOptions) || "未选择"
+      )) : null,
+      /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "row", gap: tokens.columnGap } }, listColumns.map((column, level) => /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: level,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            borderRadius: visualTokens.actionRadius,
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: visualTokens.columnDivider,
+            backgroundColor: visualTokens.panelSurface,
+            overflow: "hidden"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            style: {
+              padding: "12px 14px",
+              borderBottomWidth: 1,
+              borderBottomStyle: "solid",
+              borderBottomColor: visualTokens.columnDivider
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.Text,
+            {
+              style: {
+                fontSize: tokens.labelFontSize,
+                lineHeight: `${tokens.labelLineHeight}px`,
+                fontWeight: "600",
+                color: visualTokens.columnLabel
+              }
+            },
+            columnTitles[level] ?? `层级 ${level + 1}`
+          )
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.ScrollView,
+          {
+            scrollY: true,
+            style: { maxHeight: typeof height === "number" ? height - 120 : 260 }
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "column", padding: 8, gap: 6 } }, column.map((option) => {
+            const isSelected = selectedValue[level] === option.value;
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                key: String(option.value),
+                className: (0, import_utils.classNames)(
+                  `${config.prefixCls}-cascader-view__option`,
+                  isSelected && `${config.prefixCls}-cascader-view__option--selected`,
+                  option.disabled && `${config.prefixCls}-cascader-view__option--disabled`
+                ),
+                "data-slot": "cascader-option",
+                "data-selected": isSelected ? "true" : "false",
+                "data-disabled": option.disabled ? "true" : "false",
+                onClick: () => {
+                  if (!isDisabled && !option.disabled) {
+                    handleValueChange(
+                      buildCascadeSelection(selectedValue, level, option.value)
+                    );
+                  }
+                },
+                style: {
+                  ...pressableRowStyle,
+                  minHeight: tokens.optionMinHeight,
+                  boxSizing: "border-box",
+                  padding: tokens.optionPadding,
+                  borderRadius: visualTokens.optionRadius,
+                  backgroundColor: isSelected ? visualTokens.optionSelectedSurface : "transparent",
+                  opacity: option.disabled ? 0.45 : 1
+                },
+                role: "option",
+                ariaRole: "option",
+                ariaLabel: `${(0, import_shared.getNodeText)(option.label)}${isSelected ? "，已选择" : ""}${option.disabled ? "，已禁用" : ""}`
+              },
+              renderNode(option.label, {
+                display: "block",
+                fontSize: tokens.optionFontSize,
+                lineHeight: `${tokens.optionLineHeight}px`,
+                fontWeight: isSelected ? "600" : "500",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: isSelected ? visualTokens.optionSelectedForeground : visualTokens.optionForeground
+              }),
+              option.description ? renderNode(option.description, {
+                display: "block",
+                marginTop: 4,
+                fontSize: tokens.labelFontSize,
+                lineHeight: `${tokens.labelLineHeight}px`,
+                color: visualTokens.columnLabel
+              }) : null
+            );
+          }))
+        )
+      )))
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    TabsCascaderView,
+    {
+      options,
+      selectedValue,
+      columnCount,
+      columnTitles,
+      placeholder,
+      emptyText,
+      showBreadcrumb: resolvedShowBreadcrumb,
+      disabled: isDisabled,
+      onTabsChange,
+      activeIcon,
+      height,
+      tokens,
+      visualTokens,
+      prefixCls: config.prefixCls,
+      className,
+      style,
+      onSelect: handleValueChange
+    }
+  );
+};
+var TabsCascaderView = ({
+  options,
+  selectedValue,
+  columnCount,
+  columnTitles = [],
+  placeholder = "请选择",
+  emptyText = "暂无选项",
+  showBreadcrumb,
+  disabled,
+  onTabsChange,
+  activeIcon,
+  height,
+  tokens,
+  visualTokens,
+  prefixCls,
+  className,
+  style,
+  onSelect
+}) => {
+  const [tabActiveIndex, setTabActiveIndex] = (0, import_react.useState)(0);
+  const columns = (0, import_react.useMemo)(() => {
+    const nextColumns = (0, import_shared.getCascadeTabColumns)(options, selectedValue);
+    return columnCount ? nextColumns.slice(0, columnCount) : nextColumns;
+  }, [columnCount, options, selectedValue]);
+  (0, import_react.useEffect)(() => {
+    setTabActiveIndex(Math.max(columns.length - 1, 0));
+  }, [columns.length]);
+  (0, import_react.useEffect)(() => {
+    onTabsChange == null ? void 0 : onTabsChange(tabActiveIndex);
+  }, [onTabsChange, tabActiveIndex]);
+  const resolvePlaceholder = (0, import_react.useCallback)(
+    (index) => {
+      if (typeof placeholder === "function") {
+        return placeholder(index);
+      }
+      const columnTitle = columnTitles == null ? void 0 : columnTitles[index];
+      if (columnTitle !== void 0) {
+        return (0, import_shared.getNodeText)(columnTitle);
+      }
+      return (0, import_shared.getNodeText)(placeholder);
+    },
+    [columnTitles, placeholder]
+  );
+  const activeColumn = columns[Math.min(tabActiveIndex, columns.length - 1)] ?? {
+    options: [],
+    selected: null
+  };
+  const autoHeight = height === "auto";
+  const handleSelect = (option, depth) => {
+    var _a;
+    if (disabled || option.disabled) {
+      return;
+    }
+    const nextValue = buildCascadeSelection(selectedValue, depth, option.value);
+    onSelect(nextValue);
+    setTabActiveIndex(((_a = option.children) == null ? void 0 : _a.length) ? depth + 1 : depth);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-cascader-view`,
+        `${prefixCls}-cascader-view--tabs`,
+        className
+      ),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        ...autoHeight ? { maxHeight: tokens.height } : { height },
+        backgroundColor: visualTokens.columnSurface,
+        opacity: disabled ? 0.6 : 1,
+        ...style
+      },
+      "data-slot": "cascader-view"
+    },
+    showBreadcrumb ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        style: {
+          padding: "12px 16px 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: 6
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            fontSize: tokens.labelFontSize,
+            lineHeight: `${tokens.labelLineHeight}px`,
+            color: visualTokens.columnLabel
+          }
+        },
+        "已选路径"
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            fontSize: tokens.optionFontSize,
+            lineHeight: `${tokens.optionLineHeight}px`,
+            fontWeight: "600",
+            color: visualTokens.title
+          }
+        },
+        columns.map((column) => column.selected ? (0, import_shared.getNodeText)(column.selected.label) : "").filter(Boolean).join(" / ") || "未选择"
+      )
+    ) : null,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        style: {
+          borderBottomWidth: 1,
+          borderBottomStyle: "solid",
+          borderBottomColor: visualTokens.columnDivider,
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.ScrollView, { scrollX: true, style: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          role: "tablist",
+          ariaRole: "tablist",
+          className: `${prefixCls}-cascader-view__tabs`,
+          "data-slot": "cascader-tabs",
+          style: { display: "flex", flexDirection: "row", gap: 4, paddingBottom: 8 }
+        },
+        columns.map((column, index) => {
+          var _a, _b;
+          const active = index === tabActiveIndex;
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: index,
+              className: (0, import_utils.classNames)(
+                `${prefixCls}-cascader-view__tab`,
+                active && `${prefixCls}-cascader-view__tab--active`
+              ),
+              "data-slot": "cascader-tab",
+              "data-active": active ? "true" : "false",
+              onClick: () => setTabActiveIndex(index),
+              style: {
+                ...pressableRowStyle,
+                flexShrink: 0,
+                padding: tokens.tabPadding,
+                borderRadius: visualTokens.optionRadius,
+                borderWidth: 1,
+                borderStyle: "solid",
+                borderColor: active ? visualTokens.actionPrimary : "transparent",
+                backgroundColor: active ? visualTokens.optionSelectedSurface : "transparent"
+              },
+              role: "tab",
+              ariaRole: "tab",
+              ariaLabel: (0, import_shared.getNodeText)(((_a = column.selected) == null ? void 0 : _a.label) ?? resolvePlaceholder(index))
+            },
+            renderNode(((_b = column.selected) == null ? void 0 : _b.label) ?? resolvePlaceholder(index), {
+              fontSize: tokens.tabFontSize,
+              lineHeight: `${tokens.tabLineHeight}px`,
+              color: active ? visualTokens.optionSelectedForeground : visualTokens.columnLabel,
+              fontWeight: active ? "500" : "400"
+            })
+          );
+        })
+      ))
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        style: {
+          flex: autoHeight ? "none" : 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8,
+          paddingBottom: 12
+        }
+      },
+      activeColumn.selected ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.Text,
+        {
+          style: {
+            marginBottom: 8,
+            paddingLeft: 4,
+            fontSize: tokens.labelFontSize,
+            lineHeight: `${tokens.labelLineHeight}px`,
+            fontWeight: "500",
+            color: visualTokens.columnLabel
+          }
+        },
+        (0, import_shared.getNodeText)(activeColumn.selected.label)
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.ScrollView,
+        {
+          scrollY: true,
+          style: {
+            flex: autoHeight ? "none" : 1,
+            minHeight: 0,
+            maxHeight: typeof height === "number" ? height - 120 : tokens.height - 104
+          }
+        },
+        activeColumn.options.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            style: {
+              minHeight: 120,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          },
+          renderNode(emptyText, {
+            fontSize: tokens.labelFontSize,
+            lineHeight: `${tokens.labelLineHeight}px`,
+            color: visualTokens.columnLabel,
+            textAlign: "center"
+          })
+        ) : /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "column", gap: 8 } }, activeColumn.options.map((option) => {
+          var _a;
+          const selected = selectedValue[tabActiveIndex] === option.value;
+          const hasChildren = Boolean((_a = option.children) == null ? void 0 : _a.length);
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              key: String(option.value),
+              className: (0, import_utils.classNames)(
+                `${prefixCls}-cascader-view__option`,
+                selected && `${prefixCls}-cascader-view__option--selected`,
+                option.disabled && `${prefixCls}-cascader-view__option--disabled`
+              ),
+              "data-slot": "cascader-option",
+              "data-selected": selected ? "true" : "false",
+              "data-disabled": option.disabled ? "true" : "false",
+              onClick: () => handleSelect(option, tabActiveIndex),
+              style: {
+                ...pressableRowStyle,
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 8,
+                minHeight: tokens.optionMinHeight,
+                boxSizing: "border-box",
+                padding: tokens.optionPadding,
+                borderRadius: visualTokens.optionRadius,
+                backgroundColor: selected ? visualTokens.optionSelectedSurface : "transparent",
+                opacity: option.disabled ? 0.5 : 1
+              },
+              role: "option",
+              ariaRole: "option",
+              ariaLabel: `${(0, import_shared.getNodeText)(option.label)}${selected ? "，已选择" : ""}${option.disabled ? "，已禁用" : ""}`
+            },
+            /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { flex: 1, minWidth: 0 } }, renderNode(option.label, {
+              display: "block",
+              fontSize: tokens.optionFontSize,
+              lineHeight: `${tokens.optionLineHeight}px`,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              color: selected ? visualTokens.optionSelectedForeground : visualTokens.optionForeground
+            }), option.description ? renderNode(option.description, {
+              display: "block",
+              marginTop: 4,
+              fontSize: tokens.labelFontSize,
+              lineHeight: `${tokens.labelLineHeight}px`,
+              color: visualTokens.columnLabel
+            }) : null),
+            selected ? activeIcon ?? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: (0, import_iconSlot.iconSlot)(tokens.iconSize) }, /* @__PURE__ */ import_react.default.createElement(
+              import_icon.Icon,
+              {
+                name: "Check",
+                size: tokens.iconSize,
+                color: visualTokens.selectedIcon
+              }
+            )) : hasChildren ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: (0, import_iconSlot.iconSlot)(tokens.iconSize) }, /* @__PURE__ */ import_react.default.createElement(
+              import_icon.Icon,
+              {
+                name: "ChevronRight",
+                size: tokens.iconSize,
+                color: visualTokens.chevronIcon
+              }
+            )) : null
+          );
+        }))
+      )
+    )
+  );
+};
+var cascaderView_default = CascaderView;

package/lib/components/cascaderView/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as CascaderView } from './cascaderView';
+export { default } from './cascaderView';
+//# sourceMappingURL=index.d.ts.map