@100mslive/roomkit-react 0.1.0

package/dist/Toast/index.d.ts

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

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import { CSS } from '../Theme';
+export declare type alignTooltip = 'end' | 'center' | 'start' | undefined;
+export declare type sideTooltip = 'bottom' | 'left' | 'right' | 'top' | undefined;
+export declare const Tooltip: React.FC<PropsWithChildren<{
+    title: React.ReactNode | string;
+    outlined?: boolean;
+    side?: sideTooltip;
+    align?: alignTooltip;
+    disabled?: boolean;
+    triggerCss?: CSS;
+    boxCss?: CSS;
+    delayDuration?: number;
+}>>;

package/dist/Tooltip/index.d.ts

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

package/dist/Video/Video.d.ts

@@ -0,0 +1,499 @@
+import React from 'react';
+import type { VariantProps } from '@stitches/react';
+import { HMSPeer } from '@100mslive/react-sdk';
+export declare const StyledVideo: import("@stitches/react/types/styled-component").StyledComponent<"video", {
+    mirror?: boolean | "true" | undefined;
+    screenShare?: boolean | "true" | undefined;
+    degraded?: boolean | "true" | undefined;
+    noRadius?: boolean | "true" | undefined;
+}, {
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, {
+    colors: {
+        bgPrimary: string;
+        bgSecondary: string;
+        bgTertiary: string;
+        surfaceLight: string;
+        surfaceLighter: string;
+        textPrimary: string;
+        textSecondary: string;
+        textDisabled: string;
+        textInvert: string;
+        textHighEmp: string;
+        textMedEmp: string;
+        iconBtn: string;
+        iconHoverBg: string;
+        transparentBg: string;
+        mainBg: string;
+        tileBg: string;
+        secondaryDisabled: string;
+        previewBg: string;
+        statsBg: string;
+        menuBg: string;
+        inputBg: string;
+        toastBg: string;
+        borderDefault: string;
+        backgroundDefault: string;
+        borderLighter: string;
+        white: string;
+        black: string;
+        transparent: string;
+        orange: string;
+        cyan: string;
+        tamarind: string;
+        yellow: string;
+        twinYellow: string;
+        green: string;
+        darkgreen: string;
+        purple: string;
+        borderLight: string;
+        borderAccent: string;
+        success: string;
+        error: string;
+        errorTint: string;
+        warning: string;
+        brandLight: string;
+        brandDefault: string;
+        brandDark: string;
+        brandDisabled: string;
+        grayLight: string;
+        grayDefault: string;
+        grayDark: string;
+        secondaryGray: string;
+        grayDisabled: string;
+        textAccentHigh: string;
+        textAccentMedium: string;
+        textAccentDisabled: string;
+        surfaceDefault: string;
+        surfaceDark: string;
+        backgroundDark: string;
+        backgroundDarker: string;
+        primaryLight: string;
+        primaryDefault: string;
+        primaryDark: string;
+        primaryDisabled: string;
+        secondaryLight: string;
+        secondaryDefault: string;
+        secondaryDark: string;
+        errorDefault: string;
+        errorLight: string;
+        errorDark: string;
+        errorDisabled: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+    };
+    fonts: {
+        sans: string;
+    };
+    fontSizes: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fontWeights: {
+        semiBold: number;
+        medium: number;
+        regular: number;
+    };
+    lineHeights: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    radii: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        round: string;
+    };
+    space: {
+        0: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        px: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        100: string;
+    };
+    borderWidths: {
+        light: string;
+        normal: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+}, {
+    width: string;
+    height: string;
+    minWidth: string;
+    maxWidth: string;
+    minHeight: string;
+    maxHeight: string;
+    flexBasis: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    blockSize: string;
+    minBlockSize: string;
+    maxBlockSize: string;
+    inlineSize: string;
+    minInlineSize: string;
+    maxInlineSize: string;
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+declare type StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;
+interface Props {
+    /**
+     * trackID for peer (videoTrack)
+     */
+    trackId: HMSPeer['videoTrack'];
+    /**
+     * Boolean stating whether to override the internal behaviour.
+     * when attach is false, even if tile is inView or enabled, it won't be rendered
+     */
+    attach?: boolean;
+}
+export declare const Video: React.FC<Props & StyledProps>;
+export {};

package/dist/Video/index.d.ts

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