@campxdev/react-native-blueprint 0.1.13 → 0.1.15

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

@@ -0,0 +1,225 @@
+"use strict";
+
+/// <reference types="nativewind/types" />
+// @ts-nocheck
+import * as React from 'react';
+import { View, Text as RNText } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { cn } from "../../../lib/utils.js";
+import { Circle } from 'lucide-react-native';
+
+// NativeWind interop (className -> style)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(RNText, {
+  className: 'style'
+});
+
+/* -----------------------------------------------------
+ * Canonical variants (match Figma + Code Connect) — lowercase
+ * --------------------------------------------------- */
+
+export const ChipVariants = {
+  state: ['default', 'selected', 'disabled'],
+  variant: ['default', 'outline', 'brand', 'success', 'warning', 'destructive']
+};
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('flex flex-row items-center justify-center gap-1 rounded-full px-4 py-2', {
+  variants: {
+    variant: {
+      default: 'bg-surface-subtle',
+      outline: 'bg-transparent border border-border-default',
+      brand: 'bg-brand-primary',
+      success: 'bg-highlight-success-green-muted',
+      warning: 'bg-highlight-warning-orange-muted',
+      destructive: 'bg-highlight-alert-red-muted'
+    },
+    state: {
+      default: '',
+      selected: '',
+      disabled: ''
+    }
+  },
+  compoundVariants: [
+  // Selected borders
+  {
+    variant: 'default',
+    state: 'selected',
+    className: 'border border-brand-primary bg-surface-subtle'
+  }, {
+    variant: 'outline',
+    state: 'selected',
+    className: 'border border-brand-primary bg-transparent'
+  }, {
+    variant: 'brand',
+    state: 'selected',
+    className: 'border border-border-default bg-brand-primary'
+  }, {
+    variant: 'success',
+    state: 'selected',
+    className: 'border border-highlight-success-green bg-highlight-success-green-muted'
+  }, {
+    variant: 'warning',
+    state: 'selected',
+    className: 'border border-highlight-warning-orange bg-highlight-warning-orange-muted'
+  }, {
+    variant: 'destructive',
+    state: 'selected',
+    className: 'border border-highlight-alert-red bg-highlight-alert-red-muted'
+  },
+  // Disabled opacity
+  {
+    state: 'disabled',
+    variant: 'default',
+    className: 'opacity-50'
+  }, {
+    state: 'disabled',
+    variant: 'outline',
+    className: 'opacity-50'
+  }, {
+    state: 'disabled',
+    variant: 'brand',
+    className: 'opacity-50'
+  }, {
+    state: 'disabled',
+    variant: 'success',
+    className: 'opacity-50'
+  }, {
+    state: 'disabled',
+    variant: 'warning',
+    className: 'opacity-50'
+  }, {
+    state: 'disabled',
+    variant: 'destructive',
+    className: 'opacity-50'
+  }],
+  defaultVariants: {
+    variant: 'default',
+    state: 'default'
+  }
+});
+const textVariants = cva('text-sm font-medium', {
+  variants: {
+    variant: {
+      default: 'text-text-secondary',
+      outline: 'text-text-secondary',
+      brand: 'text-text-inverse',
+      success: 'text-highlight-success-green',
+      warning: 'text-highlight-warning-orange',
+      destructive: 'text-highlight-alert-red'
+    },
+    state: {
+      default: '',
+      selected: '',
+      disabled: ''
+    }
+  },
+  compoundVariants: [{
+    variant: 'default',
+    state: 'selected',
+    className: 'text-brand-primary'
+  }, {
+    variant: 'outline',
+    state: 'selected',
+    className: 'text-brand-primary'
+  },
+  // Disabled opacity handled on root; keep text consistent
+  {
+    variant: 'brand',
+    state: 'disabled',
+    className: 'text-text-inverse'
+  }],
+  defaultVariants: {
+    variant: 'default',
+    state: 'default'
+  }
+});
+const iconVariants = cva('w-3 h-3', {
+  variants: {
+    state: {
+      default: '',
+      selected: '',
+      disabled: 'opacity-50'
+    }
+  },
+  defaultVariants: {
+    state: 'default'
+  }
+});
+
+/* -----------------------------------------------------
+ * Props (lowercase + backward compatible)
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Normalizers
+ * --------------------------------------------------- */
+
+function normalizeVariant(v) {
+  const s = String(v ?? 'default').toLowerCase();
+  if (s === 'default' || s === 'outline' || s === 'brand' || s === 'success' || s === 'warning' || s === 'destructive') {
+    return s;
+  }
+  return 'default';
+}
+function normalizeState(v) {
+  const s = String(v ?? 'default').toLowerCase();
+  if (s === 'default' || s === 'selected' || s === 'disabled') return s;
+  return 'default';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Chip(props) {
+  const {
+    variant,
+    state,
+    showLeftIcon,
+    showRightIcon,
+    style,
+    testID,
+    children
+  } = props;
+  const v = normalizeVariant(variant);
+  const st = normalizeState(state);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ?? 'chip',
+    className: cn(rootVariants({
+      variant: v,
+      state: st
+    })),
+    style: style,
+    children: [showLeftIcon ? /*#__PURE__*/_jsx(Circle, {
+      testID: "chip-left-icon",
+      size: 14,
+      className: cn('text-text-primary', v !== 'outline' && v !== 'default' && 'text-text-inverse')
+    }) : null, /*#__PURE__*/_jsx(RNText, {
+      testID: "chip-label",
+      className: cn(textVariants({
+        variant: v,
+        state: st
+      })),
+      children: children ?? 'Chip'
+    }), showRightIcon ? /*#__PURE__*/_jsx(View, {
+      testID: "chip-right-icon",
+      className: cn(iconVariants({
+        state: st
+      })),
+      children: /*#__PURE__*/_jsx(Circle, {
+        size: 14,
+        className: cn('text-text-primary', v !== 'outline' && v !== 'default' && 'text-text-inverse')
+      })
+    }) : null]
+  });
+}
+Chip.displayName = 'Chip';
+export { rootVariants, textVariants };
+//# sourceMappingURL=Chips.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","RNText","cssInterop","cva","cn","Circle","jsx","_jsx","jsxs","_jsxs","className","ChipVariants","state","variant","rootVariants","variants","default","outline","brand","success","warning","destructive","selected","disabled","compoundVariants","defaultVariants","textVariants","iconVariants","normalizeVariant","v","s","String","toLowerCase","normalizeState","Chip","props","showLeftIcon","showRightIcon","style","testID","children","st","size","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/Chips/Chips.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,42 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { ChipsRow } from "./ChipsRow.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-1027';
+
+/**
+ * ChipsRow - Horizontal scrollable row of chips
+ *
+ * Use cases:
+ * - Filter selections
+ * - Category navigation
+ * - Tag display
+ *
+ * Features:
+ * - Horizontal scroll with hidden indicators
+ * - Each chip inherits all Chip component properties
+ * - Configurable gap and padding
+ */
+figma.connect(ChipsRow, FIGMA_URL, {
+  props: {
+    chips: figma.children('Chip*')
+  },
+  example: () => /*#__PURE__*/_jsx(ChipsRow, {
+    chips: [{
+      id: '1',
+      label: 'Chip Title 1',
+      state: 'selected'
+    }, {
+      id: '2',
+      label: 'Chip Title 2'
+    }, {
+      id: '3',
+      label: 'Chip Title 3'
+    }, {
+      id: '4',
+      label: 'Chip Title 4'
+    }]
+  })
+});
+//# sourceMappingURL=ChipsRow.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","ChipsRow","jsx","_jsx","FIGMA_URL","connect","props","chips","children","example","id","label","state"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/ChipsRow/ChipsRow.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtC,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,QAAQ,EAAEG,SAAS,EAAE;EACjCE,KAAK,EAAE;IACLC,KAAK,EAAEP,KAAK,CAACQ,QAAQ,CAAC,OAAO;EAC/B,CAAC;EACDC,OAAO,EAAEA,CAAA,kBACPN,IAAA,CAACF,QAAQ;IACPM,KAAK,EAAE,CACL;MAAEG,EAAE,EAAE,GAAG;MAAEC,KAAK,EAAE,cAAc;MAAEC,KAAK,EAAE;IAAW,CAAC,EACrD;MAAEF,EAAE,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAe,CAAC,EAClC;MAAED,EAAE,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAe,CAAC,EAClC;MAAED,EAAE,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAe,CAAC;EAClC,CACH;AAEL,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,62 @@
+"use strict";
+
+// @ts-nocheck
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Chip } from "../Chips/Chips.js";
+
+// NativeWind interop
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(ScrollView, {
+  className: 'style'
+});
+cssInterop(View, {
+  className: 'style'
+});
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function ChipsRow({
+  chips,
+  gap = 8,
+  contentPadding = 16,
+  showsScrollIndicator = false,
+  onChipPress: _onChipPress,
+  style,
+  contentContainerStyle,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    testID: testID ?? 'chips-row',
+    horizontal: true,
+    showsHorizontalScrollIndicator: showsScrollIndicator,
+    style: style,
+    contentContainerStyle: [{
+      paddingHorizontal: contentPadding,
+      gap: gap,
+      flexDirection: 'row',
+      alignItems: 'center'
+    }, contentContainerStyle],
+    children: chips.map((chip, _index) => {
+      const {
+        id,
+        label,
+        ...chipProps
+      } = chip;
+      return /*#__PURE__*/_jsx(Chip, {
+        testID: `chip-${id}`,
+        ...chipProps,
+        children: label
+      }, id);
+    })
+  });
+}
+ChipsRow.displayName = 'ChipsRow';
+//# sourceMappingURL=ChipsRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollView","View","cssInterop","Chip","jsx","_jsx","className","ChipsRow","chips","gap","contentPadding","showsScrollIndicator","onChipPress","_onChipPress","style","contentContainerStyle","testID","horizontal","showsHorizontalScrollIndicator","paddingHorizontal","flexDirection","alignItems","children","map","chip","_index","id","label","chipProps","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/ChipsRow/ChipsRow.tsx"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAC/E,SAASC,UAAU,QAAQ,YAAY;AAEvC,SAASC,IAAI,QAAwB,mBAAgB;;AAErD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACAH,UAAU,CAACF,UAAU,EAAE;EAAEM,SAAS,EAAE;AAAQ,CAAC,CAAC;AAC9CJ,UAAU,CAACD,IAAI,EAAE;EAAEK,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAExC;AACA;AACA;;AAmCA;AACA;AACA;;AAEA,OAAO,SAASC,QAAQA,CAAC;EACvBC,KAAK;EACLC,GAAG,GAAG,CAAC;EACPC,cAAc,GAAG,EAAE;EACnBC,oBAAoB,GAAG,KAAK;EAC5BC,WAAW,EAAEC,YAAY;EACzBC,KAAK;EACLC,qBAAqB;EACrBC;AACa,CAAC,EAAE;EAChB,oBACEX,IAAA,CAACL,UAAU;IACTgB,MAAM,EAAEA,MAAM,IAAI,WAAY;IAC9BC,UAAU;IACVC,8BAA8B,EAAEP,oBAAqB;IACrDG,KAAK,EAAEA,KAAM;IACbC,qBAAqB,EAAE,CACrB;MACEI,iBAAiB,EAAET,cAAc;MACjCD,GAAG,EAAEA,GAAG;MACRW,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE;IACd,CAAC,EACDN,qBAAqB,CACrB;IAAAO,QAAA,EAEDd,KAAK,CAACe,GAAG,CAAC,CAACC,IAAI,EAAEC,MAAM,KAAK;MAC3B,MAAM;QAAEC,EAAE;QAAEC,KAAK;QAAE,GAAGC;MAAU,CAAC,GAAGJ,IAAI;MACxC,oBACEnB,IAAA,CAACF,IAAI;QAAUa,MAAM,EAAE,QAAQU,EAAE,EAAG;QAAA,GAAKE,SAAS;QAAAN,QAAA,EAC/CK;MAAK,GADGD,EAEL,CAAC;IAEX,CAAC;EAAC,CACQ,CAAC;AAEjB;AAEAnB,QAAQ,CAACsB,WAAW,GAAG,UAAU","ignoreList":[]}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { DataCard } from "./DataCard.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(RNView, {
+  className: 'style'
+});
+const View = RNView;
+const DATA_CARD_FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=310-6597';
+figma.connect(DataCard, DATA_CARD_FIGMA_URL, {
+  props: {
+    children: figma.children('*')
+  },
+  example: () => /*#__PURE__*/_jsx(DataCard, {
+    title: "Data Card Title",
+    value: "Value"
+  })
+});
+export default function DataCardFigma() {
+  return /*#__PURE__*/_jsxs(View, {
+    className: "bg-background p-6 gap-4 flex-col",
+    children: [/*#__PURE__*/_jsx(DataCard, {
+      title: "Metric Title",
+      value: "42"
+    }), /*#__PURE__*/_jsx(DataCard, {
+      title: "Count",
+      value: "128"
+    }), /*#__PURE__*/_jsx(DataCard, {
+      title: "Status",
+      value: "Active"
+    })]
+  });
+}
+//# sourceMappingURL=DataCard.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","React","View","RNView","cssInterop","DataCard","jsx","_jsx","jsxs","_jsxs","className","DATA_CARD_FIGMA_URL","connect","props","children","example","title","value","DataCardFigma"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/DataCard/DataCard.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,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEtCL,UAAU,CAACD,MAAM,EAAE;EAAEO,SAAS,EAAE;AAAQ,CAAC,CAAC;AAE1C,MAAMR,IAAI,GAAGC,MAEZ;AAED,MAAMQ,mBAAmB,GACvB,qGAAqG;AAEvGX,KAAK,CAACY,OAAO,CAACP,QAAQ,EAAEM,mBAAmB,EAAE;EAC3CE,KAAK,EAAE;IACLC,QAAQ,EAAEd,KAAK,CAACc,QAAQ,CAAC,GAAG;EAC9B,CAAC;EACDC,OAAO,EAAEA,CAAA,kBAAMR,IAAA,CAACF,QAAQ;IAACW,KAAK,EAAC,iBAAiB;IAACC,KAAK,EAAC;EAAO,CAAE;AAClE,CAAC,CAAC;AAEF,eAAe,SAASC,aAAaA,CAAA,EAAG;EACtC,oBACET,KAAA,CAACP,IAAI;IAACQ,SAAS,EAAC,kCAAkC;IAAAI,QAAA,gBAChDP,IAAA,CAACF,QAAQ;MAACW,KAAK,EAAC,cAAc;MAACC,KAAK,EAAC;IAAI,CAAE,CAAC,eAC5CV,IAAA,CAACF,QAAQ;MAACW,KAAK,EAAC,OAAO;MAACC,KAAK,EAAC;IAAK,CAAE,CAAC,eACtCV,IAAA,CAACF,QAAQ;MAACW,KAAK,EAAC,QAAQ;MAACC,KAAK,EAAC;IAAQ,CAAE,CAAC;EAAA,CACtC,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+import * as React from 'react';
+import { View, Text as RNText } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(RNText, {
+  className: 'style'
+});
+const View_ = View;
+const Text = RNText;
+
+/**
+ * DataCard Component
+ *
+ * A simple, compact card component for displaying a title and value.
+ * Perfect for showing key metrics, statistics, or small data pieces
+ * in a clean, organized layout.
+ *
+ * @example
+ * ```tsx
+ * <DataCard />
+ * ```
+ */
+
+export const DataCard = ({
+  title = 'Data Card Title',
+  value = 'Value',
+  style,
+  testID
+}) => {
+  return /*#__PURE__*/_jsxs(View_, {
+    testID: testID ?? 'data-card',
+    style: style,
+    className: "flex-col items-start gap-2 rounded-lg bg-surface-default p-4 w-45",
+    children: [/*#__PURE__*/_jsx(Text, {
+      className: "text-xs font-medium text-text-secondary w-full",
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-xl font-semibold text-foreground w-full",
+      children: value
+    })]
+  });
+};
+DataCard.displayName = 'DataCard';
+export default DataCard;
+//# sourceMappingURL=DataCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","RNText","cssInterop","jsx","_jsx","jsxs","_jsxs","className","View_","DataCard","title","value","style","testID","children","displayName"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/DataCard/DataCard.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,IAAI,EACJC,IAAI,IAAIC,MAAM,QAGT,cAAc;AACrB,SAASC,UAAU,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExCJ,UAAU,CAACH,IAAI,EAAE;EAAEQ,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxCL,UAAU,CAACD,MAAM,EAAE;EAAEM,SAAS,EAAE;AAAQ,CAAC,CAAC;AAE1C,MAAMC,KAAK,GAAGT,IAEb;AACD,MAAMC,IAAI,GAAGC,MAEZ;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMQ,QAAQ,GAAGA,CAAC;EACvBC,KAAK,GAAG,iBAAiB;EACzBC,KAAK,GAAG,OAAO;EACfC,KAAK;EACLC;AACa,CAAC,KAAK;EACnB,oBACEP,KAAA,CAACE,KAAK;IACJK,MAAM,EAAEA,MAAM,IAAI,WAAY;IAC9BD,KAAK,EAAEA,KAAM;IACbL,SAAS,EAAC,mEAAmE;IAAAO,QAAA,gBAG7EV,IAAA,CAACJ,IAAI;MAACO,SAAS,EAAC,gDAAgD;MAAAO,QAAA,EAC7DJ;IAAK,CACF,CAAC,eAGPN,IAAA,CAACJ,IAAI;MAACO,SAAS,EAAC,8CAA8C;MAAAO,QAAA,EAC3DH;IAAK,CACF,CAAC;EAAA,CACF,CAAC;AAEZ,CAAC;AAEDF,QAAQ,CAACM,WAAW,GAAG,UAAU;AAEjC,eAAeN,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+import { figma } from '@figma/code-connect';
+import { DataListItem } from "./DataListItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO: Update with the correct Figma node ID
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=182-301';
+
+/**
+ * DataListItem
+ *
+ * Purpose:
+ * - Display list items with leading/trailing slots
+ * - Supports comfortable and compact densities
+ * - Multiple states: default, pressed, selected, disabled
+ *
+ * Figma rules:
+ * - Density and state control the layout and background
+ * - Leading slot: avatar, icon, checkbox, or image
+ * - Trailing slot: chevron or switch
+ */
+figma.connect(DataListItem, FIGMA_URL, {
+  props: {
+    density: figma.enum('density', {
+      comfortable: 'comfortable',
+      compact: 'compact'
+    }),
+    state: figma.enum('state', {
+      default: 'default',
+      pressed: 'pressed',
+      selected: 'selected',
+      disabled: 'disabled'
+    }),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    showMeta: figma.boolean('Show Meta'),
+    showLeading: figma.boolean('Show Leading'),
+    showTrailing: figma.boolean('Show Trailing'),
+    showDivider: figma.boolean('Show divider')
+  },
+  example: props => /*#__PURE__*/_jsx(DataListItem, {
+    title: "Data List Row Title",
+    subtitle: "Data List Row Subtitle",
+    meta: "Meta Content",
+    density: props.density,
+    state: props.state,
+    showSubtitle: props.showSubtitle,
+    showMeta: props.showMeta,
+    showLeading: props.showLeading,
+    showTrailing: props.showTrailing,
+    showDivider: props.showDivider,
+    leadingImage: {
+      uri: 'https://example.com/avatar.png'
+    },
+    leadingIcon: /* <UserIcon /> */undefined,
+    onPress: () => {}
+  })
+});
+//# sourceMappingURL=DataListItem.figma.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["figma","DataListItem","jsx","_jsx","FIGMA_URL","connect","props","density","enum","comfortable","compact","state","default","pressed","selected","disabled","showSubtitle","boolean","showMeta","showLeading","showTrailing","showDivider","example","title","subtitle","meta","leadingImage","uri","leadingIcon","undefined","onPress"],"sourceRoot":"../../../../../src","sources":["components/DataDisplay/DataListItem/DataListItem.figma.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK9C;AACA,MAAMC,SAAS,GACb,oGAAoG;;AAEtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,YAAY,EAAEG,SAAS,EAAE;EACrCE,KAAK,EAAE;IACLC,OAAO,EAAEP,KAAK,CAACQ,IAAI,CAAC,SAAS,EAAE;MAC7BC,WAAW,EAAE,aAAa;MAC1BC,OAAO,EAAE;IACX,CAAC,CAAC;IACFC,KAAK,EAAEX,KAAK,CAACQ,IAAI,CAAC,OAAO,EAAE;MACzBI,OAAO,EAAE,SAAS;MAClBC,OAAO,EAAE,SAAS;MAClBC,QAAQ,EAAE,UAAU;MACpBC,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFC,YAAY,EAAEhB,KAAK,CAACiB,OAAO,CAAC,eAAe,CAAC;IAC5CC,QAAQ,EAAElB,KAAK,CAACiB,OAAO,CAAC,WAAW,CAAC;IACpCE,WAAW,EAAEnB,KAAK,CAACiB,OAAO,CAAC,cAAc,CAAC;IAC1CG,YAAY,EAAEpB,KAAK,CAACiB,OAAO,CAAC,eAAe,CAAC;IAC5CI,WAAW,EAAErB,KAAK,CAACiB,OAAO,CAAC,cAAc;EAC3C,CAAC;EAEDK,OAAO,EAAGhB,KAAK,iBACbH,IAAA,CAACF,YAAY;IACXsB,KAAK,EAAC,qBAAqB;IAC3BC,QAAQ,EAAC,wBAAwB;IACjCC,IAAI,EAAC,cAAc;IACnBlB,OAAO,EAAED,KAAK,CAACC,OAAQ;IACvBI,KAAK,EAAEL,KAAK,CAACK,KAAM;IACnBK,YAAY,EAAEV,KAAK,CAACU,YAAa;IACjCE,QAAQ,EAAEZ,KAAK,CAACY,QAAS;IACzBC,WAAW,EAAEb,KAAK,CAACa,WAAY;IAC/BC,YAAY,EAAEd,KAAK,CAACc,YAAa;IACjCC,WAAW,EAAEf,KAAK,CAACe,WAAY;IAC/BK,YAAY,EAAE;MAAEC,GAAG,EAAE;IAAiC,CAAE;IACxDC,WAAW,EAAE,kBAAmBC,SAAU;IAC1CC,OAAO,EAAEA,CAAA,KAAM,CAAC;EAAE,CACnB;AAEL,CAAC,CAAC","ignoreList":[]}