@sybilion/uilib 1.0.20

package/src/components/ui/TextShimmer/TextShimmer.tsx

@@ -0,0 +1,56 @@
+import cn from 'classnames';
+import React, { type JSX, useMemo } from 'react';
+
+import { motion } from 'motion/react';
+
+import S from './TextShimmer.styl';
+import { TextShimmerProps } from './TextShimmer.types';
+
+function TextShimmerComponent({
+  children,
+  as: Component = 'p',
+  className,
+  duration = 2,
+  spread = 2,
+  inverted = false,
+}: TextShimmerProps) {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements,
+  );
+
+  const { shimmerGradient, baseGradient } = useMemo(() => {
+    const dynamicSpread = children.length * spread;
+    const baseColor = inverted
+      ? 'var(--base-gradient-color)'
+      : 'var(--base-color)';
+    const baseGradientColor = inverted
+      ? 'var(--base-color)'
+      : 'var(--base-gradient-color)';
+
+    const shimmer = `linear-gradient(90deg, transparent calc(50% - ${dynamicSpread}px), ${baseGradientColor} calc(50% - ${dynamicSpread / 2}px), ${baseGradientColor} calc(50% + ${dynamicSpread / 2}px), transparent calc(50% + ${dynamicSpread}px))`;
+    const base = `linear-gradient(to right, ${baseColor}, ${baseColor})`;
+    return { shimmerGradient: shimmer, baseGradient: base };
+  }, [children.length, spread, inverted]);
+
+  return (
+    <MotionComponent
+      className={cn(S.root, className)}
+      initial={{ backgroundPosition: '200% center, 0% center' }}
+      animate={{ backgroundPosition: '-100% center, 0% center' }}
+      transition={{
+        repeat: Infinity,
+        duration,
+        ease: 'linear',
+      }}
+      style={
+        {
+          backgroundImage: `${shimmerGradient}, ${baseGradient}`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </MotionComponent>
+  );
+}
+
+export const TextShimmer = React.memo(TextShimmerComponent);

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

@@ -0,0 +1,9 @@
+import { type ComponentProps } from 'react';
+
+export interface TextShimmerProps extends ComponentProps<'p'> {
+  children: string;
+  as?: React.ElementType;
+  duration?: number;
+  spread?: number;
+  inverted?: boolean;
+}

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

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

package/src/components/ui/TextWithDeferTooltip/TextWithDeferTooltip.tsx

@@ -0,0 +1,98 @@
+import { CSSProperties, useRef, useState } from 'react';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#uilib/components/ui/Tooltip';
+
+import type { TextWithDeferTooltipProps } from './TextWithDeferTooltip.types';
+
+function TextWithDeferTooltip({
+  className,
+  children,
+  width,
+  maxWidth,
+  side = 'bottom',
+  overTrigger = false,
+  ...props
+}: TextWithDeferTooltipProps) {
+  const [withTooltip, setWithTooltip] = useState(false);
+  const [tooltipStyles, setTooltipStyles] = useState<CSSProperties>({});
+  const ref = useRef<HTMLDivElement>(null);
+  const cachedFontSizeRef = useRef<string | null>(null);
+
+  const handleMouseEnter = () => {
+    if (!ref.current) return;
+
+    const isOverflowingHorizontally =
+      ref.current.scrollWidth - ref.current.clientWidth > 3;
+    const isOverflowingVertically =
+      ref.current.scrollHeight - ref.current.clientHeight > 3;
+
+    if (isOverflowingHorizontally || isOverflowingVertically) {
+      const styles: CSSProperties = {
+        fontSize: cachedFontSizeRef.current || undefined,
+      };
+
+      if (ref.current) {
+        const {
+          width: rectWidth,
+          left,
+          top,
+        } = ref.current.getBoundingClientRect();
+
+        styles.width = `${width ?? rectWidth}px`;
+
+        if (!cachedFontSizeRef.current) {
+          const { fontSize } = window.getComputedStyle(ref.current);
+          cachedFontSizeRef.current = fontSize;
+          styles.fontSize = fontSize;
+        }
+
+        if (overTrigger) {
+          styles.transform = `translate(${left}px, ${top}px) !important`;
+          // styles.translateX = `${left}px`;
+          // styles.translateY = `${top}px`;
+        }
+      }
+
+      setTooltipStyles(styles);
+      setWithTooltip(true);
+    }
+  };
+
+  const textElement = (
+    <div
+      ref={ref}
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+
+  if (withTooltip) {
+    const tooltipSide = overTrigger ? 'bottom' : side;
+
+    return (
+      <Tooltip open={withTooltip} onOpenChange={setWithTooltip}>
+        <TooltipTrigger asChild>{textElement}</TooltipTrigger>
+        <TooltipContent
+          side={tooltipSide}
+          style={{
+            ...(maxWidth !== undefined && { maxWidth: `${maxWidth}px` }),
+            ...tooltipStyles,
+          }}
+        >
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return textElement;
+}
+
+export { TextWithDeferTooltip };

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

@@ -0,0 +1,11 @@
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TextWithDeferTooltipProps extends Omit<
+  React.ComponentProps<'div'>,
+  'style'
+> {
+  width?: number;
+  maxWidth?: number;
+  side?: TooltipSide;
+  overTrigger?: boolean;
+}

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

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

package/src/components/ui/TimeRangeControls/TimeRangeControls.constants.ts

@@ -0,0 +1 @@
+export const TIME_RANGES = ['6m', '1y', '3y', '5y', 'All'] as const;

package/src/components/ui/TimeRangeControls/TimeRangeControls.styl

@@ -0,0 +1,28 @@
+@import 'lib/theme.styl'
+
+$md = 768px
+
+.timeRangeContainer
+  display flex
+
+.timeRangeToggleGroup
+  display none
+
+  @media (min-width: $md)
+    display flex
+
+.timeRangeSelectTrigger
+  display flex
+  width 10rem
+
+  @media (min-width: $md)
+    display none
+
+.timeRangeSelectContent
+  border-radius 0.75rem
+
+.timeRangeToggleItem
+  padding var(--p-2) var(--p-3)
+
+.timeRangeSelectItem
+  border-radius 0.5rem

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

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'timeRangeContainer': string;
+  'timeRangeSelectContent': string;
+  'timeRangeSelectItem': string;
+  'timeRangeSelectTrigger': string;
+  'timeRangeToggleGroup': string;
+  'timeRangeToggleItem': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/TimeRangeControls/TimeRangeControls.tsx

@@ -0,0 +1,92 @@
+import { memo } from 'react';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#uilib/components/ui/Select/Select';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '#uilib/components/ui/ToggleGroup/ToggleGroup';
+
+import { TIME_RANGES } from './TimeRangeControls.constants';
+import S from './TimeRangeControls.styl';
+import { TimeRange } from './TimeRangeControls.types';
+
+export const TimeRangeControls = memo(
+  ({
+    timeRange,
+    onTimeRangeChange,
+    loading,
+  }: {
+    timeRange: TimeRange;
+    onTimeRangeChange: (range: string) => void;
+    loading?: boolean;
+  }) => (
+    <div className={S.timeRangeContainer}>
+      <ToggleGroup
+        type="single"
+        value={timeRange}
+        onValueChange={onTimeRangeChange}
+        variant="outline"
+        disabled={loading}
+        className={S.timeRangeToggleGroup}
+      >
+        {TIME_RANGES.map(range => (
+          <ToggleGroupItem
+            key={range}
+            value={range}
+            className={S.timeRangeToggleItem}
+          >
+            {range}
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </div>
+  ),
+);
+
+TimeRangeControls.displayName = 'TimeRangeControls';
+
+export const TimeRangeSelect = memo(
+  ({
+    timeRange,
+    onTimeRangeChange,
+    loading,
+  }: {
+    timeRange: TimeRange;
+    onTimeRangeChange: (range: string) => void;
+    loading: boolean;
+  }) => (
+    <Select
+      value={timeRange}
+      onValueChange={onTimeRangeChange}
+      disabled={loading}
+    >
+      <SelectTrigger
+        className={S.timeRangeSelectTrigger}
+        size="sm"
+        aria-label="Select a value"
+      >
+        <SelectValue placeholder="1 year" />
+      </SelectTrigger>
+
+      <SelectContent className={S.timeRangeSelectContent}>
+        {TIME_RANGES.map(range => (
+          <SelectItem
+            key={range}
+            value={range}
+            className={S.timeRangeSelectItem}
+          >
+            {range}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+);
+
+TimeRangeSelect.displayName = 'TimeRangeSelect';

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

@@ -0,0 +1,3 @@
+import { TIME_RANGES } from './TimeRangeControls.constants';
+
+export type TimeRange = (typeof TIME_RANGES)[number];

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

@@ -0,0 +1,3 @@
+export * from './TimeRangeControls';
+export * from './TimeRangeControls.constants';
+export * from './TimeRangeControls.types';

package/src/components/ui/Toggle/Toggle.styl

@@ -0,0 +1,79 @@
+.toggle
+  display inline-flex
+  align-items center
+  justify-content center
+  gap 0.5rem
+  white-space nowrap
+  cursor pointer
+
+  font-size var(--text-sm) //0.875rem
+  font-weight 600
+  color var(--muted-foreground)
+
+  background-color transparent
+
+  &:hover
+    background-color var(--muted-80)
+    color var(--muted-foreground)
+
+  &:disabled
+    pointer-events none
+    opacity 0.5
+
+  &[data-state='on']
+    background-color var(--background)
+    color var(--foreground)
+    box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.05)
+
+  svg
+    pointer-events none
+    flex-shrink 0
+
+    &:not([class*='size-'])
+      width 1rem
+      height 1rem
+
+  &:focus-visible
+    outline none
+    box-shadow 0 0 0 2px var(--ring)
+
+  transition all 0.15s ease-in-out
+
+  &[aria-invalid='true']
+    border-color var(--destructive)
+    box-shadow 0 0 0 3px var(--destructive-20)
+
+    :global(.dark) &
+      box-shadow 0 0 0 3px var(--destructive-40)
+
+.variant-default
+  border-radius 0.375rem
+
+.variant-outline
+  border none
+  background-color transparent
+
+  &:hover
+    color var(--foreground)
+
+  &[data-state='on']
+    background-color var(--background)
+    color var(--foreground)
+
+.size-sm
+  height 1.75rem
+  padding-left 0.75rem
+  padding-right 0.75rem
+  border-radius 0.375rem
+
+.size-md
+  height 1.75rem
+  padding-left 0.75rem
+  padding-right 0.75rem
+  border-radius 0.375rem
+
+.size-lg
+  height 2rem
+  padding-left 0.875rem
+  padding-right 0.875rem
+  border-radius 0.5rem

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

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'size-lg': string;
+  'size-md': string;
+  'size-sm': string;
+  'toggle': string;
+  'variant-default': string;
+  'variant-outline': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Toggle/Toggle.tsx

@@ -0,0 +1,28 @@
+import cn from 'classnames';
+
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+
+import S from './Toggle.styl';
+import { ToggleProps } from './Toggle.types';
+
+function Toggle({
+  className,
+  variant = 'default',
+  size = 'md',
+  ...props
+}: ToggleProps) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(
+        S.toggle,
+        S[`variant-${variant}`],
+        S[`size-${size}`],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Toggle };

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+
+export interface ToggleProps extends ComponentProps<
+  typeof TogglePrimitive.Root
+> {
+  className?: string;
+  variant?: 'default' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+}

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

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

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

@@ -0,0 +1,20 @@
+import { ToggleGroupContextValue } from './ToggleGroup.types';
+
+// Helper function to get context values with defaults
+export const getContextValues = (
+  context: ToggleGroupContextValue,
+  itemVariant?: 'default' | 'outline',
+  itemSize?: 'sm' | 'md' | 'lg',
+): {
+  variant: 'default' | 'outline';
+  size: 'sm' | 'md' | 'lg';
+} => ({
+  variant: context.variant || itemVariant || 'default',
+  size: context.size || itemSize || 'md',
+});
+
+// Helper function to get default context values
+export const getDefaultContextValues = (): ToggleGroupContextValue => ({
+  size: 'md',
+  variant: 'default',
+});

package/src/components/ui/ToggleGroup/ToggleGroup.styl

@@ -0,0 +1,38 @@
+
+// Container styles for ToggleGroup
+.container
+  display flex
+  width fit-content
+  align-items center
+  border-radius var(--p-6)
+  gap var(--p-1)
+  // background-color var(--muted-50)
+  transition opacity 100ms ease-out
+  font-weight 600
+
+  &[data-disabled]
+    pointer-events none
+    opacity 0.5
+
+// Item styles for ToggleGroupItem
+.item
+  flex-shrink 0
+  border-radius var(--p-4)
+  box-shadow none
+  border none
+  transition all 0.15s ease-in-out
+  color var(--muted-foreground)
+
+  &:focus
+    z-index 10
+
+  &:focus-visible
+    z-index 10
+
+  &[data-state='on']
+    border-radius var(--p-6)
+    color var(--foreground)
+
+  &[data-disabled]
+    pointer-events none
+    opacity 0.5

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

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

package/src/components/ui/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,77 @@
+import cn from 'classnames';
+import { createContext, useContext } from 'react';
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+
+import toggleStyles from '../Toggle/Toggle.styl';
+import {
+  getContextValues,
+  getDefaultContextValues,
+} from './ToggleGroup.helpers';
+import S from './ToggleGroup.styl';
+import {
+  ToggleGroupContextValue,
+  ToggleGroupItemProps,
+  ToggleGroupProps,
+} from './ToggleGroup.types';
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>(
+  getDefaultContextValues(),
+);
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  disabled,
+  ...props
+}: ToggleGroupProps) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-disabled={disabled ? '' : undefined}
+      className={cn(S.container, className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ToggleGroupItemProps) {
+  const context = useContext(ToggleGroupContext);
+  const { variant: contextVariant, size: contextSize } = getContextValues(
+    context,
+    variant,
+    size,
+  );
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={contextVariant}
+      data-size={contextSize}
+      className={cn(
+        toggleStyles.toggle,
+        S.item,
+        toggleStyles[`variant-${contextVariant}`],
+        toggleStyles[`size-${contextSize}`],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,38 @@
+export interface ToggleGroupContextValue {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline';
+}
+
+interface ToggleGroupBaseProps extends React.ComponentPropsWithoutRef<'div'> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline';
+  orientation?: 'horizontal' | 'vertical';
+  dir?: 'ltr' | 'rtl';
+  rovingFocus?: boolean;
+  disabled?: boolean;
+  loop?: boolean;
+}
+
+interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
+  type: 'single';
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
+  type: 'multiple';
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+
+export type ToggleGroupProps =
+  | ToggleGroupSingleProps
+  | ToggleGroupMultipleProps;
+
+export interface ToggleGroupItemProps extends React.ComponentPropsWithoutRef<'button'> {
+  value: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline';
+}

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

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