@impulse-ui-native/data-state 14.1.1 → 15.0.1

package/README.md

@@ -55,3 +55,11 @@ visually hidden beneath the loader. Give those children their expected loaded
 height to prevent the surrounding layout from shifting when loading finishes.
 
 The views use component tokens from `ThemeProvider` for their layout, layering, and presentation.
+
+## Repository palette consistency
+
+DataView and its internal state details/actions accept tone (default primary).
+The icon accent and default action buttons use the same tone, with per-state tone
+overrides allowed in errorViewProps/emptyViewProps. LoadingView passes the optional
+tone prop to custom LoadingComponent; custom loaders decide how to consume it.
+Details icon tokens move to dataState.details.colors[tone]. Skeletons remain neutral.

package/dist/components/data-view.d.mts

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 import { DataViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const DataView: react.MemoExoticComponent<(props: PropsWithChildren<DataViewProps>) => react.JSX.Element>;

package/dist/components/data-view.js

@@ -10,6 +10,7 @@ const DataView = memo((props) => {
   const dataStateTokens = tokens.dataState;
   const {
     error,
+    tone = "primary",
     isEmpty,
     loading,
     errorViewProps,
@@ -23,6 +24,8 @@ const DataView = memo((props) => {
     if (!error && !isEmpty) {
       return null;
     }
+    const errorTone = errorViewProps.tone ?? tone;
+    const emptyTone = emptyViewProps.tone ?? tone;
     return /* @__PURE__ */ jsxs(
       View,
       {
@@ -30,8 +33,8 @@ const DataView = memo((props) => {
         justifyContent: "center",
         zIndex: dataStateTokens.content.zIndex,
         children: [
-          error ? /* @__PURE__ */ jsx(ErrorDetails, { ...errorViewProps }) : null,
-          isEmpty ? /* @__PURE__ */ jsx(EmptyDetails, { ...emptyViewProps }) : null
+          error ? /* @__PURE__ */ jsx(ErrorDetails, { ...errorViewProps, tone: errorTone }) : null,
+          isEmpty ? /* @__PURE__ */ jsx(EmptyDetails, { ...emptyViewProps, tone: emptyTone }) : null
         ]
       }
     );
@@ -40,12 +43,14 @@ const DataView = memo((props) => {
     emptyViewProps,
     error,
     errorViewProps,
+    tone,
     isEmpty
   ]);
   const showContent = !error && !isEmpty;
   return /* @__PURE__ */ jsxs(
     LoadingView,
     {
+      tone,
       ...rest,
       LoadingComponent,
       contentContainerStyle,

package/dist/components/data-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-view.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DataViewProps } from \"../types\";\nimport { EmptyDetails } from \"./empty-details\";\nimport { ErrorDetails } from \"./error-details\";\nimport { LoadingView } from \"./loading-view\";\n\nexport const DataView = memo((props: PropsWithChildren<DataViewProps>) => {\n  const tokens = useComponentsTokens();\n\n  const dataStateTokens = tokens.dataState;\n  const {\n    error,\n    isEmpty,\n    loading,\n    errorViewProps,\n    emptyViewProps,\n    LoadingComponent,\n    contentContainerStyle,\n    children,\n    ...rest\n  } = props;\n\n  const content = useMemo(() => {\n    if (!error && !isEmpty) {\n      return null;\n    }\n\n    return (\n      <View\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        zIndex={dataStateTokens.content.zIndex}\n      >\n        {error ? <ErrorDetails {...errorViewProps} /> : null}\n        {isEmpty ? <EmptyDetails {...emptyViewProps} /> : null}\n      </View>\n    );\n  }, [\n    dataStateTokens.content.zIndex,\n    emptyViewProps,\n    error,\n    errorViewProps,\n    isEmpty,\n  ]);\n\n  const showContent = !error && !isEmpty;\n\n  return (\n    <LoadingView\n      {...rest}\n      LoadingComponent={LoadingComponent}\n      contentContainerStyle={contentContainerStyle}\n      loading={loading}\n    >\n      {showContent ? children : null}\n      {content}\n    </LoadingView>\n  );\n});\n"],"mappings":"AAgCM,SAKW,KALX;AAhCN,SAAS,MAAyB,eAAe;AAEjD,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,WAAW,KAAK,CAAC,UAA4C;AACxE,QAAM,SAAS,oBAAoB;AAEnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,SAAS,CAAC,SAAS;AACtB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,QAAQ,gBAAgB,QAAQ;AAAA,QAE/B;AAAA,kBAAQ,oBAAC,gBAAc,GAAG,gBAAgB,IAAK;AAAA,UAC/C,UAAU,oBAAC,gBAAc,GAAG,gBAAgB,IAAK;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ,GAAG;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,CAAC,SAAS,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,sBAAc,WAAW;AAAA,QACzB;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../src/components/data-view.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DataViewProps } from \"../types\";\nimport { EmptyDetails } from \"./empty-details\";\nimport { ErrorDetails } from \"./error-details\";\nimport { LoadingView } from \"./loading-view\";\n\nexport const DataView = memo((props: PropsWithChildren<DataViewProps>) => {\n  const tokens = useComponentsTokens();\n\n  const dataStateTokens = tokens.dataState;\n  const {\n    error,\n    tone = \"primary\",\n    isEmpty,\n    loading,\n    errorViewProps,\n    emptyViewProps,\n    LoadingComponent,\n    contentContainerStyle,\n    children,\n    ...rest\n  } = props;\n\n  const content = useMemo(() => {\n    if (!error && !isEmpty) {\n      return null;\n    }\n\n    const errorTone = errorViewProps.tone ?? tone;\n    const emptyTone = emptyViewProps.tone ?? tone;\n\n    return (\n      <View\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        zIndex={dataStateTokens.content.zIndex}\n      >\n        {error ? <ErrorDetails {...errorViewProps} tone={errorTone} /> : null}\n        {isEmpty ? <EmptyDetails {...emptyViewProps} tone={emptyTone} /> : null}\n      </View>\n    );\n  }, [\n    dataStateTokens.content.zIndex,\n    emptyViewProps,\n    error,\n    errorViewProps,\n    tone,\n    isEmpty,\n  ]);\n\n  const showContent = !error && !isEmpty;\n\n  return (\n    <LoadingView\n      tone={tone}\n      {...rest}\n      LoadingComponent={LoadingComponent}\n      contentContainerStyle={contentContainerStyle}\n      loading={loading}\n    >\n      {showContent ? children : null}\n      {content}\n    </LoadingView>\n  );\n});\n"],"mappings":"AAoCM,SAKW,KALX;AApCN,SAAS,MAAyB,eAAe;AAEjD,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,WAAW,KAAK,CAAC,UAA4C;AACxE,QAAM,SAAS,oBAAoB;AAEnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,SAAS,CAAC,SAAS;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,eAAe,QAAQ;AACzC,UAAM,YAAY,eAAe,QAAQ;AAEzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,QAAQ,gBAAgB,QAAQ;AAAA,QAE/B;AAAA,kBAAQ,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA,UAChE,UAAU,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA;AAAA;AAAA,IACrE;AAAA,EAEJ,GAAG;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,CAAC,SAAS,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,sBAAc,WAAW;AAAA,QACzB;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}

package/dist/components/empty-details.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { StateViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const EmptyDetails: react.MemoExoticComponent<(props: StateViewProps) => react.JSX.Element>;

package/dist/components/empty-details.js

@@ -7,6 +7,7 @@ import { StateActionsFooter } from "./state-actions-footer";
 const EmptyDetails = memo(function EmptyDetails2(props) {
   const tokens = useComponentsTokens();
   const detailsTokens = tokens.dataState.details;
+  const iconColor = detailsTokens.colors[props.tone ?? "primary"].iconColor;
   return /* @__PURE__ */ jsxs(View, { alignItems: "center", justifyContent: "center", gap: detailsTokens.gap, children: [
     /* @__PURE__ */ jsx(
       EmptyIcon,
@@ -14,13 +15,14 @@ const EmptyDetails = memo(function EmptyDetails2(props) {
         width: detailsTokens.iconSize,
         height: detailsTokens.iconSize,
         variant: props.variant,
-        color: detailsTokens.iconColor
+        color: iconColor
       }
     ),
     /* @__PURE__ */ jsx(Typography.Body, { children: props.text }),
     /* @__PURE__ */ jsx(
       StateActionsFooter,
       {
+        tone: props.tone,
         onPressPrimaryAction: props.onPressPrimaryAction,
         primaryActionLabel: props.primaryActionLabel,
         onPressSecondaryAction: props.onPressSecondaryAction,

package/dist/components/empty-details.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/empty-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { EmptyIcon } from \"@impulse-ui-native/icon/icons/empty\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const EmptyDetails = memo(function EmptyDetails(props: StateViewProps) {\n  const tokens = useComponentsTokens();\n\n  const detailsTokens = tokens.dataState.details;\n\n  return (\n    <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n      <EmptyIcon\n        width={detailsTokens.iconSize}\n        height={detailsTokens.iconSize}\n        variant={props.variant}\n        color={detailsTokens.iconColor}\n      />\n      <Typography.Body>{props.text}</Typography.Body>\n      <StateActionsFooter\n        onPressPrimaryAction={props.onPressPrimaryAction}\n        primaryActionLabel={props.primaryActionLabel}\n        onPressSecondaryAction={props.onPressSecondaryAction}\n        secondaryActionLabel={props.secondaryActionLabel}\n      />\n    </View>\n  );\n});\n"],"mappings":"AAeI,SACE,KADF;AAfJ,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO,cAAc;AAAA;AAAA,IACvB;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["EmptyDetails"]}
+{"version":3,"sources":["../../src/components/empty-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { EmptyIcon } from \"@impulse-ui-native/icon/icons/empty\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const EmptyDetails = memo(function EmptyDetails(props: StateViewProps) {\n  const tokens = useComponentsTokens();\n\n  const detailsTokens = tokens.dataState.details;\n\n  const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\n\n  return (\n    <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n      <EmptyIcon\n        width={detailsTokens.iconSize}\n        height={detailsTokens.iconSize}\n        variant={props.variant}\n        color={iconColor}\n      />\n      <Typography.Body>{props.text}</Typography.Body>\n      <StateActionsFooter\n        tone={props.tone}\n        onPressPrimaryAction={props.onPressPrimaryAction}\n        primaryActionLabel={props.primaryActionLabel}\n        onPressSecondaryAction={props.onPressSecondaryAction}\n        secondaryActionLabel={props.secondaryActionLabel}\n      />\n    </View>\n  );\n});\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["EmptyDetails"]}

package/dist/components/empty-view.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { EmptyViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const EmptyView: react.MemoExoticComponent<(props: EmptyViewProps) => react.JSX.Element>;

package/dist/components/error-details.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { StateViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const ErrorDetails: react.MemoExoticComponent<(props: StateViewProps) => react.JSX.Element>;

package/dist/components/error-details.js

@@ -7,6 +7,7 @@ import { StateActionsFooter } from "./state-actions-footer";
 const ErrorDetails = memo(function ErrorDetails2(props) {
   const tokens = useComponentsTokens();
   const detailsTokens = tokens.dataState.details;
+  const iconColor = detailsTokens.colors[props.tone ?? "primary"].iconColor;
   return /* @__PURE__ */ jsxs(View, { alignItems: "center", justifyContent: "center", gap: detailsTokens.gap, children: [
     /* @__PURE__ */ jsx(
       CloudXIcon,
@@ -14,13 +15,14 @@ const ErrorDetails = memo(function ErrorDetails2(props) {
         width: detailsTokens.iconSize,
         height: detailsTokens.iconSize,
         variant: props.variant,
-        color: detailsTokens.iconColor
+        color: iconColor
       }
     ),
     /* @__PURE__ */ jsx(Typography.Body, { children: props.text }),
     /* @__PURE__ */ jsx(
       StateActionsFooter,
       {
+        tone: props.tone,
         onPressPrimaryAction: props.onPressPrimaryAction,
         primaryActionLabel: props.primaryActionLabel,
         onPressSecondaryAction: props.onPressSecondaryAction,

package/dist/components/error-details.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/error-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { CloudXIcon } from \"@impulse-ui-native/icon/icons/cloud-x\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const ErrorDetails = memo(function ErrorDetails(props: StateViewProps) {\n  const tokens = useComponentsTokens();\n\n  const detailsTokens = tokens.dataState.details;\n\n  return (\n    <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n      <CloudXIcon\n        width={detailsTokens.iconSize}\n        height={detailsTokens.iconSize}\n        variant={props.variant}\n        color={detailsTokens.iconColor}\n      />\n      <Typography.Body>{props.text}</Typography.Body>\n      <StateActionsFooter\n        onPressPrimaryAction={props.onPressPrimaryAction}\n        primaryActionLabel={props.primaryActionLabel}\n        onPressSecondaryAction={props.onPressSecondaryAction}\n        secondaryActionLabel={props.secondaryActionLabel}\n      />\n    </View>\n  );\n});\n"],"mappings":"AAeI,SACE,KADF;AAfJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO,cAAc;AAAA;AAAA,IACvB;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["ErrorDetails"]}
+{"version":3,"sources":["../../src/components/error-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { CloudXIcon } from \"@impulse-ui-native/icon/icons/cloud-x\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const ErrorDetails = memo(function ErrorDetails(props: StateViewProps) {\n  const tokens = useComponentsTokens();\n\n  const detailsTokens = tokens.dataState.details;\n\n  const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\n\n  return (\n    <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n      <CloudXIcon\n        width={detailsTokens.iconSize}\n        height={detailsTokens.iconSize}\n        variant={props.variant}\n        color={iconColor}\n      />\n      <Typography.Body>{props.text}</Typography.Body>\n      <StateActionsFooter\n        tone={props.tone}\n        onPressPrimaryAction={props.onPressPrimaryAction}\n        primaryActionLabel={props.primaryActionLabel}\n        onPressSecondaryAction={props.onPressSecondaryAction}\n        secondaryActionLabel={props.secondaryActionLabel}\n      />\n    </View>\n  );\n});\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["ErrorDetails"]}

package/dist/components/error-view.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ErrorViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const ErrorView: react.MemoExoticComponent<(props: ErrorViewProps) => react.JSX.Element>;

package/dist/components/index.d.mts

@@ -6,4 +6,5 @@ import '../types/state-view.types.mjs';
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';

package/dist/components/loading-view.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { LoadingViewProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const LoadingView: react.MemoExoticComponent<(props: LoadingViewProps) => react.JSX.Element>;

package/dist/components/loading-view.js

@@ -12,6 +12,7 @@ import { useComponentsTokens } from "@impulse-ui-native/theme";
 const LoadingView = memo(function LoadingView2(props) {
   const {
     loading,
+    tone = "primary",
     children,
     LoadingComponent,
     contentContainerStyle,
@@ -90,7 +91,7 @@ const LoadingView = memo(function LoadingView2(props) {
   ]);
   return /* @__PURE__ */ jsxs(View, { ...rest, style: containerStyle, children: [
     /* @__PURE__ */ jsx(Animated.View, { style: childrenContainerStyles, children }),
-    shouldMountLoader ? /* @__PURE__ */ jsx(Animated.View, { style: loaderStyles, pointerEvents: "auto", children: /* @__PURE__ */ jsx(View, { onLayout: onLoaderLayout, children: /* @__PURE__ */ jsx(LoadingComponent, {}) }) }) : null
+    shouldMountLoader ? /* @__PURE__ */ jsx(Animated.View, { style: loaderStyles, pointerEvents: "auto", children: /* @__PURE__ */ jsx(View, { onLayout: onLoaderLayout, children: /* @__PURE__ */ jsx(LoadingComponent, { tone }) }) }) : null
   ] });
 });
 export {

package/dist/components/loading-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/loading-view.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { LayoutChangeEvent, StyleProp, ViewStyle } from \"react-native\";\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { LoadingViewProps } from \"../types\";\n\nexport const LoadingView = memo(function LoadingView(props: LoadingViewProps) {\n  const {\n    loading,\n    children,\n    LoadingComponent,\n    contentContainerStyle,\n    style,\n    ...rest\n  } = props;\n\n  const tokens = useComponentsTokens();\n\n  const loadingTokens = tokens.dataState.loading;\n\n  const [shouldMountLoader, setShouldMountLoader] = useState(loading);\n  const [loaderHeight, setLoaderHeight] = useState(0);\n\n  const loaderOpacity = useSharedValue(loading ? 1 : 0);\n  const childrenOpacity = useSharedValue(loading ? 0 : 1);\n\n  const loaderStyles = useAnimatedStyle(() => ({\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n    zIndex: loadingTokens.loaderZIndex,\n    opacity: loaderOpacity.value,\n  }));\n\n  const childrenStyles = useAnimatedStyle(() => ({\n    opacity: childrenOpacity.value,\n  }));\n\n  const containerStyle = useMemo<StyleProp<ViewStyle>>(\n    () => [\n      {\n        position: \"relative\",\n        minHeight: shouldMountLoader ? loaderHeight : undefined,\n      },\n      style,\n    ],\n    [loaderHeight, shouldMountLoader, style],\n  );\n\n  const childrenContainerStyles = useMemo(\n    () => [contentContainerStyle, childrenStyles],\n    [contentContainerStyle, childrenStyles],\n  );\n\n  const onLoaderLayout = useCallback((event: LayoutChangeEvent) => {\n    const height = event.nativeEvent.layout.height;\n\n    setLoaderHeight((prev) => {\n      if (prev === height) {\n        return prev;\n      }\n\n      return height;\n    });\n  }, []);\n\n  useEffect(() => {\n    if (loading) {\n      setShouldMountLoader(true);\n\n      loaderOpacity.value = 1;\n      childrenOpacity.value = 0;\n\n      return;\n    }\n\n    loaderOpacity.value = withTiming(\n      0,\n      {\n        duration: loadingTokens.transitionDuration,\n        easing: Easing.linear,\n      },\n      (finished) => {\n        if (finished) {\n          scheduleOnRN(setShouldMountLoader, false);\n        }\n      },\n    );\n\n    childrenOpacity.value = withTiming(1, {\n      duration: loadingTokens.transitionDuration,\n      easing: Easing.linear,\n    });\n  }, [\n    childrenOpacity,\n    loaderOpacity,\n    loading,\n    loadingTokens.transitionDuration,\n  ]);\n\n  return (\n    <View {...rest} style={containerStyle}>\n      <Animated.View style={childrenContainerStyles}>{children}</Animated.View>\n\n      {shouldMountLoader ? (\n        <Animated.View style={loaderStyles} pointerEvents=\"auto\">\n          <View onLayout={onLoaderLayout}>\n            <LoadingComponent />\n          </View>\n        </Animated.View>\n      ) : null}\n    </View>\n  );\n});\n"],"mappings":"AAgHI,SACE,KADF;AAhHJ,SAAS,MAAM,aAAa,WAAW,SAAS,gBAAgB;AAEhE,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAI7B,MAAM,cAAc,KAAK,SAASA,aAAY,OAAyB;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,OAAO;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAElD,QAAM,gBAAgB,eAAe,UAAU,IAAI,CAAC;AACpD,QAAM,kBAAkB,eAAe,UAAU,IAAI,CAAC;AAEtD,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ,cAAc;AAAA,IACtB,SAAS,cAAc;AAAA,EACzB,EAAE;AAEF,QAAM,iBAAiB,iBAAiB,OAAO;AAAA,IAC7C,SAAS,gBAAgB;AAAA,EAC3B,EAAE;AAEF,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,MACJ;AAAA,QACE,UAAU;AAAA,QACV,WAAW,oBAAoB,eAAe;AAAA,MAChD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,mBAAmB,KAAK;AAAA,EACzC;AAEA,QAAM,0BAA0B;AAAA,IAC9B,MAAM,CAAC,uBAAuB,cAAc;AAAA,IAC5C,CAAC,uBAAuB,cAAc;AAAA,EACxC;AAEA,QAAM,iBAAiB,YAAY,CAAC,UAA6B;AAC/D,UAAM,SAAS,MAAM,YAAY,OAAO;AAExC,oBAAgB,CAAC,SAAS;AACxB,UAAI,SAAS,QAAQ;AACnB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,IAAI;AAEzB,oBAAc,QAAQ;AACtB,sBAAgB,QAAQ;AAExB;AAAA,IACF;AAEA,kBAAc,QAAQ;AAAA,MACpB;AAAA,MACA;AAAA,QACE,UAAU,cAAc;AAAA,QACxB,QAAQ,OAAO;AAAA,MACjB;AAAA,MACA,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,uBAAa,sBAAsB,KAAK;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,oBAAgB,QAAQ,WAAW,GAAG;AAAA,MACpC,UAAU,cAAc;AAAA,MACxB,QAAQ,OAAO;AAAA,IACjB,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,CAAC;AAED,SACE,qBAAC,QAAM,GAAG,MAAM,OAAO,gBACrB;AAAA,wBAAC,SAAS,MAAT,EAAc,OAAO,yBAA0B,UAAS;AAAA,IAExD,oBACC,oBAAC,SAAS,MAAT,EAAc,OAAO,cAAc,eAAc,QAChD,8BAAC,QAAK,UAAU,gBACd,8BAAC,oBAAiB,GACpB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;","names":["LoadingView"]}
+{"version":3,"sources":["../../src/components/loading-view.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { LayoutChangeEvent, StyleProp, ViewStyle } from \"react-native\";\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { LoadingViewProps } from \"../types\";\n\nexport const LoadingView = memo(function LoadingView(props: LoadingViewProps) {\n  const {\n    loading,\n    tone = \"primary\",\n    children,\n    LoadingComponent,\n    contentContainerStyle,\n    style,\n    ...rest\n  } = props;\n\n  const tokens = useComponentsTokens();\n\n  const loadingTokens = tokens.dataState.loading;\n\n  const [shouldMountLoader, setShouldMountLoader] = useState(loading);\n  const [loaderHeight, setLoaderHeight] = useState(0);\n\n  const loaderOpacity = useSharedValue(loading ? 1 : 0);\n  const childrenOpacity = useSharedValue(loading ? 0 : 1);\n\n  const loaderStyles = useAnimatedStyle(() => ({\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n    zIndex: loadingTokens.loaderZIndex,\n    opacity: loaderOpacity.value,\n  }));\n\n  const childrenStyles = useAnimatedStyle(() => ({\n    opacity: childrenOpacity.value,\n  }));\n\n  const containerStyle = useMemo<StyleProp<ViewStyle>>(\n    () => [\n      {\n        position: \"relative\",\n        minHeight: shouldMountLoader ? loaderHeight : undefined,\n      },\n      style,\n    ],\n    [loaderHeight, shouldMountLoader, style],\n  );\n\n  const childrenContainerStyles = useMemo(\n    () => [contentContainerStyle, childrenStyles],\n    [contentContainerStyle, childrenStyles],\n  );\n\n  const onLoaderLayout = useCallback((event: LayoutChangeEvent) => {\n    const height = event.nativeEvent.layout.height;\n\n    setLoaderHeight((prev) => {\n      if (prev === height) {\n        return prev;\n      }\n\n      return height;\n    });\n  }, []);\n\n  useEffect(() => {\n    if (loading) {\n      setShouldMountLoader(true);\n\n      loaderOpacity.value = 1;\n      childrenOpacity.value = 0;\n\n      return;\n    }\n\n    loaderOpacity.value = withTiming(\n      0,\n      {\n        duration: loadingTokens.transitionDuration,\n        easing: Easing.linear,\n      },\n      (finished) => {\n        if (finished) {\n          scheduleOnRN(setShouldMountLoader, false);\n        }\n      },\n    );\n\n    childrenOpacity.value = withTiming(1, {\n      duration: loadingTokens.transitionDuration,\n      easing: Easing.linear,\n    });\n  }, [\n    childrenOpacity,\n    loaderOpacity,\n    loading,\n    loadingTokens.transitionDuration,\n  ]);\n\n  return (\n    <View {...rest} style={containerStyle}>\n      <Animated.View style={childrenContainerStyles}>{children}</Animated.View>\n\n      {shouldMountLoader ? (\n        <Animated.View style={loaderStyles} pointerEvents=\"auto\">\n          <View onLayout={onLoaderLayout}>\n            <LoadingComponent tone={tone} />\n          </View>\n        </Animated.View>\n      ) : null}\n    </View>\n  );\n});\n"],"mappings":"AAiHI,SACE,KADF;AAjHJ,SAAS,MAAM,aAAa,WAAW,SAAS,gBAAgB;AAEhE,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAI7B,MAAM,cAAc,KAAK,SAASA,aAAY,OAAyB;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,OAAO;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAElD,QAAM,gBAAgB,eAAe,UAAU,IAAI,CAAC;AACpD,QAAM,kBAAkB,eAAe,UAAU,IAAI,CAAC;AAEtD,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ,cAAc;AAAA,IACtB,SAAS,cAAc;AAAA,EACzB,EAAE;AAEF,QAAM,iBAAiB,iBAAiB,OAAO;AAAA,IAC7C,SAAS,gBAAgB;AAAA,EAC3B,EAAE;AAEF,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,MACJ;AAAA,QACE,UAAU;AAAA,QACV,WAAW,oBAAoB,eAAe;AAAA,MAChD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,mBAAmB,KAAK;AAAA,EACzC;AAEA,QAAM,0BAA0B;AAAA,IAC9B,MAAM,CAAC,uBAAuB,cAAc;AAAA,IAC5C,CAAC,uBAAuB,cAAc;AAAA,EACxC;AAEA,QAAM,iBAAiB,YAAY,CAAC,UAA6B;AAC/D,UAAM,SAAS,MAAM,YAAY,OAAO;AAExC,oBAAgB,CAAC,SAAS;AACxB,UAAI,SAAS,QAAQ;AACnB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,IAAI;AAEzB,oBAAc,QAAQ;AACtB,sBAAgB,QAAQ;AAExB;AAAA,IACF;AAEA,kBAAc,QAAQ;AAAA,MACpB;AAAA,MACA;AAAA,QACE,UAAU,cAAc;AAAA,QACxB,QAAQ,OAAO;AAAA,MACjB;AAAA,MACA,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,uBAAa,sBAAsB,KAAK;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,oBAAgB,QAAQ,WAAW,GAAG;AAAA,MACpC,UAAU,cAAc;AAAA,MACxB,QAAQ,OAAO;AAAA,IACjB,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,CAAC;AAED,SACE,qBAAC,QAAM,GAAG,MAAM,OAAO,gBACrB;AAAA,wBAAC,SAAS,MAAT,EAAc,OAAO,yBAA0B,UAAS;AAAA,IAExD,oBACC,oBAAC,SAAS,MAAT,EAAc,OAAO,cAAc,eAAc,QAChD,8BAAC,QAAK,UAAU,gBACd,8BAAC,oBAAiB,MAAY,GAChC,GACF,IACE;AAAA,KACN;AAEJ,CAAC;","names":["LoadingView"]}

package/dist/components/state-actions-footer.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { StateActionsFooterProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const StateActionsFooter: react.MemoExoticComponent<(props: StateActionsFooterProps) => react.JSX.Element>;

package/dist/components/state-actions-footer.js

@@ -9,6 +9,7 @@ const StateActionsFooter = memo(function StateActionsFooter2(props) {
     onPressPrimaryAction,
     onPressSecondaryAction,
     primaryActionLabel,
+    tone = "primary",
     secondaryActionLabel,
     ...rest
   } = props;
@@ -21,8 +22,16 @@ const StateActionsFooter = memo(function StateActionsFooter2(props) {
       alignItems: "center",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(Button, { onPress: props.onPressPrimaryAction, children: props.primaryActionLabel }),
-        props.onPressSecondaryAction ? /* @__PURE__ */ jsx(Button, { variant: "outlined", onPress: props.onPressSecondaryAction, children: props.secondaryActionLabel }) : null
+        /* @__PURE__ */ jsx(Button, { tone, onPress: props.onPressPrimaryAction, children: props.primaryActionLabel }),
+        props.onPressSecondaryAction ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            tone,
+            variant: "outlined",
+            onPress: props.onPressSecondaryAction,
+            children: props.secondaryActionLabel
+          }
+        ) : null
       ]
     }
   );

package/dist/components/state-actions-footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/state-actions-footer.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Button, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateActionsFooterProps } from \"../types\";\n\nexport const StateActionsFooter = memo(function StateActionsFooter(\n  props: StateActionsFooterProps,\n) {\n  const tokens = useComponentsTokens();\n\n  const actionsFooterTokens = tokens.dataState.actionsFooter;\n  const {\n    onPressPrimaryAction,\n    onPressSecondaryAction,\n    primaryActionLabel,\n    secondaryActionLabel,\n    ...rest\n  } = props;\n\n  return (\n    <View\n      flexDirection=\"row\"\n      gap={actionsFooterTokens.gap}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      {...rest}\n    >\n      <Button onPress={props.onPressPrimaryAction}>\n        {props.primaryActionLabel}\n      </Button>\n      {props.onPressSecondaryAction ? (\n        <Button variant=\"outlined\" onPress={props.onPressSecondaryAction}>\n          {props.secondaryActionLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n"],"mappings":"AAsBI,SAOE,KAPF;AAtBJ,SAAS,YAAY;AAErB,SAAS,QAAQ,YAAY;AAC7B,SAAS,2BAA2B;AAI7B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,sBAAsB,OAAO,UAAU;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK,oBAAoB;AAAA,MACzB,gBAAe;AAAA,MACf,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAO,SAAS,MAAM,sBACpB,gBAAM,oBACT;AAAA,QACC,MAAM,yBACL,oBAAC,UAAO,SAAQ,YAAW,SAAS,MAAM,wBACvC,gBAAM,sBACT,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["StateActionsFooter"]}
+{"version":3,"sources":["../../src/components/state-actions-footer.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Button, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateActionsFooterProps } from \"../types\";\n\nexport const StateActionsFooter = memo(function StateActionsFooter(\n  props: StateActionsFooterProps,\n) {\n  const tokens = useComponentsTokens();\n\n  const actionsFooterTokens = tokens.dataState.actionsFooter;\n  const {\n    onPressPrimaryAction,\n    onPressSecondaryAction,\n    primaryActionLabel,\n    tone = \"primary\",\n    secondaryActionLabel,\n    ...rest\n  } = props;\n\n  return (\n    <View\n      flexDirection=\"row\"\n      gap={actionsFooterTokens.gap}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      {...rest}\n    >\n      <Button tone={tone} onPress={props.onPressPrimaryAction}>\n        {props.primaryActionLabel}\n      </Button>\n      {props.onPressSecondaryAction ? (\n        <Button\n          tone={tone}\n          variant=\"outlined\"\n          onPress={props.onPressSecondaryAction}\n        >\n          {props.secondaryActionLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n"],"mappings":"AAuBI,SAOE,KAPF;AAvBJ,SAAS,YAAY;AAErB,SAAS,QAAQ,YAAY;AAC7B,SAAS,2BAA2B;AAI7B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,sBAAsB,OAAO,UAAU;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK,oBAAoB;AAAA,MACzB,gBAAe;AAAA,MACf,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAO,MAAY,SAAS,MAAM,sBAChC,gBAAM,oBACT;AAAA,QACC,MAAM,yBACL;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAQ;AAAA,YACR,SAAS,MAAM;AAAA,YAEd,gBAAM;AAAA;AAAA,QACT,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["StateActionsFooter"]}

package/dist/components/state-view-container.d.mts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { StateContainerProps } from '../types/state-view.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';
 
 declare const StateViewContainer: react.MemoExoticComponent<({ children, contentContainerStyle, ...props }: StateContainerProps) => react.JSX.Element>;

package/dist/index.d.mts

@@ -6,4 +6,5 @@ export { DataViewProps, EmptyViewProps, ErrorViewProps, LoadingViewProps, StateA
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';

package/dist/types/index.d.mts

@@ -2,4 +2,5 @@ export { DataViewProps, EmptyViewProps, ErrorViewProps, LoadingViewProps, StateA
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
+import '@impulse-ui-native/theme';
 import '@impulse-ui-native/primitives';

package/dist/types/state-view.types.d.mts

@@ -1,9 +1,11 @@
 import { ComponentType } from 'react';
 import { ViewStyle, PressableProps } from 'react-native';
 import { IconProps } from '@impulse-ui-native/icon/types';
+import { ComponentTone } from '@impulse-ui-native/theme';
 import { ViewProps } from '@impulse-ui-native/primitives';
 
 interface StateActionsFooterProps extends ViewProps {
+    tone?: ComponentTone;
     onPressPrimaryAction: PressableProps["onPress"];
     primaryActionLabel: string;
     onPressSecondaryAction?: PressableProps["onPress"];
@@ -20,14 +22,20 @@ interface StateContainerProps extends ViewProps {
 type EmptyViewProps = StateContainerProps;
 type ErrorViewProps = StateContainerProps;
 interface LoadingViewProps extends ViewProps {
+    tone?: ComponentTone;
     loading: boolean;
-    LoadingComponent: ComponentType;
+    LoadingComponent: ComponentType<{
+        tone?: ComponentTone;
+    }>;
     contentContainerStyle?: ViewStyle;
 }
 interface DataViewProps extends ViewProps {
+    tone?: ComponentTone;
     error: Error | null;
     isEmpty: boolean;
-    LoadingComponent: ComponentType;
+    LoadingComponent: ComponentType<{
+        tone?: ComponentTone;
+    }>;
     loading: LoadingViewProps["loading"];
     contentContainerStyle?: ViewStyle;
     errorViewProps: StateViewProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/data-state",
-  "version": "14.1.1",
+  "version": "15.0.1",
   "description": "Loading, empty, and error state components for ImpulseUI Native applications.",
   "keywords": [
     "react-native",
@@ -28,11 +28,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/core": "14.1.1",
-    "@impulse-ui-native/theme": "14.1.1",
-    "@impulse-ui-native/primitives": "14.1.1",
-    "@impulse-ui-native/icon": "14.1.1",
-    "@impulse-ui-native/skeleton": "14.1.1"
+    "@impulse-ui-native/core": "15.0.1",
+    "@impulse-ui-native/theme": "15.0.1",
+    "@impulse-ui-native/primitives": "15.0.1",
+    "@impulse-ui-native/icon": "15.0.1",
+    "@impulse-ui-native/skeleton": "15.0.1"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",