react-native-system-ui 1.0.2 → 1.0.4

package/dist/cjs/components/circle/Circle.js

@@ -1,212 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Circle = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSvg() {
-  const data = _interopRequireWildcard(require("react-native-svg"));
-  _reactNativeSvg = function () {
-    return data;
-  };
-  return data;
-}
-var _utils = require("../../utils");
-var _animation = require("../../hooks/animation");
-var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const SVG_ROTATION = {
-  top: -90,
-  right: 0,
-  bottom: 90,
-  left: 180
-};
-const WEB_ROTATION = {
-  top: 0,
-  right: 90,
-  bottom: 180,
-  left: 270
-};
-const isTransparentColor = value => {
-  const normalized = value.trim().toLowerCase();
-  if (!normalized || normalized === 'transparent') return true;
-  const rgbaMatch = normalized.match(/^rgba\(([^)]*)\)$/);
-  if (rgbaMatch) {
-    const alpha = Number(rgbaMatch[1].split(',')[3]?.trim());
-    return Number.isFinite(alpha) && alpha === 0;
-  }
-  return false;
-};
-const AnimatedSvgCircle = _reactNative().Animated.createAnimatedComponent(_reactNativeSvg().Circle);
-const CircleImpl = props => {
-  const {
-    tokensOverride,
-    rate: rateP,
-    size,
-    strokeWidth,
-    color,
-    layerColor,
-    fill: fillP,
-    clockwise: cwP,
-    startPosition: startP,
-    lineCap: capP,
-    animated: animP,
-    animationDuration,
-    style,
-    textStyle,
-    children
-  } = props;
-  const tokens = (0, _tokens.useCircleTokens)(tokensOverride);
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  const fill = fillP ?? tokens.defaults.fill;
-  const clockwise = cwP ?? tokens.defaults.clockwise;
-  const startPosition = startP ?? tokens.defaults.startPosition;
-  const lineCap = capP ?? tokens.defaults.lineCap;
-  const animated = animP ?? tokens.defaults.animated;
-  const rSize = Math.max(0, (0, _utils.parseNumber)(size, tokens.defaults.size));
-  const rStroke = Math.max(0, (0, _utils.parseNumber)(strokeWidth, tokens.defaults.strokeWidth));
-  const rate = (0, _utils.clamp)((0, _utils.parsePercentage)(rateP ?? tokens.defaults.rate), 0, 100);
-  const rColor = color ?? tokens.colors.color;
-  const rLayerColor = layerColor ?? tokens.colors.layerColor;
-  const baseStyle = (0, _react().useMemo)(() => [tokens.layout.root, {
-    width: rSize,
-    height: rSize
-  }, style], [rSize, style, tokens.layout.root]);
-  const contentStyle = (0, _react().useMemo)(() => [tokens.layout.content, {
-    width: rSize,
-    height: rSize
-  }], [rSize, tokens.layout.content]);
-  const content = (0, _react().useMemo)(() => {
-    if (children == null || children === false) return null;
-    const arr = _react().default.Children.toArray(children);
-    if (arr.every(_utils.isText)) return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [tokens.layout.text, {
-        color: tokens.colors.text,
-        fontSize: tokens.typography.fontSize,
-        lineHeight: tokens.typography.lineHeight
-      }, textStyle]
-    }, arr.map(String).join(''));
-    return children;
-  }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
-  if (_reactNative().Platform.OS === 'web') {
-    const safeStroke = Math.min(rStroke, rSize / 2);
-    const innerSize = Math.max(0, rSize - safeStroke * 2);
-    const progressAngle = rate / 100 * 360;
-    const rotation = WEB_ROTATION[startPosition];
-    const showInner = innerSize > 0 && !isTransparentColor(fill);
-    const gradient = clockwise ? `conic-gradient(from ${rotation}deg, ${rColor} 0deg ${progressAngle}deg, ${rLayerColor} ${progressAngle}deg 360deg)` : `conic-gradient(from ${rotation}deg, ${rLayerColor} 0deg ${360 - progressAngle}deg, ${rColor} ${360 - progressAngle}deg 360deg)`;
-    const webRingStyle = {
-      width: rSize,
-      height: rSize,
-      borderRadius: rSize / 2,
-      backgroundImage: gradient
-    };
-    if (safeStroke > 0) {
-      const mask = `radial-gradient(farthest-side, transparent calc(100% - ${safeStroke}px), #000 calc(100% - ${safeStroke}px))`;
-      Object.assign(webRingStyle, {
-        WebkitMaskImage: mask,
-        maskImage: mask,
-        WebkitMaskRepeat: 'no-repeat',
-        maskRepeat: 'no-repeat',
-        WebkitMaskSize: '100% 100%',
-        maskSize: '100% 100%'
-      });
-    }
-    ;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: baseStyle
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [tokens.layout.webRing, webRingStyle]
-    }), showInner ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [tokens.layout.webInner, {
-        width: innerSize,
-        height: innerSize,
-        borderRadius: innerSize / 2,
-        backgroundColor: fill,
-        left: safeStroke,
-        top: safeStroke
-      }]
-    }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      pointerEvents: "box-none",
-      style: contentStyle
-    }, (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [tokens.layout.text, {
-        color: tokens.colors.text,
-        fontSize: tokens.typography.fontSize
-      }, textStyle]
-    }, content) : content));
-  }
-  const radius = Math.max(0, (rSize - rStroke) / 2);
-  const circumference = 2 * Math.PI * radius;
-  const rotation = SVG_ROTATION[startPosition];
-  const safeDur = Math.max(0, animationDuration ?? tokens.defaults.animationDuration);
-  const dashTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
-  const dashOffset = (0, _react().useRef)(new (_reactNative().Animated.Value)(dashTarget)).current;
-  (0, _react().useEffect)(() => {
-    if (!animated || safeDur <= 0 || reducedMotion) {
-      dashOffset.setValue(dashTarget);
-      return;
-    }
-    ;
-    const anim = _reactNative().Animated.timing(dashOffset, {
-      toValue: dashTarget,
-      duration: safeDur,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [animated, dashOffset, dashTarget, reducedMotion, safeDur]);
-  const center = rSize / 2;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: baseStyle
-  }, /*#__PURE__*/_react().default.createElement(_reactNativeSvg().default, {
-    width: rSize,
-    height: rSize
-  }, /*#__PURE__*/_react().default.createElement(_reactNativeSvg().Circle, {
-    cx: center,
-    cy: center,
-    r: radius,
-    stroke: rLayerColor,
-    strokeWidth: rStroke,
-    fill: fill
-  }), /*#__PURE__*/_react().default.createElement(AnimatedSvgCircle, {
-    cx: center,
-    cy: center,
-    r: radius,
-    stroke: rColor,
-    strokeWidth: rStroke,
-    fill: "transparent",
-    strokeDasharray: `${circumference} ${circumference}`,
-    strokeDashoffset: dashOffset,
-    strokeLinecap: lineCap,
-    rotation: rotation,
-    originX: center,
-    originY: center
-  })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    pointerEvents: "box-none",
-    style: contentStyle
-  }, (0, _utils.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.text, {
-      color: tokens.colors.text,
-      fontSize: tokens.typography.fontSize
-    }, textStyle]
-  }, content) : content));
-};
-const Circle = exports.Circle = /*#__PURE__*/_react().default.memo(CircleImpl);
-Circle.displayName = 'Circle';
-var _default = exports.default = Circle;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSvg(){const e=_interopRequireWildcard(require("react-native-svg"));return _reactNativeSvg=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Circle=void 0;var _utils=require("../../utils"),_animation=require("../../hooks/animation"),_tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?a:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(n,t,o):n[t]=e[t]);return n})(e,t)}const SVG_ROTATION={top:-90,right:0,bottom:90,left:180},WEB_ROTATION={top:0,right:90,bottom:180,left:270},isTransparentColor=e=>{const t=e.trim().toLowerCase();if(!t||"transparent"===t)return!0;const r=t.match(/^rgba\(([^)]*)\)$/);if(r){const e=Number(r[1].split(",")[3]?.trim());return Number.isFinite(e)&&0===e}return!1},AnimatedSvgCircle=_reactNative().Animated.createAnimatedComponent(_reactNativeSvg().Circle),CircleImpl=e=>{const{tokensOverride:t,rate:r,size:a,strokeWidth:i,color:o,layerColor:n,fill:l,clockwise:c,startPosition:s,lineCap:u,animated:d,animationDuration:f,style:_,textStyle:p,children:m}=e,g=(0,_tokens.useCircleTokens)(t),y=(0,_animation.useReducedMotion)(),h=l??g.defaults.fill,v=c??g.defaults.clockwise,k=s??g.defaults.startPosition,x=u??g.defaults.lineCap,N=d??g.defaults.animated,b=Math.max(0,(0,_utils.parseNumber)(a,g.defaults.size)),C=Math.max(0,(0,_utils.parseNumber)(i,g.defaults.strokeWidth)),w=(0,_utils.clamp)((0,_utils.parsePercentage)(r??g.defaults.rate),0,100),S=o??g.colors.color,M=n??g.colors.layerColor,E=(0,_react().useMemo)(()=>[g.layout.root,{width:b,height:b},_],[b,_,g.layout.root]),T=(0,_react().useMemo)(()=>[g.layout.content,{width:b,height:b}],[b,g.layout.content]),O=(0,_react().useMemo)(()=>{if(null==m||!1===m)return null;const e=_react().default.Children.toArray(m);return e.every(_utils.isText)?_react().default.createElement(_reactNative().Text,{style:[g.layout.text,{color:g.colors.text,fontSize:g.typography.fontSize,lineHeight:g.typography.lineHeight},p]},e.map(String).join("")):m},[m,p,g.colors.text,g.layout.text,g.typography.fontSize,g.typography.lineHeight]);if("web"===_reactNative().Platform.OS){const e=Math.min(C,b/2),t=Math.max(0,b-2*e),r=w/100*360,a=WEB_ROTATION[k],i=t>0&&!isTransparentColor(h),o={width:b,height:b,borderRadius:b/2,backgroundImage:v?`conic-gradient(from ${a}deg, ${S} 0deg ${r}deg, ${M} ${r}deg 360deg)`:`conic-gradient(from ${a}deg, ${M} 0deg ${360-r}deg, ${S} ${360-r}deg 360deg)`};if(e>0){const t=`radial-gradient(farthest-side, transparent calc(100% - ${e}px), #000 calc(100% - ${e}px))`;Object.assign(o,{WebkitMaskImage:t,maskImage:t,WebkitMaskRepeat:"no-repeat",maskRepeat:"no-repeat",WebkitMaskSize:"100% 100%",maskSize:"100% 100%"})}return _react().default.createElement(_reactNative().View,{style:E},_react().default.createElement(_reactNative().View,{style:[g.layout.webRing,o]}),i?_react().default.createElement(_reactNative().View,{style:[g.layout.webInner,{width:t,height:t,borderRadius:t/2,backgroundColor:h,left:e,top:e}]}):null,_react().default.createElement(_reactNative().View,{pointerEvents:"box-none",style:T},(0,_utils.isText)(O)?_react().default.createElement(_reactNative().Text,{style:[g.layout.text,{color:g.colors.text,fontSize:g.typography.fontSize},p]},O):O))}const W=Math.max(0,(b-C)/2),R=2*Math.PI*W,$=SVG_ROTATION[k],I=Math.max(0,f??g.defaults.animationDuration),z=(v?1:-1)*R*(1-w/100),A=(0,_react().useRef)(new(_reactNative().Animated.Value)(z)).current;(0,_react().useEffect)(()=>{if(!N||I<=0||y)return void A.setValue(z);const e=_reactNative().Animated.timing(A,{toValue:z,duration:I,useNativeDriver:!1,isInteraction:!1});return e.start(),()=>e.stop()},[N,A,z,y,I]);const V=b/2;return _react().default.createElement(_reactNative().View,{style:E},_react().default.createElement(_reactNativeSvg().default,{width:b,height:b},_react().default.createElement(_reactNativeSvg().Circle,{cx:V,cy:V,r:W,stroke:M,strokeWidth:C,fill:h}),_react().default.createElement(AnimatedSvgCircle,{cx:V,cy:V,r:W,stroke:S,strokeWidth:C,fill:"transparent",strokeDasharray:`${R} ${R}`,strokeDashoffset:A,strokeLinecap:x,rotation:$,originX:V,originY:V})),_react().default.createElement(_reactNative().View,{pointerEvents:"box-none",style:T},(0,_utils.isText)(O)?_react().default.createElement(_reactNative().Text,{style:[g.layout.text,{color:g.colors.text,fontSize:g.typography.fontSize},p]},O):O))},Circle=exports.Circle=_react().default.memo(CircleImpl);Circle.displayName="Circle";var _default=exports.default=Circle;

package/dist/cjs/components/circle/index.js

@@ -1,9 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Circle = _interopRequireDefault(require("./Circle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Circle.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _Circle=_interopRequireDefault(require("./Circle"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Circle.default;

package/dist/cjs/components/circle/tokens.js

@@ -1,55 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCircleTokens = exports.createCircleTokens = void 0;
-var _designSystem = require("../../design-system");
-const createCircleTokens = foundations => ({
-  defaults: {
-    rate: 0,
-    size: 100,
-    strokeWidth: 6,
-    fill: 'transparent',
-    clockwise: true,
-    startPosition: 'top',
-    lineCap: 'round',
-    animated: true,
-    animationDuration: 300
-  },
-  layout: {
-    root: {
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    content: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    text: {
-      textAlign: 'center'
-    },
-    webRing: {
-      position: 'absolute',
-      left: 0,
-      top: 0
-    },
-    webInner: {
-      position: 'absolute'
-    }
-  },
-  colors: {
-    color: foundations.palette.primary[500],
-    layerColor: foundations.palette.default[200],
-    text: foundations.palette.default[800]
-  },
-  typography: {
-    fontSize: foundations.fontSize.sm,
-    lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier)
-  }
-});
-exports.createCircleTokens = createCircleTokens;
-const useCircleTokens = exports.useCircleTokens = (0, _designSystem.createComponentTokensHook)('circle', createCircleTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useCircleTokens=exports.createCircleTokens=void 0;var _designSystem=require("../../design-system");const createCircleTokens=e=>({defaults:{rate:0,size:100,strokeWidth:6,fill:"transparent",clockwise:!0,startPosition:"top",lineCap:"round",animated:!0,animationDuration:300},layout:{root:{alignItems:"center",justifyContent:"center"},content:{position:"absolute",left:0,top:0,alignItems:"center",justifyContent:"center"},text:{textAlign:"center"},webRing:{position:"absolute",left:0,top:0},webInner:{position:"absolute"}},colors:{color:e.palette.primary[500],layerColor:e.palette.default[200],text:e.palette.default[800]},typography:{fontSize:e.fontSize.sm,lineHeight:Math.round(e.fontSize.sm*e.typography.lineHeightMultiplier)}});exports.createCircleTokens=createCircleTokens;const useCircleTokens=exports.useCircleTokens=(0,_designSystem.createComponentTokensHook)("circle",createCircleTokens);

package/dist/cjs/components/collapse/Collapse.js

@@ -1,311 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Collapse = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _animation = require("../../hooks/animation");
-var _cell = require("../cell");
-var _utils = require("../../utils");
-var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CollapseContext = /*#__PURE__*/_react().default.createContext(null);
-const normalizeValue = value => {
-  if (value === undefined) return undefined;
-  if (Array.isArray(value)) return value.map(String);
-  if (value === null) return [];
-  return [String(value)];
-};
-const buildOutputValue = (keys, accordion) => accordion ? keys[0] ?? '' : keys;
-const CollapseImpl = props => {
-  const {
-    tokensOverride,
-    children,
-    accordion: accP,
-    value,
-    defaultValue,
-    onChange,
-    border: borderP,
-    iconPosition: iconPosP,
-    expandIcon,
-    disabled,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useCollapseTokens)(tokensOverride);
-  const accordion = accP ?? tokens.defaults.accordion;
-  const border = borderP ?? tokens.defaults.border;
-  const iconPosition = iconPosP ?? tokens.defaults.iconPosition;
-  const {
-    colors
-  } = tokens;
-  const controlled = value !== undefined;
-  const normVal = normalizeValue(value);
-  const normDef = normalizeValue(defaultValue) ?? [];
-  const onChangeRef = (0, _react().useRef)(onChange);
-  onChangeRef.current = onChange;
-  const [internalValue, setInternalValue] = (0, _react().useState)(() => accordion ? normDef.slice(0, 1) : normDef);
-  const activeKeys = controlled ? accordion ? (normVal ?? []).slice(0, 1) : normVal ?? [] : internalValue;
-  const toggle = (0, _react().useCallback)((name, expand) => {
-    if (disabled) return;
-    const existing = activeKeys.includes(name);
-    const shouldExpand = expand ?? !existing;
-    const nextKeys = accordion ? shouldExpand ? [name] : existing ? [] : activeKeys : shouldExpand ? existing ? activeKeys : [...activeKeys, name] : existing ? activeKeys.filter(k => k !== name) : activeKeys;
-    if (!controlled) setInternalValue(nextKeys);
-    onChangeRef.current?.(buildOutputValue(nextKeys, accordion));
-  }, [accordion, activeKeys, controlled, disabled]);
-  const ctxVal = (0, _react().useMemo)(() => ({
-    activeKeys,
-    toggle,
-    accordion,
-    iconPosition,
-    expandIcon,
-    border,
-    disabled,
-    tokens
-  }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
-  const renderedChildren = (0, _react().useMemo)(() => {
-    const items = _react().default.Children.toArray(children);
-    return items.map((child, i) => {
-      if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
-      if (!(0, _utils.isFunction)(child.type) && !(0, _utils.isObject)(child.type)) return child;
-      const name = child.props.name ?? String(i);
-      return /*#__PURE__*/_react().default.cloneElement(child, {
-        name,
-        index: i
-      });
-    });
-  }, [children]);
-  return /*#__PURE__*/_react().default.createElement(CollapseContext.Provider, {
-    value: ctxVal
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: [tokens.layout.container, border && {
-      backgroundColor: colors.background
-    }, style]
-  }, rest), border && /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "top",
-    color: colors.border
-  }), border && /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "bottom",
-    color: colors.border
-  }), renderedChildren));
-};
-const Hairline = /*#__PURE__*/_react().default.memo(({
-  tokens,
-  position,
-  color,
-  inset = 0
-}) => {
-  const hairlineStyle = (0, _utils.createHairlineView)({
-    position,
-    color,
-    left: inset,
-    right: inset
-  });
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    pointerEvents: "none",
-    style: [tokens.layout.hairline, hairlineStyle]
-  });
-});
-const CollapsePanel = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
-  const context = (0, _react().useContext)(CollapseContext);
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  if (!context) throw new Error('Collapse.Panel must be used within Collapse');
-  const {
-    activeKeys,
-    toggle,
-    iconPosition,
-    expandIcon,
-    disabled: contextDisabled,
-    tokens
-  } = context;
-  const {
-    name = '0',
-    index = 0,
-    title,
-    description,
-    label,
-    icon,
-    extra,
-    value,
-    border: panelBorder = tokens.defaults.panelBorder,
-    isLink: isLinkProp = tokens.defaults.panelIsLink,
-    size: sizeProp = tokens.defaults.panelSize,
-    disabled,
-    readOnly,
-    children,
-    style,
-    titleStyle,
-    descriptionStyle,
-    ...rest
-  } = props;
-  const nameKey = String(name);
-  const isActive = activeKeys.includes(nameKey);
-  const mergedDisabled = contextDisabled || disabled;
-  const {
-    colors,
-    spacing,
-    typography
-  } = tokens;
-  const [contentHeight, setContentHeight] = (0, _react().useState)(0);
-  const animation = (0, _react().useRef)(new (_reactNative().Animated.Value)(isActive ? 1 : 0)).current;
-  const collapseAnimRef = (0, _react().useRef)(null);
-  const rotation = animation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['90deg', '-90deg']
-  });
-  (0, _react().useEffect)(() => {
-    collapseAnimRef.current?.stop();
-    const anim = _reactNative().Animated.timing(animation, {
-      toValue: isActive ? 1 : 0,
-      duration: reducedMotion ? 0 : tokens.defaults.animationDuration,
-      easing: _reactNative().Easing.ease,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    collapseAnimRef.current = anim;
-    anim.start(({
-      finished
-    }) => {
-      if (finished) collapseAnimRef.current = null;
-    });
-    return () => {
-      collapseAnimRef.current?.stop();
-      collapseAnimRef.current = null;
-    };
-  }, [animation, isActive, reducedMotion, tokens.defaults.animationDuration]);
-  const renderedLabel = description ?? label;
-  const renderedValue = extra ?? value;
-  const handleToggle = (0, _react().useCallback)(() => {
-    if (mergedDisabled || readOnly) return;
-    toggle(nameKey);
-  }, [mergedDisabled, nameKey, readOnly, toggle]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    toggle: expand => {
-      if (mergedDisabled || readOnly) return;
-      toggle(nameKey, expand);
-    }
-  }), [mergedDisabled, nameKey, readOnly, toggle]);
-  const handleContentLayout = (0, _react().useCallback)(event => {
-    const height = event.nativeEvent.layout.height;
-    if ((0, _utils.isNumber)(height) && Number.isFinite(height)) setContentHeight(prev => prev === height ? prev : height);
-  }, []);
-  const animatedStyle = (0, _react().useMemo)(() => ({
-    height: animation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, contentHeight]
-    })
-  }), [animation, contentHeight]);
-  const renderExpandIcon = (0, _react().useCallback)(() => {
-    if ((0, _utils.isFunction)(expandIcon)) return expandIcon(isActive);
-    if (expandIcon) return expandIcon;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      style: {
-        transform: [{
-          rotate: rotation
-        }]
-      }
-    }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
-      size: 16,
-      fill: mergedDisabled ? colors.disabled : colors.arrow
-    }));
-  }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotation]);
-  const contentNode = (0, _react().useMemo)(() => (0, _utils.renderTextOrNode)(children, {
-    color: mergedDisabled ? colors.disabled : colors.description,
-    fontFamily: typography.fontFamily,
-    fontSize: typography.descriptionSize,
-    lineHeight: Math.round(typography.descriptionSize * 1.5)
-  }), [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize, typography.fontFamily]);
-  const showInnerBorder = Boolean(panelBorder);
-  const showTopBorder = index > 0 && showInnerBorder;
-  const showHeaderBottomBorder = isActive && showInnerBorder;
-  const showExpandIcon = isLinkProp && !readOnly;
-  const headerIcon = iconPosition === 'left' ? showExpandIcon || (0, _utils.isRenderable)(icon) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.headerIconRow
-  }, showExpandIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: {
-      marginRight: icon ? tokens.spacing.iconGap : 0
-    }
-  }, renderExpandIcon()), icon) : undefined : icon;
-  const headerRightIcon = iconPosition === 'right' && showExpandIcon ? renderExpandIcon() : undefined;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: [tokens.layout.panel, {
-      backgroundColor: colors.background
-    }, style]
-  }, rest), showTopBorder && /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "top",
-    color: colors.border,
-    inset: spacing.paddingHorizontal
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.headerWrapper
-  }, /*#__PURE__*/_react().default.createElement(_cell.Cell, {
-    title: title,
-    label: renderedLabel,
-    icon: headerIcon,
-    value: renderedValue,
-    size: sizeProp,
-    border: false,
-    disabled: mergedDisabled,
-    onPress: readOnly ? undefined : handleToggle,
-    accessibilityState: {
-      expanded: isActive,
-      disabled: mergedDisabled
-    },
-    titleStyle: mergedDisabled ? [titleStyle, {
-      color: colors.disabled
-    }] : titleStyle,
-    labelStyle: mergedDisabled ? [descriptionStyle, {
-      color: colors.disabled
-    }] : descriptionStyle,
-    valueStyle: mergedDisabled ? {
-      color: colors.disabled
-    } : undefined,
-    rightIcon: headerRightIcon
-  }), showHeaderBottomBorder && /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "bottom",
-    color: colors.border,
-    inset: spacing.paddingHorizontal
-  })), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [tokens.layout.bodyWrapper, animatedStyle]
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    onLayout: handleContentLayout,
-    style: [tokens.layout.bodyContent, {
-      paddingVertical: spacing.paddingVertical,
-      paddingHorizontal: spacing.paddingHorizontal,
-      backgroundColor: colors.background
-    }]
-  }, contentNode)));
-});
-CollapseImpl.Panel = CollapsePanel;
-CollapseImpl.Item = CollapsePanel;
-const Collapse = exports.Collapse = Object.assign(/*#__PURE__*/_react().default.memo(CollapseImpl), {
-  Panel: CollapsePanel,
-  Item: CollapsePanel
-});
-var _default = exports.default = Collapse;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Collapse=void 0;var _animation=require("../../hooks/animation"),_cell=require("../cell"),_utils=require("../../utils"),_tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?r:a){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(l,t,i):l[t]=e[t]);return l})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const CollapseContext=_react().default.createContext(null),normalizeValue=e=>{if(void 0!==e)return Array.isArray(e)?e.map(String):null===e?[]:[String(e)]},buildOutputValue=(e,t)=>t?e[0]??"":e,CollapseImpl=e=>{const{tokensOverride:t,children:a,accordion:r,value:n,defaultValue:i,onChange:l,border:o,iconPosition:c,expandIcon:s,disabled:u,style:d,...p}=e,_=(0,_tokens.useCollapseTokens)(t),f=r??_.defaults.accordion,m=o??_.defaults.border,b=c??_.defaults.iconPosition,{colors:y}=_,g=void 0!==n,v=normalizeValue(n),C=normalizeValue(i)??[],k=(0,_react().useRef)(l);k.current=l;const[h,w]=(0,_react().useState)(()=>f?C.slice(0,1):C),x=g?f?(v??[]).slice(0,1):v??[]:h,E=(0,_react().useCallback)((e,t)=>{if(u)return;const a=x.includes(e),r=t??!a,n=f?r?[e]:a?[]:x:r?a?x:[...x,e]:a?x.filter(t=>t!==e):x;g||w(n),k.current?.(buildOutputValue(n,f))},[f,x,g,u]),N=(0,_react().useMemo)(()=>({activeKeys:x,toggle:E,accordion:f,iconPosition:b,expandIcon:s,border:m,disabled:u,tokens:_}),[f,x,m,u,s,b,_,E]),V=(0,_react().useMemo)(()=>_react().default.Children.toArray(a).map((e,t)=>{if(!_react().default.isValidElement(e))return e;if(!(0,_utils.isFunction)(e.type)&&!(0,_utils.isObject)(e.type))return e;const a=e.props.name??String(t);return _react().default.cloneElement(e,{name:a,index:t})}),[a]);return _react().default.createElement(CollapseContext.Provider,{value:N},_react().default.createElement(_reactNative().View,_extends({style:[_.layout.container,m&&{backgroundColor:y.background},d]},p),m&&_react().default.createElement(Hairline,{tokens:_,position:"top",color:y.border}),m&&_react().default.createElement(Hairline,{tokens:_,position:"bottom",color:y.border}),V))},Hairline=_react().default.memo(({tokens:e,position:t,color:a,inset:r=0})=>{const n=(0,_utils.createHairlineView)({position:t,color:a,left:r,right:r});return _react().default.createElement(_reactNative().View,{pointerEvents:"none",style:[e.layout.hairline,n]})}),CollapsePanel=_react().default.forwardRef((e,t)=>{const a=(0,_react().useContext)(CollapseContext),r=(0,_animation.useReducedMotion)();if(!a)throw new Error("Collapse.Panel must be used within Collapse");const{activeKeys:n,toggle:i,iconPosition:l,expandIcon:o,disabled:c,tokens:s}=a,{name:u="0",index:d=0,title:p,description:_,label:f,icon:m,extra:b,value:y,border:g=s.defaults.panelBorder,isLink:v=s.defaults.panelIsLink,size:C=s.defaults.panelSize,disabled:k,readOnly:h,children:w,style:x,titleStyle:E,descriptionStyle:N,...V}=e,S=String(u),P=n.includes(S),I=c||k,{colors:z,spacing:O,typography:R}=s,[H,M]=(0,_react().useState)(0),q=(0,_react().useRef)(new(_reactNative().Animated.Value)(P?1:0)).current,j=(0,_react().useRef)(null),A=q.interpolate({inputRange:[0,1],outputRange:["90deg","-90deg"]});(0,_react().useEffect)(()=>{j.current?.stop();const e=_reactNative().Animated.timing(q,{toValue:P?1:0,duration:r?0:s.defaults.animationDuration,easing:_reactNative().Easing.ease,useNativeDriver:!1,isInteraction:!1});return j.current=e,e.start(({finished:e})=>{e&&(j.current=null)}),()=>{j.current?.stop(),j.current=null}},[q,P,r,s.defaults.animationDuration]);const W=_??f,F=b??y,D=(0,_react().useCallback)(()=>{I||h||i(S)},[I,S,h,i]);(0,_react().useImperativeHandle)(t,()=>({toggle:e=>{I||h||i(S,e)}}),[I,S,h,i]);const L=(0,_react().useCallback)(e=>{const t=e.nativeEvent.layout.height;(0,_utils.isNumber)(t)&&Number.isFinite(t)&&M(e=>e===t?e:t)},[]),B=(0,_react().useMemo)(()=>({height:q.interpolate({inputRange:[0,1],outputRange:[0,H]})}),[q,H]),K=(0,_react().useCallback)(()=>(0,_utils.isFunction)(o)?o(P):o||_react().default.createElement(_reactNative().Animated.View,{style:{transform:[{rotate:A}]}},_react().default.createElement(_reactNativeSystemIcon().Arrow,{size:16,fill:I?z.disabled:z.arrow})),[z.arrow,z.disabled,o,P,I,A]),T=(0,_react().useMemo)(()=>(0,_utils.renderTextOrNode)(w,{color:I?z.disabled:z.description,fontFamily:R.fontFamily,fontSize:R.descriptionSize,lineHeight:Math.round(1.5*R.descriptionSize)}),[w,z.description,z.disabled,I,R.descriptionSize,R.fontFamily]),G=Boolean(g),J=d>0&&G,Q=P&&G,U=v&&!h,X="left"===l?U||(0,_utils.isRenderable)(m)?_react().default.createElement(_reactNative().View,{style:s.layout.headerIconRow},U&&_react().default.createElement(_reactNative().View,{style:{marginRight:m?s.spacing.iconGap:0}},K()),m):void 0:m,Y="right"===l&&U?K():void 0;return _react().default.createElement(_reactNative().View,_extends({style:[s.layout.panel,{backgroundColor:z.background},x]},V),J&&_react().default.createElement(Hairline,{tokens:s,position:"top",color:z.border,inset:O.paddingHorizontal}),_react().default.createElement(_reactNative().View,{style:s.layout.headerWrapper},_react().default.createElement(_cell.Cell,{title:p,label:W,icon:X,value:F,size:C,border:!1,disabled:I,onPress:h?void 0:D,accessibilityState:{expanded:P,disabled:I},titleStyle:I?[E,{color:z.disabled}]:E,labelStyle:I?[N,{color:z.disabled}]:N,valueStyle:I?{color:z.disabled}:void 0,rightIcon:Y}),Q&&_react().default.createElement(Hairline,{tokens:s,position:"bottom",color:z.border,inset:O.paddingHorizontal})),_react().default.createElement(_reactNative().Animated.View,{style:[s.layout.bodyWrapper,B]},_react().default.createElement(_reactNative().View,{onLayout:L,style:[s.layout.bodyContent,{paddingVertical:O.paddingVertical,paddingHorizontal:O.paddingHorizontal,backgroundColor:z.background}]},T)))});CollapseImpl.Panel=CollapsePanel,CollapseImpl.Item=CollapsePanel;const Collapse=exports.Collapse=Object.assign(_react().default.memo(CollapseImpl),{Panel:CollapsePanel,Item:CollapsePanel});var _default=exports.default=Collapse;

package/dist/cjs/components/collapse/index.js

@@ -1,8 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Collapse = require("./Collapse");
-var _default = exports.default = _Collapse.Collapse;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _Collapse=require("./Collapse"),_default=exports.default=_Collapse.Collapse;