@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Input/Input.tsx

@@ -1,109 +0,0 @@
-import React, { ComponentProps, PropsWithChildren, PropsWithRef } from 'react';
-import { CSS } from '@stitches/react';
-import { CopyIcon, EyeCloseIcon, EyeOpenIcon } from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-export const Input = styled('input', {
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  backgroundColor: '$surface_default',
-  borderRadius: '8px',
-  outline: 'none',
-  border: '1px solid $border_default',
-  padding: '0.5rem 0.75rem',
-  minHeight: '30px',
-  color: '$on_surface_high',
-  fontSize: '$md',
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&:focus': {
-    boxShadow: '0 0 0 1px $colors$primary_default',
-    border: '1px solid transparent',
-  },
-  '&::placeholder': {
-    color: '$on_surface_medium',
-  },
-  variants: {
-    error: {
-      true: {
-        '&:focus': {
-          boxShadow: '0 0 0 3px $colors$alert_error_default',
-        },
-      },
-    },
-  },
-});
-
-const PasswordRoot = styled('div', {
-  w: '100%',
-  position: 'relative',
-  display: 'flex',
-});
-
-const PasswordShowIcon: React.FC<ComponentProps<typeof Flex> & { showPassword?: boolean; css?: CSS }> = ({
-  showPassword,
-  css,
-  ...props
-}) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      {showPassword ? <EyeOpenIcon /> : <EyeCloseIcon />}
-    </Flex>
-  );
-};
-
-const PasswordCopyIcon: React.FC<ComponentProps<typeof Flex & { css?: CSS }>> = ({ css, ...props }) => {
-  return (
-    <Flex css={{ ...css }} {...props}>
-      <CopyIcon />
-    </Flex>
-  );
-};
-
-const PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<ComponentProps<typeof Flex & { css?: CSS }>>>(
-  ({ css, ...props }, ref) => {
-    return (
-      <Flex
-        css={{
-          position: 'absolute',
-          top: 0,
-          height: '100%',
-          zIndex: 10,
-          right: '$4',
-          bg: '$surface_bright',
-          alignItems: 'center',
-          ...css,
-        }}
-        ref={ref}
-        {...props}
-      >
-        {props.children}
-      </Flex>
-    );
-  },
-);
-
-const ReactInput: React.FC<PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>> =
-  React.forwardRef<
-    HTMLInputElement,
-    PropsWithRef<ComponentProps<typeof Input> & { showPassword?: boolean; css?: CSS }>
-  >(({ showPassword = false, css, ...props }, ref) => {
-    return (
-      <Input
-        css={{ flexGrow: 1, width: '100%', ...css }}
-        type={showPassword ? 'text' : 'password'}
-        {...props}
-        ref={ref}
-      />
-    );
-  });
-
-export const PasswordInput = {
-  Root: PasswordRoot,
-  Icons: PasswordIcons,
-  Input: ReactInput,
-  ShowIcon: PasswordShowIcon,
-  CopyIcon: PasswordCopyIcon,
-};

package/src/Input/index.tsx

@@ -1 +0,0 @@
-export * from './Input';

package/src/Label/Label.tsx

@@ -1,8 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { styled } from '../Theme';
-
-export const Label = styled(LabelPrimitive.Root, {
-  fontFamily: '$sans',
-  fontSize: '$md',
-  color: '$on_primary_high',
-});

package/src/Label/index.ts

@@ -1 +0,0 @@
-export * from './Label';

package/src/Layout/Box.tsx

@@ -1,3 +0,0 @@
-import { styled } from '../Theme';
-
-export const Box = styled('div', {});

package/src/Layout/Flex.tsx

@@ -1,76 +0,0 @@
-import { styled } from '../Theme';
-
-/**
- * @see https://tailwindcss.com/docs/space
- */
-const gapStyles = (value: number) => {
-  return {
-    '& > * + *': {
-      marginRight: '0',
-      marginLeft: `${0.25 * value}rem`,
-    },
-  };
-};
-
-export const Flex = styled('div', {
-  display: 'flex',
-  variants: {
-    justify: {
-      start: {
-        justifyContent: 'flex-start',
-      },
-      end: {
-        justifyContent: 'flex-end',
-      },
-      center: {
-        justifyContent: 'center',
-      },
-      between: {
-        justifyContent: 'space-between',
-      },
-      around: {
-        justifyContent: 'space-around',
-      },
-      evenly: {
-        justifyContent: 'space-evenly',
-      },
-    },
-    align: {
-      start: {
-        alignItems: 'flex-start',
-      },
-      end: {
-        alignItems: 'flex-end',
-      },
-      center: {
-        alignItems: 'center',
-      },
-      baseline: {
-        alignItems: 'baseline',
-      },
-      stretch: {
-        alignItems: 'stretch',
-      },
-    },
-    direction: {
-      row: {
-        flexDirection: 'row',
-      },
-      column: {
-        flexDirection: 'column',
-      },
-      rowReverse: {
-        flexDirection: 'row-reverse',
-      },
-      columnReverse: {
-        flexDirection: 'column-reverse',
-      },
-    },
-    gap: {
-      1: gapStyles(1),
-      2: gapStyles(2),
-      3: gapStyles(3),
-      4: gapStyles(4),
-    },
-  },
-});

package/src/Layout/index.tsx

@@ -1,2 +0,0 @@
-export { Flex } from './Flex';
-export { Box } from './Box';

package/src/Link/Link.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import * as icons from '@100mslive/react-icons';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { styled } from '../Theme';
-
-const LinkComponent = styled('a', {
-  textDecoration: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$5',
-  variants: {
-    color: {
-      highEmp: {
-        color: '$on_surface_high',
-        '&:hover': {
-          color: '$on_surface_medium',
-        },
-      },
-      primary: {
-        color: '$primary_default',
-        '&:hover': {
-          color: '$primary_bright',
-        },
-      },
-    },
-  },
-});
-
-export interface LinkProps extends React.ComponentProps<typeof LinkComponent> {
-  as?: React.ElementType;
-  iconSide?: 'left' | 'right' | 'none';
-  icon?: keyof typeof icons;
-  color?: 'highEmp' | 'primary';
-}
-
-export const Link = ({ iconSide = 'left', icon, color = 'primary', children, ...rest }: LinkProps) => {
-  const Icon = icon ? icons[icon] : React.Fragment;
-  const renderedIcon = icon ? (
-    <Flex as="span">
-      <Icon height={13.33} width={13.33} />{' '}
-    </Flex>
-  ) : null;
-
-  return (
-    <LinkComponent {...rest} color={color}>
-      {iconSide === 'left' && renderedIcon}
-      <Text as="span" variant="body2" css={{ color: 'inherit' }}>
-        {children}
-      </Text>
-      {iconSide === 'right' && renderedIcon}
-    </LinkComponent>
-  );
-};

package/src/Link/index.tsx

@@ -1,2 +0,0 @@
-export { Link } from './Link';
-export type { LinkProps } from './Link';

package/src/Loading/Loading.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-type Props = {
-  /**
-   * Adjusts width and height
-   */
-  size?: number | string;
-  /**
-   * Color of Loader
-   */
-  color?: string;
-};
-
-type LoadingProps = Props & React.SVGProps<SVGSVGElement>;
-
-export const Loading = ({ size = 24, color = 'white', ...props }: LoadingProps) => (
-  <svg width={size} height={size} viewBox="0 0 50 50" fill={color} xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx="25" cy="25" r="20" stroke={color} strokeWidth="4" strokeDasharray="70 30" fill="none">
-      <animateTransform
-        attributeName="transform"
-        attributeType="XML"
-        type="rotate"
-        from="0 25 25"
-        to="360 25 25"
-        dur="1s"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
-);

package/src/Loading/index.ts

@@ -1 +0,0 @@
-export { Loading } from './Loading';

package/src/Modal/Dialog.tsx

@@ -1,57 +0,0 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
-import { Root } from '@radix-ui/react-dialog';
-import { styled } from '@stitches/react';
-import {
-  CustomDialogContent,
-  CustomDialogOverlay,
-  DialogClose,
-  DialogDefaultCloseIcon,
-  DialogDescription,
-  DialogTitle,
-  StyledDialogPortal,
-  StyledDialogTrigger,
-} from './DialogContent';
-import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
-
-const StyledDialog = styled(Root, {});
-
-// Handles race conditions when multiple elements with dismissable layer are present
-// https://github.com/radix-ui/primitives/issues/2122
-const DialogRoot = <T extends React.ComponentProps<typeof StyledDialog>>(props: T) => {
-  useEffect(() => {
-    return () => {
-      if (document) setTimeout(() => (document.body.style.pointerEvents = 'auto'), 0);
-    };
-  }, []);
-  return <StyledDialog {...(props as object)} />;
-};
-
-const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
-  const dialogContainerSelector = useDialogContainerSelector();
-  const containerRef = useRef<HTMLElement | null>(null);
-
-  if (container) {
-    containerRef.current = container;
-  } else if (dialogContainerSelector && !containerRef.current) {
-    containerRef.current = document.querySelector(dialogContainerSelector) as HTMLElement;
-  } else if (!containerRef.current) {
-    containerRef.current = document.body;
-  }
-  return (
-    <StyledDialogPortal container={containerRef.current}>
-      <>{children}</>
-    </StyledDialogPortal>
-  );
-};
-
-export const Dialog = {
-  Root: DialogRoot,
-  Trigger: StyledDialogTrigger,
-  Overlay: CustomDialogOverlay,
-  Content: CustomDialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-  DefaultClose: DialogDefaultCloseIcon,
-  Portal: CustomDialogPortal,
-};

package/src/Modal/DialogContent.tsx

@@ -1,65 +0,0 @@
-import React, { ComponentProps } from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { CrossIcon } from '@100mslive/react-icons';
-import { IconButton } from '../IconButton';
-import { styled } from '../Theme';
-import { dialogClose, dialogOpen } from '../utils/animations';
-
-export const DialogClose = styled(DialogPrimitive.Close, {
-  backgroundColor: 'transparent',
-  padding: '0',
-  margin: '0',
-  border: 'none',
-  backgroundImage: 'none',
-});
-
-export const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {
-  appearance: 'none !important', // Needed for safari it shows white overlay
-});
-
-export const CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
-  backgroundColor: 'rgba(0, 0, 0, 0.5);',
-  position: 'absolute',
-  inset: 0,
-});
-
-export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
-
-export const CustomDialogContent = styled(DialogPrimitive.Content, {
-  color: '$on_surface_medium',
-  backgroundColor: '$surface_dim',
-  borderRadius: '8px',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  maxHeight: '95%',
-  overflowY: 'auto',
-  border: '$space$px solid $border_bright',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  transform: 'translate(-50%, -50%)',
-  zIndex: 999,
-  padding: '$12',
-  '@allowMotion': {
-    '&[data-state="open"]': {
-      animation: `${dialogOpen} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    },
-    '&[data-state="closed"]': {
-      animation: `${dialogClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    },
-  },
-  '&:focus': { outline: 'none' },
-});
-
-export const DialogTitle = styled(DialogPrimitive.Title, {
-  margin: 0,
-});
-
-export const DialogDescription = styled(DialogPrimitive.Description, {});
-
-export const DialogDefaultCloseIcon = (props: ComponentProps<typeof IconButton>) => (
-  <DialogClose asChild>
-    <IconButton {...props}>
-      <CrossIcon />
-    </IconButton>
-  </DialogClose>
-);

package/src/Modal/index.ts

@@ -1 +0,0 @@
-export { Dialog } from './Dialog';

package/src/Pagination/StyledPagination.tsx

@@ -1,70 +0,0 @@
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  height: '2rem',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  '& > * + *': {
-    marginRight: '0',
-    marginLeft: '0.5rem',
-  },
-});
-
-const Chevron = styled('button', {
-  color: '$on_surface_high',
-  border: 'none',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[disabled]': {
-    color: '$on_surface_low',
-    cursor: 'not-allowed',
-  },
-  backgroundColor: 'transparent',
-  display: 'flex',
-});
-
-const Dots = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  '& > * + *': {
-    marginRight: '0',
-    marginLeft: '0.5rem',
-  },
-});
-
-const Dot = styled('button', {
-  '&:focus': {
-    outline: 'none',
-  },
-  borderRadius: '9999px',
-  width: '0.5rem',
-  height: '0.5rem',
-  backgroundColor: '$on_surface_low',
-  padding: '0px',
-  border: 'none',
-  cursor: 'pointer',
-  variants: {
-    active: {
-      true: {
-        backgroundColor: '$on_surface_high',
-      },
-    },
-  },
-});
-
-interface PaginationType {
-  Root: typeof Root;
-  Chevron: typeof Chevron;
-  Dots: typeof Dots;
-  Dot: typeof Dot;
-}
-
-export const StyledPagination: PaginationType = {
-  Root,
-  Chevron,
-  Dots,
-  Dot,
-};

package/src/Pagination/index.tsx

@@ -1 +0,0 @@
-export { StyledPagination } from './StyledPagination';

package/src/Popover/index.tsx

@@ -1,34 +0,0 @@
-import { Arrow, Close, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
-import { styled } from '../Theme';
-import { popoverAnimation } from '../utils/animations';
-
-const StyledContent = styled(Content, {
-  padding: '$6',
-  borderRadius: '$2',
-  backgroundColor: '$background_default',
-  boxShadow: '$sm',
-  zIndex: 12,
-  ...popoverAnimation,
-});
-
-const StyledArrow = styled(Arrow, {
-  ...popoverAnimation,
-});
-
-const StyledTrigger = styled(Trigger, {
-  '&:hover': {
-    cursor: 'pointer',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-export const Popover = {
-  Root,
-  Content: StyledContent,
-  Trigger: StyledTrigger,
-  Portal: Portal,
-  Arrow: StyledArrow,
-  Close: Close,
-};