@metamask/design-system-react-native 0.34.0 → 0.36.0

package/dist/components/ListItem/ListItem.cjs

@@ -11,14 +11,26 @@ const react_native_1 = require("react-native");
 const Box_1 = require("../Box/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const Content_1 = require("../Content/index.cjs");
-const Content_constants_1 = require("../Content/Content.constants.cjs");
-const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, verticalAlignment, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
+const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, variant = design_system_shared_1.ContentVariant.TwoLines, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const isMultiLine = variant === design_system_shared_1.ContentVariant.MultiLine;
+    let rootSizeClassName = 'min-h-[72px] justify-center';
+    if (variant === design_system_shared_1.ContentVariant.OneLine) {
+        rootSizeClassName = 'min-h-[48px] justify-center';
+    }
+    else if (isMultiLine) {
+        rootSizeClassName = 'min-h-[88px] justify-start';
+    }
+    const accessoryAlignItems = isMultiLine
+        ? design_system_shared_1.BoxAlignItems.Start
+        : design_system_shared_1.BoxAlignItems.Center;
+    const rootBaseClassName = (0, design_system_shared_1.mergeTwClassName)('w-full px-4 py-3', rootSizeClassName);
+    const rootTwClassName = (0, design_system_shared_1.mergeTwClassName)(rootBaseClassName, twClassName);
     const wrapperStyle = style
-        ? [tw.style('px-4 py-3', twClassName), style]
-        : tw.style('px-4 py-3', twClassName);
+        ? [tw.style(rootTwClassName), style]
+        : tw.style(rootTwClassName);
     const getPressableStyle = ({ pressed, }) => {
-        const baseStyle = tw.style('w-full px-4 py-3', twClassName, pressed && 'bg-pressed');
+        const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');
         if (!style) {
             return baseStyle;
         }
@@ -26,9 +38,8 @@ const ListItem = ({ children, isInteractive = false, twClassName, style, startAc
         return [baseStyle, userStyle];
     };
     const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);
-    const rowAlignment = Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment ?? design_system_shared_1.ContentVerticalAlignment.Center];
-    const content = (<Content_1.Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} verticalAlignment={verticalAlignment} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
-    const listContent = hasRowAccessories ? (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={rowAlignment} gap={accessoryGap} twClassName="min-h-[46px] w-full">
+    const content = (<Content_1.Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} variant={variant} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
+    const listContent = hasRowAccessories ? (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={accessoryAlignItems} gap={accessoryGap}>
       {content}
     </BoxRow_1.BoxRow>) : (content);
     if (isInteractive) {

package/dist/components/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAA0E;AAC1E,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAyC;AAOzC,0CAA6B;AAC7B,gDAAmC;AACnC,kDAAqC;AACrC,wEAAsE;AAI/D,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,WAAW,EACX,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;QAC7C,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GACoB,EAAwB,EAAE;QACrD,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,kBAAkB,EAClB,WAAW,EACX,OAAO,IAAI,YAAY,CACxB,CAAC;QAEF,IAAI,CAAC,KAAK,EAAE;YACV,OAAO,SAAS,CAAC;SAClB;QAED,MAAM,SAAS,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAE3E,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3E,MAAM,YAAY,GAChB,0CAAsB,CACpB,iBAAiB,IAAI,+CAAwB,CAAC,MAAM,CACrD,CAAC;IAEJ,MAAM,OAAO,GAAG,CACd,CAAC,iBAAO,CACN,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,yBAAyB,CAAC,CAAC,yBAAyB,CAAC,CACrD,uBAAuB,CAAC,CAAC,uBAAuB,CAAC,CACjD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CACzC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAC/C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,EAC3C,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,CACtC,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,WAAW,CAAC,qBAAqB,CAEjC;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,OAAO,CACL,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,IAAI,QAAQ,CAAC,CACjD,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,WAAW,CACZ;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,wBAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,CACL,CAAC,SAAG,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AApHW,QAAA,QAAQ,YAoHnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import { ContentVerticalAlignment } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\nimport { VERTICAL_ALIGNMENT_MAP } from '../Content/Content.constants';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  verticalAlignment,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const wrapperStyle = style\n    ? [tw.style('px-4 py-3', twClassName), style]\n    : tw.style('px-4 py-3', twClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(\n      'w-full px-4 py-3',\n      twClassName,\n      pressed && 'bg-pressed',\n    );\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n  const rowAlignment =\n    VERTICAL_ALIGNMENT_MAP[\n      verticalAlignment ?? ContentVerticalAlignment.Center\n    ];\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      verticalAlignment={verticalAlignment}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={rowAlignment}\n      gap={accessoryGap}\n      twClassName=\"min-h-[46px] w-full\"\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}
+{"version":3,"file":"ListItem.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVariant,\n  mergeTwClassName,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  variant = ContentVariant.TwoLines,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  let rootSizeClassName = 'min-h-[72px] justify-center';\n  if (variant === ContentVariant.OneLine) {\n    rootSizeClassName = 'min-h-[48px] justify-center';\n  } else if (isMultiLine) {\n    rootSizeClassName = 'min-h-[88px] justify-start';\n  }\n  const accessoryAlignItems = isMultiLine\n    ? BoxAlignItems.Start\n    : BoxAlignItems.Center;\n\n  const rootBaseClassName = mergeTwClassName(\n    'w-full px-4 py-3',\n    rootSizeClassName,\n  );\n  const rootTwClassName = mergeTwClassName(rootBaseClassName, twClassName);\n\n  const wrapperStyle = style\n    ? [tw.style(rootTwClassName), style]\n    : tw.style(rootTwClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      variant={variant}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={accessoryAlignItems}\n      gap={accessoryGap}\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}

package/dist/components/ListItem/ListItem.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoH5C,CAAC"}
+{"version":3,"file":"ListItem.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2H5C,CAAC"}

package/dist/components/ListItem/ListItem.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAa1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoH5C,CAAC"}
+{"version":3,"file":"ListItem.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,aAAa,EAAE,6BAAyB;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2H5C,CAAC"}

package/dist/components/ListItem/ListItem.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ContentVerticalAlignment } from "@metamask/design-system-shared";
+import { BoxAlignItems, ContentVariant, mergeTwClassName } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
@@ -12,14 +12,26 @@ import { Pressable } from "react-native";
 import { Box } from "../Box/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { Content } from "../Content/index.mjs";
-import { VERTICAL_ALIGNMENT_MAP } from "../Content/Content.constants.mjs";
-export const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, verticalAlignment, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
+export const ListItem = ({ children, isInteractive = false, twClassName, style, startAccessory, endAccessory, accessoryGap = 0, variant = ContentVariant.TwoLines, avatar, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, accessibilityRole, ...props }) => {
     const tw = useTailwind();
+    const isMultiLine = variant === ContentVariant.MultiLine;
+    let rootSizeClassName = 'min-h-[72px] justify-center';
+    if (variant === ContentVariant.OneLine) {
+        rootSizeClassName = 'min-h-[48px] justify-center';
+    }
+    else if (isMultiLine) {
+        rootSizeClassName = 'min-h-[88px] justify-start';
+    }
+    const accessoryAlignItems = isMultiLine
+        ? BoxAlignItems.Start
+        : BoxAlignItems.Center;
+    const rootBaseClassName = mergeTwClassName('w-full px-4 py-3', rootSizeClassName);
+    const rootTwClassName = mergeTwClassName(rootBaseClassName, twClassName);
     const wrapperStyle = style
-        ? [tw.style('px-4 py-3', twClassName), style]
-        : tw.style('px-4 py-3', twClassName);
+        ? [tw.style(rootTwClassName), style]
+        : tw.style(rootTwClassName);
     const getPressableStyle = ({ pressed, }) => {
-        const baseStyle = tw.style('w-full px-4 py-3', twClassName, pressed && 'bg-pressed');
+        const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');
         if (!style) {
             return baseStyle;
         }
@@ -27,9 +39,8 @@ export const ListItem = ({ children, isInteractive = false, twClassName, style,
         return [baseStyle, userStyle];
     };
     const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);
-    const rowAlignment = VERTICAL_ALIGNMENT_MAP[verticalAlignment ?? ContentVerticalAlignment.Center];
-    const content = (<Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} verticalAlignment={verticalAlignment} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
-    const listContent = hasRowAccessories ? (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={rowAlignment} gap={accessoryGap} twClassName="min-h-[46px] w-full">
+    const content = (<Content twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined} variant={variant} avatar={avatar} title={title} titleProps={titleProps} titleStartAccessory={titleStartAccessory} titleEndAccessory={titleEndAccessory} description={description} descriptionProps={descriptionProps} descriptionStartAccessory={descriptionStartAccessory} descriptionEndAccessory={descriptionEndAccessory} value={value} valueProps={valueProps} valueStartAccessory={valueStartAccessory} valueEndAccessory={valueEndAccessory} subvalue={subvalue} subvalueProps={subvalueProps} subvalueStartAccessory={subvalueStartAccessory} subvalueEndAccessory={subvalueEndAccessory}/>);
+    const listContent = hasRowAccessories ? (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={accessoryAlignItems} gap={accessoryGap}>
       {content}
     </BoxRow>) : (content);
     if (isInteractive) {

package/dist/components/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ContentVerticalAlignment } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\nimport { VERTICAL_ALIGNMENT_MAP } from '../Content/Content.constants';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  verticalAlignment,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const wrapperStyle = style\n    ? [tw.style('px-4 py-3', twClassName), style]\n    : tw.style('px-4 py-3', twClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(\n      'w-full px-4 py-3',\n      twClassName,\n      pressed && 'bg-pressed',\n    );\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n  const rowAlignment =\n    VERTICAL_ALIGNMENT_MAP[\n      verticalAlignment ?? ContentVerticalAlignment.Center\n    ];\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      verticalAlignment={verticalAlignment}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={rowAlignment}\n      gap={accessoryGap}\n      twClassName=\"min-h-[46px] w-full\"\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}
+{"version":3,"file":"ListItem.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVariant,\n  mergeTwClassName,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\nimport type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Content } from '../Content';\n\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<ListItemProps> = ({\n  children,\n  isInteractive = false,\n  twClassName,\n  style,\n  startAccessory,\n  endAccessory,\n  accessoryGap = 0,\n  variant = ContentVariant.TwoLines,\n  avatar,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  accessibilityRole,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  let rootSizeClassName = 'min-h-[72px] justify-center';\n  if (variant === ContentVariant.OneLine) {\n    rootSizeClassName = 'min-h-[48px] justify-center';\n  } else if (isMultiLine) {\n    rootSizeClassName = 'min-h-[88px] justify-start';\n  }\n  const accessoryAlignItems = isMultiLine\n    ? BoxAlignItems.Start\n    : BoxAlignItems.Center;\n\n  const rootBaseClassName = mergeTwClassName(\n    'w-full px-4 py-3',\n    rootSizeClassName,\n  );\n  const rootTwClassName = mergeTwClassName(rootBaseClassName, twClassName);\n\n  const wrapperStyle = style\n    ? [tw.style(rootTwClassName), style]\n    : tw.style(rootTwClassName);\n\n  const getPressableStyle = ({\n    pressed,\n  }: PressableStateCallbackType): StyleProp<ViewStyle> => {\n    const baseStyle = tw.style(rootTwClassName, pressed && 'bg-pressed');\n\n    if (!style) {\n      return baseStyle;\n    }\n\n    const userStyle = typeof style === 'function' ? style({ pressed }) : style;\n\n    return [baseStyle, userStyle];\n  };\n\n  const hasRowAccessories = Boolean(startAccessory) || Boolean(endAccessory);\n\n  const content = (\n    <Content\n      twClassName={hasRowAccessories ? 'flex-1 min-w-0' : undefined}\n      variant={variant}\n      avatar={avatar}\n      title={title}\n      titleProps={titleProps}\n      titleStartAccessory={titleStartAccessory}\n      titleEndAccessory={titleEndAccessory}\n      description={description}\n      descriptionProps={descriptionProps}\n      descriptionStartAccessory={descriptionStartAccessory}\n      descriptionEndAccessory={descriptionEndAccessory}\n      value={value}\n      valueProps={valueProps}\n      valueStartAccessory={valueStartAccessory}\n      valueEndAccessory={valueEndAccessory}\n      subvalue={subvalue}\n      subvalueProps={subvalueProps}\n      subvalueStartAccessory={subvalueStartAccessory}\n      subvalueEndAccessory={subvalueEndAccessory}\n    />\n  );\n\n  const listContent = hasRowAccessories ? (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={accessoryAlignItems}\n      gap={accessoryGap}\n    >\n      {content}\n    </BoxRow>\n  ) : (\n    content\n  );\n\n  if (isInteractive) {\n    return (\n      <Pressable\n        accessibilityRole={accessibilityRole ?? 'button'}\n        style={getPressableStyle}\n        {...props}\n      >\n        {listContent}\n        {children}\n      </Pressable>\n    );\n  }\n\n  return (\n    <Box style={wrapperStyle} {...props}>\n      {listContent}\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = 'ListItem';\n"]}

package/dist/components/ListItem/index.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = exports.ListItemVerticalAlignment = void 0;
-var design_system_shared_1 = require("@metamask/design-system-shared");
-Object.defineProperty(exports, "ListItemVerticalAlignment", { enumerable: true, get: function () { return design_system_shared_1.ContentVerticalAlignment; } });
+exports.ListItemVariant = exports.ListItem = void 0;
 var ListItem_1 = require("./ListItem.cjs");
 Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "ListItemVariant", { enumerable: true, get: function () { return design_system_shared_1.ContentVariant; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/ListItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":";;;AAAA,uEAAuG;AAA9F,iIAAA,wBAAwB,OAA6B;AAC9D,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA","sourcesContent":["export { ContentVerticalAlignment as ListItemVerticalAlignment } from '@metamask/design-system-shared';\nexport { ListItem } from './ListItem';\nexport type { ListItemProps } from './ListItem.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":";;;AAAA,2CAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uEAAmF;AAA1E,uHAAA,cAAc,OAAmB","sourcesContent":["export { ListItem } from './ListItem';\nexport { ContentVariant as ListItemVariant } from '@metamask/design-system-shared';\nexport type { ListItemProps } from './ListItem.types';\n"]}

package/dist/components/ListItem/index.d.cts

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment as ListItemVerticalAlignment } from "@metamask/design-system-shared";
 export { ListItem } from "./ListItem.cjs";
+export { ContentVariant as ListItemVariant } from "@metamask/design-system-shared";
 export type { ListItemProps } from "./ListItem.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/ListItem/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,uCAAuC;AACvG,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,uCAAuC;AACnF,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/ListItem/index.d.mts

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment as ListItemVerticalAlignment } from "@metamask/design-system-shared";
 export { ListItem } from "./ListItem.mjs";
+export { ContentVariant as ListItemVariant } from "@metamask/design-system-shared";
 export type { ListItemProps } from "./ListItem.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/ListItem/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,uCAAuC;AACvG,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,YAAY,EAAE,aAAa,EAAE,6BAAyB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,uCAAuC;AACnF,YAAY,EAAE,aAAa,EAAE,6BAAyB"}

package/dist/components/ListItem/index.mjs

@@ -1,3 +1,3 @@
-export { ContentVerticalAlignment as ListItemVerticalAlignment } from "@metamask/design-system-shared";
 export { ListItem } from "./ListItem.mjs";
+export { ContentVariant as ListItemVariant } from "@metamask/design-system-shared";
 //# sourceMappingURL=index.mjs.map

package/dist/components/ListItem/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,yBAAyB,EAAE,uCAAuC;AACvG,OAAO,EAAE,QAAQ,EAAE,uBAAmB","sourcesContent":["export { ContentVerticalAlignment as ListItemVerticalAlignment } from '@metamask/design-system-shared';\nexport { ListItem } from './ListItem';\nexport type { ListItemProps } from './ListItem.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,uBAAmB;AACtC,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,uCAAuC","sourcesContent":["export { ListItem } from './ListItem';\nexport { ContentVariant as ListItemVariant } from '@metamask/design-system-shared';\nexport type { ListItemProps } from './ListItem.types';\n"]}

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const Box_1 = require("../Box/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const Slider_constants_1 = require("./Slider.constants.cjs");
+const Slider_utilities_1 = require("./Slider.utilities.cjs");
+const useSliderGesture_1 = require("./useSliderGesture.cjs");
+const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValue = 100, step = 1, isDisabled = false, testID, marks = Slider_constants_1.DEFAULT_MARKS, showRangeLabels = false, showRangeDots = false, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset = Slider_constants_1.SLIDER_TRACK_INSET, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const theme = (0, design_system_twrnc_preset_1.useTheme)();
+    const isPureBlack = (0, design_system_twrnc_preset_1.usePureBlack)();
+    const palette = (0, react_1.useMemo)(() => (0, design_system_twrnc_preset_1.getThemeColors)(theme, isPureBlack), [isPureBlack, theme]);
+    const themedColors = (0, react_1.useMemo)(() => {
+        const hasThemedColors = (0, Slider_utilities_1.hasThemedMarkColors)(marks);
+        return {
+            hasThemedColors,
+            fillColorStops: (0, Slider_utilities_1.buildColorStops)(marks, palette, design_system_shared_1.SliderMarkColor.IconAlternative),
+            thumbColorStops: (0, Slider_utilities_1.buildColorStops)(marks, palette, design_system_shared_1.SliderMarkColor.IconDefault),
+        };
+    }, [palette, marks]);
+    const labeledMarks = (0, react_1.useMemo)(() => marks.filter((mark) => mark.label !== undefined), [marks]);
+    const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } = (0, useSliderGesture_1.useSliderGesture)({
+        value,
+        minimumValue,
+        maximumValue,
+        step,
+        isDisabled,
+        onValueChange,
+        onDragEnd,
+        onGrip,
+        onMark,
+        marks,
+        fillColorStops: themedColors.fillColorStops,
+        thumbColorStops: themedColors.thumbColorStops,
+        hasThemedColors: themedColors.hasThemedColors,
+        mapValueToTrackPercent,
+        mapTrackPercentToValue,
+    });
+    const getAccessibilityText = (0, react_1.useCallback)(() => {
+        const trackPercent = Math.round((0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent));
+        return `${trackPercent}%`;
+    }, [mapValueToTrackPercent, maximumValue, minimumValue, value]);
+    const handleAccessibilityAction = (0, react_1.useCallback)((event) => {
+        if (isDisabled) {
+            return;
+        }
+        const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+        const nextValue = (0, Slider_utilities_1.clampValueToRange)(value + delta, minimumValue, maximumValue, step);
+        if (nextValue !== value) {
+            onValueChange(nextValue);
+            onDragEnd?.(nextValue);
+        }
+    }, [
+        isDisabled,
+        maximumValue,
+        minimumValue,
+        onDragEnd,
+        onValueChange,
+        step,
+        value,
+    ]);
+    return (<Box_1.Box {...props} testID={testID} accessibilityRole="adjustable" accessibilityState={{ disabled: isDisabled }} accessibilityValue={{
+            min: minimumValue,
+            max: maximumValue,
+            now: value,
+            text: getAccessibilityText(),
+        }} accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]} onAccessibilityAction={handleAccessibilityAction} onLayout={handleLayout} style={[
+            tw.style('relative self-stretch', isDisabled ? 'py-2 opacity-40' : 'py-2'),
+            {
+                marginHorizontal: trackInset,
+                ...(showRangeLabels && { paddingBottom: Slider_constants_1.SLIDER_BOTTOM_PADDING }),
+            },
+            style,
+        ]} twClassName={twClassName}>
+      <react_native_gesture_handler_1.GestureDetector gesture={gesture}>
+        <react_native_reanimated_1.default.View style={[tw.style('relative'), { height: Slider_constants_1.THUMB_BOTTOM_OFFSET }]}>
+          <react_native_reanimated_1.default.View style={tw.style('absolute left-0 top-0 h-2 w-full rounded-full bg-border-muted')}/>
+          <react_native_reanimated_1.default.View style={[
+            tw.style('absolute left-0 top-0 h-2 rounded-full', !themedColors.hasThemedColors && 'bg-icon-alternative'),
+            progressStyle,
+        ]}/>
+          {showRangeDots &&
+            marks.map((mark) => (<Box_1.Box key={`dot-${mark.step}`} pointerEvents="none" twClassName="absolute top-0.5 h-1 w-1 rounded-full bg-text-muted" style={{
+                    left: (0, Slider_utilities_1.getDotLeftPercent)(mark.step),
+                    transform: [{ translateX: -2 }],
+                    zIndex: -2,
+                }}/>))}
+          <react_native_reanimated_1.default.View style={[
+            tw.style('absolute rounded-full', !themedColors.hasThemedColors && 'bg-icon-default'),
+            {
+                width: Slider_constants_1.THUMB_SIZE,
+                height: Slider_constants_1.THUMB_SIZE,
+                top: Slider_constants_1.THUMB_TOP_OFFSET,
+                left: Slider_constants_1.THUMB_LEFT_OFFSET,
+                elevation: 4,
+            },
+            thumbStyle,
+        ]} hitSlop={{ top: 25, bottom: 25, left: 25, right: 25 }}/>
+        </react_native_reanimated_1.default.View>
+      </react_native_gesture_handler_1.GestureDetector>
+
+      {showRangeLabels &&
+            labeledMarks.map((mark) => (<react_native_1.Pressable key={`label-${mark.step}`} style={[
+                    tw.style('absolute items-center'),
+                    {
+                        top: Slider_constants_1.RANGE_LABEL_TOP,
+                        left: (0, Slider_utilities_1.getDotLeftPercent)(mark.step),
+                        transform: [{ translateX: '-50%' }],
+                    },
+                ]} onPress={() => handlePressStep(mark.step)} disabled={isDisabled} accessibilityRole="button">
+            <Text_1.Text variant={design_system_shared_1.TextVariant.BodyMd} fontWeight={design_system_shared_1.FontWeight.Medium} color={design_system_shared_1.TextColor.TextAlternative}>
+              {mark.label}
+            </Text_1.Text>
+          </react_native_1.Pressable>))}
+    </Box_1.Box>);
+};
+exports.Slider = Slider;
+exports.Slider.displayName = 'Slider';
+//# sourceMappingURL=Slider.cjs.map

package/dist/components/Slider/Slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  TextColor,\n  TextVariant,\n  SliderMarkColor,\n} from '@metamask/design-system-shared';\nimport {\n  getThemeColors,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback, useMemo } from 'react';\nimport { AccessibilityActionEvent, Pressable } from 'react-native';\nimport type { ViewStyle } from 'react-native';\nimport { GestureDetector } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\n\nimport { Box } from '../Box';\nimport { Text } from '../Text';\n\nimport {\n  DEFAULT_MARKS,\n  RANGE_LABEL_TOP,\n  SLIDER_BOTTOM_PADDING,\n  SLIDER_TRACK_INSET,\n  THUMB_BOTTOM_OFFSET,\n  THUMB_LEFT_OFFSET,\n  THUMB_SIZE,\n  THUMB_TOP_OFFSET,\n} from './Slider.constants';\nimport type { SliderProps } from './Slider.types';\nimport {\n  buildColorStops,\n  clampValueToRange,\n  getDotLeftPercent,\n  getTrackPercentFromValue,\n  hasThemedMarkColors,\n} from './Slider.utilities';\nimport { useSliderGesture } from './useSliderGesture';\n\nexport const Slider = ({\n  value,\n  onValueChange,\n  onDragEnd,\n  minimumValue = 0,\n  maximumValue = 100,\n  step = 1,\n  isDisabled = false,\n  testID,\n  marks = DEFAULT_MARKS,\n  showRangeLabels = false,\n  showRangeDots = false,\n  onGrip,\n  onMark,\n  mapValueToTrackPercent,\n  mapTrackPercentToValue,\n  trackInset = SLIDER_TRACK_INSET,\n  twClassName,\n  style,\n  ...props\n}: SliderProps) => {\n  const tw = useTailwind();\n  const theme = useTheme();\n  const isPureBlack = usePureBlack();\n\n  const palette = useMemo(\n    () => getThemeColors(theme, isPureBlack),\n    [isPureBlack, theme],\n  );\n\n  const themedColors = useMemo(() => {\n    const hasThemedColors = hasThemedMarkColors(marks);\n\n    return {\n      hasThemedColors,\n      fillColorStops: buildColorStops(\n        marks,\n        palette,\n        SliderMarkColor.IconAlternative,\n      ),\n      thumbColorStops: buildColorStops(\n        marks,\n        palette,\n        SliderMarkColor.IconDefault,\n      ),\n    };\n  }, [palette, marks]);\n\n  const labeledMarks = useMemo(\n    () => marks.filter((mark) => mark.label !== undefined),\n    [marks],\n  );\n\n  const { handleLayout, progressStyle, thumbStyle, gesture, handlePressStep } =\n    useSliderGesture({\n      value,\n      minimumValue,\n      maximumValue,\n      step,\n      isDisabled,\n      onValueChange,\n      onDragEnd,\n      onGrip,\n      onMark,\n      marks,\n      fillColorStops: themedColors.fillColorStops,\n      thumbColorStops: themedColors.thumbColorStops,\n      hasThemedColors: themedColors.hasThemedColors,\n      mapValueToTrackPercent,\n      mapTrackPercentToValue,\n    });\n\n  const getAccessibilityText = useCallback(() => {\n    const trackPercent = Math.round(\n      getTrackPercentFromValue(\n        value,\n        minimumValue,\n        maximumValue,\n        mapValueToTrackPercent,\n      ),\n    );\n    return `${trackPercent}%`;\n  }, [mapValueToTrackPercent, maximumValue, minimumValue, value]);\n\n  const handleAccessibilityAction = useCallback(\n    (event: AccessibilityActionEvent) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const delta = event.nativeEvent.actionName === 'increment' ? step : -step;\n      const nextValue = clampValueToRange(\n        value + delta,\n        minimumValue,\n        maximumValue,\n        step,\n      );\n\n      if (nextValue !== value) {\n        onValueChange(nextValue);\n        onDragEnd?.(nextValue);\n      }\n    },\n    [\n      isDisabled,\n      maximumValue,\n      minimumValue,\n      onDragEnd,\n      onValueChange,\n      step,\n      value,\n    ],\n  );\n\n  return (\n    <Box\n      {...props}\n      testID={testID}\n      accessibilityRole=\"adjustable\"\n      accessibilityState={{ disabled: isDisabled }}\n      accessibilityValue={{\n        min: minimumValue,\n        max: maximumValue,\n        now: value,\n        text: getAccessibilityText(),\n      }}\n      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}\n      onAccessibilityAction={handleAccessibilityAction}\n      onLayout={handleLayout}\n      style={[\n        tw.style(\n          'relative self-stretch',\n          isDisabled ? 'py-2 opacity-40' : 'py-2',\n        ),\n        {\n          marginHorizontal: trackInset,\n          ...(showRangeLabels && { paddingBottom: SLIDER_BOTTOM_PADDING }),\n        },\n        style,\n      ]}\n      twClassName={twClassName}\n    >\n      <GestureDetector gesture={gesture}>\n        <Animated.View\n          style={[tw.style('relative'), { height: THUMB_BOTTOM_OFFSET }]}\n        >\n          <Animated.View\n            style={tw.style(\n              'absolute left-0 top-0 h-2 w-full rounded-full bg-border-muted',\n            )}\n          />\n          <Animated.View\n            style={[\n              tw.style(\n                'absolute left-0 top-0 h-2 rounded-full',\n                !themedColors.hasThemedColors && 'bg-icon-alternative',\n              ),\n              progressStyle,\n            ]}\n          />\n          {showRangeDots &&\n            marks.map((mark) => (\n              <Box\n                key={`dot-${mark.step}`}\n                pointerEvents=\"none\"\n                twClassName=\"absolute top-0.5 h-1 w-1 rounded-full bg-text-muted\"\n                style={{\n                  left: getDotLeftPercent(mark.step) as ViewStyle['left'],\n                  transform: [{ translateX: -2 }],\n                  zIndex: -2,\n                }}\n              />\n            ))}\n          <Animated.View\n            style={[\n              tw.style(\n                'absolute rounded-full',\n                !themedColors.hasThemedColors && 'bg-icon-default',\n              ),\n              {\n                width: THUMB_SIZE,\n                height: THUMB_SIZE,\n                top: THUMB_TOP_OFFSET,\n                left: THUMB_LEFT_OFFSET,\n                elevation: 4,\n              },\n              thumbStyle,\n            ]}\n            hitSlop={{ top: 25, bottom: 25, left: 25, right: 25 }}\n          />\n        </Animated.View>\n      </GestureDetector>\n\n      {showRangeLabels &&\n        labeledMarks.map((mark) => (\n          <Pressable\n            key={`label-${mark.step}`}\n            style={[\n              tw.style('absolute items-center'),\n              {\n                top: RANGE_LABEL_TOP,\n                left: getDotLeftPercent(mark.step) as ViewStyle['left'],\n                transform: [{ translateX: '-50%' }],\n              },\n            ]}\n            onPress={() => handlePressStep(mark.step)}\n            disabled={isDisabled}\n            accessibilityRole=\"button\"\n          >\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              color={TextColor.TextAlternative}\n            >\n              {mark.label}\n            </Text>\n          </Pressable>\n        ))}\n    </Box>\n  );\n};\n\nSlider.displayName = 'Slider';\n"]}

package/dist/components/Slider/Slider.constants.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_MARKS = exports.DOT_EDGE_MAX_PERCENT = exports.DOT_EDGE_INSET_PERCENT = exports.SLIDER_TRACK_INSET = exports.SLIDER_BOTTOM_PADDING = exports.SLIDER_LABEL_LINE_HEIGHT = exports.RANGE_LABEL_TOP = exports.SLIDER_VERTICAL_PADDING = exports.THUMB_GRIP_ANIMATION_DURATION = exports.THUMB_GRIP_SCALE = exports.THUMB_TO_LABEL_GAP = exports.THUMB_BOTTOM_OFFSET = exports.THUMB_LEFT_OFFSET = exports.THUMB_TOP_OFFSET = exports.THUMB_SIZE = void 0;
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+exports.THUMB_SIZE = 32;
+exports.THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+exports.THUMB_LEFT_OFFSET = -16;
+exports.THUMB_BOTTOM_OFFSET = exports.THUMB_TOP_OFFSET + exports.THUMB_SIZE;
+exports.THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+exports.THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+exports.THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+exports.SLIDER_VERTICAL_PADDING = 8;
+exports.RANGE_LABEL_TOP = exports.SLIDER_VERTICAL_PADDING + exports.THUMB_BOTTOM_OFFSET + exports.THUMB_TO_LABEL_GAP;
+/** Approximate line height for BodyMd range labels below the track. */
+exports.SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+exports.SLIDER_BOTTOM_PADDING = exports.RANGE_LABEL_TOP + exports.SLIDER_LABEL_LINE_HEIGHT;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+exports.SLIDER_TRACK_INSET = Math.abs(exports.THUMB_LEFT_OFFSET);
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+exports.DOT_EDGE_INSET_PERCENT = '2%';
+exports.DOT_EDGE_MAX_PERCENT = '98%';
+exports.DEFAULT_MARKS = [
+    { step: 0, label: '0%', haptic: false },
+    { step: 25, label: '25%', haptic: true },
+    { step: 50, label: '50%', haptic: true },
+    { step: 75, label: '75%', haptic: true },
+    { step: 100, label: '100%', haptic: false },
+];
+//# sourceMappingURL=Slider.constants.cjs.map

package/dist/components/Slider/Slider.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":";;;AAEA,gFAAgF;AACnE,QAAA,UAAU,GAAG,EAAE,CAAC;AAChB,QAAA,gBAAgB,GAAG,CAAC,EAAE,CAAC;AACpC,6EAA6E;AAChE,QAAA,iBAAiB,GAAG,CAAC,EAAE,CAAC;AACxB,QAAA,mBAAmB,GAAG,wBAAgB,GAAG,kBAAU,CAAC;AACpD,QAAA,kBAAkB,GAAG,CAAC,CAAC;AACpC,6DAA6D;AAChD,QAAA,gBAAgB,GAAG,IAAI,CAAC;AACrC,iDAAiD;AACpC,QAAA,6BAA6B,GAAG,GAAG,CAAC;AACjD,oEAAoE;AACvD,QAAA,uBAAuB,GAAG,CAAC,CAAC;AAC5B,QAAA,eAAe,GAC1B,+BAAuB,GAAG,2BAAmB,GAAG,0BAAkB,CAAC;AACrE,uEAAuE;AAC1D,QAAA,wBAAwB,GAAG,EAAE,CAAC;AAC3C,oFAAoF;AACvE,QAAA,qBAAqB,GAAG,uBAAe,GAAG,gCAAwB,CAAC;AAChF;;;GAGG;AACU,QAAA,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,yBAAiB,CAAC,CAAC;AAC9D;;;;GAIG;AACU,QAAA,sBAAsB,GAAG,IAAI,CAAC;AAC9B,QAAA,oBAAoB,GAAG,KAAK,CAAC;AAE7B,QAAA,aAAa,GAA0B;IAClD,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;IACvC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;CAC5C,CAAC","sourcesContent":["import type { SliderMark } from '@metamask/design-system-shared';\n\n/** Slider geometry and behavior defaults — not typography or spacing tokens. */\nexport const THUMB_SIZE = 32;\nexport const THUMB_TOP_OFFSET = -13;\n/** Negative offset so the thumb center aligns with the track start at 0%. */\nexport const THUMB_LEFT_OFFSET = -16;\nexport const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;\nexport const THUMB_TO_LABEL_GAP = 8;\n/** Scale applied to the thumb while the user is dragging. */\nexport const THUMB_GRIP_SCALE = 1.12;\n/** Duration (ms) for thumb grip scale in/out. */\nexport const THUMB_GRIP_ANIMATION_DURATION = 100;\n/** Matches root `py-2` vertical padding on the slider container. */\nexport const SLIDER_VERTICAL_PADDING = 8;\nexport const RANGE_LABEL_TOP =\n  SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;\n/** Approximate line height for BodyMd range labels below the track. */\nexport const SLIDER_LABEL_LINE_HEIGHT = 20;\n/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */\nexport const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;\n/**\n * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so\n * the thumb can overhang at min/max without clipping.\n */\nexport const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);\n/**\n * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.\n * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;\n * a small inset keeps edge markers from sitting under the thumb center.\n */\nexport const DOT_EDGE_INSET_PERCENT = '2%';\nexport const DOT_EDGE_MAX_PERCENT = '98%';\n\nexport const DEFAULT_MARKS: readonly SliderMark[] = [\n  { step: 0, label: '0%', haptic: false },\n  { step: 25, label: '25%', haptic: true },\n  { step: 50, label: '50%', haptic: true },\n  { step: 75, label: '75%', haptic: true },\n  { step: 100, label: '100%', haptic: false },\n];\n"]}

package/dist/components/Slider/Slider.constants.d.cts

@@ -0,0 +1,33 @@
+import type { SliderMark } from "@metamask/design-system-shared";
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export declare const THUMB_SIZE = 32;
+export declare const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export declare const THUMB_LEFT_OFFSET = -16;
+export declare const THUMB_BOTTOM_OFFSET: number;
+export declare const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export declare const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export declare const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export declare const SLIDER_VERTICAL_PADDING = 8;
+export declare const RANGE_LABEL_TOP: number;
+/** Approximate line height for BodyMd range labels below the track. */
+export declare const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export declare const SLIDER_BOTTOM_PADDING: number;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export declare const SLIDER_TRACK_INSET: number;
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export declare const DOT_EDGE_INSET_PERCENT = "2%";
+export declare const DOT_EDGE_MAX_PERCENT = "98%";
+export declare const DEFAULT_MARKS: readonly SliderMark[];
+//# sourceMappingURL=Slider.constants.d.cts.map

package/dist/components/Slider/Slider.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,uCAAuC;AAEjE,gFAAgF;AAChF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,mBAAmB,QAAgC,CAAC;AACjE,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,iDAAiD;AACjD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,eAAe,QACwC,CAAC;AACrE,uEAAuE;AACvE,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAC9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,aAAa,EAAE,SAAS,UAAU,EAM9C,CAAC"}

package/dist/components/Slider/Slider.constants.d.mts

@@ -0,0 +1,33 @@
+import type { SliderMark } from "@metamask/design-system-shared";
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export declare const THUMB_SIZE = 32;
+export declare const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export declare const THUMB_LEFT_OFFSET = -16;
+export declare const THUMB_BOTTOM_OFFSET: number;
+export declare const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export declare const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export declare const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export declare const SLIDER_VERTICAL_PADDING = 8;
+export declare const RANGE_LABEL_TOP: number;
+/** Approximate line height for BodyMd range labels below the track. */
+export declare const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export declare const SLIDER_BOTTOM_PADDING: number;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export declare const SLIDER_TRACK_INSET: number;
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export declare const DOT_EDGE_INSET_PERCENT = "2%";
+export declare const DOT_EDGE_MAX_PERCENT = "98%";
+export declare const DEFAULT_MARKS: readonly SliderMark[];
+//# sourceMappingURL=Slider.constants.d.mts.map

package/dist/components/Slider/Slider.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,uCAAuC;AAEjE,gFAAgF;AAChF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,mBAAmB,QAAgC,CAAC;AACjE,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,iDAAiD;AACjD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AACjD,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,eAAe,QACwC,CAAC;AACrE,uEAAuE;AACvE,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAA8B,CAAC;AAC9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,aAAa,EAAE,SAAS,UAAU,EAM9C,CAAC"}

package/dist/components/Slider/Slider.constants.mjs

@@ -0,0 +1,38 @@
+/** Slider geometry and behavior defaults — not typography or spacing tokens. */
+export const THUMB_SIZE = 32;
+export const THUMB_TOP_OFFSET = -13;
+/** Negative offset so the thumb center aligns with the track start at 0%. */
+export const THUMB_LEFT_OFFSET = -16;
+export const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;
+export const THUMB_TO_LABEL_GAP = 8;
+/** Scale applied to the thumb while the user is dragging. */
+export const THUMB_GRIP_SCALE = 1.12;
+/** Duration (ms) for thumb grip scale in/out. */
+export const THUMB_GRIP_ANIMATION_DURATION = 100;
+/** Matches root `py-2` vertical padding on the slider container. */
+export const SLIDER_VERTICAL_PADDING = 8;
+export const RANGE_LABEL_TOP = SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;
+/** Approximate line height for BodyMd range labels below the track. */
+export const SLIDER_LABEL_LINE_HEIGHT = 20;
+/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */
+export const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;
+/**
+ * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so
+ * the thumb can overhang at min/max without clipping.
+ */
+export const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);
+/**
+ * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.
+ * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;
+ * a small inset keeps edge markers from sitting under the thumb center.
+ */
+export const DOT_EDGE_INSET_PERCENT = '2%';
+export const DOT_EDGE_MAX_PERCENT = '98%';
+export const DEFAULT_MARKS = [
+    { step: 0, label: '0%', haptic: false },
+    { step: 25, label: '25%', haptic: true },
+    { step: 50, label: '50%', haptic: true },
+    { step: 75, label: '75%', haptic: true },
+    { step: 100, label: '100%', haptic: false },
+];
+//# sourceMappingURL=Slider.constants.mjs.map

package/dist/components/Slider/Slider.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.constants.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAEA,gFAAgF;AAChF,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAC7B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,CAAC;AACpC,6EAA6E;AAC7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,CAAC;AACrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,UAAU,CAAC;AACjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,6DAA6D;AAC7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AACrC,iDAAiD;AACjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAC;AACjD,oEAAoE;AACpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,eAAe,GAC1B,uBAAuB,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AACrE,uEAAuE;AACvE,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAC3C,oFAAoF;AACpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,eAAe,GAAG,wBAAwB,CAAC;AAChF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAC9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,aAAa,GAA0B;IAClD,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;IACvC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE;IACxC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;CAC5C,CAAC","sourcesContent":["import type { SliderMark } from '@metamask/design-system-shared';\n\n/** Slider geometry and behavior defaults — not typography or spacing tokens. */\nexport const THUMB_SIZE = 32;\nexport const THUMB_TOP_OFFSET = -13;\n/** Negative offset so the thumb center aligns with the track start at 0%. */\nexport const THUMB_LEFT_OFFSET = -16;\nexport const THUMB_BOTTOM_OFFSET = THUMB_TOP_OFFSET + THUMB_SIZE;\nexport const THUMB_TO_LABEL_GAP = 8;\n/** Scale applied to the thumb while the user is dragging. */\nexport const THUMB_GRIP_SCALE = 1.12;\n/** Duration (ms) for thumb grip scale in/out. */\nexport const THUMB_GRIP_ANIMATION_DURATION = 100;\n/** Matches root `py-2` vertical padding on the slider container. */\nexport const SLIDER_VERTICAL_PADDING = 8;\nexport const RANGE_LABEL_TOP =\n  SLIDER_VERTICAL_PADDING + THUMB_BOTTOM_OFFSET + THUMB_TO_LABEL_GAP;\n/** Approximate line height for BodyMd range labels below the track. */\nexport const SLIDER_LABEL_LINE_HEIGHT = 20;\n/** Bottom padding when range labels may render (RANGE_LABEL_TOP + label height). */\nexport const SLIDER_BOTTOM_PADDING = RANGE_LABEL_TOP + SLIDER_LABEL_LINE_HEIGHT;\n/**\n * Default horizontal inset on the root container; equals |THUMB_LEFT_OFFSET| so\n * the thumb can overhang at min/max without clipping.\n */\nexport const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);\n/**\n * Edge marker inset (percent) so dots/labels at 0/100 stay on the visible track.\n * The thumb at 0% sits half its width (THUMB_SIZE / 2) left of the track start;\n * a small inset keeps edge markers from sitting under the thumb center.\n */\nexport const DOT_EDGE_INSET_PERCENT = '2%';\nexport const DOT_EDGE_MAX_PERCENT = '98%';\n\nexport const DEFAULT_MARKS: readonly SliderMark[] = [\n  { step: 0, label: '0%', haptic: false },\n  { step: 25, label: '25%', haptic: true },\n  { step: 50, label: '50%', haptic: true },\n  { step: 75, label: '75%', haptic: true },\n  { step: 100, label: '100%', haptic: false },\n];\n"]}