@descope/flow-components 2.0.38

package/src/Container/Container.tsx

@@ -0,0 +1,111 @@
+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

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

package/src/CssVarImage/CssVarImage.tsx

@@ -0,0 +1,38 @@
+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

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

package/src/Divider/Divider.tsx

@@ -0,0 +1,33 @@
+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

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

package/src/EmailField/EmailField.tsx

@@ -0,0 +1,20 @@
+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

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

package/src/Image/Image.tsx

@@ -0,0 +1,32 @@
+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

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

package/src/Input/Input.tsx

@@ -0,0 +1,27 @@
+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

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

package/src/Link/Link.tsx

@@ -0,0 +1,33 @@
+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

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

package/src/Loader/Loader.tsx

@@ -0,0 +1,40 @@
+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

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

package/src/Logo/Logo.tsx

@@ -0,0 +1,27 @@
+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

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

package/src/NewPassword/NewPassword.tsx

@@ -0,0 +1,25 @@
+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

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

package/src/NumberField/NumberField.tsx

@@ -0,0 +1,20 @@
+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

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

package/src/Password/Password.tsx

@@ -0,0 +1,20 @@
+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

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

package/src/Phone/Phone.tsx

@@ -0,0 +1,22 @@
+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

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

package/src/Select/Select.tsx

@@ -0,0 +1,29 @@
+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

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

package/src/Switch/Switch.tsx

@@ -0,0 +1,21 @@
+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

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

package/src/TOTPImage/TOTPImage.tsx

@@ -0,0 +1,18 @@
+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;

package/src/TOTPImage/index.ts

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

package/src/TOTPLink/TOTPLink.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from '../Link';
+
+type Props = Omit<React.ComponentProps<typeof Link>, 'href'>;
+
+// The reason we define TOTPLink 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 TOTPLink = React.forwardRef<HTMLAnchorElement, Props>(
+	({ ...props }, ref) => {
+		const readyProps = { ...props, 'data-type': 'totp-link' };
+		return <Link ref={ref} {...readyProps} />;
+	}
+);
+
+export default TOTPLink;

package/src/TOTPLink/index.ts

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

package/src/Text/Text.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TextAlign, TypographyVariants } from '../types';
+
+type Props = {
+	italic?: boolean;
+	variant?: string;
+	mode?: string;
+	'full-width'?: boolean;
+	'text-align'?: TextAlign;
+};
+
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			'descope-text': React.DetailedHTMLProps<
+				React.HTMLAttributes<HTMLElement>,
+				HTMLElement
+			> &
+				Props;
+		}
+	}
+}
+
+const Text = React.forwardRef<
+	HTMLElement,
+	Props & { typography?: TypographyVariants } & Omit<
+			React.HTMLProps<HTMLSpanElement>,
+			'mode'
+		>
+>((props, ref) => (
+	<descope-text {...props} ref={ref}>
+		{props.children}
+	</descope-text>
+));
+
+export default Text;

package/src/Text/index.ts

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

package/src/TextField/TextField.tsx

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

package/src/TextField/index.ts

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