@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,139 @@
+"use strict";
+
+import { View, Text as RNText } from 'react-native';
+import { Card } from "../../../components/DataDisplay/Card/Card.js";
+import { Accordion } from "../../../components/DataDisplay/Accordion/Accordion.js";
+import { AccordionItem } from "../../../components/DataDisplay/AccordionItem/AccordionItem.js";
+import { Button } from "../../../components/Input/Button/Button.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * EntityPatternStructured Component
+ *
+ * A pattern component that combines Card, Accordion, AccordionItem, and Button components
+ * to create structured entity layouts with collapsible sections.
+ *
+ * Layout:
+ * 1. Card section (optional - header with title, subtitle, badges, leading)
+ * 2. Accordion section (optional - titled section with accordion items)
+ * 3. Footer actions (optional - primary and secondary buttons)
+ *
+ * @example
+ * ```tsx
+ * <EntityPatternStructured
+ *   title="Entity Title"
+ *   subtitle="Entity Subtitle"
+ *   showCard={true}
+ *   showAccordionSection={true}
+ *   accordionItemCount={3}
+ *   showFooterActions={true}
+ * />
+ * ```
+ */
+export const EntityPatternStructured = ({
+  // Card props
+  title = 'Card Title',
+  subtitle = 'Subtitle of the card goes here',
+  showCard = true,
+  showMedia = false,
+  showSubtitle = true,
+  showLeading = true,
+  showBadges = true,
+  // Accordion section
+  showAccordionSection = true,
+  accordionSectionLabel = 'Section Label',
+  // Accordion items
+  showAccordionItems = true,
+  accordionItemCount = 3,
+  spacing = 'default',
+  state = 'open',
+  type = 'multiple',
+  // AccordionItem props
+  accordianTitle = 'Accordian',
+  accordianSubtitle = 'This is the Accordian Subtitle. Any Content related to the drop down can be placed here.',
+  // Footer actions
+  showFooterActions = true,
+  primaryActionText = 'Primary Action',
+  secondaryActionText = 'Secondary Action',
+  onPrimaryActionPress,
+  onSecondaryActionPress,
+  ...restProps
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 24
+    },
+    children: [showCard && /*#__PURE__*/_jsx(Card, {
+      title: title,
+      subtitle: subtitle,
+      showMedia: showMedia,
+      showSubtitle: showSubtitle,
+      showLeading: showLeading,
+      showBadges: showBadges,
+      showFooterActions: false,
+      showOverflowMenu: false,
+      showBody: false,
+      ...restProps
+    }), showAccordionSection && /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 8
+      },
+      children: [/*#__PURE__*/_jsx(RNText, {
+        style: {
+          fontSize: 14,
+          fontWeight: '500',
+          color: '#6a7282'
+        },
+        children: accordionSectionLabel
+      }), showAccordionItems && /*#__PURE__*/_jsx(Accordion, {
+        spacing: spacing,
+        state: state,
+        type: type,
+        ...restProps,
+        children: Array.from({
+          length: accordionItemCount
+        }).map((_, i) => /*#__PURE__*/_jsx(AccordionItem, {
+          accordianTitle: accordianTitle,
+          accordianSubtitle: accordianSubtitle,
+          state: "close",
+          ...restProps
+        }, `accordion-item-${i}`))
+      })]
+    }), showFooterActions && /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 12
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "default",
+          onPress: onSecondaryActionPress,
+          children: secondaryActionText
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "default",
+          size: "default",
+          onPress: onPrimaryActionPress,
+          children: primaryActionText
+        })
+      })]
+    })]
+  });
+};
+EntityPatternStructured.displayName = 'EntityPatternStructured';
+//# sourceMappingURL=EntityPatternStructured.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","RNText","Card","Accordion","AccordionItem","Button","jsx","_jsx","jsxs","_jsxs","EntityPatternStructured","title","subtitle","showCard","showMedia","showSubtitle","showLeading","showBadges","showAccordionSection","accordionSectionLabel","showAccordionItems","accordionItemCount","spacing","state","type","accordianTitle","accordianSubtitle","showFooterActions","primaryActionText","secondaryActionText","onPrimaryActionPress","onSecondaryActionPress","restProps","style","gap","children","showOverflowMenu","showBody","fontSize","fontWeight","color","Array","from","length","map","_","i","flexDirection","flex","variant","size","onPress","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/EntityPatternStructured/EntityPatternStructured.tsx"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { FormPattern } from "./FormPattern.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-3654';
+
+/**
+ * FormPattern - Pattern component combining form fields
+ *
+ * Use cases:
+ * - User registration and login forms
+ * - Settings and preference forms
+ * - Data entry and configuration screens
+ * - Multi-field form layouts
+ *
+ * Features:
+ * - Composed of Select, TextField, and Button components
+ * - Each component maintains its own Code Connect configuration
+ * - Flexible form layouts
+ * - Reusable pattern for consistent form experiences
+ */
+figma.connect(FormPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*')
+  },
+  example: props => /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  })
+});
+//# sourceMappingURL=FormPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","FormPattern","Fragment","_Fragment","jsx","_jsx","FIGMA_URL","connect","props","children","example"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/FormPattern/FormPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAN,KAAK,CAACO,OAAO,CAACN,WAAW,EAAEK,SAAS,EAAE;EACpCE,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/FormPattern/FormPattern.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import { View } from 'react-native';
+import { TextField } from "../../../components/Input/TextField/Textfield.js";
+import { Select } from "../../../components/Input/Select/Select.js";
+import { Button } from "../../../components/Input/Button/Button.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * FormPattern Component
+ *
+ * A pattern component that composes Select and TextField components to create
+ * common form layouts.
+ *
+ * Layout:
+ * 1. Select field (with optional label and help text)
+ * 2. TextField field (with optional label and help text)
+ * 3. Action buttons row (optional primary/secondary buttons)
+ *
+ * @example
+ * ```tsx
+ * <FormPattern
+ *   showSelectLabel={true}
+ *   showSelectHelpText={true}
+ *   showTextFieldLabel={true}
+ *   showTextFieldHelpText={true}
+ *   textFieldState="default"
+ *   showPrimaryButton={true}
+ * />
+ * ```
+ */
+export const FormPattern = ({
+  // Select props
+  showSelectLabel = true,
+  showSelectHelpText = true,
+  showSelectLeftIcon = false,
+  // TextField props
+  showTextFieldLabel = true,
+  showTextFieldHelpText = true,
+  showTextFieldLeftIcon = false,
+  showTextFieldRightIcon = false,
+  // TextField state
+  textFieldState = 'default',
+  textFieldContent = 'placeholder',
+  textFieldType = 'text',
+  // Action buttons
+  showSecondaryButton = true,
+  showPrimaryButton = true
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsx(Select, {
+      state: "default",
+      open: "false",
+      value: "placeholder",
+      showLabel: showSelectLabel,
+      showHelpText: showSelectHelpText,
+      showLeftIcon: showSelectLeftIcon,
+      label: "Select Field",
+      helperText: "Choose an option",
+      placeholderText: "Select an item"
+    }), /*#__PURE__*/_jsx(TextField, {
+      state: textFieldState,
+      content: textFieldContent,
+      type: textFieldType,
+      showLabel: showTextFieldLabel,
+      showHelpText: showTextFieldHelpText,
+      showLeftIcon: showTextFieldLeftIcon,
+      showRightIcon: showTextFieldRightIcon,
+      label: "Text Field",
+      helpText: "Enter text here",
+      errorMessage: "This field has an error",
+      successMessage: "This field is valid",
+      inputProps: {
+        placeholder: 'Enter text'
+      }
+    }), (showSecondaryButton || showPrimaryButton) && /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 8
+      },
+      children: [showSecondaryButton && /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "md",
+          children: "Cancel"
+        })
+      }), showPrimaryButton && /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          size: "md",
+          children: "Submit"
+        })
+      })]
+    })]
+  });
+};
+FormPattern.displayName = 'FormPattern';
+//# sourceMappingURL=FormPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","TextField","Select","Button","jsx","_jsx","jsxs","_jsxs","FormPattern","showSelectLabel","showSelectHelpText","showSelectLeftIcon","showTextFieldLabel","showTextFieldHelpText","showTextFieldLeftIcon","showTextFieldRightIcon","textFieldState","textFieldContent","textFieldType","showSecondaryButton","showPrimaryButton","style","gap","children","state","open","value","showLabel","showHelpText","showLeftIcon","label","helperText","placeholderText","content","type","showRightIcon","helpText","errorMessage","successMessage","inputProps","placeholder","flexDirection","marginTop","flex","variant","size","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/FormPattern/FormPattern.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,SAAS,QAAQ,kDAA+C;AACzE,SAASC,MAAM,QAAQ,4CAAyC;AAChE,SAASC,MAAM,QAAQ,4CAAyC;;AAEhE;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA0BA;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,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1B;EACAC,eAAe,GAAG,IAAI;EACtBC,kBAAkB,GAAG,IAAI;EACzBC,kBAAkB,GAAG,KAAK;EAE1B;EACAC,kBAAkB,GAAG,IAAI;EACzBC,qBAAqB,GAAG,IAAI;EAC5BC,qBAAqB,GAAG,KAAK;EAC7BC,sBAAsB,GAAG,KAAK;EAE9B;EACAC,cAAc,GAAG,SAAS;EAC1BC,gBAAgB,GAAG,aAAa;EAChCC,aAAa,GAAG,MAAM;EAEtB;EACAC,mBAAmB,GAAG,IAAI;EAC1BC,iBAAiB,GAAG;AACJ,CAAC,KAAK;EACtB,oBACEb,KAAA,CAACP,IAAI;IAACqB,KAAK,EAAE;MAAEC,GAAG,EAAE;IAAG,CAAE;IAAAC,QAAA,gBAEvBlB,IAAA,CAACH,MAAM;MACLsB,KAAK,EAAC,SAAS;MACfC,IAAI,EAAC,OAAO;MACZC,KAAK,EAAC,aAAa;MACnBC,SAAS,EAAElB,eAAgB;MAC3BmB,YAAY,EAAElB,kBAAmB;MACjCmB,YAAY,EAAElB,kBAAmB;MACjCmB,KAAK,EAAC,cAAc;MACpBC,UAAU,EAAC,kBAAkB;MAC7BC,eAAe,EAAC;IAAgB,CACjC,CAAC,eAGF3B,IAAA,CAACJ,SAAS;MACRuB,KAAK,EAAER,cAAe;MACtBiB,OAAO,EAAEhB,gBAAiB;MAC1BiB,IAAI,EAAEhB,aAAc;MACpBS,SAAS,EAAEf,kBAAmB;MAC9BgB,YAAY,EAAEf,qBAAsB;MACpCgB,YAAY,EAAEf,qBAAsB;MACpCqB,aAAa,EAAEpB,sBAAuB;MACtCe,KAAK,EAAC,YAAY;MAClBM,QAAQ,EAAC,iBAAiB;MAC1BC,YAAY,EAAC,yBAAyB;MACtCC,cAAc,EAAC,qBAAqB;MACpCC,UAAU,EAAE;QACVC,WAAW,EAAE;MACf;IAAE,CACH,CAAC,EAGD,CAACrB,mBAAmB,IAAIC,iBAAiB,kBACxCb,KAAA,CAACP,IAAI;MAACqB,KAAK,EAAE;QAAEoB,aAAa,EAAE,KAAK;QAAEnB,GAAG,EAAE,EAAE;QAAEoB,SAAS,EAAE;MAAE,CAAE;MAAAnB,QAAA,GAC1DJ,mBAAmB,iBAClBd,IAAA,CAACL,IAAI;QAACqB,KAAK,EAAE;UAAEsB,IAAI,EAAE;QAAE,CAAE;QAAApB,QAAA,eACvBlB,IAAA,CAACF,MAAM;UAACyC,OAAO,EAAC,WAAW;UAACC,IAAI,EAAC,IAAI;UAAAtB,QAAA,EAAC;QAEtC,CAAQ;MAAC,CACL,CACP,EAEAH,iBAAiB,iBAChBf,IAAA,CAACL,IAAI;QAACqB,KAAK,EAAE;UAAEsB,IAAI,EAAE;QAAE,CAAE;QAAApB,QAAA,eACvBlB,IAAA,CAACF,MAAM;UAACyC,OAAO,EAAC,SAAS;UAACC,IAAI,EAAC,IAAI;UAAAtB,QAAA,EAAC;QAEpC,CAAQ;MAAC,CACL,CACP;IAAA,CACG,CACP;EAAA,CACG,CAAC;AAEX,CAAC;AAEDf,WAAW,CAACsC,WAAW,GAAG,aAAa","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,48 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { MonthlyCalendarPattern } from "./MonthlyCalendarPattern.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=326-8692';
+
+/**
+ * MonthlyCalendarPattern - Pattern component for displaying multiple months with event legend
+ *
+ * Use cases:
+ * - Academic calendars showing classes, exams, and submissions
+ * - Event calendars with different event types color-coded
+ * - Scheduling applications with multi-month views
+ * - Calendar-based itineraries and planning tools
+ *
+ * Features:
+ * - Legend badges showing event types with color indicators
+ * - Multiple MonthCalendar components
+ * - Customizable event types and colors
+ * - Support for event dots and count badges per date
+ */
+figma.connect(MonthlyCalendarPattern, FIGMA_URL, {
+  props: {
+    showLegend: figma.boolean('Show Legend')
+  },
+  example: props => /*#__PURE__*/_jsx(MonthlyCalendarPattern, {
+    months: ['January', 'February', 'March'],
+    showLegend: props.showLegend,
+    legendItems: [{
+      label: 'Theory Class',
+      color: '#4baabe'
+    }, {
+      label: 'Practical',
+      color: '#88b053'
+    }, {
+      label: 'Exam',
+      color: '#573dab'
+    }, {
+      label: 'Submission',
+      color: '#ed9035'
+    }, {
+      label: 'Event',
+      color: '#e74c3c'
+    }]
+  })
+});
+//# sourceMappingURL=MonthlyCalendarPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","MonthlyCalendarPattern","jsx","_jsx","FIGMA_URL","connect","props","showLegend","boolean","example","months","legendItems","label","color"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/MonthlyCalendarPattern/MonthlyCalendarPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,sBAAsB,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElE,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,sBAAsB,EAAEG,SAAS,EAAE;EAC/CE,KAAK,EAAE;IACLC,UAAU,EAAEP,KAAK,CAACQ,OAAO,CAAC,aAAa;EACzC,CAAC;EACDC,OAAO,EAAGH,KAAK,iBACbH,IAAA,CAACF,sBAAsB;IACrBS,MAAM,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,CAAE;IACzCH,UAAU,EAAED,KAAK,CAACC,UAAW;IAC7BI,WAAW,EAAE,CACX;MAAEC,KAAK,EAAE,cAAc;MAAEC,KAAK,EAAE;IAAU,CAAC,EAC3C;MAAED,KAAK,EAAE,WAAW;MAAEC,KAAK,EAAE;IAAU,CAAC,EACxC;MAAED,KAAK,EAAE,MAAM;MAAEC,KAAK,EAAE;IAAU,CAAC,EACnC;MAAED,KAAK,EAAE,YAAY;MAAEC,KAAK,EAAE;IAAU,CAAC,EACzC;MAAED,KAAK,EAAE,OAAO;MAAEC,KAAK,EAAE;IAAU,CAAC;EACpC,CACH;AAEL,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,121 @@
+"use strict";
+
+import { View, Text as RNText } from 'react-native';
+import { MonthCalendar } from "../../../components/DataDisplay/MonthCalendar/MonthCalendar.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Sub-Components
+ * --------------------------------------------------- */
+
+const LegendBadge = ({
+  label,
+  color
+}) => /*#__PURE__*/_jsxs(View, {
+  style: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#cbd5e1'
+  },
+  children: [/*#__PURE__*/_jsx(View, {
+    style: {
+      width: 12,
+      height: 12,
+      borderRadius: 6,
+      backgroundColor: color
+    }
+  }), /*#__PURE__*/_jsx(RNText, {
+    style: {
+      color: '#121212',
+      fontSize: 12,
+      fontWeight: '500'
+    },
+    numberOfLines: 1,
+    children: label
+  })]
+});
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * MonthlyCalendarPattern Component
+ *
+ * A pattern component that displays multiple months with an event legend.
+ *
+ * Layout:
+ * 1. Legend badges (optional) showing event types
+ * 2. Multiple MonthCalendar components for different months
+ *
+ * @example
+ * ```tsx
+ * <MonthlyCalendarPattern
+ *   months={['January', 'February', 'March']}
+ *   showLegend={true}
+ *   legendItems={[
+ *     { label: 'Theory Class', color: '#4baabe' },
+ *     { label: 'Practical', color: '#88b053' },
+ *   ]}
+ * />
+ * ```
+ */
+export const MonthlyCalendarPattern = ({
+  months = ['January', 'February', 'March'],
+  showLegend = true,
+  legendItems = [{
+    label: 'Theory Class',
+    color: '#4baabe'
+  }, {
+    label: 'Practical',
+    color: '#88b053'
+  }, {
+    label: 'Exam',
+    color: '#573dab'
+  }, {
+    label: 'Submission',
+    color: '#ed9035'
+  }, {
+    label: 'Event',
+    color: '#e74c3c'
+  }],
+  spacing = 16
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: spacing
+    },
+    children: [showLegend && /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingHorizontal: spacing,
+        gap: 8
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: 8
+        },
+        children: legendItems.map((item, idx) => /*#__PURE__*/_jsx(LegendBadge, {
+          ...item
+        }, idx))
+      })
+    }), months.map((month, idx) => /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(MonthCalendar, {
+        month: month
+      })
+    }, idx))]
+  });
+};
+MonthlyCalendarPattern.displayName = 'MonthlyCalendarPattern';
+export default MonthlyCalendarPattern;
+//# sourceMappingURL=MonthlyCalendarPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","RNText","MonthCalendar","jsx","_jsx","jsxs","_jsxs","LegendBadge","label","color","style","flexDirection","alignItems","gap","paddingHorizontal","paddingVertical","borderRadius","backgroundColor","borderWidth","borderColor","children","width","height","fontSize","fontWeight","numberOfLines","MonthlyCalendarPattern","months","showLegend","legendItems","spacing","flexWrap","map","item","idx","month","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/MonthlyCalendarPattern/MonthlyCalendarPattern.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,IAAI,IAAIC,MAAM,QAAQ,cAAc;AACnD,SAASC,aAAa,QAAQ,gEAA6D;;AAE3F;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuBA;AACA;AACA;;AAEA,MAAMC,WAAsC,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAM,CAAC,kBAC9DH,KAAA,CAACP,IAAI;EACHW,KAAK,EAAE;IACLC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,CAAC;IACNC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE,SAAS;IAC1BC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE;EACf,CAAE;EAAAC,QAAA,gBAEFhB,IAAA,CAACL,IAAI;IACHW,KAAK,EAAE;MACLW,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVN,YAAY,EAAE,CAAC;MACfC,eAAe,EAAER;IACnB;EAAE,CACH,CAAC,eACFL,IAAA,CAACH,MAAM;IACLS,KAAK,EAAE;MACLD,KAAK,EAAE,SAAS;MAChBc,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE;IACd,CAAE;IACFC,aAAa,EAAE,CAAE;IAAAL,QAAA,EAEhBZ;EAAK,CACA,CAAC;AAAA,CACL,CACP;;AAED;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMkB,sBAAsB,GAAGA,CAAC;EACrCC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC;EACzCC,UAAU,GAAG,IAAI;EACjBC,WAAW,GAAG,CACZ;IAAErB,KAAK,EAAE,cAAc;IAAEC,KAAK,EAAE;EAAU,CAAC,EAC3C;IAAED,KAAK,EAAE,WAAW;IAAEC,KAAK,EAAE;EAAU,CAAC,EACxC;IAAED,KAAK,EAAE,MAAM;IAAEC,KAAK,EAAE;EAAU,CAAC,EACnC;IAAED,KAAK,EAAE,YAAY;IAAEC,KAAK,EAAE;EAAU,CAAC,EACzC;IAAED,KAAK,EAAE,OAAO;IAAEC,KAAK,EAAE;EAAU,CAAC,CACrC;EACDqB,OAAO,GAAG;AACiB,CAAC,KAAK;EACjC,oBACExB,KAAA,CAACP,IAAI;IAACW,KAAK,EAAE;MAAEG,GAAG,EAAEiB;IAAQ,CAAE;IAAAV,QAAA,GAE3BQ,UAAU,iBACTxB,IAAA,CAACL,IAAI;MACHW,KAAK,EAAE;QACLI,iBAAiB,EAAEgB,OAAO;QAC1BjB,GAAG,EAAE;MACP,CAAE;MAAAO,QAAA,eAEFhB,IAAA,CAACL,IAAI;QACHW,KAAK,EAAE;UACLC,aAAa,EAAE,KAAK;UACpBoB,QAAQ,EAAE,MAAM;UAChBlB,GAAG,EAAE;QACP,CAAE;QAAAO,QAAA,EAEDS,WAAW,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,kBACzB9B,IAAA,CAACG,WAAW;UAAA,GAAe0B;QAAI,GAAbC,GAAgB,CACnC;MAAC,CACE;IAAC,CACH,CACP,EAGAP,MAAM,CAACK,GAAG,CAAC,CAACG,KAAK,EAAED,GAAG,kBACrB9B,IAAA,CAACL,IAAI;MAAAqB,QAAA,eACHhB,IAAA,CAACF,aAAa;QAACiC,KAAK,EAAEA;MAAM,CAAE;IAAC,GADtBD,GAEL,CACP,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAEDR,sBAAsB,CAACU,WAAW,GAAG,wBAAwB;AAE7D,eAAeV,sBAAsB","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["MonthlyCalendarPattern","default"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/MonthlyCalendarPattern/index.ts"],"mappings":";;AAAA,SACEA,sBAAsB,QAEjB,6BAA0B;AACjC,SAASC,OAAO,QAAQ,6BAA0B","ignoreList":[]}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { SkeletonPattern } from "./SkeletonPattern.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-3640';
+
+/**
+ * SkeletonPattern - Pattern component for loading placeholders
+ *
+ * Use cases:
+ * - Page loading states
+ * - Content placeholders while fetching data
+ * - Card and list item loading states
+ * - Skeleton screens for improved perceived performance
+ *
+ * Features:
+ * - Composed of multiple Skeleton components
+ * - Shows typical content structure (header, avatar, text, footer)
+ * - Configurable by swapping individual Skeleton instances
+ * - Reusable pattern for consistent loading states
+ */
+figma.connect(SkeletonPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*')
+  },
+  example: props => /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  })
+});
+//# sourceMappingURL=SkeletonPattern.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","SkeletonPattern","Fragment","_Fragment","jsx","_jsx","FIGMA_URL","connect","props","children","example"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/SkeletonPattern/SkeletonPattern.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,eAAe,QAAQ,sBAAmB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAEpD,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAN,KAAK,CAACO,OAAO,CAACN,eAAe,EAAEK,SAAS,EAAE;EACxCE,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/SkeletonPattern/SkeletonPattern.js

@@ -0,0 +1,91 @@
+"use strict";
+
+import { View } from 'react-native';
+import { Skeleton } from "../../../components/DataDisplay/Skeleton/Skeleton.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * SkeletonPattern Component
+ *
+ * A pattern component that composes multiple Skeleton variants to create
+ * common loading placeholder layouts.
+ *
+ * Order:
+ * 1. Large header rectangle (optional)
+ * 2. Avatar circle with text line (optional)
+ * 3. Multiple text lines (optional)
+ * 4. Footer rectangle (optional)
+ *
+ * @example
+ * ```tsx
+ * <SkeletonPattern
+ *   showHeader={true}
+ *   showAvatarWithText={true}
+ *   showTextLines={true}
+ *   textLineCount={4}
+ *   showFooter={true}
+ * />
+ * ```
+ */
+export const SkeletonPattern = ({
+  showHeader = true,
+  showAvatarWithText = true,
+  showTextLines = true,
+  textLineCount = 4,
+  showFooter = true,
+  spacing = 16
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: spacing
+    },
+    children: [showHeader && /*#__PURE__*/_jsx(Skeleton, {
+      variant: "rectangle",
+      size: "lg"
+    }), showAvatarWithText && /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'flex-start'
+      },
+      children: [/*#__PURE__*/_jsx(Skeleton, {
+        variant: "circle",
+        size: "xl"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          gap: 8
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          variant: "text",
+          size: "lg"
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          variant: "text",
+          size: "md"
+        })]
+      })]
+    }), showTextLines && /*#__PURE__*/_jsx(View, {
+      style: {
+        gap: 8
+      },
+      children: Array.from({
+        length: textLineCount
+      }).map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+        variant: "text",
+        size: "lg"
+      }, `skeleton-text-${i}`))
+    }), showFooter && /*#__PURE__*/_jsx(Skeleton, {
+      variant: "rectangle",
+      size: "md"
+    })]
+  });
+};
+SkeletonPattern.displayName = 'SkeletonPattern';
+//# sourceMappingURL=SkeletonPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Skeleton","jsx","_jsx","jsxs","_jsxs","SkeletonPattern","showHeader","showAvatarWithText","showTextLines","textLineCount","showFooter","spacing","style","gap","children","variant","size","flexDirection","alignItems","flex","Array","from","length","map","_","i","displayName"],"sourceRoot":"../../../../../src","sources":["patterns/pattern-components/SkeletonPattern/SkeletonPattern.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,QAAQ,QAAQ,sDAAmD;;AAE5E;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,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,UAAU,GAAG,IAAI;EACjBC,kBAAkB,GAAG,IAAI;EACzBC,aAAa,GAAG,IAAI;EACpBC,aAAa,GAAG,CAAC;EACjBC,UAAU,GAAG,IAAI;EACjBC,OAAO,GAAG;AACU,CAAC,KAAK;EAC1B,oBACEP,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE;MAAEC,GAAG,EAAEF;IAAQ,CAAE;IAAAG,QAAA,GAE3BR,UAAU,iBAAIJ,IAAA,CAACF,QAAQ;MAACe,OAAO,EAAC,WAAW;MAACC,IAAI,EAAC;IAAI,CAAE,CAAC,EAGxDT,kBAAkB,iBACjBH,KAAA,CAACL,IAAI;MACHa,KAAK,EAAE;QAAEK,aAAa,EAAE,KAAK;QAAEJ,GAAG,EAAE,CAAC;QAAEK,UAAU,EAAE;MAAa,CAAE;MAAAJ,QAAA,gBAGlEZ,IAAA,CAACF,QAAQ;QAACe,OAAO,EAAC,QAAQ;QAACC,IAAI,EAAC;MAAI,CAAE,CAAC,eAGvCZ,KAAA,CAACL,IAAI;QAACa,KAAK,EAAE;UAAEO,IAAI,EAAE,CAAC;UAAEN,GAAG,EAAE;QAAE,CAAE;QAAAC,QAAA,gBAC/BZ,IAAA,CAACF,QAAQ;UAACe,OAAO,EAAC,MAAM;UAACC,IAAI,EAAC;QAAI,CAAE,CAAC,eACrCd,IAAA,CAACF,QAAQ;UAACe,OAAO,EAAC,MAAM;UAACC,IAAI,EAAC;QAAI,CAAE,CAAC;MAAA,CACjC,CAAC;IAAA,CACH,CACP,EAGAR,aAAa,iBACZN,IAAA,CAACH,IAAI;MAACa,KAAK,EAAE;QAAEC,GAAG,EAAE;MAAE,CAAE;MAAAC,QAAA,EACrBM,KAAK,CAACC,IAAI,CAAC;QAAEC,MAAM,EAAEb;MAAc,CAAC,CAAC,CAACc,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC9CvB,IAAA,CAACF,QAAQ;QAA4Be,OAAO,EAAC,MAAM;QAACC,IAAI,EAAC;MAAI,GAA9C,iBAAiBS,CAAC,EAA8B,CAChE;IAAC,CACE,CACP,EAGAf,UAAU,iBAAIR,IAAA,CAACF,QAAQ;MAACe,OAAO,EAAC,WAAW;MAACC,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CACrD,CAAC;AAEX,CAAC;AAEDX,eAAe,CAACqB,WAAW,GAAG,iBAAiB","ignoreList":[]}

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

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

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

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