react-native-mantine 0.12.0 → 0.14.0

package/lib/typescript/commonjs/src/components/Slider/index.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize } from '../../theme/types';
-export interface SliderProps extends DefaultProps {
-    /** Slider value (controlled) */
-    value?: number;
-    /** Default value (uncontrolled) */
-    defaultValue?: number;
-    /** Called when value changes */
-    onChange?: (value: number) => void;
-    /** Called when user stops dragging */
-    onChangeEnd?: (value: number) => void;
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-    /** Step interval */
-    step?: number;
-    /** Slider size */
-    size?: MantineSize;
-    /** Slider color */
-    color?: MantineColor;
-    /** Key of theme.radius or any valid value to set border-radius */
-    radius?: MantineNumberSize;
-    /** Display label */
-    label?: ((value: number) => React.ReactNode) | React.ReactNode;
-    /** Display marks */
-    marks?: {
-        value: number;
-        label?: React.ReactNode;
-    }[];
-    /** Disabled state */
-    disabled?: boolean;
-    /** Show label on hover */
-    showLabelOnHover?: boolean;
-    /** Thumb children, displays above thumb */
-    thumbChildren?: React.ReactNode;
-    /** Hides thumb */
-    thumbWithoutBorder?: boolean;
-    /** Additional styles */
-    style?: any;
-}
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<any>>;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/src/components/Slider/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKpG,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,kEAAkE;IAClE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,oBAAoB;IACpB,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAE/D,oBAAoB;IACpB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IAErD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,wBAAwB;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAmHD,eAAO,MAAM,MAAM,yEAkKjB,CAAC"}

package/lib/typescript/module/src/components/Slider/index.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize } from '../../theme/types';
-export interface SliderProps extends DefaultProps {
-    /** Slider value (controlled) */
-    value?: number;
-    /** Default value (uncontrolled) */
-    defaultValue?: number;
-    /** Called when value changes */
-    onChange?: (value: number) => void;
-    /** Called when user stops dragging */
-    onChangeEnd?: (value: number) => void;
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-    /** Step interval */
-    step?: number;
-    /** Slider size */
-    size?: MantineSize;
-    /** Slider color */
-    color?: MantineColor;
-    /** Key of theme.radius or any valid value to set border-radius */
-    radius?: MantineNumberSize;
-    /** Display label */
-    label?: ((value: number) => React.ReactNode) | React.ReactNode;
-    /** Display marks */
-    marks?: {
-        value: number;
-        label?: React.ReactNode;
-    }[];
-    /** Disabled state */
-    disabled?: boolean;
-    /** Show label on hover */
-    showLabelOnHover?: boolean;
-    /** Thumb children, displays above thumb */
-    thumbChildren?: React.ReactNode;
-    /** Hides thumb */
-    thumbWithoutBorder?: boolean;
-    /** Additional styles */
-    style?: any;
-}
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<any>>;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/Slider/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKpG,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,kEAAkE;IAClE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,oBAAoB;IACpB,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAE/D,oBAAoB;IACpB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IAErD,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,wBAAwB;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAmHD,eAAO,MAAM,MAAM,yEAkKjB,CAAC"}

package/src/components/Slider/index.tsx

@@ -1,349 +0,0 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import {
-  View,
-  PanResponder,
-  Animated,
-} from 'react-native';
-import type {
-  LayoutChangeEvent,
-  GestureResponderEvent,
-  PanResponderGestureState,
-} from 'react-native';
-import { BoxView } from '../BoxView';
-import { Text } from '../Text';
-import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize } from '../../theme/types';
-import { useComponentDefaultProps } from '../../theme/theme-provider';
-import { createStyles } from '../../theme';
-import { rem } from '../../theme/utils/rem';
-
-export interface SliderProps extends DefaultProps {
-  /** Slider value (controlled) */
-  value?: number;
-
-  /** Default value (uncontrolled) */
-  defaultValue?: number;
-
-  /** Called when value changes */
-  onChange?: (value: number) => void;
-
-  /** Called when user stops dragging */
-  onChangeEnd?: (value: number) => void;
-
-  /** Minimum value */
-  min?: number;
-
-  /** Maximum value */
-  max?: number;
-
-  /** Step interval */
-  step?: number;
-
-  /** Slider size */
-  size?: MantineSize;
-
-  /** Slider color */
-  color?: MantineColor;
-
-  /** Key of theme.radius or any valid value to set border-radius */
-  radius?: MantineNumberSize;
-
-  /** Display label */
-  label?: ((value: number) => React.ReactNode) | React.ReactNode;
-
-  /** Display marks */
-  marks?: { value: number; label?: React.ReactNode }[];
-
-  /** Disabled state */
-  disabled?: boolean;
-
-  /** Show label on hover */
-  showLabelOnHover?: boolean;
-
-  /** Thumb children, displays above thumb */
-  thumbChildren?: React.ReactNode;
-
-  /** Hides thumb */
-  thumbWithoutBorder?: boolean;
-
-  /** Additional styles */
-  style?: any;
-}
-
-const sizes = {
-  xs: { height: rem(4), thumb: rem(12) },
-  sm: { height: rem(6), thumb: rem(16) },
-  md: { height: rem(8), thumb: rem(20) },
-  lg: { height: rem(10), thumb: rem(24) },
-  xl: { height: rem(12), thumb: rem(28) },
-};
-
-const useStyles = createStyles(
-  (
-    theme,
-    {
-      color,
-      radius,
-      disabled,
-    }: {
-      color: MantineColor;
-      radius: MantineNumberSize;
-      disabled: boolean;
-    },
-    { size }
-  ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
-    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
-
-    return {
-      root: {
-        position: 'relative',
-        width: '100%',
-        paddingVertical: rem(10),
-        opacity: disabled ? 0.5 : 1,
-      },
-      track: {
-        position: 'relative',
-        height: sizeStyles.height,
-        backgroundColor:
-          theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[2],
-        borderRadius: theme.fn.radius(radius),
-        overflow: 'hidden',
-      },
-      bar: {
-        position: 'absolute',
-        height: '100%',
-        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
-        borderRadius: theme.fn.radius(radius),
-      },
-      thumb: {
-        position: 'absolute',
-        width: sizeStyles.thumb,
-        height: sizeStyles.thumb,
-        borderRadius: sizeStyles.thumb,
-        backgroundColor: theme.white,
-        borderWidth: rem(3),
-        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
-        top: -(sizeStyles.thumb / 2 - sizeStyles.height / 2),
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 2,
-      },
-      label: {
-        position: 'absolute',
-        top: rem(-32),
-        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
-        paddingHorizontal: theme.spacing.xs,
-        paddingVertical: rem(4),
-        borderRadius: theme.fn.radius('sm'),
-        minWidth: rem(28),
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      labelText: {
-        color: theme.white,
-        fontSize: theme.fontSizes.xs as number,
-        fontWeight: '600',
-      },
-      marks: {
-        position: 'absolute',
-        width: '100%',
-        top: sizeStyles.height,
-        flexDirection: 'row',
-      },
-      mark: {
-        position: 'absolute',
-        width: rem(2),
-        height: rem(6),
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
-        borderRadius: rem(1),
-      },
-      markLabel: {
-        position: 'absolute',
-        top: rem(10),
-        fontSize: theme.fontSizes.xs as number,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
-        transform: [{ translateX: -10 }],
-      },
-    };
-  }
-) as any;
-
-const defaultProps: Partial<SliderProps> = {
-  min: 0,
-  max: 100,
-  step: 1,
-  size: 'md',
-  color: 'blue',
-  radius: 'xl',
-  disabled: false,
-  showLabelOnHover: true,
-  thumbWithoutBorder: false,
-};
-
-export const Slider = forwardRef<any, SliderProps>((props, ref) => {
-  const {
-    value: controlledValue,
-    defaultValue,
-    onChange,
-    onChangeEnd,
-    min,
-    max,
-    step,
-    size,
-    color,
-    radius,
-    label,
-    marks,
-    disabled,
-    showLabelOnHover,
-    thumbChildren,
-    thumbWithoutBorder,
-    style,
-    ...others
-  } = useComponentDefaultProps('Slider', defaultProps, props);
-
-  const { styles, sx } = useStyles(
-    { color, radius, disabled },
-    { name: 'Slider', size }
-  ) as any;
-
-  const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
-
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? min ?? 0);
-  const [trackWidth, setTrackWidth] = useState(0);
-  const [showLabel, setShowLabel] = useState(false);
-
-  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
-
-  const scale = useRef(new Animated.Value(1)).current;
-
-  const clampValue = useCallback(
-    (val: number) => {
-      const clamped = Math.max(min!, Math.min(max!, val));
-      const stepped = Math.round(clamped / step!) * step!;
-      return stepped;
-    },
-    [min, max, step]
-  );
-
-  const updateValue = useCallback(
-    (newValue: number) => {
-      const clampedValue = clampValue(newValue);
-      if (controlledValue === undefined) {
-        setUncontrolledValue(clampedValue);
-      }
-      onChange?.(clampedValue);
-    },
-    [clampValue, controlledValue, onChange]
-  );
-
-  const getValueFromPosition = useCallback(
-    (posX: number) => {
-      const percentage = posX / trackWidth;
-      return min! + percentage * (max! - min!);
-    },
-    [trackWidth, min, max]
-  );
-
-  const trackLayoutRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled!,
-      onMoveShouldSetPanResponder: () => !disabled!,
-      onPanResponderGrant: (evt: GestureResponderEvent) => {
-        setShowLabel(true);
-        Animated.spring(scale, {
-          toValue: 1.2,
-          useNativeDriver: true,
-        }).start();
-
-        // Handle tap to move slider
-        const locationX = evt.nativeEvent.locationX;
-        const newValue = getValueFromPosition(locationX);
-        updateValue(newValue);
-      },
-      onPanResponderMove: (_evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-        // Calculate position relative to track start
-        const relativeX = gestureState.moveX - trackLayoutRef.current.x;
-        const newValue = getValueFromPosition(relativeX);
-        updateValue(newValue);
-      },
-      onPanResponderRelease: () => {
-        setShowLabel(false);
-        Animated.spring(scale, {
-          toValue: 1,
-          useNativeDriver: true,
-        }).start();
-        onChangeEnd?.(value);
-      },
-    })
-  ).current;
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const { x, y, width, height } = event.nativeEvent.layout;
-    setTrackWidth(width);
-    trackLayoutRef.current = { x, y, width, height };
-  };
-
-  const percentage = ((value - min!) / (max! - min!)) * 100;
-  const thumbPosition = (trackWidth * percentage) / 100;
-
-  const renderLabel = () => {
-    if (!showLabel && !showLabelOnHover) return null;
-    if (!showLabel) return null;
-
-    const labelContent = typeof label === 'function' ? label(value) : label || value;
-
-    return (
-      <BoxView style={[styles.label, { left: -(rem(28) / 2) }]}>
-        <Text style={styles.labelText}>{labelContent}</Text>
-      </BoxView>
-    );
-  };
-
-  return (
-    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
-      <View style={styles.track} onLayout={handleLayout} {...panResponder.panHandlers}>
-        <View style={[styles.bar, { width: `${percentage}%` }]} />
-
-        {trackWidth > 0 && (
-          <Animated.View
-            style={[
-              styles.thumb,
-              {
-                left: thumbPosition - (sizeStyles.thumb / 2),
-                transform: [{ scale }],
-              },
-            ]}
-          >
-            {renderLabel()}
-            {thumbChildren}
-          </Animated.View>
-        )}
-      </View>
-
-      {marks && marks.length > 0 && (
-        <View style={styles.marks}>
-          {marks.map((mark, index) => {
-            const markPercentage = ((mark.value - min!) / (max! - min!)) * 100;
-            const markPosition = (trackWidth * markPercentage) / 100;
-
-            return (
-              <View key={index}>
-                <View style={[styles.mark, { left: markPosition }]} />
-                {mark.label && (
-                  <Text style={[styles.markLabel, { left: markPosition }]}>{mark.label}</Text>
-                )}
-              </View>
-            );
-          })}
-        </View>
-      )}
-    </BoxView>
-  );
-});
-
-Slider.displayName = 'Slider';