@factorialco/f0-react-native 0.34.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/lib/module/components/Button/index.js +1 -1
- package/lib/module/components/Button/index.js.map +1 -1
- package/lib/module/components/F0Button/F0Button.js +2 -0
- package/lib/module/components/F0Button/F0Button.js.map +1 -0
- package/lib/module/components/F0Button/F0Button.md +163 -0
- package/lib/module/components/F0Button/F0Button.styles.js +2 -0
- package/lib/module/components/F0Button/F0Button.styles.js.map +1 -0
- package/lib/module/components/F0Button/F0Button.types.js +2 -0
- package/lib/module/components/F0Button/F0Button.types.js.map +1 -0
- package/lib/module/components/F0Button/index.js +2 -0
- package/lib/module/components/F0Button/index.js.map +1 -0
- package/lib/module/components/Icon/index.js.map +1 -1
- package/lib/module/components/exports.js +1 -1
- package/lib/module/components/exports.js.map +1 -1
- package/lib/module/components/primitives/F0Image/F0Image.js +2 -0
- package/lib/module/components/primitives/F0Image/F0Image.js.map +1 -0
- package/lib/module/components/primitives/F0Image/F0Image.md +40 -0
- package/lib/module/components/primitives/F0Image/F0Image.types.js +2 -0
- package/lib/module/components/primitives/F0Image/F0Image.types.js.map +1 -0
- package/lib/module/components/primitives/F0Image/index.js +2 -0
- package/lib/module/components/primitives/F0Image/index.js.map +1 -0
- package/lib/typescript/components/Button/index.d.ts +18 -0
- package/lib/typescript/components/Button/index.d.ts.map +1 -1
- package/lib/typescript/components/F0Button/F0Button.d.ts +6 -0
- package/lib/typescript/components/F0Button/F0Button.d.ts.map +1 -0
- package/lib/typescript/components/F0Button/F0Button.styles.d.ts +161 -0
- package/lib/typescript/components/F0Button/F0Button.styles.d.ts.map +1 -0
- package/lib/typescript/components/F0Button/F0Button.types.d.ts +47 -0
- package/lib/typescript/components/F0Button/F0Button.types.d.ts.map +1 -0
- package/lib/typescript/components/F0Button/index.d.ts +4 -0
- package/lib/typescript/components/F0Button/index.d.ts.map +1 -0
- package/lib/typescript/components/Icon/index.d.ts +5 -0
- package/lib/typescript/components/Icon/index.d.ts.map +1 -1
- package/lib/typescript/components/exports.d.ts +2 -0
- package/lib/typescript/components/exports.d.ts.map +1 -1
- package/lib/typescript/components/primitives/F0Image/F0Image.d.ts +11 -0
- package/lib/typescript/components/primitives/F0Image/F0Image.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Image/F0Image.types.d.ts +21 -0
- package/lib/typescript/components/primitives/F0Image/F0Image.types.d.ts.map +1 -0
- package/lib/typescript/components/primitives/F0Image/index.d.ts +3 -0
- package/lib/typescript/components/primitives/F0Image/index.d.ts.map +1 -0
- package/package.json +2 -1
- package/src/components/Button/__snapshots__/index.spec.tsx.snap +11 -11
- package/src/components/Button/index.tsx +22 -2
- package/src/components/F0Button/F0Button.md +163 -0
- package/src/components/F0Button/F0Button.styles.ts +141 -0
- package/src/components/F0Button/F0Button.tsx +228 -0
- package/src/components/F0Button/F0Button.types.ts +82 -0
- package/src/components/F0Button/__tests__/F0Button.spec.tsx +285 -0
- package/src/components/F0Button/__tests__/__snapshots__/F0Button.spec.tsx.snap +966 -0
- package/src/components/F0Button/index.ts +7 -0
- package/src/components/Icon/index.tsx +5 -0
- package/src/components/exports.ts +2 -0
- package/src/components/primitives/F0Image/F0Image.md +40 -0
- package/src/components/primitives/F0Image/F0Image.tsx +48 -0
- package/src/components/primitives/F0Image/F0Image.types.ts +23 -0
- package/src/components/primitives/F0Image/__tests__/F0Image.spec.tsx +46 -0
- package/src/components/primitives/F0Image/index.ts +2 -0
package/README.md
CHANGED
|
@@ -224,18 +224,20 @@ Use this section after each manual update so people can install the latest build
|
|
|
224
224
|
### Basic Component Usage
|
|
225
225
|
|
|
226
226
|
```tsx
|
|
227
|
-
import {
|
|
227
|
+
import { F0Button, F0Icon, AppIcons } from "@factorialco/f0-react-native";
|
|
228
228
|
|
|
229
229
|
export default function App() {
|
|
230
230
|
return (
|
|
231
231
|
<>
|
|
232
|
-
<
|
|
233
|
-
<
|
|
232
|
+
<F0Button label="Click me" variant="default" size="md" />
|
|
233
|
+
<F0Icon icon={AppIcons.Calendar} size="md" />
|
|
234
234
|
</>
|
|
235
235
|
);
|
|
236
236
|
}
|
|
237
237
|
```
|
|
238
238
|
|
|
239
|
+
> Legacy `Button` and `Icon` remain available for backward compatibility, but are deprecated.
|
|
240
|
+
|
|
239
241
|
### Using the `cn` Utility
|
|
240
242
|
|
|
241
243
|
The package exports a `cn` utility function for merging Tailwind classes with automatic conflict resolution:
|
|
@@ -269,10 +271,10 @@ The `cn` utility:
|
|
|
269
271
|
All components use `tailwind-variants` for type-safe variant props:
|
|
270
272
|
|
|
271
273
|
```tsx
|
|
272
|
-
import {
|
|
274
|
+
import { F0Button } from "@factorialco/f0-react-native";
|
|
273
275
|
|
|
274
276
|
// Type-safe variants
|
|
275
|
-
<
|
|
277
|
+
<F0Button
|
|
276
278
|
label="Primary Button"
|
|
277
279
|
variant="default" // ✅ Autocomplete: "default" | "outline" | "critical" | "neutral" | "ghost" | "promote"
|
|
278
280
|
size="md" // ✅ Autocomplete: "sm" | "md" | "lg"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{forwardRef,useState}from"react";import{Pressable,Text,View}from"react-native";import{tv}from"tailwind-variants";import{cn}from"../../lib/utils";import{F0Icon}from"../primitives/F0Icon";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export var variants=["default","outline","critical","neutral","ghost","promote"];export var sizes=["sm","md","lg"];var buttonVariants=tv({base:"flex-row items-center justify-center rounded border-none grow-0",variants:{variant:{default:"bg-f0-background-accent-bold",outline:"bg-f0-background-inverse-secondary border border-f0-border",neutral:"bg-f0-background-secondary",critical:"bg-f0-background-secondary border border-f0-border",ghost:"bg-transparent",promote:"bg-f0-background-promote border border-f0-border-promote"},size:{sm:"h-6 rounded-sm",md:"h-8 rounded",lg:"h-10 rounded-md"},disabled:{true:"opacity-50",false:""},round:{true:"aspect-square p-0",false:"gap-1 px-2 sm:px-3 lg:px-4"}},defaultVariants:{variant:"default",size:"md",disabled:false,round:false}});var pressedVariants=tv({base:"",variants:{variant:{default:"bg-f0-background-accent-bold-hover",outline:"bg-f0-background-tertiary border-opacity-70",neutral:"bg-f0-background-secondary-hover",critical:"bg-f0-background-critical-bold border-transparent",ghost:"bg-f0-background-secondary-hover",promote:"bg-f0-background-promote-hover"}},defaultVariants:{variant:"default"}});var getIconColor=function getIconColor(variant,isPressed){switch(variant){case"default":return"inverse";case"critical":return isPressed?"inverse":"critical-bold";default:return"default";}};var getIconOnlyColor=function getIconOnlyColor(variant,isPressed){switch(variant){case"critical":return isPressed?"inverse":"critical-bold";case"default":return"inverse";case"outline":case"neutral":case"ghost":case"promote":default:return"bold";}};var getTextColorClass=function getTextColorClass(variant,isPressed){if(isPressed&&variant==="critical"){return"text-f0-foreground-inverse";}switch(variant){case"default":return"text-f0-foreground-inverse";case"critical":return"text-f0-foreground-critical";default:return"text-f0-foreground";}};export var Button=forwardRef(function Button(_ref,ref){var label=_ref.label,onPress=_ref.onPress,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$loading=_ref.loading,loading=_ref$loading===void 0?false:_ref$loading,icon=_ref.icon,emoji=_ref.emoji,_ref$hideLabel=_ref.hideLabel,hideLabel=_ref$hideLabel===void 0?false:_ref$hideLabel,_ref$variant=_ref.variant,variant=_ref$variant===void 0?"default":_ref$variant,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,_ref$round=_ref.round,round=_ref$round===void 0?false:_ref$round,className=_ref.className,accessibilityHint=_ref.accessibilityHint,_ref$showBadge=_ref.showBadge,showBadge=_ref$showBadge===void 0?false:_ref$showBadge,_ref$fullWidth=_ref.fullWidth,fullWidth=_ref$fullWidth===void 0?false:_ref$fullWidth;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoading=_useState2[0],setIsLoading=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isPressed=_useState4[0],setIsPressed=_useState4[1];var handlePress=function(){var _ref2=_asyncToGenerator(function*(){if(!onPress||disabled||loading||isLoading)return;var result=onPress();if(result instanceof Promise){setIsLoading(true);try{yield result;}finally{setIsLoading(false);}}});return function handlePress(){return _ref2.apply(this,arguments);};}();var isDisabled=disabled||loading||isLoading;var accessibilityLabel=`${label}${isDisabled?", disabled":""}${loading||isLoading?", loading":""}`;var shouldShowPressed=isPressed&&!isDisabled;return _jsxs(View,{className:`flex ${fullWidth?"flex-1":"
|
|
1
|
+
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{forwardRef,useState}from"react";import{Pressable,Text,View}from"react-native";import{tv}from"tailwind-variants";import{cn}from"../../lib/utils";import{F0Icon}from"../primitives/F0Icon";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export var variants=["default","outline","critical","neutral","ghost","promote"];export var sizes=["sm","md","lg"];var buttonVariants=tv({base:"flex-row items-center justify-center rounded border-none grow-0",variants:{variant:{default:"bg-f0-background-accent-bold",outline:"bg-f0-background-inverse-secondary border border-f0-border",neutral:"bg-f0-background-secondary",critical:"bg-f0-background-secondary border border-f0-border",ghost:"bg-transparent",promote:"bg-f0-background-promote border border-f0-border-promote"},size:{sm:"h-6 rounded-sm",md:"h-8 rounded",lg:"h-10 rounded-md"},disabled:{true:"opacity-50",false:""},round:{true:"aspect-square p-0",false:"gap-1 px-2 sm:px-3 lg:px-4"}},defaultVariants:{variant:"default",size:"md",disabled:false,round:false}});var pressedVariants=tv({base:"",variants:{variant:{default:"bg-f0-background-accent-bold-hover",outline:"bg-f0-background-tertiary border-opacity-70",neutral:"bg-f0-background-secondary-hover",critical:"bg-f0-background-critical-bold border-transparent",ghost:"bg-f0-background-secondary-hover",promote:"bg-f0-background-promote-hover"}},defaultVariants:{variant:"default"}});var getIconColor=function getIconColor(variant,isPressed){switch(variant){case"default":return"inverse";case"critical":return isPressed?"inverse":"critical-bold";default:return"default";}};var getIconOnlyColor=function getIconOnlyColor(variant,isPressed){switch(variant){case"critical":return isPressed?"inverse":"critical-bold";case"default":return"inverse";case"outline":case"neutral":case"ghost":case"promote":default:return"bold";}};var getTextColorClass=function getTextColorClass(variant,isPressed){if(isPressed&&variant==="critical"){return"text-f0-foreground-inverse";}switch(variant){case"default":return"text-f0-foreground-inverse";case"critical":return"text-f0-foreground-critical";default:return"text-f0-foreground";}};export var Button=forwardRef(function Button(_ref,ref){var label=_ref.label,onPress=_ref.onPress,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$loading=_ref.loading,loading=_ref$loading===void 0?false:_ref$loading,icon=_ref.icon,emoji=_ref.emoji,_ref$hideLabel=_ref.hideLabel,hideLabel=_ref$hideLabel===void 0?false:_ref$hideLabel,_ref$variant=_ref.variant,variant=_ref$variant===void 0?"default":_ref$variant,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,_ref$round=_ref.round,round=_ref$round===void 0?false:_ref$round,className=_ref.className,accessibilityHint=_ref.accessibilityHint,_ref$showBadge=_ref.showBadge,showBadge=_ref$showBadge===void 0?false:_ref$showBadge,_ref$fullWidth=_ref.fullWidth,fullWidth=_ref$fullWidth===void 0?false:_ref$fullWidth;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoading=_useState2[0],setIsLoading=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isPressed=_useState4[0],setIsPressed=_useState4[1];var handlePress=function(){var _ref2=_asyncToGenerator(function*(){if(!onPress||disabled||loading||isLoading)return;var result=onPress();if(result instanceof Promise){setIsLoading(true);try{yield result;}finally{setIsLoading(false);}}});return function handlePress(){return _ref2.apply(this,arguments);};}();var isDisabled=disabled||loading||isLoading;var accessibilityLabel=`${label}${isDisabled?", disabled":""}${loading||isLoading?", loading":""}`;var shouldShowPressed=isPressed&&!isDisabled;return _jsxs(View,{className:`flex ${fullWidth?"flex-1":"items-start"}`,children:[_jsxs(Pressable,{ref:ref,disabled:isDisabled,onPressIn:function onPressIn(){return setIsPressed(true);},onPressOut:function onPressOut(){return setIsPressed(false);},onPress:handlePress,className:cn(buttonVariants({variant:variant,size:size,disabled:isDisabled,round:hideLabel&&round}),shouldShowPressed&&pressedVariants({variant:variant}),className),accessibilityLabel:accessibilityLabel,accessibilityRole:"button",accessibilityState:{disabled:isDisabled,busy:loading||isLoading},accessibilityHint:accessibilityHint,children:[icon&&_jsx(F0Icon,{icon:icon,size:size==="sm"?"sm":"md",color:hideLabel&&round?getIconOnlyColor(variant,shouldShowPressed):getIconColor(variant,shouldShowPressed),className:hideLabel&&round?undefined:"-ml-0.5"}),emoji&&_jsx(Text,{className:cn("text-base font-medium",getTextColorClass(variant,shouldShowPressed)),children:emoji}),!hideLabel&&_jsx(Text,{className:cn("text-base font-medium",getTextColorClass(variant,shouldShowPressed)),children:label})]}),showBadge&&variant==="outline"&&_jsx(View,{accessibilityLabel:"Notification Badge",className:"absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f0-icon-accent"})]});});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useState","Pressable","Text","View","tv","cn","F0Icon","jsx","_jsx","jsxs","_jsxs","variants","sizes","buttonVariants","base","variant","default","outline","neutral","critical","ghost","promote","size","sm","md","lg","disabled","true","false","round","defaultVariants","pressedVariants","getIconColor","isPressed","getIconOnlyColor","getTextColorClass","Button","_ref","ref","label","onPress","_ref$disabled","_ref$loading","loading","icon","emoji","_ref$hideLabel","hideLabel","_ref$variant","_ref$size","_ref$round","className","accessibilityHint","_ref$showBadge","showBadge","_ref$fullWidth","fullWidth","_useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useState3","_useState4","setIsPressed","handlePress","_ref2","_asyncToGenerator","result","Promise","apply","arguments","isDisabled","accessibilityLabel","shouldShowPressed","children","onPressIn","onPressOut","accessibilityRole","accessibilityState","busy","color","undefined"],"sourceRoot":"../../../../src","sources":["components/Button/index.tsx"],"mappings":"wIAAA,MAAO,CAAAA,KAAK,EAAIC,UAAU,CAAEC,QAAQ,KAAQ,OAAO,CACnD,OAASC,SAAS,CAAEC,IAAI,CAAEC,IAAI,KAAQ,cAAc,CACpD,OAASC,EAAE,KAA2B,mBAAmB,CAEzD,OAASC,EAAE,KAAQ,iBAAiB,CACpC,OAASC,MAAM,KAAuC,sBAAsB,QAAAC,GAAA,IAAAC,IAAA,CAAAC,IAAA,IAAAC,KAAA,
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useState","Pressable","Text","View","tv","cn","F0Icon","jsx","_jsx","jsxs","_jsxs","variants","sizes","buttonVariants","base","variant","default","outline","neutral","critical","ghost","promote","size","sm","md","lg","disabled","true","false","round","defaultVariants","pressedVariants","getIconColor","isPressed","getIconOnlyColor","getTextColorClass","Button","_ref","ref","label","onPress","_ref$disabled","_ref$loading","loading","icon","emoji","_ref$hideLabel","hideLabel","_ref$variant","_ref$size","_ref$round","className","accessibilityHint","_ref$showBadge","showBadge","_ref$fullWidth","fullWidth","_useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useState3","_useState4","setIsPressed","handlePress","_ref2","_asyncToGenerator","result","Promise","apply","arguments","isDisabled","accessibilityLabel","shouldShowPressed","children","onPressIn","onPressOut","accessibilityRole","accessibilityState","busy","color","undefined"],"sourceRoot":"../../../../src","sources":["components/Button/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["label","onPress","disabled","loading","icon","emoji","hideLabel","variant","size","round","accessibilityHint","showBadge","fullWidth","testID","feedback"];import React,{forwardRef,useCallback,useEffect,useMemo,useState}from"react";import{View}from"react-native";import Animated,{Easing,cancelAnimation,useAnimatedStyle,useSharedValue,withRepeat,withTiming}from"react-native-reanimated";import{cn,omitProps}from"../../lib/utils";import{F0Icon}from"../primitives/F0Icon";import{F0Text}from"../primitives/F0Text";import{PressableFeedback}from"../primitives/PressableFeedback";import{buttonVariants,loadingContentVariants,loadingIndicatorVariants,pressedVariants,getIconColor,getIconOnlyColor,getTextColor}from"./F0Button.styles";import{F0_BUTTON_BLOCKED_FORWARD_PROPS}from"./F0Button.types";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var _worklet_10338588783765_init_data={code:"function F0ButtonTsx1(){const{spinnerRotation}=this.__closure;return{borderTopColor:\"transparent\",transform:[{rotateZ:spinnerRotation.value*360+\"deg\"}]};}",location:"/home/runner/work/f0/f0/packages/react-native/src/components/F0Button/F0Button.tsx",sourceMap:"{\"version\":3,\"names\":[\"F0ButtonTsx1\",\"spinnerRotation\",\"__closure\",\"borderTopColor\",\"transform\",\"rotateZ\",\"value\"],\"sources\":[\"/home/runner/work/f0/f0/packages/react-native/src/components/F0Button/F0Button.tsx\"],\"mappings\":\"AAmJmD,SAAAA,YAAMA,CAAA,QAAAC,eAAA,OAAAC,SAAA,CACnD,MAAO,CACLC,cAAc,CAAE,aAAa,CAC7BC,SAAS,CAAE,CAAC,CAAEC,OAAO,CAAKJ,eAAe,CAACK,KAAK,CAAG,GAAG,MAAM,CAAC,CAC9D,CAAC,CACH\",\"ignoreList\":[]}"};var F0Button=React.memo(forwardRef(function F0Button(_ref,ref){var label=_ref.label,onPress=_ref.onPress,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,_ref$loading=_ref.loading,loading=_ref$loading===void 0?false:_ref$loading,icon=_ref.icon,emoji=_ref.emoji,_ref$hideLabel=_ref.hideLabel,hideLabel=_ref$hideLabel===void 0?false:_ref$hideLabel,_ref$variant=_ref.variant,variant=_ref$variant===void 0?"default":_ref$variant,_ref$size=_ref.size,size=_ref$size===void 0?"md":_ref$size,_ref$round=_ref.round,round=_ref$round===void 0?false:_ref$round,accessibilityHint=_ref.accessibilityHint,_ref$showBadge=_ref.showBadge,showBadge=_ref$showBadge===void 0?false:_ref$showBadge,_ref$fullWidth=_ref.fullWidth,fullWidth=_ref$fullWidth===void 0?false:_ref$fullWidth,testID=_ref.testID,_ref$feedback=_ref.feedback,feedback=_ref$feedback===void 0?"both":_ref$feedback,rest=_objectWithoutProperties(_ref,_excluded);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLoading=_useState2[0],setIsLoading=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isPressed=_useState4[0],setIsPressed=_useState4[1];var spinnerRotation=useSharedValue(0);var isBusy=loading||isLoading;var isDisabled=disabled||isBusy;var isRound=hideLabel&&round;var handlePress=useCallback(_asyncToGenerator(function*(){if(!onPress||isDisabled)return;try{var result=onPress();if(result&&typeof result.then==="function"){setIsLoading(true);try{yield result;}catch(_unused){}finally{setIsLoading(false);}}}catch(_unused2){}}),[onPress,isDisabled]);useEffect(function(){if(!isBusy){cancelAnimation(spinnerRotation);spinnerRotation.value=0;return;}spinnerRotation.value=0;spinnerRotation.value=withRepeat(withTiming(1,{duration:1000,easing:Easing.linear}),-1,false);},[isBusy,spinnerRotation]);var handlePressIn=useCallback(function(){if(!isDisabled){setIsPressed(true);}},[isDisabled]);var handlePressOut=useCallback(function(){setIsPressed(false);},[]);var baseClassName=useMemo(function(){return buttonVariants({variant:variant,size:size,disabled:isDisabled,round:isRound});},[variant,size,isDisabled,isRound]);var accessibilityLabel=useMemo(function(){var parts=[label];if(isDisabled)parts.push("disabled");if(isBusy)parts.push("loading");return parts.join(", ");},[label,isBusy,isDisabled]);var shouldShowPressed=isPressed&&!isDisabled;var className=shouldShowPressed?cn(baseClassName,pressedVariants({variant:variant})):baseClassName;var iconIsOnly=isRound||hideLabel&&!emoji;var iconColor=icon?iconIsOnly?getIconOnlyColor(variant,shouldShowPressed):getIconColor(variant,shouldShowPressed):undefined;var textColor=getTextColor(variant,shouldShowPressed);var forwardedProps=omitProps(rest,F0_BUTTON_BLOCKED_FORWARD_PROPS);var loadingIndicatorStyle=useAnimatedStyle(function F0ButtonTsx1Factory(_ref2){var _worklet_10338588783765_init_data=_ref2._worklet_10338588783765_init_data,spinnerRotation=_ref2.spinnerRotation;var _e=[new global.Error(),-2,-27];var F0ButtonTsx1=function F0ButtonTsx1(){return{borderTopColor:"transparent",transform:[{rotateZ:`${spinnerRotation.value*360}deg`}]};};F0ButtonTsx1.__closure={spinnerRotation:spinnerRotation};F0ButtonTsx1.__workletHash=10338588783765;F0ButtonTsx1.__pluginVersion="0.5.1";F0ButtonTsx1.__initData=_worklet_10338588783765_init_data;F0ButtonTsx1.__stackDetails=_e;return F0ButtonTsx1;}({_worklet_10338588783765_init_data:_worklet_10338588783765_init_data,spinnerRotation:spinnerRotation}));return _jsxs(View,{className:`flex ${fullWidth?"flex-1":"items-start"}`,children:[_jsx(PressableFeedback,Object.assign({ref:ref},forwardedProps,{disabled:isDisabled,variant:feedback,onPress:handlePress,onPressIn:handlePressIn,onPressOut:handlePressOut,accessibilityLabel:accessibilityLabel,accessibilityRole:"button",accessibilityState:{disabled:isDisabled,busy:isBusy},accessibilityHint:accessibilityHint,testID:testID,children:_jsxs(View,{className:cn("relative",className),children:[_jsx(View,{testID:"f0-button-content",className:loadingContentVariants({loading:isBusy}),children:_jsxs(View,{className:"flex-row items-center justify-center gap-1",children:[icon&&_jsx(F0Icon,{icon:icon,size:"lg",className:isRound?undefined:"-ml-0.5",color:iconColor}),emoji&&_jsx(F0Text,{variant:"body-md-medium",color:textColor,children:emoji}),!hideLabel&&_jsx(F0Text,{variant:"body-md-medium",color:textColor,children:label})]})}),isBusy&&_jsx(View,{pointerEvents:"none",className:"absolute inset-0 items-center justify-center",children:_jsx(Animated.View,{testID:"f0-button-loading-indicator",accessibilityLabel:"Loading indicator",className:loadingIndicatorVariants({variant:variant,size:size}),style:loadingIndicatorStyle})})]})})),showBadge&&variant==="outline"&&_jsx(View,{accessibilityLabel:"Notification Badge",className:"absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f0-icon-accent"})]});}));F0Button.displayName="F0Button";export{F0Button};
|
|
2
|
+
//# sourceMappingURL=F0Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useMemo","useState","View","Animated","Easing","cancelAnimation","useAnimatedStyle","useSharedValue","withRepeat","withTiming","cn","omitProps","F0Icon","F0Text","PressableFeedback","buttonVariants","loadingContentVariants","loadingIndicatorVariants","pressedVariants","getIconColor","getIconOnlyColor","getTextColor","F0_BUTTON_BLOCKED_FORWARD_PROPS","jsx","_jsx","jsxs","_jsxs","_worklet_10338588783765_init_data","code","location","sourceMap","F0Button","memo","_ref","ref","label","onPress","_ref$disabled","disabled","_ref$loading","loading","icon","emoji","_ref$hideLabel","hideLabel","_ref$variant","variant","_ref$size","size","_ref$round","round","accessibilityHint","_ref$showBadge","showBadge","_ref$fullWidth","fullWidth","testID","_ref$feedback","feedback","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useState3","_useState4","isPressed","setIsPressed","spinnerRotation","isBusy","isDisabled","isRound","handlePress","_asyncToGenerator","result","then","_unused","_unused2","value","duration","easing","linear","handlePressIn","handlePressOut","baseClassName","accessibilityLabel","parts","push","join","shouldShowPressed","className","iconIsOnly","iconColor","undefined","textColor","forwardedProps","loadingIndicatorStyle","F0ButtonTsx1Factory","_ref2","_e","global","Error","F0ButtonTsx1","borderTopColor","transform","rotateZ","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","children","Object","assign","onPressIn","onPressOut","accessibilityRole","accessibilityState","busy","color","pointerEvents","style","displayName"],"sourceRoot":"../../../../src","sources":["components/F0Button/F0Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
# F0Button
|
|
2
|
+
|
|
3
|
+
Primary interactive button component for the F0 Design System.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
F0Button is the semantic button API for React Native in F0. It supports:
|
|
8
|
+
|
|
9
|
+
- Visual variants (`default`, `outline`, `critical`, `neutral`, `ghost`, `promote`)
|
|
10
|
+
- Size variants (`sm`, `md`, `lg`)
|
|
11
|
+
- Optional icon / emoji content
|
|
12
|
+
- Icon-only round mode
|
|
13
|
+
- Async press handlers with automatic loading-state handling
|
|
14
|
+
- Visible loading indicator when busy
|
|
15
|
+
- Press feedback control through `PressableFeedback`
|
|
16
|
+
|
|
17
|
+
## Architecture
|
|
18
|
+
|
|
19
|
+
- **Pattern:** Props API (Atomic) - element order is fixed: icon -> emoji -> label
|
|
20
|
+
- **Press feedback:** Uses `PressableFeedback` component for smooth animations
|
|
21
|
+
- **Press state:** Tracks pressed state with `useState` for color changes by variant
|
|
22
|
+
- **Loading state:** Supports auto-loading when `onPress` returns a Promise
|
|
23
|
+
- **Styling:** `className` and `style` are blocked in the public API and filtered at runtime
|
|
24
|
+
- **Location:** `src/components/F0Button/`
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
<!-- prettier-ignore -->
|
|
29
|
+
```tsx
|
|
30
|
+
import { F0Button } from "@factorialco/f0-react-native"
|
|
31
|
+
import { Archive } from "@factorialco/f0-react-native/icons/app"
|
|
32
|
+
|
|
33
|
+
<F0Button label="Submit" onPress={handleSubmit} />
|
|
34
|
+
|
|
35
|
+
<F0Button label="Delete" variant="critical" icon={Archive} />
|
|
36
|
+
|
|
37
|
+
<F0Button label="Add" icon={Archive} hideLabel round />
|
|
38
|
+
|
|
39
|
+
<F0Button label="Save" onPress={async () => await saveData()} />
|
|
40
|
+
|
|
41
|
+
<F0Button label="Love" emoji="🥰" variant="neutral" />
|
|
42
|
+
|
|
43
|
+
<F0Button label="Custom" feedback="scale" />
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Props
|
|
47
|
+
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
| ------------------- | -------------------------------- | ----------- | ---------------------------------------------------------- |
|
|
50
|
+
| `label` | `string` | required | Visible label and accessibility base label |
|
|
51
|
+
| `onPress` | `() => void \| Promise<unknown>` | — | Press handler; async return enables auto-loading |
|
|
52
|
+
| `variant` | `F0ButtonVariant` | `"default"` | Visual style variant |
|
|
53
|
+
| `size` | `F0ButtonSize` | `"md"` | Control height and radius |
|
|
54
|
+
| `disabled` | `boolean` | `false` | Disabled state |
|
|
55
|
+
| `loading` | `boolean` | `false` | External loading control |
|
|
56
|
+
| `icon` | `IconType` | — | Optional icon |
|
|
57
|
+
| `emoji` | `string` | — | Optional emoji |
|
|
58
|
+
| `hideLabel` | `boolean` | `false` | Hide visible label (keeps accessibility label) |
|
|
59
|
+
| `round` | `boolean` | `false` | Makes icon-only mode circular |
|
|
60
|
+
| `showBadge` | `boolean` | `false` | Notification badge (outline variant only) |
|
|
61
|
+
| `fullWidth` | `boolean` | `false` | Makes button fill available horizontal space |
|
|
62
|
+
| `feedback` | `PressableFeedbackVariant` | `"both"` | Press feedback mode (`both`, `scale`, `highlight`, `none`) |
|
|
63
|
+
| `accessibilityHint` | `string` | — | Optional screen-reader hint |
|
|
64
|
+
| `testID` | `string` | — | Test identifier |
|
|
65
|
+
|
|
66
|
+
### Variants
|
|
67
|
+
|
|
68
|
+
- `default` - primary/high-emphasis action
|
|
69
|
+
- `outline` - secondary action with border
|
|
70
|
+
- `critical` - destructive action
|
|
71
|
+
- `neutral` - neutral secondary action
|
|
72
|
+
- `ghost` - subtle transparent action
|
|
73
|
+
- `promote` - promotional/highlighted action
|
|
74
|
+
|
|
75
|
+
### Sizes
|
|
76
|
+
|
|
77
|
+
- `sm` - compact
|
|
78
|
+
- `md` - default
|
|
79
|
+
- `lg` - large
|
|
80
|
+
|
|
81
|
+
## Runtime Behavior
|
|
82
|
+
|
|
83
|
+
### Async onPress auto-loading
|
|
84
|
+
|
|
85
|
+
If `onPress` returns a Promise, F0Button enters internal loading state until it resolves.
|
|
86
|
+
|
|
87
|
+
<!-- prettier-ignore -->
|
|
88
|
+
```tsx
|
|
89
|
+
<F0Button
|
|
90
|
+
label="Save"
|
|
91
|
+
onPress={async () => {
|
|
92
|
+
await saveData()
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Loading visuals
|
|
98
|
+
|
|
99
|
+
When `loading` is `true` (external) or an async `onPress` is pending (internal):
|
|
100
|
+
|
|
101
|
+
- the button becomes non-interactive (`disabled`)
|
|
102
|
+
- a centered spinner indicator is rendered
|
|
103
|
+
- button content is visually hidden (`opacity`) to keep layout stable
|
|
104
|
+
|
|
105
|
+
### Press feedback
|
|
106
|
+
|
|
107
|
+
F0Button delegates touch feedback to `PressableFeedback` and supports semantic control via `feedback`.
|
|
108
|
+
|
|
109
|
+
<!-- prettier-ignore -->
|
|
110
|
+
```tsx
|
|
111
|
+
<F0Button label="Both" feedback="both" />
|
|
112
|
+
<F0Button label="Scale only" feedback="scale" />
|
|
113
|
+
<F0Button label="Highlight only" feedback="highlight" />
|
|
114
|
+
<F0Button label="No visual feedback" feedback="none" />
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Styling Contract
|
|
118
|
+
|
|
119
|
+
F0Button is semantic-first:
|
|
120
|
+
|
|
121
|
+
- `className` is **not** part of `F0ButtonProps`
|
|
122
|
+
- `style` is **not** part of `F0ButtonProps`
|
|
123
|
+
- Both are filtered at runtime before forwarding props to internal pressable primitives
|
|
124
|
+
|
|
125
|
+
This guarantees semantic variants remain source-of-truth and prevents style overrides from bypassing the API contract.
|
|
126
|
+
|
|
127
|
+
## Accessibility
|
|
128
|
+
|
|
129
|
+
- Always sets `accessibilityRole="button"`
|
|
130
|
+
- Auto-builds `accessibilityLabel` from `label` plus state:
|
|
131
|
+
- `"label, disabled"`
|
|
132
|
+
- `"label, disabled, loading"`
|
|
133
|
+
- Exposes `accessibilityState` with:
|
|
134
|
+
- `disabled`
|
|
135
|
+
- `busy`
|
|
136
|
+
- `hideLabel` does not remove accessibility label
|
|
137
|
+
|
|
138
|
+
## Testing
|
|
139
|
+
|
|
140
|
+
Main test suite:
|
|
141
|
+
|
|
142
|
+
- `src/components/F0Button/__tests__/F0Button.spec.tsx`
|
|
143
|
+
|
|
144
|
+
Coverage includes:
|
|
145
|
+
|
|
146
|
+
- snapshots across variants/sizes/states
|
|
147
|
+
- async loading behavior
|
|
148
|
+
- accessibility label/state
|
|
149
|
+
- badge rendering rules
|
|
150
|
+
- runtime blocking of `className`/`style`
|
|
151
|
+
|
|
152
|
+
## File Structure
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
src/components/F0Button/
|
|
156
|
+
├── F0Button.tsx
|
|
157
|
+
├── F0Button.types.ts
|
|
158
|
+
├── F0Button.styles.ts
|
|
159
|
+
├── F0Button.md
|
|
160
|
+
├── __tests__/
|
|
161
|
+
│ └── F0Button.spec.tsx
|
|
162
|
+
└── index.ts
|
|
163
|
+
```
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{tv}from"tailwind-variants";export var buttonVariants=tv({base:"flex-row items-center justify-center rounded border-none grow-0",variants:{variant:{default:"bg-f0-background-accent-bold",outline:"bg-f0-background-inverse-secondary border border-f0-border",neutral:"bg-f0-background-secondary",critical:"bg-f0-background-secondary border border-f0-border",ghost:"bg-transparent",promote:"bg-f0-background-promote border border-f0-border-promote"},size:{sm:"h-6 rounded-sm",md:"h-8 rounded",lg:"h-10 rounded-md"},disabled:{true:"opacity-50",false:""},round:{true:"aspect-square p-0",false:"gap-1 px-2 sm:px-3 lg:px-4"}},defaultVariants:{variant:"default",size:"md",disabled:false,round:false}});export var pressedVariants=tv({base:"",variants:{variant:{default:"bg-f0-background-accent-bold-hover",outline:"bg-f0-background-tertiary border-opacity-70",neutral:"bg-f0-background-secondary-hover",critical:"bg-f0-background-critical-bold border-transparent",ghost:"bg-f0-background-secondary-hover",promote:"bg-f0-background-promote-hover"}},defaultVariants:{variant:"default"}});export var loadingContentVariants=tv({variants:{loading:{true:"opacity-0",false:"opacity-100"}},defaultVariants:{loading:false}});export var loadingIndicatorVariants=tv({base:"rounded-full border-solid border-t-transparent",variants:{variant:{default:"border-f0-foreground-inverse",outline:"border-f0-foreground",neutral:"border-f0-foreground",critical:"border-f0-icon-critical",ghost:"border-f0-foreground",promote:"border-f0-icon-promote"},size:{sm:"h-3 w-3 border",md:"h-4 w-4 border-2",lg:"h-5 w-5 border-2"}},defaultVariants:{variant:"default",size:"md"}});export var getIconColor=function getIconColor(variant,isPressed){switch(variant){case"default":return"inverse";case"critical":return isPressed?"inverse":"critical-bold";default:return"default";}};export var getIconOnlyColor=function getIconOnlyColor(variant,isPressed){switch(variant){case"critical":return isPressed?"inverse":"critical-bold";case"default":return"inverse";case"outline":case"neutral":case"ghost":case"promote":default:return"bold";}};export var getTextColor=function getTextColor(variant,isPressed){if(isPressed&&variant==="critical"){return"inverse";}switch(variant){case"default":return"inverse";case"critical":return"critical";default:return"default";}};
|
|
2
|
+
//# sourceMappingURL=F0Button.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tv","buttonVariants","base","variants","variant","default","outline","neutral","critical","ghost","promote","size","sm","md","lg","disabled","true","false","round","defaultVariants","pressedVariants","loadingContentVariants","loading","loadingIndicatorVariants","getIconColor","isPressed","getIconOnlyColor","getTextColor"],"sourceRoot":"../../../../src","sources":["components/F0Button/F0Button.styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export var BUTTON_VARIANTS=["default","outline","critical","neutral","ghost","promote"];export var BUTTON_SIZES=["sm","md","lg"];var F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS=["onPressIn","onPressOut","accessibilityLabel","accessibilityRole","accessibilityState"];export var F0_BUTTON_BANNED_PROPS=["style","className"];export var F0_BUTTON_BLOCKED_FORWARD_PROPS=[].concat(F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS,F0_BUTTON_BANNED_PROPS);
|
|
2
|
+
//# sourceMappingURL=F0Button.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["BUTTON_VARIANTS","BUTTON_SIZES","F0_BUTTON_CONTROLLED_PASSTHROUGH_PROPS","F0_BUTTON_BANNED_PROPS","F0_BUTTON_BLOCKED_FORWARD_PROPS","concat"],"sourceRoot":"../../../../src","sources":["components/F0Button/F0Button.types.ts"],"mappings":"AASA,MAAO,IAAM,CAAAA,eAAe,CAAG,CAC7B,SAAS,CACT,SAAS,CACT,UAAU,CACV,SAAS,CACT,OAAO,CACP,SAAS,CACD,CAQV,MAAO,IAAM,CAAAC,YAAY,CAAG,CAAC,IAAI,CAAE,IAAI,CAAE,IAAI,CAAU,CASvD,GAAM,CAAAC,sCAAsC,CAAG,CAC7C,WAAW,CACX,YAAY,CACZ,oBAAoB,CACpB,mBAAmB,CACnB,oBAAoB,CACZ,CAEV,MAAO,IAAM,CAAAC,sBAAsB,CAAG,CAAC,OAAO,CAAE,WAAW,CAAU,CAErE,MAAO,IAAM,CAAAC,+BAA+B,IAAAC,MAAA,CACvCH,sCAAsC,CACtCC,sBAAsB,CACjB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["F0Button","BUTTON_VARIANTS","BUTTON_SIZES"],"sourceRoot":"../../../../src","sources":["components/F0Button/index.ts"],"mappings":"AAAA,OAASA,QAAQ,KAAQ,YAAY,CACrC,OAASC,eAAe,CAAEC,YAAY,KAAQ,kBAAkB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","tv","cn","applyIconInterop","jsx","_jsx","iconVariants","base","variants","size","xl","lg","md","sm","xs","defaultVariants","Icon","_ref","ref","_ref$size","icon","className","testID","props","_objectWithoutProperties","_excluded","Component","Object","assign"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":"wIAAA,MAAO,CAAAA,KAAK,EAAIC,UAAU,KAAQ,OAAO,CAEzC,OAASC,EAAE,KAA2B,mBAAmB,CAEzD,OAASC,EAAE,KAAQ,iBAAiB,CACpC,OAASC,gBAAgB,KAAuB,sBAAsB,QAAAC,GAAA,IAAAC,IAAA,yBAEtE,GAAM,CAAAC,YAAY,CAAGL,EAAE,CAAC,CACtBM,IAAI,CAAE,UAAU,CAChBC,QAAQ,CAAE,CACRC,IAAI,CAAE,CACJC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBACN,CACF,CAAC,CACDC,eAAe,CAAE,CACfN,IAAI,CAAE,IACR,CACF,CAAC,CAAC,
|
|
1
|
+
{"version":3,"names":["React","forwardRef","tv","cn","applyIconInterop","jsx","_jsx","iconVariants","base","variants","size","xl","lg","md","sm","xs","defaultVariants","Icon","_ref","ref","_ref$size","icon","className","testID","props","_objectWithoutProperties","_excluded","Component","Object","assign"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":"wIAAA,MAAO,CAAAA,KAAK,EAAIC,UAAU,KAAQ,OAAO,CAEzC,OAASC,EAAE,KAA2B,mBAAmB,CAEzD,OAASC,EAAE,KAAQ,iBAAiB,CACpC,OAASC,gBAAgB,KAAuB,sBAAsB,QAAAC,GAAA,IAAAC,IAAA,yBAEtE,GAAM,CAAAC,YAAY,CAAGL,EAAE,CAAC,CACtBM,IAAI,CAAE,UAAU,CAChBC,QAAQ,CAAE,CACRC,IAAI,CAAE,CACJC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBAAmB,CACvBC,EAAE,CAAE,mBACN,CACF,CAAC,CACDC,eAAe,CAAE,CACfN,IAAI,CAAE,IACR,CACF,CAAC,CAAC,CAoBF,MAAO,IAAM,CAAAO,IAAI,CAAGhB,UAAU,CAAiB,QAAS,CAAAgB,IAAIA,CAAAC,IAAA,CAE1DC,GAAG,CACH,KAAAC,SAAA,CAAAF,IAAA,CAFER,IAAI,CAAJA,IAAI,CAAAU,SAAA,UAAG,IAAI,CAAAA,SAAA,CAAEC,IAAI,CAAAH,IAAA,CAAJG,IAAI,CAAEC,SAAS,CAAAJ,IAAA,CAATI,SAAS,CAAEC,MAAM,CAAAL,IAAA,CAANK,MAAM,CAAKC,KAAK,CAAAC,wBAAA,CAAAP,IAAA,CAAAQ,SAAA,EAGhD,GAAI,CAACL,IAAI,CAAE,MAAO,KAAI,CAGtB,GAAM,CAAAM,SAAS,CAAGvB,gBAAgB,CAACiB,IAAI,CAAC,CAExC,MACE,CAAAf,IAAA,CAACqB,SAAS,CAAAC,MAAA,CAAAC,MAAA,EACRV,GAAG,CAAEA,GAAI,EACLK,KAAK,EACTF,SAAS,CAAEnB,EAAE,CAACI,YAAY,CAAC,CAAEG,IAAI,CAAJA,IAAK,CAAC,CAAC,CAAEY,SAAS,CAAE,CACjDC,MAAM,CAAEA,MAAO,EAChB,CAAC,CAEN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./F0Badge";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/PressableFeedback";
|
|
1
|
+
export*from"./Activity/ActivityItem";export*from"./Avatars/exports";export*from"./Badge";export*from"./Button";export*from"./F0Button";export*from"./F0Badge";export*from"./Counter";export*from"./ExampleComponent";export{Icon}from"./Icon";export*from"./Navigation/PageHeader";export*from"./OneChip";export*from"./OnePreset";export*from"./Tags/exports";export*from"./experimental/Lists/DataList";export*from"./experimental/Lists/DetailsItem";export*from"./experimental/Lists/DetailsItemsList";export*from"./primitives/F0Text";export*from"./primitives/F0Icon";export*from"./primitives/F0Image";export*from"./primitives/PressableFeedback";
|
|
2
2
|
//# sourceMappingURL=exports.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,WAAW,CACzB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,gCAAgC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Icon"],"sourceRoot":"../../../src","sources":["components/exports.ts"],"mappings":"AACA,WAAc,yBAAyB,CACvC,WAAc,mBAAmB,CACjC,WAAc,SAAS,CACvB,WAAc,UAAU,CACxB,WAAc,YAAY,CAC1B,WAAc,WAAW,CACzB,WAAc,WAAW,CACzB,WAAc,oBAAoB,CAClC,OAASA,IAAI,KAAwB,QAAQ,CAC7C,WAAc,yBAAyB,CACvC,WAAc,WAAW,CACzB,WAAc,aAAa,CAC3B,WAAc,gBAAgB,CAC9B,WAAc,+BAA+B,CAC7C,WAAc,kCAAkC,CAChD,WAAc,uCAAuC,CAGrD,WAAc,qBAAqB,CACnC,WAAc,qBAAqB,CACnC,WAAc,sBAAsB,CACpC,WAAc,gCAAgC","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["source","className","style","contentFit","transition","cachePolicy"];import{Image as ExpoImage}from"expo-image";import React from"react";import{withUniwind}from"uniwind";import{cn}from"../../../lib/utils";import{jsx as _jsx}from"react/jsx-runtime";var UniwindExpoImage=withUniwind(ExpoImage);var F0Image=React.memo(React.forwardRef(function(_ref,ref){var source=_ref.source,className=_ref.className,style=_ref.style,_ref$contentFit=_ref.contentFit,contentFit=_ref$contentFit===void 0?"cover":_ref$contentFit,_ref$transition=_ref.transition,transition=_ref$transition===void 0?150:_ref$transition,_ref$cachePolicy=_ref.cachePolicy,cachePolicy=_ref$cachePolicy===void 0?"memory-disk":_ref$cachePolicy,rest=_objectWithoutProperties(_ref,_excluded);return _jsx(UniwindExpoImage,Object.assign({ref:ref,source:source,className:cn("h-full w-full",className),style:style,contentFit:contentFit,transition:transition,cachePolicy:cachePolicy},rest));}));F0Image.displayName="F0Image";export{F0Image};
|
|
2
|
+
//# sourceMappingURL=F0Image.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Image","ExpoImage","React","withUniwind","cn","jsx","_jsx","UniwindExpoImage","F0Image","memo","forwardRef","_ref","ref","source","className","style","_ref$contentFit","contentFit","_ref$transition","transition","_ref$cachePolicy","cachePolicy","rest","_objectWithoutProperties","_excluded","Object","assign","displayName"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/F0Image.tsx"],"mappings":"0KAAA,OAASA,KAAK,GAAI,CAAAC,SAAS,KAAQ,YAAY,CAC/C,MAAO,CAAAC,KAAK,KAAM,OAAO,CACzB,OAASC,WAAW,KAAQ,SAAS,CAErC,OAASC,EAAE,KAAQ,oBAAoB,QAAAC,GAAA,IAAAC,IAAA,yBAIvC,GAAM,CAAAC,gBAAgB,CAAGJ,WAAW,CAACF,SAAS,CAAC,CAO/C,GAAM,CAAAO,OAAO,CAAGN,KAAK,CAACO,IAAI,CACxBP,KAAK,CAACQ,UAAU,CACd,SAAAC,IAAA,CAUEC,GAAG,CACA,IATD,CAAAC,MAAM,CAAAF,IAAA,CAANE,MAAM,CACNC,SAAS,CAAAH,IAAA,CAATG,SAAS,CACTC,KAAK,CAAAJ,IAAA,CAALI,KAAK,CAAAC,eAAA,CAAAL,IAAA,CACLM,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,OAAO,CAAAA,eAAA,CAAAE,eAAA,CAAAP,IAAA,CACpBQ,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,GAAG,CAAAA,eAAA,CAAAE,gBAAA,CAAAT,IAAA,CAChBU,WAAW,CAAXA,WAAW,CAAAD,gBAAA,UAAG,aAAa,CAAAA,gBAAA,CACxBE,IAAI,CAAAC,wBAAA,CAAAZ,IAAA,CAAAa,SAAA,EAIT,MACE,CAAAlB,IAAA,CAACC,gBAAgB,CAAAkB,MAAA,CAAAC,MAAA,EACfd,GAAG,CAAEA,GAAI,CACTC,MAAM,CAAEA,MAAO,CACfC,SAAS,CAAEV,EAAE,CAAC,eAAe,CAAEU,SAAS,CAAE,CAC1CC,KAAK,CAAEA,KAAM,CACbE,UAAU,CAAEA,UAAW,CACvBE,UAAU,CAAEA,UAAW,CACvBE,WAAW,CAAEA,WAAY,EACrBC,IAAI,CACT,CAAC,CAEN,CACF,CACF,CAAC,CAEDd,OAAO,CAACmB,WAAW,CAAG,SAAS,CAE/B,OAASnB,OAAO","ignoreList":[]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# F0Image
|
|
2
|
+
|
|
3
|
+
Image primitive for React Native in F0.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
`F0Image` is a thin wrapper around `expo-image` with className support and consistent defaults for `contentFit`, `transition`, and `cachePolicy`.
|
|
8
|
+
|
|
9
|
+
`expo-image` is a runtime peer dependency of `@factorialco/f0-react-native`. Ensure your app installs a compatible `expo-image` version.
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
<!-- prettier-ignore -->
|
|
14
|
+
```tsx
|
|
15
|
+
import { F0Image } from "@factorialco/f0-react-native"
|
|
16
|
+
|
|
17
|
+
<F0Image
|
|
18
|
+
source={{ uri: "https://example.com/avatar.png" }}
|
|
19
|
+
className="h-8 w-8 rounded-full"
|
|
20
|
+
accessibilityLabel="Profile picture"
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Default | Description |
|
|
27
|
+
| ------------- | ------------------- | ----------------- | ------------------------------ |
|
|
28
|
+
| `source` | `ImageSource` | required | Image source |
|
|
29
|
+
| `className` | `string` | `"h-full w-full"` | Utility classes for layout |
|
|
30
|
+
| `contentFit` | `ImageContentFit` | `"cover"` | Content fit mode |
|
|
31
|
+
| `transition` | `number \| boolean` | `150` | Transition duration / behavior |
|
|
32
|
+
| `cachePolicy` | `ImageCachePolicy` | `"memory-disk"` | Caching policy |
|
|
33
|
+
|
|
34
|
+
All other supported `expo-image` props are forwarded.
|
|
35
|
+
|
|
36
|
+
## Testing
|
|
37
|
+
|
|
38
|
+
Main tests:
|
|
39
|
+
|
|
40
|
+
- `src/components/primitives/F0Image/__tests__/F0Image.spec.tsx`
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/F0Image.types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["F0Image"],"sourceRoot":"../../../../../src","sources":["components/primitives/F0Image/index.ts"],"mappings":"AAAA,OAASA,OAAO,KAAQ,WAAW","ignoreList":[]}
|
|
@@ -2,9 +2,21 @@ import React from "react";
|
|
|
2
2
|
import { View } from "react-native";
|
|
3
3
|
import { type VariantProps } from "tailwind-variants";
|
|
4
4
|
import { type IconType } from "../primitives/F0Icon";
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated Use `F0Button` from `../F0Button` instead.
|
|
7
|
+
*/
|
|
5
8
|
export declare const variants: readonly ["default", "outline", "critical", "neutral", "ghost", "promote"];
|
|
9
|
+
/**
|
|
10
|
+
* @deprecated Use `F0ButtonVariant` from `../F0Button` instead.
|
|
11
|
+
*/
|
|
6
12
|
export type ButtonVariant = (typeof variants)[number];
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `BUTTON_SIZES` from `../F0Button` instead.
|
|
15
|
+
*/
|
|
7
16
|
export declare const sizes: readonly ["sm", "md", "lg"];
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated Use `F0ButtonSize` from `../F0Button` instead.
|
|
19
|
+
*/
|
|
8
20
|
export type ButtonSize = (typeof sizes)[number];
|
|
9
21
|
declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
10
22
|
variant: {
|
|
@@ -73,6 +85,9 @@ declare const buttonVariants: import("tailwind-variants").TVReturnType<{
|
|
|
73
85
|
false: string;
|
|
74
86
|
};
|
|
75
87
|
}, undefined, "flex-row items-center justify-center rounded border-none grow-0", unknown, unknown, undefined>>;
|
|
88
|
+
/**
|
|
89
|
+
* @deprecated Use `F0ButtonProps` from `../F0Button` instead.
|
|
90
|
+
*/
|
|
76
91
|
export interface ButtonProps extends VariantProps<typeof buttonVariants> {
|
|
77
92
|
label: string;
|
|
78
93
|
onPress?: () => void | Promise<unknown>;
|
|
@@ -86,6 +101,9 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
|
|
|
86
101
|
showBadge?: boolean;
|
|
87
102
|
fullWidth?: boolean;
|
|
88
103
|
}
|
|
104
|
+
/**
|
|
105
|
+
* @deprecated Use `F0Button` from `../F0Button` instead.
|
|
106
|
+
*/
|
|
89
107
|
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
|
|
90
108
|
export {};
|
|
91
109
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAA0B,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE5E;;GAEG;AACH,eAAO,MAAM,QAAQ,4EAOX,CAAA;AAEV;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;AAErD;;GAEG;AACH,eAAO,MAAM,KAAK,6BAA8B,CAAA;AAEhD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8GA+BlB,CAAA;AAkEF;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,0EA4GjB,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { type F0ButtonProps } from "./F0Button.types";
|
|
4
|
+
declare const F0Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<F0ButtonProps & React.RefAttributes<View>>>;
|
|
5
|
+
export { F0Button };
|
|
6
|
+
//# sourceMappingURL=F0Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"F0Button.d.ts","sourceRoot":"","sources":["../../../../src/components/F0Button/F0Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAwBnC,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAA;AAEzB,QAAA,MAAM,QAAQ,uGA2Lb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|