@sybilion/uilib 1.0.20

package/src/components/ui/Skeleton/Skeleton.helpers.ts

@@ -0,0 +1,13 @@
+import cn from 'classnames';
+
+import S from './Skeleton.styl';
+
+/**
+ * Creates skeleton elements array for repetitive skeleton patterns
+ */
+export const createSkeletonArray = (count: number, className?: string) => {
+  return Array.from({ length: count }, (_, index) => ({
+    key: `skeleton-${index}`,
+    className: cn(S.root, className),
+  }));
+};

package/src/components/ui/Skeleton/Skeleton.styl

@@ -0,0 +1,31 @@
+.root
+  border-radius 0.375rem
+  background-color var(--accent-color-alpha-100)
+  animation pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
+
+  @keyframes pulse
+    0%, 100%
+      opacity 1
+    50%
+      opacity 0.5
+
+// Size variants
+.size-sm
+  height 1rem
+
+.size-md
+  height 1.5rem
+
+.size-lg
+  height 2.5rem
+
+// Shape variants
+.shape-rectangle
+  border-radius 0.375rem
+
+.shape-circle
+  border-radius 9999px
+
+.shape-rounded
+  border-radius 0.5rem
+

package/src/components/ui/Skeleton/Skeleton.styl.d.ts

@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'pulse': string;
+  'root': string;
+  'shape-circle': string;
+  'shape-rectangle': string;
+  'shape-rounded': string;
+  'size-lg': string;
+  'size-md': string;
+  'size-sm': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,21 @@
+import cn from 'classnames';
+
+import S from './Skeleton.styl';
+import { SkeletonProps } from './Skeleton.types';
+
+function Skeleton({
+  className,
+  size = 'md',
+  shape = 'rectangle',
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn(S.root, S[`size-${size}`], S[`shape-${shape}`], className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/Skeleton/Skeleton.types.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+
+export type SkeletonSize = 'sm' | 'md' | 'lg';
+export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+
+export interface SkeletonProps extends ComponentProps<'div'> {
+  size?: SkeletonSize;
+  shape?: SkeletonShape;
+  className?: string;
+}

package/src/components/ui/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export * from './Skeleton.types';

package/src/components/ui/Slider/Slider.styl

@@ -0,0 +1,77 @@
+.sliderRoot
+  position relative
+  display flex
+  align-items center
+  width 100%
+  height 20px
+  touch-action none
+  user-select none
+  overflow visible
+
+.sliderTrack
+  position relative
+  flex-grow 1
+  height calc(100% - 4px)
+  margin-left -8px
+  margin-right -8px
+  width calc(100% + 16px)
+  border-radius 20px
+  background-color var(--border)
+  cursor pointer
+  touch-action none
+
+  :global(.dark) &
+    background-color var(--input)
+
+.sliderRange
+  position absolute
+  height 100%
+  border-radius 20px
+  background-color var(--primary)
+
+.sliderThumbContainer
+  position absolute
+  left 8px
+  right 8px
+  height 100%
+  pointer-events none
+
+.sliderThumb
+  position absolute
+  top 50%
+  display block
+  width 16px
+  height 16px
+  border-radius 50%
+  background-color var(--card)
+  border 2px solid var(--primary)
+  box-shadow 0px 2px 4px rgba(0, 0, 0, 0.1)
+  cursor grab
+  transition transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out
+  outline none
+  transform translate(-50%, -50%)
+  touch-action none
+  user-select none
+  pointer-events auto
+
+  &:hover
+    transform translate(-50%, -50%) scale(1.1)
+    box-shadow 0px 4px 8px rgba(0, 0, 0, 0.15)
+
+  &:focus-visible
+    outline 2px solid var(--primary)
+    outline-offset 2px
+
+  &:active
+    cursor grabbing
+    transform translate(-50%, -50%) scale(1.15)
+    transition none
+
+.sliderRoot[data-dragging="true"] .sliderThumb
+  cursor grabbing
+  transform translate(-50%, -50%) scale(1.15)
+  transition none
+
+.sliderRoot[data-disabled="true"]
+  opacity 0.5
+  pointer-events none

package/src/components/ui/Slider/Slider.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'sliderRange': string;
+  'sliderRoot': string;
+  'sliderThumb': string;
+  'sliderThumbContainer': string;
+  'sliderTrack': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Slider/Slider.tsx

@@ -0,0 +1,189 @@
+import cn from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import S from './Slider.styl';
+import type { SliderProps } from './Slider.types';
+
+function Slider({
+  className,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+}: SliderProps) {
+  const [internalValue, setInternalValue] = useState<number[]>(
+    controlledValue ?? defaultValue ?? [min],
+  );
+  const [isDragging, setIsDragging] = useState(false);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+  const sliderThumbContainerRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const rangeRef = useRef<HTMLDivElement>(null);
+  const cachedRectRef = useRef<DOMRect | null>(null);
+
+  const updateThumbPosition = useCallback((percentage: number) => {
+    if (thumbRef.current) {
+      thumbRef.current.style.left = `${percentage}%`;
+    }
+    if (rangeRef.current && sliderThumbContainerRef.current) {
+      const containerWidth = sliderThumbContainerRef.current.offsetWidth;
+      const rangeWidth = (containerWidth * percentage) / 100 + 16;
+      rangeRef.current.style.width = `${rangeWidth}px`;
+    }
+  }, []);
+
+  const calculatePercentageFromPosition = useCallback(
+    (clientX: number, useCache = false): number => {
+      if (!sliderThumbContainerRef.current) return 0;
+
+      const rect =
+        useCache && cachedRectRef.current
+          ? cachedRectRef.current
+          : sliderThumbContainerRef.current.getBoundingClientRect();
+
+      if (useCache && !cachedRectRef.current) {
+        cachedRectRef.current = rect;
+      }
+
+      return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    },
+    [],
+  );
+
+  const calculateValueFromPosition = useCallback(
+    (clientX: number, useCache = false): number[] => {
+      if (!sliderThumbContainerRef.current) return value;
+
+      const percentage = calculatePercentageFromPosition(clientX, useCache);
+      const rawValue = min + percentage * (max - min);
+      const steppedValue = Math.round(rawValue / step) * step;
+      const clampedValue = Math.max(min, Math.min(max, steppedValue));
+
+      return [clampedValue];
+    },
+    [min, max, step, value, calculatePercentageFromPosition],
+  );
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (disabled) return;
+
+      e.preventDefault();
+      setIsDragging(true);
+      // Cache rect when drag starts
+      if (sliderThumbContainerRef.current) {
+        cachedRectRef.current =
+          sliderThumbContainerRef.current.getBoundingClientRect();
+      }
+      const rawPercentage = calculatePercentageFromPosition(e.clientX, false);
+      const visualPercentage = rawPercentage * 100;
+      updateThumbPosition(visualPercentage);
+
+      const newValue = calculateValueFromPosition(e.clientX);
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [
+      disabled,
+      calculatePercentageFromPosition,
+      calculateValueFromPosition,
+      isControlled,
+      onValueChange,
+      updateThumbPosition,
+    ],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!isDragging || disabled) return;
+
+      e.preventDefault();
+      // Use cached rect during drag for performance
+      const rawPercentage = calculatePercentageFromPosition(e.clientX, true);
+      const visualPercentage = rawPercentage * 100;
+      updateThumbPosition(visualPercentage);
+
+      const newValue = calculateValueFromPosition(e.clientX, true);
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [
+      disabled,
+      calculatePercentageFromPosition,
+      calculateValueFromPosition,
+      isControlled,
+      isDragging,
+      min,
+      max,
+      onValueChange,
+      updateThumbPosition,
+    ],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: PointerEvent) => {
+      if (!isDragging) return;
+
+      setIsDragging(false);
+
+      // Clear cached rect when drag ends
+      cachedRectRef.current = null;
+      const newValue = calculateValueFromPosition(e.clientX);
+
+      onValueCommit?.(newValue);
+    },
+    [calculateValueFromPosition, isDragging, onValueCommit],
+  );
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('pointermove', handlePointerMove);
+      document.addEventListener('pointerup', handlePointerUp);
+
+      return () => {
+        document.removeEventListener('pointermove', handlePointerMove);
+        document.removeEventListener('pointerup', handlePointerUp);
+      };
+    }
+  }, [isDragging, handlePointerMove, handlePointerUp]);
+
+  const percentage = ((value[0] - min) / (max - min)) * 100;
+
+  useEffect(() => {
+    if (!isDragging) {
+      updateThumbPosition(percentage);
+    }
+  }, [percentage, isDragging, updateThumbPosition, value]);
+
+  return (
+    <div
+      data-slot="slider"
+      className={cn(S.sliderRoot, className)}
+      data-disabled={disabled}
+      data-dragging={isDragging}
+    >
+      <div className={S.sliderTrack} onPointerDown={handlePointerDown}>
+        <div ref={rangeRef} className={S.sliderRange} />
+        <div ref={sliderThumbContainerRef} className={S.sliderThumbContainer}>
+          <div
+            ref={thumbRef}
+            className={S.sliderThumb}
+            onPointerDown={handlePointerDown}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Slider };

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

@@ -0,0 +1,7 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+export interface SliderProps extends React.ComponentProps<
+  typeof SliderPrimitive.Root
+> {
+  className?: string;
+}

package/src/components/ui/Slider/index.ts

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

package/src/components/ui/SmartTextTruncate/SmartTextTruncate.tsx

@@ -0,0 +1,141 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+import type { SmartTextTruncateProps } from './SmartTextTruncate.types';
+
+const ELLIPSIS = ' ... ';
+const END_CHARS_COUNT = 10;
+
+function SmartTextTruncate({
+  children,
+  className,
+  ...props
+}: SmartTextTruncateProps) {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const fullTextRef = useRef<HTMLSpanElement>(null);
+  const [displayText, setDisplayText] = useState<string>(
+    typeof children === 'string' ? children : '',
+  );
+  const [resizeTrigger, setResizeTrigger] = useState(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const fullText = fullTextRef.current;
+
+    if (!container || !fullText || typeof children !== 'string') {
+      return;
+    }
+
+    const text = children;
+
+    // If text is shorter than END_CHARS_COUNT, no truncation needed
+    if (text.length <= END_CHARS_COUNT) {
+      setDisplayText(text);
+      return;
+    }
+
+    // Measure container width
+    const containerWidth = container.clientWidth;
+    if (containerWidth === 0) {
+      // Container not yet rendered, keep current text
+      return;
+    }
+
+    // Measure full text width
+    fullText.textContent = text;
+    const fullTextWidth = fullText.scrollWidth;
+
+    // If text fits, show full text
+    if (fullTextWidth <= containerWidth) {
+      setDisplayText(text);
+      return;
+    }
+
+    // Calculate truncated text: <start>...<last 10 chars>
+    const endPart = text.slice(-END_CHARS_COUNT);
+
+    // Binary search for optimal start length
+    let left = 0;
+    let right = text.length - END_CHARS_COUNT;
+    let bestStart = 0;
+
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      const startPart = text.slice(0, mid);
+      const truncated = startPart + ELLIPSIS + endPart;
+
+      fullText.textContent = truncated;
+      const truncatedWidth = fullText.scrollWidth;
+
+      if (truncatedWidth <= containerWidth) {
+        bestStart = mid;
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+
+    // Ensure we have at least some start text
+    if (bestStart === 0) {
+      // If even just ellipsis + end doesn't fit, show only end part
+      fullText.textContent = ELLIPSIS + endPart;
+      if (fullText.scrollWidth <= containerWidth) {
+        setDisplayText(ELLIPSIS + endPart);
+      } else {
+        // Last resort: show only end part without ellipsis
+        setDisplayText(endPart);
+      }
+    } else {
+      setDisplayText(text.slice(0, bestStart) + ELLIPSIS + endPart);
+    }
+  }, [children, resizeTrigger]);
+
+  // Handle ResizeObserver for container resizing
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      // Trigger recalculation by updating resizeTrigger
+      setResizeTrigger(prev => prev + 1);
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  if (typeof children !== 'string') {
+    return (
+      <span className={className} {...props}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      ref={containerRef}
+      className={className}
+      {...props}
+      style={{ position: 'relative', ...props.style }}
+    >
+      {displayText}
+      <span
+        ref={fullTextRef}
+        style={{
+          position: 'absolute',
+          visibility: 'hidden',
+          whiteSpace: 'nowrap',
+          top: '-9999px',
+        }}
+        aria-hidden="true"
+      >
+        {children}
+      </span>
+    </span>
+  );
+}
+
+export { SmartTextTruncate };

package/src/components/ui/SmartTextTruncate/SmartTextTruncate.types.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+
+export type SmartTextTruncateProps = ComponentProps<'span'> & {
+  children: string;
+};

package/src/components/ui/SmartTextTruncate/index.ts

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

package/src/components/ui/Sparkline/Sparkline.helpers.ts

@@ -0,0 +1,26 @@
+import { SparklineChartData } from './Sparkline.types';
+
+export const transformDataForChart = (data: number[]): SparklineChartData[] => {
+  return data.map((value, index) => ({
+    index,
+    value,
+  }));
+};
+
+export const getStrokeColor = (strokeColor?: string): string => {
+  return strokeColor || 'hsl(var(--foreground))';
+};
+
+export const getActiveDotConfig = (
+  showEndDot: boolean,
+  strokeColor: string,
+) => {
+  if (!showEndDot) return false;
+
+  return {
+    r: 3,
+    fill: strokeColor,
+    stroke: 'white',
+    strokeWidth: 1,
+  };
+};

package/src/components/ui/Sparkline/Sparkline.styl

@@ -0,0 +1,18 @@
+@import 'lib/theme.styl'
+
+.sparklineContainer
+  display flex
+  align-items center
+  gap var(--p-2)
+
+.sparklineNoData
+  display flex
+  align-items center
+  justify-content center
+  color var(--muted-foreground)
+
+.sparklineValue
+  font-size 0.75rem
+  line-height 1rem
+  font-weight 500
+  color var(--muted-foreground)

package/src/components/ui/Sparkline/Sparkline.styl.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'sparklineContainer': string;
+  'sparklineNoData': string;
+  'sparklineValue': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Sparkline/Sparkline.tsx

@@ -0,0 +1,80 @@
+import cn from 'classnames';
+import { forwardRef } from 'react';
+
+import { Line, LineChart } from 'recharts';
+
+import { getStrokeColor, transformDataForChart } from './Sparkline.helpers';
+import S from './Sparkline.styl';
+import { SparklineProps } from './Sparkline.types';
+
+const Sparkline = forwardRef<HTMLDivElement, SparklineProps>(
+  (
+    {
+      className,
+      data,
+      width = 100,
+      height = 30,
+      strokeWidth = 1,
+      strokeColor = 'hsl(var(--foreground))',
+      fillColor = 'hsl(var(--muted))',
+      showValue = false,
+      showEndDot = false,
+      valueFormatter = value => value.toString(),
+      ...props
+    },
+    ref,
+  ) => {
+    if (!data || data.length === 0) {
+      return (
+        <div
+          ref={ref}
+          className={cn(S.sparklineNoData, className)}
+          style={{ width, height }}
+          {...props}
+        >
+          No data
+        </div>
+      );
+    }
+
+    const chartData = transformDataForChart(data);
+    const finalStrokeColor = getStrokeColor(strokeColor);
+
+    const dot = showEndDot
+      ? (props: any) => {
+          const { index, payload } = props;
+          const isLastPoint = index === chartData.length - 1;
+          if (!isLastPoint) return null;
+          return (
+            <circle cx={props.cx} cy={props.cy} r={3} fill={finalStrokeColor} />
+          );
+        }
+      : false;
+
+    return (
+      <div ref={ref} className={cn(S.sparklineContainer, className)} {...props}>
+        <LineChart width={width} height={height} data={chartData}>
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke={finalStrokeColor}
+            strokeWidth={strokeWidth}
+            strokeDasharray="2 2"
+            dot={dot}
+            activeDot={false}
+          />
+        </LineChart>
+
+        {showValue && (
+          <span className={cn(S.sparklineValue)}>
+            {valueFormatter(data[data.length - 1])}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Sparkline.displayName = 'Sparkline';
+
+export { Sparkline };

package/src/components/ui/Sparkline/Sparkline.types.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+
+export interface SparklineProps extends HTMLAttributes<HTMLDivElement> {
+  data: number[];
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  fillColor?: string;
+  showValue?: boolean;
+  showEndDot?: boolean;
+  valueFormatter?: (value: number) => string;
+}
+
+export interface SparklineChartData {
+  index: number;
+  value: number;
+}