@alfatech/livechat 2024.12.3-1.1

package/src/components/app/icon/index.tsx

@@ -0,0 +1,144 @@
+function Icon() {}
+
+type Props = React.SVGProps<SVGSVGElement>;
+
+Icon.Home = function Home(props: Props) {
+	return (
+		<svg
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			height="1em"
+			width="1em"
+			{...props}
+		>
+			<path d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 00.707-1.707l-9-9a.999.999 0 00-1.414 0l-9 9A1 1 0 003 13zm7 7v-5h4v5h-4zm2-15.586l6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z" />
+		</svg>
+	);
+};
+
+Icon.Chat = (props: Props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		strokeWidth={1.5}
+		stroke="currentColor"
+		{...props}
+	>
+		<path
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+		/>
+	</svg>
+);
+
+Icon.MessageTyping = ({ className = "size-5", ...props }: Props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		strokeWidth={1.5}
+		stroke="currentColor"
+		className={className}
+		{...props}
+	>
+		<path
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+		/>
+	</svg>
+);
+
+Icon.Check = function Check(props: Props) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 16 16"
+			height="1em"
+			width="1em"
+			{...props}
+		>
+			<path d="M12.736 3.97a.733.733 0 011.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 01-1.065.02L3.217 8.384a.757.757 0 010-1.06.733.733 0 011.047 0l3.052 3.093 5.4-6.425a.247.247 0 01.02-.022z" />
+		</svg>
+	);
+};
+
+Icon.Website = function Website(props: Props) {
+	return (
+		<svg fill="none" viewBox="0 0 24 24" height="1em" width="1em" {...props}>
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M14 7a1 1 0 00-1 1v8a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1h-4zm3 2h-2v6h2V9z"
+				clipRule="evenodd"
+			/>
+			<path
+				fill="currentColor"
+				d="M6 7a1 1 0 000 2h4a1 1 0 100-2H6zM6 11a1 1 0 100 2h4a1 1 0 100-2H6zM5 16a1 1 0 011-1h4a1 1 0 110 2H6a1 1 0 01-1-1z"
+			/>
+			<path
+				fill="currentColor"
+				fillRule="evenodd"
+				d="M4 3a3 3 0 00-3 3v12a3 3 0 003 3h16a3 3 0 003-3V6a3 3 0 00-3-3H4zm16 2H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V6a1 1 0 00-1-1z"
+				clipRule="evenodd"
+			/>
+		</svg>
+	);
+};
+
+Icon.ArrowDown = (props: Props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		strokeWidth={1.5}
+		stroke="currentColor"
+		{...props}
+	>
+		<path
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+		/>
+	</svg>
+);
+
+Icon.XCircle = ({ className = "size-5", ...props }: Props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		strokeWidth={1.5}
+		stroke="currentColor"
+		className={className}
+		{...props}
+	>
+		<path
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+		/>
+	</svg>
+);
+
+Icon.X = ({ className = "size-5", ...props }: Props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		strokeWidth={1.5}
+		stroke="currentColor"
+		className={className}
+		{...props}
+	>
+		<path
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			d="M6 18 18 6M6 6l12 12"
+		/>
+	</svg>
+);
+
+export default Icon;

package/src/components/app/input/checkbox.tsx

@@ -0,0 +1,115 @@
+import type { PropsWithChildren } from "react";
+import Icon from "../icon";
+
+type Variant = "blue" | "indigo" | "green" | "red" | "orange";
+type Size = "sm" | "md" | "lg";
+type Effect = "hover" | "ring";
+
+type Props = {
+	name: string;
+	required?: boolean;
+	value?: string;
+	checked?: boolean;
+	id?: string;
+	red?: string;
+	reversed?: boolean;
+	effect?: Effect;
+	variant?: Variant;
+	size?: Size;
+	onChange?: (value: boolean) => void;
+	onBlur?: (value: boolean) => void;
+};
+
+type EffectType = {
+	label: string;
+	input: string;
+};
+
+const effects: Record<Effect, EffectType> = {
+	ring: {
+		label: "",
+		input:
+			"relative before:content[''] before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity  hover:before:opacity-10",
+	},
+	hover: {
+		label:
+			"hover:bg-second transition-colors duration-200 px-2 py-1 rounded-md",
+		input: "",
+	},
+};
+
+const variants: Record<Variant, string> = {
+	blue: "checked:border-blue-500 checked:bg-blue-500 checked:before:bg-blue-500",
+	indigo:
+		"checked:border-indigo-500 checked:bg-indigo-500 checked:before:bg-indigo-500",
+	green:
+		"checked:border-green-500 checked:bg-green-500 checked:before:bg-green-500",
+	red: "checked:border-red-500 checked:bg-red-500 checked:before:bg-red-500",
+	orange:
+		"checked:border-orange-500 checked:bg-orange-500 checked:before:bg-orange-500",
+};
+
+const sizes: Record<Size, string> = {
+	sm: "h-4 w-4 lg:h-3 lg:w-3",
+	md: "h-6 w-6 lg:h-5 lg:w-5",
+	lg: "h-8 w-8 lg:h-7 lg:w-7",
+};
+
+const svgSizes: Record<Size, string> = {
+	sm: "h-3 w-3 lg:h-2.5 lg:w-2.5",
+	md: "h-5 w-5 lg:h-4 lg:w-4",
+	lg: "h-7 w-7 lg:h-6 lg:w-6",
+};
+
+export default function Checkbox({
+	children,
+	name,
+	required,
+	value,
+	checked,
+	onChange,
+	onBlur,
+	red,
+	id = name,
+	size = "md",
+	effect = "ring",
+	reversed = false,
+	variant = "blue",
+	...props
+}: PropsWithChildren<Props>) {
+	return (
+		<div>
+			<div
+				className={`flex items-center justify-between ${reversed ? "flex-row-reverse" : ""}  ${effects[effect].label}`}
+			>
+				<label
+					className="disable-highlight relative mr-3 flex cursor-pointer items-center rounded-full"
+					htmlFor={id}
+				>
+					<input
+						id={id}
+						name={name}
+						type="checkbox"
+						className={`border-blue-gray-200 peer cursor-pointer appearance-none rounded-md border bg-white transition-all dark:bg-inherit ${variants[variant]} ${sizes[size]} ${effects[effect].input}`}
+						required={required}
+						checked={checked}
+						value={value}
+						onChange={(e) => onChange?.((e.target as any).checked)}
+						onBlur={(e) => onBlur?.((e.target as any).checked)}
+						{...props}
+					/>
+					<div className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
+						<Icon.Check className={svgSizes[size]} />
+					</div>
+				</label>
+				<label
+					className="disable-highlight mt-px flex grow cursor-pointer select-none items-center justify-between font-light text-gray-800 dark:text-gray-400"
+					htmlFor={id}
+				>
+					{children}
+				</label>
+			</div>
+			{red && <small className="text-xs text-red-500">{red}</small>}
+		</div>
+	);
+}

package/src/components/app/input/index.tsx

@@ -0,0 +1,133 @@
+import classNames from "classnames";
+import cn from "classnames";
+import type { ChangeEvent } from "react";
+import Label from "./label";
+
+type Size = "sm" | "md" | "lg";
+type InputValue = string | number | readonly string[] | undefined;
+type InputType =
+	| "button"
+	| "checkbox"
+	| "color"
+	| "date"
+	| "datetime-local"
+	| "email"
+	| "file"
+	| "hidden"
+	| "image"
+	| "month"
+	| "number"
+	| "password"
+	| "radio"
+	| "range"
+	| "reset"
+	| "search"
+	| "submit"
+	| "tel"
+	| "text"
+	| "time"
+	| "url"
+	| "week";
+
+type Props<V extends InputValue = string> = {
+	id: string;
+	label?: string;
+	value?: V;
+	name?: string;
+	size?: Size;
+	type?: InputType;
+	onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+	onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
+	autoComplete?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	placeholder?: string;
+	className?: string;
+	pattern?: string;
+	noMargin?: boolean;
+	error?: string;
+	min?: number;
+	max?: number;
+	minLength?: number;
+	maxLength?: number;
+	ariaLabel?: string;
+	autoFocus?: boolean;
+	ariaDescribedBy?: string;
+	ariaInvalid?: boolean;
+	suffix?: string | JSX.Element;
+	prefix?: string | JSX.Element;
+};
+
+const sizes: Record<Size, string> = {
+	sm: "px-3 py-1 text-xs",
+	md: "px-4 py-2 text-sm",
+	lg: "px-5 py-3 text-15",
+};
+
+export default function Input<T extends InputValue = string>({
+	id,
+	label,
+	suffix,
+	prefix,
+	size = "md",
+	type = "text",
+	noMargin = false,
+	required = false,
+	error,
+	ariaDescribedBy,
+	className,
+	ariaInvalid,
+	ariaLabel,
+	autoFocus,
+	...props
+}: Props<T>) {
+	return (
+		<div className={classNames({ "mb-3": !noMargin }, className)}>
+			<Label id={id} text={label} required={required} />
+			<div className="flex items-center">
+				{prefix && (
+					<span
+						className={cn(
+							"inline-block border border-r-0 border-slate-200 bg-slate-100 rounded-l-md",
+							sizes[size],
+							{ "!border-red-500": !!error },
+						)}
+					>
+						{prefix}
+					</span>
+				)}
+				<input
+					id={id}
+					className={cn(
+						"border rounded-md block text-base py-2 px-4 w-full border-slate-200 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 disabled:border-slate-300 disabled:text-slate-500  placeholder:text-slate-400",
+						sizes[size],
+						{
+							"rounded-l-none": !!prefix,
+							"rounded-r-none": !!suffix,
+							"!border-red-500 !text-red-500": !!error,
+						},
+					)}
+					type={type}
+					required={required}
+					aria-describedby={ariaDescribedBy}
+					aria-invalid={ariaInvalid}
+					aria-label={ariaLabel}
+					{...props}
+				/>
+				{suffix && (
+					<span
+						className={cn(
+							"inline-block border border-l-0 border-slate-200 bg-slate-100rounded-r-md",
+							sizes[size],
+							{ "!border-red-500": !!error },
+						)}
+					>
+						{suffix}
+					</span>
+				)}
+			</div>
+			{!!error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+		</div>
+	);
+}

package/src/components/app/input/label.tsx

@@ -0,0 +1,33 @@
+import classNames from "classnames";
+
+type Props = {
+	id?: string;
+	text?: string;
+	required?: boolean;
+	className?: string;
+	noMargin?: boolean;
+};
+
+export default function Label({
+	id,
+	text,
+	required,
+	className,
+	noMargin,
+}: Props) {
+	if (!text) return null;
+	return (
+		<label
+			htmlFor={id}
+			className={classNames(
+				className,
+				{
+					"mb-2": !noMargin,
+				},
+				"inline-block text-base font-medium",
+			)}
+		>
+			{text} {required && <span className="text-red-500">*</span>}
+		</label>
+	);
+}

package/src/components/app/input/radio.tsx

@@ -0,0 +1,143 @@
+import type { PropsWithChildren } from "react";
+import Icon from "../icon";
+
+type Variant = "blue" | "emerald" | "red" | "orange";
+type Effect = "hover" | "ring";
+type Size = "sm" | "md" | "lg";
+
+interface RadioProps {
+	id: string;
+	name: string;
+	value?: boolean;
+	variant?: Variant;
+	effect?: Effect;
+	reverse?: boolean;
+	size?: Size;
+	onChange?: (value: boolean) => void;
+	onBlur?: (value: boolean) => void;
+	onClick?: (value: boolean) => void;
+}
+
+const variants: Record<Variant, string> = {
+	blue: "text-blue-500 border-blue-gray-200 checked:bg-blue-500 checked:border-blue-500 checked:before:bg-blue-500  before:bg-blue-gray-500",
+	red: "text-red-500 border-blue-gray-200 checked:border-red-500 checked:before:bg-red-500  before:bg-blue-gray-500",
+	emerald:
+		"text-emerald-500 border-blue-gray-200 checked:border-emerald-500 checked:before:bg-emerald-500  before:bg-blue-gray-500",
+	orange:
+		"text-orange-500 border-blue-gray-200 checked:border-orange-500 checked:before:bg-orange-500  before:bg-blue-gray-500",
+};
+
+const svgVariants: Record<Variant, string> = {
+	blue: "text-white",
+	red: "text-red-500",
+	emerald: "text-emerald-500",
+	orange: "text-orange-500",
+};
+
+const sizes: Record<Size, string> = {
+	sm: "h4 w-4 lg:h-3 lg:w-3",
+	md: "h-6 w-6 lg:h-5 lg:w-5",
+	lg: "h-8 w-8 lg:h-7 lg:w-7",
+};
+
+const iconSizes: Record<Size, string> = {
+	sm: "size-3",
+	md: "size-4",
+	lg: "size-5",
+};
+
+type EffectType = {
+	label: string;
+	input: string;
+};
+
+const effects: Record<Effect, EffectType> = {
+	ring: {
+		label: "",
+		input:
+			"relative before:content[''] before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:opacity-0 before:transition-opacity hover:before:opacity-10",
+	},
+	hover: {
+		label: "hover:bg-second transition-colors duration-200",
+		input: "",
+	},
+};
+
+function Radio({
+	children,
+	id,
+	name,
+	size = "md",
+	variant = "blue",
+	effect = "ring",
+	value = false,
+	reverse = false,
+	onChange,
+	onBlur,
+	onClick,
+}: PropsWithChildren<RadioProps>) {
+	return (
+		<label
+			className={`disable-highlight flex cursor-pointer items-center rounded-md ${
+				reverse ? "flex-row-reverse justify-between" : ""
+			} ${effects[effect].label} `}
+			htmlFor={id}
+		>
+			<label
+				className="relative flex items-center p-2 rounded-full cursor-pointer disable-highlight"
+				htmlFor={id}
+			>
+				<input
+					id={id}
+					name={name}
+					type="radio"
+					className={`disable-highlight !bg-none peer cursor-pointer appearance-none rounded-full border dark:border-zink-400 bg-inherit transition-all dark:bg-inherit ${variants[variant]} ${sizes[size]} ${effects[effect].input}`}
+					checked={value}
+					onChange={(e) => onChange?.(e.target.checked)}
+					onBlur={(e) => onBlur?.(e.target.checked)}
+					onClick={() => onClick?.(!value)}
+				/>
+				<div
+					className={`pointer-events-none absolute left-2/4 top-2/4 flex -translate-x-2/4 -translate-y-2/4 items-center justify-center opacity-0 transition-opacity peer-checked:opacity-100 ${svgVariants[variant]}`}
+				>
+					<Icon.Check className={iconSizes[size]} />
+				</div>
+			</label>
+			<label
+				className={
+					"disable-highlight flex cursor-pointer select-none items-center font-light text-gray-500 dark:text-gray-400"
+				}
+				htmlFor={id}
+			>
+				{children}
+			</label>
+		</label>
+	);
+}
+
+type GroupProps = {
+	label: string;
+	id: string;
+	required?: boolean;
+	className?: string;
+};
+
+Radio.Group = function RadioGroup({
+	label,
+	id,
+	className,
+	required,
+	children,
+}: PropsWithChildren<GroupProps>) {
+	return (
+		<div className={className}>
+			<label htmlFor={id} className="inline-block mb-2 text-base font-medium">
+				{label} {required && <span className="text-red-500">*</span>}
+			</label>
+
+			<div className="col-span-12 flex items-center gap-4 p-2">{children}</div>
+		</div>
+	);
+};
+
+export default Radio;

package/src/components/app/input/select.tsx

@@ -0,0 +1,54 @@
+import type { ChangeEvent, PropsWithChildren } from "react";
+
+interface Props {
+	label: string;
+	id: string;
+	value?: string;
+	placeholder?: string;
+	multiple?: boolean;
+	name?: string;
+	required?: boolean;
+	disabled?: boolean;
+	className?: string;
+	autoComplete?: string;
+	autoFocus?: boolean;
+	error?: string;
+	min?: number;
+	max?: number;
+	onChange?: (e: ChangeEvent<HTMLSelectElement>) => void;
+}
+
+export default function Select({
+	label,
+	id,
+	value = "",
+	className,
+	placeholder,
+	children,
+	required,
+	error,
+	...props
+}: PropsWithChildren<Props>) {
+	return (
+		<div className={className ? className : ""}>
+			{label && (
+				<label htmlFor={id} className="inline-block mb-2 text-base font-medium">
+					{label} {required && <span className="text-red-500">*</span>}
+				</label>
+			)}
+			<select
+				id={id}
+				aria-placeholder={placeholder}
+				value={value}
+				aria-label={label}
+				className="bg-light form-select dark:bg-zink-700 dark:border-zink-500 transition-colors duraiton-200 border text-gray-900 dark:text-gray-200 sm:text-sm rounded-md focus:ring-emerald-500 focus-visible:ring-0 focus-visible:shadow-none outline-none focus-visible:outline-none focus-visible:border-emerald-500 focus:border-emerald-500 block w-full px-2 py-2 placeholder-fuchsia-600 caret-emerald-500"
+				onChange={props.onChange}
+				required={required}
+				{...props}
+			>
+				{children}
+			</select>
+			{!!error && <p className="mt-1 text-sm text-red-500">{error}</p>}
+		</div>
+	);
+}

package/src/components/app/input/textarea.tsx

@@ -0,0 +1,68 @@
+import classNames from "classnames";
+import cn from "classnames";
+import type { ChangeEvent } from "react";
+
+type Props = {
+	id: string;
+	label: string;
+	value?: string;
+	name?: string;
+	rows?: number;
+	type?: string;
+	className?: string;
+	noMargin?: boolean;
+	onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+	onBlur?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+	autoComplete?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	placeholder?: string;
+	pattern?: string;
+	error?: string;
+	min?: number;
+	max?: number;
+	minLength?: number;
+	maxLength?: number;
+	ariaLabel?: string;
+	ariaDescribedBy?: string;
+	ariaInvalid?: boolean;
+	suffix?: string | JSX.Element;
+	prefix?: string | JSX.Element;
+};
+
+export default function Textarea({
+	id,
+	label,
+	suffix,
+	prefix,
+	className,
+	noMargin,
+	rows = 3,
+	type = "text",
+	required = false,
+	error,
+	ariaInvalid,
+	...props
+}: Props) {
+	return (
+		<div className={classNames({ "mb-3": !noMargin }, className)}>
+			<label htmlFor={id} className="inline-block mb-2 text-base font-medium">
+				{label}
+			</label>
+			<textarea
+				className={cn(
+					"form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200 valid:border-green-500 invalid:border-red-500 dark:valid:border-green-800 dark:invalid:border-red-800 invalid:text-red-500 dark:invalid:text-red-800",
+					{
+						"!border-red-500 !dark:border-red-800 !text-red-500 !dark:text-red-800":
+							!!error,
+					},
+				)}
+				id={id}
+				aria-invalid={ariaInvalid}
+				{...props}
+			></textarea>
+			{!!error && <p className="text-red-500 mt-1 text-sm">{error}</p>}
+		</div>
+	);
+}