@space-uy/pulsar-ui 0.9.1 → 0.10.0

package/lib/module/components/Chip.js

@@ -4,11 +4,15 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import Text from "./Text.js";
 import useTheme from "../hooks/useTheme.js";
 import { convertHexToRgba } from "../utils/uiUtils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "./Icon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Chip({
   text,
   size = 'normal',
   disabled = false,
+  backgroundColor,
+  textColor,
+  iconName,
   ...rest
 }) {
   const {
@@ -20,20 +24,25 @@ export default function Chip({
   return /*#__PURE__*/_jsx(Pressable, {
     disabled: disabled,
     ...rest,
-    children: /*#__PURE__*/_jsx(View, {
+    children: /*#__PURE__*/_jsxs(View, {
       style: [styles.container, {
-        backgroundColor: convertHexToRgba(colors.foreground, 0.08),
+        backgroundColor: backgroundColor || convertHexToRgba(colors.foreground, 0.08),
         borderRadius: theme.roundness,
         height
       }, disabled && styles.disabled],
-      children: /*#__PURE__*/_jsx(Text, {
+      children: [iconName && /*#__PURE__*/_jsx(Icon, {
+        style: styles.icon,
+        name: iconName,
+        size: size === 'small' ? 12 : 14,
+        color: textColor || colors.foreground
+      }), /*#__PURE__*/_jsx(Text, {
         variant: textVariant,
         style: {
-          color: colors.foreground
+          color: textColor || colors.foreground
         },
         numberOfLines: 1,
         children: text
-      })
+      })]
     })
   });
 }
@@ -41,7 +50,11 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 12
+    paddingHorizontal: 12,
+    flexDirection: 'row'
+  },
+  icon: {
+    marginEnd: 8
   },
   disabled: {
     opacity: 0.3

package/lib/module/components/Chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["Pressable","StyleSheet","View","Text","useTheme","convertHexToRgba","jsx","_jsx","Chip","text","size","disabled","rest","theme","colors","height","textVariant","children","style","styles","container","backgroundColor","foreground","borderRadius","roundness","variant","color","numberOfLines","create","justifyContent","alignItems","paddingHorizontal","opacity"],"sourceRoot":"../../../src","sources":["components/Chip.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAA6B,cAAc;AAE/E,OAAOC,IAAI,MAAM,WAAQ;AAEzB,OAAOC,QAAQ,MAAM,sBAAmB;AAExC,SAASC,gBAAgB,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQpD,eAAe,SAASC,IAAIA,CAAC;EAC3BC,IAAI;EACJC,IAAI,GAAG,QAAQ;EACfC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACE,CAAC,EAAE;EACR,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGV,QAAQ,CAAC,CAAC;EAEpC,MAAMW,MAAM,GAAGL,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;EACzC,MAAMM,WAAW,GAAGN,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI;EAElD,oBACEH,IAAA,CAACP,SAAS;IAACW,QAAQ,EAAEA,QAAS;IAAA,GAAKC,IAAI;IAAAK,QAAA,eACrCV,IAAA,CAACL,IAAI;MACHgB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;QACEC,eAAe,EAAEhB,gBAAgB,CAACS,MAAM,CAACQ,UAAU,EAAE,IAAI,CAAC;QAC1DC,YAAY,EAAEV,KAAK,CAACW,SAAS;QAC7BT;MACF,CAAC,EACDJ,QAAQ,IAAIQ,MAAM,CAACR,QAAQ,CAC3B;MAAAM,QAAA,eAEFV,IAAA,CAACJ,IAAI;QACHsB,OAAO,EAAET,WAAY;QACrBE,KAAK,EAAE;UAAEQ,KAAK,EAAEZ,MAAM,CAACQ;QAAW,CAAE;QACpCK,aAAa,EAAE,CAAE;QAAAV,QAAA,EAEhBR;MAAI,CACD;IAAC,CACH;EAAC,CACE,CAAC;AAEhB;AAEA,MAAMU,MAAM,GAAGlB,UAAU,CAAC2B,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAE;EACrB,CAAC;EACDpB,QAAQ,EAAE;IAAEqB,OAAO,EAAE;EAAI;AAC3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Pressable","StyleSheet","View","Text","useTheme","convertHexToRgba","Icon","jsx","_jsx","jsxs","_jsxs","Chip","text","size","disabled","backgroundColor","textColor","iconName","rest","theme","colors","height","textVariant","children","style","styles","container","foreground","borderRadius","roundness","icon","name","color","variant","numberOfLines","create","justifyContent","alignItems","paddingHorizontal","flexDirection","marginEnd","opacity"],"sourceRoot":"../../../src","sources":["components/Chip.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAA6B,cAAc;AAE/E,OAAOC,IAAI,MAAM,WAAQ;AAEzB,OAAOC,QAAQ,MAAM,sBAAmB;AAExC,SAASC,gBAAgB,QAAQ,qBAAkB;AAEnD,OAAOC,IAAI,MAAM,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW1B,eAAe,SAASC,IAAIA,CAAC;EAC3BC,IAAI;EACJC,IAAI,GAAG,QAAQ;EACfC,QAAQ,GAAG,KAAK;EAChBC,eAAe;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACE,CAAC,EAAE;EACR,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAEpC,MAAMiB,MAAM,GAAGR,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;EACzC,MAAMS,WAAW,GAAGT,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI;EAElD,oBACEL,IAAA,CAACR,SAAS;IAACc,QAAQ,EAAEA,QAAS;IAAA,GAAKI,IAAI;IAAAK,QAAA,eACrCb,KAAA,CAACR,IAAI;MACHsB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;QACEX,eAAe,EACbA,eAAe,IAAIV,gBAAgB,CAACe,MAAM,CAACO,UAAU,EAAE,IAAI,CAAC;QAC9DC,YAAY,EAAET,KAAK,CAACU,SAAS;QAC7BR;MACF,CAAC,EACDP,QAAQ,IAAIW,MAAM,CAACX,QAAQ,CAC3B;MAAAS,QAAA,GAEDN,QAAQ,iBACPT,IAAA,CAACF,IAAI;QACHkB,KAAK,EAAEC,MAAM,CAACK,IAAK;QACnBC,IAAI,EAAEd,QAAS;QACfJ,IAAI,EAAEA,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAG;QACjCmB,KAAK,EAAEhB,SAAS,IAAII,MAAM,CAACO;MAAW,CACvC,CACF,eACDnB,IAAA,CAACL,IAAI;QACH8B,OAAO,EAAEX,WAAY;QACrBE,KAAK,EAAE;UAAEQ,KAAK,EAAEhB,SAAS,IAAII,MAAM,CAACO;QAAW,CAAE;QACjDO,aAAa,EAAE,CAAE;QAAAX,QAAA,EAEhBX;MAAI,CACD,CAAC;IAAA,CACH;EAAC,CACE,CAAC;AAEhB;AAEA,MAAMa,MAAM,GAAGxB,UAAU,CAACkC,MAAM,CAAC;EAC/BT,SAAS,EAAE;IACTU,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,aAAa,EAAE;EACjB,CAAC;EACDT,IAAI,EAAE;IAAEU,SAAS,EAAE;EAAE,CAAC;EACtB1B,QAAQ,EAAE;IAAE2B,OAAO,EAAE;EAAI;AAC3B,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Chip.d.ts

@@ -1,9 +1,13 @@
 import { type PressableProps } from 'react-native';
+import type { IconName } from './Icon';
 type Props = PressableProps & {
     text: string;
     size?: 'normal' | 'small';
     disabled?: boolean;
+    iconName?: IconName;
+    textColor?: string;
+    backgroundColor?: string;
 };
-export default function Chip({ text, size, disabled, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Chip({ text, size, disabled, backgroundColor, textColor, iconName, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Chip.d.ts.map

package/lib/typescript/src/components/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAQhF,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,IAAe,EACf,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,2CA6BP"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAOhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGvC,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,IAAe,EACf,QAAgB,EAChB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,2CAsCP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-uy/pulsar-ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "react native ui kit for spacedev",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",

package/src/components/Chip.tsx

@@ -5,17 +5,25 @@ import Text from './Text';
 import useTheme from '../hooks/useTheme';
 
 import { convertHexToRgba } from '../utils/uiUtils';
+import type { IconName } from './Icon';
+import Icon from './Icon';
 
 type Props = PressableProps & {
   text: string;
   size?: 'normal' | 'small';
   disabled?: boolean;
+  iconName?: IconName;
+  textColor?: string;
+  backgroundColor?: string;
 };
 
 export default function Chip({
   text,
   size = 'normal',
   disabled = false,
+  backgroundColor,
+  textColor,
+  iconName,
   ...rest
 }: Props) {
   const { theme, colors } = useTheme();
@@ -29,16 +37,25 @@ export default function Chip({
         style={[
           styles.container,
           {
-            backgroundColor: convertHexToRgba(colors.foreground, 0.08),
+            backgroundColor:
+              backgroundColor || convertHexToRgba(colors.foreground, 0.08),
             borderRadius: theme.roundness,
             height,
           },
           disabled && styles.disabled,
         ]}
       >
+        {iconName && (
+          <Icon
+            style={styles.icon}
+            name={iconName}
+            size={size === 'small' ? 12 : 14}
+            color={textColor || colors.foreground}
+          />
+        )}
         <Text
           variant={textVariant}
-          style={{ color: colors.foreground }}
+          style={{ color: textColor || colors.foreground }}
           numberOfLines={1}
         >
           {text}
@@ -53,6 +70,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 12,
+    flexDirection: 'row',
   },
+  icon: { marginEnd: 8 },
   disabled: { opacity: 0.3 },
 });