@regardio/react 0.5.7 → 0.7.0

package/dist/markdown-container/index.mjs

@@ -0,0 +1,71 @@
+import { n as replaceSpecialChars } from "../text-EQC4zJbE.mjs";
+import { cn } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { MDXProvider } from "@mdx-js/react";
+import Markdown from "markdown-to-jsx";
+
+//#region src/markdown-container/markdown-container.tsx
+const doubleNewlineRegex = /\n\n+/;
+function processTextOutsideMDXComponents(text, locale) {
+	const mdxTagRegex = /(<\/?[A-Za-z][^>]*>)/g;
+	return text.split(mdxTagRegex).map((part) => mdxTagRegex.test(part) ? part : replaceSpecialChars(part, locale)).join("");
+}
+function transformLink(to) {
+	const targetDomainSubstring = "regard";
+	if (typeof to === "string") try {
+		const url = new URL(to);
+		if (url.hostname.includes(targetDomainSubstring)) return url.pathname + (url.search ?? "") + (url.hash ?? "");
+		return to;
+	} catch {
+		return to;
+	}
+	else if (to?.pathname) return to.pathname + (to.search ?? "") + (to.hash ?? "");
+	return "";
+}
+const truncateText = (text, maxSentences, maxCharacters, maxParagraphs) => {
+	if (maxSentences === void 0 && maxCharacters === void 0 && maxParagraphs === void 0) return text;
+	const paragraphs = text.split(doubleNewlineRegex);
+	let truncatedText = "";
+	let charCount = 0;
+	let sentenceCount = 0;
+	let paragraphCount = 0;
+	for (const paragraph of paragraphs) {
+		if (maxParagraphs !== void 0 && paragraphCount >= maxParagraphs) break;
+		const sentenceRegex = /(?<!\.\.\.)(?<!\b\w\.)\.(?:\s+|\n+)/g;
+		const parts = paragraph.split(sentenceRegex);
+		const delimiters = paragraph.match(sentenceRegex) || [];
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			const delimiter = delimiters[i] || "";
+			if (part !== void 0) if ((maxSentences === void 0 || sentenceCount < maxSentences) && (maxCharacters === void 0 || charCount + part.length + delimiter.length <= maxCharacters)) {
+				truncatedText += part + delimiter;
+				charCount += part.length + delimiter.length;
+				if (delimiter.includes(".")) sentenceCount++;
+			} else break;
+		}
+		paragraphCount++;
+		if (maxSentences !== void 0 && sentenceCount >= maxSentences || maxCharacters !== void 0 && charCount >= maxCharacters) break;
+		if (paragraphCount < paragraphs.length) truncatedText += "\n\n";
+	}
+	return truncatedText.trim();
+};
+const MarkdownContainer = (props) => {
+	let processedText = processTextOutsideMDXComponents(props.children?.toString() || "", props.locale);
+	if (Number.isInteger(props.sentences) || Number.isInteger(props.characters) || Number.isInteger(props.paragraphs)) processedText = truncateText(processedText, props.sentences, props.characters, props.paragraphs);
+	return /* @__PURE__ */ jsx(MDXProvider, {
+		components: props.mdxComponents,
+		children: /* @__PURE__ */ jsx(Markdown, {
+			className: cn("markdown", props.className),
+			options: {
+				disableParsingRawHTML: false,
+				forceWrapper: true,
+				tagfilter: false,
+				...props.markdownOverrides ? { overrides: props.markdownOverrides } : {}
+			},
+			children: processedText
+		})
+	});
+};
+
+//#endregion
+export { MarkdownContainer, transformLink };

package/dist/password-input/index.d.mts

@@ -0,0 +1,23 @@
+import { t as Input } from "../index-Bj5_XfEC.mjs";
+
+//#region src/password-input/password-input.d.ts
+declare const passwordInputVariants: {
+  readonly default: readonly [];
+  readonly withToggle: readonly [];
+};
+type PasswordInputVariant = keyof typeof passwordInputVariants;
+interface PasswordInputProps extends Omit<React.ComponentProps<typeof Input>, "type" | "variant"> {
+  className?: string;
+  variant?: PasswordInputVariant;
+  inputVariant?: "default" | "error" | "success";
+  showToggle?: boolean;
+}
+declare const PasswordInput: ({
+  className,
+  variant,
+  inputVariant,
+  showToggle,
+  ...props
+}: PasswordInputProps) => React.JSX.Element;
+//#endregion
+export { PasswordInput, type PasswordInputProps };

package/dist/password-input/index.mjs

@@ -0,0 +1,92 @@
+import { t as Button } from "../button-BiSQpBbc.mjs";
+import { t as Input } from "../input-CtR6aRVi.mjs";
+import { useState } from "react";
+import { tv } from "@regardio/tailwind/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/password-input/password-input.tsx
+const passwordInput = tv({
+	base: ["relative"],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: [],
+		withToggle: []
+	} }
+});
+const toggleButton = tv({ base: [
+	"absolute",
+	"right-3",
+	"top-1/2",
+	"-translate-y-1/2",
+	"flex",
+	"h-5",
+	"w-5",
+	"cursor-pointer",
+	"items-center",
+	"justify-center",
+	"text-gray-500",
+	"hover:text-gray-700",
+	"focus:outline-none",
+	"focus:ring-2",
+	"focus:ring-blue-500",
+	"focus:ring-offset-2",
+	"rounded",
+	"transition-colors",
+	"duration-200"
+] });
+const PasswordInput = ({ className, variant = "default", inputVariant = "default", showToggle = true, ...props }) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const togglePasswordVisibility = () => {
+		setShowPassword(!showPassword);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: passwordInput({
+			className,
+			variant
+		}),
+		children: [/* @__PURE__ */ jsx(Input, {
+			autoComplete: "off",
+			className: showToggle ? "pr-10" : "",
+			type: showPassword ? "text" : "password",
+			variant: inputVariant,
+			...props
+		}), showToggle && /* @__PURE__ */ jsx(Button, {
+			"aria-label": showPassword ? "Hide password" : "Show password",
+			className: toggleButton(),
+			onClick: togglePasswordVisibility,
+			size: "sm",
+			variant: "ghost",
+			children: showPassword ? /* @__PURE__ */ jsx("svg", {
+				className: "h-4 w-4",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2
+				})
+			}) : /* @__PURE__ */ jsxs("svg", {
+				className: "h-4 w-4",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { PasswordInput };

package/dist/picture/index.d.mts

@@ -0,0 +1,39 @@
+import React from "react";
+
+//#region src/picture/picture.d.ts
+declare const screenSizeVariants: {
+  readonly lg: 1280;
+  readonly max: 1920;
+  readonly md: 960;
+  readonly min: 360;
+  readonly sm: 640;
+  readonly xl: 1600;
+  readonly xs: 480;
+};
+type ImageFormat = {
+  size: string;
+  width: number;
+};
+interface PictureProps {
+  alt: string;
+  baseUrl: string;
+  className?: string;
+  formats?: ImageFormat[];
+  imgClassName?: string;
+  placeholder?: string;
+  sizes?: string;
+}
+/**
+* Generic Picture component that works with any image provider
+*
+* @param alt - Alt text for the image
+* @param baseUrl - Base URL with optional placeholder (e.g., 'https://example.com/images/{format}/image.jpg')
+* @param className - Optional class for the picture element
+* @param formats - Custom formats with size and width
+* @param imgClassName - Optional class for the img element
+* @param placeholder - Placeholder to replace in baseUrl (default: '{format}')
+* @param sizes - Custom sizes attribute
+*/
+declare const Picture: React.FC<PictureProps>;
+//#endregion
+export { type ImageFormat, Picture, type PictureProps, screenSizeVariants };

package/dist/picture/index.mjs

@@ -0,0 +1,3 @@
+import { n as screenSizeVariants, t as Picture } from "../picture-DkX3W5zl.mjs";
+
+export { Picture, screenSizeVariants };

package/dist/picture-DkX3W5zl.mjs

@@ -0,0 +1,69 @@
+import { cn } from "@regardio/tailwind/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/picture/picture.tsx
+const screenSizeVariants = {
+	lg: 1280,
+	max: 1920,
+	md: 960,
+	min: 360,
+	sm: 640,
+	xl: 1600,
+	xs: 480
+};
+/**
+* Generic Picture component that works with any image provider
+*
+* @param alt - Alt text for the image
+* @param baseUrl - Base URL with optional placeholder (e.g., 'https://example.com/images/{format}/image.jpg')
+* @param className - Optional class for the picture element
+* @param formats - Custom formats with size and width
+* @param imgClassName - Optional class for the img element
+* @param placeholder - Placeholder to replace in baseUrl (default: '{format}')
+* @param sizes - Custom sizes attribute
+*/
+const Picture = ({ alt, baseUrl, className, formats, imgClassName, placeholder = "{format}", sizes = "(max-width: 480px) 480px, (max-width: 768px) 600px, (max-width: 1200px) 1024px, 1920px" }) => {
+	const imageFormats = formats || [
+		{
+			size: "480x360",
+			width: 480
+		},
+		{
+			size: "600x600",
+			width: 600
+		},
+		{
+			size: "1024x768",
+			width: 1024
+		},
+		{
+			size: "1920x1440",
+			width: 1920
+		}
+	];
+	if (imageFormats.length === 0) return null;
+	if (imageFormats.length === 1 && imageFormats[0]?.size === "" || !baseUrl.includes(placeholder)) return /* @__PURE__ */ jsx("img", {
+		alt,
+		className: cn(className, imgClassName),
+		src: baseUrl
+	});
+	const srcSet = imageFormats.map(({ size, width }) => {
+		return `${baseUrl.replace(placeholder, size)} ${width}w`;
+	}).join(", ");
+	const defaultFormat = imageFormats[0];
+	const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
+	return /* @__PURE__ */ jsxs("picture", {
+		className,
+		children: [/* @__PURE__ */ jsx("source", {
+			sizes,
+			srcSet
+		}), /* @__PURE__ */ jsx("img", {
+			alt,
+			className: cn(imgClassName),
+			src: defaultSrc
+		})]
+	});
+};
+
+//#endregion
+export { screenSizeVariants as n, Picture as t };

package/dist/protected-email/index.d.mts

@@ -0,0 +1,24 @@
+//#region src/protected-email/protected-email.d.ts
+interface ProtectedEmailProps {
+  username: string;
+  domain: string;
+  text?: string;
+  className?: string;
+}
+/**
+* ProtectedEmail component that obfuscates email addresses to protect from scrapers.
+* The email is only assembled client-side with JavaScript, making it harder for scrapers to extract.
+*
+* @param username - The part before the @ symbol
+* @param domain - The part after the @ symbol
+* @param text - Optional display text (defaults to username(at)domain)
+* @param className - Optional CSS class name
+*/
+declare function ProtectedEmail({
+  username,
+  domain,
+  text,
+  className
+}: ProtectedEmailProps): React.JSX.Element;
+//#endregion
+export { ProtectedEmail, type ProtectedEmailProps };

package/dist/protected-email/index.mjs

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/protected-email/protected-email.tsx
+/**
+* ProtectedEmail component that obfuscates email addresses to protect from scrapers.
+* The email is only assembled client-side with JavaScript, making it harder for scrapers to extract.
+*
+* @param username - The part before the @ symbol
+* @param domain - The part after the @ symbol
+* @param text - Optional display text (defaults to username(at)domain)
+* @param className - Optional CSS class name
+*/
+function ProtectedEmail({ username, domain, text, className }) {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const fallbackText = text || `${username}(at)${domain}`;
+	const handleClick = (e) => {
+		if (mounted) {
+			window.location.href = `mailto:${username}@${domain}`;
+			e.preventDefault();
+		}
+	};
+	return /* @__PURE__ */ jsx("a", {
+		"aria-label": `Email address: ${username} at ${domain}`,
+		className,
+		"data-email-protected": "true",
+		href: mounted ? "#email-protected" : void 0,
+		onClick: handleClick,
+		children: fallbackText
+	});
+}
+
+//#endregion
+export { ProtectedEmail };

package/dist/radio/index.d.mts

@@ -0,0 +1,28 @@
+import { ComponentProps } from "react";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+
+//#region src/radio/radio.d.ts
+type RadioSize = "sm" | "md" | "lg";
+interface RadioRootProps extends Omit<ComponentProps<typeof Radio$1.Root>, "className"> {
+  className?: string;
+  size?: RadioSize;
+}
+interface RadioIndicatorProps extends Omit<ComponentProps<typeof Radio$1.Indicator>, "className"> {
+  className?: string;
+}
+declare const RadioRoot: ({
+  className,
+  size,
+  ...props
+}: RadioRootProps) => React.JSX.Element;
+declare const RadioIndicator: ({
+  className,
+  children,
+  ...props
+}: RadioIndicatorProps) => React.JSX.Element;
+declare const Radio: {
+  Indicator: typeof RadioIndicator;
+  Root: typeof RadioRoot;
+};
+//#endregion
+export { Radio, RadioIndicator, type RadioIndicatorProps, RadioRoot, type RadioRootProps, type RadioSize };

package/dist/radio/index.mjs

@@ -0,0 +1,72 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+
+//#region src/radio/radio.tsx
+const radioRoot = tv({
+	base: [
+		"h-4",
+		"w-4",
+		"rounded-full",
+		"border",
+		"border-gray-300",
+		"bg-white",
+		"focus:outline-none",
+		"focus:ring-2",
+		"focus:ring-blue-500",
+		"focus:ring-offset-2",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-50",
+		"data-[checked]:bg-blue-600",
+		"data-[checked]:border-blue-600",
+		"transition-colors",
+		"duration-200",
+		"cursor-pointer"
+	],
+	defaultVariants: { size: "md" },
+	variants: { size: {
+		lg: ["h-5", "w-5"],
+		md: ["h-4", "w-4"],
+		sm: ["h-3", "w-3"]
+	} }
+});
+const radioIndicator = tv({ base: [
+	"flex",
+	"items-center",
+	"justify-center",
+	"text-white",
+	"data-[unchecked]:invisible"
+] });
+const RadioRoot = ({ className, size = "md", ...props }) => {
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		className: radioRoot({
+			className,
+			size
+		}),
+		...props
+	});
+};
+const RadioIndicator = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Radio$1.Indicator, {
+		className: radioIndicator({ className }),
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			fill: "currentColor",
+			height: "8",
+			viewBox: "0 0 8 8",
+			width: "8",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "4",
+				cy: "4",
+				r: "3"
+			})
+		})
+	});
+};
+const Radio = {
+	Indicator: RadioIndicator,
+	Root: RadioRoot
+};
+
+//#endregion
+export { Radio, RadioIndicator, RadioRoot };

package/dist/radio-group/index.d.mts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+
+//#region src/radio-group/radio-group.d.ts
+type RadioGroupOrientation = "horizontal" | "vertical";
+interface RadioGroupProps extends Omit<ComponentProps<typeof RadioGroup$1>, "className"> {
+  className?: string;
+  orientation?: RadioGroupOrientation;
+}
+declare const RadioGroup: ({
+  className,
+  orientation,
+  ...props
+}: RadioGroupProps) => React.JSX.Element;
+//#endregion
+export { RadioGroup, type RadioGroupOrientation, type RadioGroupProps };

package/dist/radio-group/index.mjs

@@ -0,0 +1,29 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+
+//#region src/radio-group/radio-group.tsx
+const radioGroup = tv({
+	base: [
+		"flex",
+		"flex-col",
+		"gap-2"
+	],
+	defaultVariants: { orientation: "vertical" },
+	variants: { orientation: {
+		horizontal: ["flex-row", "gap-4"],
+		vertical: ["flex-col", "gap-2"]
+	} }
+});
+const RadioGroup = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		className: radioGroup({
+			className,
+			orientation
+		}),
+		...props
+	});
+};
+
+//#endregion
+export { RadioGroup };

package/dist/slider/index.d.mts

@@ -0,0 +1,63 @@
+import { ComponentProps } from "react";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+
+//#region src/slider/slider.d.ts
+type SliderSize = "sm" | "md" | "lg";
+interface SliderRootProps extends Omit<ComponentProps<typeof Slider$1.Root>, "className"> {
+  className?: string;
+  size?: SliderSize;
+}
+interface SliderControlProps extends Omit<ComponentProps<typeof Slider$1.Control>, "className"> {
+  className?: string;
+}
+interface SliderTrackProps extends Omit<ComponentProps<typeof Slider$1.Track>, "className"> {
+  className?: string;
+  size?: SliderSize;
+}
+interface SliderIndicatorProps extends Omit<ComponentProps<typeof Slider$1.Indicator>, "className"> {
+  className?: string;
+}
+interface SliderThumbProps extends Omit<ComponentProps<typeof Slider$1.Thumb>, "className"> {
+  className?: string;
+  size?: SliderSize;
+}
+interface SliderValueProps extends Omit<ComponentProps<typeof Slider$1.Value>, "className"> {
+  className?: string;
+}
+declare const SliderRoot: ({
+  className,
+  size,
+  ...props
+}: SliderRootProps) => React.JSX.Element;
+declare const SliderControl: ({
+  className,
+  ...props
+}: SliderControlProps) => React.JSX.Element;
+declare const SliderTrack: ({
+  className,
+  size,
+  ...props
+}: SliderTrackProps) => React.JSX.Element;
+declare const SliderIndicator: ({
+  className,
+  ...props
+}: SliderIndicatorProps) => React.JSX.Element;
+declare const SliderThumb: ({
+  className,
+  size,
+  ...props
+}: SliderThumbProps) => React.JSX.Element;
+declare const SliderValue: ({
+  className,
+  ...props
+}: SliderValueProps) => React.JSX.Element;
+declare const Slider: {
+  Control: typeof SliderControl;
+  Indicator: typeof SliderIndicator;
+  Root: typeof SliderRoot;
+  Thumb: typeof SliderThumb;
+  Track: typeof SliderTrack;
+  Value: typeof SliderValue;
+};
+//#endregion
+export { Slider, SliderControl, type SliderControlProps, SliderIndicator, type SliderIndicatorProps, SliderRoot, type SliderRootProps, type SliderSize, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, SliderValue, type SliderValueProps };