@idealyst/components 1.2.106 → 1.2.108

package/src/Select/Select.web.tsx

@@ -18,7 +18,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   onChange,
   placeholder = 'Select an option',
   disabled = false,
-  error = false,
+  error,
   helperText,
   label,
   type = 'outlined',
@@ -36,6 +36,10 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   accessibilityLabel,
   id,
 }, ref) => {
+  // Derive hasError boolean from error prop
+  const hasError = Boolean(error);
+  // Get error message if error is a string
+  const errorMessage = typeof error === 'string' ? error : undefined;
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -66,7 +70,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
     type,
     size,
     disabled,
-    error,
+    hasError,
     focused: isOpen,
     margin,
     marginVertical,
@@ -182,7 +186,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   // Get dynamic styles - call as functions for theme reactivity
   const containerStyle = (selectStyles.container as any)({});
   const labelStyle = (selectStyles.label as any)({});
-  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, error, focused: isOpen });
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, hasError, focused: isOpen });
   const triggerContentStyle = (selectStyles.triggerContent as any)({});
   const triggerTextStyle = (selectStyles.triggerText as any)({});
   const placeholderStyle = (selectStyles.placeholder as any)({});
@@ -200,7 +204,7 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
   const optionIconStyle = (selectStyles.optionIcon as any)({});
   const optionTextStyle = (selectStyles.optionText as any)({});
   const optionTextDisabledStyle = (selectStyles.optionTextDisabled as any)({});
-  const helperTextStyle = (selectStyles.helperText as any)({ error });
+  const helperTextStyle = (selectStyles.helperText as any)({ hasError });
 
   const containerWebProps = getWebProps([containerStyle, style as any]);
   const triggerWebProps = getWebProps([triggerStyle]);
@@ -336,9 +340,9 @@ const Select = forwardRef<IdealystElement, SelectProps>(({
         </div>
       </PositionedPortal>
 
-      {helperText && (
-        <div {...getWebProps([helperTextStyle])}>
-          {helperText}
+      {(errorMessage || helperText) && (
+        <div {...getWebProps([helperTextStyle])} role={errorMessage ? 'alert' : undefined}>
+          {errorMessage || helperText}
         </div>
       )}
     </div>

package/src/Select/types.ts

@@ -62,9 +62,11 @@ export interface SelectProps extends FormInputStyleProps, FormAccessibilityProps
   disabled?: boolean;
 
   /**
-   * Whether the select shows an error state
+   * Error state or error message. When a string is provided, it displays as error text.
+   * When boolean true, shows error styling without text.
+   * @deprecated Using boolean is deprecated. Prefer passing an error message string.
    */
-  error?: boolean;
+  error?: string | boolean;
 
   /**
    * Helper text to display below the select

package/src/Slider/Slider.native.tsx

@@ -17,6 +17,9 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   max = 100,
   step = 1,
   disabled = false,
+  error,
+  helperText,
+  label,
   showValue = false,
   showMinMax = false,
   marks = [],
@@ -43,6 +46,11 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   accessibilityValueMax,
   accessibilityValueText,
 }, ref) => {
+  // Derive hasError from error prop
+  const hasError = Boolean(error);
+  // Determine if we need a wrapper (when label, error, or helperText is present)
+  const needsWrapper = Boolean(label) || Boolean(error) || Boolean(helperText);
+  const showFooter = Boolean(error) || Boolean(helperText);
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [trackWidthState, setTrackWidthState] = useState(0);
   const trackWidth = useSharedValue(0);
@@ -55,11 +63,18 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   sliderStyles.useVariants({
     size,
     disabled,
+    hasError,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
+  // Wrapper, label, and footer styles
+  const wrapperStyle = sliderStyles.wrapper as any;
+  const labelStyle = sliderStyles.label as any;
+  const footerStyle = sliderStyles.footer as any;
+  const helperTextStyle = sliderStyles.helperText as any;
+
   const clampValue = (val: number) => {
     'worklet';
     const clampedValue = Math.min(Math.max(val, min), max);
@@ -211,6 +226,113 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   const containerStyle = (sliderStyles.container as any);
   const trackStyle = (sliderStyles.track as any);
 
+  // The slider container element
+  const sliderContainer = (
+    <View style={[containerStyle, !needsWrapper && style]} testID={!needsWrapper ? testID : undefined} {...nativeA11yProps}>
+      {showValue && (
+        <View style={sliderStyles.valueLabel as any}>
+          <Text>{value}</Text>
+        </View>
+      )}
+
+      <View style={sliderStyles.sliderWrapper}>
+        <GestureDetector gesture={composedGesture}>
+          <View
+            style={trackStyle}
+            onLayout={(e: LayoutChangeEvent) => {
+              const width = e.nativeEvent.layout.width;
+              trackWidth.value = width;
+              setTrackWidthState(width);
+            }}
+          >
+            {/* Filled track */}
+            <Animated.View
+              style={[(sliderStyles.filledTrack as any), filledTrackAnimatedStyle]}
+            />
+
+            {/* Marks */}
+            {marks.length > 0 && trackWidthState > 0 && (
+              <View style={sliderStyles.marks as any}>
+                {marks.map((mark) => {
+                  const markPercentage = ((mark.value - min) / (max - min)) * 100;
+                  const markPosition = (markPercentage / 100) * trackWidthState;
+                  return (
+                    <View key={mark.value}>
+                      <View
+                        style={[
+                          sliderStyles.mark as any,
+                          { left: markPosition },
+                        ]}
+                      />
+                      {mark.label && (
+                        <View
+                          style={[
+                            sliderStyles.markLabel as any,
+                            { left: markPosition },
+                          ]}
+                        >
+                          <Text typography="caption">{mark.label}</Text>
+                        </View>
+                      )}
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+
+            {/* Thumb */}
+            <Animated.View
+              style={[
+                (sliderStyles.thumb as any),
+                {
+                  // Manual positioning/sizing for native layout
+                  position: 'absolute',
+                  top: '50%',
+                  marginTop: -thumbSize / 2,
+                  width: thumbSize,
+                  height: thumbSize,
+                  borderRadius: thumbSize / 2,
+                },
+                thumbAnimatedStyle,
+              ]}
+            >
+              {renderIcon()}
+            </Animated.View>
+          </View>
+        </GestureDetector>
+      </View>
+
+      {showMinMax && (
+        <View style={sliderStyles.minMaxLabels}>
+          <Text style={sliderStyles.minMaxLabel} typography="caption">{min}</Text>
+          <Text style={sliderStyles.minMaxLabel} typography="caption">{max}</Text>
+        </View>
+      )}
+    </View>
+  );
+
+  // If wrapper needed for label/error/helperText
+  if (needsWrapper) {
+    return (
+      <View ref={ref as any} nativeID={id} style={[wrapperStyle, style]} testID={testID}>
+        {label && (
+          <Text style={labelStyle}>{label}</Text>
+        )}
+
+        {sliderContainer}
+
+        {showFooter && (
+          <View style={footerStyle}>
+            <View style={{ flex: 1 }}>
+              {error && <Text style={helperTextStyle}>{error}</Text>}
+              {!error && helperText && <Text style={helperTextStyle}>{helperText}</Text>}
+            </View>
+          </View>
+        )}
+      </View>
+    );
+  }
+
   return (
     <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {showValue && (

package/src/Slider/Slider.styles.tsx

@@ -16,6 +16,7 @@ export type SliderVariants = {
     size: Size;
     intent: Intent;
     disabled: boolean;
+    hasError?: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
     marginHorizontal?: ViewStyleSize;
@@ -55,17 +56,6 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
     container: {
         gap: 4,
         paddingVertical: 8,
-        variants: {
-            margin: {
-                margin: theme.sizes.$view.padding,
-            },
-            marginVertical: {
-                marginVertical: theme.sizes.$view.padding,
-            },
-            marginHorizontal: {
-                marginHorizontal: theme.sizes.$view.padding,
-            },
-        },
     },
 
     sliderWrapper: {
@@ -266,4 +256,51 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
             whiteSpace: 'nowrap',
         },
     },
+
+    wrapper: {
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    },
+
+    label: {
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+    },
+
+    helperText: {
+        fontSize: 12,
+        variants: {
+            hasError: {
+                true: { color: theme.intents.danger.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    },
+
+    footer: {
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    },
 }));

package/src/Slider/Slider.web.tsx

@@ -19,6 +19,9 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   max = 100,
   step = 1,
   disabled = false,
+  error,
+  helperText,
+  label,
   showValue = false,
   showMinMax = false,
   marks = [],
@@ -45,6 +48,10 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   accessibilityValueMax,
   accessibilityValueText,
 }, ref) => {
+  // Derive hasError from error prop
+  const hasError = Boolean(error);
+  // Determine if we need a wrapper (when label, error, or helperText is present)
+  const needsWrapper = Boolean(label) || Boolean(error) || Boolean(helperText);
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
   const trackRef = useRef<HTMLDivElement>(null);
@@ -58,13 +65,14 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
     size,
     intent,
     disabled,
+    hasError,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([sliderStyles.container as any, style as any]);
-  const wrapperProps = getWebProps([sliderStyles.sliderWrapper as any]);
+  const containerProps = getWebProps([sliderStyles.container as any, !needsWrapper && style as any].filter(Boolean));
+  const sliderWrapperProps = getWebProps([sliderStyles.sliderWrapper as any]);
   const trackProps = getWebProps([sliderStyles.track as any]);
   const thumbIconProps = getWebProps([sliderStyles.thumbIcon as any]);
   const valueLabelProps = getWebProps([sliderStyles.valueLabel as any]);
@@ -72,6 +80,14 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
   const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel as any]);
   const marksProps = getWebProps([sliderStyles.marks as any]);
 
+  // Wrapper, label, and footer styles
+  const outerWrapperProps = getWebProps([sliderStyles.wrapper as any, style as any]);
+  const labelProps = getWebProps([sliderStyles.label as any]);
+  const footerProps = getWebProps([sliderStyles.footer as any]);
+  const helperTextProps = getWebProps([sliderStyles.helperText as any]);
+
+  const showFooter = Boolean(error) || Boolean(helperText);
+
   const clampValue = useCallback((val: number) => {
     const clampedValue = Math.min(Math.max(val, min), max);
     const steppedValue = Math.round(clampedValue / step) * step;
@@ -252,15 +268,16 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
 
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
-  return (
-    <div {...containerProps} ref={mergedRef} id={sliderId} data-testid={testID}>
+  // The slider container element
+  const sliderContainer = (
+    <div {...containerProps} ref={!needsWrapper ? mergedRef : undefined} id={!needsWrapper ? sliderId : undefined} data-testid={!needsWrapper ? testID : undefined}>
       {showValue && (
         <div {...valueLabelProps}>
           {value}
         </div>
       )}
 
-      <div {...wrapperProps}>
+      <div {...sliderWrapperProps}>
         <div
           {...trackProps}
           {...ariaProps}
@@ -311,6 +328,38 @@ const Slider = forwardRef<IdealystElement, SliderProps>(({
       )}
     </div>
   );
+
+  // If wrapper needed for label/error/helperText
+  if (needsWrapper) {
+    return (
+      <div {...outerWrapperProps} id={sliderId} data-testid={testID}>
+        {label && (
+          <label {...labelProps}>{label}</label>
+        )}
+
+        {sliderContainer}
+
+        {showFooter && (
+          <div {...footerProps}>
+            <div style={{ flex: 1 }}>
+              {error && (
+                <span {...helperTextProps} role="alert">
+                  {error}
+                </span>
+              )}
+              {!error && helperText && (
+                <span {...helperTextProps}>
+                  {helperText}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return sliderContainer;
 });
 
 Slider.displayName = 'Slider';

package/src/Slider/types.ts

@@ -22,6 +22,21 @@ export interface SliderProps extends FormInputStyleProps, RangeAccessibilityProp
   max?: number;
   step?: number;
   disabled?: boolean;
+
+  /**
+   * Error message to display below the slider. When set, shows error styling.
+   */
+  error?: string;
+
+  /**
+   * Helper text to display below the slider. Hidden when error is set.
+   */
+  helperText?: string;
+
+  /**
+   * Label text to display above the slider
+   */
+  label?: string;
   showValue?: boolean;
   showMinMax?: boolean;
   marks?: SliderMark[];

package/src/Switch/Switch.native.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useMemo } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { switchStyles } from './Switch.styles';
 import Text from '../Text';
@@ -11,6 +11,8 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   checked = false,
   onChange,
   disabled = false,
+  error,
+  helperText,
   label,
   labelPosition = 'right',
   intent = 'primary',
@@ -32,10 +34,17 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
   accessibilityDescribedBy,
   accessibilityChecked,
 }, ref) => {
+  // Derive hasError from error prop
+  const hasError = Boolean(error);
+  // Determine if we need a wrapper (when error or helperText is present)
+  const needsWrapper = Boolean(error) || Boolean(helperText);
+  const showFooter = Boolean(error) || Boolean(helperText);
+
   switchStyles.useVariants({
     size,
     disabled,
     checked,
+    hasError,
     intent,
     position: labelPosition,
     margin,
@@ -43,6 +52,10 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     marginHorizontal,
   });
 
+  // Wrapper and helperText styles
+  const wrapperStyle = (switchStyles.wrapper as any)({});
+  const helperTextStyle = (switchStyles.helperText as any)({ hasError });
+
   const progress = useSharedValue(checked ? 1 : 0);
 
   React.useEffect(() => {
@@ -123,12 +136,12 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
 
   const switchElement = (
     <Pressable
-      ref={!label ? ref : undefined}
-      nativeID={!label ? id : undefined}
+      ref={!label && !needsWrapper ? ref : undefined}
+      nativeID={!label && !needsWrapper ? id : undefined}
       onPress={handlePress}
       disabled={disabled}
       style={switchStyles.switchContainer as any}
-      testID={testID}
+      testID={!label && !needsWrapper ? testID : undefined}
       {...nativeA11yProps}
     >
       <Animated.View style={switchStyles.switchTrack as any}>
@@ -154,27 +167,42 @@ const Switch = forwardRef<IdealystElement, SwitchProps>(({
     </Pressable>
   );
 
-  if (label) {
+  // The switch + label row
+  const switchWithLabel = label ? (
+    <Pressable
+      ref={!needsWrapper ? ref as any : undefined}
+      nativeID={!needsWrapper ? id : undefined}
+      onPress={handlePress}
+      disabled={disabled}
+      style={[switchStyles.container as any, !needsWrapper && style]}
+      testID={!needsWrapper ? testID : undefined}
+    >
+      {labelPosition === 'left' && (
+        <Text style={switchStyles.label as any}>{label}</Text>
+      )}
+      {switchElement}
+      {labelPosition === 'right' && (
+        <Text style={switchStyles.label as any}>{label}</Text>
+      )}
+    </Pressable>
+  ) : switchElement;
+
+  // If wrapper needed for error/helperText
+  if (needsWrapper) {
     return (
-      <Pressable
-        ref={ref as any}
-        nativeID={id}
-        onPress={handlePress}
-        disabled={disabled}
-        style={[switchStyles.container as any, style]}
-      >
-        {labelPosition === 'left' && (
-          <Text style={switchStyles.label as any}>{label}</Text>
-        )}
-        {switchElement}
-        {labelPosition === 'right' && (
-          <Text style={switchStyles.label as any}>{label}</Text>
+      <View ref={ref as any} nativeID={id} style={[wrapperStyle, style]} testID={testID}>
+        {switchWithLabel}
+        {showFooter && (
+          <View style={{ flex: 1 }}>
+            {error && <Text style={helperTextStyle}>{error}</Text>}
+            {!error && helperText && <Text style={helperTextStyle}>{helperText}</Text>}
+          </View>
         )}
-      </Pressable>
+      </View>
     );
   }
 
-  return switchElement;
+  return switchWithLabel;
 });
 
 Switch.displayName = 'Switch';

package/src/Switch/Switch.styles.tsx

@@ -19,6 +19,7 @@ export type SwitchDynamicProps = {
     intent?: Intent;
     checked?: boolean;
     disabled?: boolean;
+    hasError?: boolean;
     labelPosition?: LabelPosition;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
@@ -166,4 +167,31 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
             },
         },
     }),
+
+    wrapper: (_props: SwitchDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
+
+    helperText: (_props: SwitchDynamicProps) => ({
+        fontSize: 12,
+        variants: {
+            hasError: {
+                true: { color: theme.intents.danger.primary },
+                false: { color: theme.colors.text.secondary },
+            },
+        },
+    }),
 }));