@regardio/react 0.3.2 → 0.4.0

package/dist/components/markdown-container.js

@@ -1,93 +1,192 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { MDXProvider } from '@mdx-js/react';
-import Markdown, {} from 'markdown-to-jsx';
-import { cn } from '../utils/cn';
-import { replaceSpecialChars } from '../utils/text';
-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('');
+import Markdown from 'markdown-to-jsx';
+import { defineConfig, cx } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import React, { isValidElement, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/markdown-container.tsx
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
+});
+var cn = (...inputs) => twMerge(cx(inputs));
+function replaceShyInString(input) {
+  return input.replace(/&shy;/g, "\xAD");
 }
-export 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;
-        }
+function replaceShyInReactNode(node) {
+  if (typeof node === "string") {
+    return node.replace(/\u00AD/g, "");
+  }
+  if (isValidElement(node)) {
+    const element = node;
+    const { children, ...props } = element.props;
+    return cloneElement(element, {
+      ...props,
+      children: replaceShyInReactNode(children)
+    });
+  }
+  if (Array.isArray(node)) {
+    return node.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: replaceShyInReactNode(child) }, index.toString()));
+  }
+  return node;
+}
+function shy(input) {
+  if (input === null) {
+    return null;
+  }
+  if (typeof input === "string") {
+    return replaceShyInString(input);
+  }
+  return replaceShyInReactNode(input);
+}
+var quoteStyles = {
+  cs: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
+  // Danish, Norwegian - » « › ‹
+  da: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
+  // German (Germany, Austria) - „ " ‚ '
+  de: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
+  // German (Switzerland) - « » ‹ ›
+  "de-ch": { close: "\xBB", closeSingle: "\u203A", open: "\xAB", openSingle: "\u2039" },
+  // English (US, UK, etc.) - " " ' '
+  en: { close: "\u201D", closeSingle: "\u2019", open: "\u201C", openSingle: "\u2018" },
+  // Spanish, Italian, Portuguese - « » " "
+  es: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
+  fi: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
+  // French - « » ‹ › (with spaces)
+  fr: { close: " \xBB", closeSingle: " \u203A", open: "\xAB ", openSingle: "\u2039 " },
+  hu: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
+  it: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
+  // Japanese - 「 」 『 』
+  ja: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" },
+  // Dutch - ' ' ' '
+  nl: { close: "\u2019", closeSingle: "\u2019", open: "\u2018", openSingle: "\u2018" },
+  no: { close: "\xAB", closeSingle: "\u203A", open: "\xBB", openSingle: "\u2039" },
+  // Polish, Czech, Hungarian - „ " ‚ '
+  pl: { close: "\u201D", closeSingle: "\u2019", open: "\u201E", openSingle: "\u201A" },
+  pt: { close: "\xBB", closeSingle: "\u201D", open: "\xAB", openSingle: "\u201C" },
+  // Russian - « » ‚ '
+  ru: { close: "\xBB", closeSingle: "\u2019", open: "\xAB", openSingle: "\u201A" },
+  // Swedish, Finnish - " " ' '
+  sv: { close: "\u201D", closeSingle: "\u2019", open: "\u201D", openSingle: "\u2019" },
+  // Chinese - 「 」 『 』
+  zh: { close: "\u300D", closeSingle: "\u300F", open: "\u300C", openSingle: "\u300E" }
+};
+function getQuoteStyle(locale) {
+  const normalized = locale.toLowerCase();
+  const exactMatch = quoteStyles[normalized];
+  if (exactMatch) {
+    return exactMatch;
+  }
+  const baseLanguage = normalized.split("-")[0];
+  if (baseLanguage) {
+    const baseMatch = quoteStyles[baseLanguage];
+    if (baseMatch) {
+      return baseMatch;
     }
-    else if (to?.pathname) {
-        return to.pathname + (to.search ?? '') + (to.hash ?? '');
+  }
+  return quoteStyles.en;
+}
+function typographicQuotes(text, locale) {
+  const style = getQuoteStyle(locale);
+  let result = text.replace(/"([^"]*)"/g, `${style.open}$1${style.close}`);
+  result = result.replace(/'([^']*)'/g, `${style.openSingle}$1${style.closeSingle}`);
+  return result;
+}
+function replaceSpecialChars(text, locale) {
+  return shy(typographicQuotes(text, locale));
+}
+var 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;
     }
-    return '';
+  } else if (to?.pathname) {
+    return to.pathname + (to.search ?? "") + (to.hash ?? "");
+  }
+  return "";
 }
-const truncateText = (text, maxSentences, maxCharacters, maxParagraphs) => {
-    if (maxSentences === undefined && maxCharacters === undefined && maxParagraphs === undefined) {
-        return text;
+var 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 paragraphs = text.split(doubleNewlineRegex);
-    let truncatedText = '';
-    let charCount = 0;
-    let sentenceCount = 0;
-    let paragraphCount = 0;
-    for (const paragraph of paragraphs) {
-        if (maxParagraphs !== undefined && 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 !== undefined) {
-                if ((maxSentences === undefined || sentenceCount < maxSentences) &&
-                    (maxCharacters === undefined ||
-                        charCount + part.length + delimiter.length <= maxCharacters)) {
-                    truncatedText += part + delimiter;
-                    charCount += part.length + delimiter.length;
-                    if (delimiter.includes('.')) {
-                        sentenceCount++;
-                    }
-                }
-                else {
-                    break;
-                }
-            }
-        }
-        paragraphCount++;
-        if ((maxSentences !== undefined && sentenceCount >= maxSentences) ||
-            (maxCharacters !== undefined && charCount >= maxCharacters)) {
-            break;
-        }
-        if (paragraphCount < paragraphs.length) {
-            truncatedText += '\n\n';
+    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();
+  }
+  return truncatedText.trim();
 };
-export const MarkdownContainer = (props) => {
-    const rawText = props.children?.toString() || '';
-    let processedText = processTextOutsideMDXComponents(rawText, props.locale);
-    const shouldTruncate = Number.isInteger(props.sentences) ||
-        Number.isInteger(props.characters) ||
-        Number.isInteger(props.paragraphs);
-    if (shouldTruncate) {
-        processedText = truncateText(processedText, props.sentences, props.characters, props.paragraphs);
+var MarkdownContainer = (props) => {
+  const rawText = props.children?.toString() || "";
+  let processedText = processTextOutsideMDXComponents(rawText, props.locale);
+  const shouldTruncate = Number.isInteger(props.sentences) || Number.isInteger(props.characters) || Number.isInteger(props.paragraphs);
+  if (shouldTruncate) {
+    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
     }
-    return (_jsx(MDXProvider, { components: props.mdxComponents, children: _jsx(Markdown, { className: cn('markdown', props.className), options: {
-                disableParsingRawHTML: false,
-                forceWrapper: true,
-                tagfilter: false,
-                ...(props.markdownOverrides ? { overrides: props.markdownOverrides } : {}),
-            }, children: processedText }) }));
+  ) });
 };
+
+export { MarkdownContainer, transformLink };

package/dist/components/password-input.d.ts

@@ -1,9 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Input } from '@base-ui/react/input';
-export interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {
+
+interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {
 }
-export interface PasswordInputProps extends InputProps {
+interface PasswordInputProps extends InputProps {
     className?: string;
 }
-declare const PasswordInput: ({ className, ...props }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
-export { PasswordInput };
-//# sourceMappingURL=password-input.d.ts.map
+declare const PasswordInput: ({ className, ...props }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+export { type InputProps, PasswordInput, type PasswordInputProps };

package/dist/components/password-input.js

@@ -1,13 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@base-ui/react/button';
 import { Input } from '@base-ui/react/input';
 import { useState } from 'react';
-import { cn } from '../utils/cn';
-const PasswordInput = ({ className, ...props }) => {
-    const [showPassword, setShowPassword] = useState(false);
-    const togglePasswordVisibility = () => {
-        setShowPassword(!showPassword);
-    };
-    return (_jsxs("div", { className: 'relative', children: [_jsx(Input, { autoComplete: 'off', className: cn(className), type: showPassword ? 'text' : 'password', ...props }), _jsx(Button, { className: cn('absolute', 'right-[14px]', 'top-[35px]', 'flex', 'h-6', 'w-[20px]', 'cursor-pointer', 'flex-col', 'items-end', 'justify-center', 'text-gray-500'), onClick: togglePasswordVisibility, children: showPassword ? 'Off' : 'On' })] }));
+import { defineConfig, cx } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/password-input.tsx
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
+});
+var cn = (...inputs) => twMerge(cx(inputs));
+var PasswordInput = ({ className, ...props }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoComplete: "off",
+        className: cn(className),
+        type: showPassword ? "text" : "password",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: cn(
+          "absolute",
+          "right-[14px]",
+          "top-[35px]",
+          "flex",
+          "h-6",
+          "w-[20px]",
+          "cursor-pointer",
+          "flex-col",
+          "items-end",
+          "justify-center",
+          "text-gray-500"
+        ),
+        onClick: togglePasswordVisibility,
+        children: showPassword ? "Off" : "On"
+      }
+    )
+  ] });
 };
+
 export { PasswordInput };

package/dist/components/picture.d.ts

@@ -1,5 +1,6 @@
-import type React from 'react';
-export declare const screenSizeVariants: {
+import react__default from 'react';
+
+declare const screenSizeVariants: {
     readonly lg: 1280;
     readonly max: 1920;
     readonly md: 960;
@@ -8,11 +9,11 @@ export declare const screenSizeVariants: {
     readonly xl: 1600;
     readonly xs: 480;
 };
-export type ImageFormat = {
+type ImageFormat = {
     size: string;
     width: number;
 };
-export interface PictureProps {
+interface PictureProps {
     alt: string;
     baseUrl: string;
     className?: string;
@@ -21,6 +22,17 @@ export interface PictureProps {
     placeholder?: string;
     sizes?: string;
 }
-declare const Picture: React.FC<PictureProps>;
-export { Picture };
-//# sourceMappingURL=picture.d.ts.map
+/**
+ * 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__default.FC<PictureProps>;
+
+export { type ImageFormat, Picture, type PictureProps, screenSizeVariants };

package/dist/components/picture.js

@@ -1,36 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../utils/cn';
-export const screenSizeVariants = {
-    lg: 1280,
-    max: 1920,
-    md: 960,
-    min: 360,
-    sm: 640,
-    xl: 1600,
-    xs: 480,
-};
-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;
-    }
-    const isSimpleImage = (imageFormats.length === 1 && imageFormats[0]?.size === '') || !baseUrl.includes(placeholder);
-    if (isSimpleImage) {
-        return (_jsx("img", { alt: alt, className: cn(className, imgClassName), src: baseUrl }));
+import { defineConfig, cx } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
     }
-    const srcSet = imageFormats
-        .map(({ size, width }) => {
-        const url = baseUrl.replace(placeholder, size);
-        return `${url} ${width}w`;
-    })
-        .join(', ');
-    const defaultFormat = imageFormats[0];
-    const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
-    return (_jsxs("picture", { className: className, children: [_jsx("source", { sizes: sizes, srcSet: srcSet }), _jsx("img", { alt: alt, className: cn(imgClassName), src: defaultSrc })] }));
+  }
+});
+var cn = (...inputs) => twMerge(cx(inputs));
+var screenSizeVariants = {
+  lg: 1280,
+  max: 1920,
+  md: 960,
+  min: 360,
+  sm: 640,
+  xl: 1600,
+  xs: 480
+};
+var 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;
+  }
+  const isSimpleImage = imageFormats.length === 1 && imageFormats[0]?.size === "" || !baseUrl.includes(placeholder);
+  if (isSimpleImage) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        className: cn(className, imgClassName),
+        src: baseUrl
+      }
+    );
+  }
+  const srcSet = imageFormats.map(({ size, width }) => {
+    const url = baseUrl.replace(placeholder, size);
+    return `${url} ${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
+      }
+    )
+  ] });
 };
-export { Picture };
+
+export { Picture, screenSizeVariants };

package/dist/components/protected-email.d.ts

@@ -1,9 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
 interface ProtectedEmailProps {
     username: string;
     domain: string;
     text?: string;
     className?: string;
 }
-export declare function ProtectedEmail({ username, domain, text, className }: ProtectedEmailProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=protected-email.d.ts.map
+/**
+ * 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_runtime.JSX.Element;
+
+export { ProtectedEmail };

package/dist/components/protected-email.js

@@ -1,16 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-export 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 (_jsx("a", { "aria-label": `Email address: ${username} at ${domain}`, className: className, "data-email-protected": "true", href: mounted ? '#email-protected' : undefined, onClick: handleClick, children: fallbackText }));
+import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/protected-email.tsx
+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
+    }
+  );
 }
+
+export { ProtectedEmail };

package/dist/components/text.d.ts

@@ -1,17 +1,20 @@
-import type { ComponentProps } from 'react';
-import { type VariantProps } from '../utils/cn';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as cva from 'cva';
+import { VariantProps } from 'cva';
+import { ComponentProps } from 'react';
+
 declare const text: (props?: ({
     themeColor?: "primary" | undefined;
-    variant?: "code" | "primary" | "subtitle" | undefined;
+    variant?: "primary" | "code" | "subtitle" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
-export interface TextProps extends ComponentProps<'p'>, VariantProps<typeof text> {
+interface TextProps extends ComponentProps<'p'>, VariantProps<typeof text> {
 }
-export declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=text.d.ts.map
+declare const Text: (props: TextProps) => react_jsx_runtime.JSX.Element;
+
+export { Text, type TextProps };