@intlayer/design-system 8.4.3 → 8.4.5

package/dist/esm/components/Browser/Browser.mjs

@@ -1,2 +1,250 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t}from"../Button/Button.mjs";import{Input as n,inputVariants as r}from"../Input/Input.mjs";import{useEffect as i,useImperativeHandle as a,useRef as o,useState as s}from"react";import{ArrowLeft as c,ArrowRight as l,RotateCw as u}from"lucide-react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useIntlayer as p}from"react-intlayer";const m=({initialUrl:m=`https://example.com`,path:h,className:g,style:_,size:v=`md`,"aria-label":y,sandbox:b=`allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads`,ref:x,domainRestriction:S,...C})=>{let[w,T]=s(m),[E,D]=s(m),[O,k]=s([m]),[A,j]=s(0),[M,N]=s(null),[P,F]=s(!1),I=o(null);a(x,()=>I.current,[]);let L=p(`browser`);i(()=>{T(m),D(m),k([m]),j(0),N(null),F(!1)},[m]),i(()=>{if(h)try{let e=S??m,t=`${new URL(e).origin}${h}`;T(t);let n=!1;if(I.current?.contentWindow)try{let e=I.current.contentWindow.location.href;new URL(e).href===new URL(t).href&&(n=!0)}catch{}O[A]!==t&&(k(e=>{let n=e.slice(0,A+1);return n.push(t),n}),j(e=>e+1)),n||D(t),N(null)}catch{}},[h,S,m]);let R=e=>{try{let t=G(e);if(t===E){H();return}D(t),T(t),N(null);let n=O.slice(0,A+1);n.push(t),k(n),j(n.length-1)}catch(e){e instanceof Error&&e.message===`URL does not match allowed domain`&&S?N(L.domainRestrictionError?.value??`Only URLs from ${S} are allowed.`):N(L.errorMessage.value)}},z=()=>{if(A>0){let e=A-1,t=O[e];j(e),D(t),T(t),N(null)}},B=()=>{if(A<O.length-1){let e=A+1,t=O[e];j(e),D(t),T(t),N(null)}},V=e=>{e.preventDefault(),F(!0),R(w)},H=()=>{if(I.current){let e=I.current.src;I.current.src=``,setTimeout(()=>{I.current&&(I.current.src=e)},50)}},U=e=>e===`localhost`||/^(\d{1,3}\.){3}\d{1,3}$/.test(e)||/^[a-f0-9:]+$/i.test(e)?!0:!(!/^[a-z0-9.-]+$/i.test(e)||/^[-.]/.test(e)||/[-.]$/.test(e)||e.includes(`..`)||!e.includes(`.`)),W=()=>{if(!S)return null;try{return new URL(S)}catch{return null}},G=e=>{let t=e.trim();if(!t||/\s/.test(t))throw Error(`Invalid`);let n=W();if(t.startsWith(`/`)&&!t.startsWith(`//`))return n?new URL(`${n.origin}${t}`).toString():new URL(`${new URL(E).origin}${t}`).toString();let r=/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(t)?t:`https://${t}`,i=new URL(r);if(i.protocol!==`http:`&&i.protocol!==`https:`)throw Error(`Only http(s) is allowed`);if(!U(i.hostname))throw Error(`Invalid host`);if(n&&!(i.hostname===n.hostname&&i.protocol===n.protocol&&(n.port===``||i.port===n.port||i.host===n.host)))throw Error(`URL does not match allowed domain`);return i.toString()},K=P&&!!M,q=A>0,J=A<O.length-1;return f(`section`,{className:e(`flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]`,g),style:_,"aria-label":y??L.ariaLabel.value,children:[f(`div`,{className:`relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2`,children:[f(`div`,{className:`flex items-center gap-1`,children:[d(t,{type:`button`,onClick:z,disabled:!q,variant:`hoverable`,size:`icon-md`,label:L.backButtonLabel.value,Icon:c}),d(t,{type:`button`,onClick:B,disabled:!J,variant:`hoverable`,size:`icon-md`,label:L.forwardButtonLabel.value,Icon:l})]}),f(`form`,{onSubmit:V,noValidate:!0,className:e(r(),`flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl`,`bg-neutral/10 text-text/50 placeholder:text-neutral/80`),children:[d(`label`,{htmlFor:`browser-url`,className:`sr-only`,children:L.urlLabel.value}),d(n,{id:`browser-url`,type:`text`,inputMode:`url`,spellCheck:!1,autoCapitalize:`off`,variant:`invisible`,className:`ml-3 p-0!`,size:`sm`,autoCorrect:`off`,value:w,onChange:e=>{T(e.target.value),K&&N(null)},placeholder:L.urlPlaceholder.value,"aria-label":L.urlLabel.value,"aria-invalid":K,"aria-describedby":K?`browser-url-error`:void 0}),d(t,{type:`button`,onClick:H,variant:`hoverable`,size:`icon-md`,className:`p-1!`,label:`content.reloadButtonTitle.value`,Icon:u}),d(`button`,{type:`submit`,className:`sr-only absolute`,tabIndex:-1})]}),K&&d(`div`,{className:`absolute top-full left-4 z-20 mt-1`,children:d(`p`,{id:`browser-url-error`,role:`alert`,"aria-live":`assertive`,className:`rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm`,children:M})})]}),d(`div`,{className:`relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background`,children:d(`iframe`,{ref:I,src:E,title:L.iframeTitle.value,className:`size-full flex-1`,sandbox:b,loading:`lazy`,"aria-live":`polite`,...C})})]})};export{m as Browser};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Input, inputVariants } from "../Input/Input.mjs";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { ArrowLeft, ArrowRight, RotateCw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Browser/Browser.tsx
+const Browser = ({ initialUrl = "https://example.com", path, className, style, size = "md", "aria-label": ariaLabel, sandbox = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads", ref, domainRestriction, ...props }) => {
+	const [inputUrl, setInputUrl] = useState(initialUrl);
+	const [currentUrl, setCurrentUrl] = useState(initialUrl);
+	const [history, setHistory] = useState([initialUrl]);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [error, setError] = useState(null);
+	const [submitted, setSubmitted] = useState(false);
+	const internalIframeRef = useRef(null);
+	useImperativeHandle(ref, () => internalIframeRef.current, []);
+	const content = useIntlayer("browser");
+	useEffect(() => {
+		setInputUrl(initialUrl);
+		setCurrentUrl(initialUrl);
+		setHistory([initialUrl]);
+		setCurrentIndex(0);
+		setError(null);
+		setSubmitted(false);
+	}, [initialUrl]);
+	useEffect(() => {
+		if (!path) return;
+		try {
+			const baseOrigin = domainRestriction ?? initialUrl;
+			const fullUrl = `${new URL(baseOrigin).origin}${path}`;
+			setInputUrl(fullUrl);
+			let isAlreadyAtUrl = false;
+			if (internalIframeRef.current?.contentWindow) try {
+				const currentIframeHref = internalIframeRef.current.contentWindow.location.href;
+				if (new URL(currentIframeHref).href === new URL(fullUrl).href) isAlreadyAtUrl = true;
+			} catch {}
+			if (history[currentIndex] !== fullUrl) {
+				setHistory((prev) => {
+					const newHistory = prev.slice(0, currentIndex + 1);
+					newHistory.push(fullUrl);
+					return newHistory;
+				});
+				setCurrentIndex((prev) => prev + 1);
+			}
+			if (!isAlreadyAtUrl) setCurrentUrl(fullUrl);
+			setError(null);
+		} catch {}
+	}, [
+		path,
+		domainRestriction,
+		initialUrl
+	]);
+	const handleNavigateTo = (url) => {
+		try {
+			const validated = normalizeUrl(url);
+			if (validated === currentUrl) {
+				handleReload();
+				return;
+			}
+			setCurrentUrl(validated);
+			setInputUrl(validated);
+			setError(null);
+			const newHistory = history.slice(0, currentIndex + 1);
+			newHistory.push(validated);
+			setHistory(newHistory);
+			setCurrentIndex(newHistory.length - 1);
+		} catch (e) {
+			if (e instanceof Error && e.message === "URL does not match allowed domain" && domainRestriction) setError(content.domainRestrictionError?.value ?? `Only URLs from ${domainRestriction} are allowed.`);
+			else setError(content.errorMessage.value);
+		}
+	};
+	const handleBack = () => {
+		if (currentIndex > 0) {
+			const newIndex = currentIndex - 1;
+			const prevUrl = history[newIndex];
+			setCurrentIndex(newIndex);
+			setCurrentUrl(prevUrl);
+			setInputUrl(prevUrl);
+			setError(null);
+		}
+	};
+	const handleForward = () => {
+		if (currentIndex < history.length - 1) {
+			const newIndex = currentIndex + 1;
+			const nextUrl = history[newIndex];
+			setCurrentIndex(newIndex);
+			setCurrentUrl(nextUrl);
+			setInputUrl(nextUrl);
+			setError(null);
+		}
+	};
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		setSubmitted(true);
+		handleNavigateTo(inputUrl);
+	};
+	const handleReload = () => {
+		if (internalIframeRef.current) {
+			const src = internalIframeRef.current.src;
+			internalIframeRef.current.src = "";
+			setTimeout(() => {
+				if (internalIframeRef.current) internalIframeRef.current.src = src;
+			}, 50);
+		}
+	};
+	const isValidHostname = (host) => {
+		if (host === "localhost") return true;
+		if (/^(\d{1,3}\.){3}\d{1,3}$/.test(host)) return true;
+		if (/^[a-f0-9:]+$/i.test(host)) return true;
+		if (!/^[a-z0-9.-]+$/i.test(host)) return false;
+		if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;
+		if (host.includes("..")) return false;
+		if (!host.includes(".")) return false;
+		return true;
+	};
+	const getRestrictionOrigin = () => {
+		if (!domainRestriction) return null;
+		try {
+			return new URL(domainRestriction);
+		} catch {
+			return null;
+		}
+	};
+	const normalizeUrl = (raw) => {
+		const trimmed = raw.trim();
+		if (!trimmed || /\s/.test(trimmed)) throw new Error("Invalid");
+		const restrictionOrigin = getRestrictionOrigin();
+		if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+			if (restrictionOrigin) return new URL(`${restrictionOrigin.origin}${trimmed}`).toString();
+			return new URL(`${new URL(currentUrl).origin}${trimmed}`).toString();
+		}
+		const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed) ? trimmed : `https://${trimmed}`;
+		const url = new URL(candidate);
+		if (url.protocol !== "http:" && url.protocol !== "https:") throw new Error("Only http(s) is allowed");
+		if (!isValidHostname(url.hostname)) throw new Error("Invalid host");
+		if (restrictionOrigin) {
+			if (!(url.hostname === restrictionOrigin.hostname && url.protocol === restrictionOrigin.protocol && (restrictionOrigin.port === "" || url.port === restrictionOrigin.port || url.host === restrictionOrigin.host))) throw new Error("URL does not match allowed domain");
+		}
+		return url.toString();
+	};
+	const showError = submitted && !!error;
+	const canGoBack = currentIndex > 0;
+	const canGoForward = currentIndex < history.length - 1;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]", className),
+		style,
+		"aria-label": ariaLabel ?? content.ariaLabel.value,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						onClick: handleBack,
+						disabled: !canGoBack,
+						variant: "hoverable",
+						size: "icon-md",
+						label: content.backButtonLabel.value,
+						Icon: ArrowLeft
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						onClick: handleForward,
+						disabled: !canGoForward,
+						variant: "hoverable",
+						size: "icon-md",
+						label: content.forwardButtonLabel.value,
+						Icon: ArrowRight
+					})]
+				}),
+				/* @__PURE__ */ jsxs("form", {
+					onSubmit: handleSubmit,
+					noValidate: true,
+					className: cn(inputVariants(), "flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl", "bg-neutral/10 text-text/50 placeholder:text-neutral/80"),
+					children: [
+						/* @__PURE__ */ jsx("label", {
+							htmlFor: "browser-url",
+							className: "sr-only",
+							children: content.urlLabel.value
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							id: "browser-url",
+							type: "text",
+							inputMode: "url",
+							spellCheck: false,
+							autoCapitalize: "off",
+							variant: "invisible",
+							className: "ml-3 p-0!",
+							size: "sm",
+							autoCorrect: "off",
+							value: inputUrl,
+							onChange: (e) => {
+								setInputUrl(e.target.value);
+								if (showError) setError(null);
+							},
+							placeholder: content.urlPlaceholder.value,
+							"aria-label": content.urlLabel.value,
+							"aria-invalid": showError,
+							"aria-describedby": showError ? "browser-url-error" : void 0
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							onClick: handleReload,
+							variant: "hoverable",
+							size: "icon-md",
+							className: "p-1!",
+							label: "content.reloadButtonTitle.value",
+							Icon: RotateCw
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "sr-only absolute",
+							tabIndex: -1
+						})
+					]
+				}),
+				showError && /* @__PURE__ */ jsx("div", {
+					className: "absolute top-full left-4 z-20 mt-1",
+					children: /* @__PURE__ */ jsx("p", {
+						id: "browser-url-error",
+						role: "alert",
+						"aria-live": "assertive",
+						className: "rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm",
+						children: error
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background",
+			children: /* @__PURE__ */ jsx("iframe", {
+				ref: internalIframeRef,
+				src: currentUrl,
+				title: content.iframeTitle.value,
+				className: "size-full flex-1",
+				sandbox,
+				loading: "lazy",
+				"aria-live": "polite",
+				...props
+			})
+		})]
+	});
+};
+
+//#endregion
+export { Browser };
 //# sourceMappingURL=Browser.mjs.map

package/dist/esm/components/Browser/Browser.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Browser.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ArrowLeft, ArrowRight, RotateCw } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type FormEvent,\n  type HTMLAttributes,\n  type RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Input, inputVariants } from '../Input';\n\nexport type BrowserProps = {\n  initialUrl?: string;\n  path?: string;\n  className?: string;\n  style?: CSSProperties;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  'aria-label'?: string;\n  sandbox?: string;\n  ref?: RefObject<HTMLIFrameElement | null>;\n  domainRestriction?: string;\n} & HTMLAttributes<HTMLIFrameElement>;\n\nexport const Browser = ({\n  initialUrl = 'https://example.com',\n  path,\n  className,\n  style,\n  size = 'md',\n  'aria-label': ariaLabel,\n  sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads',\n  ref,\n  domainRestriction,\n  ...props\n}: BrowserProps) => {\n  // --- State -----------------------------------------------------------------\n  const [inputUrl, setInputUrl] = useState(initialUrl);\n  const [currentUrl, setCurrentUrl] = useState(initialUrl);\n\n  // History Management\n  const [history, setHistory] = useState<string[]>([initialUrl]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const [error, setError] = useState<string | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const internalIframeRef = useRef<HTMLIFrameElement>(null);\n\n  useImperativeHandle(ref, () => internalIframeRef.current!, []);\n  const content = useIntlayer('browser');\n\n  // --- Effects ---------------------------------------------------------------\n\n  // Reset everything if initialUrl changes completely\n  useEffect(() => {\n    setInputUrl(initialUrl);\n    setCurrentUrl(initialUrl);\n    setHistory([initialUrl]);\n    setCurrentIndex(0);\n    setError(null);\n    setSubmitted(false);\n  }, [initialUrl]);\n\n  // Sync external path changes with the URL bar and History\n  useEffect(() => {\n    if (!path) return;\n\n    try {\n      const baseOrigin = domainRestriction ?? initialUrl;\n      const origin = new URL(baseOrigin).origin;\n      const fullUrl = `${origin}${path}`;\n\n      // Update Input (Always update the visual bar)\n      setInputUrl(fullUrl);\n\n      // Check internal iframe state to avoid reload if already there\n      let isAlreadyAtUrl = false;\n      if (internalIframeRef.current?.contentWindow) {\n        try {\n          const currentIframeHref =\n            internalIframeRef.current.contentWindow.location.href;\n          if (new URL(currentIframeHref).href === new URL(fullUrl).href) {\n            isAlreadyAtUrl = true;\n          }\n        } catch {\n          // Cross-origin access ignored\n        }\n      }\n\n      // Update History Stack\n      // We perform this check regardless of `isAlreadyAtUrl`.\n      // If the path changed (even internally), we want to record it in the arrow stack.\n      if (history[currentIndex] !== fullUrl) {\n        setHistory((prev) => {\n          const newHistory = prev.slice(0, currentIndex + 1);\n          newHistory.push(fullUrl);\n          return newHistory;\n        });\n        setCurrentIndex((prev) => prev + 1);\n      }\n\n      // Navigate (Update src) only if NOT already there\n      // This prevents the iframe from refreshing when the user navigated inside it.\n      if (!isAlreadyAtUrl) {\n        setCurrentUrl(fullUrl);\n      }\n\n      setError(null);\n    } catch {\n      // Ignore invalid paths\n    }\n  }, [path, domainRestriction, initialUrl]); // Removed currentIndex dependency to prevent loops\n\n  // --- Navigation Logic ------------------------------------------------------\n\n  const handleNavigateTo = (url: string) => {\n    try {\n      const validated = normalizeUrl(url);\n\n      // If we are navigating to the exact same URL, just reload\n      if (validated === currentUrl) {\n        handleReload();\n        return;\n      }\n\n      setCurrentUrl(validated);\n      setInputUrl(validated);\n      setError(null);\n\n      // Update History: Slice future if we went back, then push new\n      const newHistory = history.slice(0, currentIndex + 1);\n      newHistory.push(validated);\n      setHistory(newHistory);\n      setCurrentIndex(newHistory.length - 1);\n    } catch (e) {\n      if (\n        e instanceof Error &&\n        e.message === 'URL does not match allowed domain' &&\n        domainRestriction\n      ) {\n        setError(\n          content.domainRestrictionError?.value ??\n            `Only URLs from ${domainRestriction} are allowed.`\n        );\n      } else {\n        setError(content.errorMessage.value);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1;\n      const prevUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(prevUrl);\n      setInputUrl(prevUrl);\n      setError(null);\n    }\n  };\n\n  const handleForward = () => {\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1;\n      const nextUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(nextUrl);\n      setInputUrl(nextUrl);\n      setError(null);\n    }\n  };\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setSubmitted(true);\n    handleNavigateTo(inputUrl);\n  };\n\n  const handleReload = () => {\n    if (internalIframeRef.current) {\n      // Create a clean reload effect\n      const src = internalIframeRef.current.src;\n      internalIframeRef.current.src = '';\n      setTimeout(() => {\n        if (internalIframeRef.current) internalIframeRef.current.src = src;\n      }, 50);\n    }\n  };\n\n  // --- Validation Helpers ----------------------------------------------------\n  const isValidHostname = (host: string) => {\n    if (host === 'localhost') return true;\n    if (/^(\\d{1,3}\\.){3}\\d{1,3}$/.test(host)) return true;\n    if (/^[a-f0-9:]+$/i.test(host)) return true;\n    if (!/^[a-z0-9.-]+$/i.test(host)) return false;\n    if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;\n    if (host.includes('..')) return false;\n    if (!host.includes('.')) return false;\n    return true;\n  };\n\n  const getRestrictionOrigin = (): URL | null => {\n    if (!domainRestriction) return null;\n    try {\n      return new URL(domainRestriction);\n    } catch {\n      return null;\n    }\n  };\n\n  const normalizeUrl = (raw: string) => {\n    const trimmed = raw.trim();\n    if (!trimmed || /\\s/.test(trimmed)) throw new Error('Invalid');\n\n    const restrictionOrigin = getRestrictionOrigin();\n    const isRelativePath = trimmed.startsWith('/') && !trimmed.startsWith('//');\n\n    if (isRelativePath) {\n      if (restrictionOrigin) {\n        return new URL(`${restrictionOrigin.origin}${trimmed}`).toString();\n      }\n      return new URL(`${new URL(currentUrl).origin}${trimmed}`).toString();\n    }\n\n    const hasProtocol = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed);\n    const candidate = hasProtocol ? trimmed : `https://${trimmed}`;\n    const url = new URL(candidate);\n\n    if (url.protocol !== 'http:' && url.protocol !== 'https:') {\n      throw new Error('Only http(s) is allowed');\n    }\n\n    if (!isValidHostname(url.hostname)) throw new Error('Invalid host');\n\n    if (restrictionOrigin) {\n      const urlMatches =\n        url.hostname === restrictionOrigin.hostname &&\n        url.protocol === restrictionOrigin.protocol &&\n        (restrictionOrigin.port === '' ||\n          url.port === restrictionOrigin.port ||\n          url.host === restrictionOrigin.host);\n\n      if (!urlMatches) throw new Error('URL does not match allowed domain');\n    }\n\n    return url.toString();\n  };\n\n  const showError = submitted && !!error;\n  const canGoBack = currentIndex > 0;\n  const canGoForward = currentIndex < history.length - 1;\n\n  return (\n    <section\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]',\n        className\n      )}\n      style={style}\n      aria-label={ariaLabel ?? content.ariaLabel.value}\n    >\n      {/* Top bar */}\n      <div className=\"relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2\">\n        {/* Navigation Controls */}\n        <div className=\"flex items-center gap-1\">\n          <Button\n            type=\"button\"\n            onClick={handleBack}\n            disabled={!canGoBack}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.backButtonLabel.value}\n            Icon={ArrowLeft}\n          />\n          <Button\n            type=\"button\"\n            onClick={handleForward}\n            disabled={!canGoForward}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.forwardButtonLabel.value}\n            Icon={ArrowRight}\n          />\n        </div>\n\n        {/* URL Bar */}\n        <form\n          onSubmit={handleSubmit}\n          noValidate\n          className={cn(\n            inputVariants(),\n            'flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl',\n            'bg-neutral/10 text-text/50 placeholder:text-neutral/80'\n          )}\n        >\n          <label htmlFor=\"browser-url\" className=\"sr-only\">\n            {content.urlLabel.value}\n          </label>\n          <Input\n            id=\"browser-url\"\n            type=\"text\"\n            inputMode=\"url\"\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            variant=\"invisible\"\n            className=\"ml-3 p-0!\"\n            size=\"sm\"\n            autoCorrect=\"off\"\n            value={inputUrl}\n            onChange={(e) => {\n              setInputUrl(e.target.value);\n              if (showError) setError(null);\n            }}\n            placeholder={content.urlPlaceholder.value}\n            aria-label={content.urlLabel.value}\n            aria-invalid={showError}\n            aria-describedby={showError ? 'browser-url-error' : undefined}\n          />\n\n          <Button\n            type=\"button\"\n            onClick={handleReload}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            className=\"p-1!\"\n            label={'content.reloadButtonTitle.value'}\n            Icon={RotateCw}\n          />\n\n          {/* invisible submit */}\n          <button type=\"submit\" className=\"sr-only absolute\" tabIndex={-1} />\n        </form>\n\n        {/* Error Message Tooltip */}\n        {showError && (\n          <div className=\"absolute top-full left-4 z-20 mt-1\">\n            <p\n              id=\"browser-url-error\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              className=\"rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm\"\n            >\n              {error}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Iframe */}\n      <div className=\"relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background\">\n        <iframe\n          ref={internalIframeRef}\n          src={currentUrl}\n          title={content.iframeTitle.value}\n          className=\"size-full flex-1\"\n          sandbox={sandbox}\n          loading=\"lazy\"\n          aria-live=\"polite\"\n          {...props}\n        />\n      </div>\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Browser.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ArrowLeft, ArrowRight, RotateCw } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type FormEvent,\n  type HTMLAttributes,\n  type RefObject,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Input, inputVariants } from '../Input';\n\nexport type BrowserProps = {\n  initialUrl?: string;\n  path?: string;\n  className?: string;\n  style?: CSSProperties;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  'aria-label'?: string;\n  sandbox?: string;\n  ref?: RefObject<HTMLIFrameElement | null>;\n  domainRestriction?: string;\n} & HTMLAttributes<HTMLIFrameElement>;\n\nexport const Browser = ({\n  initialUrl = 'https://example.com',\n  path,\n  className,\n  style,\n  size = 'md',\n  'aria-label': ariaLabel,\n  sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads',\n  ref,\n  domainRestriction,\n  ...props\n}: BrowserProps) => {\n  // --- State -----------------------------------------------------------------\n  const [inputUrl, setInputUrl] = useState(initialUrl);\n  const [currentUrl, setCurrentUrl] = useState(initialUrl);\n\n  // History Management\n  const [history, setHistory] = useState<string[]>([initialUrl]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const [error, setError] = useState<string | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const internalIframeRef = useRef<HTMLIFrameElement>(null);\n\n  useImperativeHandle(ref, () => internalIframeRef.current!, []);\n  const content = useIntlayer('browser');\n\n  // --- Effects ---------------------------------------------------------------\n\n  // Reset everything if initialUrl changes completely\n  useEffect(() => {\n    setInputUrl(initialUrl);\n    setCurrentUrl(initialUrl);\n    setHistory([initialUrl]);\n    setCurrentIndex(0);\n    setError(null);\n    setSubmitted(false);\n  }, [initialUrl]);\n\n  // Sync external path changes with the URL bar and History\n  useEffect(() => {\n    if (!path) return;\n\n    try {\n      const baseOrigin = domainRestriction ?? initialUrl;\n      const origin = new URL(baseOrigin).origin;\n      const fullUrl = `${origin}${path}`;\n\n      // Update Input (Always update the visual bar)\n      setInputUrl(fullUrl);\n\n      // Check internal iframe state to avoid reload if already there\n      let isAlreadyAtUrl = false;\n      if (internalIframeRef.current?.contentWindow) {\n        try {\n          const currentIframeHref =\n            internalIframeRef.current.contentWindow.location.href;\n          if (new URL(currentIframeHref).href === new URL(fullUrl).href) {\n            isAlreadyAtUrl = true;\n          }\n        } catch {\n          // Cross-origin access ignored\n        }\n      }\n\n      // Update History Stack\n      // We perform this check regardless of `isAlreadyAtUrl`.\n      // If the path changed (even internally), we want to record it in the arrow stack.\n      if (history[currentIndex] !== fullUrl) {\n        setHistory((prev) => {\n          const newHistory = prev.slice(0, currentIndex + 1);\n          newHistory.push(fullUrl);\n          return newHistory;\n        });\n        setCurrentIndex((prev) => prev + 1);\n      }\n\n      // Navigate (Update src) only if NOT already there\n      // This prevents the iframe from refreshing when the user navigated inside it.\n      if (!isAlreadyAtUrl) {\n        setCurrentUrl(fullUrl);\n      }\n\n      setError(null);\n    } catch {\n      // Ignore invalid paths\n    }\n  }, [path, domainRestriction, initialUrl]); // Removed currentIndex dependency to prevent loops\n\n  // --- Navigation Logic ------------------------------------------------------\n\n  const handleNavigateTo = (url: string) => {\n    try {\n      const validated = normalizeUrl(url);\n\n      // If we are navigating to the exact same URL, just reload\n      if (validated === currentUrl) {\n        handleReload();\n        return;\n      }\n\n      setCurrentUrl(validated);\n      setInputUrl(validated);\n      setError(null);\n\n      // Update History: Slice future if we went back, then push new\n      const newHistory = history.slice(0, currentIndex + 1);\n      newHistory.push(validated);\n      setHistory(newHistory);\n      setCurrentIndex(newHistory.length - 1);\n    } catch (e) {\n      if (\n        e instanceof Error &&\n        e.message === 'URL does not match allowed domain' &&\n        domainRestriction\n      ) {\n        setError(\n          content.domainRestrictionError?.value ??\n            `Only URLs from ${domainRestriction} are allowed.`\n        );\n      } else {\n        setError(content.errorMessage.value);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1;\n      const prevUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(prevUrl);\n      setInputUrl(prevUrl);\n      setError(null);\n    }\n  };\n\n  const handleForward = () => {\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1;\n      const nextUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(nextUrl);\n      setInputUrl(nextUrl);\n      setError(null);\n    }\n  };\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setSubmitted(true);\n    handleNavigateTo(inputUrl);\n  };\n\n  const handleReload = () => {\n    if (internalIframeRef.current) {\n      // Create a clean reload effect\n      const src = internalIframeRef.current.src;\n      internalIframeRef.current.src = '';\n      setTimeout(() => {\n        if (internalIframeRef.current) internalIframeRef.current.src = src;\n      }, 50);\n    }\n  };\n\n  // --- Validation Helpers ----------------------------------------------------\n  const isValidHostname = (host: string) => {\n    if (host === 'localhost') return true;\n    if (/^(\\d{1,3}\\.){3}\\d{1,3}$/.test(host)) return true;\n    if (/^[a-f0-9:]+$/i.test(host)) return true;\n    if (!/^[a-z0-9.-]+$/i.test(host)) return false;\n    if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;\n    if (host.includes('..')) return false;\n    if (!host.includes('.')) return false;\n    return true;\n  };\n\n  const getRestrictionOrigin = (): URL | null => {\n    if (!domainRestriction) return null;\n    try {\n      return new URL(domainRestriction);\n    } catch {\n      return null;\n    }\n  };\n\n  const normalizeUrl = (raw: string) => {\n    const trimmed = raw.trim();\n    if (!trimmed || /\\s/.test(trimmed)) throw new Error('Invalid');\n\n    const restrictionOrigin = getRestrictionOrigin();\n    const isRelativePath = trimmed.startsWith('/') && !trimmed.startsWith('//');\n\n    if (isRelativePath) {\n      if (restrictionOrigin) {\n        return new URL(`${restrictionOrigin.origin}${trimmed}`).toString();\n      }\n      return new URL(`${new URL(currentUrl).origin}${trimmed}`).toString();\n    }\n\n    const hasProtocol = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed);\n    const candidate = hasProtocol ? trimmed : `https://${trimmed}`;\n    const url = new URL(candidate);\n\n    if (url.protocol !== 'http:' && url.protocol !== 'https:') {\n      throw new Error('Only http(s) is allowed');\n    }\n\n    if (!isValidHostname(url.hostname)) throw new Error('Invalid host');\n\n    if (restrictionOrigin) {\n      const urlMatches =\n        url.hostname === restrictionOrigin.hostname &&\n        url.protocol === restrictionOrigin.protocol &&\n        (restrictionOrigin.port === '' ||\n          url.port === restrictionOrigin.port ||\n          url.host === restrictionOrigin.host);\n\n      if (!urlMatches) throw new Error('URL does not match allowed domain');\n    }\n\n    return url.toString();\n  };\n\n  const showError = submitted && !!error;\n  const canGoBack = currentIndex > 0;\n  const canGoForward = currentIndex < history.length - 1;\n\n  return (\n    <section\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]',\n        className\n      )}\n      style={style}\n      aria-label={ariaLabel ?? content.ariaLabel.value}\n    >\n      {/* Top bar */}\n      <div className=\"relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2\">\n        {/* Navigation Controls */}\n        <div className=\"flex items-center gap-1\">\n          <Button\n            type=\"button\"\n            onClick={handleBack}\n            disabled={!canGoBack}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.backButtonLabel.value}\n            Icon={ArrowLeft}\n          />\n          <Button\n            type=\"button\"\n            onClick={handleForward}\n            disabled={!canGoForward}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.forwardButtonLabel.value}\n            Icon={ArrowRight}\n          />\n        </div>\n\n        {/* URL Bar */}\n        <form\n          onSubmit={handleSubmit}\n          noValidate\n          className={cn(\n            inputVariants(),\n            'flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl',\n            'bg-neutral/10 text-text/50 placeholder:text-neutral/80'\n          )}\n        >\n          <label htmlFor=\"browser-url\" className=\"sr-only\">\n            {content.urlLabel.value}\n          </label>\n          <Input\n            id=\"browser-url\"\n            type=\"text\"\n            inputMode=\"url\"\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            variant=\"invisible\"\n            className=\"ml-3 p-0!\"\n            size=\"sm\"\n            autoCorrect=\"off\"\n            value={inputUrl}\n            onChange={(e) => {\n              setInputUrl(e.target.value);\n              if (showError) setError(null);\n            }}\n            placeholder={content.urlPlaceholder.value}\n            aria-label={content.urlLabel.value}\n            aria-invalid={showError}\n            aria-describedby={showError ? 'browser-url-error' : undefined}\n          />\n\n          <Button\n            type=\"button\"\n            onClick={handleReload}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            className=\"p-1!\"\n            label={'content.reloadButtonTitle.value'}\n            Icon={RotateCw}\n          />\n\n          {/* invisible submit */}\n          <button type=\"submit\" className=\"sr-only absolute\" tabIndex={-1} />\n        </form>\n\n        {/* Error Message Tooltip */}\n        {showError && (\n          <div className=\"absolute top-full left-4 z-20 mt-1\">\n            <p\n              id=\"browser-url-error\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              className=\"rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm\"\n            >\n              {error}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Iframe */}\n      <div className=\"relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background\">\n        <iframe\n          ref={internalIframeRef}\n          src={currentUrl}\n          title={content.iframeTitle.value}\n          className=\"size-full flex-1\"\n          sandbox={sandbox}\n          loading=\"lazy\"\n          aria-live=\"polite\"\n          {...props}\n        />\n      </div>\n    </section>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Browser/index.mjs

@@ -1 +1,3 @@
-import{Browser as e}from"./Browser.mjs";export{e as Browser};
+import { Browser } from "./Browser.mjs";
+
+export { Browser };

package/dist/esm/components/Button/Button.mjs

@@ -1,2 +1,288 @@
-import{cn as e}from"../../utils/cn.mjs";import{ContainerRoundedSize as t}from"../Container/index.mjs";import{Loader as n}from"../Loader/index.mjs";import{cva as r}from"class-variance-authority";import{jsx as i,jsxs as a}from"react/jsx-runtime";let o=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.ICON_SM=`icon-sm`,e.ICON_MD=`icon-md`,e.ICON_LG=`icon-lg`,e.ICON_XL=`icon-xl`,e}({});const s=r(`flex-none shrink-0`,{variants:{size:{[`${o.SM}`]:`size-3`,[`${o.MD}`]:`size-4`,[`${o.LG}`]:`size-5`,[`${o.XL}`]:`size-6`,[`${o.ICON_SM}`]:`size-3`,[`${o.ICON_MD}`]:`size-4`,[`${o.ICON_LG}`]:`size-4`,[`${o.ICON_XL}`]:`size-5`}},defaultVariants:{size:o.MD}});let c=function(e){return e.DEFAULT=`default`,e.NONE=`none`,e.OUTLINE=`outline`,e.LINK=`link`,e.INVISIBLE_LINK=`invisible-link`,e.HOVERABLE=`hoverable`,e.FADE=`fade`,e.INPUT=`input`,e}({}),l=function(e){return e.PRIMARY=`primary`,e.SECONDARY=`secondary`,e.DESTRUCTIVE=`destructive`,e.NEUTRAL=`neutral`,e.LIGHT=`light`,e.DARK=`dark`,e.TEXT=`text`,e.CARD=`card`,e.TEXT_INVERSE=`text-inverse`,e.CURRENT=`current`,e.ERROR=`error`,e.SUCCESS=`success`,e.CUSTOM=`custom`,e}({}),u=function(e){return e.LEFT=`left`,e.CENTER=`center`,e.RIGHT=`right`,e}({});const d=r(`relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50`,{variants:{size:{[`${o.SM}`]:`min-h-7 px-3 text-xs max-md:py-1`,[`${o.MD}`]:`min-h-8 px-6 text-sm max-md:py-2`,[`${o.LG}`]:`min-h-10 px-8 text-lg max-md:py-3`,[`${o.XL}`]:`min-h-11 px-10 text-xl max-md:py-4`,[`${o.ICON_SM}`]:`p-1.5`,[`${o.ICON_MD}`]:`p-1.5`,[`${o.ICON_LG}`]:`p-2`,[`${o.ICON_XL}`]:`p-3`},color:{[`${l.PRIMARY}`]:`hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light`,[`${l.SECONDARY}`]:`hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light`,[`${l.DESTRUCTIVE}`]:`hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light`,[`${l.NEUTRAL}`]:`text-neutral ring-neutral-500/5 *:text-text-light`,[`${l.CARD}`]:`hover-card-500/20 text-card ring-card-500/20 *:text-text-light`,[`${l.LIGHT}`]:`hover-white-500/20 text-white ring-white/20 *:text-text-light`,[`${l.DARK}`]:`text-neutral-800 ring-text-light/50 *:text-text-light`,[`${l.TEXT}`]:`text-text ring-text/20 *:text-text-opposite`,[`${l.CURRENT}`]:`hover-current-500/10 text-current ring-current/10 *:text-text-light`,[`${l.TEXT_INVERSE}`]:`text-text-opposite ring-text-opposite/20 *:text-text`,[`${l.ERROR}`]:`hover-error-500/20 text-error ring-error/20 *:text-text-light`,[`${l.SUCCESS}`]:`hover-success-500/20 text-success ring-success/20 *:text-text-light`,[`${l.CUSTOM}`]:``},roundedSize:{[`${t.NONE}`]:`rounded-none`,[`${t.SM}`]:`rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl`,[`${t.MD}`]:`rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl`,[`${t.LG}`]:`rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl`,[`${t.XL}`]:`rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl`,[`${t[`2xl`]}`]:`rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]`,[`${t[`3xl`]}`]:`rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]`,[`${t[`4xl`]}`]:`rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]`,[`${t[`5xl`]}`]:`rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]`,[`${t.FULL}`]:`rounded-full`},variant:{[`${c.DEFAULT}`]:[`bg-current`,`hover:bg-current/90`,`hover:ring-5`,`aria-selected:ring-5`],[`${c.OUTLINE}`]:[`rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!`,`hover:bg-current/20 focus-visible:bg-current/20`,`hover:ring-5 focus-visible:ring-5`,`aria-selected:ring-5`],[`${c.NONE}`]:`border-none bg-current/0 text-inherit hover:bg-current/0`,[`${c.LINK}`]:`h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline`,[`${c.INVISIBLE_LINK}`]:`h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent`,[`${c.HOVERABLE}`]:`rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5`,[`${c.FADE}`]:[`rounded-lg border-none bg-current/10 ring-current/5 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5`,`hover:ring-5 focus-visible:ring-5`,`aria-selected:ring-5`],[`${c.INPUT}`]:[`text-text`,`w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl`,`transition-shadow duration-100 md:text-sm`,`ring-0`,`disabled:opacity-50`,`text-text`,`bg-neutral-50 dark:bg-neutral-950`,`ring-neutral-100 dark:ring-neutral-700`,`hover:ring-3`,`aria-selected:ring-4`,`focus-visible:ring-3`,`disabled:ring-0`,`focus-visible:outline-none`,`[box-shadow:none] focus:[box-shadow:none]`,`aria-invalid:border-error`]},textAlign:{[`${u.LEFT}`]:`justify-start text-left`,[`${u.CENTER}`]:`justify-center text-center`,[`${u.RIGHT}`]:`justify-end text-right`},isFullWidth:{true:`w-full`,false:``}},defaultVariants:{variant:`${c.DEFAULT}`,size:`${o.MD}`,color:`${l.CUSTOM}`,roundedSize:`${t.MD}`,textAlign:`${u.CENTER}`,isFullWidth:!1}}),f=({variant:t,size:r,color:l,children:f,Icon:p,IconRight:m,iconClassName:h,isLoading:g=!1,isActive:_,isSelected:v,isFullWidth:y,roundedSize:b,textAlign:x,disabled:S,label:C,className:w,type:T=`button`,"aria-describedby":E,"aria-expanded":D,"aria-haspopup":O,"aria-pressed":k,...A})=>{let j=t===`${c.LINK}`||t===`${c.INVISIBLE_LINK}`,M=!f&&(p||m),N={"aria-label":M?C??void 0:void 0,"aria-labelledby":void 0,"aria-describedby":E,"aria-expanded":D,"aria-haspopup":O,"aria-pressed":_===void 0?k:_,"aria-busy":g,"aria-current":_?`page`:void 0,"aria-disabled":S||g,"aria-selected":v},P=r===o.ICON_SM||r===o.ICON_MD||r===o.ICON_LG||r===o.ICON_XL;return a(`button`,{disabled:g||S,role:j?`link`:`button`,type:T,className:d({variant:t,size:r,color:l,isFullWidth:y,roundedSize:b,textAlign:x??(m?u.LEFT:u.CENTER),className:w}),...N,...A,children:[p&&!g&&i(p,{className:s({size:r,className:e(!P&&`mr-3`,h)}),"aria-hidden":`true`}),i(`div`,{className:e(`flex items-center justify-center transition-[width] duration-300`,g&&r===o.SM&&`w-3`,g&&r===o.MD&&`w-4`,g&&r===o.LG&&`w-5`,g&&r===o.XL&&`w-6`),children:i(n,{className:s({size:r,className:e(!P&&`mr-3`,h)}),isLoading:g,"aria-hidden":`true`,"data-testid":`loader`})}),f&&i(`span`,{className:`flex-1 truncate whitespace-nowrap`,children:f}),!f&&M&&i(`span`,{className:`sr-only`,children:C}),m&&i(m,{className:s({size:r,className:e(!P&&`ml-3`,h)}),"aria-hidden":`true`})]})};export{f as Button,l as ButtonColor,o as ButtonSize,u as ButtonTextAlign,c as ButtonVariant,d as buttonVariants};
+import { cn } from "../../utils/cn.mjs";
+import { ContainerRoundedSize } from "../Container/index.mjs";
+import { Loader } from "../Loader/index.mjs";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Button/Button.tsx
+/**
+* Button size variants for different use cases
+*/
+let ButtonSize = /* @__PURE__ */ function(ButtonSize) {
+	ButtonSize["SM"] = "sm";
+	ButtonSize["MD"] = "md";
+	ButtonSize["LG"] = "lg";
+	ButtonSize["XL"] = "xl";
+	ButtonSize["ICON_SM"] = "icon-sm";
+	ButtonSize["ICON_MD"] = "icon-md";
+	ButtonSize["ICON_LG"] = "icon-lg";
+	ButtonSize["ICON_XL"] = "icon-xl";
+	return ButtonSize;
+}({});
+const buttonIconVariants = cva("flex-none shrink-0", {
+	variants: { size: {
+		[`${ButtonSize.SM}`]: "size-3",
+		[`${ButtonSize.MD}`]: "size-4",
+		[`${ButtonSize.LG}`]: "size-5",
+		[`${ButtonSize.XL}`]: "size-6",
+		[`${ButtonSize.ICON_SM}`]: "size-3",
+		[`${ButtonSize.ICON_MD}`]: "size-4",
+		[`${ButtonSize.ICON_LG}`]: "size-4",
+		[`${ButtonSize.ICON_XL}`]: "size-5"
+	} },
+	defaultVariants: { size: ButtonSize.MD }
+});
+/**
+* Button visual style variants
+*/
+let ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
+	ButtonVariant["DEFAULT"] = "default";
+	ButtonVariant["NONE"] = "none";
+	ButtonVariant["OUTLINE"] = "outline";
+	ButtonVariant["LINK"] = "link";
+	ButtonVariant["INVISIBLE_LINK"] = "invisible-link";
+	ButtonVariant["HOVERABLE"] = "hoverable";
+	ButtonVariant["FADE"] = "fade";
+	ButtonVariant["INPUT"] = "input";
+	return ButtonVariant;
+}({});
+/**
+* Button color themes that work with the design system
+*/
+let ButtonColor = /* @__PURE__ */ function(ButtonColor) {
+	ButtonColor["PRIMARY"] = "primary";
+	ButtonColor["SECONDARY"] = "secondary";
+	ButtonColor["DESTRUCTIVE"] = "destructive";
+	ButtonColor["NEUTRAL"] = "neutral";
+	ButtonColor["LIGHT"] = "light";
+	ButtonColor["DARK"] = "dark";
+	ButtonColor["TEXT"] = "text";
+	ButtonColor["CARD"] = "card";
+	ButtonColor["TEXT_INVERSE"] = "text-inverse";
+	ButtonColor["CURRENT"] = "current";
+	ButtonColor["ERROR"] = "error";
+	ButtonColor["SUCCESS"] = "success";
+	ButtonColor["CUSTOM"] = "custom";
+	return ButtonColor;
+}({});
+/**
+* Text alignment options for button content
+*/
+let ButtonTextAlign = /* @__PURE__ */ function(ButtonTextAlign) {
+	ButtonTextAlign["LEFT"] = "left";
+	ButtonTextAlign["CENTER"] = "center";
+	ButtonTextAlign["RIGHT"] = "right";
+	return ButtonTextAlign;
+}({});
+/**
+* Enhanced button variants with improved accessibility and focus states
+*/
+const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		size: {
+			[`${ButtonSize.SM}`]: "min-h-7 px-3 text-xs max-md:py-1",
+			[`${ButtonSize.MD}`]: "min-h-8 px-6 text-sm max-md:py-2",
+			[`${ButtonSize.LG}`]: "min-h-10 px-8 text-lg max-md:py-3",
+			[`${ButtonSize.XL}`]: "min-h-11 px-10 text-xl max-md:py-4",
+			[`${ButtonSize.ICON_SM}`]: "p-1.5",
+			[`${ButtonSize.ICON_MD}`]: "p-1.5",
+			[`${ButtonSize.ICON_LG}`]: "p-2",
+			[`${ButtonSize.ICON_XL}`]: "p-3"
+		},
+		color: {
+			[`${ButtonColor.PRIMARY}`]: "hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light",
+			[`${ButtonColor.SECONDARY}`]: "hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light",
+			[`${ButtonColor.DESTRUCTIVE}`]: "hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light",
+			[`${ButtonColor.NEUTRAL}`]: "text-neutral ring-neutral-500/5 *:text-text-light",
+			[`${ButtonColor.CARD}`]: "hover-card-500/20 text-card ring-card-500/20 *:text-text-light",
+			[`${ButtonColor.LIGHT}`]: "hover-white-500/20 text-white ring-white/20 *:text-text-light",
+			[`${ButtonColor.DARK}`]: "text-neutral-800 ring-text-light/50 *:text-text-light",
+			[`${ButtonColor.TEXT}`]: "text-text ring-text/20 *:text-text-opposite",
+			[`${ButtonColor.CURRENT}`]: "hover-current-500/10 text-current ring-current/10 *:text-text-light",
+			[`${ButtonColor.TEXT_INVERSE}`]: "text-text-opposite ring-text-opposite/20 *:text-text",
+			[`${ButtonColor.ERROR}`]: "hover-error-500/20 text-error ring-error/20 *:text-text-light",
+			[`${ButtonColor.SUCCESS}`]: "hover-success-500/20 text-success ring-success/20 *:text-text-light",
+			[`${ButtonColor.CUSTOM}`]: ""
+		},
+		roundedSize: {
+			[`${ContainerRoundedSize.NONE}`]: "rounded-none",
+			[`${ContainerRoundedSize.SM}`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+			[`${ContainerRoundedSize.MD}`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+			[`${ContainerRoundedSize.LG}`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+			[`${ContainerRoundedSize.XL}`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+			[`${ContainerRoundedSize["2xl"]}`]: "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
+			[`${ContainerRoundedSize["3xl"]}`]: "rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]",
+			[`${ContainerRoundedSize["4xl"]}`]: "rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]",
+			[`${ContainerRoundedSize["5xl"]}`]: "rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]",
+			[`${ContainerRoundedSize.FULL}`]: "rounded-full"
+		},
+		variant: {
+			[`${ButtonVariant.DEFAULT}`]: [
+				"bg-current",
+				"hover:bg-current/90",
+				"hover:ring-5",
+				"aria-selected:ring-5"
+			],
+			[`${ButtonVariant.OUTLINE}`]: [
+				"rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!",
+				"hover:bg-current/20 focus-visible:bg-current/20",
+				"hover:ring-5 focus-visible:ring-5",
+				"aria-selected:ring-5"
+			],
+			[`${ButtonVariant.NONE}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
+			[`${ButtonVariant.LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline",
+			[`${ButtonVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent",
+			[`${ButtonVariant.HOVERABLE}`]: "rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5",
+			[`${ButtonVariant.FADE}`]: [
+				"rounded-lg border-none bg-current/10 ring-current/5 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5",
+				"hover:ring-5 focus-visible:ring-5",
+				"aria-selected:ring-5"
+			],
+			[`${ButtonVariant.INPUT}`]: [
+				"text-text",
+				"w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl",
+				"transition-shadow duration-100 md:text-sm",
+				"ring-0",
+				"disabled:opacity-50",
+				"text-text",
+				"bg-neutral-50 dark:bg-neutral-950",
+				"ring-neutral-100 dark:ring-neutral-700",
+				"hover:ring-3",
+				"aria-selected:ring-4",
+				"focus-visible:ring-3",
+				"disabled:ring-0",
+				"focus-visible:outline-none",
+				"[box-shadow:none] focus:[box-shadow:none]",
+				"aria-invalid:border-error"
+			]
+		},
+		textAlign: {
+			[`${ButtonTextAlign.LEFT}`]: "justify-start text-left",
+			[`${ButtonTextAlign.CENTER}`]: "justify-center text-center",
+			[`${ButtonTextAlign.RIGHT}`]: "justify-end text-right"
+		},
+		isFullWidth: {
+			true: "w-full",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: `${ButtonVariant.DEFAULT}`,
+		size: `${ButtonSize.MD}`,
+		color: `${ButtonColor.CUSTOM}`,
+		roundedSize: `${ContainerRoundedSize.MD}`,
+		textAlign: `${ButtonTextAlign.CENTER}`,
+		isFullWidth: false
+	}
+});
+/**
+* Button Component - A comprehensive, accessible button component
+*
+* Features:
+* - Full accessibility compliance with ARIA attributes
+* - Multiple variants and sizes for different use cases
+* - Icon support (left and right positioning)
+* - Loading states with spinner
+* - Keyboard navigation support
+* - Focus management with visible indicators
+* - Responsive design adaptations
+*
+* @example
+* ```tsx
+* // Basic button
+* <Button label="Click me">Click me</Button>
+*
+* // Button with icon and loading state
+* <Button
+*   label="Save document"
+*   Icon={SaveIcon}
+*   isLoading={saving}
+*   disabled={!hasChanges}
+* >
+*   Save
+* </Button>
+*
+* // Destructive action button
+* <Button
+*   variant={`${ButtonVariant.OUTLINE}`}
+*   color={ButtonColor.DESTRUCTIVE}
+*   label="Delete item permanently"
+*   aria-describedby="delete-warning"
+* >
+*   Delete
+* </Button>
+* ```
+*/
+const Button = ({ variant, size, color, children, Icon, IconRight, iconClassName, isLoading = false, isActive, isSelected, isFullWidth, roundedSize, textAlign, disabled, label, className, type = "button", "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-pressed": ariaPressed, ...props }) => {
+	const isLink = variant === `${ButtonVariant.LINK}` || variant === `${ButtonVariant.INVISIBLE_LINK}`;
+	const isIconOnly = !children && (Icon || IconRight);
+	const accessibilityProps = {
+		"aria-label": isIconOnly ? label ?? void 0 : void 0,
+		"aria-labelledby": !isIconOnly ? void 0 : void 0,
+		"aria-describedby": ariaDescribedBy,
+		"aria-expanded": ariaExpanded,
+		"aria-haspopup": ariaHasPopup,
+		"aria-pressed": isActive !== void 0 ? isActive : ariaPressed,
+		"aria-busy": isLoading,
+		"aria-current": isActive ? "page" : void 0,
+		"aria-disabled": disabled || isLoading,
+		"aria-selected": isSelected
+	};
+	const isSquareButton = size === ButtonSize.ICON_SM || size === ButtonSize.ICON_MD || size === ButtonSize.ICON_LG || size === ButtonSize.ICON_XL;
+	return /* @__PURE__ */ jsxs("button", {
+		disabled: isLoading || disabled,
+		role: isLink ? "link" : "button",
+		type,
+		className: buttonVariants({
+			variant,
+			size,
+			color,
+			isFullWidth,
+			roundedSize,
+			textAlign: textAlign ?? (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),
+			className
+		}),
+		...accessibilityProps,
+		...props,
+		children: [
+			Icon && !isLoading && /* @__PURE__ */ jsx(Icon, {
+				className: buttonIconVariants({
+					size,
+					className: cn(!isSquareButton && "mr-3", iconClassName)
+				}),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center justify-center transition-[width] duration-300", isLoading && size === ButtonSize.SM && "w-3", isLoading && size === ButtonSize.MD && "w-4", isLoading && size === ButtonSize.LG && "w-5", isLoading && size === ButtonSize.XL && "w-6"),
+				children: /* @__PURE__ */ jsx(Loader, {
+					className: buttonIconVariants({
+						size,
+						className: cn(!isSquareButton && "mr-3", iconClassName)
+					}),
+					isLoading,
+					"aria-hidden": "true",
+					"data-testid": "loader"
+				})
+			}),
+			children && /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate whitespace-nowrap",
+				children
+			}),
+			!children && isIconOnly && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label
+			}),
+			IconRight && /* @__PURE__ */ jsx(IconRight, {
+				className: buttonIconVariants({
+					size,
+					className: cn(!isSquareButton && "ml-3", iconClassName)
+				}),
+				"aria-hidden": "true"
+			})
+		]
+	});
+};
+
+//#endregion
+export { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, buttonVariants };
 //# sourceMappingURL=Button.mjs.map