@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/lib/module/components/DataDisplay/Avatar/Avatar.js

@@ -0,0 +1,129 @@
+"use strict";
+
+import { View as RNView, Text as RNText } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { cn } from "../../../lib/utils.js";
+
+// NativeWind interop (className -> style)
+import { jsx as _jsx } from "react/jsx-runtime";
+const View = cssInterop(RNView, {
+  className: 'style'
+});
+const Text = cssInterop(RNText, {
+  className: 'style'
+});
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect)
+ * --------------------------------------------------- */
+
+export const AvatarVariants = {
+  size: ['sm', 'default', 'lg'],
+  type: ['initials', 'image', 'icon']
+};
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('items-center justify-center rounded-full bg-muted', {
+  variants: {
+    size: {
+      sm: 'w-8 h-8',
+      // 32
+      default: 'w-12 h-12',
+      // 48
+      lg: 'w-[60px] h-[60px]' // 60
+    },
+    type: {
+      initials: '',
+      image: 'bg-[lightgray]',
+      icon: ''
+    },
+    ring: {
+      false: '',
+      true: 'ring-2 ring-primary ring-offset-2 ring-offset-background'
+    }
+  },
+  defaultVariants: {
+    size: 'sm',
+    type: 'initials',
+    ring: false
+  }
+});
+const textVariants = cva('font-semibold uppercase text-muted-foreground', {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      // 12
+      default: 'text-base',
+      // 16
+      lg: 'text-xl' // 20
+    }
+  },
+  defaultVariants: {
+    size: 'sm'
+  }
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeSize(v) {
+  const s = String(v ?? 'sm').toLowerCase();
+  if (s === 'sm' || s === 'default' || s === 'lg') return s;
+  if (s === 'md') return 'default';
+  return 'sm';
+}
+function normalizeType(v) {
+  const s = String(v ?? 'initials').toLowerCase();
+  if (s === 'initials' || s === 'image' || s === 'icon') return s;
+  return 'initials';
+}
+function normalizeRing(v) {
+  if (typeof v === 'boolean') return v;
+  const s = String(v ?? 'false').toLowerCase();
+  return s === 'true' || s === '1';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Avatar(props) {
+  const {
+    initials,
+    size,
+    type,
+    showRing,
+    style,
+    testID
+  } = props;
+  const sz = normalizeSize(size);
+  const tp = normalizeType(type);
+  const ring = normalizeRing(showRing);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID ?? 'avatar',
+    className: cn(rootVariants({
+      size: sz,
+      type: tp,
+      ring: ring
+    })),
+    style: style,
+    children: /*#__PURE__*/_jsx(Text, {
+      testID: "avatar-initials",
+      className: cn(textVariants({
+        size: sz
+      })),
+      children: initials
+    })
+  });
+}
+Avatar.displayName = 'Avatar';
+export { rootVariants, textVariants };
+//# sourceMappingURL=Avatar.js.map

package/lib/module/components/DataDisplay/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","RNView","Text","RNText","cssInterop","cva","cn","jsx","_jsx","className","AvatarVariants","size","type","rootVariants","variants","sm","default","lg","initials","image","icon","ring","false","true","defaultVariants","textVariants","normalizeSize","v","s","String","toLowerCase","normalizeType","normalizeRing","Avatar","props","showRing","style","testID","sz","tp","children","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/DataDisplay/Badge/Badge.figma.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import * as React from 'react';
+import { Badge } from "./Badge.js";
+import { Text } from "../../Input/Text/Text.js";
+import { Circle } from 'lucide-react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=68-97';
+
+/**
+ * Badge - Compact label for status, metadata, or categorization
+ *
+ * Use cases:
+ * - Status indicators (success, warning, error)
+ * - Labels for items or categories
+ * - Counts and notifications
+ * - Inline metadata
+ *
+ * Features:
+ * - Multiple visual variants (default, success, warning, etc.)
+ * - Two size options (sm, md)
+ * - Optional left and right icons
+ * - Automatic text styling via TextClassContext
+ */
+figma.connect(Badge, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      secondary: 'secondary',
+      destructive: 'destructive',
+      success: 'success',
+      warning: 'warning',
+      outline: 'outline'
+    }),
+    size: figma.enum('size', {
+      sm: 'sm',
+      md: 'md'
+    }),
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon')
+  },
+  example: props => /*#__PURE__*/_jsx(Badge, {
+    variant: props.variant,
+    size: props.size,
+    leftIcon: props.showLeftIcon ? Circle : undefined,
+    rightIcon: props.showRightIcon ? Circle : undefined,
+    showRightIcon: props.showRightIcon,
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "Badge"
+    })
+  })
+});
+//# sourceMappingURL=Badge.figma.js.map

package/lib/module/components/DataDisplay/Badge/Badge.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","React","Badge","Text","Circle","jsx","_jsx","FIGMA_URL","connect","props","variant","enum","default","secondary","destructive","success","warning","outline","size","sm","md","showLeftIcon","boolean","showRightIcon","example","leftIcon","undefined","rightIcon","children"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/Badge/Badge.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,MAAM,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,SAAS,GACb,kGAAkG;;AAEpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAP,KAAK,CAACQ,OAAO,CAACN,KAAK,EAAEK,SAAS,EAAE;EAC9BE,KAAK,EAAE;IACLC,OAAO,EAAEV,KAAK,CAACW,IAAI,CAAC,SAAS,EAAE;MAC7BC,OAAO,EAAE,SAAS;MAClBC,SAAS,EAAE,WAAW;MACtBC,WAAW,EAAE,aAAa;MAC1BC,OAAO,EAAE,SAAS;MAClBC,OAAO,EAAE,SAAS;MAClBC,OAAO,EAAE;IACX,CAAC,CAAC;IAEFC,IAAI,EAAElB,KAAK,CAACW,IAAI,CAAC,MAAM,EAAE;MACvBQ,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IAEFC,YAAY,EAAErB,KAAK,CAACsB,OAAO,CAAC,eAAe,CAAC;IAC5CC,aAAa,EAAEvB,KAAK,CAACsB,OAAO,CAAC,gBAAgB;EAC/C,CAAC;EAEDE,OAAO,EAAGf,KAAK,iBACbH,IAAA,CAACJ,KAAK;IACJQ,OAAO,EAAED,KAAK,CAACC,OAAQ;IACvBQ,IAAI,EAAET,KAAK,CAACS,IAAK;IACjBO,QAAQ,EAAEhB,KAAK,CAACY,YAAY,GAAGjB,MAAM,GAAGsB,SAAU;IAClDC,SAAS,EAAElB,KAAK,CAACc,aAAa,GAAGnB,MAAM,GAAGsB,SAAU;IACpDH,aAAa,EAAEd,KAAK,CAACc,aAAc;IAAAK,QAAA,eAEnCtB,IAAA,CAACH,IAAI;MAAAyB,QAAA,EAAC;IAAK,CAAM;EAAC,CACb;AAEX,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/DataDisplay/Badge/Badge.js

@@ -0,0 +1,159 @@
+"use strict";
+
+import * as React from 'react';
+import * as Slot from '@rn-primitives/slot';
+import { cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { View } from 'react-native';
+import { cn } from "../../../lib/utils.js";
+import { TextClassContext } from "../../Input/Text/Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Slot.View, {
+  className: 'style'
+});
+
+/**
+ * Badge container style variants
+ *
+ * @variant default - Primary badge with solid background
+ * @variant secondary - Secondary badge with muted background
+ * @variant destructive - Destructive badge with danger/error styling
+ * @variant success - Success badge with positive/confirmation styling
+ * @variant warning - Warning badge with caution styling
+ * @variant outline - Badge with border and transparent background
+ *
+ * @size sm - Small badge with compact padding and text
+ * @size md - Default badge size
+ */
+const badgeVariants = cva('flex-row items-center rounded-full border web:inline-flex', {
+  variants: {
+    variant: {
+      default: 'border-transparent bg-brand-primary',
+      secondary: 'border-transparent bg-surface-subtle',
+      destructive: 'border-transparent bg-highlight-alert-red',
+      success: 'border-transparent bg-highlight-success-green',
+      warning: 'border-transparent bg-highlight-warning-orange',
+      outline: 'border-border-default bg-transparent'
+    },
+    size: {
+      sm: 'px-2 py-0.5',
+      md: 'px-2.5 py-1'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+});
+
+/**
+ * Badge text style variants for matching text colors with badge variants
+ * Applied through TextClassContext to child Text components
+ *
+ * Variants match badgeVariants to ensure proper contrast
+ * @see badgeVariants
+ */
+const badgeTextVariants = cva('font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-text-inverse',
+      secondary: 'text-text-primary',
+      destructive: 'text-text-inverse',
+      success: 'text-text-inverse',
+      warning: 'text-text-inverse',
+      outline: 'text-text-primary'
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+});
+
+/**
+ * Props for Badge component
+ *
+ * @extends SlottableViewProps - Includes all View props plus asChild for slot composition
+ * @extends VariantProps - Includes variant and size styling options from badgeVariants
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline'} [variant='default']
+ *   - Badge style variant
+ * @property {'sm' | 'md'} [size='md'] - Badge size
+ * @property {LucideIcon} [leftIcon] - Optional icon displayed before badge content
+ * @property {LucideIcon} [rightIcon] - Optional icon displayed after badge content
+ * @property {boolean} [showRightIcon=false] - Controls visibility of rightIcon
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success" size="sm">
+ *   <Text>Active</Text>
+ * </Badge>
+ * ```
+ */
+
+/**
+ * A compact badge component for displaying status, labels, or counts
+ *
+ * Small, pill-shaped component for highlighting information. Supports multiple
+ * variants and sizes, optional icons, and automatically styles child Text
+ * components via TextClassContext.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Success badge with icon
+ * <Badge variant="success" leftIcon={Check}>
+ *   <Text>Verified</Text>
+ * </Badge>
+ *
+ * // Warning badge with right icon
+ * <Badge variant="warning" rightIcon={X} showRightIcon>
+ *   <Text>Pending</Text>
+ * </Badge>
+ * ```
+ */
+const Badge = /*#__PURE__*/React.forwardRef(({
+  variant,
+  size,
+  asChild = false,
+  leftIcon: LeftIcon,
+  rightIcon: RightIcon,
+  showRightIcon = false,
+  children,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  const iconSize = size === 'sm' ? 12 : 14;
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: badgeTextVariants({
+      variant,
+      size
+    }),
+    children: /*#__PURE__*/_jsxs(Component, {
+      className: cn(badgeVariants({
+        variant,
+        size
+      })),
+      ref: ref,
+      ...props,
+      children: [LeftIcon && /*#__PURE__*/_jsx(LeftIcon, {
+        size: iconSize,
+        className: "mr-1"
+      }), children, showRightIcon && RightIcon && /*#__PURE__*/_jsx(RightIcon, {
+        size: iconSize,
+        className: "ml-1"
+      })]
+    })
+  });
+});
+Badge.displayName = 'Badge';
+export { Badge, badgeTextVariants, badgeVariants };
+//# sourceMappingURL=Badge.js.map

package/lib/module/components/DataDisplay/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Slot","cva","cssInterop","View","cn","TextClassContext","jsx","_jsx","jsxs","_jsxs","className","badgeVariants","variants","variant","default","secondary","destructive","success","warning","outline","size","sm","md","defaultVariants","badgeTextVariants","Badge","forwardRef","asChild","leftIcon","LeftIcon","rightIcon","RightIcon","showRightIcon","children","props","ref","Component","iconSize","Provider","value","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/Badge/Badge.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/DataDisplay/BannerRow/BannerRow.figma.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { BannerRow } from "./BannerRow.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=239-1028';
+
+/**
+ * BannerRow - Horizontal scrollable row of gradient banners
+ *
+ * Use cases:
+ * - Promotional banners
+ * - Featured content carousel
+ * - Hero sections
+ *
+ * Features:
+ * - Horizontal scroll with hidden indicators
+ * - Gradient background (111° angle approximation)
+ * - Configurable dimensions and colors
+ * - End spacer for scroll padding
+ */
+figma.connect(BannerRow, FIGMA_URL, {
+  props: {
+    banners: figma.children('Banner*')
+  },
+  example: () => /*#__PURE__*/_jsx(BannerRow, {
+    banners: [{
+      id: '1'
+    }, {
+      id: '2'
+    }]
+  })
+});
+//# sourceMappingURL=BannerRow.figma.js.map

package/lib/module/components/DataDisplay/BannerRow/BannerRow.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","BannerRow","jsx","_jsx","FIGMA_URL","connect","props","banners","children","example","id"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/BannerRow/BannerRow.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,SAAS,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,SAAS,EAAEG,SAAS,EAAE;EAClCE,KAAK,EAAE;IACLC,OAAO,EAAEP,KAAK,CAACQ,QAAQ,CAAC,SAAS;EACnC,CAAC;EACDC,OAAO,EAAEA,CAAA,kBAAMN,IAAA,CAACF,SAAS;IAACM,OAAO,EAAE,CAAC;MAAEG,EAAE,EAAE;IAAI,CAAC,EAAE;MAAEA,EAAE,EAAE;IAAI,CAAC;EAAE,CAAE;AAClE,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/DataDisplay/BannerRow/BannerRow.js

@@ -0,0 +1,120 @@
+"use strict";
+
+import * as React from 'react';
+import { View, ScrollView } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { cssInterop } from 'nativewind';
+
+// NativeWind interop
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(ScrollView, {
+  className: 'style'
+});
+cssInterop(View, {
+  className: 'style'
+});
+
+/* -----------------------------------------------------
+ * Tokens (from Figma)
+ * --------------------------------------------------- */
+
+const tokens = {
+  radius: {
+    xl: 20
+  },
+  spacing: {
+    sm: 8,
+    xl: 20
+  },
+  colors: {
+    highlightPurple: 'rgb(87, 61, 171)',
+    highlightPurpleMuted: 'rgba(87, 61, 171, 0.2)'
+  }
+};
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Banner Component
+ * --------------------------------------------------- */
+
+export function Banner({
+  gradientColors = [tokens.colors.highlightPurple, tokens.colors.highlightPurpleMuted],
+  width = 400,
+  height = 150,
+  borderRadius = tokens.radius.xl,
+  children,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(LinearGradient, {
+    testID: testID ?? 'banner',
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 1
+    },
+    colors: gradientColors,
+    style: [{
+      width,
+      height,
+      borderRadius,
+      overflow: 'hidden'
+    }, style],
+    children: children
+  });
+}
+Banner.displayName = 'Banner';
+
+/* -----------------------------------------------------
+ * BannerRow Component
+ * --------------------------------------------------- */
+
+export function BannerRow({
+  banners,
+  gap = tokens.spacing.sm,
+  contentPadding = tokens.spacing.xl,
+  showsScrollIndicator = false,
+  showEndSpacer = true,
+  onBannerPress: _onBannerPress,
+  style,
+  contentContainerStyle,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    testID: testID ?? 'banner-row',
+    horizontal: true,
+    showsHorizontalScrollIndicator: showsScrollIndicator,
+    style: style,
+    contentContainerStyle: [{
+      paddingHorizontal: contentPadding,
+      gap: gap,
+      alignItems: 'center'
+    }, contentContainerStyle],
+    children: [banners.map((banner, _index) => {
+      const {
+        id,
+        children,
+        ...bannerProps
+      } = banner;
+      return /*#__PURE__*/_jsx(Banner, {
+        testID: `banner-${id}`,
+        ...bannerProps,
+        children: children
+      }, id);
+    }), showEndSpacer && /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 12,
+        height: 100,
+        opacity: 0
+      }
+    })]
+  });
+}
+BannerRow.displayName = 'BannerRow';
+//# sourceMappingURL=BannerRow.js.map

package/lib/module/components/DataDisplay/BannerRow/BannerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","ScrollView","LinearGradient","cssInterop","jsx","_jsx","jsxs","_jsxs","className","tokens","radius","xl","spacing","sm","colors","highlightPurple","highlightPurpleMuted","Banner","gradientColors","width","height","borderRadius","children","style","testID","start","x","y","end","overflow","displayName","BannerRow","banners","gap","contentPadding","showsScrollIndicator","showEndSpacer","onBannerPress","_onBannerPress","contentContainerStyle","horizontal","showsHorizontalScrollIndicator","paddingHorizontal","alignItems","map","banner","_index","id","bannerProps","opacity"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/BannerRow/BannerRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/DataDisplay/CalendarItem/CalendarItem.figma.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { CalendarItem } from "./CalendarItem.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(RNView, {
+  className: 'style'
+});
+const View = RNView;
+const CALENDAR_ITEM_FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=315-6878';
+figma.connect(CalendarItem, CALENDAR_ITEM_FIGMA_URL, {
+  props: {
+    span: figma.enum('span', {
+      '1': 1,
+      '2': 2,
+      '3': 3
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(CalendarItem, {
+    span: props.span,
+    time: "09:00 AM",
+    eventName: "Web Technologies",
+    eventTime: "09:00 AM - 09:50 AM",
+    badgeText: "Event",
+    showBadge: true,
+    showTrailing: true
+  })
+});
+export default function CalendarItemFigma() {
+  return /*#__PURE__*/_jsxs(View, {
+    className: "bg-background p-5 gap-6 flex-col",
+    children: [/*#__PURE__*/_jsx(CalendarItem, {
+      span: 1,
+      time: "09:00 AM",
+      eventName: "Web Technologies",
+      eventTime: "09:00 AM - 09:50 AM",
+      showBadge: true,
+      showTrailing: true,
+      badgeText: "Event"
+    }), /*#__PURE__*/_jsx(CalendarItem, {
+      span: 2,
+      time: "10:00 AM",
+      eventName: "React Workshop",
+      eventTime: "10:00 AM - 11:30 AM",
+      showBadge: true,
+      showTrailing: true,
+      badgeText: "Workshop"
+    }), /*#__PURE__*/_jsx(CalendarItem, {
+      span: 3,
+      time: "01:00 PM",
+      eventName: "Full Day Conference",
+      eventTime: "01:00 PM - 05:00 PM",
+      showBadge: true,
+      showTrailing: true,
+      badgeText: "Conference"
+    })]
+  });
+}
+//# sourceMappingURL=CalendarItem.figma.js.map

package/lib/module/components/DataDisplay/CalendarItem/CalendarItem.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","React","View","RNView","cssInterop","CalendarItem","jsx","_jsx","jsxs","_jsxs","className","CALENDAR_ITEM_FIGMA_URL","connect","props","span","enum","example","time","eventName","eventTime","badgeText","showBadge","showTrailing","CalendarItemFigma","children"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/CalendarItem/CalendarItem.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,IAAIC,MAAM,QAAQ,cAAc;AAC7C,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9CL,UAAU,CAACD,MAAM,EAAE;EAAEO,SAAS,EAAE;AAAQ,CAAC,CAAC;AAE1C,MAAMR,IAAI,GAAGC,MAEZ;AAED,MAAMQ,uBAAuB,GAC3B,qGAAqG;AAEvGX,KAAK,CAACY,OAAO,CAACP,YAAY,EAAEM,uBAAuB,EAAE;EACnDE,KAAK,EAAE;IACLC,IAAI,EAAEd,KAAK,CAACe,IAAI,CAAC,MAAM,EAAE;MACvB,GAAG,EAAE,CAAC;MACN,GAAG,EAAE,CAAC;MACN,GAAG,EAAE;IACP,CAAC;EACH,CAAC;EACDC,OAAO,EAAGH,KAAK,iBACbN,IAAA,CAACF,YAAY;IACXS,IAAI,EAAED,KAAK,CAACC,IAAkB;IAC9BG,IAAI,EAAC,UAAU;IACfC,SAAS,EAAC,kBAAkB;IAC5BC,SAAS,EAAC,qBAAqB;IAC/BC,SAAS,EAAC,OAAO;IACjBC,SAAS,EAAE,IAAK;IAChBC,YAAY,EAAE;EAAK,CACpB;AAEL,CAAC,CAAC;AAEF,eAAe,SAASC,iBAAiBA,CAAA,EAAG;EAC1C,oBACEd,KAAA,CAACP,IAAI;IAACQ,SAAS,EAAC,kCAAkC;IAAAc,QAAA,gBAEhDjB,IAAA,CAACF,YAAY;MACXS,IAAI,EAAE,CAAE;MACRG,IAAI,EAAC,UAAU;MACfC,SAAS,EAAC,kBAAkB;MAC5BC,SAAS,EAAC,qBAAqB;MAC/BE,SAAS,EAAE,IAAK;MAChBC,YAAY,EAAE,IAAK;MACnBF,SAAS,EAAC;IAAO,CAClB,CAAC,eAGFb,IAAA,CAACF,YAAY;MACXS,IAAI,EAAE,CAAE;MACRG,IAAI,EAAC,UAAU;MACfC,SAAS,EAAC,gBAAgB;MAC1BC,SAAS,EAAC,qBAAqB;MAC/BE,SAAS,EAAE,IAAK;MAChBC,YAAY,EAAE,IAAK;MACnBF,SAAS,EAAC;IAAU,CACrB,CAAC,eAGFb,IAAA,CAACF,YAAY;MACXS,IAAI,EAAE,CAAE;MACRG,IAAI,EAAC,UAAU;MACfC,SAAS,EAAC,qBAAqB;MAC/BC,SAAS,EAAC,qBAAqB;MAC/BE,SAAS,EAAE,IAAK;MAChBC,YAAY,EAAE,IAAK;MACnBF,SAAS,EAAC;IAAY,CACvB,CAAC;EAAA,CACE,CAAC;AAEX","ignoreList":[]}