react-native-system-ui 0.0.1 → 0.0.2

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

@@ -1,324 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Collapse = void 0;
-function _react() {
-  const data = _interopRequireDefault(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 _cell = require("../cell");
-var _hairline = require("../../utils/hairline");
-var _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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) => {
-  if (accordion) {
-    return keys[0] ?? '';
-  }
-  return keys;
-};
-const Collapse = props => {
-  const {
-    tokensOverride,
-    children,
-    accordion: accordionProp,
-    value,
-    defaultValue,
-    onChange,
-    border: borderProp,
-    iconPosition: iconPositionProp,
-    expandIcon,
-    disabled,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useCollapseTokens)(tokensOverride);
-  const accordion = accordionProp ?? tokens.defaults.accordion;
-  const border = borderProp ?? tokens.defaults.border;
-  const iconPosition = iconPositionProp ?? tokens.defaults.iconPosition;
-  const {
-    colors
-  } = tokens;
-  const controlled = value !== undefined;
-  const normalizedValue = normalizeValue(value);
-  const normalizedDefault = normalizeValue(defaultValue) ?? [];
-  const [internalValue, setInternalValue] = _react().default.useState(() => accordion ? normalizedDefault.slice(0, 1) : normalizedDefault);
-  const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
-  const toggle = _react().default.useCallback((name, expand) => {
-    if (disabled) return;
-    const current = activeKeys;
-    const exists = current.includes(name);
-    let next;
-    if (accordion) {
-      if (expand === true) {
-        next = exists ? current : [name];
-      } else if (expand === false) {
-        next = exists ? [] : current;
-      } else {
-        next = exists ? [] : [name];
-      }
-    } else {
-      if (expand === true) {
-        next = exists ? current : [...current, name];
-      } else if (expand === false) {
-        next = exists ? current.filter(item => item !== name) : current;
-      } else {
-        next = exists ? current.filter(item => item !== name) : [...current, name];
-      }
-    }
-    if (!controlled) {
-      setInternalValue(next);
-    }
-    onChange?.(buildOutputValue(next, accordion));
-  }, [accordion, activeKeys, controlled, disabled, onChange]);
-  const contextValue = {
-    activeKeys,
-    toggle,
-    accordion,
-    iconPosition,
-    expandIcon,
-    border,
-    disabled,
-    tokens
-  };
-  const items = _react().default.Children.toArray(children);
-  const renderedChildren = items.map((child, index) => {
-    if (! /*#__PURE__*/_react().default.isValidElement(child)) return child;
-    if (!(0, _validate.isFunction)(child.type) && !(0, _validate.isObject)(child.type)) {
-      return child;
-    }
-    const name = child.props.name ?? String(index);
-    return /*#__PURE__*/_react().default.cloneElement(child, {
-      name,
-      index
-    });
-  });
-  return /*#__PURE__*/_react().default.createElement(CollapseContext.Provider, {
-    value: contextValue
-  }, /*#__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
-  }) : null, border ? /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "bottom",
-    color: colors.border
-  }) : null, renderedChildren));
-};
-exports.Collapse = Collapse;
-const Hairline = ({
-  tokens,
-  position,
-  color,
-  inset = 0
-}) => {
-  const hairlineStyle = (0, _hairline.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 = _react().default.useContext(CollapseContext);
-  if (!context) {
-    throw new Error('Collapse.Panel must be used within Collapse');
-  }
-  const {
-    activeKeys,
-    toggle,
-    accordion,
-    iconPosition,
-    expandIcon,
-    border,
-    disabled: collapseDisabled,
-    tokens
-  } = context;
-  const {
-    name = '0',
-    index = 0,
-    title,
-    description,
-    label,
-    icon,
-    extra,
-    value,
-    border: panelBorder = tokens.defaults.panelBorder,
-    isLink = tokens.defaults.panelIsLink,
-    size = tokens.defaults.panelSize,
-    disabled,
-    readOnly,
-    children,
-    style,
-    titleStyle,
-    descriptionStyle,
-    ...rest
-  } = props;
-  const isActive = activeKeys.includes(String(name));
-  const mergedDisabled = collapseDisabled || disabled;
-  const {
-    colors,
-    spacing,
-    typography
-  } = tokens;
-  const [contentHeight, setContentHeight] = _react().default.useState(0);
-  const animation = _react().default.useRef(new (_reactNative().Animated.Value)(isActive ? 1 : 0)).current;
-  _react().default.useEffect(() => {
-    _reactNative().Animated.timing(animation, {
-      toValue: isActive ? 1 : 0,
-      duration: tokens.defaults.animationDuration,
-      easing: _reactNative().Easing.ease,
-      useNativeDriver: false
-    }).start();
-  }, [animation, isActive, tokens.defaults.animationDuration]);
-  const resolvedLabel = description ?? label;
-  const resolvedValue = extra ?? value;
-  const handleToggle = () => {
-    if (mergedDisabled || readOnly) return;
-    toggle(String(name));
-  };
-  _react().default.useImperativeHandle(ref, () => ({
-    toggle: expand => {
-      if (mergedDisabled || readOnly) return;
-      toggle(String(name), expand);
-    }
-  }), [mergedDisabled, name, readOnly, toggle]);
-  const handleContentLayout = event => {
-    const nextHeight = event.nativeEvent.layout.height;
-    if ((0, _validate.isNumber)(nextHeight) && Number.isFinite(nextHeight) && nextHeight !== contentHeight) {
-      setContentHeight(nextHeight);
-    }
-  };
-  const animatedStyle = {
-    height: animation.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, contentHeight]
-    })
-  };
-  const renderExpandIcon = () => {
-    if ((0, _validate.isFunction)(expandIcon)) {
-      return expandIcon(isActive);
-    }
-    if (expandIcon) {
-      return expandIcon;
-    }
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      style: {
-        transform: [{
-          rotate: animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: ['90deg', '-90deg']
-          })
-        }]
-      }
-    }, /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
-      size: 16,
-      fill: mergedDisabled ? colors.disabled : colors.arrow
-    }));
-  };
-  const renderChildren = () => {
-    if ((0, _validate.isText)(children)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: {
-          color: colors.description,
-          fontSize: typography.descriptionSize,
-          lineHeight: Math.round(typography.descriptionSize * 1.5)
-        }
-      }, children);
-    }
-    return children;
-  };
-  const showItemBorder = Boolean(panelBorder);
-  const showTopBorder = index > 0 && showItemBorder;
-  const showHeaderBottomBorder = isActive && showItemBorder;
-  const showExpandIcon = isLink && !readOnly;
-  const headerIcon = iconPosition === 'left' ? showExpandIcon || (0, _validate.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()) : null, 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
-  }) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.headerWrapper
-  }, /*#__PURE__*/_react().default.createElement(_cell.Cell, {
-    title: title,
-    label: resolvedLabel,
-    icon: headerIcon,
-    value: resolvedValue,
-    size: size,
-    border: false,
-    disabled: mergedDisabled,
-    onPress: readOnly ? undefined : handleToggle,
-    accessibilityState: {
-      expanded: isActive,
-      disabled: mergedDisabled
-    },
-    titleStyle: titleStyle,
-    labelStyle: descriptionStyle,
-    rightIcon: headerRightIcon
-  }), showHeaderBottomBorder ? /*#__PURE__*/_react().default.createElement(Hairline, {
-    tokens: tokens,
-    position: "bottom",
-    color: colors.border,
-    inset: spacing.paddingHorizontal
-  }) : null), /*#__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
-    }]
-  }, renderChildren())));
-});
-Collapse.Panel = CollapsePanel;
-Collapse.Item = CollapsePanel;
-Collapse.displayName = 'Collapse';
-var _default = exports.default = Collapse;

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

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCollapseTokens = exports.createCollapseTokens = void 0;
-var _designSystem = require("../../design-system");
-const createCollapseTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography,
-    radii
-  } = foundations;
-  return {
-    defaults: {
-      accordion: false,
-      border: true,
-      iconPosition: 'right',
-      panelBorder: true,
-      panelIsLink: true,
-      panelSize: 'normal',
-      animationDuration: 200
-    },
-    layout: {
-      container: {
-        position: 'relative'
-      },
-      panel: {
-        position: 'relative'
-      },
-      hairline: {
-        position: 'absolute'
-      },
-      headerWrapper: {
-        position: 'relative'
-      },
-      bodyWrapper: {
-        position: 'relative',
-        overflow: 'hidden'
-      },
-      headerIconRow: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      bodyContent: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0
-      }
-    },
-    colors: {
-      border: palette.default[200],
-      title: palette.default[800],
-      description: palette.default[500],
-      background: '#ffffff',
-      active: palette.default[50],
-      arrow: palette.default[400],
-      disabled: palette.default[400]
-    },
-    typography: {
-      titleSize: fontSize.md,
-      descriptionSize: fontSize.sm,
-      fontFamily: typography.fontFamily,
-      titleWeight: String(typography.weight.medium)
-    },
-    panel: {
-      borderRadius: radii.sm
-    },
-    spacing: {
-      paddingVertical: spacing.md,
-      paddingHorizontal: spacing.lg,
-      descriptionTop: spacing.xs,
-      iconGap: 8
-    }
-  };
-};
-exports.createCollapseTokens = createCollapseTokens;
-const useCollapseTokens = exports.useCollapseTokens = (0, _designSystem.createComponentTokensHook)('collapse', createCollapseTokens);

package/dist/cjs/components/collapse/types.d.ts

@@ -1,47 +0,0 @@
-import type { ViewStyle } from 'react-native'
-
-export interface CollapseTokens {
-  defaults: {
-    accordion: boolean
-    border: boolean
-    iconPosition: 'left' | 'right'
-    panelBorder: boolean
-    panelIsLink: boolean
-    panelSize: 'normal' | 'large'
-    animationDuration: number
-  }
-  layout: {
-    container: ViewStyle
-    panel: ViewStyle
-    hairline: ViewStyle
-    headerWrapper: ViewStyle
-    bodyWrapper: ViewStyle
-    headerIconRow: ViewStyle
-    bodyContent: ViewStyle
-  }
-  colors: {
-    border: string
-    title: string
-    description: string
-    background: string
-    active: string
-    arrow: string
-    disabled: string
-  }
-  typography: {
-    titleSize: number
-    descriptionSize: number
-    fontFamily: string
-    titleWeight: string
-  }
-  panel: {
-    borderRadius: number
-  }
-  spacing: {
-    paddingVertical: number
-    paddingHorizontal: number
-    descriptionTop: number
-    iconGap: number
-  }
-}
-

package/dist/cjs/components/config-provider/ConfigProvider.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConfigProvider = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-var _ThemeProvider = require("../../design-system/ThemeProvider");
-var _portal = require("../portal");
-var _LocaleContext = require("./LocaleContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ConfigProvider = ({
-  theme,
-  locale,
-  children
-}) => {
-  const parentLocale = _react().default.useContext(_LocaleContext.LocaleContext);
-  return /*#__PURE__*/_react().default.createElement(_ThemeProvider.ThemeProvider, {
-    value: theme
-  }, /*#__PURE__*/_react().default.createElement(_LocaleContext.LocaleContext.Provider, {
-    value: locale ?? parentLocale
-  }, /*#__PURE__*/_react().default.createElement(_portal.PortalHost, null, children)));
-};
-exports.ConfigProvider = ConfigProvider;

package/dist/cjs/components/config-provider/locale/types.d.ts

@@ -1,3 +0,0 @@
-import type { localeBase } from './base'
-
-export type Locale = typeof localeBase

package/dist/cjs/components/config-provider/types.d.ts

@@ -1,10 +0,0 @@
-import type React from 'react'
-
-import type { ThemeProviderValue } from '../../design-system/ThemeProvider'
-import type { Locale } from './locale/types'
-
-export interface ConfigProviderProps {
-  theme?: ThemeProviderValue
-  locale?: Locale
-  children: React.ReactNode
-}

package/dist/cjs/components/config-provider/useLocale.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useLocale = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-var _LocaleContext = require("./LocaleContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useLocale = () => _react().default.useContext(_LocaleContext.LocaleContext);
-exports.useLocale = useLocale;

package/dist/cjs/components/count-down/CountDown.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireDefault(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _hooks = require("../../hooks");
-var _date = require("../../utils/date");
-var _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 CountDown = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
-  const {
-    tokensOverride,
-    autoStart: autoStartProp,
-    millisecond: millisecondProp,
-    time: timeProp,
-    format: formatProp,
-    children,
-    onChange,
-    onFinish,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useCountDownTokens)(tokensOverride);
-  const autoStart = autoStartProp ?? tokens.defaults.autoStart;
-  const millisecond = millisecondProp ?? tokens.defaults.millisecond;
-  const time = timeProp ?? tokens.defaults.time;
-  const format = formatProp ?? tokens.defaults.format;
-  const normalizedTime = Math.max(0, Number(time) || 0);
-  const {
-    start,
-    pause,
-    reset,
-    current
-  } = (0, _hooks.useCountDown)({
-    time: normalizedTime,
-    millisecond,
-    onChange,
-    onFinish
-  });
-  const resetTime = () => {
-    reset(normalizedTime);
-    if (autoStart && normalizedTime > 0) {
-      start();
-    }
-  };
-  _react().default.useEffect(() => {
-    resetTime();
-    return () => {
-      pause();
-    };
-  }, [autoStart, normalizedTime, pause, reset, start]);
-  _react().default.useImperativeHandle(ref, () => ({
-    start,
-    pause,
-    reset: resetTime
-  }));
-  const defaultTextStyle = tokens.layout.text;
-  const content = (0, _validate.isFunction)(children) ? children(current) : (0, _date.formatDuration)(format, current);
-  const contentNode = (0, _validate.isText)(content) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: defaultTextStyle
-  }, content) : content;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: style
-  }, rest), contentNode);
-});
-CountDown.displayName = 'CountDown';
-var _default = exports.default = CountDown;

package/dist/cjs/components/count-down/types.d.ts

@@ -1,33 +0,0 @@
-import type { TextStyle, ViewProps } from 'react-native'
-import type { CountDownCurrentTime } from '../../hooks'
-
-import type { DeepPartial } from '../../types'
-
-export type CountDownInstance = {
-  start: () => void
-  pause: () => void
-  reset: () => void
-}
-
-export interface CountDownTokens {
-  defaults: {
-    autoStart: boolean
-    millisecond: boolean
-    time: number
-    format: string
-  }
-  layout: {
-    text: TextStyle
-  }
-}
-
-export interface CountDownProps extends Omit<ViewProps, 'children'> {
-  autoStart?: boolean
-  millisecond?: boolean
-  time?: number | string
-  format?: string
-  children?: (current: CountDownCurrentTime) => React.ReactNode
-  onChange?: (current: CountDownCurrentTime) => void
-  onFinish?: () => void
-  tokensOverride?: DeepPartial<CountDownTokens>
-}