@hanwenbo/x-taro-ui 0.0.1

package/es/components/kbd/kbd.js

@@ -0,0 +1,199 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { Text, View } from '@tarojs/components';
+import { useTheme, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { useSize } from "../configProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MOBILE_ROOT_REM_SCALE = 14 / 16;
+var mobileMetric = function mobileMetric(value) {
+  return value * MOBILE_ROOT_REM_SCALE;
+};
+var KBD_FONT_FAMILY = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace';
+var KBD_TRANSITION = 'color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1)';
+var sizeMap = {
+  mini: {
+    height: mobileMetric(20),
+    minWidth: mobileMetric(20),
+    paddingHorizontal: mobileMetric(4),
+    fontSize: 10,
+    lineHeight: 10 * (11 / 7)
+  },
+  small: {
+    height: mobileMetric(24),
+    minWidth: mobileMetric(24),
+    paddingHorizontal: mobileMetric(6),
+    fontSize: 11,
+    lineHeight: 11 * (11 / 7)
+  },
+  middle: {
+    height: mobileMetric(28),
+    minWidth: mobileMetric(28),
+    paddingHorizontal: mobileMetric(8),
+    fontSize: 12,
+    lineHeight: 18
+  },
+  large: {
+    height: mobileMetric(32),
+    minWidth: mobileMetric(32),
+    paddingHorizontal: mobileMetric(10),
+    fontSize: 14,
+    lineHeight: 20
+  }
+};
+var groupGapMap = {
+  default: mobileMetric(4),
+  compact: mobileMetric(2),
+  wide: mobileMetric(8)
+};
+function resolveVariant(variant, tone) {
+  if (variant) return variant;
+  if (tone === 'muted') return 'subtle';
+  return 'default';
+}
+export var Kbd = function Kbd(_ref) {
+  var _ref2, _ref3;
+  var children = _ref.children,
+    keys = _ref.keys,
+    separator = _ref.separator,
+    joiner = _ref.joiner,
+    propSize = _ref.size,
+    variant = _ref.variant,
+    tone = _ref.tone,
+    bordered = _ref.bordered,
+    keyStyle = _ref.keyStyle,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$testID = _ref.testID,
+    testID = _ref$testID === void 0 ? 'kbd' : _ref$testID;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var providerSize = useSize();
+  var resolvedSize = (_ref2 = propSize !== null && propSize !== void 0 ? propSize : providerSize) !== null && _ref2 !== void 0 ? _ref2 : 'middle';
+  var resolvedVariant = resolveVariant(variant, tone);
+  var resolvedSeparator = (_ref3 = separator !== null && separator !== void 0 ? separator : joiner) !== null && _ref3 !== void 0 ? _ref3 : '+';
+  var metrics = sizeMap[resolvedSize];
+  var keyNodes = keys !== null && keys !== void 0 && keys.length ? keys : children != null ? [children] : [];
+  var variantMap = {
+    default: {
+      backgroundColor: withOpacity(theme.colors.muted, 0.35),
+      borderColor: theme.colors.border,
+      color: theme.colors['muted-foreground']
+    },
+    subtle: {
+      backgroundColor: withOpacity(theme.colors.muted, 0.2),
+      borderColor: withOpacity(theme.colors.border, 0.7),
+      color: theme.colors['muted-foreground']
+    },
+    outline: {
+      backgroundColor: theme.colors.background,
+      borderColor: theme.colors.border,
+      color: theme.colors.foreground
+    }
+  };
+  var colors = variantMap[resolvedVariant];
+  var renderKey = function renderKey(content, index) {
+    return /*#__PURE__*/_jsx(View, {
+      className: classNames('x-kbd__key', className),
+      "data-slot": "kbd",
+      "data-size": resolvedSize,
+      "data-variant": resolvedVariant,
+      "data-testid": keyNodes.length === 1 ? testID : "".concat(testID, "-").concat(index),
+      style: _objectSpread(_objectSpread({
+        height: metrics.height,
+        minWidth: metrics.minWidth,
+        paddingLeft: metrics.paddingHorizontal,
+        paddingRight: metrics.paddingHorizontal,
+        boxSizing: 'border-box',
+        flexShrink: 0,
+        display: 'inline-flex',
+        width: 'fit-content',
+        maxWidth: '100%',
+        alignSelf: 'flex-start',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'var(--x-kbd-radius)',
+        borderWidth: bordered === false ? 0 : 1,
+        borderStyle: 'solid',
+        borderColor: colors.borderColor,
+        backgroundColor: colors.backgroundColor,
+        boxShadow: 'none',
+        transition: KBD_TRANSITION
+      }, style), keyStyle),
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          fontSize: metrics.fontSize,
+          lineHeight: "".concat(metrics.lineHeight, "px"),
+          fontWeight: '500',
+          fontFamily: KBD_FONT_FAMILY,
+          color: colors.color,
+          whiteSpace: 'nowrap'
+        },
+        children: content
+      })
+    }, "key-".concat(index));
+  };
+  if (keyNodes.length <= 1) {
+    return keyNodes.length === 1 ? renderKey(keyNodes[0], 0) : null;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    className: "x-kbd__root",
+    "data-slot": "kbd-root",
+    "data-testid": testID,
+    style: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      flexShrink: 0,
+      gap: mobileMetric(4)
+    },
+    children: keyNodes.map(function (keyNode, index) {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [index > 0 ? /*#__PURE__*/_jsx(Text, {
+          className: "x-kbd__separator",
+          "data-slot": "kbd-separator",
+          style: {
+            fontSize: 14,
+            lineHeight: '22px',
+            color: theme.colors['muted-foreground']
+          },
+          children: resolvedSeparator
+        }) : null, renderKey(keyNode, index)]
+      }, "".concat(String(keyNode), "-").concat(index));
+    })
+  });
+};
+Kbd.displayName = 'Kbd';
+export var KbdGroup = function KbdGroup(_ref4) {
+  var children = _ref4.children,
+    _ref4$separator = _ref4.separator,
+    separator = _ref4$separator === void 0 ? 'default' : _ref4$separator,
+    className = _ref4.className,
+    style = _ref4.style,
+    _ref4$testID = _ref4.testID,
+    testID = _ref4$testID === void 0 ? 'kbd-group' : _ref4$testID;
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-kbd-group', className),
+    "data-slot": "kbd-group",
+    "data-separator": separator,
+    "data-testid": testID,
+    style: _objectSpread({
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      flexShrink: 0,
+      gap: groupGapMap[separator]
+    }, style),
+    children: children
+  });
+};
+KbdGroup.displayName = 'KbdGroup';
+export default Kbd;

package/es/components/kbd/types.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export declare type KbdSize = 'mini' | 'small' | 'middle' | 'large';
+export declare type KbdVariant = 'default' | 'subtle' | 'outline';
+export declare type KbdGroupSeparator = 'default' | 'compact' | 'wide';
+/** @deprecated Use KbdVariant through the variant prop. */
+export declare type KbdTone = 'default' | 'muted' | 'primary';
+export interface KbdProps {
+    /** Keyboard key content. */
+    children?: ReactNode;
+    /** Multiple keys for shortcut display. */
+    keys?: Array<string | number>;
+    /** Separator rendered between multiple keys. */
+    separator?: ReactNode;
+    /** @deprecated Use separator. */
+    joiner?: ReactNode;
+    /** Visual size aligned with x-mobile-ui. */
+    size?: KbdSize;
+    /** Visual variant aligned with x-mobile-ui. */
+    variant?: KbdVariant;
+    /** @deprecated Use variant. */
+    tone?: KbdTone;
+    /** @deprecated Variants always render their canonical border. */
+    bordered?: boolean;
+    /** Per-key styles. */
+    keyStyle?: React.CSSProperties;
+    className?: string;
+    style?: React.CSSProperties;
+    testID?: string;
+}
+export interface KbdGroupProps {
+    children?: ReactNode;
+    /** Spacing density between child keys. */
+    separator?: KbdGroupSeparator;
+    className?: string;
+    style?: React.CSSProperties;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/kbd/types.js

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

package/es/components/layout/index.d.ts

@@ -0,0 +1,5 @@
+export { Layout, Row, Col } from './layout';
+export { default } from './layout';
+export type { LayoutProps } from './types';
+export type { ColProps, LayoutDirection, LayoutRegionProps, ResponsiveSpan, RowProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/layout/index.js

@@ -0,0 +1,2 @@
+export { Layout, Row, Col } from "./layout";
+export { default } from "./layout";

package/es/components/layout/layout.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ColProps, LayoutProps, LayoutRegionProps, RowProps } from './types';
+declare const LayoutHeader: React.FC<LayoutRegionProps>;
+declare const LayoutContent: React.FC<LayoutRegionProps>;
+declare const LayoutSider: React.FC<LayoutRegionProps>;
+declare const LayoutFooter: React.FC<LayoutRegionProps>;
+declare type LayoutComponent = React.FC<LayoutProps> & {
+    Header: typeof LayoutHeader;
+    Content: typeof LayoutContent;
+    Sider: typeof LayoutSider;
+    Footer: typeof LayoutFooter;
+};
+export declare const Layout: LayoutComponent;
+export declare const Row: React.FC<RowProps>;
+export declare const Col: React.FC<ColProps>;
+export default Layout;
+//# sourceMappingURL=layout.d.ts.map

package/es/components/layout/layout.js

@@ -0,0 +1,244 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React from 'react';
+import { View } from '@tarojs/components';
+import { classNames } from "../../utils";
+import { toLength } from "../_shared/render";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function normalizeFlexAlign(value) {
+  if (!value) return undefined;
+  if (value === 'top' || value === 'start') return 'flex-start';
+  if (value === 'bottom' || value === 'end') return 'flex-end';
+  if (value === 'middle') return 'center';
+  if (value === 'between') return 'space-between';
+  if (value === 'around') return 'space-around';
+  return value;
+}
+function resolveResponsiveSpan(span, responsive) {
+  if (span !== undefined) return span;
+  var candidates = [responsive.xxl, responsive.xl, responsive.lg, responsive.md, responsive.sm, responsive.xs];
+  for (var _i = 0, _candidates = candidates; _i < _candidates.length; _i++) {
+    var candidate = _candidates[_i];
+    if (typeof candidate === 'number') return candidate;
+    if (candidate && _typeof(candidate) === 'object' && candidate.span !== undefined) {
+      return candidate.span;
+    }
+  }
+  return undefined;
+}
+var LayoutRegion = function LayoutRegion(_ref) {
+  var name = _ref.name,
+    defaultFlex = _ref.defaultFlex,
+    width = _ref.width,
+    theme = _ref.theme,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    testID = _ref.testID;
+  var isSider = name === 'sider';
+  var isContent = name === 'content';
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames("x-layout-".concat(name), className),
+    "data-slot": "layout-".concat(name),
+    "data-layout-theme": theme,
+    "data-testid": testID,
+    style: _objectSpread({
+      minHeight: 0,
+      minWidth: isContent ? 0 : undefined,
+      flex: defaultFlex,
+      flexShrink: isSider || name === 'header' || name === 'footer' ? 0 : undefined,
+      width: isSider ? toLength(width) : undefined
+    }, style),
+    children: children
+  });
+};
+var LayoutHeader = function LayoutHeader(props) {
+  return /*#__PURE__*/_jsx(LayoutRegion, _objectSpread(_objectSpread({}, props), {}, {
+    name: "header"
+  }));
+};
+var LayoutContent = function LayoutContent(props) {
+  return /*#__PURE__*/_jsx(LayoutRegion, _objectSpread(_objectSpread({}, props), {}, {
+    name: "content",
+    defaultFlex: 1
+  }));
+};
+var LayoutSider = function LayoutSider(props) {
+  return /*#__PURE__*/_jsx(LayoutRegion, _objectSpread(_objectSpread({}, props), {}, {
+    name: "sider"
+  }));
+};
+var LayoutFooter = function LayoutFooter(props) {
+  return /*#__PURE__*/_jsx(LayoutRegion, _objectSpread(_objectSpread({}, props), {}, {
+    name: "footer"
+  }));
+};
+LayoutHeader.displayName = 'Layout.Header';
+LayoutContent.displayName = 'Layout.Content';
+LayoutSider.displayName = 'Layout.Sider';
+LayoutFooter.displayName = 'Layout.Footer';
+export var Layout = function Layout(_ref2) {
+  var direction = _ref2.direction,
+    header = _ref2.header,
+    sider = _ref2.sider,
+    footer = _ref2.footer,
+    _ref2$gap = _ref2.gap,
+    gap = _ref2$gap === void 0 ? 0 : _ref2$gap,
+    _ref2$fullHeight = _ref2.fullHeight,
+    fullHeight = _ref2$fullHeight === void 0 ? false : _ref2$fullHeight,
+    children = _ref2.children,
+    className = _ref2.className,
+    style = _ref2.style,
+    testID = _ref2.testID;
+  var hasConvenienceRegions = header !== undefined || sider !== undefined || footer !== undefined;
+  var resolvedDirection = direction !== null && direction !== void 0 ? direction : hasConvenienceRegions && (header !== undefined || footer !== undefined) ? 'vertical' : 'horizontal';
+  var isHorizontal = resolvedDirection === 'horizontal';
+  var sharedContainerStyle = {
+    display: 'flex',
+    minHeight: 0,
+    minWidth: 0,
+    gap: toLength(gap)
+  };
+  var content = children;
+  if (hasConvenienceRegions) {
+    content = isHorizontal ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [sider !== undefined ? /*#__PURE__*/_jsx(LayoutSider, {
+        children: sider
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        "data-slot": "layout-main",
+        style: _objectSpread(_objectSpread({}, sharedContainerStyle), {}, {
+          display: 'flex',
+          flex: 1,
+          flexDirection: 'column'
+        }),
+        children: [header !== undefined ? /*#__PURE__*/_jsx(LayoutHeader, {
+          children: header
+        }) : null, /*#__PURE__*/_jsx(LayoutContent, {
+          children: children
+        }), footer !== undefined ? /*#__PURE__*/_jsx(LayoutFooter, {
+          children: footer
+        }) : null]
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [header !== undefined ? /*#__PURE__*/_jsx(LayoutHeader, {
+        children: header
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        "data-slot": "layout-main",
+        style: _objectSpread(_objectSpread({}, sharedContainerStyle), {}, {
+          display: 'flex',
+          flex: 1,
+          flexDirection: 'row'
+        }),
+        children: [sider !== undefined ? /*#__PURE__*/_jsx(LayoutSider, {
+          children: sider
+        }) : null, /*#__PURE__*/_jsx(LayoutContent, {
+          children: children
+        })]
+      }), footer !== undefined ? /*#__PURE__*/_jsx(LayoutFooter, {
+        children: footer
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-layout', "x-layout--".concat(resolvedDirection), className),
+    "data-slot": "layout",
+    "data-layout-direction": resolvedDirection,
+    "data-testid": testID,
+    style: _objectSpread(_objectSpread({}, sharedContainerStyle), {}, {
+      display: 'flex',
+      flexDirection: isHorizontal ? 'row' : 'column',
+      minHeight: fullHeight ? '100vh' : 0
+    }, style),
+    children: content
+  });
+};
+Layout.Header = LayoutHeader;
+Layout.Content = LayoutContent;
+Layout.Sider = LayoutSider;
+Layout.Footer = LayoutFooter;
+Layout.displayName = 'Layout';
+export var Row = function Row(_ref3) {
+  var children = _ref3.children,
+    _ref3$gutter = _ref3.gutter,
+    gutter = _ref3$gutter === void 0 ? 0 : _ref3$gutter,
+    justify = _ref3.justify,
+    align = _ref3.align,
+    _ref3$wrap = _ref3.wrap,
+    wrap = _ref3$wrap === void 0 ? 'wrap' : _ref3$wrap,
+    className = _ref3.className,
+    style = _ref3.style,
+    testID = _ref3.testID;
+  var _ref4 = Array.isArray(gutter) ? gutter : [gutter, gutter],
+    _ref5 = _slicedToArray(_ref4, 2),
+    horizontalGap = _ref5[0],
+    _ref5$ = _ref5[1],
+    verticalGap = _ref5$ === void 0 ? horizontalGap : _ref5$;
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-row', className),
+    "data-slot": "row",
+    "data-testid": testID,
+    style: _objectSpread({
+      display: 'flex',
+      columnGap: toLength(horizontalGap),
+      rowGap: toLength(verticalGap),
+      justifyContent: normalizeFlexAlign(justify),
+      alignItems: normalizeFlexAlign(align),
+      flexWrap: wrap
+    }, style),
+    children: children
+  });
+};
+Row.displayName = 'Row';
+export var Col = function Col(_ref6) {
+  var children = _ref6.children,
+    flex = _ref6.flex,
+    offset = _ref6.offset,
+    span = _ref6.span,
+    xs = _ref6.xs,
+    sm = _ref6.sm,
+    md = _ref6.md,
+    lg = _ref6.lg,
+    xl = _ref6.xl,
+    xxl = _ref6.xxl,
+    className = _ref6.className,
+    style = _ref6.style,
+    testID = _ref6.testID;
+  var resolvedSpan = resolveResponsiveSpan(span, {
+    xs: xs,
+    sm: sm,
+    md: md,
+    lg: lg,
+    xl: xl,
+    xxl: xxl
+  });
+  var computedSpan = resolvedSpan === undefined ? undefined : Number(resolvedSpan);
+  var computedOffset = offset === undefined ? undefined : Number(offset);
+  var validSpan = computedSpan !== undefined && !Number.isNaN(computedSpan);
+  var validOffset = computedOffset !== undefined && !Number.isNaN(computedOffset);
+  return /*#__PURE__*/_jsx(View, {
+    className: classNames('x-col', className),
+    "data-slot": "col",
+    "data-testid": testID,
+    style: _objectSpread({
+      minWidth: 0,
+      flex: flex !== null && flex !== void 0 ? flex : validSpan ? "0 0 ".concat(computedSpan / 24 * 100, "%") : undefined,
+      maxWidth: validSpan ? "".concat(computedSpan / 24 * 100, "%") : undefined,
+      marginLeft: validOffset ? "".concat(computedOffset / 24 * 100, "%") : undefined
+    }, style),
+    children: children
+  });
+};
+Col.displayName = 'Col';
+export default Layout;

package/es/components/layout/types.d.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from 'react';
+export declare type LayoutDirection = 'vertical' | 'horizontal';
+export declare type ResponsiveSpan = number | {
+    span?: number;
+};
+export interface LayoutProps {
+    /** Direct-composition direction. Defaults to the upstream horizontal flex layout. */
+    direction?: LayoutDirection;
+    /** Taro convenience regions. */
+    header?: ReactNode;
+    sider?: ReactNode;
+    footer?: ReactNode;
+    gap?: number | string;
+    fullHeight?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+export interface LayoutRegionProps {
+    children?: ReactNode;
+    /** Primarily used by Layout.Sider; harmless on the other regions. */
+    width?: number | string;
+    theme?: 'light' | 'dark' | string;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+export interface RowProps {
+    children?: ReactNode;
+    align?: 'top' | 'middle' | 'bottom' | 'stretch' | 'start' | 'center' | 'end' | CSSProperties['alignItems'];
+    gutter?: number | [number, number];
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'around' | 'between' | CSSProperties['justifyContent'];
+    wrap?: CSSProperties['flexWrap'];
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+export interface ColProps {
+    children?: ReactNode;
+    flex?: CSSProperties['flex'];
+    offset?: number | string;
+    span?: number | string;
+    xs?: ResponsiveSpan;
+    sm?: ResponsiveSpan;
+    md?: ResponsiveSpan;
+    lg?: ResponsiveSpan;
+    xl?: ResponsiveSpan;
+    xxl?: ResponsiveSpan;
+    className?: string;
+    style?: CSSProperties;
+    testID?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/components/layout/types.js

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

package/es/components/list/index.d.ts

@@ -0,0 +1,3 @@
+export { List, ListItem } from './list';
+export type { ListProps, ListItemProps, ListVariant } from './types';
+//# sourceMappingURL=index.d.ts.map

package/es/components/list/index.js

@@ -0,0 +1 @@
+export { List, ListItem } from "./list";

package/es/components/list/list.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ListItemProps, ListProps } from './types';
+export declare const ListItem: React.FC<ListItemProps>;
+export declare const List: (<T>({ dataSource, renderItem, keyExtractor, emptyText, loading, loadingText, divider, header, headerFontSize, prefixWidth, mode, variant, children, className, style, testID, ...viewProps }: ListProps<T>) => React.JSX.Element) & {
+    displayName: string;
+    Item: React.FC<ListItemProps>;
+};
+export default List;
+//# sourceMappingURL=list.d.ts.map