sdaia-ui 1.0.1

package/src/components/SlideoutMenuFooter/SlideoutMenuFooter.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import type {
+  SlideoutMenuFooterProps,
+  SlideoutMenuFooterAction,
+} from './SlideoutMenuFooter.types';
+import {
+  ROOT,
+  PLACEMENT_ROOT_CLASSES,
+  ACTIONS_CLASSES,
+} from './SlideoutMenuFooter.variants';
+
+/* ── Helpers ─────────────────────────────────────────────────── */
+
+function ActionButton({
+  action,
+  defaultVariant,
+}: {
+  action: SlideoutMenuFooterAction;
+  defaultVariant: 'neutral' | 'secondary-outline';
+}) {
+  const {
+    label,
+    children: childrenProp,
+    variant: variantOverride,
+    ...btnRest
+  } = action;
+
+  return (
+    <Button
+      variant={variantOverride ?? defaultVariant}
+      size="md"
+      {...btnRest}
+    >
+      {childrenProp ?? label ?? 'Button'}
+    </Button>
+  );
+}
+
+/* ── Component ───────────────────────────────────────────────── */
+
+/**
+ * SlideoutMenuFooter — footer row for a slideout panel / drawer.
+ *
+ * Supports four action placements (hug-start / hug-end / fill / stack) and
+ * composes the shared `Button` component for primary / secondary / tertiary
+ * actions. RTL-aware via ambient `dir` — flex order mirrors automatically.
+ *
+ * - Primary button → `neutral` variant (black / dark bg).
+ * - Secondary / tertiary → `secondary-outline` variant.
+ */
+export const SlideoutMenuFooter = forwardRef<
+  HTMLDivElement,
+  SlideoutMenuFooterProps
+>(function SlideoutMenuFooter(
+  {
+    primary,
+    secondary,
+    tertiary,
+    placement = 'hug-start',
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="slideout-menu-footer"
+      data-placement={placement}
+      className={cn(ROOT, PLACEMENT_ROOT_CLASSES[placement], className)}
+      {...rest}
+    >
+      {children ?? (
+        <div
+          data-slot="slideout-menu-footer-actions"
+          className={ACTIONS_CLASSES[placement]}
+        >
+          {primary && (
+            <ActionButton action={primary} defaultVariant="neutral" />
+          )}
+          {secondary && (
+            <ActionButton action={secondary} defaultVariant="secondary-outline" />
+          )}
+          {tertiary && (
+            <ActionButton action={tertiary} defaultVariant="secondary-outline" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/SlideoutMenuFooter/SlideoutMenuFooter.types.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { ButtonProps } from '../Button/Button.types';
+
+/** How the action buttons are laid out inside the footer. */
+export type SlideoutMenuFooterPlacement =
+  | 'hug-start'
+  | 'hug-end'
+  | 'fill'
+  | 'stack';
+
+/** Config for a single action button. Accepts all `Button` props. */
+export interface SlideoutMenuFooterAction extends ButtonProps {
+  /** Button label text (used when children is not provided). */
+  label?: ReactNode;
+}
+
+export interface SlideoutMenuFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Primary action (renders as black / neutral button). */
+  primary?: SlideoutMenuFooterAction;
+  /** Secondary action (renders as outline button). */
+  secondary?: SlideoutMenuFooterAction;
+  /** Tertiary action (renders as outline button). */
+  tertiary?: SlideoutMenuFooterAction;
+  /** How the buttons are arranged. Defaults to `hug-start`. */
+  placement?: SlideoutMenuFooterPlacement;
+  /** Children escape hatch — if provided, overrides the data-driven actions. */
+  children?: ReactNode;
+}

package/src/components/SlideoutMenuFooter/SlideoutMenuFooter.variants.ts

@@ -0,0 +1,49 @@
+import type { SlideoutMenuFooterPlacement } from './SlideoutMenuFooter.types';
+
+/* ── Root wrapper ────────────────────────────────────────────── */
+
+/** Base root — always applied. Padding 24, gap 8, full width. */
+export const ROOT = 'flex w-full p-spacing-3xl gap-spacing-md';
+
+/** Placement-specific classes applied to the root container. */
+export const PLACEMENT_ROOT_CLASSES: Record<SlideoutMenuFooterPlacement, string> = {
+  'hug-start': 'items-center justify-start',
+  'hug-end': 'items-center justify-start',
+  fill: 'items-center justify-center',
+  stack: [
+    'flex-col items-center justify-center',
+  ].join(' '),
+};
+
+/* ── Inner actions wrapper ───────────────────────────────────── */
+
+/**
+ * The inner `<div>` that wraps the button group.
+ *
+ * - hug-start / hug-end: wrapper fills available space (`flex-1`);
+ *   buttons stay intrinsic width. hug-end uses `flex-row-reverse`
+ *   so the primary button sits at the inline-end without changing
+ *   render order — this mirrors correctly in RTL automatically.
+ * - fill: buttons share space equally via `[&>*]:flex-1`.
+ * - stack: buttons stack vertically, each full-width.
+ */
+export const ACTIONS_CLASSES: Record<SlideoutMenuFooterPlacement, string> = {
+  'hug-start': [
+    'flex flex-1 items-center gap-spacing-md',
+    'min-h-px min-w-px',
+  ].join(' '),
+  'hug-end': [
+    'flex flex-row-reverse flex-1 items-center gap-spacing-md',
+    'min-h-px min-w-px',
+  ].join(' '),
+  fill: [
+    'flex flex-1 items-center gap-spacing-md',
+    'min-h-px min-w-px',
+    '[&>*]:flex-1 [&>*]:min-h-px [&>*]:min-w-px',
+  ].join(' '),
+  stack: [
+    'flex flex-col items-stretch gap-spacing-md',
+    'w-full shrink-0',
+    '[&>*]:w-full [&>*]:shrink-0',
+  ].join(' '),
+};

package/src/components/SlideoutMenuFooter/index.ts

@@ -0,0 +1,6 @@
+export { SlideoutMenuFooter } from './SlideoutMenuFooter';
+export type {
+  SlideoutMenuFooterProps,
+  SlideoutMenuFooterPlacement,
+  SlideoutMenuFooterAction,
+} from './SlideoutMenuFooter.types';

package/src/components/SlideoutMenuHeader/SlideoutMenuHeader.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { CloseIcon } from '../../icons/IconFactory';
+import type { SlideoutMenuHeaderProps } from './SlideoutMenuHeader.types';
+import {
+  ROOT,
+  ROW,
+  CONTENT,
+  TEXT_WRAP,
+  TITLE,
+  DESCRIPTION,
+  FEATURED_ICON,
+  FEATURED_ICON_INNER,
+  CLOSE_BTN,
+} from './SlideoutMenuHeader.variants';
+
+/**
+ * SlideoutMenuHeader — the top header row for a slideout panel / drawer.
+ *
+ * Shows an optional featured icon (bordered circle + shadow-xs), a title +
+ * optional description, and a trailing close button. Uses global spacing,
+ * typography, and icon-size tokens. RTL-aware via ambient `dir` — the flex
+ * row mirrors automatically so the close button lands at the visual start.
+ */
+export const SlideoutMenuHeader = forwardRef<
+  HTMLDivElement,
+  SlideoutMenuHeaderProps
+>(function SlideoutMenuHeader(
+  {
+    title = 'Title',
+    description,
+    leadingIcon,
+    showClose = true,
+    onClose,
+    closeIcon,
+    closeLabel = 'Close',
+    className,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      data-slot="slideout-menu-header"
+      className={cn(ROOT, className)}
+      {...rest}
+    >
+      <div data-slot="slideout-menu-header-row" className={ROW}>
+        {/* Content: leading icon + text */}
+        <div data-slot="slideout-menu-header-content" className={CONTENT}>
+          {leadingIcon && (
+            <span
+              data-slot="slideout-menu-header-featured-icon"
+              className={FEATURED_ICON}
+            >
+              <span className={FEATURED_ICON_INNER}>{leadingIcon}</span>
+            </span>
+          )}
+          <div data-slot="slideout-menu-header-text" className={TEXT_WRAP}>
+            <p className={TITLE}>{title}</p>
+            {description && <p className={DESCRIPTION}>{description}</p>}
+          </div>
+        </div>
+
+        {/* Close button */}
+        {showClose && (
+          <button
+            type="button"
+            aria-label={closeLabel}
+            onClick={onClose}
+            data-slot="slideout-menu-header-close"
+            className={CLOSE_BTN}
+          >
+            {closeIcon ?? <CloseIcon />}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/SlideoutMenuHeader/SlideoutMenuHeader.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface SlideoutMenuHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Main title text. */
+  title?: ReactNode;
+  /** Optional supporting description rendered below the title. */
+  description?: ReactNode;
+  /** Featured icon rendered inside a bordered circle at the inline-start. */
+  leadingIcon?: ReactNode;
+  /** Whether to show the trailing close button. Defaults to `true`. */
+  showClose?: boolean;
+  /** Click handler for the close button. */
+  onClose?: () => void;
+  /** Override the close icon node. Defaults to a built-in × SVG. */
+  closeIcon?: ReactNode;
+  /** Accessible label for the close button. Defaults to `'Close'`. */
+  closeLabel?: string;
+}

package/src/components/SlideoutMenuHeader/SlideoutMenuHeader.variants.ts

@@ -0,0 +1,78 @@
+/* ── Root ─────────────────────────────────────────────────────── */
+
+/** Outer wrapper — full width, column layout. */
+export const ROOT = 'flex flex-col w-full items-start';
+
+/* ── Header row ──────────────────────────────────────────────── */
+
+/** Header row — p-spacing-3xl (24), gap-spacing-lg (12).
+ *  Flex row mirrors automatically in RTL via ambient `dir`. */
+export const ROW = [
+  'flex w-full items-start',
+  'gap-spacing-lg p-spacing-3xl',
+].join(' ');
+
+/* ── Content area ────────────────────────────────────────────── */
+
+/** Content wrapper — holds icon + text, fills available space. */
+export const CONTENT = [
+  'flex flex-1 items-start',
+  'gap-spacing-md min-w-0',
+].join(' ');
+
+/** Text container — title + description stacked vertically. */
+export const TEXT_WRAP = [
+  'flex flex-1 flex-col justify-center',
+  'gap-spacing-xs min-w-0',
+].join(' ');
+
+/** Title — text-md semibold, default text colour. */
+export const TITLE = [
+  'w-full text-text-md font-semibold text-start',
+  'text-[rgba(22,22,22,1)]',
+  'dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+/** Description — text-xs regular, secondary paragraph colour. */
+export const DESCRIPTION = [
+  'w-full text-text-xs font-normal text-start',
+  'text-[rgba(108,115,127,1)]',
+  'dark:text-[rgba(156,163,175,1)]',
+].join(' ');
+
+/* ── Featured icon ───────────────────────────────────────────── */
+
+/** Bordered circle wrapping the leading icon. */
+export const FEATURED_ICON = [
+  'shrink-0 inline-flex items-center justify-center',
+  'p-spacing-md rounded-full border border-solid',
+  'border-[rgba(210,214,219,1)] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]',
+  'text-[rgba(22,22,22,1)]',
+  'dark:border-[rgba(55,65,81,1)]',
+  'dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+/** Inner icon sizer — size-icon-md (16/20 responsive). */
+export const FEATURED_ICON_INNER = [
+  'inline-flex items-center justify-center size-icon-md',
+  '[&>svg]:w-full [&>svg]:h-full',
+].join(' ');
+
+/* ── Close button ────────────────────────────────────────────── */
+
+/** Shared focus ring. */
+export const FOCUS_RING = [
+  'focus:outline-none',
+  'focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-0 rounded-[2px]',
+  'dark:focus-visible:ring-[rgba(229,231,235,1)]',
+].join(' ');
+
+/** Close button — size-icon-md hit area, currentColor icon. */
+export const CLOSE_BTN = [
+  'shrink-0 inline-flex items-center justify-center',
+  'size-icon-md cursor-pointer transition-opacity hover:opacity-70',
+  'text-[rgba(22,22,22,1)]',
+  'dark:text-[rgba(229,231,235,1)]',
+  '[&>svg]:w-full [&>svg]:h-full',
+  FOCUS_RING,
+].join(' ');

package/src/components/SlideoutMenuHeader/index.ts

@@ -0,0 +1,2 @@
+export { SlideoutMenuHeader } from './SlideoutMenuHeader';
+export type { SlideoutMenuHeaderProps } from './SlideoutMenuHeader.types';

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,259 @@
+'use client';
+
+import { forwardRef, useState, useCallback } from 'react';
+import type { SliderProps } from './Slider.types';
+import {
+  TRACK_BG,
+  FILL_BG,
+  THUMB_BG,
+  LABEL_TEXT,
+  BUBBLE,
+  ICON_COLOR,
+} from './Slider.variants';
+import { cn } from '../../lib/cn';
+import { InfoCircleIcon } from '../../icons/IconFactory';
+
+// Thumb width in px — used to compute accurate label positions
+const THUMB_PX = 16;
+
+/**
+ * Returns the CSS value for the thumb's logical-start edge.
+ * At 0 %  → 0 px  (thumb flush with start)
+ * At 100 % → 100 % − THUMB_PX  (thumb flush with end)
+ */
+function thumbEdge(pct: number): string {
+  return `calc(${pct / 100} * (100% - ${THUMB_PX}px))`;
+}
+
+/**
+ * Returns the CSS value for the thumb's centre point.
+ * Used to anchor floating tooltip bubbles.
+ */
+function thumbCenter(pct: number): string {
+  return `calc(${pct / 100} * (100% - ${THUMB_PX}px) + ${THUMB_PX / 2}px)`;
+}
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(
+    {
+      value: valueProp,
+      defaultValue = 50,
+      onChange,
+      label = 'inline',
+      dir,
+      leadingIcon = false,
+      trailingIcon = false,
+      disabled = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const [internalValue, setInternalValue] = useState(
+      valueProp !== undefined ? valueProp : defaultValue,
+    );
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp! : internalValue;
+    const pct = Math.max(0, Math.min(100, value));
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const v = Number(e.target.value);
+        if (!isControlled) setInternalValue(v);
+        onChange?.(v);
+      },
+      [isControlled, onChange],
+    );
+
+    /* ── Shared icon element ─────────────────────────────────── */
+    const iconEl = (
+      <span
+        className={cn(
+          'inline-flex size-icon-sm shrink-0 items-center justify-center',
+          ICON_COLOR,
+        )}
+      >
+        <InfoCircleIcon className="size-full" aria-hidden="true" />
+      </span>
+    );
+
+    /* ── Track + thumb + native input ────────────────────────── */
+    const trackEl = (
+      <div
+        data-slot="track-wrapper"
+        className="relative flex h-[16px] w-full items-center"
+      >
+        {/* Track background */}
+        <div
+          data-slot="track"
+          className={cn('relative h-[4px] w-full overflow-hidden rounded-[2px]', TRACK_BG)}
+        >
+          {/* Fill — start-0 is logical: maps to left-0 in LTR, right-0 in RTL */}
+          <div
+            data-slot="fill"
+            className={cn(
+              'absolute inset-y-0 start-0 rounded-[2px] transition-[width] duration-100',
+              FILL_BG,
+            )}
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+
+        {/* Native range input — invisible peer; drives focus-visible ring on thumb */}
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={1}
+          value={pct}
+          onChange={handleChange}
+          disabled={disabled}
+          dir={dir}
+          aria-valuenow={pct}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          className={cn(
+            'peer absolute inset-0 h-full w-full cursor-pointer opacity-0 focus-visible:outline-none',
+            disabled && 'cursor-not-allowed',
+          )}
+          style={{ margin: 0, padding: 0 }}
+        />
+
+        {/* Visual thumb — insetInlineStart is logical (RTL-aware) */}
+        <div
+          data-slot="thumb"
+          className={cn(
+            'pointer-events-none absolute h-[16px] w-[16px] rounded-full border-[2px] border-white',
+            'shadow-[0px_1px_3px_0px_rgba(16,24,40,0.05),0px_1px_2px_0px_rgba(16,24,40,0.05)]',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-[rgba(27,131,84,1)] peer-focus-visible:ring-offset-1',
+            THUMB_BG,
+            disabled && 'opacity-50',
+          )}
+          style={{ insetInlineStart: thumbEdge(pct) }}
+        />
+      </div>
+    );
+
+    /* ── Floating bubble ─────────────────────────────────────── */
+    const floatingBubble = (
+      <div
+        className="pointer-events-none absolute -translate-x-1/2 rtl:translate-x-1/2"
+        style={{ insetInlineStart: thumbCenter(pct) }}
+      >
+        <div className={BUBBLE}>{pct}%</div>
+      </div>
+    );
+
+    /* ── Label text helpers ───────────────────────────────────── */
+    const minLabel = <span className={cn(LABEL_TEXT, 'shrink-0')}>0%</span>;
+    const maxLabel = <span className={cn(LABEL_TEXT, 'shrink-0')}>100%</span>;
+    const valueLabel = <span className={cn(LABEL_TEXT, 'shrink-0')}>{pct}%</span>;
+
+    /* ── Render by variant ───────────────────────────────────── */
+
+    // none ─────────────────────────────────────────────────────
+    if (label === 'none') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="slider"
+          className={cn('w-full', className)}
+          {...rest}
+        >
+          {trackEl}
+        </div>
+      );
+    }
+
+    // inline ───────────────────────────────────────────────────
+    if (label === 'inline') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="slider"
+          className={cn('flex items-center gap-spacing-md', className)}
+          {...rest}
+        >
+          {leadingIcon && iconEl}
+          {minLabel}
+          <div className="min-w-0 flex-1">{trackEl}</div>
+          {valueLabel}
+          {trailingIcon && iconEl}
+        </div>
+      );
+    }
+
+    // bottom ───────────────────────────────────────────────────
+    if (label === 'bottom') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="slider"
+          className={cn('flex flex-col gap-spacing-xxs', className)}
+          {...rest}
+        >
+          {trackEl}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-spacing-md">
+              {leadingIcon && iconEl}
+              {minLabel}
+            </div>
+            <div className="flex items-center gap-spacing-md">
+              {valueLabel}
+              {trailingIcon && iconEl}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // top-floating ─────────────────────────────────────────────
+    if (label === 'top-floating') {
+      return (
+        <div
+          ref={ref}
+          dir={dir}
+          data-slot="slider"
+          className={cn('flex flex-col gap-spacing-sm', className)}
+          {...rest}
+        >
+          {/* Floating bubble row */}
+          <div className="relative h-[28px] w-full">{floatingBubble}</div>
+          {/* Track row */}
+          <div className="flex items-center gap-spacing-md">
+            {leadingIcon && iconEl}
+            {minLabel}
+            <div className="min-w-0 flex-1">{trackEl}</div>
+            {maxLabel}
+            {trailingIcon && iconEl}
+          </div>
+        </div>
+      );
+    }
+
+    // bottom-floating ──────────────────────────────────────────
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="slider"
+        className={cn('flex flex-col gap-spacing-sm', className)}
+        {...rest}
+      >
+        {/* Track row */}
+        <div className="flex items-center gap-spacing-md">
+          {leadingIcon && iconEl}
+          {minLabel}
+          <div className="min-w-0 flex-1">{trackEl}</div>
+          {maxLabel}
+          {trailingIcon && iconEl}
+        </div>
+        {/* Floating bubble row */}
+        <div className="relative h-[28px] w-full">{floatingBubble}</div>
+      </div>
+    );
+  },
+);

package/src/components/Slider/Slider.types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react';
+
+export type SliderLabel = 'inline' | 'bottom' | 'top-floating' | 'bottom-floating' | 'none';
+
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Current value (0–100). Controlled when provided. */
+  value?: number;
+  /** Initial value for uncontrolled usage (0–100). Default: 50 */
+  defaultValue?: number;
+  /** Called with the new value when the user moves the thumb */
+  onChange?: (value: number) => void;
+  /** Label position variant */
+  label?: SliderLabel;
+  /** Layout direction */
+  dir?: 'ltr' | 'rtl';
+  /** Show info icon at the leading end */
+  leadingIcon?: boolean;
+  /** Show info icon at the trailing end */
+  trailingIcon?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+}

package/src/components/Slider/Slider.variants.ts

@@ -0,0 +1,23 @@
+// Track background (unfilled portion) — Figma: background/background-neutral-100 #f3f4f6
+export const TRACK_BG =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,42,55,1)]';
+
+// Fill arc / active portion — Figma: background/background-primary #1b8354
+export const FILL_BG =
+  'bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)]';
+
+// Thumb circle — Figma: button/button-background-primary-default #1b8354
+export const THUMB_BG =
+  'bg-[rgba(27,131,84,1)] dark:bg-[rgba(84,192,138,1)]';
+
+// Value / range text labels — Figma: Text xs/Regular, text/text-display #1f2a37, lh 18px
+export const LABEL_TEXT =
+  'text-text-xs leading-[18px] text-[rgba(31,42,55,1)] dark:text-[rgba(156,163,175,1)]';
+
+// Floating tooltip bubble — Figma: Shadows/shadow-md, radius-6, spacing-md/xs padding
+export const BUBBLE =
+  'whitespace-nowrap rounded-[6px] bg-white dark:bg-[rgba(31,42,55,1)] border border-[rgba(243,244,246,1)] dark:border-[rgba(44,57,79,1)] px-spacing-md py-spacing-xs text-text-xs text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] shadow-[0px_4px_8px_0px_rgba(16,24,40,0.1),0px_2px_4px_0px_rgba(16,24,40,0.06)]';
+
+// Icon colour (info / help icons at ends) — Figma: Icon/icon-neutral #384250
+export const ICON_COLOR =
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]';

package/src/components/Slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps, SliderLabel } from './Slider.types';