@compsych-ui-components/react-native 4.0.0 → 4.0.13

package/src/components/SelectionCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/SelectionCard/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { ICON_MAP, type IconName } from '../../icons';\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\nimport { HeaderText } from '../HeaderText';\r\n\r\nexport type SelectionCardSize = 'sm' | 'md';\r\n\r\nexport interface SelectionCardProps {\r\n  title: string;\r\n  icon?: IconName;\r\n  size?: SelectionCardSize;\r\n  multiSelect?: boolean;\r\n  selected?: boolean;\r\n  disabled?: boolean;\r\n  onPress?: () => void;\r\n  accessibilityLabel?: string;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nexport function SelectionCard({\r\n  title,\r\n  icon,\r\n  size = 'md',\r\n  multiSelect = false,\r\n  selected = false,\r\n  disabled = false,\r\n  onPress,\r\n  accessibilityLabel,\r\n  style,\r\n}: SelectionCardProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const selectedRing = useMemo(\r\n    () => ({\r\n      shadowColor: cr.accent.primary.sysPrimary,\r\n      shadowOffset: { width: 1, height: 2 },\r\n      shadowOpacity: 1,\r\n      shadowRadius: 0,\r\n      elevation: 2,\r\n    }),\r\n    [cr],\r\n  );\r\n\r\n  const IconComponent = icon ? ICON_MAP[icon] : null;\r\n\r\n  const a11yState = {\r\n    disabled,\r\n    ...(multiSelect ? { checked: selected } : { selected }),\r\n  };\r\n\r\n  const checkboxNode = (\r\n    <Ionicons\r\n      name={selected ? 'checkbox' : 'square-outline'}\r\n      size={20}\r\n      color={selected ? cr.accent.primary.sysPrimary : cr.outline.sysOutline}\r\n      accessible={false}\r\n    />\r\n  );\r\n\r\n  if (size === 'sm') {\r\n    const iconColor = selected\r\n      ? cr.accent.primary.sysPrimary\r\n      : cr.surface.surface.sysOnSurface;\r\n\r\n    return (\r\n      <Pressable\r\n        onPress={disabled ? undefined : onPress}\r\n        accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n        accessibilityLabel={accessibilityLabel ?? title}\r\n        accessibilityState={a11yState}\r\n        style={({ pressed }) => [\r\n          styles.smRoot,\r\n          {\r\n            gap: dim.spacing.padding.sysPadding12,\r\n            paddingHorizontal: dim.spacing.padding.sysPadding20,\r\n            paddingVertical: dim.spacing.padding.sysPadding16,\r\n            borderRadius: dim.borderRadius.sysRadiusMd,\r\n            backgroundColor:\r\n              cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n            borderColor: selected\r\n              ? cr.accent.primary.sysPrimary\r\n              : cr.outline.sysOutline,\r\n            borderWidth: selected\r\n              ? dim.borderWidth.sysStrokeMedium\r\n              : dim.borderWidth.sysStrokeThin,\r\n            opacity: disabled ? 0.38 : 1,\r\n          },\r\n          selected && selectedRing,\r\n          pressed && !disabled && styles.pressed,\r\n          style,\r\n        ]}\r\n      >\r\n        {IconComponent && (\r\n          <View style={styles.smIconWrap}>\r\n            <IconComponent size=\"small\" color={iconColor} />\r\n          </View>\r\n        )}\r\n        <BodyText\r\n          variant=\"labelLarge\"\r\n          color={cr.surface.surface.sysOnSurface}\r\n          emphasized={selected}\r\n          style={styles.smTitle}\r\n        >\r\n          {title}\r\n        </BodyText>\r\n        {multiSelect && checkboxNode}\r\n      </Pressable>\r\n    );\r\n  }\r\n\r\n  // ── Medium ──────────────────────────────────────────────────────────────────\r\n  const iconBgColor = selected\r\n    ? cr.accent.primary.sysPrimary\r\n    : cr.surface.surfaceContainer.sysSurfaceContainer;\r\n  const iconColor = selected\r\n    ? cr.accent.primary.sysOnPrimary\r\n    : cr.surface.surface.sysOnSurface;\r\n  const titleColor = selected\r\n    ? cr.accent.primary.sysPrimary\r\n    : cr.surface.surface.sysOnSurface;\r\n\r\n  const iconCircle = IconComponent ? (\r\n    <View\r\n      style={[\r\n        styles.mdIconCircle,\r\n        {\r\n          padding: dim.spacing.padding.sysPadding12,\r\n          borderRadius: dim.borderRadius.sysRadiusFull,\r\n          backgroundColor: iconBgColor,\r\n        },\r\n      ]}\r\n    >\r\n      <IconComponent size=\"small\" color={iconColor} />\r\n    </View>\r\n  ) : null;\r\n\r\n  return (\r\n    <Pressable\r\n      onPress={disabled ? undefined : onPress}\r\n      accessibilityRole={multiSelect ? 'checkbox' : 'radio'}\r\n      accessibilityLabel={accessibilityLabel ?? title}\r\n      accessibilityState={a11yState}\r\n      style={({ pressed }) => [\r\n        styles.mdRoot,\r\n        {\r\n          padding: dim.spacing.padding.sysPadding24,\r\n          gap: dim.spacing.padding.sysPadding24,\r\n          borderRadius: dim.borderRadius.sysRadiusLg,\r\n          backgroundColor:\r\n            cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n          borderColor: selected\r\n            ? cr.accent.primary.sysPrimary\r\n            : cr.outline.sysOutline,\r\n          borderWidth: selected\r\n            ? dim.borderWidth.sysStrokeThick\r\n            : dim.borderWidth.sysStrokeMedium,\r\n          opacity: disabled ? 0.38 : 1,\r\n        },\r\n        selected && selectedRing,\r\n        pressed && !disabled && styles.pressed,\r\n        style,\r\n      ]}\r\n    >\r\n      {multiSelect ? (\r\n        <View style={styles.mdIconCheckboxRow}>\r\n          {iconCircle}\r\n          {checkboxNode}\r\n        </View>\r\n      ) : (\r\n        iconCircle\r\n      )}\r\n      <HeaderText variant=\"titleSmall\" color={titleColor} emphasized={selected}>\r\n        {title}\r\n      </HeaderText>\r\n    </Pressable>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  mdRoot: {\r\n    flexDirection: 'column',\r\n    alignItems: 'flex-start',\r\n    overflow: 'hidden',\r\n  },\r\n  mdIconCircle: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden',\r\n  },\r\n  mdIconCheckboxRow: {\r\n    flexDirection: 'row',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    width: '100%',\r\n  },\r\n  smRoot: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    overflow: 'hidden',\r\n  },\r\n  smIconWrap: {\r\n    width: 24,\r\n    height: 24,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  smTitle: {\r\n    flex: 1,\r\n  },\r\n  pressed: {\r\n    opacity: 0.84,\r\n  },\r\n});\r\n"],"names":["SelectionCard","title","icon","size","multiSelect","selected","disabled","onPress","accessibilityLabel","style","colorRoles","cr","dimensions","dim","useTheme","selectedRing","useMemo","shadowColor","accent","primary","sysPrimary","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","IconComponent","ICON_MAP","a11yState","checked","checkboxNode","Ionicons","name","color","outline","sysOutline","accessible","iconColor","surface","sysOnSurface","Pressable","undefined","accessibilityRole","accessibilityState","pressed","styles","smRoot","gap","spacing","padding","sysPadding12","paddingHorizontal","sysPadding20","paddingVertical","sysPadding16","borderRadius","sysRadiusMd","backgroundColor","surfaceContainer","sysSurfaceContainerLowest","borderColor","borderWidth","sysStrokeMedium","sysStrokeThin","opacity","View","smIconWrap","BodyText","variant","emphasized","smTitle","iconBgColor","sysSurfaceContainer","sysOnPrimary","titleColor","iconCircle","mdIconCircle","sysRadiusFull","mdRoot","sysPadding24","sysRadiusLg","sysStrokeThick","mdIconCheckboxRow","HeaderText","StyleSheet","create","flexDirection","alignItems","overflow","justifyContent","flex"],"mappings":";;;;+BA+BgBA;;;eAAAA;;;;+DA/Be;6BAQxB;6BAEkB;uBAEe;uBACf;0BACA;4BACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBpB,SAASA,cAAc,EAC5BC,KAAK,EACLC,IAAI,EACJC,OAAO,IAAI,EACXC,cAAc,KAAK,EACnBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,OAAO,EACPC,kBAAkB,EAClBC,KAAK,EACc;IACnB,MAAM,EAAEC,YAAYC,EAAE,EAAEC,YAAYC,GAAG,EAAE,GAAGC,IAAAA,eAAQ;IAEpD,MAAMC,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLC,aAAaN,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU;YACzCC,cAAc;gBAAEC,OAAO;gBAAGC,QAAQ;YAAE;YACpCC,eAAe;YACfC,cAAc;YACdC,WAAW;QACb,CAAA,GACA;QAACf;KAAG;IAGN,MAAMgB,gBAAgBzB,OAAO0B,eAAQ,CAAC1B,KAAK,GAAG;IAE9C,MAAM2B,YAAY;QAChBvB;QACA,GAAIF,cAAc;YAAE0B,SAASzB;QAAS,IAAI;YAAEA;QAAS,CAAC;IACxD;IAEA,MAAM0B,6BACJ,qBAACC,qBAAQ;QACPC,MAAM5B,WAAW,aAAa;QAC9BF,MAAM;QACN+B,OAAO7B,WAAWM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAAGT,GAAGwB,OAAO,CAACC,UAAU;QACtEC,YAAY;;IAIhB,IAAIlC,SAAS,MAAM;QACjB,MAAMmC,YAAYjC,WACdM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BT,GAAG4B,OAAO,CAACA,OAAO,CAACC,YAAY;QAEnC,qBACE,sBAACC,sBAAS;YACRlC,SAASD,WAAWoC,YAAYnC;YAChCoC,mBAAmBvC,cAAc,aAAa;YAC9CI,oBAAoBA,sBAAsBP;YAC1C2C,oBAAoBf;YACpBpB,OAAO,CAAC,EAAEoC,OAAO,EAAE,GAAK;oBACtBC,OAAOC,MAAM;oBACb;wBACEC,KAAKnC,IAAIoC,OAAO,CAACC,OAAO,CAACC,YAAY;wBACrCC,mBAAmBvC,IAAIoC,OAAO,CAACC,OAAO,CAACG,YAAY;wBACnDC,iBAAiBzC,IAAIoC,OAAO,CAACC,OAAO,CAACK,YAAY;wBACjDC,cAAc3C,IAAI2C,YAAY,CAACC,WAAW;wBAC1CC,iBACE/C,GAAG4B,OAAO,CAACoB,gBAAgB,CAACC,yBAAyB;wBACvDC,aAAaxD,WACTM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BT,GAAGwB,OAAO,CAACC,UAAU;wBACzB0B,aAAazD,WACTQ,IAAIiD,WAAW,CAACC,eAAe,GAC/BlD,IAAIiD,WAAW,CAACE,aAAa;wBACjCC,SAAS3D,WAAW,OAAO;oBAC7B;oBACAD,YAAYU;oBACZ8B,WAAW,CAACvC,YAAYwC,OAAOD,OAAO;oBACtCpC;iBACD;;gBAEAkB,+BACC,qBAACuC,iBAAI;oBAACzD,OAAOqC,OAAOqB,UAAU;8BAC5B,cAAA,qBAACxC;wBAAcxB,MAAK;wBAAQ+B,OAAOI;;;8BAGvC,qBAAC8B,kBAAQ;oBACPC,SAAQ;oBACRnC,OAAOvB,GAAG4B,OAAO,CAACA,OAAO,CAACC,YAAY;oBACtC8B,YAAYjE;oBACZI,OAAOqC,OAAOyB,OAAO;8BAEpBtE;;gBAEFG,eAAe2B;;;IAGtB;IAEA,+EAA+E;IAC/E,MAAMyC,cAAcnE,WAChBM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BT,GAAG4B,OAAO,CAACoB,gBAAgB,CAACc,mBAAmB;IACnD,MAAMnC,YAAYjC,WACdM,GAAGO,MAAM,CAACC,OAAO,CAACuD,YAAY,GAC9B/D,GAAG4B,OAAO,CAACA,OAAO,CAACC,YAAY;IACnC,MAAMmC,aAAatE,WACfM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BT,GAAG4B,OAAO,CAACA,OAAO,CAACC,YAAY;IAEnC,MAAMoC,aAAajD,8BACjB,qBAACuC,iBAAI;QACHzD,OAAO;YACLqC,OAAO+B,YAAY;YACnB;gBACE3B,SAASrC,IAAIoC,OAAO,CAACC,OAAO,CAACC,YAAY;gBACzCK,cAAc3C,IAAI2C,YAAY,CAACsB,aAAa;gBAC5CpB,iBAAiBc;YACnB;SACD;kBAED,cAAA,qBAAC7C;YAAcxB,MAAK;YAAQ+B,OAAOI;;SAEnC;IAEJ,qBACE,sBAACG,sBAAS;QACRlC,SAASD,WAAWoC,YAAYnC;QAChCoC,mBAAmBvC,cAAc,aAAa;QAC9CI,oBAAoBA,sBAAsBP;QAC1C2C,oBAAoBf;QACpBpB,OAAO,CAAC,EAAEoC,OAAO,EAAE,GAAK;gBACtBC,OAAOiC,MAAM;gBACb;oBACE7B,SAASrC,IAAIoC,OAAO,CAACC,OAAO,CAAC8B,YAAY;oBACzChC,KAAKnC,IAAIoC,OAAO,CAACC,OAAO,CAAC8B,YAAY;oBACrCxB,cAAc3C,IAAI2C,YAAY,CAACyB,WAAW;oBAC1CvB,iBACE/C,GAAG4B,OAAO,CAACoB,gBAAgB,CAACC,yBAAyB;oBACvDC,aAAaxD,WACTM,GAAGO,MAAM,CAACC,OAAO,CAACC,UAAU,GAC5BT,GAAGwB,OAAO,CAACC,UAAU;oBACzB0B,aAAazD,WACTQ,IAAIiD,WAAW,CAACoB,cAAc,GAC9BrE,IAAIiD,WAAW,CAACC,eAAe;oBACnCE,SAAS3D,WAAW,OAAO;gBAC7B;gBACAD,YAAYU;gBACZ8B,WAAW,CAACvC,YAAYwC,OAAOD,OAAO;gBACtCpC;aACD;;YAEAL,4BACC,sBAAC8D,iBAAI;gBAACzD,OAAOqC,OAAOqC,iBAAiB;;oBAClCP;oBACA7C;;iBAGH6C;0BAEF,qBAACQ,sBAAU;gBAACf,SAAQ;gBAAanC,OAAOyC;gBAAYL,YAAYjE;0BAC7DJ;;;;AAIT;AAEA,MAAM6C,SAASuC,uBAAU,CAACC,MAAM,CAAC;IAC/BP,QAAQ;QACNQ,eAAe;QACfC,YAAY;QACZC,UAAU;IACZ;IACAZ,cAAc;QACZW,YAAY;QACZE,gBAAgB;QAChBD,UAAU;IACZ;IACAN,mBAAmB;QACjBI,eAAe;QACfC,YAAY;QACZE,gBAAgB;QAChBpE,OAAO;IACT;IACAyB,QAAQ;QACNwC,eAAe;QACfC,YAAY;QACZC,UAAU;IACZ;IACAtB,YAAY;QACV7C,OAAO;QACPC,QAAQ;QACRiE,YAAY;QACZE,gBAAgB;IAClB;IACAnB,SAAS;QACPoB,MAAM;IACR;IACA9C,SAAS;QACPoB,SAAS;IACX;AACF"}

package/src/components/ServiceCard/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { type IconName } from '../../icons';
+export type ServiceCardVariant = 'outlined' | 'tonal' | 'filled' | 'doubled' | 'image';
+export type ServiceCardSize = 'sm' | 'md' | 'lg';
+export interface ServiceCardProps {
+    variant?: ServiceCardVariant;
+    size?: ServiceCardSize;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: IconName;
+    image?: ImageSourcePropType;
+    buttonIcon?: React.ReactNode;
+    interactive?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+    children?: React.ReactNode;
+    accessibilityLabel?: string;
+    fullWidth?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ServiceCard({ variant, size, title, description, icon, image, buttonIcon, interactive, disabled, onPress, children, accessibilityLabel, fullWidth, style, }: ServiceCardProps): React.JSX.Element;

package/src/components/ServiceCard/index.js

@@ -0,0 +1,385 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ServiceCard", {
+    enumerable: true,
+    get: function() {
+        return ServiceCard;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactnative = require("react-native");
+const _vectoricons = require("@expo/vector-icons");
+const _icons = require("../../icons");
+const _theme = require("../../theme");
+const _BodyText = require("../BodyText");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ELEVATION = {
+    shadowColor: '#000',
+    shadowOffset: {
+        width: 0,
+        height: 2
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2
+};
+function ServiceCard({ variant = 'outlined', size = 'lg', title, description, icon, image, buttonIcon, interactive = false, disabled = false, onPress, children, accessibilityLabel, fullWidth = false, style }) {
+    const { colorRoles: cr, dimensions: dim } = (0, _theme.useTheme)();
+    const variantTokens = (0, _react.useMemo)(()=>({
+            outlined: {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderColor: cr.outline.sysOutline,
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                elevated: true,
+                titleColor: cr.surface.surface.sysOnSurface,
+                descColor: cr.surface.surface.sysOnSurfaceVariant,
+                chevronColor: cr.outline.sysOutlineFixed,
+                innerBg: undefined,
+                iconBadgeBg: undefined,
+                iconBadgeColor: undefined
+            },
+            tonal: {
+                bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+                borderColor: 'transparent',
+                borderWidth: 0,
+                elevated: false,
+                titleColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+                descColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+                chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+                innerBg: undefined,
+                iconBadgeBg: undefined,
+                iconBadgeColor: undefined
+            },
+            filled: {
+                bg: cr.accent.primary.sysPrimaryContainer,
+                borderColor: 'transparent',
+                borderWidth: 0,
+                elevated: false,
+                titleColor: cr.accent.primary.sysOnPrimary,
+                descColor: cr.transparent.neutral.sysWhite80,
+                chevronColor: cr.accent.primary.sysOnPrimary,
+                innerBg: undefined,
+                iconBadgeBg: undefined,
+                iconBadgeColor: undefined
+            },
+            doubled: {
+                bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+                borderColor: cr.outline.sysOutline,
+                borderWidth: dim.borderWidth.sysStrokeThin,
+                elevated: false,
+                titleColor: cr.surface.surface.sysOnSurface,
+                descColor: cr.surface.surface.sysOnSurfaceVariant,
+                chevronColor: cr.outline.sysOutlineFixed,
+                innerBg: cr.transparent.primary.sysPrimary08,
+                iconBadgeBg: cr.accent.primary.sysPrimary,
+                iconBadgeColor: cr.accent.primary.sysOnPrimary
+            },
+            image: {
+                bg: 'transparent',
+                borderColor: 'transparent',
+                borderWidth: 0,
+                elevated: false,
+                titleColor: cr.surface.inverse.sysInverseOnSurface,
+                descColor: cr.transparent.neutral.sysWhite80,
+                chevronColor: cr.surface.inverse.sysInverseOnSurface,
+                innerBg: undefined,
+                iconBadgeBg: undefined,
+                iconBadgeColor: undefined
+            }
+        }), [
+        cr,
+        dim
+    ]);
+    const sizeTokens = (0, _react.useMemo)(()=>({
+            sm: {
+                layout: 'row',
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding12,
+                gap: dim.spacing.padding.sysPadding12,
+                borderRadius: dim.borderRadius.sysRadiusMd,
+                iconSize: 24,
+                iconSizeName: 'small',
+                titleVariant: 'medium',
+                showChevron: true
+            },
+            md: {
+                layout: 'column',
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding16,
+                gap: dim.spacing.padding.sysPadding24,
+                borderRadius: dim.borderRadius.sysRadiusLg,
+                iconSize: 32,
+                iconSizeName: 'medium',
+                titleVariant: 'medium',
+                showChevron: false
+            },
+            lg: {
+                layout: 'column',
+                paddingH: dim.spacing.padding.sysPadding16,
+                paddingV: dim.spacing.padding.sysPadding16,
+                gap: dim.spacing.padding.sysPadding32,
+                borderRadius: dim.borderRadius.sysRadiusLg,
+                iconSize: 32,
+                iconSizeName: 'large',
+                titleVariant: 'large',
+                showChevron: false
+            }
+        }), [
+        dim
+    ]);
+    const v = variantTokens[variant];
+    const s = sizeTokens[size];
+    const isRow = s.layout === 'row';
+    const IconComponent = icon ? _icons.ICON_MAP[icon] : null;
+    const iconColor = v.iconBadgeColor ?? v.titleColor;
+    const renderedIcon = IconComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(IconComponent, {
+        size: s.iconSizeName,
+        color: iconColor
+    }) : null;
+    const outerStyle = [
+        {
+            backgroundColor: v.bg,
+            borderColor: v.borderColor,
+            borderWidth: v.borderWidth,
+            borderRadius: variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
+            paddingHorizontal: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
+            paddingVertical: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
+            opacity: disabled ? 0.48 : 1
+        },
+        v.elevated && ELEVATION,
+        fullWidth && {
+            alignSelf: 'stretch'
+        },
+        isRow ? styles.rowRoot : styles.colRoot,
+        !isRow && {
+            gap: s.gap
+        },
+        style
+    ];
+    // ── Text block ──────────────────────────────────────────────────────────────
+    const textBlock = title || description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+        style: isRow ? styles.rowTextBlock : undefined,
+        children: [
+            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                variant: s.titleVariant,
+                color: v.titleColor,
+                children: title
+            }),
+            !isRow && description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BodyText.BodyText, {
+                variant: "small",
+                color: v.descColor,
+                children: description
+            })
+        ]
+    }) : null;
+    // ── Inner content by variant ────────────────────────────────────────────────
+    let inner;
+    if (variant === 'doubled') {
+        inner = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactnative.View, {
+            style: [
+                styles.colRoot,
+                {
+                    backgroundColor: v.innerBg,
+                    borderRadius: s.borderRadius,
+                    paddingHorizontal: s.paddingH,
+                    paddingVertical: s.paddingV,
+                    gap: dim.spacing.padding.sysPadding24
+                }
+            ],
+            children: [
+                renderedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: [
+                        styles.doubledIconBadge,
+                        {
+                            backgroundColor: v.iconBadgeBg,
+                            borderRadius: dim.borderRadius.sysRadiusFull
+                        }
+                    ],
+                    children: renderedIcon
+                }),
+                textBlock,
+                children
+            ]
+        });
+    } else if (variant === 'image') {
+        inner = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                image && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Image, {
+                            source: image,
+                            style: [
+                                _reactnative.StyleSheet.absoluteFill,
+                                {
+                                    borderRadius: s.borderRadius
+                                }
+                            ],
+                            resizeMode: "cover",
+                            accessible: false
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                            style: [
+                                _reactnative.StyleSheet.absoluteFill,
+                                {
+                                    borderRadius: s.borderRadius,
+                                    backgroundColor: 'rgba(0,0,0,0.30)'
+                                }
+                            ],
+                            pointerEvents: "none"
+                        })
+                    ]
+                }),
+                renderedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        width: s.iconSize,
+                        height: s.iconSize
+                    },
+                    children: renderedIcon
+                }),
+                textBlock,
+                children
+            ]
+        });
+    } else if (isRow) {
+        // sm — horizontal row
+        inner = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                renderedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        width: s.iconSize,
+                        height: s.iconSize
+                    },
+                    children: renderedIcon
+                }),
+                textBlock,
+                s.showChevron && /*#__PURE__*/ (0, _jsxruntime.jsx)(_vectoricons.Ionicons, {
+                    name: "chevron-forward",
+                    size: 20,
+                    color: v.chevronColor,
+                    accessible: false
+                }),
+                children
+            ]
+        });
+    } else {
+        // md / lg — vertical column
+        inner = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                renderedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        width: s.iconSize,
+                        height: s.iconSize
+                    },
+                    children: renderedIcon
+                }),
+                textBlock,
+                children,
+                buttonIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+                    style: {
+                        position: 'absolute',
+                        bottom: s.paddingV,
+                        right: s.paddingH
+                    },
+                    pointerEvents: "none",
+                    children: buttonIcon
+                })
+            ]
+        });
+    }
+    // ── Wrapper ─────────────────────────────────────────────────────────────────
+    if (interactive || onPress) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.Pressable, {
+            onPress: disabled ? undefined : onPress,
+            accessibilityRole: "button",
+            accessibilityLabel: accessibilityLabel ?? (typeof title === 'string' ? title : undefined),
+            accessibilityState: {
+                disabled
+            },
+            style: ({ pressed })=>[
+                    styles.overflow,
+                    ...outerStyle,
+                    pressed && !disabled && styles.pressed
+                ],
+            children: inner
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactnative.View, {
+        style: [
+            styles.overflow,
+            ...outerStyle
+        ],
+        children: inner
+    });
+}
+const styles = _reactnative.StyleSheet.create({
+    overflow: {
+        overflow: 'hidden'
+    },
+    colRoot: {
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+    },
+    rowRoot: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12
+    },
+    rowTextBlock: {
+        flex: 1,
+        minWidth: 0
+    },
+    doubledIconBadge: {
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    pressed: {
+        opacity: 0.84
+    }
+});
+
+//# sourceMappingURL=index.js.map

package/src/components/ServiceCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/react-native/src/components/ServiceCard/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\r\n\r\nimport {\r\n  Image,\r\n  type ImageSourcePropType,\r\n  Pressable,\r\n  StyleProp,\r\n  StyleSheet,\r\n  View,\r\n  ViewStyle,\r\n} from 'react-native';\r\n\r\nimport { Ionicons } from '@expo/vector-icons';\r\n\r\nimport { ICON_MAP, type IconName } from '../../icons';\r\nimport { useTheme } from '../../theme';\r\nimport { BodyText } from '../BodyText';\r\n\r\nexport type ServiceCardVariant =\r\n  | 'outlined'\r\n  | 'tonal'\r\n  | 'filled'\r\n  | 'doubled'\r\n  | 'image';\r\nexport type ServiceCardSize = 'sm' | 'md' | 'lg';\r\n\r\nexport interface ServiceCardProps {\r\n  variant?: ServiceCardVariant;\r\n  size?: ServiceCardSize;\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  icon?: IconName;\r\n  image?: ImageSourcePropType;\r\n  buttonIcon?: React.ReactNode;\r\n  interactive?: boolean;\r\n  disabled?: boolean;\r\n  onPress?: () => void;\r\n  children?: React.ReactNode;\r\n  accessibilityLabel?: string;\r\n  fullWidth?: boolean;\r\n  style?: StyleProp<ViewStyle>;\r\n}\r\n\r\nconst ELEVATION = {\r\n  shadowColor: '#000',\r\n  shadowOffset: { width: 0, height: 2 },\r\n  shadowOpacity: 0.08,\r\n  shadowRadius: 8,\r\n  elevation: 2,\r\n};\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function ServiceCard({\r\n  variant = 'outlined',\r\n  size = 'lg',\r\n  title,\r\n  description,\r\n  icon,\r\n  image,\r\n  buttonIcon,\r\n  interactive = false,\r\n  disabled = false,\r\n  onPress,\r\n  children,\r\n  accessibilityLabel,\r\n  fullWidth = false,\r\n  style,\r\n}: ServiceCardProps) {\r\n  const { colorRoles: cr, dimensions: dim } = useTheme();\r\n\r\n  const variantTokens = useMemo(\r\n    () => ({\r\n      outlined: {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderColor: cr.outline.sysOutline,\r\n        borderWidth: dim.borderWidth.sysStrokeThin,\r\n        elevated: true,\r\n        titleColor: cr.surface.surface.sysOnSurface,\r\n        descColor: cr.surface.surface.sysOnSurfaceVariant,\r\n        chevronColor: cr.outline.sysOutlineFixed,\r\n        innerBg: undefined,\r\n        iconBadgeBg: undefined,\r\n        iconBadgeColor: undefined,\r\n      },\r\n      tonal: {\r\n        bg: cr.addOn.primaryFixed.sysPrimaryFixedDim,\r\n        borderColor: 'transparent',\r\n        borderWidth: 0,\r\n        elevated: false,\r\n        titleColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,\r\n        descColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,\r\n        chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,\r\n        innerBg: undefined,\r\n        iconBadgeBg: undefined,\r\n        iconBadgeColor: undefined,\r\n      },\r\n      filled: {\r\n        bg: cr.accent.primary.sysPrimaryContainer,\r\n        borderColor: 'transparent',\r\n        borderWidth: 0,\r\n        elevated: false,\r\n        titleColor: cr.accent.primary.sysOnPrimary,\r\n        descColor: cr.transparent.neutral.sysWhite80,\r\n        chevronColor: cr.accent.primary.sysOnPrimary,\r\n        innerBg: undefined,\r\n        iconBadgeBg: undefined,\r\n        iconBadgeColor: undefined,\r\n      },\r\n      doubled: {\r\n        bg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,\r\n        borderColor: cr.outline.sysOutline,\r\n        borderWidth: dim.borderWidth.sysStrokeThin,\r\n        elevated: false,\r\n        titleColor: cr.surface.surface.sysOnSurface,\r\n        descColor: cr.surface.surface.sysOnSurfaceVariant,\r\n        chevronColor: cr.outline.sysOutlineFixed,\r\n        innerBg: cr.transparent.primary.sysPrimary08,\r\n        iconBadgeBg: cr.accent.primary.sysPrimary,\r\n        iconBadgeColor: cr.accent.primary.sysOnPrimary,\r\n      },\r\n      image: {\r\n        bg: 'transparent',\r\n        borderColor: 'transparent',\r\n        borderWidth: 0,\r\n        elevated: false,\r\n        titleColor: cr.surface.inverse.sysInverseOnSurface,\r\n        descColor: cr.transparent.neutral.sysWhite80,\r\n        chevronColor: cr.surface.inverse.sysInverseOnSurface,\r\n        innerBg: undefined,\r\n        iconBadgeBg: undefined,\r\n        iconBadgeColor: undefined,\r\n      },\r\n    }),\r\n    [cr, dim],\r\n  );\r\n\r\n  const sizeTokens = useMemo(\r\n    () => ({\r\n      sm: {\r\n        layout: 'row' as const,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding12,\r\n        gap: dim.spacing.padding.sysPadding12,\r\n        borderRadius: dim.borderRadius.sysRadiusMd,\r\n        iconSize: 24,\r\n        iconSizeName: 'small' as const,\r\n        titleVariant: 'medium' as const,\r\n        showChevron: true,\r\n      },\r\n      md: {\r\n        layout: 'column' as const,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding16,\r\n        gap: dim.spacing.padding.sysPadding24,\r\n        borderRadius: dim.borderRadius.sysRadiusLg,\r\n        iconSize: 32,\r\n        iconSizeName: 'medium' as const,\r\n        titleVariant: 'medium' as const,\r\n        showChevron: false,\r\n      },\r\n      lg: {\r\n        layout: 'column' as const,\r\n        paddingH: dim.spacing.padding.sysPadding16,\r\n        paddingV: dim.spacing.padding.sysPadding16,\r\n        gap: dim.spacing.padding.sysPadding32,\r\n        borderRadius: dim.borderRadius.sysRadiusLg,\r\n        iconSize: 32,\r\n        iconSizeName: 'large' as const,\r\n        titleVariant: 'large' as const,\r\n        showChevron: false,\r\n      },\r\n    }),\r\n    [dim],\r\n  );\r\n\r\n  const v = variantTokens[variant];\r\n  const s = sizeTokens[size];\r\n  const isRow = s.layout === 'row';\r\n\r\n  const IconComponent = icon ? ICON_MAP[icon] : null;\r\n  const iconColor = v.iconBadgeColor ?? v.titleColor;\r\n  const renderedIcon = IconComponent ? (\r\n    <IconComponent size={s.iconSizeName} color={iconColor} />\r\n  ) : null;\r\n\r\n  const outerStyle = [\r\n    {\r\n      backgroundColor: v.bg,\r\n      borderColor: v.borderColor,\r\n      borderWidth: v.borderWidth,\r\n      borderRadius:\r\n        variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,\r\n      paddingHorizontal:\r\n        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,\r\n      paddingVertical:\r\n        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,\r\n      opacity: disabled ? 0.48 : 1,\r\n    },\r\n    v.elevated && ELEVATION,\r\n    fullWidth && { alignSelf: 'stretch' as const },\r\n    isRow ? styles.rowRoot : styles.colRoot,\r\n    !isRow && { gap: s.gap },\r\n    style,\r\n  ];\r\n\r\n  // ── Text block ──────────────────────────────────────────────────────────────\r\n  const textBlock =\r\n    title || description ? (\r\n      <View style={isRow ? styles.rowTextBlock : undefined}>\r\n        {title && (\r\n          <BodyText variant={s.titleVariant} color={v.titleColor}>\r\n            {title}\r\n          </BodyText>\r\n        )}\r\n        {!isRow && description && (\r\n          <BodyText variant=\"small\" color={v.descColor}>\r\n            {description}\r\n          </BodyText>\r\n        )}\r\n      </View>\r\n    ) : null;\r\n\r\n  // ── Inner content by variant ────────────────────────────────────────────────\r\n  let inner: React.ReactNode;\r\n\r\n  if (variant === 'doubled') {\r\n    inner = (\r\n      <View\r\n        style={[\r\n          styles.colRoot,\r\n          {\r\n            backgroundColor: v.innerBg,\r\n            borderRadius: s.borderRadius,\r\n            paddingHorizontal: s.paddingH,\r\n            paddingVertical: s.paddingV,\r\n            gap: dim.spacing.padding.sysPadding24,\r\n          },\r\n        ]}\r\n      >\r\n        {renderedIcon && (\r\n          <View\r\n            style={[\r\n              styles.doubledIconBadge,\r\n              {\r\n                backgroundColor: v.iconBadgeBg,\r\n                borderRadius: dim.borderRadius.sysRadiusFull,\r\n              },\r\n            ]}\r\n          >\r\n            {renderedIcon}\r\n          </View>\r\n        )}\r\n        {textBlock}\r\n        {children}\r\n      </View>\r\n    );\r\n  } else if (variant === 'image') {\r\n    inner = (\r\n      <>\r\n        {image && (\r\n          <>\r\n            <Image\r\n              source={image}\r\n              style={[\r\n                StyleSheet.absoluteFill,\r\n                { borderRadius: s.borderRadius },\r\n              ]}\r\n              resizeMode=\"cover\"\r\n              accessible={false}\r\n            />\r\n            <View\r\n              style={[\r\n                StyleSheet.absoluteFill,\r\n                {\r\n                  borderRadius: s.borderRadius,\r\n                  backgroundColor: 'rgba(0,0,0,0.30)',\r\n                },\r\n              ]}\r\n              pointerEvents=\"none\"\r\n            />\r\n          </>\r\n        )}\r\n        {renderedIcon && (\r\n          <View style={{ width: s.iconSize, height: s.iconSize }}>\r\n            {renderedIcon}\r\n          </View>\r\n        )}\r\n        {textBlock}\r\n        {children}\r\n      </>\r\n    );\r\n  } else if (isRow) {\r\n    // sm — horizontal row\r\n    inner = (\r\n      <>\r\n        {renderedIcon && (\r\n          <View style={{ width: s.iconSize, height: s.iconSize }}>\r\n            {renderedIcon}\r\n          </View>\r\n        )}\r\n        {textBlock}\r\n        {s.showChevron && (\r\n          <Ionicons\r\n            name=\"chevron-forward\"\r\n            size={20}\r\n            color={v.chevronColor}\r\n            accessible={false}\r\n          />\r\n        )}\r\n        {children}\r\n      </>\r\n    );\r\n  } else {\r\n    // md / lg — vertical column\r\n    inner = (\r\n      <>\r\n        {renderedIcon && (\r\n          <View style={{ width: s.iconSize, height: s.iconSize }}>\r\n            {renderedIcon}\r\n          </View>\r\n        )}\r\n        {textBlock}\r\n        {children}\r\n        {buttonIcon && (\r\n          <View\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: s.paddingV,\r\n              right: s.paddingH,\r\n            }}\r\n            pointerEvents=\"none\"\r\n          >\r\n            {buttonIcon}\r\n          </View>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  // ── Wrapper ─────────────────────────────────────────────────────────────────\r\n  if (interactive || onPress) {\r\n    return (\r\n      <Pressable\r\n        onPress={disabled ? undefined : onPress}\r\n        accessibilityRole=\"button\"\r\n        accessibilityLabel={\r\n          accessibilityLabel ?? (typeof title === 'string' ? title : undefined)\r\n        }\r\n        accessibilityState={{ disabled }}\r\n        style={({ pressed }) => [\r\n          styles.overflow,\r\n          ...outerStyle,\r\n          pressed && !disabled && styles.pressed,\r\n        ]}\r\n      >\r\n        {inner}\r\n      </Pressable>\r\n    );\r\n  }\r\n\r\n  return <View style={[styles.overflow, ...outerStyle]}>{inner}</View>;\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  overflow: {\r\n    overflow: 'hidden',\r\n  },\r\n  colRoot: {\r\n    flexDirection: 'column',\r\n    alignItems: 'flex-start',\r\n  },\r\n  rowRoot: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    gap: 12,\r\n  },\r\n  rowTextBlock: {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  },\r\n  doubledIconBadge: {\r\n    width: 48,\r\n    height: 48,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  pressed: {\r\n    opacity: 0.84,\r\n  },\r\n});\r\n"],"names":["ServiceCard","ELEVATION","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","variant","size","title","description","icon","image","buttonIcon","interactive","disabled","onPress","children","accessibilityLabel","fullWidth","style","colorRoles","cr","dimensions","dim","useTheme","variantTokens","useMemo","outlined","bg","surface","surfaceContainer","sysSurfaceContainerLowest","borderColor","outline","sysOutline","borderWidth","sysStrokeThin","elevated","titleColor","sysOnSurface","descColor","sysOnSurfaceVariant","chevronColor","sysOutlineFixed","innerBg","undefined","iconBadgeBg","iconBadgeColor","tonal","addOn","primaryFixed","sysPrimaryFixedDim","sysOnPrimaryFixed","filled","accent","primary","sysPrimaryContainer","sysOnPrimary","transparent","neutral","sysWhite80","doubled","sysPrimary08","sysPrimary","inverse","sysInverseOnSurface","sizeTokens","sm","layout","paddingH","spacing","padding","sysPadding16","paddingV","sysPadding12","gap","borderRadius","sysRadiusMd","iconSize","iconSizeName","titleVariant","showChevron","md","sysPadding24","sysRadiusLg","lg","sysPadding32","v","s","isRow","IconComponent","ICON_MAP","iconColor","renderedIcon","color","outerStyle","backgroundColor","sysRadiusXl","paddingHorizontal","sysPadding8","paddingVertical","opacity","alignSelf","styles","rowRoot","colRoot","textBlock","View","rowTextBlock","BodyText","inner","doubledIconBadge","sysRadiusFull","Image","source","StyleSheet","absoluteFill","resizeMode","accessible","pointerEvents","Ionicons","name","position","bottom","right","Pressable","accessibilityRole","accessibilityState","pressed","overflow","create","flexDirection","alignItems","flex","minWidth","justifyContent"],"mappings":"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"}

package/src/components/Slider/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SliderProps {
+    /** Controlled value */
+    value?: number;
+    /** Default value for uncontrolled usage (default: min) */
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    /** Snapping interval (default: 1) */
+    step?: number;
+    /** Called continuously while dragging */
+    onValueChange?: (value: number) => void;
+    /** Called when the user releases the thumb */
+    onSlidingComplete?: (value: number) => void;
+    /** Label rendered above the track */
+    label?: string;
+    /** Show min/max value labels on either side of the track */
+    showMinMax?: boolean;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Slider({ value: valueProp, defaultValue, min, max, step, onValueChange, onSlidingComplete, label, showMinMax, disabled, accessibilityLabel, style, }: SliderProps): React.JSX.Element;