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

package/src/components/Button/Button.styles.tsx

@@ -0,0 +1,564 @@
+import { darkTheme, keyframes, styled } from '../../theme.js';
+
+export const ButtonBase = styled('button', {
+  position: 'relative',
+  display: 'flex',
+  overflow: 'hidden',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '$16',
+  fontWeight: '$400',
+  border: '0',
+  borderRadius: '$secondary',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  fontFamily: 'inherit',
+  variants: {
+    size: {
+      xxsmall: {
+        fontSize: '$10',
+        lineHeight: '12px',
+        padding: '$4',
+      },
+      xsmall: {
+        fontSize: '$12',
+        lineHeight: '12px',
+        padding: '$0 $4',
+      },
+      small: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '20px',
+        padding: '$4 $4',
+      },
+      medium: {
+        fontSize: '$16',
+        lineHeight: '24px',
+        fontWeight: '$medium',
+        padding: '$8 $8',
+      },
+      large: {
+        fontSize: '$18',
+        lineHeight: '26px',
+        padding: '$12 $24',
+        fontWeight: '$medium',
+      },
+    },
+    variant: {
+      contained: {
+        backgroundColor: '$background',
+        color: '$foreground',
+        border: 0,
+        '&:hover': {
+          backgroundColor: '$neutral300',
+        },
+        '&:focus-visible': {
+          backgroundColor: '$neutral500',
+          outline: 0,
+        },
+        '&:disabled': {
+          backgroundColor: '$neutral600',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+          pointerEvents: 'none',
+        },
+      },
+      outlined: {
+        backgroundColor: '$background',
+        border: 1,
+        borderStyle: 'solid',
+        color: '$foreground',
+        borderColor: '$neutral200',
+        '&:hover': {
+          borderColor: '$neutral300',
+        },
+        '&:focus-visible': {
+          borderColor: '$neutral500',
+          outline: 0,
+        },
+        '&:disabled': {
+          borderColor: '$neutral600',
+          color: '$neutral600',
+          pointerEvents: 'none',
+        },
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        color: '$neutral700',
+        '&:disabled': {
+          color: '$neutral600',
+          pointerEvents: 'none',
+        },
+        '&:focus-visible': {
+          backgroundColor: '$neutral500',
+          outline: 0,
+        },
+        '&:hover': {
+          color: '$secondary500',
+        },
+      },
+      default: {},
+    },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+    type: {
+      primary: {},
+      error: {},
+      warning: {},
+      success: {},
+      secondary: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      type: 'primary',
+      variant: 'contained',
+      css: {
+        background: '$primary500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$primary550',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:disabled': {
+          $$color: '$colors$background',
+          background: '$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+          pointerEvents: 'none',
+        },
+        '&:visited': {
+          background: '$primary500',
+        },
+        '&:active': {
+          backgroundColor: '$primary500',
+          backgroundSize: '100%',
+          transition: 'background 0s',
+        },
+        '&:focus-visible': {
+          background: '$primary550',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'outlined',
+      css: {
+        color: '$primary500',
+        borderColor: '$primary500',
+        '&:hover': {
+          color: '$primary550',
+          borderColor: '$primary550',
+        },
+        '&:focus-visible': {
+          color: '$primary550',
+          borderColor: '$primary550',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'primary',
+      variant: 'ghost',
+      css: {
+        color: '$primary500',
+        '&:hover': {
+          color: '$primary550',
+        },
+        '&:focus-visible': {
+          color: '$primary550',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'contained',
+      css: {
+        background: '$secondary500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$secondary550',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$secondary500',
+        },
+        '&:focus': {
+          background: '$secondary550',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          background: '$secondary550',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'outlined',
+      css: {
+        color: '$secondary500',
+        borderColor: '$secondary500',
+        '&:hover': {
+          color: '$secondary550',
+          borderColor: '$secondary550',
+        },
+        '&:visited': {
+          color: '$secondary500',
+          borderColor: '$secondary500',
+        },
+        '&:focus': {
+          color: '$secondary550',
+          borderColor: '$secondary500',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          color: '$secondary550',
+          borderColor: '$secondary500',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'secondary',
+      variant: 'ghost',
+      css: {
+        color: '$secondary500',
+        '&:hover': {
+          color: '$secondary550',
+        },
+        '&:visited': {
+          color: '$secondary500',
+        },
+        '&:focus': {
+          color: '$secondary550',
+          outline: 0,
+        },
+        '&:focus-visible': {
+          color: '$secondary550',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'contained',
+      css: {
+        background: '$error500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$error500',
+        },
+        '&:visited': {
+          background: '$error500',
+        },
+        '&:focus': {
+          background: '$error500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          outlineColor: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'outlined',
+      css: {
+        color: '$error500',
+        borderColor: '$error500',
+        '&:hover': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+        '&:visited': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+        '&:focus': {
+          color: '$error500',
+          borderColor: '$error500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          color: '$$outline',
+          outlineColor: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'error',
+      variant: 'ghost',
+      css: {
+        color: '$error500',
+        '&:hover': {
+          color: '$error500',
+        },
+        '&:visited': {
+          color: '$error500',
+        },
+        '&:focus': {
+          color: '$error500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$error600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$error300',
+          },
+          color: '$$outline',
+          outline: 0,
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'contained',
+      css: {
+        background: '$warning500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$warning500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$warning500',
+        },
+        '&:focus': {
+          background: '$warning500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          outlineColor: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'outlined',
+      css: {
+        color: '$warning500',
+        borderColor: '$warning500',
+        '&:hover': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+        '&:visited': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+        '&:focus': {
+          color: '$warning500',
+          borderColor: '$warning500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          outlineColor: '$$outline',
+          color: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'warning',
+      variant: 'ghost',
+      css: {
+        color: '$warning500',
+        '&:hover': {
+          color: '$warning500',
+        },
+        '&:visited': {
+          color: '$warning500',
+        },
+        '&:focus': {
+          color: '$warning500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$warning600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$warning300',
+          },
+          color: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'contained',
+      css: {
+        background: '$success500',
+        $$color: '$colors$background',
+        [`.${darkTheme} &`]: {
+          $$color: '$colors$foreground',
+        },
+        color: '$$color',
+        '&:hover': {
+          background: '$success500',
+          $$color: '$colors$background',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$foreground',
+          },
+          color: '$$color',
+        },
+        '&:visited': {
+          background: '$success500',
+        },
+        '&:focus': {
+          background: '$success500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outlineColor: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'outlined',
+      css: {
+        color: '$success500',
+        borderColor: '$success500',
+        '&:hover': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+        '&:visited': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+        '&:focus': {
+          color: '$success500',
+          borderColor: '$success500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outlineColor: '$$outline',
+          color: '$$outline',
+        },
+      },
+    },
+    {
+      type: 'success',
+      variant: 'ghost',
+      css: {
+        color: '$success500',
+        '&:hover': {
+          color: '$success500',
+        },
+        '&:visited': {
+          color: '$success500',
+        },
+        '&:focus': {
+          color: '$success500',
+        },
+        '&:focus-visible': {
+          $$outline: '$colors$success600',
+          [`.${darkTheme} &`]: {
+            $$outline: '$colors$success300',
+          },
+          outline: 0,
+          color: '$$outline',
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'medium',
+    variant: 'contained',
+  },
+});
+
+export const Content = styled('span', {
+  flexGrow: 1,
+  display: 'inline-block',
+  variants: {
+    pl: {
+      true: {
+        paddingLeft: '$8',
+      },
+    },
+    pr: {
+      true: {
+        paddingRight: '$8',
+      },
+    },
+  },
+});
+
+const ripple = keyframes({
+  to: {
+    transform: 'scale(2)',
+    opacity: 0.1,
+  },
+});
+
+export const RippleContainer = styled('div', {
+  position: 'absolute',
+  inset: '0',
+  overflow: 'hidden',
+  borderRadius: '$sm',
+
+  '& span': {
+    transform: 'scale(0)',
+    borderRadius: '100%',
+    position: 'absolute',
+    opacity: '0.75',
+    backgroundColor: '$neutral500',
+    animation: `${ripple} 0.8s linear`,
+  },
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,52 @@
+import type { ButtonPropTypes, Ref } from './Button.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Spinner } from '../Spinner/Spinner.js';
+
+import { ButtonBase, Content } from './Button.styles.js';
+import Ripple from './Ripple.js';
+
+function ButtonComponent(props: PropsWithChildren<ButtonPropTypes>, ref?: Ref) {
+  const {
+    children,
+    loading,
+    disabled,
+    prefix,
+    suffix,
+    onClick,
+    disableRipple,
+    ...otherProps
+  } = props;
+
+  const shouldShowRipple = !disabled && !loading && !disableRipple;
+
+  return (
+    <ButtonBase
+      disabled={!loading && disabled}
+      onClick={loading || disabled ? undefined : onClick}
+      {...otherProps}
+      ref={ref}>
+      {loading ? (
+        <Spinner css={{ width: '$24', height: '$24' }} />
+      ) : (
+        <>
+          {prefix}
+          {children && (
+            <Content pl={!!prefix} pr={!!suffix} className="_text">
+              {children}
+            </Content>
+          )}
+          {suffix}
+        </>
+      )}
+      {shouldShowRipple && <Ripple />}
+    </ButtonBase>
+  );
+}
+
+const Button = React.forwardRef(ButtonComponent);
+Button.displayName = 'Button';
+
+export { Button };

package/src/components/Button/Button.types.tsx

@@ -0,0 +1,28 @@
+import type { ButtonBase } from './Button.styles.js';
+import type * as Stitches from '@stitches/react';
+import type { HTMLAttributes } from 'react';
+
+type BaseProps = Stitches.VariantProps<typeof ButtonBase>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseTypes = Exclude<BaseProps['type'], object>;
+
+export type Ref =
+  | ((instance: HTMLButtonElement | null) => void)
+  | React.RefObject<HTMLButtonElement>
+  | null
+  | undefined;
+
+type ButtonElement = Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'>;
+
+export type ButtonPropTypes = ButtonElement & {
+  size?: BaseSizes;
+  variant?: BaseVariants;
+  type?: BaseTypes;
+  loading?: boolean;
+  disabled?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  fullWidth?: boolean;
+  disableRipple?: boolean;
+};