react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/checkbox/CheckboxGroup.js

@@ -0,0 +1,144 @@
+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); }
+import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { Platform, View } from 'react-native';
+import { useCheckboxGroup } from '@react-native-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { CheckboxGroupContext } from './CheckboxContext';
+import { useCheckboxTokens } from './tokens';
+import { isBoolean } from '../../utils';
+const serialize = value => String(value);
+export const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled: disabledProp,
+    direction: directionProp,
+    shape,
+    iconSize,
+    checkedColor,
+    iconRender,
+    labelDisabled,
+    max,
+    gap: gapProp,
+    children,
+    style,
+    tokensOverride,
+    accessibilityLabel,
+    accessibilityHint,
+    ...viewProps
+  } = props;
+  const tokens = useCheckboxTokens(tokensOverride);
+  const disabled = disabledProp ?? tokens.defaults.groupDisabled;
+  const direction = directionProp ?? tokens.defaults.groupDirection;
+  const gap = Math.max(0, gapProp ?? tokens.spacing.groupGap);
+  const supportsGap = Platform.OS === 'web';
+  const registryRef = useRef(new Map());
+  const state = useCheckboxGroupState({
+    value: value?.map(serialize),
+    defaultValue: defaultValue?.map(serialize),
+    onChange: next => {
+      onChange?.(next.map(key => registryRef.current.get(key)?.value ?? key));
+    },
+    isDisabled: disabled
+  });
+  const {
+    groupProps
+  } = useCheckboxGroup({
+    isDisabled: disabled,
+    'aria-label': accessibilityLabel,
+    'aria-describedby': accessibilityHint
+  }, state);
+  const groupPropsRecord = groupProps ?? {};
+  const {
+    [' aria-disabled']: __ariaDisabledTypo,
+    ...restGroupProps
+  } = groupPropsRecord;
+  const resolvedGroupProps = {
+    ...restGroupProps,
+    'aria-disabled': disabled
+  };
+  const registerValue = useCallback((key, raw, itemDisabled) => {
+    registryRef.current.set(key, {
+      value: raw,
+      disabled: itemDisabled
+    });
+  }, []);
+  const unregisterValue = useCallback(key => {
+    registryRef.current.delete(key);
+  }, []);
+  const childrenArray = React.Children.toArray(children).filter(child => child != null && !isBoolean(child));
+  const itemStyleForIndex = index => {
+    const isLast = index === childrenArray.length - 1;
+    if (direction === 'horizontal') {
+      return [tokens.layout.groupItem, !isLast && {
+        marginRight: gap
+      }];
+    }
+    return isLast ? tokens.layout.groupItem : [tokens.layout.groupItem, {
+      marginBottom: gap
+    }];
+  };
+  const toggleAll = useCallback((options = {}) => {
+    const opts = isBoolean(options) ? {
+      checked: options
+    } : options;
+    const {
+      checked: targetChecked,
+      skipDisabled
+    } = opts;
+    const current = new Set(state.value ?? []);
+    const nextKeys = [];
+    registryRef.current.forEach((meta, key) => {
+      const isDisabledItem = !!meta.disabled || disabled;
+      if (skipDisabled && isDisabledItem) {
+        if (current.has(key)) nextKeys.push(key);
+        return;
+      }
+      const shouldSelect = targetChecked === true ? true : targetChecked === false ? false : !current.has(key);
+      if (shouldSelect) {
+        nextKeys.push(key);
+      }
+    });
+    state.setValue(nextKeys);
+  }, [disabled, state]);
+  useImperativeHandle(ref, () => ({
+    toggleAll
+  }), [toggleAll]);
+  const contextValue = useMemo(() => ({
+    state,
+    direction,
+    shape,
+    iconSize,
+    iconRender,
+    checkedColor,
+    labelDisabled,
+    max,
+    registerValue,
+    unregisterValue
+  }), [state, direction, shape, iconSize, iconRender, checkedColor, labelDisabled, max]);
+  return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({}, resolvedGroupProps, viewProps, {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    style: [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, supportsGap ? {
+      columnGap: direction === 'horizontal' ? gap : undefined,
+      rowGap: gap
+    } : null, style]
+  }), supportsGap ? childrenArray : childrenArray.map((child, index) => {
+    const key = /*#__PURE__*/React.isValidElement(child) && child.key !== null ? child.key : index;
+    const itemStyle = itemStyleForIndex(index);
+    if (/*#__PURE__*/React.isValidElement(child) && child.type !== React.Fragment) {
+      const element = child;
+      return /*#__PURE__*/React.cloneElement(element, {
+        style: [element.props.style, itemStyle],
+        key
+      });
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      key: key,
+      style: itemStyle
+    }, child);
+  })));
+});

package/dist/es/checkbox/index.js

@@ -0,0 +1,5 @@
+import { Checkbox as CheckboxBase } from './Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+const Checkbox = CheckboxBase;
+Checkbox.Group = CheckboxGroup;
+export { Checkbox, CheckboxGroup };

package/dist/es/checkbox/tokens.js

@@ -0,0 +1,88 @@
+import { StyleSheet } from 'react-native';
+import { createComponentTokensHook } from '../../design-system';
+const createCheckboxTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii,
+    fontSize,
+    typography
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    defaults: {
+      shape: 'round',
+      iconSize: 20,
+      labelPosition: 'right',
+      labelDisabled: false,
+      bindGroup: true,
+      groupDisabled: false,
+      groupDirection: 'vertical'
+    },
+    layout: {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      iconWrapper: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      icon: {
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      checkmark: {
+        textAlign: 'center',
+        includeFontPadding: false
+      },
+      label: {
+        includeFontPadding: false
+      },
+      labelWrapper: {
+        flexShrink: 1
+      },
+      groupHorizontal: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center'
+      },
+      groupVertical: {
+        flexDirection: 'column'
+      },
+      groupItem: {
+        flexShrink: 0
+      }
+    },
+    colors: {
+      border: palette.default[400],
+      background: '#ffffff',
+      checkedBackground: palette.primary[500],
+      disabledBorder: palette.default[300],
+      disabledBackground: palette.default[100],
+      checkmark: onPrimary,
+      label: palette.default.foreground ?? '#111827',
+      labelDisabled: palette.default[400]
+    },
+    typography: {
+      fontSize: fontSize.md,
+      fontFamily: typography.fontFamily,
+      fontWeight: typography.weight.medium,
+      lineHeightMultiplier: typography.lineHeightMultiplier
+    },
+    spacing: {
+      gap: spacing.sm,
+      groupGap: spacing.md
+    },
+    radii: {
+      square: radii.xs
+    },
+    borders: {
+      width: StyleSheet.hairlineWidth
+    },
+    icon: {
+      scale: 0.65
+    }
+  };
+};
+export const useCheckboxTokens = createComponentTokensHook('checkbox', createCheckboxTokens);

package/dist/es/circle/Circle.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Platform, Text, View } from 'react-native';
+import Svg, { Circle as SvgCircle } from 'react-native-svg';
+import { isText, clamp, parseNumber, parsePercentage } from '../../utils';
+import { useCircleTokens } from './tokens';
+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) return true;
+  if (normalized === 'transparent') return true;
+  const rgbaMatch = normalized.match(/^rgba\(([^)]*)\)$/);
+  if (rgbaMatch) {
+    const parts = rgbaMatch[1].split(',').map(part => part.trim());
+    const alpha = Number(parts[3]);
+    return Number.isFinite(alpha) && alpha === 0;
+  }
+  return false;
+};
+const AnimatedSvgCircle = Animated.createAnimatedComponent(SvgCircle);
+export const Circle = props => {
+  const {
+    tokensOverride,
+    rate: rateProp,
+    size,
+    strokeWidth,
+    color,
+    layerColor,
+    fill: fillProp,
+    clockwise: clockwiseProp,
+    startPosition: startPositionProp,
+    lineCap: lineCapProp,
+    animated: animatedProp,
+    animationDuration,
+    style,
+    textStyle,
+    children
+  } = props;
+  const tokens = useCircleTokens(tokensOverride);
+  const fill = fillProp ?? tokens.defaults.fill;
+  const clockwise = clockwiseProp ?? tokens.defaults.clockwise;
+  const startPosition = startPositionProp ?? tokens.defaults.startPosition;
+  const lineCap = lineCapProp ?? tokens.defaults.lineCap;
+  const animated = animatedProp ?? tokens.defaults.animated;
+  const resolvedSize = Math.max(0, parseNumber(size, tokens.defaults.size));
+  const resolvedStrokeWidth = Math.max(0, parseNumber(strokeWidth, tokens.defaults.strokeWidth));
+  const rate = clamp(parsePercentage(rateProp ?? tokens.defaults.rate), 0, 100);
+  const resolvedColor = color ?? tokens.colors.color;
+  const resolvedLayerColor = layerColor ?? tokens.colors.layerColor;
+  const baseStyle = [tokens.layout.root, {
+    width: resolvedSize,
+    height: resolvedSize
+  }, style];
+  const contentStyle = [tokens.layout.content, {
+    width: resolvedSize,
+    height: resolvedSize
+  }];
+  const content = useMemo(() => {
+    if (children == null || children === false) return null;
+    const childArray = React.Children.toArray(children);
+    if (childArray.every(isText)) {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.text, {
+          color: tokens.colors.text,
+          fontSize: tokens.typography.fontSize,
+          lineHeight: tokens.typography.lineHeight
+        }, textStyle]
+      }, childArray.map(String).join(''));
+    }
+    return children;
+  }, [children, textStyle, tokens.colors.text, tokens.layout.text, tokens.typography.fontSize, tokens.typography.lineHeight]);
+  if (Platform.OS === 'web') {
+    const safeStroke = Math.min(resolvedStrokeWidth, resolvedSize / 2);
+    const innerSize = Math.max(0, resolvedSize - safeStroke * 2);
+    const progressAngle = rate / 100 * 360;
+    const rotation = WEB_ROTATION[startPosition];
+    const shouldRenderInner = innerSize > 0 && !isTransparentColor(fill);
+    const gradient = clockwise ? `conic-gradient(from ${rotation}deg, ${resolvedColor} 0deg ${progressAngle}deg, ${resolvedLayerColor} ${progressAngle}deg 360deg)` : `conic-gradient(from ${rotation}deg, ${resolvedLayerColor} 0deg ${360 - progressAngle}deg, ${resolvedColor} ${360 - progressAngle}deg 360deg)`;
+    const webRingStyle = {
+      width: resolvedSize,
+      height: resolvedSize,
+      borderRadius: resolvedSize / 2,
+      backgroundImage: gradient
+    };
+    if (safeStroke > 0) {
+      const mask = `radial-gradient(farthest-side, transparent calc(100% - ${safeStroke}px), #000 calc(100% - ${safeStroke}px))`;
+      webRingStyle.WebkitMaskImage = mask;
+      webRingStyle.maskImage = mask;
+      webRingStyle.WebkitMaskRepeat = 'no-repeat';
+      webRingStyle.maskRepeat = 'no-repeat';
+      webRingStyle.WebkitMaskSize = '100% 100%';
+      webRingStyle.maskSize = '100% 100%';
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: baseStyle
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.webRing, webRingStyle]
+    }), shouldRenderInner ? /*#__PURE__*/React.createElement(View, {
+      style: [tokens.layout.webInner, {
+        width: innerSize,
+        height: innerSize,
+        borderRadius: innerSize / 2,
+        backgroundColor: fill,
+        left: safeStroke,
+        top: safeStroke
+      }]
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "box-none",
+      style: contentStyle
+    }, content));
+  }
+  const radius = Math.max(0, (resolvedSize - resolvedStrokeWidth) / 2);
+  const circumference = 2 * Math.PI * radius;
+  const rotation = SVG_ROTATION[startPosition];
+  const safeDuration = Math.max(0, animationDuration ?? tokens.defaults.animationDuration);
+  const dashOffsetTarget = (clockwise ? 1 : -1) * circumference * (1 - rate / 100);
+  const dashOffset = useRef(new Animated.Value(dashOffsetTarget)).current;
+  useEffect(() => {
+    if (!animated || safeDuration <= 0) {
+      dashOffset.setValue(dashOffsetTarget);
+      return;
+    }
+    const animation = Animated.timing(dashOffset, {
+      toValue: dashOffsetTarget,
+      duration: safeDuration,
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [animated, dashOffset, dashOffsetTarget, safeDuration]);
+  const center = resolvedSize / 2;
+  return /*#__PURE__*/React.createElement(View, {
+    style: baseStyle
+  }, /*#__PURE__*/React.createElement(Svg, {
+    width: resolvedSize,
+    height: resolvedSize
+  }, /*#__PURE__*/React.createElement(SvgCircle, {
+    cx: center,
+    cy: center,
+    r: radius,
+    stroke: resolvedLayerColor,
+    strokeWidth: resolvedStrokeWidth,
+    fill: fill
+  }), /*#__PURE__*/React.createElement(AnimatedSvgCircle, {
+    cx: center,
+    cy: center,
+    r: radius,
+    stroke: resolvedColor,
+    strokeWidth: resolvedStrokeWidth,
+    fill: "transparent",
+    strokeDasharray: `${circumference} ${circumference}`,
+    strokeDashoffset: dashOffset,
+    strokeLinecap: lineCap,
+    rotation: rotation,
+    originX: center,
+    originY: center
+  })), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "box-none",
+    style: contentStyle
+  }, content));
+};
+Circle.displayName = 'Circle';
+export default Circle;

package/dist/es/circle/index.js

@@ -0,0 +1,2 @@
+import Circle from './Circle';
+export default Circle;

package/dist/es/circle/tokens.js

@@ -0,0 +1,48 @@
+import { createComponentTokensHook } from '../../design-system';
+export 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)
+  }
+});
+export const useCircleTokens = createComponentTokensHook('circle', createCircleTokens);