react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/checkbox/Checkbox.js

@@ -1,220 +1 @@
-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, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
-import { Platform, Pressable, Text, View } from 'react-native';
-import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
-import { useToggleState } from '@react-stately/toggle';
-import { CheckboxGroupContext } from './CheckboxContext';
-import { useCheckboxTokens } from './tokens';
-import { createHairlineView } from '../../utils';
-import { isRenderable, isText } from '../../utils/validate';
-const EMPTY_CHECKBOX_GROUP_STATE = {
-  value: [],
-  isDisabled: false,
-  isReadOnly: false,
-  isSelected: () => false,
-  setValue: () => {},
-  addValue: () => {},
-  removeValue: () => {},
-  toggleValue: () => {}
-};
-const CheckboxImpl = (p, ref) => {
-  const {
-    children,
-    name,
-    value,
-    iconRender,
-    bindGroup: bgp,
-    shape,
-    iconSize,
-    checkedColor,
-    labelPosition,
-    labelDisabled,
-    disabled,
-    style,
-    labelStyle,
-    tokensOverride,
-    hitSlop = 8,
-    accessibilityLabel,
-    ['aria-label']: al,
-    onClick,
-    onChange,
-    ...rest
-  } = p;
-  const t = useCheckboxTokens(tokensOverride);
-  const g = useContext(CheckboxGroupContext);
-  const bg = bgp ?? t.defaults.bindGroup;
-  const rs = shape ?? g?.shape ?? t.defaults.shape;
-  const ris = iconSize ?? g?.iconSize ?? t.defaults.iconSize;
-  const rcc = checkedColor ?? g?.checkedColor ?? t.colors.checkedBackground;
-  const rir = iconRender ?? g?.iconRender;
-  const rlp = labelPosition ?? t.defaults.labelPosition;
-  const rld = labelDisabled ?? g?.labelDisabled ?? t.defaults.labelDisabled;
-  const rd = Boolean(disabled || g?.state.isDisabled);
-  const rv = value ?? name;
-  const sv = rv == null ? undefined : String(rv);
-  const ir = useRef(null);
-  useImperativeHandle(ref, () => ir.current);
-  const ss = useToggleState({
-    isSelected: p.checked,
-    defaultSelected: p.defaultChecked,
-    onChange
-  });
-  const ig = !!g && sv !== undefined && bg;
-  const {
-    onBlur,
-    onFocus,
-    ...cr
-  } = rest;
-  useEffect(() => {
-    if (g && bg && sv !== undefined && rv !== undefined) {
-      g.registerValue(sv, rv, rd);
-      return () => g.unregisterValue(sv);
-    }
-    ;
-    return undefined;
-  }, [bg, g, sv, rv, rd]);
-  const ral = accessibilityLabel ?? al ?? (isText(children) ? String(children) : undefined) ?? sv ?? 'checkbox';
-  const ar = ir;
-  const {
-    inputProps: gip
-  } = useCheckboxGroupItem({
-    ...cr,
-    value: sv ?? '',
-    isDisabled: rd,
-    'aria-label': ral
-  }, ig && g ? g.state : EMPTY_CHECKBOX_GROUP_STATE, ar);
-  const {
-    inputProps: sip
-  } = useCheckbox({
-    ...cr,
-    isDisabled: rd,
-    value: sv,
-    'aria-label': ral
-  }, ss, ar);
-  const ip = ig && g ? gip : sip;
-  const ic = ig && g ? g.state.isSelected(sv) : p.checked !== undefined ? p.checked : ss.isSelected;
-  const br = rs === 'round' ? ris / 2 : t.radii.square;
-  const bc = rd ? t.colors.disabledBorder : ic ? rcc : t.colors.border;
-  const bgc = rd ? t.colors.disabledBackground : ic ? rcc : t.colors.background;
-  const lc = rd || rld ? t.colors.labelDisabled : t.colors.label;
-  const ss_ = rlp === 'left' ? {
-    marginRight: t.spacing.gap
-  } : {
-    marginLeft: t.spacing.gap
-  };
-  const oop = ip?.onPress;
-  const mip = ip ? {
-    ...ip,
-    onPress: e => {
-      onClick?.(e);
-      if (ig && g?.max && !ic && g.state.value.length >= g.max) return;
-      if (oop) {
-        oop(e);
-        return;
-      }
-      if (ig && g && sv !== undefined) {
-        if (ic) g.state.removeValue(sv);else g.state.addValue(sv);
-        return;
-      }
-      if (p.checked !== undefined) {
-        onChange?.(!p.checked);
-        return;
-      }
-      if (onChange) {
-        ss.setSelected(!ss.isSelected);
-      }
-    }
-  } : {};
-  const ln = !isRenderable(children) ? null : isText(children) ? /*#__PURE__*/React.createElement(Text, {
-    accessible: false,
-    style: [t.layout.label, {
-      color: lc,
-      fontSize: t.typography.fontSize,
-      lineHeight: t.typography.fontSize * t.typography.lineHeightMultiplier,
-      fontFamily: t.typography.fontFamily,
-      fontWeight: t.typography.fontWeight
-    }, labelStyle]
-  }, children) : /*#__PURE__*/React.createElement(View, {
-    accessible: false,
-    style: labelStyle
-  }, children);
-  const ibs = {
-    width: ris,
-    height: ris,
-    borderRadius: br,
-    backgroundColor: bgc
-  };
-  const di = /*#__PURE__*/React.createElement(View, {
-    style: [t.layout.icon, ibs]
-  }, ic && /*#__PURE__*/React.createElement(Text, {
-    style: [t.layout.checkmark, {
-      color: t.colors.checkmark,
-      fontSize: ris * t.icon.scale
-    }]
-  }, "\u2713"), /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: bc,
-      borderRadius: br
-    })
-  }));
-  let iv = di;
-  if (rir) {
-    iv = rir({
-      checked: Boolean(ic),
-      disabled: Boolean(rd)
-    }) ?? null;
-  }
-  const i = !rd && !rld;
-  const lw = ln && /*#__PURE__*/React.createElement(View, {
-    style: [t.layout.labelWrapper, ss_],
-    pointerEvents: rld ? 'none' : undefined,
-    accessible: false
-  }, ln);
-  const iws = [t.layout.iconWrapper, rlp === 'left' ? {
-    marginLeft: t.spacing.gap
-  } : {
-    marginRight: t.spacing.gap
-  }];
-  const iw = i ? /*#__PURE__*/React.createElement(View, {
-    style: iws
-  }, iv) : /*#__PURE__*/React.createElement(Pressable, _extends({}, mip, {
-    ref: ir,
-    disabled: rd,
-    accessibilityLabel: ral,
-    accessibilityRole: "checkbox",
-    accessibilityState: {
-      checked: ic,
-      disabled: !!rd
-    },
-    style: iws,
-    hitSlop: hitSlop
-  }), iv);
-  const cnt = rlp === 'left' ? /*#__PURE__*/React.createElement(React.Fragment, null, lw, iw) : /*#__PURE__*/React.createElement(React.Fragment, null, iw, lw);
-  if (i) {
-    return /*#__PURE__*/React.createElement(Pressable, _extends({}, mip, {
-      ref: ir,
-      disabled: rd,
-      accessibilityLabel: ral,
-      accessibilityRole: "checkbox",
-      accessibilityState: {
-        checked: ic,
-        disabled: !!rd
-      },
-      style: ({
-        pressed
-      }) => [t.layout.container, style, Platform.OS === 'web' && {
-        cursor: 'pointer'
-      }, pressed && {
-        opacity: 0.8
-      }],
-      hitSlop: hitSlop
-    }), cnt);
-  }
-  return /*#__PURE__*/React.createElement(View, {
-    style: [t.layout.container, style]
-  }, cnt);
-};
-const CheckboxForwardRef = /*#__PURE__*/React.forwardRef(CheckboxImpl);
-export const Checkbox = /*#__PURE__*/React.memo(CheckboxForwardRef);
-export default Checkbox;
+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 l in a)({}).hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},_extends.apply(null,arguments)}import React,{useContext,useEffect,useImperativeHandle,useRef}from"react";import{Platform,Pressable,Text,View}from"react-native";import{useCheckbox,useCheckboxGroupItem}from"@react-native-aria/checkbox";import{useToggleState}from"@react-stately/toggle";import{CheckboxGroupContext}from"./CheckboxContext";import{useCheckboxTokens}from"./tokens";import{createHairlineView}from"../../utils";import{isRenderable,isText}from"../../utils/validate";const EMPTY_CHECKBOX_GROUP_STATE={value:[],isDisabled:!1,isReadOnly:!1,isSelected:()=>!1,setValue:()=>{},addValue:()=>{},removeValue:()=>{},toggleValue:()=>{}},CheckboxImpl=(e,t)=>{const{children:a,name:l,value:o,iconRender:i,bindGroup:c,shape:s,iconSize:r,checkedColor:n,labelPosition:d,labelDisabled:u,disabled:b,style:p,labelStyle:h,tokensOverride:m,hitSlop:f=8,accessibilityLabel:g,"aria-label":k,onClick:y,onChange:x,...R}=e,C=useCheckboxTokens(m),S=useContext(CheckboxGroupContext),v=c??C.defaults.bindGroup,E=s??S?.shape??C.defaults.shape,V=r??S?.iconSize??C.defaults.iconSize,P=n??S?.checkedColor??C.colors.checkedBackground,T=i??S?.iconRender,w=d??C.defaults.labelPosition,_=u??S?.labelDisabled??C.defaults.labelDisabled,O=Boolean(b||S?.state.isDisabled),B=o??l,D=null==B?void 0:String(B),G=useRef(null);useImperativeHandle(t,()=>G.current);const H=useToggleState({isSelected:e.checked,defaultSelected:e.defaultChecked,onChange:x}),z=!!S&&void 0!==D&&v,{onBlur:F,onFocus:I,...L}=R;useEffect(()=>{if(S&&v&&void 0!==D&&void 0!==B)return S.registerValue(D,B,O),()=>S.unregisterValue(D)},[v,S,D,B,O]);const W=g??k??(isText(a)?String(a):void 0)??D??"checkbox",M=G,{inputProps:j}=useCheckboxGroupItem({...L,value:D??"",isDisabled:O,"aria-label":W},z&&S?S.state:EMPTY_CHECKBOX_GROUP_STATE,M),{inputProps:A}=useCheckbox({...L,isDisabled:O,value:D,"aria-label":W},H,M),K=z&&S?j:A,U=z&&S?S.state.isSelected(D):void 0!==e.checked?e.checked:H.isSelected,X="round"===E?V/2:C.radii.square,Y=O?C.colors.disabledBorder:U?P:C.colors.border,q=O?C.colors.disabledBackground:U?P:C.colors.background,J=O||_?C.colors.labelDisabled:C.colors.label,N="left"===w?{marginRight:C.spacing.gap}:{marginLeft:C.spacing.gap},Q=K?.onPress,Z=K?{...K,onPress:t=>{y?.(t),z&&S?.max&&!U&&S.state.value.length>=S.max||(Q?Q(t):z&&S&&void 0!==D?U?S.state.removeValue(D):S.state.addValue(D):void 0===e.checked?x&&H.setSelected(!H.isSelected):x?.(!e.checked))}}:{},$=isRenderable(a)?isText(a)?React.createElement(Text,{accessible:!1,style:[C.layout.label,{color:J,fontSize:C.typography.fontSize,lineHeight:C.typography.fontSize*C.typography.lineHeightMultiplier,fontFamily:C.typography.fontFamily,fontWeight:C.typography.fontWeight},h]},a):React.createElement(View,{accessible:!1,style:h},a):null,ee={width:V,height:V,borderRadius:X,backgroundColor:q};let te=React.createElement(View,{style:[C.layout.icon,ee]},U&&React.createElement(Text,{style:[C.layout.checkmark,{color:C.colors.checkmark,fontSize:V*C.icon.scale}]},"✓"),React.createElement(View,{style:createHairlineView({position:"all",color:Y,borderRadius:X})}));T&&(te=T({checked:Boolean(U),disabled:Boolean(O)})??null);const ae=!O&&!_,le=$&&React.createElement(View,{style:[C.layout.labelWrapper,N],pointerEvents:_?"none":void 0,accessible:!1},$),oe=[C.layout.iconWrapper,"left"===w?{marginLeft:C.spacing.gap}:{marginRight:C.spacing.gap}],ie=ae?React.createElement(View,{style:oe},te):React.createElement(Pressable,_extends({},Z,{ref:G,disabled:O,accessibilityLabel:W,accessibilityRole:"checkbox",accessibilityState:{checked:U,disabled:!!O},style:oe,hitSlop:f}),te),ce="left"===w?React.createElement(React.Fragment,null,le,ie):React.createElement(React.Fragment,null,ie,le);return ae?React.createElement(Pressable,_extends({},Z,{ref:G,disabled:O,accessibilityLabel:W,accessibilityRole:"checkbox",accessibilityState:{checked:U,disabled:!!O},style:({pressed:e})=>[C.layout.container,p,"web"===Platform.OS&&{cursor:"pointer"},e&&{opacity:.8}],hitSlop:f}),ce):React.createElement(View,{style:[C.layout.container,p]},ce)},CheckboxForwardRef=React.forwardRef(CheckboxImpl);export const Checkbox=React.memo(CheckboxForwardRef);export default Checkbox;

package/dist/es/components/checkbox/CheckboxContext.js

@@ -1 +1 @@
-export { CheckboxGroupContext } from './CheckboxGroup';
+export{CheckboxGroupContext}from"./CheckboxGroup";

package/dist/es/components/checkbox/CheckboxGroup.js

@@ -1,117 +1 @@
-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 { View } from 'react-native';
-import { useCheckboxGroup } from '@react-native-aria/checkbox';
-import { useCheckboxGroupState } from '@react-stately/checkbox';
-import { useCheckboxTokens } from './tokens';
-import { isBoolean } from '../../utils';
-const serialize = value => String(value);
-export const CheckboxGroupContext = /*#__PURE__*/React.createContext(null);
-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 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 gpr = groupProps ?? {};
-  const {
-    [' aria-disabled']: __ariaDisabledTypo,
-    ...restGP
-  } = gpr;
-  const rGroupProps = useMemo(() => ({
-    ...restGP,
-    'aria-disabled': disabled
-  }), [disabled, restGP]);
-  const registerValue = useCallback((key, raw, itemDisabled) => {
-    registryRef.current.set(key, {
-      value: raw,
-      disabled: itemDisabled
-    });
-  }, []);
-  const unregisterValue = useCallback(key => {
-    registryRef.current.delete(key);
-  }, []);
-  const chArr = useMemo(() => React.Children.toArray(children).filter(ch => ch != null && !isBoolean(ch)), [children]);
-  const toggleAll = useCallback((options = {}) => {
-    const opts = isBoolean(options) ? {
-      checked: options
-    } : options;
-    const {
-      checked: tgt,
-      skipDisabled
-    } = opts;
-    const cur = new Set(state.value ?? []);
-    const nextKeys = [];
-    registryRef.current.forEach((meta, key) => {
-      const isDis = !!meta.disabled || disabled;
-      if (skipDisabled && isDis) {
-        if (cur.has(key)) nextKeys.push(key);
-        return;
-      }
-      ;
-      if (tgt === true ? true : tgt === false ? false : !cur.has(key)) nextKeys.push(key);
-    });
-    state.setValue(nextKeys);
-  }, [disabled, state]);
-  useImperativeHandle(ref, () => ({
-    toggleAll
-  }), [toggleAll]);
-  const ctxVal = useMemo(() => ({
-    state,
-    direction,
-    shape,
-    iconSize,
-    iconRender,
-    checkedColor,
-    labelDisabled,
-    max,
-    registerValue,
-    unregisterValue
-  }), [checkedColor, direction, iconRender, iconSize, labelDisabled, max, registerValue, shape, state, unregisterValue]);
-  const ctrStyle = [direction === 'horizontal' ? tokens.layout.groupHorizontal : tokens.layout.groupVertical, {
-    columnGap: direction === 'horizontal' ? gap : undefined,
-    rowGap: gap
-  }, style];
-  return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
-    value: ctxVal
-  }, /*#__PURE__*/React.createElement(View, _extends({}, rGroupProps, viewProps, {
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    style: ctrStyle
-  }), chArr));
-});
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useImperativeHandle,useMemo,useRef}from"react";import{View}from"react-native";import{useCheckboxGroup}from"@react-native-aria/checkbox";import{useCheckboxGroupState}from"@react-stately/checkbox";import{useCheckboxTokens}from"./tokens";import{isBoolean}from"../../utils";const serialize=e=>String(e);export const CheckboxGroupContext=React.createContext(null);export const CheckboxGroup=React.forwardRef((e,a)=>{const{value:t,defaultValue:o,onChange:r,disabled:i,direction:l,shape:s,iconSize:c,checkedColor:n,iconRender:u,labelDisabled:d,max:p,gap:b,children:h,style:m,tokensOverride:k,accessibilityLabel:x,accessibilityHint:C,...f}=e,g=useCheckboxTokens(k),v=i??g.defaults.groupDisabled,y=l??g.defaults.groupDirection,R=Math.max(0,b??g.spacing.groupGap),G=useRef(new Map),z=useCheckboxGroupState({value:t?.map(serialize),defaultValue:o?.map(serialize),onChange:e=>{r?.(e.map(e=>G.current.get(e)?.value??e))},isDisabled:v}),{groupProps:V}=useCheckboxGroup({isDisabled:v,"aria-label":x,"aria-describedby":C},z),w=V??{},{" aria-disabled":D,...M}=w,S=useMemo(()=>({...M,"aria-disabled":v}),[v,M]),H=useCallback((e,a,t)=>{G.current.set(e,{value:a,disabled:t})},[]),O=useCallback(e=>{G.current.delete(e)},[]),_=useMemo(()=>React.Children.toArray(h).filter(e=>null!=e&&!isBoolean(e)),[h]),B=useCallback((e={})=>{const a=isBoolean(e)?{checked:e}:e,{checked:t,skipDisabled:o}=a,r=new Set(z.value??[]),i=[];G.current.forEach((e,a)=>{const l=!!e.disabled||v;o&&l?r.has(a)&&i.push(a):(!0===t||!1!==t&&!r.has(a))&&i.push(a)}),z.setValue(i)},[v,z]);useImperativeHandle(a,()=>({toggleAll:B}),[B]);const E=useMemo(()=>({state:z,direction:y,shape:s,iconSize:c,iconRender:u,checkedColor:n,labelDisabled:d,max:p,registerValue:H,unregisterValue:O}),[n,y,u,c,d,p,H,s,z,O]),P=["horizontal"===y?g.layout.groupHorizontal:g.layout.groupVertical,{columnGap:"horizontal"===y?R:void 0,rowGap:R},m];return React.createElement(CheckboxGroupContext.Provider,{value:E},React.createElement(View,_extends({},S,f,{accessibilityLabel:x,accessibilityHint:C,style:P}),_))});

package/dist/es/components/checkbox/index.js

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

package/dist/es/components/checkbox/tokens.js

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

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

@@ -1,187 +1 @@
-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 { useReducedMotion } from '../../hooks/animation';
-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 || 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 = Animated.createAnimatedComponent(SvgCircle);
-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 = useCircleTokens(tokensOverride);
-  const reducedMotion = 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, parseNumber(size, tokens.defaults.size));
-  const rStroke = Math.max(0, parseNumber(strokeWidth, tokens.defaults.strokeWidth));
-  const rate = clamp(parsePercentage(rateP ?? tokens.defaults.rate), 0, 100);
-  const rColor = color ?? tokens.colors.color;
-  const rLayerColor = layerColor ?? tokens.colors.layerColor;
-  const baseStyle = useMemo(() => [tokens.layout.root, {
-    width: rSize,
-    height: rSize
-  }, style], [rSize, style, tokens.layout.root]);
-  const contentStyle = useMemo(() => [tokens.layout.content, {
-    width: rSize,
-    height: rSize
-  }], [rSize, tokens.layout.content]);
-  const content = useMemo(() => {
-    if (children == null || children === false) return null;
-    const arr = React.Children.toArray(children);
-    if (arr.every(isText)) return /*#__PURE__*/React.createElement(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 (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.createElement(View, {
-      style: baseStyle
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [tokens.layout.webRing, webRingStyle]
-    }), showInner ? /*#__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
-    }, isText(content) ? /*#__PURE__*/React.createElement(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 = useRef(new Animated.Value(dashTarget)).current;
-  useEffect(() => {
-    if (!animated || safeDur <= 0 || reducedMotion) {
-      dashOffset.setValue(dashTarget);
-      return;
-    }
-    ;
-    const anim = 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.createElement(View, {
-    style: baseStyle
-  }, /*#__PURE__*/React.createElement(Svg, {
-    width: rSize,
-    height: rSize
-  }, /*#__PURE__*/React.createElement(SvgCircle, {
-    cx: center,
-    cy: center,
-    r: radius,
-    stroke: rLayerColor,
-    strokeWidth: rStroke,
-    fill: fill
-  }), /*#__PURE__*/React.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.createElement(View, {
-    pointerEvents: "box-none",
-    style: contentStyle
-  }, isText(content) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.text, {
-      color: tokens.colors.text,
-      fontSize: tokens.typography.fontSize
-    }, textStyle]
-  }, content) : content));
-};
-export const Circle = /*#__PURE__*/React.memo(CircleImpl);
-Circle.displayName = 'Circle';
-export default Circle;
+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{useReducedMotion}from"../../hooks/animation";import{useCircleTokens}from"./tokens";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=Animated.createAnimatedComponent(SvgCircle),CircleImpl=e=>{const{tokensOverride:t,rate:r,size:a,strokeWidth:o,color:i,layerColor:n,fill:l,clockwise:s,startPosition:c,lineCap:m,animated:u,animationDuration:d,style:p,textStyle:g,children:f}=e,h=useCircleTokens(t),y=useReducedMotion(),x=l??h.defaults.fill,R=s??h.defaults.clockwise,k=c??h.defaults.startPosition,C=m??h.defaults.lineCap,b=u??h.defaults.animated,S=Math.max(0,parseNumber(a,h.defaults.size)),T=Math.max(0,parseNumber(o,h.defaults.strokeWidth)),w=clamp(parsePercentage(r??h.defaults.rate),0,100),E=i??h.colors.color,v=n??h.colors.layerColor,M=useMemo(()=>[h.layout.root,{width:S,height:S},p],[S,p,h.layout.root]),$=useMemo(()=>[h.layout.content,{width:S,height:S}],[S,h.layout.content]),A=useMemo(()=>{if(null==f||!1===f)return null;const e=React.Children.toArray(f);return e.every(isText)?React.createElement(Text,{style:[h.layout.text,{color:h.colors.text,fontSize:h.typography.fontSize,lineHeight:h.typography.lineHeight},g]},e.map(String).join("")):f},[f,g,h.colors.text,h.layout.text,h.typography.fontSize,h.typography.lineHeight]);if("web"===Platform.OS){const e=Math.min(T,S/2),t=Math.max(0,S-2*e),r=w/100*360,a=WEB_ROTATION[k],o=t>0&&!isTransparentColor(x),i={width:S,height:S,borderRadius:S/2,backgroundImage:R?`conic-gradient(from ${a}deg, ${E} 0deg ${r}deg, ${v} ${r}deg 360deg)`:`conic-gradient(from ${a}deg, ${v} 0deg ${360-r}deg, ${E} ${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(i,{WebkitMaskImage:t,maskImage:t,WebkitMaskRepeat:"no-repeat",maskRepeat:"no-repeat",WebkitMaskSize:"100% 100%",maskSize:"100% 100%"})}return React.createElement(View,{style:M},React.createElement(View,{style:[h.layout.webRing,i]}),o?React.createElement(View,{style:[h.layout.webInner,{width:t,height:t,borderRadius:t/2,backgroundColor:x,left:e,top:e}]}):null,React.createElement(View,{pointerEvents:"box-none",style:$},isText(A)?React.createElement(Text,{style:[h.layout.text,{color:h.colors.text,fontSize:h.typography.fontSize},g]},A):A))}const I=Math.max(0,(S-T)/2),V=2*Math.PI*I,z=SVG_ROTATION[k],N=Math.max(0,d??h.defaults.animationDuration),O=(R?1:-1)*V*(1-w/100),W=useRef(new Animated.Value(O)).current;useEffect(()=>{if(!b||N<=0||y)return void W.setValue(O);const e=Animated.timing(W,{toValue:O,duration:N,useNativeDriver:!1,isInteraction:!1});return e.start(),()=>e.stop()},[b,W,O,y,N]);const P=S/2;return React.createElement(View,{style:M},React.createElement(Svg,{width:S,height:S},React.createElement(SvgCircle,{cx:P,cy:P,r:I,stroke:v,strokeWidth:T,fill:x}),React.createElement(AnimatedSvgCircle,{cx:P,cy:P,r:I,stroke:E,strokeWidth:T,fill:"transparent",strokeDasharray:`${V} ${V}`,strokeDashoffset:W,strokeLinecap:C,rotation:z,originX:P,originY:P})),React.createElement(View,{pointerEvents:"box-none",style:$},isText(A)?React.createElement(Text,{style:[h.layout.text,{color:h.colors.text,fontSize:h.typography.fontSize},g]},A):A))};export const Circle=React.memo(CircleImpl);Circle.displayName="Circle";export default Circle;

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

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