@bacon-pos/ui 0.9.0 → 0.11.0

package/lib/commonjs/components/Sidebar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function () {
+    return _Sidebar.Sidebar;
+  }
+});
+var _Sidebar = require("./Sidebar.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Sidebar","require"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Sidebar/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/components/StatTile/StatTile.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatTile = StatTile;
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Icon = require("../Icon/Icon.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * StatTile — a compact KPI card: a small label over a prominent value (Figma
+ * "info card"). Fills its parent by default (so a row/grid of tiles sizes evenly)
+ * or takes a fixed `width`. `value` accepts a node for custom color/formatting.
+ */
+function StatTile({
+  label,
+  value,
+  icon,
+  width,
+  onPress,
+  backgroundColor,
+  labelColor,
+  valueColor,
+  style,
+  accessibilityLabel
+}) {
+  const theme = (0, _index.useTheme)();
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: 24,
+        height: 24,
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: icon,
+        size: 24,
+        color: "secondary"
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 4
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "bodySmall",
+        color: labelColor ?? 'secondary',
+        numberOfLines: 1,
+        children: label
+      }), typeof value === 'string' || typeof value === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "bodyLarge",
+        weight: "semibold",
+        color: valueColor ?? 'primary',
+        numberOfLines: 1,
+        children: String(value)
+      }) : value]
+    })]
+  });
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 12,
+    borderRadius: theme.radii.lg,
+    backgroundColor: backgroundColor ?? theme.colors.background.subtle,
+    ...(width != null ? {
+      width
+    } : {
+      alignSelf: 'stretch'
+    })
+  };
+  if (!onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityLabel: accessibilityLabel,
+      style: [containerStyle, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: onPress,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: ({
+      pressed
+    }) => [containerStyle, {
+      opacity: pressed ? 0.96 : 1
+    }, style],
+    children: content
+  });
+}
+//# sourceMappingURL=StatTile.js.map

package/lib/commonjs/components/StatTile/StatTile.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_index","_Icon","_Text","_jsxRuntime","StatTile","label","value","icon","width","onPress","backgroundColor","labelColor","valueColor","style","accessibilityLabel","theme","useTheme","content","jsxs","Fragment","children","jsx","View","height","flexShrink","Icon","name","size","color","flex","minWidth","gap","Text","variant","numberOfLines","weight","String","containerStyle","flexDirection","alignItems","padding","borderRadius","radii","lg","colors","background","subtle","alignSelf","Pressable","accessibilityRole","pressed","opacity"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/StatTile/StatTile.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/StatTile/StatTile.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithIcon = exports.Row = exports.Default = exports.CustomValue = void 0;
+var _reactNative = require("react-native");
+var _StatTile = require("./StatTile.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/StatTile',
+  component: _StatTile.StatTile
+};
+var _default = exports.default = meta;
+/** Figma "info card". */
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 420
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Starting cash",
+      value: "$1,250.25"
+    })
+  })
+};
+
+/** A row of tiles sizing evenly (each fills its flex cell). */
+const Row = exports.Row = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      padding: 24,
+      flexDirection: 'row',
+      gap: 12,
+      width: 720
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+        label: "Sales",
+        value: "$4,820"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+        label: "Orders",
+        value: "128"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+        label: "Avg. ticket",
+        value: "$37.60"
+      })
+    })]
+  })
+};
+
+/** With a leading icon. */
+const WithIcon = exports.WithIcon = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 420
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Starting cash",
+      value: "$1,250.25",
+      icon: "dollar-circle"
+    })
+  })
+};
+
+/** Custom value node (e.g. a colored delta). */
+const CustomValue = exports.CustomValue = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 420
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Net change",
+      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+        variant: "bodyLarge",
+        weight: "semibold",
+        color: "#008C57",
+        children: "+$320.10"
+      })
+    })
+  })
+};
+//# sourceMappingURL=StatTile.stories.js.map

package/lib/commonjs/components/StatTile/StatTile.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_StatTile","_Text","_jsxRuntime","meta","title","component","StatTile","_default","exports","default","Default","render","jsx","View","style","padding","width","children","label","value","Row","jsxs","flexDirection","gap","flex","WithIcon","icon","CustomValue","Text","variant","weight","color"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/StatTile/StatTile.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/StatTile/StatTile.test.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _reactNative = require("@testing-library/react-native");
+var _reactNative2 = require("react-native");
+var _index = require("../../theme/index.js");
+var _StatTile = require("./StatTile.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function wrap(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+describe('StatTile', () => {
+  it('renders label and value', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Starting cash",
+      value: "$1,250.25"
+    }));
+    expect(_reactNative.screen.getByText('Starting cash')).toBeTruthy();
+    expect(_reactNative.screen.getByText('$1,250.25')).toBeTruthy();
+  });
+  it('renders a numeric value', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Orders",
+      value: 128
+    }));
+    expect(_reactNative.screen.getByText('128')).toBeTruthy();
+  });
+  it('renders a custom value node', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Delta",
+      value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.Text, {
+        children: "+3.2%"
+      })
+    }));
+    expect(_reactNative.screen.getByText('+3.2%')).toBeTruthy();
+  });
+  it('fires onPress', () => {
+    const onPress = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_StatTile.StatTile, {
+      label: "Sales",
+      value: "$10",
+      onPress: onPress
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Sales'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=StatTile.test.js.map

package/lib/commonjs/components/StatTile/StatTile.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNative2","_index","_StatTile","_jsxRuntime","wrap","ui","render","jsx","ThemeProvider","children","describe","it","StatTile","label","value","expect","screen","getByText","toBeTruthy","Text","onPress","jest","fn","fireEvent","press","toHaveBeenCalledTimes"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/StatTile/StatTile.test.tsx"],"mappings":";;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAAsC,IAAAI,WAAA,GAAAJ,OAAA;AAEtC,SAASK,IAAIA,CAACC,EAAsB,EAAE;EACpC,OAAO,IAAAC,mBAAM,eAAC,IAAAH,WAAA,CAAAI,GAAA,EAACN,MAAA,CAAAO,aAAa;IAAAC,QAAA,EAAEJ;EAAE,CAAgB,CAAC,CAAC;AACpD;AAEAK,QAAQ,CAAC,UAAU,EAAE,MAAM;EACzBC,EAAE,CAAC,yBAAyB,EAAE,MAAM;IAClCP,IAAI,cAAC,IAAAD,WAAA,CAAAI,GAAA,EAACL,SAAA,CAAAU,QAAQ;MAACC,KAAK,EAAC,eAAe;MAACC,KAAK,EAAC;IAAW,CAAE,CAAC,CAAC;IAC1DC,MAAM,CAACC,mBAAM,CAACC,SAAS,CAAC,eAAe,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;IACtDH,MAAM,CAACC,mBAAM,CAACC,SAAS,CAAC,WAAW,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EACpD,CAAC,CAAC;EAEFP,EAAE,CAAC,yBAAyB,EAAE,MAAM;IAClCP,IAAI,cAAC,IAAAD,WAAA,CAAAI,GAAA,EAACL,SAAA,CAAAU,QAAQ;MAACC,KAAK,EAAC,QAAQ;MAACC,KAAK,EAAE;IAAI,CAAE,CAAC,CAAC;IAC7CC,MAAM,CAACC,mBAAM,CAACC,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAC9C,CAAC,CAAC;EAEFP,EAAE,CAAC,6BAA6B,EAAE,MAAM;IACtCP,IAAI,cAAC,IAAAD,WAAA,CAAAI,GAAA,EAACL,SAAA,CAAAU,QAAQ;MAACC,KAAK,EAAC,OAAO;MAACC,KAAK,eAAE,IAAAX,WAAA,CAAAI,GAAA,EAACP,aAAA,CAAAmB,IAAI;QAAAV,QAAA,EAAC;MAAK,CAAM;IAAE,CAAE,CAAC,CAAC;IAC3DM,MAAM,CAACC,mBAAM,CAACC,SAAS,CAAC,OAAO,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;EAChD,CAAC,CAAC;EAEFP,EAAE,CAAC,eAAe,EAAE,MAAM;IACxB,MAAMS,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;IACzBlB,IAAI,cAAC,IAAAD,WAAA,CAAAI,GAAA,EAACL,SAAA,CAAAU,QAAQ;MAACC,KAAK,EAAC,OAAO;MAACC,KAAK,EAAC,KAAK;MAACM,OAAO,EAAEA;IAAQ,CAAE,CAAC,CAAC;IAC9DG,sBAAS,CAACC,KAAK,CAACR,mBAAM,CAACC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1CF,MAAM,CAACK,OAAO,CAAC,CAACK,qBAAqB,CAAC,CAAC,CAAC;EAC1C,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/StatTile/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StatTile", {
+  enumerable: true,
+  get: function () {
+    return _StatTile.StatTile;
+  }
+});
+var _StatTile = require("./StatTile.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/StatTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_StatTile","require"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/StatTile/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/components/Table/DataTable.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTable = DataTable;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Button = require("../Button/Button.js");
+var _ChipGroup = require("../Chip/ChipGroup.js");
+var _EmptyState = require("../EmptyState/EmptyState.js");
+var _Icon = require("../Icon/Icon.js");
+var _IconButton = require("../IconButton/IconButton.js");
+var _Input = require("../Input/Input.js");
+var _Text = require("../Text/Text.js");
+var _Table = require("./Table.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * DataTable — the turnkey management table (Figma): optional tabs (`ChipGroup`),
+ * a search + create toolbar, the `Table` body, a structured `EmptyState`, and
+ * optional pagination — assembled with consistent spacing. For bespoke layouts,
+ * compose `Table` + `EmptyState` yourself.
+ */
+function DataTable({
+  tabs,
+  activeTab,
+  defaultTab,
+  onTabChange,
+  searchable = false,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search…',
+  createLabel,
+  onCreate,
+  createIcon = 'plus',
+  emptyState,
+  empty,
+  pagination,
+  gap = 16,
+  containerStyle,
+  ...tableProps
+}) {
+  const theme = (0, _index.useTheme)();
+  const tabControlled = activeTab !== undefined;
+  const [tabInternal, setTabInternal] = (0, _react.useState)(defaultTab ?? tabs?.[0]?.value ?? null);
+  const currentTab = tabControlled ? activeTab : tabInternal;
+  const setTab = value => {
+    if (value == null) return; // tabs are not deselectable
+    if (!tabControlled) setTabInternal(value);
+    onTabChange?.(value);
+  };
+  const emptyNode = empty ?? (emptyState ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState.EmptyState, {
+    ...emptyState
+  }) : undefined);
+  const showToolbar = searchable || !!createLabel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap
+    }, containerStyle],
+    children: [tabs && tabs.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipGroup.ChipGroup, {
+      tone: "dark",
+      options: tabs.map(t => ({
+        value: t.value,
+        label: t.label,
+        icon: t.icon
+      })),
+      value: currentTab,
+      onChange: setTab
+    }) : null, showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flexWrap: 'wrap'
+      },
+      children: [searchable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 220
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+          value: searchValue,
+          onChangeText: onSearchChange,
+          placeholder: searchPlaceholder,
+          leftIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: "search",
+            size: 24,
+            color: "tertiary"
+          })
+        })
+      }) : null, createLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        label: createLabel,
+        variant: "inverse",
+        size: "md",
+        onPress: onCreate,
+        leftIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: createIcon,
+          size: 24,
+          color: theme.colors.action.inverseForeground
+        })
+      }) : null]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+      ...tableProps,
+      empty: emptyNode
+    }), pagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Paginator, {
+      ...pagination
+    }) : null]
+  });
+}
+function Paginator({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  formatRange
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+  const to = Math.min(page * pageSize, total);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: 12
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: "bodySmall",
+      color: "secondary",
+      children: formatRange ? formatRange(from, to, total) : `${from}–${to} of ${total}`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      icon: "arrow-left",
+      accessibilityLabel: "Previous page",
+      variant: "secondary",
+      size: "sm",
+      disabled: page <= 1,
+      onPress: () => onPageChange(page - 1)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      icon: "arrow-right",
+      accessibilityLabel: "Next page",
+      variant: "secondary",
+      size: "sm",
+      disabled: page >= totalPages,
+      onPress: () => onPageChange(page + 1)
+    })]
+  });
+}
+//# sourceMappingURL=DataTable.js.map

package/lib/commonjs/components/Table/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_Button","_ChipGroup","_EmptyState","_Icon","_IconButton","_Input","_Text","_Table","_jsxRuntime","DataTable","tabs","activeTab","defaultTab","onTabChange","searchable","searchValue","onSearchChange","searchPlaceholder","createLabel","onCreate","createIcon","emptyState","empty","pagination","gap","containerStyle","tableProps","theme","useTheme","tabControlled","undefined","tabInternal","setTabInternal","useState","value","currentTab","setTab","emptyNode","jsx","EmptyState","showToolbar","jsxs","View","style","children","length","ChipGroup","tone","options","map","t","label","icon","onChange","flexDirection","alignItems","flexWrap","flex","minWidth","Input","onChangeText","placeholder","leftIcon","Icon","name","size","color","Button","variant","onPress","colors","action","inverseForeground","Table","Paginator","page","pageSize","total","onPageChange","formatRange","totalPages","Math","max","ceil","from","to","min","justifyContent","Text","IconButton","accessibilityLabel","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Table/DataTable.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Table/DataTable.stories.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Paginated = exports.Full = exports.EmptyState = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _DataTable = require("./DataTable.js");
+var _IconButton = require("../IconButton/IconButton.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/DataTable',
+  component: _DataTable.DataTable
+};
+var _default = exports.default = meta;
+const ALL = [{
+  id: '1',
+  name: 'Spicy Mango Salsa',
+  category: 'Starter',
+  price: '$4.25'
+}, {
+  id: '2',
+  name: 'Creamy Garlic Pasta',
+  category: 'Starter',
+  price: '$5.75'
+}, {
+  id: '3',
+  name: 'Zesty Lemon Chicken',
+  category: 'Starter',
+  price: '$7.10'
+}, {
+  id: '4',
+  name: 'Savory Mushroom Risotto',
+  category: 'Starter',
+  price: '$8.99'
+}, {
+  id: '5',
+  name: 'Grilled Vegetable Skewers',
+  category: 'Main plates',
+  price: '$6.50'
+}, {
+  id: '6',
+  name: 'Honey Glazed Salmon',
+  category: 'Main plates',
+  price: '$3.99'
+}, {
+  id: '7',
+  name: 'Classic Beef Tacos',
+  category: 'Main plates',
+  price: '$11.20'
+}, {
+  id: '8',
+  name: 'Rich Chocolate Mousse',
+  category: 'Desserts',
+  price: '$12.30'
+}, {
+  id: '9',
+  name: 'Fresh Berry Parfait',
+  category: 'Soups',
+  price: '$10.90'
+}];
+const TABS = [{
+  value: 'menu',
+  label: 'Menu items'
+}, {
+  value: 'categories',
+  label: 'Categories'
+}, {
+  value: 'modes',
+  label: 'Modes sets'
+}, {
+  value: 'addons',
+  label: 'Add-ons sets'
+}, {
+  value: 'inventory',
+  label: 'Inventory control'
+}];
+const COLUMNS = [{
+  key: 'name',
+  header: 'Item name',
+  flex: 2,
+  sortable: true,
+  sortAccessor: r => r.name
+}, {
+  key: 'category',
+  header: 'Category',
+  sortable: true,
+  sortAccessor: r => r.category
+}, {
+  key: 'price',
+  header: 'Price',
+  align: 'right',
+  sortable: true,
+  sortAccessor: r => Number(r.price.replace('$', ''))
+}];
+
+/** Full data table (Figma): tabs + search + create + actions. */
+const Full = exports.Full = {
+  render: () => {
+    const [tab, setTab] = (0, _react.useState)('menu');
+    const [search, setSearch] = (0, _react.useState)('');
+    const data = (0, _react.useMemo)(() => ALL.filter(r => r.name.toLowerCase().includes(search.toLowerCase())), [search]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataTable.DataTable, {
+        tabs: TABS,
+        activeTab: tab,
+        onTabChange: setTab,
+        searchable: true,
+        searchValue: search,
+        onSearchChange: setSearch,
+        searchPlaceholder: "Search item from menu list\u2026",
+        createLabel: "Create new item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: data,
+        keyExtractor: r => r.id,
+        renderActions: r => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+            icon: "edit",
+            accessibilityLabel: `Edit ${r.name}`,
+            variant: "ghost",
+            size: "sm",
+            onPress: () => {}
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+            icon: "trash",
+            accessibilityLabel: `Delete ${r.name}`,
+            variant: "ghost",
+            size: "sm",
+            onPress: () => {}
+          })]
+        }),
+        emptyState: {
+          icon: 'dish',
+          title: 'No items yet',
+          description: 'Categories group your menu items, like Mains or Drinks. Create your first one to get started.',
+          action: {
+            label: 'Create item',
+            icon: 'plus',
+            onPress: () => {}
+          }
+        }
+      })
+    });
+  }
+};
+
+/** Empty state through the toolbar. */
+const EmptyState = exports.EmptyState = {
+  render: () => {
+    const [tab, setTab] = (0, _react.useState)('categories');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataTable.DataTable, {
+        tabs: TABS,
+        activeTab: tab,
+        onTabChange: setTab,
+        searchable: true,
+        createLabel: "Create item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: [],
+        keyExtractor: r => r.id,
+        emptyState: {
+          icon: 'dish',
+          title: 'No items yet',
+          description: 'Categories group your menu items, like Mains or Drinks, and give each a color on the POS.',
+          action: {
+            label: 'Create item',
+            icon: 'plus',
+            onPress: () => {}
+          }
+        }
+      })
+    });
+  }
+};
+
+/** With pagination. */
+const Paginated = exports.Paginated = {
+  render: () => {
+    const [page, setPage] = (0, _react.useState)(1);
+    const pageSize = 4;
+    const pageData = ALL.slice((page - 1) * pageSize, page * pageSize);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        padding: 24,
+        width: 980
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataTable.DataTable, {
+        searchable: true,
+        createLabel: "Create new item",
+        onCreate: () => {},
+        columns: COLUMNS,
+        data: pageData,
+        keyExtractor: r => r.id,
+        pagination: {
+          page,
+          pageSize,
+          total: ALL.length,
+          onPageChange: setPage
+        }
+      })
+    });
+  }
+};
+//# sourceMappingURL=DataTable.stories.js.map