@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,57 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { DashboardPattern } from "./DashboardPattern.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3697';
+
+/**
+ * DashboardPattern - Analytics dashboard layout pattern
+ *
+ * Use cases:
+ * - Analytics dashboards
+ * - Metrics and KPI displays
+ * - Data visualization layouts
+ * - Admin panels
+ *
+ * Features:
+ * - Data cards grid (2x2) showing key metrics
+ * - Bar chart section for categorical comparisons
+ * - Line chart section for trend analysis
+ * - Configurable section visibility and labels
+ *
+ * Note: Chart visualizations are placeholders. Integrate with your preferred
+ * charting library (e.g., react-native-chart-kit, victory-native).
+ */
+figma.connect(DashboardPattern, FIGMA_URL, {
+  example: () => /*#__PURE__*/_jsx(DashboardPattern, {
+    showDataCardsSection: true,
+    dataCardsSectionLabel: "Section Label",
+    dataCards: [{
+      title: 'Data Card Title',
+      value: 'Value'
+    }, {
+      title: 'Data Card Title',
+      value: 'Value'
+    }, {
+      title: 'Data Card Title',
+      value: 'Value'
+    }, {
+      title: 'Data Card Title',
+      value: 'Value'
+    }],
+    showBarChartSection: true,
+    barChartSectionLabel: "Section Label",
+    barChartTitle: "Bar Chart - Active",
+    barChartSubtitle: "January - June 2024",
+    barChartTrend: "Trending up by 5.2% this month",
+    barChartTrendDescription: "Showing total visitors for the last 6 months",
+    showLineChartSection: true,
+    lineChartSectionLabel: "Section Label",
+    lineChartTitle: "Line Chart - Dots",
+    lineChartSubtitle: "January - June 2024",
+    lineChartTrend: "Trending up by 5.2% this month",
+    lineChartTrendDescription: "Showing total visitors for the last 6 months"
+  })
+});
+//# sourceMappingURL=DashboardPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","DashboardPattern","jsx","_jsx","FIGMA_URL","connect","example","showDataCardsSection","dataCardsSectionLabel","dataCards","title","value","showBarChartSection","barChartSectionLabel","barChartTitle","barChartSubtitle","barChartTrend","barChartTrendDescription","showLineChartSection","lineChartSectionLabel","lineChartTitle","lineChartSubtitle","lineChartTrend","lineChartTrendDescription"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DashboardPattern/DashboardPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,gBAAgB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtD,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,gBAAgB,EAAEG,SAAS,EAAE;EACzCE,OAAO,EAAEA,CAAA,kBACPH,IAAA,CAACF,gBAAgB;IACfM,oBAAoB,EAAE,IAAK;IAC3BC,qBAAqB,EAAC,eAAe;IACrCC,SAAS,EAAE,CACT;MAAEC,KAAK,EAAE,iBAAiB;MAAEC,KAAK,EAAE;IAAQ,CAAC,EAC5C;MAAED,KAAK,EAAE,iBAAiB;MAAEC,KAAK,EAAE;IAAQ,CAAC,EAC5C;MAAED,KAAK,EAAE,iBAAiB;MAAEC,KAAK,EAAE;IAAQ,CAAC,EAC5C;MAAED,KAAK,EAAE,iBAAiB;MAAEC,KAAK,EAAE;IAAQ,CAAC,CAC5C;IACFC,mBAAmB,EAAE,IAAK;IAC1BC,oBAAoB,EAAC,eAAe;IACpCC,aAAa,EAAC,oBAAoB;IAClCC,gBAAgB,EAAC,qBAAqB;IACtCC,aAAa,EAAC,gCAAgC;IAC9CC,wBAAwB,EAAC,8CAA8C;IACvEC,oBAAoB,EAAE,IAAK;IAC3BC,qBAAqB,EAAC,eAAe;IACrCC,cAAc,EAAC,mBAAmB;IAClCC,iBAAiB,EAAC,qBAAqB;IACvCC,cAAc,EAAC,gCAAgC;IAC/CC,yBAAyB,EAAC;EAA8C,CACzE;AAEL,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,242 @@
+"use strict";
+
+import { View, Text as RNText } from 'react-native';
+import { DataCard } from "../../../components/DataDisplay/DataCard/DataCard.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * DashboardPattern Component
+ *
+ * A comprehensive dashboard layout pattern that combines multiple data visualization
+ * components to create a cohesive analytics dashboard.
+ *
+ * Layout:
+ * 1. Data Cards grid (2x2) - Key metrics
+ * 2. Bar Chart section - Categorical data comparison
+ * 3. Line Chart section - Time series trends
+ *
+ * @example
+ * ```tsx
+ * <DashboardPattern
+ *   showDataCardsSection={true}
+ *   showBarChartSection={true}
+ *   showLineChartSection={true}
+ * />
+ * ```
+ */
+export const DashboardPattern = ({
+  // Data Cards Section
+  showDataCardsSection = true,
+  dataCardsSectionLabel = 'Section Label',
+  dataCards = [{
+    title: 'Data Card Title',
+    value: 'Value'
+  }, {
+    title: 'Data Card Title',
+    value: 'Value'
+  }, {
+    title: 'Data Card Title',
+    value: 'Value'
+  }, {
+    title: 'Data Card Title',
+    value: 'Value'
+  }],
+  // Bar Chart Section
+  showBarChartSection = true,
+  barChartSectionLabel = 'Section Label',
+  barChartTitle = 'Bar Chart - Active',
+  barChartSubtitle = 'January - June 2024',
+  barChartTrend = 'Trending up by 5.2% this month',
+  barChartTrendDescription = 'Showing total visitors for the last 6 months',
+  // Line Chart Section
+  showLineChartSection = true,
+  lineChartSectionLabel = 'Section Label',
+  lineChartTitle = 'Line Chart - Dots',
+  lineChartSubtitle = 'January - June 2024',
+  lineChartTrend = 'Trending up by 5.2% this month',
+  lineChartTrendDescription = 'Showing total visitors for the last 6 months'
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 24
+    },
+    children: [showDataCardsSection && /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(RNText, {
+        style: {
+          fontSize: 14,
+          fontWeight: '500',
+          color: '#6a7282'
+        },
+        children: dataCardsSectionLabel
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 12,
+          width: '100%'
+        },
+        children: dataCards.map((card, index) => /*#__PURE__*/_jsx(View, {
+          style: {
+            width: '48%'
+          },
+          children: /*#__PURE__*/_jsx(DataCard, {
+            title: card.title,
+            value: card.value
+          })
+        }, `data-card-${index}`))
+      })]
+    }), showBarChartSection && /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(RNText, {
+        style: {
+          fontSize: 14,
+          fontWeight: '500',
+          color: '#6a7282'
+        },
+        children: barChartSectionLabel
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          backgroundColor: '#ffffff',
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: '#e5e7eb',
+          padding: 16,
+          gap: 12
+        },
+        children: [/*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 16,
+            fontWeight: '600',
+            color: '#121212'
+          },
+          children: barChartTitle
+        }), /*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 14,
+            color: '#6a7282'
+          },
+          children: barChartSubtitle
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            height: 200,
+            backgroundColor: '#f7f8fa',
+            borderRadius: 8,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: /*#__PURE__*/_jsx(RNText, {
+            style: {
+              color: '#9ca3af',
+              fontSize: 12
+            },
+            children: "Bar Chart Visualization"
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8
+          },
+          children: /*#__PURE__*/_jsx(RNText, {
+            style: {
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#121212'
+            },
+            children: barChartTrend
+          })
+        }), /*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 14,
+            color: '#6a7282'
+          },
+          children: barChartTrendDescription
+        })]
+      })]
+    }), showLineChartSection && /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(RNText, {
+        style: {
+          fontSize: 14,
+          fontWeight: '500',
+          color: '#6a7282'
+        },
+        children: lineChartSectionLabel
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          backgroundColor: '#ffffff',
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: '#e5e7eb',
+          padding: 16,
+          gap: 12
+        },
+        children: [/*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 16,
+            fontWeight: '600',
+            color: '#121212'
+          },
+          children: lineChartTitle
+        }), /*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 14,
+            color: '#6a7282'
+          },
+          children: lineChartSubtitle
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            height: 200,
+            backgroundColor: '#f7f8fa',
+            borderRadius: 8,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: /*#__PURE__*/_jsx(RNText, {
+            style: {
+              color: '#9ca3af',
+              fontSize: 12
+            },
+            children: "Line Chart Visualization"
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8
+          },
+          children: /*#__PURE__*/_jsx(RNText, {
+            style: {
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#121212'
+            },
+            children: lineChartTrend
+          })
+        }), /*#__PURE__*/_jsx(RNText, {
+          style: {
+            fontSize: 14,
+            color: '#6a7282'
+          },
+          children: lineChartTrendDescription
+        })]
+      })]
+    })]
+  });
+};
+DashboardPattern.displayName = 'DashboardPattern';
+//# sourceMappingURL=DashboardPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","RNText","DataCard","jsx","_jsx","jsxs","_jsxs","DashboardPattern","showDataCardsSection","dataCardsSectionLabel","dataCards","title","value","showBarChartSection","barChartSectionLabel","barChartTitle","barChartSubtitle","barChartTrend","barChartTrendDescription","showLineChartSection","lineChartSectionLabel","lineChartTitle","lineChartSubtitle","lineChartTrend","lineChartTrendDescription","style","gap","children","fontSize","fontWeight","color","flexDirection","flexWrap","width","map","card","index","backgroundColor","borderRadius","borderWidth","borderColor","padding","height","justifyContent","alignItems","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DashboardPattern/DashboardPattern.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,70 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { DataListPattern } from "./DataListPattern.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3592';
+
+/**
+ * DataListPattern - Pattern component for data list with optional chips and banners
+ *
+ * Use cases:
+ * - List pages with filtering chips
+ * - List pages with promotional banners
+ * - Contact lists, product lists, etc.
+ *
+ * Features:
+ * - Optional BannerRow at top
+ * - Optional ChipsRow for filtering
+ * - DataList always visible
+ */
+figma.connect(DataListPattern, FIGMA_URL, {
+  props: {
+    showChips: figma.boolean('Show Chips'),
+    showBanners: figma.boolean('Show Banners')
+  },
+  example: props => /*#__PURE__*/_jsx(DataListPattern, {
+    showChips: props.showChips,
+    showBanners: props.showBanners,
+    banners: [{
+      id: '1'
+    }, {
+      id: '2'
+    }],
+    chips: [{
+      id: '1',
+      label: 'Chip Title 1'
+    }, {
+      id: '2',
+      label: 'Chip Title 2'
+    }, {
+      id: '3',
+      label: 'Chip Title 3'
+    }, {
+      id: '4',
+      label: 'Chip Title 4'
+    }],
+    data: [{
+      name: 'Mark Anthony',
+      subtitle: '237237823',
+      avatarUrl: ''
+    }, {
+      name: 'Marshall Mathers',
+      subtitle: '4732428323',
+      avatarUrl: ''
+    }, {
+      name: 'Roy Harper',
+      subtitle: '3435343434',
+      avatarUrl: ''
+    }, {
+      name: 'Denzel Washington',
+      subtitle: '4348783423',
+      avatarUrl: ''
+    }, {
+      name: 'Monica Bellucci',
+      subtitle: '342323243',
+      avatarUrl: ''
+    }]
+  })
+});
+//# sourceMappingURL=DataListPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","DataListPattern","jsx","_jsx","FIGMA_URL","connect","props","showChips","boolean","showBanners","example","banners","id","chips","label","data","name","subtitle","avatarUrl"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DataListPattern/DataListPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,eAAe,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpD,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,eAAe,EAAEG,SAAS,EAAE;EACxCE,KAAK,EAAE;IACLC,SAAS,EAAEP,KAAK,CAACQ,OAAO,CAAC,YAAY,CAAC;IACtCC,WAAW,EAAET,KAAK,CAACQ,OAAO,CAAC,cAAc;EAC3C,CAAC;EACDE,OAAO,EAAGJ,KAAK,iBACbH,IAAA,CAACF,eAAe;IACdM,SAAS,EAAED,KAAK,CAACC,SAAU;IAC3BE,WAAW,EAAEH,KAAK,CAACG,WAAY;IAC/BE,OAAO,EAAE,CAAC;MAAEC,EAAE,EAAE;IAAI,CAAC,EAAE;MAAEA,EAAE,EAAE;IAAI,CAAC,CAAE;IACpCC,KAAK,EAAE,CACL;MAAED,EAAE,EAAE,GAAG;MAAEE,KAAK,EAAE;IAAe,CAAC,EAClC;MAAEF,EAAE,EAAE,GAAG;MAAEE,KAAK,EAAE;IAAe,CAAC,EAClC;MAAEF,EAAE,EAAE,GAAG;MAAEE,KAAK,EAAE;IAAe,CAAC,EAClC;MAAEF,EAAE,EAAE,GAAG;MAAEE,KAAK,EAAE;IAAe,CAAC,CAClC;IACFC,IAAI,EAAE,CACJ;MAAEC,IAAI,EAAE,cAAc;MAAEC,QAAQ,EAAE,WAAW;MAAEC,SAAS,EAAE;IAAG,CAAC,EAC9D;MAAEF,IAAI,EAAE,kBAAkB;MAAEC,QAAQ,EAAE,YAAY;MAAEC,SAAS,EAAE;IAAG,CAAC,EACnE;MAAEF,IAAI,EAAE,YAAY;MAAEC,QAAQ,EAAE,YAAY;MAAEC,SAAS,EAAE;IAAG,CAAC,EAC7D;MAAEF,IAAI,EAAE,mBAAmB;MAAEC,QAAQ,EAAE,YAAY;MAAEC,SAAS,EAAE;IAAG,CAAC,EACpE;MAAEF,IAAI,EAAE,iBAAiB;MAAEC,QAAQ,EAAE,WAAW;MAAEC,SAAS,EAAE;IAAG,CAAC;EACjE,CACH;AAEL,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,66 @@
+"use strict";
+
+import { View } from 'react-native';
+import { ChipsRow } from "../../../components/DataDisplay/ChipsRow/ChipsRow.js";
+import { BannerRow } from "../../../components/DataDisplay/BannerRow/BannerRow.js";
+import { DataList } from "../../../components/DataDisplay/Datalist/Datalist.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * DataListPattern Component
+ *
+ * A pattern component that composes BannerRow, ChipsRow, and DataList.
+ * BannerRow and ChipsRow visibility is controlled by boolean props.
+ *
+ * Order:
+ * 1. BannerRow (optional)
+ * 2. ChipsRow (optional)
+ * 3. DataList (always shown)
+ *
+ * @example
+ * ```tsx
+ * <DataListPattern
+ *   showBanners={true}
+ *   showChips={true}
+ *   banners={[{ id: '1' }, { id: '2' }]}
+ *   chips={[
+ *     { id: '1', label: 'Chip 1' },
+ *     { id: '2', label: 'Chip 2' },
+ *   ]}
+ *   data={[
+ *     { name: 'John Doe', subtitle: '123456789', avatarUrl: '' },
+ *   ]}
+ * />
+ * ```
+ */
+export const DataListPattern = ({
+  showChips = false,
+  showBanners = false,
+  chips = [],
+  banners = [],
+  data,
+  listStyle
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [showBanners && banners.length > 0 && /*#__PURE__*/_jsx(BannerRow, {
+      banners: banners
+    }), showChips && chips.length > 0 && /*#__PURE__*/_jsx(ChipsRow, {
+      chips: chips
+    }), /*#__PURE__*/_jsx(DataList, {
+      data: data,
+      style: listStyle
+    })]
+  });
+};
+DataListPattern.displayName = 'DataListPattern';
+//# sourceMappingURL=DataListPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","ChipsRow","BannerRow","DataList","jsx","_jsx","jsxs","_jsxs","DataListPattern","showChips","showBanners","chips","banners","data","listStyle","style","gap","children","length","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DataListPattern/DataListPattern.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SACEC,QAAQ,QAEH,sDAAmD;AAC1D,SACEC,SAAS,QAEJ,wDAAqD;AAC5D,SACEC,QAAQ,QAEH,sDAAmD;;AAE1D;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwBA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,SAAS,GAAG,KAAK;EACjBC,WAAW,GAAG,KAAK;EACnBC,KAAK,GAAG,EAAE;EACVC,OAAO,GAAG,EAAE;EACZC,IAAI;EACJC;AACoB,CAAC,KAAK;EAC1B,oBACEP,KAAA,CAACP,IAAI;IAACe,KAAK,EAAE;MAAEC,GAAG,EAAE;IAAG,CAAE;IAAAC,QAAA,GACtBP,WAAW,IAAIE,OAAO,CAACM,MAAM,GAAG,CAAC,iBAAIb,IAAA,CAACH,SAAS;MAACU,OAAO,EAAEA;IAAQ,CAAE,CAAC,EACpEH,SAAS,IAAIE,KAAK,CAACO,MAAM,GAAG,CAAC,iBAAIb,IAAA,CAACJ,QAAQ;MAACU,KAAK,EAAEA;IAAM,CAAE,CAAC,eAC5DN,IAAA,CAACF,QAAQ;MAACU,IAAI,EAAEA,IAAK;MAACE,KAAK,EAAED;IAAU,CAAE,CAAC;EAAA,CACtC,CAAC;AAEX,CAAC;AAEDN,eAAe,CAACW,WAAW,GAAG,iBAAiB","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,33 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { DialogPattern } from "./DialogPattern.js";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3606';
+
+/**
+ * DialogPattern - Pattern component for modal dialogs
+ *
+ * Use cases:
+ * - Form dialogs with multiple input fields
+ * - Multi-step workflows in modal context
+ * - Content-heavy dialogs with scrolling
+ * - Data entry and editing forms
+ *
+ * Features:
+ * - Modal overlay background
+ * - Centered dialog positioning
+ * - Configurable title and description
+ * - Primary and secondary action buttons
+ * - Form fields and inputs
+ * - Close button in top right
+ */
+figma.connect(DialogPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*')
+  },
+  example: props => /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  })
+});
+//# sourceMappingURL=DialogPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","DialogPattern","Fragment","_Fragment","jsx","_jsx","FIGMA_URL","connect","props","children","example"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DialogPattern/DialogPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,aAAa,QAAQ,oBAAiB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAEhD,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAN,KAAK,CAACO,OAAO,CAACN,aAAa,EAAEK,SAAS,EAAE;EACtCE,KAAK,EAAE;IACLC,QAAQ,EAAET,KAAK,CAACS,QAAQ,CAAC,GAAG;EAC9B,CAAC;EACDC,OAAO,EAAGF,KAAK,iBAAKH,IAAA,CAAAF,SAAA;IAAAM,QAAA,EAAGD,KAAK,CAACC;EAAQ,CAAG;AAC1C,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Dialog } from "../../../components/Navigation/Dialog/Dialog.js";
+
+// NativeWind interop
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+const StyledView = View;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function DialogPattern({
+  title = 'Dialog Title',
+  description = 'Dialog Description goes here.',
+  showDialogHeader = true,
+  showTitle = true,
+  showDescription = true,
+  showCloseIcon = true,
+  showFooterActions = true,
+  dialogContentType = 'placeholder'
+}) {
+  return /*#__PURE__*/_jsx(StyledView, {
+    className: "bg-[rgba(18,18,18,0.6)] content-stretch flex flex-col h-full items-center justify-center p-5",
+    children: /*#__PURE__*/_jsx(Dialog, {
+      title: title,
+      description: description,
+      showDialogHeader: showDialogHeader,
+      showTitle: showTitle,
+      showDescription: showDescription,
+      showCloseIcon: showCloseIcon,
+      showFooterActions: showFooterActions,
+      dialogContentType: dialogContentType
+    })
+  });
+}
+DialogPattern.displayName = 'DialogPattern';
+export default DialogPattern;
+//# sourceMappingURL=DialogPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","cssInterop","Dialog","jsx","_jsx","className","StyledView","DialogPattern","title","description","showDialogHeader","showTitle","showDescription","showCloseIcon","showFooterActions","dialogContentType","children","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/DialogPattern/DialogPattern.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,MAAM,QAAQ,iDAA8C;;AAErE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACAH,UAAU,CAACD,IAAI,EAAE;EAAEK,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxC,MAAMC,UAAU,GAAGN,IAAW;;AAE9B;AACA;AACA;;AA4BA;AACA;AACA;;AAEA,OAAO,SAASO,aAAaA,CAAC;EAC5BC,KAAK,GAAG,cAAc;EACtBC,WAAW,GAAG,+BAA+B;EAC7CC,gBAAgB,GAAG,IAAI;EACvBC,SAAS,GAAG,IAAI;EAChBC,eAAe,GAAG,IAAI;EACtBC,aAAa,GAAG,IAAI;EACpBC,iBAAiB,GAAG,IAAI;EACxBC,iBAAiB,GAAG;AACF,CAAC,EAAE;EACrB,oBACEX,IAAA,CAACE,UAAU;IAACD,SAAS,EAAC,8FAA8F;IAAAW,QAAA,eAClHZ,IAAA,CAACF,MAAM;MACLM,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,gBAAgB,EAAEA,gBAAiB;MACnCC,SAAS,EAAEA,SAAU;MACrBC,eAAe,EAAEA,eAAgB;MACjCC,aAAa,EAAEA,aAAc;MAC7BC,iBAAiB,EAAEA,iBAAkB;MACrCC,iBAAiB,EAAEA;IAAkB,CACtC;EAAC,CACQ,CAAC;AAEjB;AAEAR,aAAa,CAACU,WAAW,GAAG,eAAe;AAE3C,eAAeV,aAAa","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,33 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { EmptyState } from "./EmptyState.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3711';
+
+/**
+ * EmptyState Pattern - Figma Code Connect
+ *
+ * Displays an empty state with Lottie animation, title, description,
+ * and optional action button.
+ */
+figma.connect(EmptyState, FIGMA_URL, {
+  props: {
+    type: figma.enum('type', {
+      'no content': 'no-content',
+      'no activity': 'no-task',
+      'no search items': 'no-search',
+      'page not found': '404',
+      'unauthorized': 'no-profile',
+      'network error': 'no-connection',
+      'no internet': 'no-wifi'
+    }),
+    showButton: figma.boolean('Show Button')
+  },
+  example: props => /*#__PURE__*/_jsx(EmptyState, {
+    type: props.type,
+    showButton: props.showButton,
+    onButtonPress: () => {}
+  })
+});
+//# sourceMappingURL=EmptyState.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","EmptyState","jsx","_jsx","FIGMA_URL","connect","props","type","enum","showButton","boolean","example","onButtonPress"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/EmptyState/EmptyState.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AAEvC,SAASC,UAAU,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1C,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,UAAU,EAAEG,SAAS,EAAE;EACnCE,KAAK,EAAE;IACLC,IAAI,EAAEP,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvB,YAAY,EAAE,YAAY;MAC1B,aAAa,EAAE,SAAS;MACxB,iBAAiB,EAAE,WAAW;MAC9B,gBAAgB,EAAE,KAAK;MACvB,cAAc,EAAE,YAAY;MAC5B,eAAe,EAAE,eAAe;MAChC,aAAa,EAAE;IACjB,CAAC,CAAC;IACFC,UAAU,EAAET,KAAK,CAACU,OAAO,CAAC,aAAa;EACzC,CAAC;EACDC,OAAO,EAAGL,KAAK,iBACbH,IAAA,CAACF,UAAU;IACTM,IAAI,EAAED,KAAK,CAACC,IAAK;IACjBE,UAAU,EAAEH,KAAK,CAACG,UAAW;IAC7BG,aAAa,EAAEA,CAAA,KAAM,CAAC;EAAE,CACzB;AAEL,CAAC,CAAC","ignoreList":[]}