@cdx-ui/components 0.0.1-beta.114 → 0.0.1-beta.116

package/src/components/Slider/styles.ts

@@ -0,0 +1,147 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const sliderColorOptions = ['action', 'danger', 'warning', 'success', 'info'] as const;
+export type SliderColor = (typeof sliderColorOptions)[number];
+
+export const sliderRootVariants = cva(
+  [
+    'relative w-full touch-none select-none',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'web:outline-none',
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-5 overflow-visible',
+        vertical: 'flex h-48 w-8 items-center justify-center overflow-visible',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const sliderRailVariants = cva(
+  ['relative w-full overflow-hidden rounded-full', TRANSITION_COLORS],
+  {
+    variants: {
+      orientation: {
+        horizontal: 'h-1.5',
+        vertical: 'h-full w-1.5',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export const sliderRailColorVariants = cva([], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-subtle',
+      danger: 'bg-surface-danger-subtle',
+      warning: 'bg-surface-warning-subtle',
+      success: 'bg-surface-success-subtle',
+      info: 'bg-surface-info-subtle',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
+
+export const sliderTrackVariants = cva(['rounded-full transition-none'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+});
+
+export const sliderTrackColorVariants = cva([], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-strong',
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
+
+export const sliderThumbVariants = cva(
+  [
+    'box-border size-5 z-2 overflow-visible rounded-full bg-white border-3 border-solid shadow-md',
+    'web:cursor-grab web:active:cursor-grabbing',
+    'transition-[transform,box-shadow,opacity] duration-150',
+    'data-[dragging=true]:transition-none',
+    Platform.select({
+      default: 'data-[active=true]:scale-105',
+      web: 'data-[hover=true]:scale-110 data-[dragging=true]:scale-110 data-[hover=true]:shadow-lg web:data-[focus-visible=true]:ring-4 web:data-[focus-visible=true]:ring-stroke-focus',
+    }),
+  ],
+  {
+    variants: {
+      color: {
+        action: 'border-surface-action-strong',
+        danger: 'border-surface-danger-strong',
+        warning: 'border-surface-warning-strong',
+        success: 'border-surface-success-strong',
+        info: 'border-surface-info-strong',
+      },
+    },
+    defaultVariants: {
+      color: 'action',
+    },
+  },
+);
+
+export const sliderThumbHaloVariants = cva(['hidden'], {
+  variants: {
+    visible: {
+      true: '',
+      false: '',
+    },
+  },
+  defaultVariants: { visible: false },
+});
+
+export const sliderPopupBaseVariants = cva([
+  'rounded-md bg-white px-2 py-1',
+  'text-content-primary text-xs font-medium shadow-md select-none pointer-events-none',
+]);
+
+export const sliderMarkerVariants = cva(
+  ['rounded-full size-0.5 shrink-0', 'data-[value=0]:hidden data-[value=100]:hidden'],
+  {
+    variants: {
+      filled: {
+        true: 'bg-surface-action-subtle',
+        false: 'bg-content-action',
+      },
+    },
+    defaultVariants: {
+      filled: false,
+    },
+  },
+);
+
+export type SliderVariantProps = VariantProps<typeof sliderRootVariants> &
+  VariantProps<typeof sliderRailVariants> &
+  VariantProps<typeof sliderRailColorVariants> &
+  VariantProps<typeof sliderTrackVariants> &
+  VariantProps<typeof sliderTrackColorVariants> &
+  VariantProps<typeof sliderThumbVariants>;

package/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './ProgressSegmented';
 export * from './Radio';
 export * from './ScopedTheme';
 export * from './Select';
+export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
 export * from './Textarea';