npm - @metamask/design-system-react-native - Versions diffs - 0.35.0 → 0.36.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/components/ListItem/ListItem.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"version":3,"file":"ListItem.cjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAIwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAyC;AAOzC,0CAA6B;AAC7B,gDAAmC;AACnC,kDAAqC;AAI9B,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,aAAa,GAAG,KAAK,EACrB,WAAW,EACX,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,qCAAc,CAAC,QAAQ,EACjC,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;IACzB,MAAM,WAAW,GAAG,OAAO,KAAK,qCAAc,CAAC,SAAS,CAAC;IACzD,IAAI,iBAAiB,GAAG,6BAA6B,CAAC;IACtD,IAAI,OAAO,KAAK,qCAAc,CAAC,OAAO,EAAE;QACtC,iBAAiB,GAAG,6BAA6B,CAAC;KACnD;SAAM,IAAI,WAAW,EAAE;QACtB,iBAAiB,GAAG,4BAA4B,CAAC;KAClD;IACD,MAAM,mBAAmB,GAAG,WAAW;QACrC,CAAC,CAAC,oCAAa,CAAC,KAAK;QACrB,CAAC,CAAC,oCAAa,CAAC,MAAM,CAAC;IAEzB,MAAM,iBAAiB,GAAG,IAAA,uCAAgB,EACxC,kBAAkB,EAClB,iBAAiB,CAClB,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,uCAAgB,EAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,KAAK;QACxB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC;QACpC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAE9B,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GACoB,EAAwB,EAAE;QACrD,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,OAAO,IAAI,YAAY,CAAC,CAAC;QAErE,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;IAE3E,MAAM,OAAO,GAAG,CACd,CAAC,iBAAO,CACN,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,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,mBAAmB,CAAC,CAChC,GAAG,CAAC,CAAC,YAAY,CAAC,CAElB;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;AA3HW,QAAA,QAAQ,YA2HnB;AAEF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.mjs","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,~~EAAE~~,~~wBAAwB~~,~~EAAE~~,uCAAuC;~~AAC1E~~,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,SAAS,EAAE,qBAAqB;AAOzC,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,OAAO,EAAE,6BAAmB;~~AACrC~~,~~OAAO,EAAE,sBAAsB,EAAE,yCAAqC;AAItE,~~MAAM,CAAC,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,WAAW,EAAE,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,sBAAsB,CACpB,iBAAiB,IAAI,wBAAwB,CAAC,MAAM,CACrD,CAAC;IAEJ,MAAM,~~OAAO,GAAG,CACd,CAAC,OAAO,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,MAAM,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,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,OAAO,CACL,CAAC,SAAS,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,SAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,KAAK,CAAC,CAClC;MAAA,CAAC,WAAW,CACZ;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -38,9 +38,20 @@ 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, rangeLabelSteps = Slider_constants_1.DEFAULT_RANGE_LABEL_STEPS, showRangeLabels = false, showRangeDots = false, onGrip, onTick, tickThresholds = Slider_constants_1.DEFAULT_TICK_THRESHOLDS, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, trackInset = Slider_constants_1.SLIDER_TRACK_INSET, twClassName, style, ...props }) => {
+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 formatLabel = formatStepLabel ?? Slider_utilities_1.defaultFormatStepLabel;
+    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,
@@ -50,11 +61,13 @@ const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValu
         onValueChange,
         onDragEnd,
         onGrip,
-        onTick,
-        tickThresholds,
+        onMark,
+        marks,
+        fillColorStops: themedColors.fillColorStops,
+        thumbColorStops: themedColors.thumbColorStops,
+        hasThemedColors: themedColors.hasThemedColors,
         mapValueToTrackPercent,
         mapTrackPercentToValue,
-        stepToValue: stepToValueProp,
     });
     const getAccessibilityText = (0, react_1.useCallback)(() => {
         const trackPercent = Math.round((0, Slider_utilities_1.getTrackPercentFromValue)(value, minimumValue, maximumValue, mapValueToTrackPercent));
@@ -96,17 +109,17 @@ const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValu
         <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 bg-icon-alternative'),
+            tw.style('absolute left-0 top-0 h-2 rounded-full', !themedColors.hasThemedColors && 'bg-icon-alternative'),
             progressStyle,
         ]}/>
           {showRangeDots &&
-            rangeLabelSteps.map((rangeStep) => (<Box_1.Box key={`dot-${rangeStep}`} pointerEvents="none" twClassName="absolute top-0.5 h-1 w-1 rounded-full bg-text-muted" style={{
-                    left: (0, Slider_utilities_1.getDotLeftPercent)(rangeStep),
+            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 bg-icon-default'),
+            tw.style('absolute rounded-full', !themedColors.hasThemedColors && 'bg-icon-default'),
             {
                 width: Slider_constants_1.THUMB_SIZE,
                 height: Slider_constants_1.THUMB_SIZE,
@@ -120,16 +133,16 @@ const Slider = ({ value, onValueChange, onDragEnd, minimumValue = 0, maximumValu
       </react_native_gesture_handler_1.GestureDetector>
       {showRangeLabels &&
-            rangeLabelSteps.map((rangeStep) => (<react_native_1.Pressable key={`label-${rangeStep}`} style={[
+            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)(rangeStep),
+                        left: (0, Slider_utilities_1.getDotLeftPercent)(mark.step),
                         transform: [{ translateX: '-50%' }],
                     },
-                ]} onPress={() => handlePressStep(rangeStep)} disabled={isDisabled} accessibilityRole="button">
+                ]} 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}>
-              {formatLabel(rangeStep)}
+              {mark.label}
             </Text_1.Text>
           </react_native_1.Pressable>))}
     </Box_1.Box>);

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

	@@ -1 +1 @@
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} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } 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_RANGE_LABEL_STEPS,\n DEFAULT_TICK_THRESHOLDS,\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 clampValueToRange,\n defaultFormatStepLabel,\n getDotLeftPercent,\n getTrackPercentFromValue,\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 rangeLabelSteps = DEFAULT_RANGE_LABEL_STEPS,\n showRangeLabels = false,\n showRangeDots = false,\n onGrip,\n onTick,\n tickThresholds = DEFAULT_TICK_THRESHOLDS,\n mapValueToTrackPercent,\n mapTrackPercentToValue,\n formatStepLabel,\n stepToValue: stepToValueProp,\n trackInset = SLIDER_TRACK_INSET,\n twClassName,\n style,\n ...props\n}: SliderProps) => {\n const tw = useTailwind();\n\n const formatLabel = formatStepLabel ?? defaultFormatStepLabel;\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 onTick,\n tickThresholds,\n mapValueToTrackPercent,\n mapTrackPercentToValue,\n stepToValue: stepToValueProp,\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 bg-icon-alternative',\n ),\n progressStyle,\n ]}\n />\n {showRangeDots &&\n rangeLabelSteps.map((rangeStep) => (\n <Box\n key={`dot-${rangeStep}`}\n pointerEvents=\"none\"\n twClassName=\"absolute top-0.5 h-1 w-1 rounded-full bg-text-muted\"\n style={{\n left: getDotLeftPercent(rangeStep) as ViewStyle['left'],\n transform: [{ translateX: -2 }],\n zIndex: -2,\n }}\n />\n ))}\n <Animated.View\n style={[\n tw.style('absolute rounded-full bg-icon-default'),\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 rangeLabelSteps.map((rangeStep) => (\n <Pressable\n key={`label-${rangeStep}`}\n style={[\n tw.style('absolute items-center'),\n {\n top: RANGE_LABEL_TOP,\n left: getDotLeftPercent(rangeStep) as ViewStyle['left'],\n transform: [{ translateX: '-50%' }],\n },\n ]}\n onPress={() => handlePressStep(rangeStep)}\n disabled={isDisabled}\n accessibilityRole=\"button\"\n >\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextAlternative}\n >\n {formatLabel(rangeStep)}\n </Text>\n </Pressable>\n ))}\n </Box>\n );\n};\n\nSlider.displayName = 'Slider';\n"]}
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 CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_TICK_THRESHOLDS = exports.DEFAULT_RANGE_LABEL_STEPS = 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;
+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;
@@ -31,6 +31,11 @@ exports.SLIDER_TRACK_INSET = Math.abs(exports.THUMB_LEFT_OFFSET);
  */
 exports.DOT_EDGE_INSET_PERCENT = '2%';
 exports.DOT_EDGE_MAX_PERCENT = '98%';
-exports.DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100];
-exports.DEFAULT_TICK_THRESHOLDS = [25, 50, 75];
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.constants.cjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":";;;~~AAAA~~,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,~~yBAAyB~~,~~GAAG~~,~~CAAC~~,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,~~GAAG~~,~~CAAU~~,~~CAAC~~;~~AAC1D~~,~~QAAA~~,~~uBAAuB~~,~~GAAG~~,~~CAAC~~,EAAE,EAAE,EAAE,EAAE,EAAE,~~CAAU~~,CAAC","sourcesContent":["/** 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_RANGE_LABEL_STEPS~~ = [0, 25, 50, 75, ~~100]~~ as ~~const;\nexport~~ ~~const~~ ~~DEFAULT_TICK_THRESHOLDS~~ = ~~[25~~, 50, ~~75]~~ as ~~const~~;\n"]}
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 CHANGED Viewed

@@ -1,3 +1,4 @@
+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;
@@ -28,6 +29,5 @@ export declare const SLIDER_TRACK_INSET: number;
  */
 export declare const DOT_EDGE_INSET_PERCENT = "2%";
 export declare const DOT_EDGE_MAX_PERCENT = "98%";
-export declare const DEFAULT_RANGE_LABEL_STEPS: readonly [0, 25, 50, 75, 100];
-export declare const DEFAULT_TICK_THRESHOLDS: readonly [25, 50, 75];
+export declare const DEFAULT_MARKS: readonly SliderMark[];
 //# sourceMappingURL=Slider.constants.d.cts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,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,~~yBAAyB,+BAAgC~~,~~CAAC;AACvE~~,~~eAAO~~,~~MAAM~~,~~uBAAuB~~,~~uBAAwB,~~CAAC"}
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 CHANGED Viewed

@@ -1,3 +1,4 @@
+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;
@@ -28,6 +29,5 @@ export declare const SLIDER_TRACK_INSET: number;
  */
 export declare const DOT_EDGE_INSET_PERCENT = "2%";
 export declare const DOT_EDGE_MAX_PERCENT = "98%";
-export declare const DEFAULT_RANGE_LABEL_STEPS: readonly [0, 25, 50, 75, 100];
-export declare const DEFAULT_TICK_THRESHOLDS: readonly [25, 50, 75];
+export declare const DEFAULT_MARKS: readonly SliderMark[];
 //# sourceMappingURL=Slider.constants.d.mts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"AAAA,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,~~yBAAyB,+BAAgC~~,~~CAAC;AACvE~~,~~eAAO~~,~~MAAM~~,~~uBAAuB~~,~~uBAAwB,~~CAAC"}
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 CHANGED Viewed

@@ -28,6 +28,11 @@ export const SLIDER_TRACK_INSET = Math.abs(THUMB_LEFT_OFFSET);
  */
 export const DOT_EDGE_INSET_PERCENT = '2%';
 export const DOT_EDGE_MAX_PERCENT = '98%';
-export const DEFAULT_RANGE_LABEL_STEPS = [0, 25, 50, 75, 100];
-export const DEFAULT_TICK_THRESHOLDS = [25, 50, 75];
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.constants.mjs","sourceRoot":"","sources":["../../../src/components/Slider/Slider.constants.ts"],"names":[],"mappings":"~~AAAA~~,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,~~yBAAyB~~,~~GAAG~~,~~CAAC~~,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,~~GAAG~~,~~CAAU~~,~~CAAC~~;~~AACvE~~,MAAM,~~CAAC~~,MAAM,~~uBAAuB~~,~~GAAG~~,~~CAAC~~,EAAE,EAAE,EAAE,EAAE,EAAE,~~CAAU~~,CAAC","sourcesContent":["/** 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_RANGE_LABEL_STEPS~~ = [0, 25, 50, 75, ~~100]~~ as ~~const;\nexport~~ ~~const~~ ~~DEFAULT_TICK_THRESHOLDS~~ = ~~[25~~, 50, ~~75]~~ as ~~const~~;\n"]}
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"]}

package/dist/components/Slider/Slider.d.cts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react";
 import type { SliderProps } from "./Slider.types.cjs";
 export declare const Slider: {
-    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, rangeLabelSteps, showRangeLabels, showRangeDots, onGrip, onTick, tickThresholds, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
+    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, marks, showRangeLabels, showRangeDots, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Slider.d.cts.map

package/dist/components/Slider/Slider.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,~~KAAsB~~,cAAc;~~AAoB3C~~,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;~~AASlD~~,eAAO,MAAM,MAAM;~~0TAuBhB~~,WAAW;;~~CAsKb~~,CAAC"}
1	+ {"version":3,"file":"Slider.d.cts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+B,cAAc;AAmBpD,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAUlD,eAAO,MAAM,MAAM;iPAoBhB,WAAW;;CAwMb,CAAC"}

package/dist/components/Slider/Slider.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react";
 import type { SliderProps } from "./Slider.types.mjs";
 export declare const Slider: {
-    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, rangeLabelSteps, showRangeLabels, showRangeDots, onGrip, onTick, tickThresholds, mapValueToTrackPercent, mapTrackPercentToValue, formatStepLabel, stepToValue: stepToValueProp, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
+    ({ value, onValueChange, onDragEnd, minimumValue, maximumValue, step, isDisabled, testID, marks, showRangeLabels, showRangeDots, onGrip, onMark, mapValueToTrackPercent, mapTrackPercentToValue, trackInset, twClassName, style, ...props }: SliderProps): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Slider.d.mts.map

package/dist/components/Slider/Slider.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,~~KAAsB~~,cAAc;~~AAoB3C~~,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;~~AASlD~~,eAAO,MAAM,MAAM;~~0TAuBhB~~,WAAW;;~~CAsKb~~,CAAC"}
1	+ {"version":3,"file":"Slider.d.mts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA+B,cAAc;AAmBpD,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAUlD,eAAO,MAAM,MAAM;iPAoBhB,WAAW;;CAwMb,CAAC"}