@100mslive/roomkit-react 0.1.1 → 0.1.2-alpha.1

package/dist/{transcription-L6VBK75V.js → transcription-XYVVYRAS.js}

@@ -1,7 +1,7 @@
 import {
   Box,
   Text
-} from "./chunk-A2PNZIK7.js";
+} from "./chunk-INRXWU7L.js";
 import {
   IconButton_default,
   SESSION_STORE_KEY,
@@ -12,7 +12,7 @@ import {
   __spreadValues,
   define_process_env_default,
   init_define_process_env
-} from "./chunk-4VY5NUK7.js";
+} from "./chunk-DRKV2LAC.js";
 
 // src/Prebuilt/plugins/transcription/index.jsx
 init_define_process_env();
@@ -353,4 +353,4 @@ function TranscriptionButton() {
 export {
   TranscriptionButton as default
 };
-//# sourceMappingURL=transcription-L6VBK75V.js.map
+//# sourceMappingURL=transcription-XYVVYRAS.js.map

package/package.json

@@ -4,7 +4,13 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.1.1",
+  "keywords": [
+    "100mslive",
+    "react",
+    "prebuilt",
+    "roomkit"
+  ],
+  "version": "0.1.2-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -69,10 +75,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.10",
-    "@100mslive/hms-virtual-background": "1.11.10",
-    "@100mslive/react-icons": "0.8.10",
-    "@100mslive/react-sdk": "0.8.10",
+    "@100mslive/hls-player": "0.1.11-alpha.1",
+    "@100mslive/hms-virtual-background": "1.11.11-alpha.1",
+    "@100mslive/react-icons": "0.8.11-alpha.1",
+    "@100mslive/react-sdk": "0.8.11-alpha.1",
+    "@100mslive/types-prebuilt": "0.8.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -95,9 +102,7 @@
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.7",
     "hls.js": "^1.3.0",
-    "js-confetti": "^0.10.2",
     "lodash.merge": "^4.6.2",
-    "mobx": "^6.3.12",
     "pusher-js": "^7.0.3",
     "qrcode.react": "^3.1.0",
     "react-draggable": "^4.4.5",
@@ -109,9 +114,8 @@
     "recordrtc": "^5.6.2",
     "screenfull": "^5.1.0",
     "uuid": "^8.3.2",
-    "web-vitals": "^1.0.1",
     "worker-timers": "^7.0.40",
     "zipyai": "^1.3.24"
   },
-  "gitHead": "738907da963a83b6e56f791c0bf0832b76725693"
+  "gitHead": "77689c9a3c78a96eee185867899d4374b7852879"
 }

package/src/Accordion/Accordion.tsx

@@ -37,14 +37,14 @@ const StyledTrigger = styled(BaseAccordion.Trigger, {
   justifyContent: 'space-between',
   fontSize: '$md',
   lineHeight: '$md',
-  color: '$textHighEmp',
+  color: '$on_surface_high',
 });
 
 const StyledContent = styled(BaseAccordion.Content, {
   display: 'contents',
   fontSize: '$md',
   fontFamily: '$sans',
-  color: '$textMedEmp',
+  color: '$on_surface_medium',
   '&[data-state="open"]': {
     animation: `${slideDown('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
   },
@@ -54,7 +54,7 @@ const StyledContent = styled(BaseAccordion.Content, {
 });
 
 const StyledChevron = styled(ChevronUpIcon, {
-  color: '$textPrimary',
+  color: '$on_primary_high',
   transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
   '[data-state=closed] &': { transform: 'rotate(180deg)' },
 });

package/src/AudioLevel/AudioLevel.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '../Theme';
  */
 export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
   const { theme } = useTheme();
-  const color = theme.colors.brandDefault.value;
+  const color = theme.colors.primary_default.value;
   const getStyle = useCallback(
     (level: number) => {
       const style: Record<string, string> = {

package/src/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { VariantProps } from '@stitches/react';
+import { PersonIcon } from '@100mslive/react-icons';
 import { styled } from '../Theme';
 import { getAvatarBg } from './getAvatarBg';
 import { flexCenter } from '../utils/styles';
@@ -10,7 +11,7 @@ const getAvatarShape = (radii: string) => ({
 
 export const StyledAvatar = styled('div', {
   ...flexCenter,
-  color: '$white',
+  color: '$colors$on_primary_high',
   fontFamily: '$sans',
   aspectRatio: 1,
   fontWeight: 600,
@@ -46,10 +47,14 @@ type Props = VariantProps<typeof StyledAvatar> &
   };
 
 export const Avatar: React.FC<Props> = ({ name, css, ...props }) => {
-  const { initials, color } = getAvatarBg(name);
+  const { initials } = getAvatarBg(name);
+  let { color } = getAvatarBg(name);
+  if (!name) {
+    color = '#7E47EB';
+  }
   return (
     <StyledAvatar css={{ bg: color, ...css }} {...props}>
-      {initials}
+      {initials || <PersonIcon height={40} width={40} />}
     </StyledAvatar>
   );
 };

package/src/Button/Button.tsx

@@ -11,38 +11,52 @@ import { flexCenter } from '../utils/styles';
  * @returns CSS object based on the state
  */
 
-const getOutlinedVariants = (base: string, hover: string, active: string, disabled: string) => {
+const getOutlinedVariants = (
+  base: string,
+  hover: string,
+  active: string,
+  disabled: string,
+  text: string,
+  textDisabled: string,
+) => {
   return {
     bg: '$transparent',
-    border: `solid $space$px ${base}`,
-    c: '$textHighEmp',
+    border: `solid $space$px $colors${base}`,
+    c: text,
     '&[disabled]': {
-      c: '$textAccentDisabled',
+      c: textDisabled,
       bg: '$transparent',
-      border: `solid $space$px ${disabled}`,
+      border: `solid $space$px $colors${disabled}`,
       cursor: 'not-allowed',
     },
     '&:not([disabled]):hover': {
-      border: `solid $space$px ${hover}`,
+      border: `solid $space$px $colors${hover}`,
       bg: '$transparent',
     },
     '&:not([disabled]):active': {
-      border: `solid $space$px ${active}`,
+      border: `solid $space$px $colors${active}`,
       bg: '$transparent',
     },
     '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px ${base}`,
+      boxShadow: `0 0 0 3px $colors${base}`,
     },
   };
 };
 
-const getButtonVariants = (base: string, hover: string, active: string, disabled: string) => {
+const getButtonVariants = (
+  base: string,
+  hover: string,
+  active: string,
+  disabled: string,
+  text: string,
+  textDisabled: string,
+) => {
   return {
     bg: base,
     border: `1px solid ${base}`,
-    c: '$textAccentHigh',
+    c: text,
     '&[disabled]': {
-      c: '$textAccentDisabled',
+      c: textDisabled,
       cursor: 'not-allowed',
       bg: disabled,
       border: `1px solid ${disabled}`,
@@ -72,7 +86,7 @@ const StyledButton = styled('button', {
   border: 'none',
   fs: '$md',
   r: '$1',
-  backgroundColor: '$primaryDefault',
+  backgroundColor: '$primary_default',
   fontWeight: '500',
   whiteSpace: 'nowrap',
   p: '$4 $8',
@@ -81,31 +95,73 @@ const StyledButton = styled('button', {
     outline: 'none',
   },
   '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primaryDefault',
+    boxShadow: '0 0 0 3px $colors$primary_default',
   },
   transition: 'all 0.2s  ease',
   compoundVariants: [
     {
       variant: 'standard',
       outlined: true,
-      css: getOutlinedVariants('$secondaryDefault', '$secondaryLight', '$secondaryDark', '$secondaryDisabled'),
+      css: getOutlinedVariants(
+        '$secondary_default',
+        '$secondary_bright',
+        '$secondary_dim',
+        '$secondary_disabled',
+        '$on_secondary_high',
+        '$on_secondary_low',
+      ),
     },
     {
       variant: 'danger',
       outlined: true,
-      css: getOutlinedVariants('$errorDefault', '$errorLight', '$errorDark', '$errorDisabled'),
+      css: getOutlinedVariants(
+        '$alert_error_default',
+        '$alert_error_bright',
+        '$alert_error_dim',
+        '$alert_error_brighter',
+        '$on_surface_high',
+        '$on_surface_low',
+      ),
     },
     {
       variant: 'primary',
       outlined: true,
-      css: getOutlinedVariants('$primaryDefault', '$primaryLight', '$primaryDark', '$primaryDisabled'),
+      css: getOutlinedVariants(
+        '$primary_default',
+        '$primary_bright',
+        '$primary_dim',
+        '$primary_disabled',
+        '$on_primary_high',
+        '$on_primary_low',
+      ),
     },
   ],
   variants: {
     variant: {
-      standard: getButtonVariants('$secondaryDefault', '$secondaryLight', '$secondaryDark', '$secondaryDisabled'),
-      danger: getButtonVariants('$errorDefault', '$errorLight', '$errorDark', '$errorDisabled'),
-      primary: getButtonVariants('$primaryDefault', '$primaryLight', '$primaryDark', '$primaryDisabled'),
+      standard: getButtonVariants(
+        '$secondary_default',
+        '$secondary_bright',
+        '$secondary_dim',
+        '$secondary_disabled',
+        '$on_secondary_high',
+        '$on_secondary_low',
+      ),
+      danger: getButtonVariants(
+        '$alert_error_default',
+        '$alert_error_bright',
+        '$alert_error_dim',
+        '$alert_error_dim',
+        '$on_surface_high',
+        '$on_surface_low',
+      ),
+      primary: getButtonVariants(
+        '$primary_default',
+        '$primary_bright',
+        '$primary_dim',
+        '$primary_disabled',
+        '$on_primary_high',
+        '$on_primary_low',
+      ),
     },
     outlined: {
       true: {},
@@ -128,7 +184,7 @@ export const Button = React.forwardRef<
       <>
         {loading && (
           <Flex align="center" justify="center" css={{ w: '100%', position: 'absolute', left: '0' }}>
-            <Loading color="currentColor" />
+            <Loading />
           </Flex>
         )}
         <Flex

package/src/Checkbox/Checkbox.tsx

@@ -3,8 +3,8 @@ import { styled } from '../Theme';
 
 const CheckboxRoot = styled(CheckboxPrimitive.Root, {
   all: 'unset',
-  border: '1px solid $brandDefault',
-  backgroundColor: '$white',
+  border: '1px solid $primary_default',
+  backgroundColor: '$on_primary_high',
   width: '$8',
   height: '$8',
   borderRadius: '$0',
@@ -19,12 +19,12 @@ const CheckboxRoot = styled(CheckboxPrimitive.Root, {
     outline: 'none',
   },
   '&[data-state="checked"]': {
-    backgroundColor: '$brandDefault',
+    backgroundColor: '$primary_default',
   },
 });
 
 const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
-  color: '$white',
+  color: '$on_primary_high',
 });
 
 export const Checkbox = {

package/src/Collapsible/Collapsible.tsx

@@ -11,7 +11,7 @@ const CollapsibleTrigger = styled(Trigger, {
     outline: 'none',
   },
   '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primaryDefault',
+    boxShadow: '0 0 0 3px $colors$primary_default',
   },
 });
 

package/src/Divider/Divider.tsx

@@ -12,7 +12,7 @@ const getHorizontalSpace = (space: string) => ({
 export const VerticalDivider = styled('span', {
   height: '25px',
   width: '1px',
-  backgroundColor: '$borderLight',
+  backgroundColor: '$border_bright',
   variants: {
     space: {
       1: getVerticalSpace('$1'),
@@ -30,7 +30,7 @@ export const HorizontalDivider = styled('span', {
   height: '1px',
   width: '100%',
   display: 'block',
-  backgroundColor: '$borderLight',
+  backgroundColor: '$border_bright',
   variants: {
     space: {
       1: getHorizontalSpace('$1'),

package/src/Divider/HorizontalDivider.stories.tsx

@@ -17,12 +17,12 @@ export default {
 
 const HorizontalDividerComponent: ComponentStory<typeof HorizontalDivider> = ({ space, css }) => {
   return (
-    <Flex align="center" direction="column" css={{ width: 'max-content', bg: '$bgTertiary', p: '$8', r: '$4' }}>
+    <Flex align="center" direction="column" css={{ width: 'max-content', bg: '$surface_bright', p: '$8', r: '$4' }}>
       <ul style={{ listStyle: 'none', padding: '0px', margin: '0px', textAlign: 'center' }}>
         <Text as="li">Item 1</Text>
         <Text as="li">Item 2</Text>
         <Text as="li">Item 3</Text>
-        <HorizontalDivider space={space} css={{ bg: '$textSecondary', width: '80px', ...css }} />
+        <HorizontalDivider space={space} css={{ bg: '$on_primary_medium', width: '80px', ...css }} />
         <Text as="li">Item 4</Text>
         <Text as="li">Item 5</Text>
         <Text as="li">Item 6</Text>

package/src/Divider/VerticalDivider.stories.tsx

@@ -26,7 +26,7 @@ const VerticalDividerComponent: ComponentStory<typeof VerticalDivider> = ({ spac
           Add Stuff
         </Text>
       </Button>
-      <VerticalDivider space={space} css={{ bg: '$textPrimary', ...css }} />
+      <VerticalDivider space={space} css={{ bg: '$on_primary_high', ...css }} />
       <Button icon variant="danger">
         <AddIcon />
         <Text as="span" variant="button" css={{ c: 'white' }}>

package/src/Dropdown/Dropdown.stories.tsx

@@ -27,9 +27,9 @@ const Template: ComponentStory<typeof Dropdown.Content> = () => {
       <Dropdown.Trigger asChild>
         <Box
           css={{
-            color: '$textPrimary',
+            color: '$on_surface_high',
             borderRadius: '$1',
-            border: '1px solid $textDisabled',
+            border: '1px solid $border_default',
             padding: '$4 $4',
             width: '$80',
           }}
@@ -76,7 +76,7 @@ const Template: ComponentStory<typeof Dropdown.Content> = () => {
                     <Text variant="md" css={{ ...textEllipsis(150), fontWeight: '$semiBold' }}>
                       {peer.name}
                     </Text>
-                    <Text variant="sub2" css={{ color: '$textMedEmp' }}>
+                    <Text variant="sub2" css={{ color: '$on_surface_medium' }}>
                       {peer.roleName}
                     </Text>
                   </Flex>

package/src/Dropdown/Dropdown.tsx

@@ -21,49 +21,51 @@ const DropdownTrigger = styled(Trigger, {
   cursor: 'pointer',
   appearance: 'none !important',
   '&[data-state="open"]': {
-    backgroundColor: '$surfaceLight',
+    backgroundColor: '$surface_bright',
   },
   '&:focus': {
     outline: 'none',
   },
   '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primaryDefault',
+    boxShadow: '0 0 0 3px $colors$primary_default',
   },
 });
 
 const DropdownTriggerItem = styled(SubTrigger, {
   w: '100%',
-  color: '$textPrimary',
+  color: '$on_surface_high',
   p: '$8',
   display: 'flex',
   alignItems: 'center',
   '&:hover': {
     cursor: 'pointer',
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
   },
   '&:focus-visible': {
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
+    outline: 'none',
   },
 });
 
 const DropdownItem = styled(Item, {
-  color: '$textPrimary',
+  color: '$on_surface_high',
   p: '$8',
   display: 'flex',
   alignItems: 'center',
   outline: 'none',
+  backgroundColor: '$surface_default',
   '&:hover': {
     cursor: 'pointer',
-    bg: '$surfaceLighter',
+    bg: '$surface_bright',
   },
   '&:focus-visible': {
-    bg: '$surfaceLighter',
+    bg: '$surface_bright',
   },
 });
 
 const DropdownItemSeparator = styled(Separator, {
   h: 1,
-  backgroundColor: '$grayDefault',
+  backgroundColor: '$border_bright',
   m: '$4 $8',
 });
 
@@ -72,7 +74,7 @@ const DropdownContent = styled(Content, {
   maxHeight: '$64',
   r: '$1',
   py: '$4',
-  backgroundColor: '$surfaceLight',
+  backgroundColor: '$surface_default',
   overflowY: 'auto',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   zIndex: 20,
@@ -96,24 +98,24 @@ const DropdownSubMenuContent = styled(SubContent, {
   maxHeight: '$64',
   r: '$1',
   py: '$4',
-  backgroundColor: '$surfaceLight',
+  backgroundColor: '$surface_bright',
   overflowY: 'auto',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   zIndex: 20,
 });
 
 const DropdownCheckboxItem = styled(CheckboxItem, {
-  color: '$textPrimary',
+  color: '$on_surface_high',
   p: '$8',
   display: 'flex',
   alignItems: 'center',
   outline: 'none',
   '&:hover': {
     cursor: 'pointer',
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
   },
   '&:focus-visible': {
-    bg: '$surfaceLighter',
+    bg: '$surface_brighter',
   },
   gap: '$2',
 });

package/src/IconButton/IconButton.tsx

@@ -3,21 +3,22 @@ import { flexCenter } from '../utils/styles';
 
 export const IconButton = styled('button', {
   ...flexCenter,
+  alignItems: 'center',
   outline: 'none',
   border: 'none',
   padding: '$2',
   r: '$0',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  color: '$textPrimary',
+  color: '$on_surface_high',
   '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$brandDefault',
+    boxShadow: '0 0 0 3px $colors$primary_default',
   },
   '&:not([disabled]):focus': {
     outline: 'none',
   },
   '&:not([disabled]):hover': {
-    backgroundColor: '$iconHoverBg',
+    backgroundColor: '$on_surface_low',
   },
   '&[disabled]': {
     opacity: 0.5,
@@ -29,15 +30,15 @@ export const IconButton = styled('button', {
   variants: {
     active: {
       false: {
-        backgroundColor: '$secondaryDark',
-        color: '$textPrimary',
+        backgroundColor: '$secondary_dim',
+        color: '$on_primary_high',
         '&:not([disabled]):hover': {
-          backgroundColor: '$secondaryDefault',
+          backgroundColor: '$secondary_default',
         },
       },
       true: {
         '&:not([disabled]):hover': {
-          backgroundColor: '$iconHoverBg',
+          backgroundColor: '$on_surface_low',
         },
       },
     },

package/src/Input/Input.tsx

@@ -7,25 +7,26 @@ import { styled } from '../Theme';
 export const Input = styled('input', {
   fontFamily: '$sans',
   lineHeight: 'inherit',
-  backgroundColor: '$surfaceLight',
+  backgroundColor: '$surface_default',
   borderRadius: '8px',
   outline: 'none',
-  border: '1px solid $borderLight',
+  border: '1px solid $border_default',
   padding: '0.5rem 0.75rem',
-  color: '$textPrimary',
+  minHeight: '30px',
+  color: '$on_surface_high',
   fontSize: '$md',
   '&:focus': {
-    boxShadow: '0 0 0 1px $colors$borderAccent',
+    boxShadow: '0 0 0 1px $colors$primary_default',
     border: '1px solid transparent',
   },
   '&::placeholder': {
-    color: '$textDisabled',
+    color: '$on_surface_low',
   },
   variants: {
-    error: {
+    alert_error_default: {
       true: {
         '&:focus': {
-          boxShadow: '0 0 0 3px $colors$error',
+          boxShadow: '0 0 0 3px $colors$alert_error_default',
         },
       },
     },
@@ -68,7 +69,7 @@ const PasswordIcons = React.forwardRef<HTMLDivElement, PropsWithChildren<Compone
           height: '100%',
           zIndex: 10,
           right: '$4',
-          bg: '$surfaceLight',
+          bg: '$surface_bright',
           alignItems: 'center',
           ...css,
         }}

package/src/Input/PasswordInput.stories.tsx

@@ -32,7 +32,7 @@ const Template: ComponentStory<typeof PasswordInput.Root> = args => {
               setShowPassword(!showPassword);
             }}
             css={{
-              color: '$textPrimary',
+              color: '$on_primary_high',
             }}
           />
           <PasswordInput.CopyIcon
@@ -40,7 +40,7 @@ const Template: ComponentStory<typeof PasswordInput.Root> = args => {
               navigator.clipboard.writeText(text);
             }}
             css={{
-              color: '$textPrimary',
+              color: '$on_primary_high',
             }}
           />
         </PasswordInput.Icons>

package/src/Label/Label.tsx

@@ -4,5 +4,5 @@ import { styled } from '../Theme';
 export const Label = styled(LabelPrimitive.Root, {
   fontFamily: '$sans',
   fontSize: '$md',
-  color: '$textPrimary',
+  color: '$on_primary_high',
 });

package/src/Link/Link.tsx

@@ -12,15 +12,15 @@ const LinkComponent = styled('a', {
   variants: {
     color: {
       highEmp: {
-        color: '$textHighEmp',
+        color: '$on_surface_high',
         '&:hover': {
-          color: '$textMedEmp',
+          color: '$on_surface_medium',
         },
       },
       primary: {
-        color: '$primaryLight',
+        color: '$primary_default',
         '&:hover': {
-          color: '$primaryDefault',
+          color: '$primary_bright',
         },
       },
     },