jfs-components 0.1.19 → 0.1.23

package/src/components/ListItem/ListItem.tsx

@@ -107,6 +107,17 @@ function resolveListItemTokens(modes: Modes): ListItemTokens {
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
   const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
 
+  // Container surface — driven by the `List Item Style` collection
+  // (Default | Boxed | Minimal) plus `ListItem State`, `Selectable`,
+  // `Page type` and `Color Mode`. In the default style these all resolve to a
+  // transparent background / no border / 0 radius, so existing usages are
+  // visually unchanged; the "Boxed" style paints a filled, rounded, bordered
+  // surface.
+  const backgroundColor = getVariableByName('listItem/background/color', resolvedModes)
+  const borderColor = getVariableByName('listItem/border/color', resolvedModes)
+  const borderWidth = (getVariableByName('listItem/borderWidth', resolvedModes) ?? 0) as number
+  const borderRadius = (getVariableByName('listItem/radius', resolvedModes) ?? 0) as number
+
   const titleColor = getVariableByName('listItem/title/color', textModes)
   const titleFontSize = getVariableByName('listItem/title/fontSize', textModes)
   const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes)
@@ -129,6 +140,10 @@ function resolveListItemTokens(modes: Modes): ListItemTokens {
       paddingBottom: paddingBottom as number,
       paddingLeft: paddingLeft as number,
       paddingRight: paddingRight as number,
+      backgroundColor: backgroundColor as string,
+      borderColor: borderColor as string,
+      borderWidth,
+      borderRadius,
     },
     horizontalLayoutStyle: {
       flexDirection: 'row',

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as FullscreenModal, type FullscreenModalProps } from './Fullscr
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as ContentSheet, type ContentSheetProps } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar'
 export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted'
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
@@ -45,6 +46,7 @@ export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarIt
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart'
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
+export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as Icon, type IconProps } from './Icon/Icon';
@@ -52,6 +54,7 @@ export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
+export { default as Link, type LinkProps } from './Link/Link';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';