@descope/flow-components 2.0.39 → 2.0.40

package/src/Button/Button.tsx

@@ -1,49 +0,0 @@
-import React, { useMemo } from 'react';
-// eslint-disable-next-line import/no-namespace
-import * as icons from '../icons';
-
-type Props = JSX.IntrinsicElements['button'] & {
-	variant?: string;
-	color?: string;
-	size?: string;
-	loading?: boolean;
-	startIcon?: string;
-	startIconColorText?: boolean;
-	'full-width'?: boolean;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-button': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLButtonElement>,
-				HTMLButtonElement
-			> & { mode: string };
-		}
-	}
-}
-
-const Button = React.forwardRef<
-	HTMLButtonElement,
-	JSX.IntrinsicElements['button'] & Props
->(({ children, startIcon, startIconColorText, color, ...props }, ref) => {
-	const icon = useMemo(
-		() => icons[startIcon]?.({ noColor: startIconColorText }),
-		[startIcon, startIconColorText]
-	);
-
-	return (
-		<descope-button {...props} mode={color} ref={ref}>
-			{icon}
-			{children}
-		</descope-button>
-	);
-});
-
-Button.defaultProps = {
-	size: 'md',
-	variant: 'contained',
-	color: 'primary'
-};
-
-export default Button;

package/src/Button/index.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/src/Checkbox/Checkbox.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-checkbox': DescopeInputProps;
-		}
-	}
-}
-
-const Checkbox = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	(props, ref) => <descope-checkbox {...props} ref={ref} />
-);
-
-export default Checkbox;

package/src/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox';

package/src/Code/Code.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { DescopeInputProps } from '../types';
-
-type Props = {
-	digits?: number;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-passcode': DescopeInputProps & Props;
-		}
-	}
-}
-
-const Code = React.forwardRef<HTMLInputElement, DescopeInputProps & Props>(
-	(props, ref) => <descope-passcode ref={ref} {...props} />
-);
-
-export default Code;

package/src/Code/index.ts

@@ -1 +0,0 @@
-export { default as Code } from './Code';

package/src/Container/Container.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { FlexAlignment } from '../types';
-
-type Never<T extends Record<string, any>> = { [K in keyof T]: never };
-
-type SpaceBetween =
-	| '0'
-	| '0.5'
-	| '1'
-	| '1.5'
-	| '2'
-	| '2.5'
-	| '3'
-	| '3.5'
-	| '4'
-	| '5'
-	| '6'
-	| '7'
-	| '8'
-	| '9'
-	| '10'
-	| '11'
-	| '12'
-	| '14'
-	| '16'
-	| '20'
-	| '24'
-	| '28'
-	| '32';
-
-type Flex = {
-	align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-	justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-	spaceBetween: SpaceBetween;
-};
-
-type ContainerAlignment = {
-	'horizontal-alignment'?: FlexAlignment | 'space-between';
-	'vertical-alignment'?: FlexAlignment;
-	'space-between'?: 'sm' | 'md' | 'lg';
-};
-
-type Props = {
-	direction?: 'row' | 'column';
-	shadow?: 'md' | 'lg' | 'xl' | '2xl';
-	'border-radius'?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-	paddingX?: string;
-	paddingY?: string;
-	background?: string;
-	width?: string;
-} & ((Flex & Never<ContainerAlignment>) | (ContainerAlignment & Never<Flex>));
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-container': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLElement>,
-				HTMLElement
-			>;
-		}
-	}
-}
-
-const justifyContent = {
-	start: 'flex-start',
-	center: 'center',
-	end: 'flex-end',
-	between: 'space-between',
-	around: 'space-around',
-	evenly: 'space-evenly'
-};
-
-const Container = React.forwardRef<
-	HTMLDivElement,
-	Props & React.HTMLAttributes<HTMLDivElement>
->(
-	(
-		{
-			background,
-			justify,
-			paddingX = '0',
-			paddingY = '0',
-			shadow,
-			width,
-			align,
-			spaceBetween,
-			...props
-		},
-		ref
-	) => {
-		const mergedProps = {
-			...props,
-			shadow,
-			'st-horizontal-padding': `${Number.parseInt(paddingX, 10) / 4}rem`,
-			'st-vertical-padding': `${Number.parseInt(paddingY, 10) / 4}rem`,
-			'st-align-items': align,
-			'st-justify-content': justifyContent[justify],
-			'st-background-color': background,
-			'st-width': width,
-			'st-gap': spaceBetween && `${Number.parseInt(spaceBetween, 10) / 4}rem`
-		};
-		// eslint-disable-next-line react/jsx-props-no-spreading
-		return <descope-container {...mergedProps} ref={ref} />;
-	}
-);
-
-Container.defaultProps = {
-	direction: 'row'
-};
-
-export default Container;

package/src/Container/index.ts

@@ -1 +0,0 @@
-export { default as Container } from './Container';

package/src/CssVarImage/CssVarImage.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-type Props = {
-	varName: string;
-	fallback?: string;
-	width?: number;
-	height?: number;
-	className?: string;
-};
-
-const CssVarImage = React.forwardRef<
-	HTMLDivElement,
-	Props & React.HTMLAttributes<HTMLImageElement>
->(({ className, width, height, varName, fallback = '', style }, ref) => {
-	const divClasses = twMerge(
-		className,
-		'shrink-0',
-		'pointer-events-none',
-		'object-contain',
-		'max-w-full'
-	);
-
-	return (
-		<div
-			className={divClasses}
-			ref={ref}
-			style={{
-				...style,
-				content: `var(--${varName}, ${fallback})`,
-				width: width || 'initial',
-				height: height || 'initial'
-			}}
-		/>
-	);
-});
-
-export default CssVarImage;

package/src/CssVarImage/index.ts

@@ -1 +0,0 @@
-export { default as CssVarImage } from './CssVarImage';

package/src/Divider/Divider.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Mode, TypographyVariants } from '../types';
-
-type Props = {
-	vertical?: boolean;
-	italic?: boolean;
-	variant?: TypographyVariants;
-	mode?: Mode;
-	children?: JSX.Element;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-divider': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLDivElement>,
-				HTMLDivElement
-			> &
-				Omit<Props, 'children'>;
-		}
-	}
-}
-
-const Divider = React.forwardRef<
-	HTMLDivElement,
-	Omit<JSX.IntrinsicElements['div'], 'size'> & Props
->(({ children, ...restProps }, ref) => (
-	<descope-divider {...restProps} ref={ref}>
-		{children}
-	</descope-divider>
-));
-
-export default Divider;

package/src/Divider/index.ts

@@ -1 +0,0 @@
-export { default as Divider } from './Divider';

package/src/EmailField/EmailField.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-email-field': DescopeInputProps;
-		}
-	}
-}
-
-const EmailField = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	(props, ref) => <descope-email-field {...props} ref={ref} />
-);
-
-EmailField.defaultProps = {
-	size: 'md'
-};
-
-export default EmailField;

package/src/EmailField/index.ts

@@ -1 +0,0 @@
-export { default as EmailField } from './EmailField';

package/src/Image/Image.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-type Props = {
-	width?: number;
-	height?: number;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-image': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLImageElement>,
-				HTMLImageElement
-			> &
-				Props;
-		}
-	}
-}
-
-const Image = React.forwardRef<
-	HTMLImageElement,
-	Props & React.HTMLAttributes<HTMLImageElement>
->(({ width, height, ...restProps }, ref) => (
-	<descope-image
-		{...restProps}
-		ref={ref}
-		st-width={`${width}px`}
-		st-height={`${height}px`}
-	/>
-));
-
-export default Image;

package/src/Image/index.ts

@@ -1 +0,0 @@
-export { default as Image } from './Image';

package/src/Input/Input.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { NumberField } from '../NumberField';
-import { EmailField } from '../EmailField';
-import { TextField } from '../TextField';
-import { PasswordField } from '../Password';
-import { DescopeInputProps } from '../types';
-
-const Input = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	({ type, ...rest }, ref) => {
-		switch (type) {
-			case 'email':
-				return <EmailField {...rest} ref={ref} />;
-			case 'password':
-				return <PasswordField {...rest} ref={ref} />;
-			case 'number':
-				return <NumberField {...rest} ref={ref} />;
-			default:
-				return <TextField {...rest} ref={ref} />;
-		}
-	}
-);
-
-Input.defaultProps = {
-	size: 'md'
-};
-
-export default Input;

package/src/Input/index.ts

@@ -1 +0,0 @@
-export { default as Input } from './Input';

package/src/Link/Link.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Mode, TextAlign, TypographyVariants } from '../types';
-
-type Props = {
-	italic?: boolean;
-	variant?: TypographyVariants;
-	mode?: Mode;
-	textAlign?: TextAlign;
-	'full-width'?: boolean;
-	children?: JSX.Element;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-link': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLAnchorElement>,
-				HTMLAnchorElement
-			> &
-				Omit<Props, 'children'>;
-		}
-	}
-}
-
-const Link = React.forwardRef<HTMLAnchorElement, Props>(
-	({ children, ...restProps }, ref) => (
-		<descope-link {...restProps} ref={ref}>
-			{children}
-		</descope-link>
-	)
-);
-
-export default Link;

package/src/Link/index.ts

@@ -1 +0,0 @@
-export { default as Link } from './Link';

package/src/Loader/Loader.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Mode, PropsToAttrs } from '../types';
-
-type Props = {
-	variant?: 'linear' | 'radial';
-	size?: 'xs' | 'sm' | 'md' | 'lg';
-	color?: Mode;
-};
-
-type LoaderType = React.DetailedHTMLProps<
-	React.HTMLAttributes<HTMLElement>,
-	HTMLElement
-> &
-	PropsToAttrs<Props>;
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-loader-linear': LoaderType;
-			'descope-loader-radial': LoaderType;
-		}
-	}
-}
-
-const Loader = React.forwardRef<HTMLDivElement, Props>(
-	({ variant, color, ...restProps }, ref) => {
-		const props = { mode: color, ...restProps, ref };
-
-		switch (variant) {
-			case 'linear':
-				return <descope-loader-linear {...props} />;
-			case 'radial':
-				return <descope-loader-radial {...props} />;
-			default:
-				return null;
-		}
-	}
-);
-
-export default Loader;

package/src/Loader/index.ts

@@ -1 +0,0 @@
-export { default as Loader } from './Loader';

package/src/Logo/Logo.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { PropsToAttrs } from '../types';
-
-type Props = {
-	width?: string;
-	height?: string;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-logo': React.DetailedHTMLProps<
-				React.HTMLAttributes<HTMLElement>,
-				HTMLElement
-			> &
-				PropsToAttrs<Props>;
-		}
-	}
-}
-
-const Logo = React.forwardRef<HTMLDivElement, Props>(
-	({ width, height }, ref) => (
-		<descope-logo st-width={width} st-height={height} ref={ref} />
-	)
-);
-
-export default Logo;

package/src/Logo/index.ts

@@ -1 +0,0 @@
-export { default as Logo } from './Logo';

package/src/NewPassword/NewPassword.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-export type Props = {
-	'password-label'?: string;
-	'password-placeholder'?: string;
-	'confirm-label'?: string;
-	'confirm-placeholder'?: string;
-	'has-confirm'?: boolean;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-new-password': DescopeInputProps & Props;
-		}
-	}
-}
-
-const NewPassword = React.forwardRef<
-	HTMLInputElement,
-	DescopeInputProps & Props
->((props, ref) => <descope-new-password {...props} ref={ref} />);
-
-export default NewPassword;

package/src/NewPassword/index.ts

@@ -1 +0,0 @@
-export { default as NewPassword } from './NewPassword';

package/src/NumberField/NumberField.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-number-field': DescopeInputProps;
-		}
-	}
-}
-
-const NumberField = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	(props, ref) => <descope-number-field {...props} ref={ref} />
-);
-
-NumberField.defaultProps = {
-	size: 'md'
-};
-
-export default NumberField;

package/src/NumberField/index.ts

@@ -1 +0,0 @@
-export { default as NumberField } from './NumberField';

package/src/Password/Password.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-password-field': DescopeInputProps;
-		}
-	}
-}
-
-const PasswordField = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	(props, ref) => <descope-password-field {...props} ref={ref} />
-);
-
-PasswordField.defaultProps = {
-	size: 'md'
-};
-
-export default PasswordField;

package/src/Password/index.ts

@@ -1 +0,0 @@
-export { default as PasswordField } from './Password';

package/src/Phone/Phone.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-type Props = {
-	'default-code'?: string;
-	'phone-input-placeholder'?: string;
-	'country-input-placeholder'?: string;
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-phone-field': DescopeInputProps & Props;
-		}
-	}
-}
-
-const Phone = React.forwardRef<HTMLInputElement, DescopeInputProps & Props>(
-	(props, ref) => <descope-phone-field {...props} ref={ref} />
-);
-
-export default Phone;

package/src/Phone/index.ts

@@ -1 +0,0 @@
-export { default as Phone } from './Phone';

package/src/Select/Select.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-type Props = {
-	children?: JSX.Element[];
-};
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-combo-box': DescopeInputProps;
-		}
-	}
-}
-
-const Select = React.forwardRef<HTMLInputElement, DescopeInputProps & Props>(
-	({ children, ...restProps }, ref) => (
-		<descope-combo-box {...restProps} ref={ref}>
-			{children}
-		</descope-combo-box>
-	)
-);
-
-Select.defaultProps = {
-	// eslint-disable-next-line react/default-props-match-prop-types
-	size: 'md'
-};
-
-export default Select;

package/src/Select/index.ts

@@ -1 +0,0 @@
-export { default as Select } from './Select';

package/src/Switch/Switch.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DescopeInputProps } from '../types';
-
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			'descope-switch-toggle': DescopeInputProps;
-		}
-	}
-}
-
-const Switch = React.forwardRef<HTMLInputElement, DescopeInputProps>(
-	(props, ref) => <descope-switch-toggle {...props} ref={ref} />
-);
-
-Switch.defaultProps = {
-	// eslint-disable-next-line react/default-props-match-prop-types
-	size: 'md'
-};
-
-export default Switch;

package/src/Switch/index.ts

@@ -1 +0,0 @@
-export { default as Switch } from './Switch';

package/src/TOTPImage/TOTPImage.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { CssVarImage } from '../CssVarImage';
-
-type Props = Omit<
-	React.ComponentProps<typeof CssVarImage>,
-	'varName' | 'fallback'
->;
-
-// The reason we define TOTPImage as a component, and not injecting the style from another place,
-// is to restrict the dependency between the code that injects this variable style (web-component) to this place only
-// Note: be careful when changing variables here, this can affect other packages implicitly
-const TOTPImage = React.forwardRef<HTMLDivElement, Props>(
-	({ ...props }, ref) => (
-		<CssVarImage ref={ref} varName="totp-image" {...props} />
-	)
-);
-
-export default TOTPImage;