@campxdev/react-native-blueprint 0.1.15 → 0.1.16

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","RootLayout","cn","THEME","NAV_THEME","ThemeProvider","useTheme","getRadiusForHeight","getRadiusForDimensions","getCustomRadius","RADIUS","RADIUS_PRESET","CORNER_SMOOTHING","fonts"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,0BAAiB;;AAE/B;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,kBAAe;;AAErD;AACA,SAASC,EAAE,QAAQ,gBAAa;AAChC,SAASC,KAAK,EAAEC,SAAS,QAAQ,gBAAa;AAC9C,SAASC,aAAa,EAAEC,QAAQ,QAAQ,wBAAqB;;AAE7D;AACA,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,eAAe,EACfC,MAAM,EACNC,aAAa,EACbC,gBAAgB,QACX,uBAAoB;;AAE3B;AACA,SAASC,KAAK,QAAQ,gBAAa","ignoreList":[]}
+{"version":3,"names":["default","RootLayout","cn","THEME","NAV_THEME","ThemeProvider","useTheme","getRadiusForHeight","getRadiusForDimensions","getCustomRadius","RADIUS","RADIUS_PRESET","CORNER_SMOOTHING","fonts"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,cAAc,0BAAiB;;AAE/B;AACA,cAAc,wCAA+B;;AAE7C;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,kBAAe;;AAErD;AACA,SAASC,EAAE,QAAQ,gBAAa;AAChC,SAASC,KAAK,EAAEC,SAAS,QAAQ,gBAAa;AAC9C,SAASC,aAAa,EAAEC,QAAQ,QAAQ,wBAAqB;;AAE7D;AACA,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,eAAe,EACfC,MAAM,EACNC,aAAa,EACbC,gBAAgB,QACX,uBAAoB;;AAE3B;AACA,SAASC,KAAK,QAAQ,gBAAa","ignoreList":[]}

package/lib/module/patterns/pattern-components/BottomSheetPattern/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { BottomSheetPattern } from "./BottomSheetPattern.js";
+//# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/BottomSheetPattern/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BottomSheetPattern"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/BottomSheetPattern/index.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB","ignoreList":[]}

package/lib/module/patterns/pattern-components/CalendarPattern/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { CalendarPattern } from "./CalendarPattern.js";
+//# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/CalendarPattern/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CalendarPattern"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/CalendarPattern/index.ts"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,sBAAmB","ignoreList":[]}

package/lib/module/patterns/pattern-components/DashboardPattern/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DashboardPattern } from "./DashboardPattern.js";
+//# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/DashboardPattern/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DashboardPattern"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DashboardPattern/index.ts"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,uBAAoB","ignoreList":[]}

package/lib/module/patterns/pattern-components/EntityPatternGuided/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { EntityPatternGuided } from "./EntityPatternGuided.js";
+//# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/EntityPatternGuided/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["EntityPatternGuided"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/EntityPatternGuided/index.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAAQ,0BAAuB","ignoreList":[]}

package/lib/module/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { SuccessPattern } from "./SuccessPattern.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=411-3184';
+
+/**
+ * SuccessPattern - Success state pattern with animated checkmark
+ *
+ * Use cases:
+ * - Order confirmation screens
+ * - Form submission success
+ * - Action completion feedback
+ * - Payment confirmation
+ * - Task completion states
+ *
+ * Features:
+ * - Animated success tick using Lottie (Success-Tick.json)
+ * - Customizable success message
+ * - Optional description text
+ * - Configurable animation behavior (loop, autoplay, duration)
+ * - Callback when animation completes
+ */
+figma.connect(SuccessPattern, FIGMA_URL, {
+  props: {
+    successMessage: figma.string('SuccessMessage'),
+    description: figma.string('Description')
+  },
+  example: props => /*#__PURE__*/_jsx(SuccessPattern, {
+    successMessage: props.successMessage,
+    description: props.description,
+    showAnimation: true,
+    autoplay: true,
+    loop: false
+  })
+});
+//# sourceMappingURL=SuccessPattern.figma.js.map

package/lib/module/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","SuccessPattern","jsx","_jsx","FIGMA_URL","connect","props","successMessage","string","description","example","showAnimation","autoplay","loop"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/SuccessPattern/SuccessPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,cAAc,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,cAAc,EAAEG,SAAS,EAAE;EACvCE,KAAK,EAAE;IACLC,cAAc,EAAEP,KAAK,CAACQ,MAAM,CAAC,gBAAgB,CAAC;IAC9CC,WAAW,EAAET,KAAK,CAACQ,MAAM,CAAC,aAAa;EACzC,CAAC;EACDE,OAAO,EAAGJ,KAAK,iBACbH,IAAA,CAACF,cAAc;IACbM,cAAc,EAAED,KAAK,CAACC,cAAe;IACrCE,WAAW,EAAEH,KAAK,CAACG,WAAY;IAC/BE,aAAa,EAAE,IAAK;IACpBC,QAAQ,EAAE,IAAK;IACfC,IAAI,EAAE;EAAM,CACb;AAEL,CAAC,CAAC","ignoreList":[]}

package/lib/module/patterns/pattern-components/SuccessPattern/SuccessPattern.js

@@ -0,0 +1,91 @@
+"use strict";
+
+// @ts-nocheck
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import LottieView from 'lottie-react-native';
+import { cn } from "../../../lib/utils.js";
+import { Text } from "../../../components/Input/Text/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(RNView, {
+  className: 'style'
+});
+const View = RNView;
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * SuccessPattern Component
+ *
+ * A pattern component that displays a success state with:
+ * - Animated success tick/checkmark (Lottie animation)
+ * - Success message
+ * - Description text
+ *
+ * Perfect for use after form submissions, confirmations, or successful operations.
+ *
+ * @example
+ * ```tsx
+ * <SuccessPattern
+ *   successMessage="Order Placed Successfully!"
+ *   description="Your order has been confirmed"
+ *   showAnimation={true}
+ *   onAnimationFinish={() => navigation.navigate('Home')}
+ * />
+ * ```
+ */
+export const SuccessPattern = ({
+  successMessage = 'This is the Success Message',
+  description = 'Success message descriptions goes here',
+  showAnimation = true,
+  animationDuration = 2000,
+  loop = false,
+  autoplay = true,
+  className,
+  testID,
+  onAnimationFinish
+}) => {
+  const animationRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autoplay && animationRef.current && showAnimation) {
+      animationRef.current.play();
+    }
+  }, [showAnimation, autoplay]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    className: cn('w-full items-center justify-center bg-surface-page', className),
+    children: [showAnimation && /*#__PURE__*/_jsx(View, {
+      className: "h-60 w-60 items-center justify-center",
+      children: /*#__PURE__*/_jsx(LottieView, {
+        ref: animationRef,
+        source: require('../../../assets/Success-Tick.json'),
+        autoPlay: autoplay,
+        loop: loop,
+        duration: animationDuration,
+        onAnimationFinish: onAnimationFinish,
+        style: {
+          width: 300,
+          height: 300
+        }
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "w-full items-center gap-2 text-center px-4 py-6",
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: "text-lg font-semibold text-text-primary",
+        children: successMessage
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-sm font-medium text-text-secondary",
+        children: description
+      })]
+    })]
+  });
+};
+SuccessPattern.displayName = 'SuccessPattern';
+//# sourceMappingURL=SuccessPattern.js.map

package/lib/module/patterns/pattern-components/SuccessPattern/SuccessPattern.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","RNView","cssInterop","LottieView","cn","Text","jsx","_jsx","jsxs","_jsxs","className","SuccessPattern","successMessage","description","showAnimation","animationDuration","loop","autoplay","testID","onAnimationFinish","animationRef","useRef","useEffect","current","play","children","ref","source","require","autoPlay","duration","style","width","height","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/SuccessPattern/SuccessPattern.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,IAAIC,MAAM,QAAQ,cAAc;AAC7C,SAASC,UAAU,QAAQ,YAAY;AACvC,OAAOC,UAAU,MAAM,qBAAqB;AAC5C,SAASC,EAAE,QAAQ,uBAAoB;AACvC,SAASC,IAAI,QAAQ,wCAAqC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3DP,UAAU,CAACD,MAAM,EAAE;EAAES,SAAS,EAAE;AAAQ,CAAC,CAAC;AAE1C,MAAMV,IAAI,GAAGC,MAEZ;;AAED;AACA;AACA;;AAuBA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,cAAc,GAAGA,CAAC;EAC7BC,cAAc,GAAG,6BAA6B;EAC9CC,WAAW,GAAG,wCAAwC;EACtDC,aAAa,GAAG,IAAI;EACpBC,iBAAiB,GAAG,IAAI;EACxBC,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAG,IAAI;EACfP,SAAS;EACTQ,MAAM;EACNC;AACmB,CAAC,KAAK;EACzB,MAAMC,YAAY,GAAGrB,KAAK,CAACsB,MAAM,CAAM,IAAI,CAAC;EAE5CtB,KAAK,CAACuB,SAAS,CAAC,MAAM;IACpB,IAAIL,QAAQ,IAAIG,YAAY,CAACG,OAAO,IAAIT,aAAa,EAAE;MACrDM,YAAY,CAACG,OAAO,CAACC,IAAI,CAAC,CAAC;IAC7B;EACF,CAAC,EAAE,CAACV,aAAa,EAAEG,QAAQ,CAAC,CAAC;EAE7B,oBACER,KAAA,CAACT,IAAI;IACHkB,MAAM,EAAEA,MAAO;IACfR,SAAS,EAAEN,EAAE,CACX,oDAAoD,EACpDM,SACF,CAAE;IAAAe,QAAA,GAGDX,aAAa,iBACZP,IAAA,CAACP,IAAI;MAACU,SAAS,EAAC,uCAAuC;MAAAe,QAAA,eACrDlB,IAAA,CAACJ,UAAU;QACTuB,GAAG,EAAEN,YAAa;QAClBO,MAAM,EAAEC,OAAO,CAAC,mCAAmC,CAAE;QACrDC,QAAQ,EAAEZ,QAAS;QACnBD,IAAI,EAAEA,IAAK;QACXc,QAAQ,EAAEf,iBAAkB;QAC5BI,iBAAiB,EAAEA,iBAAkB;QACrCY,KAAK,EAAE;UAAEC,KAAK,EAAE,GAAG;UAAEC,MAAM,EAAE;QAAI;MAAE,CACpC;IAAC,CACE,CACP,eAGDxB,KAAA,CAACT,IAAI;MAACU,SAAS,EAAC,iDAAiD;MAAAe,QAAA,gBAC/DlB,IAAA,CAACF,IAAI;QAACK,SAAS,EAAC,yCAAyC;QAAAe,QAAA,EACtDb;MAAc,CACX,CAAC,eACPL,IAAA,CAACF,IAAI;QAACK,SAAS,EAAC,yCAAyC;QAAAe,QAAA,EACtDZ;MAAW,CACR,CAAC;IAAA,CACH,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAEDF,cAAc,CAACuB,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/module/patterns/pattern-components/SuccessPattern/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { SuccessPattern } from "./SuccessPattern.js";
+//# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/SuccessPattern/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SuccessPattern"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/SuccessPattern/index.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/patterns/pattern-components/index.js

@@ -2,17 +2,18 @@
 
 // @ts-nocheck
 export * from "./AlertDialogPattern/index.js";
-export * from './DashboardPattern';
+export * from "./DashboardPattern/index.js";
 export * from "./EmptyState/index.js";
 export * from "./DataListPattern/index.js";
 export * from "./CardListPattern/index.js";
 export * from "./AlertPattern/index.js";
 export * from "./DialogPattern/index.js";
 export * from "./SkeletonPattern/index.js";
+export * from "./SuccessPattern/index.js";
 export * from "./FormPattern/index.js";
 export * from "./EntityPatternOverview/index.js";
 export * from "./EntityPatternStructured/index.js";
-export * from './EntityPatternGuided';
-export * from "./CalendarPattern/CalendarPattern.js";
+export * from "./EntityPatternGuided/index.js";
+export * from "./CalendarPattern/index.js";
 export * from "./MonthlyCalendarPattern/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/patterns/pattern-components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["patterns/pattern-components/index.ts"],"mappings":";;AAAA;AACA,cAAc,+BAAsB;AACpC,cAAc,oBAAoB;AAClC,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,4BAAmB;AACjC,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB;AACjC,cAAc,wBAAe;AAC7B,cAAc,kCAAyB;AACvC,cAAc,oCAA2B;AACzC,cAAc,uBAAuB;AACrC,cAAc,sCAAmC;AACjD,cAAc,mCAA0B","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["patterns/pattern-components/index.ts"],"mappings":";;AAAA;AACA,cAAc,+BAAsB;AACpC,cAAc,6BAAoB;AAClC,cAAc,uBAAc;AAC5B,cAAc,4BAAmB;AACjC,cAAc,4BAAmB;AACjC,cAAc,yBAAgB;AAC9B,cAAc,0BAAiB;AAC/B,cAAc,4BAAmB;AACjC,cAAc,2BAAkB;AAChC,cAAc,wBAAe;AAC7B,cAAc,kCAAyB;AACvC,cAAc,oCAA2B;AACzC,cAAc,gCAAuB;AACrC,cAAc,4BAAmB;AACjC,cAAc,mCAA0B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -15,6 +15,7 @@
   "files": [
     "src",
     "lib",
+    "global.css",
     "android",
     "ios",
     "cpp",
@@ -42,7 +43,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build --target module",
-    "build:full": "bob build",
+    "build:full": "bob build && cp global.css lib/",
     "release": "release-it --only-version"
   },
   "keywords": [

package/src/assets/Success-Tick.json

@@ -0,0 +1 @@
+{"v":"5.9.0","fr":29.9700012207031,"ip":0,"op":61.0000024845809,"w":480,"h":480,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","nm":"top bottom dots","fr":29.9700012207031,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"small circle 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.621},"o":{"x":0.333,"y":0},"t":7,"s":[240,240,0],"to":[0,12.605,0],"ti":[0,-28.309,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.175},"t":21,"s":[240,130,0],"to":[0,12.864,0],"ti":[0,-18.333,0]},{"t":27.0000010997325,"s":[240,240,0]}],"ix":2,"l":2},"a":{"a":0,"k":[10,5,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":17,"s":[90,90,100]},{"t":27.0000010997325,"s":[90,90,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[44,44],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.5333,0.6902,0.3255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[10,5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"small circle 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[240,240,0],"to":[0,18.333,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":21,"s":[240,350,0],"to":[0,0,0],"ti":[0,18.333,0]},{"t":27.0000010997325,"s":[240,240,0]}],"ix":2,"l":2},"a":{"a":0,"k":[10,5,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100,100,100]},{"t":17.0000006924242,"s":[90,90,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[44,44],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.5333,0.6902,0.3255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[10,5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":2,"ty":0,"nm":"top bottom dots","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0]},{"t":20.0000008146167,"s":[90]}],"ix":10},"p":{"a":0,"k":[240,240,0],"ix":2,"l":2},"a":{"a":0,"k":[240,240,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":480,"h":480,"ip":0,"op":27.0000010997325,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"tick","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[0]},{"t":42.0000017106951,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[225,234,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-39,13],[-8,44],[71,-35]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-8.00000032584668,"op":82.0000033399285,"st":-8.00000032584668,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle rotate 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-76.213,"ix":10},"p":{"a":0,"k":[240,240,0],"ix":2,"l":2},"a":{"a":0,"k":[60,28,0],"ix":1,"l":2},"s":{"a":0,"k":[58,58,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[332,332],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.4245,0.584,0.216,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[60,28],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":50.0000020365418,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":40.0000016292334,"s":[100]}],"ix":2},"o":{"a":0,"k":-163,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":18.000000733155,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"circle rotate","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-76.213,"ix":10},"p":{"a":0,"k":[240,240,0],"ix":2,"l":2},"a":{"a":0,"k":[60,28,0],"ix":1,"l":2},"s":{"a":0,"k":[67,67,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[332,332],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.4245,0.584,0.216,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[60,28],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":50.0000020365418,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":40.0000016292334,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":18.000000733155,"op":90.0000036657751,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"star Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[0]},{"t":62.0000025253118,"s":[180]}],"ix":10},"p":{"a":0,"k":[240,240,0],"ix":2,"l":2},"a":{"a":0,"k":[251.841,245.65,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":22,"s":[0,0,100]},{"t":32.0000013033867,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-7.843,4.018],[0,0],[-7.636,-11.816],[-8.801,-0.442],[-0.706,-14.051],[-7.401,-4.783],[6.414,-12.521],[-4.018,-7.843],[11.816,-7.636],[0.442,-8.801],[14.051,-0.705],[4.783,-7.402],[12.521,6.415],[7.843,-4.018],[7.636,11.815],[8.801,0.442],[0.705,14.051],[7.401,4.784],[-6.415,12.521],[4.018,7.843],[-11.815,7.636],[-0.442,8.801],[-14.051,0.706],[-4.784,7.401],[-12.521,-6.414]],"o":[[0,0],[12.521,-6.414],[4.783,7.401],[14.051,0.706],[0.442,8.801],[11.816,7.636],[-4.018,7.843],[6.414,12.521],[-7.401,4.784],[-0.706,14.051],[-8.801,0.442],[-7.636,11.815],[-7.843,-4.018],[-12.521,6.415],[-4.784,-7.402],[-14.051,-0.705],[-0.442,-8.801],[-11.815,-7.636],[4.018,-7.843],[-6.415,-12.521],[7.401,-4.783],[0.705,-14.051],[8.801,-0.442],[7.636,-11.816],[7.843,4.018]],"v":[[12.492,-117.622],[12.492,-117.622],[47.993,-108.109],[69.629,-95.618],[95.618,-69.629],[108.109,-47.993],[117.622,-12.492],[117.622,12.491],[108.109,47.992],[95.618,69.628],[69.629,95.617],[47.993,108.109],[12.492,117.621],[-12.491,117.621],[-47.992,108.109],[-69.628,95.617],[-95.617,69.628],[-108.109,47.992],[-117.621,12.491],[-117.621,-12.492],[-108.109,-47.993],[-95.617,-69.629],[-69.628,-95.618],[-47.992,-108.109],[-12.491,-117.622]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.5333,0.6902,0.3255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[251.84,245.65],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":22.0000008960784,"op":112.000004561854,"st":22.0000008960784,"bm":0}],"markers":[]}

package/src/assets/lotties/index.ts

@@ -11,6 +11,7 @@ export const Lotties = {
   noTask: require('../no-task.json'),
   noWifi: require('../no-wifi.json'),
   loading: require('../Loading Animation.json'),
+  success: require('../Success-Tick.json'),
 } as const;
 
 export type LottieKey = keyof typeof Lotties;

package/src/components/DataDisplay/Banner/Banner.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { Banner } from './Banner';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=454-8359';
+
+figma.connect(Banner, FIGMA_URL, {
+  props: {
+    title: figma.string('Title'),
+    subtitle: figma.string('Subtitle'),
+    showBadge: figma.boolean('Show Badge'),
+    showActionItems: figma.boolean('Show ActionItems'),
+    showTrailing: figma.boolean('Show Trailing'),
+  },
+  example: (props) => (
+    <Banner
+      title={props.title}
+      subtitle={props.subtitle}
+      showBadge={props.showBadge}
+      badgeText="Badge"
+      showActionItems={props.showActionItems}
+      actionItems={['Action Item', 'Action Item', 'Action Item']}
+      showTrailing={props.showTrailing}
+    />
+  ),
+});

package/src/components/DataDisplay/Banner/Banner.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView, Pressable as RNPressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Plus } from 'lucide-react-native';
+import { Text } from '../../Input/Text/Text';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+cssInterop(LinearGradient, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface BannerProps {
+  title?: string;
+  subtitle?: string;
+  showBadge?: boolean;
+  badgeText?: string;
+  showActionItems?: boolean;
+  actionItems?: string[];
+  showTrailing?: boolean;
+  onTrailingPress?: () => void;
+  testID?: string;
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+function Banner({
+  title = 'Banner Title',
+  subtitle = 'Subtitle of the banner goes here',
+  showBadge = true,
+  badgeText = 'Badge',
+  showActionItems = true,
+  actionItems = ['Action Item', 'Action Item', 'Action Item'],
+  showTrailing = true,
+  onTrailingPress,
+  testID,
+}: BannerProps) {
+  return (
+    <LinearGradient
+      testID={testID}
+      colors={['#573dab', '#573dab33']}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      className="w-full max-w-[400px] flex-row items-center justify-between gap-4 rounded-lg p-4"
+    >
+      {/* Main Content */}
+      <View className="flex-1 flex-col gap-5">
+        {/* Header with Title and Badge */}
+        <View className="flex-col gap-1">
+          <View className="flex-row items-center gap-2">
+            <Text className="font-semibold text-base text-white">{title}</Text>
+            {showBadge && (
+              <Badge variant="default" size="sm">
+                <Text>{badgeText}</Text>
+              </Badge>
+            )}
+          </View>
+          <Text className="font-medium text-xs text-white opacity-70">
+            {subtitle}
+          </Text>
+        </View>
+
+        {/* Action Items */}
+        {showActionItems && actionItems && actionItems.length > 0 && (
+          <View className="flex-row items-center gap-3">
+            {actionItems.map((item, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && (
+                  <View className="h-1 w-1 rounded-full bg-white" />
+                )}
+                <Text className="font-medium text-xs text-white">{item}</Text>
+              </React.Fragment>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {/* Trailing Icon */}
+      {showTrailing && (
+        <Pressable
+          onPress={onTrailingPress}
+          hitSlop={12}
+          className="flex-row items-center justify-center"
+        >
+          <Icon as={Plus} size={16} color="white" />
+        </Pressable>
+      )}
+    </LinearGradient>
+  );
+}
+
+export { Banner };
+export default Banner;

package/src/components/DataDisplay/Greeting/Greeting.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Greeting } from './Greeting';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=448-8146';
+
+figma.connect(Greeting, FIGMA_URL, {
+  props: {
+    showNextUp: figma.boolean('Show NextUp'),
+  },
+  example: (props) => <Greeting showNextUp={props.showNextUp} />,
+});

package/src/components/DataDisplay/Greeting/Greeting.tsx

@@ -0,0 +1,154 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+  Pressable as RNPressable,
+  StyleSheet,
+  View as RNView,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Calendar } from 'lucide-react-native';
+import { cn } from '../../../lib/utils';
+import { Text } from '../../Input/Text/Text';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+const Pressable = RNPressable as React.ComponentType<
+  React.ComponentProps<typeof RNPressable> & { className?: string }
+>;
+
+/**
+ * Props for the Greeting component
+ */
+export interface GreetingProps {
+  /** User's name to display in greeting */
+  userName?: string;
+  /** Greeting message (e.g., "Good Morning") */
+  greetingText?: string;
+  /** Subtitle/secondary text below greeting */
+  subtitle?: string;
+  /** Whether to show the schedule/calendar button */
+  showScheduleButton?: boolean;
+  /** Callback when schedule button is pressed */
+  onSchedulePress?: () => void;
+  /** Whether to show the "Next up" section */
+  showNextUp?: boolean;
+  /** Next class/course name */
+  nextUpTitle?: string;
+  /** Time for next class */
+  nextUpTime?: string;
+  /** Additional CSS classes for styling */
+  className?: string;
+  /** Test identifier */
+  testID?: string;
+}
+
+/**
+ * Greeting - A personalized greeting card with schedule information
+ *
+ * Displays a personalized greeting with user name, class information, and upcoming
+ * class details. Features a prominent purple schedule button with calendar icon,
+ * "Next up" section with course name and time, and flexible visibility controls.
+ *
+ * Design from Figma: node-id=448-8146
+ * - Header: "Hey {name}, {greeting}" + Subtitle
+ * - Schedule Button: Purple (#573dab) with calendar icon and shadow
+ * - Next Up: Course name + divider dot + time
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Greeting
+ *   userName="Marshall"
+ *   greetingText="Good Morning"
+ *   subtitle="You have 3 Classes today"
+ *   nextUpTitle="Digital Logic Design"
+ *   nextUpTime="10:00 AM"
+ *   showNextUp={true}
+ *   onSchedulePress={() => navigate('Schedule')}
+ * />
+ * ```
+ */
+export function Greeting({
+  userName = 'Marshall',
+  greetingText = 'Good Morning',
+  subtitle = 'You have 3 Classes today',
+  showScheduleButton = true,
+  onSchedulePress,
+  showNextUp = true,
+  nextUpTitle = 'Digital Logic Design',
+  nextUpTime = '10:00 AM',
+  className,
+  testID,
+}: GreetingProps) {
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        'w-full max-w-[400px] flex-col gap-4 items-start justify-end rounded-lg border border-border-default bg-surface-default px-3 py-4',
+        className
+      )}
+    >
+      {/* Header Section: Greeting + Schedule Button */}
+      <View className="w-full flex-row items-center justify-between">
+        {/* Header Content: Title and Subtitle */}
+        <View className="flex-1 flex-col gap-1">
+          <Text className="font-semibold text-base text-text-primary">
+            {`Hey ${userName}, ${greetingText}`}
+          </Text>
+          <Text className="font-medium text-xs text-text-secondary">
+            {subtitle}
+          </Text>
+        </View>
+
+        {/* Schedule Button with Calendar Icon */}
+        {showScheduleButton && (
+          <Pressable
+            onPress={onSchedulePress}
+            hitSlop={12}
+            className="ml-3 flex-row items-center justify-center rounded-lg bg-highlight-purple p-3"
+            style={styles.scheduleButton}
+          >
+            <Icon as={Calendar} size={16} color="white" />
+          </Pressable>
+        )}
+      </View>
+
+      {/* Next Up Section */}
+      {showNextUp && (
+        <View className="w-full flex-col gap-1">
+          <Text className="font-medium text-xs text-text-secondary">
+            Next up
+          </Text>
+          {/* Next Up Items: Course Name + Divider + Time */}
+          <View className="w-full flex-row items-center gap-3">
+            <Text className="font-semibold text-base text-text-primary">
+              {nextUpTitle}
+            </Text>
+            {/* Divider Dot */}
+            <View className="h-1.5 w-1.5 rounded-full bg-text-secondary" />
+            <Text className="font-semibold text-base text-text-primary">
+              {nextUpTime}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+Greeting.displayName = 'Greeting';
+
+const styles = StyleSheet.create({
+  scheduleButton: {
+    shadowColor: '#573dab',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.5,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});

package/src/components/DataDisplay/MonthCalendar/MonthCalendar.figma.tsx

@@ -1,15 +1,11 @@
-import { figma } from '@figma/code-connect';
+import figma from '@figma/code-connect';
 import { MonthCalendar } from './MonthCalendar';
 
-figma.connect(
-  MonthCalendar,
-  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306:9028',
-  {
-    props: {
-      month: figma.string('Month'),
-    },
-    example: (props) => <MonthCalendar {...props} />,
-  }
-);
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=306:9028';
+
+figma.connect(MonthCalendar, FIGMA_URL, {
+  example: () => <MonthCalendar month="February 2024" />,
+});
 
 export default MonthCalendar;