@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/Tabs/Tabs.styles.tsx

@@ -0,0 +1,239 @@
+import { darkTheme, styled } from '../../theme.js';
+import { Button } from '../Button/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+
+export const Container = styled('div', {
+  position: 'relative',
+  variants: {
+    hasPadding: {
+      true: {
+        padding: '0 $32',
+      },
+    },
+  },
+});
+
+export const Arrow = styled(IconButton, {
+  position: 'absolute',
+  height: '100%',
+  zIndex: 20,
+  borderRadius: '$xs !important',
+  variants: {
+    hidden: {
+      true: {
+        visibility: 'hidden',
+      },
+    },
+  },
+});
+
+export const ArrowRight = styled(Arrow, {
+  right: 0,
+});
+
+export const ArrowLeft = styled(Arrow, {
+  left: 0,
+});
+
+export const Tabs = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative',
+  justifyContent: 'space-between',
+  height: '100%',
+  variants: {
+    type: {
+      secondary: {
+        border: '3px solid $neutral100',
+        backgroundColor: '$neutral100',
+      },
+      primary: {
+        $$color: '$colors$neutral200',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral500',
+        },
+        borderColor: '$$color',
+        borderWidth: '5px',
+        borderStyle: 'solid',
+        backgroundColor: '$$color',
+      },
+      bordered: {},
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+      none: {
+        borderRadius: 'unset',
+      },
+    },
+    scrollable: {
+      true: {
+        overflowX: 'auto',
+        scrollBehavior: 'smooth',
+        scrollbarWidth: 'none',
+        '&::webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    },
+  },
+});
+
+export const Tab = styled(Button, {
+  color: '$neutral700',
+  flex: 1,
+  backgroundColor: 'transparent',
+  height: '100%',
+  zIndex: 10,
+  '& ._text': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '$2',
+  },
+  variants: {
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+      none: {
+        borderRadius: 'unset',
+      },
+    },
+    type: {
+      primary: {
+        padding: '$5 $10',
+        height: '100%',
+      },
+      secondary: {},
+      bordered: {
+        padding: '$10 $20',
+      },
+    },
+    isActive: {
+      true: {
+        transition: 'color 0.8s linear',
+      },
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'secondary',
+      isActive: true,
+      css: {
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+      },
+    },
+    {
+      type: 'secondary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: '$secondary100',
+          color: '$secondary500',
+          [`.${darkTheme} &`]: {
+            backgroundColor: 'transparent',
+            color: '$neutral700',
+          },
+        },
+      },
+    },
+
+    {
+      type: 'primary',
+      isActive: true,
+      css: {
+        color: '$secondary',
+        '& svg': {
+          color: '$secondary',
+        },
+      },
+    },
+    {
+      type: 'primary',
+      isActive: false,
+      css: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+    {
+      type: 'bordered',
+      isActive: true,
+      css: {
+        color: '$secondary500',
+      },
+    },
+    {
+      type: 'bordered',
+      isActive: false,
+      css: {
+        color: '$neutral600',
+        fontWeight: '$regular',
+        '&:hover': {
+          color: '$secondary550',
+        },
+      },
+    },
+  ],
+});
+
+export const BackdropTab = styled('div', {
+  padding: '$4',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  inset: 0,
+  transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
+  '&.no-transition': {
+    transition: 'none',
+  },
+  variants: {
+    type: {
+      secondary: {
+        backgroundColor: '$secondary500',
+      },
+      primary: {
+        backgroundColor: '$background',
+      },
+      bordered: {
+        borderRadius: '0 !important',
+        borderBottom: '$secondary500 solid 2px',
+      },
+    },
+    borderRadius: {
+      small: {
+        borderRadius: '$xs',
+      },
+      medium: {
+        borderRadius: '$sm',
+      },
+      full: {
+        borderRadius: '$xm',
+      },
+      none: {
+        borderRadius: 'unset',
+      },
+    },
+  },
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,221 @@
+import type { TabsPropTypes } from './Tabs.types.js';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from 'src/icons/index.js';
+
+import { Tooltip } from '../Tooltip/index.js';
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  BackdropTab,
+  Container,
+  Tab,
+  Tabs,
+} from './Tabs.styles.js';
+
+const INITIAL_RENDER_DELAY = 100;
+export function TabsComponent(props: TabsPropTypes) {
+  const {
+    items: tabItems,
+    onChange,
+    container = document.body,
+    value,
+    type,
+    className,
+    scrollable,
+    scrollButtons = true,
+  } = props;
+  const [tabWidth, setTabWidth] = useState(0);
+  const tabRef = useRef<HTMLButtonElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const leftArrowRef = useRef<HTMLButtonElement | null>(null);
+  const currentIndex = tabItems.findIndex((item) => item.id === value);
+  // State variable to track the initial render
+  const [initialRender, setInitialRender] = useState(true);
+  const [transformPosition, setTransformPosition] = useState(0);
+  const [leftArrowDisabled, setLeftArrowDisabled] = useState(true);
+  const [rightArrowDisabled, setRightArrowDisabled] = useState(false);
+  const [showArrows, setShowArrows] = useState(false);
+
+  let borderRadius: TabsPropTypes['borderRadius'] = 'medium';
+  if (type === 'bordered') {
+    borderRadius = 'none';
+  } else if (type && props.borderRadius) {
+    borderRadius = props.borderRadius;
+  }
+
+  const handleScroll = (to: 'right' | 'left') => {
+    if (!containerRef.current) {
+      return;
+    }
+    const SCROLL_MULTIPLIER = 1.5;
+    const scrollWidth =
+      (containerRef.current.scrollWidth / tabItems.length) * SCROLL_MULTIPLIER;
+
+    if (to === 'right') {
+      containerRef.current.scrollLeft -= scrollWidth;
+    } else {
+      containerRef.current.scrollLeft += scrollWidth;
+    }
+  };
+
+  const updateIndicator = () => {
+    if (tabRef.current && containerRef.current) {
+      const tabRect = tabRef.current.getBoundingClientRect();
+      const containerRect = containerRef.current.getBoundingClientRect();
+      setTabWidth(tabRect.width);
+      setTransformPosition(tabRef.current.offsetLeft);
+      const itemPartiallyVisibleOnLeft = tabRect.left < containerRect.left;
+      const itemPartiallyVisibleOnRight = tabRect.right > containerRect.right;
+
+      if (itemPartiallyVisibleOnLeft) {
+        containerRef.current.scrollLeft = tabRef.current.offsetLeft;
+      } else if (itemPartiallyVisibleOnRight) {
+        const containerComputedStyles = window.getComputedStyle(
+          containerRef.current
+        );
+        containerRef.current.scrollLeft =
+          containerRef.current.scrollLeft +
+          tabRect.right -
+          containerRect.right +
+          parseFloat(containerComputedStyles.borderRightWidth);
+      }
+    }
+  };
+
+  useEffect(() => {
+    // Set initialRender to false after a short delay
+    const timeout = setTimeout(() => {
+      setInitialRender(false);
+      clearTimeout(timeout);
+    }, INITIAL_RENDER_DELAY);
+  }, []);
+
+  useEffect(() => {
+    updateIndicator();
+
+    const updateArrowsVisibility = () => {
+      if (scrollable && containerRef.current) {
+        const startOfTheScroll = containerRef.current.scrollLeft === 0;
+        const endOfTheScroll =
+          containerRef.current.scrollLeft + containerRef.current.clientWidth ===
+          containerRef.current.scrollWidth;
+
+        if (startOfTheScroll) {
+          setLeftArrowDisabled(true);
+        } else {
+          setLeftArrowDisabled(false);
+        }
+        if (endOfTheScroll) {
+          setRightArrowDisabled(true);
+        } else {
+          setRightArrowDisabled(false);
+        }
+      }
+    };
+
+    const resizeHandler: ResizeObserverCallback = (event) => {
+      updateIndicator();
+
+      if (!containerRef.current || !scrollable || !scrollButtons) {
+        return;
+      }
+
+      updateArrowsVisibility();
+
+      const TOTAL_WIDTH_OF_ARROWS = 64;
+      const element = event[0].target;
+      const tabsContainerOverflown =
+        element.scrollWidth - TOTAL_WIDTH_OF_ARROWS > element.clientWidth;
+
+      if (showArrows && !tabsContainerOverflown) {
+        setShowArrows(false);
+      } else if (element.scrollWidth > element.clientWidth) {
+        setShowArrows(true);
+      }
+    };
+
+    containerRef.current?.addEventListener('scroll', updateArrowsVisibility);
+
+    const resizeObserver = new ResizeObserver(resizeHandler);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+        containerRef.current.removeEventListener(
+          'scroll',
+          updateArrowsVisibility
+        );
+      }
+    };
+  }, [containerRef.current, showArrows, currentIndex]);
+
+  return (
+    <Container hasPadding={scrollButtons && showArrows} className={className}>
+      {scrollable && showArrows && scrollButtons && (
+        <>
+          <ArrowLeft
+            ref={leftArrowRef}
+            hidden={leftArrowDisabled}
+            onClick={() => handleScroll('right')}>
+            <ChevronLeftIcon size={16} color="secondary" />
+          </ArrowLeft>
+          <ArrowRight
+            hidden={rightArrowDisabled}
+            onClick={() => handleScroll('left')}>
+            <ChevronRightIcon size={16} color="secondary" />
+          </ArrowRight>
+        </>
+      )}
+      <Tabs
+        ref={containerRef}
+        className={`_tabs ${className || ''}`}
+        type={type}
+        borderRadius={borderRadius}
+        scrollable={scrollable}>
+        {tabItems.map((item, index) => {
+          const isActive = item.id === value;
+          return (
+            <Tooltip
+              key={item.id}
+              styles={{ root: { width: '100%' } }}
+              container={container}
+              side="bottom"
+              sideOffset={2}
+              content={item.tooltip}
+              open={!item.tooltip ? false : undefined}>
+              <Tab
+                className={`_tab ${isActive ? '_active' : ''}`}
+                ref={index === currentIndex ? tabRef : null}
+                type={type}
+                fullWidth={scrollable ? false : true}
+                disableRipple={true}
+                borderRadius={borderRadius}
+                onClick={() => onChange(item)}
+                size="small"
+                isActive={isActive}
+                data-active={isActive}
+                variant="default">
+                {item.icon}
+                {item.title}
+              </Tab>
+            </Tooltip>
+          );
+        })}
+        <BackdropTab
+          type={type}
+          borderRadius={borderRadius}
+          className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
+          css={{
+            width: tabWidth,
+            transform: `translateX(${transformPosition}px)`,
+          }}
+        />
+      </Tabs>
+    </Container>
+  );
+}

package/src/components/Tabs/Tabs.types.tsx

@@ -0,0 +1,34 @@
+import type { Tabs } from './Tabs.styles.js';
+import type * as Stitches from '@stitches/react';
+
+type BaseItem = {
+  id: string | number;
+  tooltip?: React.ReactNode;
+};
+
+type ItemWithTitle = BaseItem & {
+  title: string;
+  icon?: React.ReactNode;
+};
+
+type ItemWithIcon = BaseItem & {
+  icon: React.ReactNode;
+  title?: string;
+};
+
+type Item = ItemWithTitle | ItemWithIcon;
+type BaseProps = Stitches.VariantProps<typeof Tabs>;
+type BaseType = Exclude<BaseProps['type'], object>;
+type BaseBorderRadius = Exclude<BaseProps['borderRadius'], object>;
+
+export interface TabsPropTypes {
+  items: Item[];
+  container?: HTMLElement;
+  onChange: (item: Item) => void;
+  value: string;
+  type: BaseType;
+  borderRadius?: BaseBorderRadius;
+  className?: string;
+  scrollable?: boolean;
+  scrollButtons?: boolean;
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { TabsComponent as Tabs } from './Tabs.js';
+export type { TabsPropTypes } from './Tabs.types.js';

package/src/components/TextField/TextField.styles.ts

@@ -0,0 +1,208 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const InputContainer = styled('div', {
+  borderRadius: '$xs',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  variants: {
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+      false: {
+        width: 'fit-content',
+      },
+    },
+    size: {
+      small: {},
+      large: {
+        borderRadius: '$xl',
+      },
+    },
+    suffix: {
+      true: {},
+      false: {
+        padding: 0,
+      },
+    },
+    prefix: {
+      true: {},
+      false: {
+        padding: 0,
+      },
+    },
+
+    variant: {
+      contained: {
+        $$color: '$colors$neutral100',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$neutral300',
+        },
+        backgroundColor: '$$color',
+        '&:hover': {
+          $$color: '$colors$secondary100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral100',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        border: '1px solid $neutral100',
+        '&:hover': {
+          $$color: '$colors$secondary100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          borderColor: '$$color',
+        },
+      },
+      ghost: {
+        background: 'transparent',
+      },
+    },
+
+    disabled: {
+      true: {},
+      false: {},
+    },
+    status: {
+      default: {
+        borderColor: 'transparent',
+      },
+      error: {
+        borderColor: '$error500',
+      },
+      warning: {
+        borderColor: '$warning500',
+      },
+      success: {
+        borderColor: '$secondary500',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'small',
+      suffix: true,
+      css: {
+        paddingRight: '$15',
+      },
+    },
+    {
+      size: 'small',
+      prefix: true,
+      css: {
+        paddingLeft: '$15',
+      },
+    },
+    {
+      size: 'large',
+      suffix: true,
+      css: {
+        paddingRight: '$10',
+      },
+    },
+    {
+      size: 'large',
+      prefix: true,
+      css: {
+        paddingLeft: '$10',
+      },
+    },
+    {
+      variant: 'contained',
+      disabled: true,
+      css: {
+        '&:hover': {
+          backgroundColor: '$neutral100',
+        },
+      },
+    },
+    {
+      variant: 'outlined',
+      disabled: true,
+      css: {
+        '&:hover': {
+          borderColor: '$neutral100',
+        },
+      },
+    },
+  ],
+});
+
+export const Input = styled('input', {
+  flexGrow: 1,
+  color: '$foreground',
+  fontSize: '$14',
+  lineHeight: '$20',
+  fontWeight: 400,
+  border: 'none',
+  outline: 'none',
+  fontFamily: 'inherit',
+  maxWidth: '100%',
+  variants: {
+    prefix: {
+      true: {
+        paddingLeft: '$0',
+      },
+      false: {},
+    },
+    size: {
+      small: {
+        padding: '$6 $15 $6 $0',
+      },
+      large: {
+        padding: '$10 $10 $10 $0',
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      size: 'small',
+      prefix: false,
+      css: {
+        paddingLeft: '$15',
+      },
+    },
+    {
+      size: 'large',
+      prefix: false,
+      css: {
+        paddingLeft: '$10',
+      },
+    },
+  ],
+  backgroundColor: 'transparent',
+  '-webkit-appearance': 'none',
+  margin: 0,
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
+  },
+  '&[type="number"]': {
+    '-moz-appearance': 'textfield',
+  },
+
+  '&::placeholder, &::-webkit-input-placeholder': {
+    color: '$neutral700',
+    [`.${darkTheme} &`]: {
+      color: '$neutral900',
+    },
+  },
+  '&:focus-visible': {
+    outline: 'none',
+  },
+});
+
+export const Label = styled('label', {
+  display: 'inline-block',
+});