@neut/ui 0.0.1

package/dist/components/image/Image.types.d.ts

@@ -0,0 +1,140 @@
+import { JSX } from 'solid-js';
+import { VALID_LOADING_VALUES } from './Image.utils';
+export interface StaticImageData {
+    src: string;
+    height: number;
+    width: number;
+    blurDataURL?: string;
+    blurWidth?: number;
+    blurHeight?: number;
+}
+export interface StaticRequire {
+    default: StaticImageData;
+}
+export type StaticImport = StaticRequire | StaticImageData;
+export interface ImageLoaderProps {
+    src: string;
+    width: number;
+    quality?: number;
+}
+export type ImageConfig = ImageConfigComplete & {
+    allSizes: number[];
+    output?: "standalone" | "export";
+};
+export type ImageLoader = (props: ImageLoaderProps) => string;
+export type ImageLoaderPropsWithConfig = ImageLoaderProps & {
+    config: Readonly<ImageConfig>;
+};
+export type ImageLoaderWithConfig = (p: ImageLoaderPropsWithConfig) => string;
+export type PlaceholderValue = "blur" | "empty" | `data:image/${string}`;
+/**
+ * 图片加载完成后触发，接收一个类似 React SyntheticEvent 的对象。
+ * SolidJS 中直接使用原生 Event 即可。
+ */
+export type OnLoad = (event: Event & {
+    currentTarget: HTMLImageElement;
+    target: Element;
+}) => void;
+/** @deprecated 使用 onLoad 替代 */
+export type OnLoadingComplete = (img: HTMLImageElement) => void;
+export interface ImageConfigComplete {
+    deviceSizes: number[];
+    imageSizes: number[];
+    loader: "default" | "imgix" | "cloudinary" | "akamai" | "custom";
+    path: string;
+    loaderFile: string;
+    domains: string[];
+    disableStaticImages: boolean;
+    minimumCacheTTL: number;
+    formats: ("image/avif" | "image/webp")[];
+    dangerouslyAllowSVG: boolean;
+    contentSecurityPolicy: string;
+    contentDispositionType: "inline" | "attachment";
+    remotePatterns: RemotePattern[];
+    localPatterns?: LocalPattern[];
+    unoptimized: boolean;
+    qualities?: number[];
+    /** 由运行时计算追加 */
+    allSizes?: number[];
+}
+export interface RemotePattern {
+    protocol?: "http" | "https";
+    hostname: string;
+    port?: string;
+    pathname?: string;
+    search?: string;
+}
+export interface LocalPattern {
+    pathname?: string;
+    search?: string;
+}
+export type LoadingValue = (typeof VALID_LOADING_VALUES)[number];
+/** 公开的 <Image> 组件 Props */
+export interface ImageProps extends Omit<JSX.IntrinsicElements["img"], "src" | "srcSet" | "ref" | "alt" | "width" | "height" | "loading" | "style" | "onLoad"> {
+    style?: JSX.CSSProperties;
+    src: string | StaticImport;
+    alt: string;
+    width?: number | `${number}`;
+    height?: number | `${number}`;
+    fill?: boolean;
+    loader?: ImageLoader;
+    quality?: number | `${number}`;
+    preload?: boolean;
+    onLoad?: OnLoad;
+    /**
+     * @deprecated Use `preload` prop instead.
+     * See https://nextjs.org/docs/app/api-reference/components/image#preload
+     */
+    priority?: boolean;
+    loading?: LoadingValue;
+    placeholder?: PlaceholderValue;
+    blurDataURL?: string;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    /**
+     * @deprecated Use `onLoad` instead.
+     * @see https://nextjs.org/docs/app/api-reference/components/image#onload
+     */
+    onLoadingComplete?: OnLoadingComplete;
+    /**
+     * @deprecated Use `fill` prop instead of `layout="fill"` or change import to `next/legacy/image`.
+     * @see https://nextjs.org/docs/api-reference/next/legacy/image
+     */
+    layout?: string;
+    /**
+     * @deprecated Use `style` prop instead.
+     */
+    objectFit?: string;
+    /**
+     * @deprecated Use `style` prop instead.
+     */
+    objectPosition?: string;
+    /**
+     * @deprecated This prop does not do anything.
+     */
+    lazyBoundary?: string;
+    /**
+     * @deprecated This prop does not do anything.
+     */
+    lazyRoot?: string;
+}
+export type ImgProps = Omit<ImageProps, "src" | "loader"> & {
+    loading: LoadingValue;
+    width: number | undefined;
+    height: number | undefined;
+    style: NonNullable<JSX.IntrinsicElements["img"]["style"]>;
+    sizes: string | undefined;
+    srcSet: string | undefined;
+    src: string;
+};
+/** getImgProps 的返回结构 */
+export interface ImgPropsResult {
+    props: ImgProps;
+    meta: {
+        unoptimized: boolean;
+        placeholder: PlaceholderValue;
+        fill: boolean;
+        preload: boolean;
+    };
+}
+export type PlaceholderStyle = Partial<Pick<JSX.CSSProperties, "background-size" | "background-position" | "background-repeat" | "background-image">>;

package/dist/components/image/Image.utils.d.ts

@@ -0,0 +1,20 @@
+import { ImageConfigComplete, ImageProps, ImgPropsResult, OnLoad, OnLoadingComplete, PlaceholderValue } from './Image.types';
+/** 用于追踪每个 img 节点已处理的 src，避免重复触发 */
+type ImgWithDataProp = HTMLImageElement & {
+    "data-loaded-src"?: string;
+};
+/**
+ * 在图片加载/hydrate 后调用。
+ * - 使用 img.decode() 确保像素已解码再触发回调
+ * - 清除 blur placeholder
+ * - 开发环境下输出 fill / sizes 相关警告
+ */
+export declare function handleLoading(img: ImgWithDataProp, placeholder: PlaceholderValue, onLoad: OnLoad | undefined, onLoadingComplete: OnLoadingComplete | undefined, setBlurComplete: (v: boolean) => void, unoptimized: boolean, sizesInput: string | undefined): void;
+interface GetImgPropsOptions {
+    imgConf: ImageConfigComplete;
+    blurComplete: boolean;
+    showAltText: boolean;
+}
+export declare const VALID_LOADING_VALUES: readonly ["lazy", "eager", undefined];
+export declare function getImgProps(props: ImageProps, { imgConf, blurComplete, showAltText }: GetImgPropsOptions): ImgPropsResult;
+export {};

package/dist/components/image/Image.utils.js

@@ -0,0 +1,238 @@
+import { imageConfigDefault as e } from "./Image.config.js";
+import { mergeProps as t, splitProps as n } from "solid-js";
+//#region src/components/image/Image.utils.ts
+function r(e, t, n, r, i, a, o) {
+	let s = e?.src;
+	!e || e["data-loaded-src"] === s || (e["data-loaded-src"] = s, ("decode" in e ? e.decode() : Promise.resolve()).catch(() => {}).then(() => {
+		if (!(!e.parentElement || !e.isConnected)) {
+			if (t !== "empty" && i(!0), n) {
+				let t = new Event("load");
+				Object.defineProperty(t, "target", {
+					writable: !1,
+					value: e
+				}), n(t);
+			}
+			r && r(e);
+		}
+	}));
+}
+var i = [
+	"-moz-initial",
+	"fill",
+	"none",
+	"scale-down",
+	void 0
+];
+function a(r, { imgConf: a, blurComplete: l, showAltText: p }) {
+	let [m, h] = n(t({
+		fill: !1,
+		priority: !1,
+		preload: !1,
+		placeholder: "empty",
+		unoptimized: a.unoptimized,
+		decoding: "async"
+	}, r), [
+		"src",
+		"loader",
+		"quality",
+		"width",
+		"height",
+		"fill",
+		"sizes",
+		"priority",
+		"placeholder",
+		"blurDataURL",
+		"unoptimized",
+		"overrideSrc",
+		"onLoad",
+		"onLoadingComplete",
+		"layout",
+		"style",
+		"preload",
+		"loading",
+		"objectFit",
+		"objectPosition",
+		"lazyBoundary",
+		"lazyRoot",
+		"fetchpriority",
+		"class",
+		"decoding"
+	]), g, _ = a || e;
+	if ("allSizes" in _) g = _;
+	else {
+		let e = [..._.deviceSizes, ..._.imageSizes].sort((e, t) => e - t), t = _.deviceSizes.sort((e, t) => e - t), n = _.qualities?.sort((e, t) => e - t);
+		g = {
+			..._,
+			allSizes: e,
+			deviceSizes: t,
+			qualities: n
+		};
+	}
+	if (o === void 0) throw Error("images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config");
+	let v = m.style, y = m.sizes, b = m.fill, x = m.loader || o;
+	if (m.layout) {
+		m.layout === "fill" && (b = !0);
+		let e = {
+			intrinsic: {
+				maxWidth: "100%",
+				height: "auto"
+			},
+			responsive: {
+				width: "100%",
+				height: "auto"
+			}
+		}, t = {
+			responsive: "100vw",
+			fill: "100vw"
+		}, n = e[m.layout];
+		n && (v = {
+			...v,
+			...n
+		});
+		let r = t[m.layout];
+		r && !y && (y = r);
+	}
+	let S = "", C = m.blurDataURL, w = s(m.width), T = s(m.height), E, D;
+	if (u(m.src)) {
+		let e = c(m.src) ? m.src.default : m.src;
+		if (!e.src) throw Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(e)}`);
+		if (!e.height || !e.width) throw Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(e)}`);
+		if (E = e.blurWidth, D = e.blurHeight, C ||= e.blurDataURL, S = e.src, !b) {
+			if (!w && !T) w = e.width, T = e.height;
+			else if (w && !T) {
+				let t = w / e.width;
+				T = Math.round(e.height * t);
+			} else if (!w && T) {
+				let t = T / e.height;
+				w = Math.round(e.width * t);
+			}
+		}
+	}
+	let O = typeof m.src == "string" ? m.src : S, k = m.unoptimized, A = !m.priority && !m.preload && (m.loading === "lazy" || m.loading === void 0);
+	(!O || O.startsWith("data:") || O.startsWith("blob:")) && (k = !0, A = !1), g.unoptimized && (k = !0), !g.dangerouslyAllowSVG && O.split("?", 1)[0].endsWith(".svg") && (k = !0);
+	let j = s(m.quality), M = Object.assign(b ? {
+		position: "absolute",
+		height: "100%",
+		width: "100%",
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0,
+		objectFit: m.objectFit,
+		objectPosition: m.objectPosition
+	} : {}, p ? {} : { color: "transparent" }, v), N = !l && m.placeholder !== "empty" ? m.placeholder === "blur" ? `url("data:image/svg+xml;charset=utf-8,${d({
+		widthInt: w,
+		heightInt: T,
+		blurWidth: E,
+		blurHeight: D,
+		blurDataURL: C || "",
+		objectFit: M.objectFit
+	})}")` : `url("${m.placeholder}")` : null, P = i.includes(M.objectFit) ? M.objectFit === "fill" ? "100% 100%" : "cover" : M.objectFit, F = N ? {
+		"background-size": P,
+		"background-position": M.objectPosition || "50% 50%",
+		"background-repeat": "no-repeat",
+		"background-image": N
+	} : {}, I = f({
+		config: g,
+		src: O,
+		unoptimized: k,
+		width: w,
+		quality: j,
+		sizes: y,
+		loader: x
+	}), L = A ? "lazy" : m.loading;
+	return {
+		props: {
+			...h,
+			loading: L,
+			fetchpriority: m.fetchpriority,
+			width: w,
+			height: T,
+			decoding: m.decoding,
+			class: m.class,
+			style: {
+				...M,
+				...F
+			},
+			sizes: I.sizes,
+			srcSet: I.srcSet,
+			src: m.overrideSrc || I.src
+		},
+		meta: {
+			unoptimized: k,
+			preload: m.preload || m.priority,
+			placeholder: m.placeholder,
+			fill: b
+		}
+	};
+}
+function o({ src: e, width: t, quality: n }) {
+	if (e.startsWith("http://") || e.startsWith("https://")) return e;
+	let r = new URLSearchParams();
+	return r.set("url", e), r.set("w", String(t)), n && r.set("q", String(n)), `/_image?${r.toString()}`;
+}
+function s(e) {
+	return e === void 0 ? e : typeof e == "number" ? Number.isFinite(e) ? e : NaN : typeof e == "string" && /^[0-9]+$/.test(e) ? parseInt(e, 10) : NaN;
+}
+function c(e) {
+	return e.default !== void 0;
+}
+function l(e) {
+	return e.src !== void 0;
+}
+function u(e) {
+	return !!e && typeof e == "object" && (c(e) || l(e));
+}
+function d({ widthInt: e, heightInt: t, blurWidth: n, blurHeight: r, blurDataURL: i, objectFit: a }) {
+	let o = n ? n * 40 : e, s = r ? r * 40 : t, c = o && s ? `viewBox='0 0 ${o} ${s}'` : "";
+	return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${c}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${c ? "none" : a === "contain" ? "xMidYMid" : a === "cover" ? "xMidYMid slice" : "none"}' style='filter: url(%23b);' href='${i}'/%3E%3C/svg%3E`;
+}
+function f({ config: e, src: t, unoptimized: n, width: r, quality: i, sizes: a, loader: o }) {
+	if (n) return {
+		src: t,
+		srcSet: void 0,
+		sizes: void 0
+	};
+	let { widths: s, kind: c } = p(e, r, a), l = s.length - 1;
+	return {
+		sizes: !a && c === "w" ? "100vw" : a,
+		srcSet: s.map((n, r) => `${o({
+			config: e,
+			src: t,
+			quality: i,
+			width: n
+		})} ${c === "w" ? n : r + 1}${c}`).join(", "),
+		src: o({
+			config: e,
+			src: t,
+			quality: i,
+			width: s[l]
+		})
+	};
+}
+function p({ deviceSizes: e, allSizes: t }, n, r) {
+	if (r) {
+		let n = /(^|\s)(1?\d?\d)vw/g, i = [];
+		for (let e; e = n.exec(r);) i.push(Number.parseInt(e[2], 10));
+		if (i.length) {
+			let n = Math.min(...i) * .01;
+			return {
+				widths: t.filter((t) => t >= e[0] * n),
+				kind: "w"
+			};
+		}
+		return {
+			widths: t,
+			kind: "w"
+		};
+	}
+	return typeof n == "number" ? {
+		widths: [...new Set([n, n * 2].map((e) => t.find((t) => t >= e) || t[t.length - 1]))],
+		kind: "x"
+	} : {
+		widths: e,
+		kind: "w"
+	};
+}
+//#endregion
+export { a as getImgProps, r as handleLoading };

package/dist/components/image/ImageElement.d.ts

@@ -0,0 +1,16 @@
+import { Component } from 'solid-js';
+import { ImgProps, OnLoad, OnLoadingComplete, PlaceholderValue } from './Image.types';
+export interface ImageElementProps extends ImgProps {
+    unoptimized: boolean;
+    placeholder: PlaceholderValue;
+    /** 上层通过 signal setter 传入，避免在此组件内管理状态 */
+    setBlurComplete: (v: boolean) => void;
+    setShowAltText: (v: boolean) => void;
+    sizesInput: string | undefined;
+    onLoad?: OnLoad;
+    onLoadingComplete?: OnLoadingComplete;
+    /** 透传给原生 img 的 ref */
+    ref?: (el: HTMLImageElement) => void;
+}
+declare const ImageElement: Component<ImageElementProps>;
+export default ImageElement;

package/dist/components/image/ImageElement.js

@@ -0,0 +1,80 @@
+import { handleLoading as e } from "./Image.utils.js";
+import { mergeProps as t, spread as n, template as r, use as i } from "solid-js/web";
+import { mergeProps as a, splitProps as o } from "solid-js";
+//#region src/components/image/ImageElement.tsx
+var s = /* @__PURE__ */ r("<img>", !0, !1, !1), c = (r) => {
+	let [c, l] = o(a({ decoding: "async" }, r), [
+		"src",
+		"srcSet",
+		"sizes",
+		"height",
+		"width",
+		"decoding",
+		"class",
+		"classList",
+		"style",
+		"fetchpriority",
+		"placeholder",
+		"loading",
+		"unoptimized",
+		"fill",
+		"setBlurComplete",
+		"setShowAltText",
+		"sizesInput",
+		"onLoad",
+		"onError",
+		"onLoadingComplete",
+		"ref",
+		"alt"
+	]);
+	function u(t) {
+		t && (c.onError && (t.src = t.src), t.complete && e(t, c.placeholder, c.onLoad, c.onLoadingComplete, c.setBlurComplete, c.unoptimized, c.sizesInput), c.ref?.(t));
+	}
+	return (() => {
+		var r = s(), a = u;
+		return typeof a == "function" ? i(a, r) : u = r, n(r, t(l, {
+			get alt() {
+				return c.alt;
+			},
+			get loading() {
+				return c.loading;
+			},
+			get width() {
+				return c.width;
+			},
+			get height() {
+				return c.height;
+			},
+			get decoding() {
+				return c.decoding;
+			},
+			get "data-nimg"() {
+				return c.fill ? "fill" : "1";
+			},
+			get class() {
+				return c.class;
+			},
+			get style() {
+				return c.style;
+			},
+			get sizes() {
+				return c.sizes;
+			},
+			get srcset() {
+				return c.srcSet;
+			},
+			get src() {
+				return c.src;
+			},
+			onLoad: (t) => {
+				let n = t.currentTarget;
+				e(n, c.placeholder, c.onLoad, c.onLoadingComplete, c.setBlurComplete, c.unoptimized, c.sizesInput);
+			},
+			onError: (e) => {
+				c.setShowAltText(!0), c.placeholder !== "empty" && c.setBlurComplete(!0), c.onError && typeof c.onError == "function" && c.onError(e);
+			}
+		}), !1, !1), r;
+	})();
+};
+//#endregion
+export { c as default };

package/dist/components/image/ImagePreload.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'solid-js';
+import { ImgProps } from './Image.types';
+export interface ImagePreloadProps {
+    imgAttributes: Pick<ImgProps, "src" | "srcSet" | "sizes" | "crossOrigin" | "referrerPolicy" | "fetchpriority">;
+}
+/**
+ * 通过 SolidJS <Portal> 将 <link> 插入 document.head。
+ *
+ * 注意：
+ * - 故意省略 href（当 imagesrcset 存在时），以避免不支持 srcset 的浏览器
+ *   加载错误尺寸的图片。详见 HTML spec §attr-link-imagesrcset。
+ * - SolidJS SSR 环境可将此组件替换为 server-side head injection。
+ */
+declare const ImagePreload: Component<ImagePreloadProps>;
+export default ImagePreload;

package/dist/components/image/ImagePreload.js

@@ -0,0 +1,26 @@
+import { Portal as e, createComponent as t, effect as n, setAttribute as r, template as i } from "solid-js/web";
+//#region src/components/image/ImagePreload.tsx
+var a = /* @__PURE__ */ i("<link rel=preload as=image>"), o = (i) => {
+	let { imgAttributes: o } = i, s = `__img-preload-${o.src}-${o.srcSet ?? ""}-${o.sizes ?? ""}`;
+	return typeof document < "u" && document.head.querySelector(`link[data-img-key="${s}"]`) ? null : t(e, {
+		get mount() {
+			return document.head;
+		},
+		get children() {
+			var e = a();
+			return r(e, "data-img-key", s), n((t) => {
+				var n = o.srcSet ? void 0 : o.src, i = o.srcSet, a = o.sizes, s = o.crossOrigin, c = o.referrerPolicy, l = o.fetchpriority;
+				return n !== t.e && r(e, "href", t.e = n), i !== t.t && r(e, "imagesrcset", t.t = i), a !== t.a && r(e, "imagesizes", t.a = a), s !== t.o && r(e, "crossorigin", t.o = s), c !== t.i && r(e, "referrerpolicy", t.i = c), l !== t.n && r(e, "fetchpriority", t.n = l), t;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0
+			}), e;
+		}
+	});
+};
+//#endregion
+export { o as default };

package/dist/components/image/index.d.ts

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

package/dist/components/input/Input.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js';
+import { InputProps } from './Input.types';
+export declare const Input: (props: InputProps) => JSX.Element;

package/dist/components/input/Input.js

@@ -0,0 +1,31 @@
+import { clsx as e } from "../../lib/utils/clsx.js";
+import { delegateEvents as t, mergeProps as n, spread as r, template as i } from "solid-js/web";
+import { createUniqueId as a, mergeProps as o, splitProps as s } from "solid-js";
+//#region src/components/input/Input.tsx
+var c = /* @__PURE__ */ i("<input data-slot=input>"), l = (t) => {
+	let [i, l] = s(o({
+		id: a(),
+		type: "text"
+	}, t), [
+		"type",
+		"onInput",
+		"onChange",
+		"class",
+		"classList"
+	]), u = (e) => {
+		let t = e.target.value;
+		i.type === "number" && (t = Number(e.target.value)), i.onInput?.(t);
+	}, d = (e) => {
+		let t = e.target.value;
+		i.type === "number" && (t = Number(e.target.value)), i.onChange?.(t);
+	};
+	return (() => {
+		var t = c();
+		return t.addEventListener("change", d), t.$$input = u, r(t, n({ get class() {
+			return e("h-8 w-full min-w-0 rounded-lg border border-neutral-200 dark:border-white/15 bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 dark:file:text-neutral-50 placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-500 focus-visible:ring-3 focus-visible:ring-neutral-400/50 dark:focus-visible:ring-neutral-500/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:select-none disabled:bg-neutral-200/50 disabled:opacity-50 aria-invalid:border-red-600 aria-invalid:ring-3 aria-invalid:ring-red-600/20 md:text-sm dark:bg-white/4.5 dark:disabled:bg-white/12 dark:aria-invalid:border-red-400/50 dark:aria-invalid:ring-red-400/40", i.class);
+		} }, l), !1, !1), t;
+	})();
+};
+t(["input"]);
+//#endregion
+export { l as Input };

package/dist/components/input/Input.types.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'solid-js';
+type InputType = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
+type NativeInputProps = JSX.IntrinsicElements["input"];
+export interface NumberInputSpecifics {
+    type: "number";
+    onChange?: (value: number) => void;
+    onInput?: (value: number) => void;
+}
+interface TextInputSpecifics {
+    type?: Exclude<InputType, "number">;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+}
+export type InputProps = (NumberInputSpecifics & Omit<NativeInputProps, keyof NumberInputSpecifics>) | (TextInputSpecifics & Omit<NativeInputProps, keyof TextInputSpecifics>);
+export {};

package/dist/components/input/index.d.ts

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

package/dist/components/input-group/InputGroup/InputGroup.d.ts

@@ -0,0 +1,2 @@
+import { InputGroupProps } from './InputGroup.types';
+export declare const InputGroup: (props: InputGroupProps) => import("solid-js").JSX.Element;

package/dist/components/input-group/InputGroup/InputGroup.js

@@ -0,0 +1,15 @@
+import { clsx as e } from "../../../lib/utils/clsx.js";
+import { mergeProps as t, spread as n, template as r } from "solid-js/web";
+import { splitProps as i } from "solid-js";
+//#region src/components/input-group/InputGroup/InputGroup.tsx
+var a = /* @__PURE__ */ r("<div data-slot=input-group role=group>"), o = (r) => {
+	let [o, s] = i(r, ["class", "classList"]);
+	return (() => {
+		var r = a();
+		return n(r, t({ get class() {
+			return e("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", "border-neutral-200 has-disabled:bg-neutral-200/50 has-[[data-slot=input-group-control]:focus-visible]:border-neutral-400 has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-400/50 has-[[data-slot][aria-invalid=true]]:border-red-600 has-[[data-slot][aria-invalid=true]]:ring-red-600/20", "dark:border-white/15 dark:bg-white/4.5 dark:has-disabled:bg-white/12 dark:has-[[data-slot=input-group-control]:focus-visible]:border-neutral-500 dark:has-[[data-slot=input-group-control]:focus-visible]:ring-neutral-500/50 dark:has-[[data-slot][aria-invalid=true]]:border-red-400 dark:has-[[data-slot][aria-invalid=true]]:ring-red-400/40", o.class);
+		} }, s), !1, !1), r;
+	})();
+};
+//#endregion
+export { o as InputGroup };

package/dist/components/input-group/InputGroup/InputGroup.types.d.ts

@@ -0,0 +1,2 @@
+import { BaseProps, PolymorphicProps } from '../../../types';
+export type InputGroupProps = PolymorphicProps<"div", BaseProps, false>;

package/dist/components/input-group/InputGroup/index.d.ts

@@ -0,0 +1 @@
+export { InputGroup } from './InputGroup';

package/dist/components/input-group/InputGroupAddon/InputGroupAddon.d.ts

@@ -0,0 +1,2 @@
+import { InputGroupAddonProps } from './InputGroupAddon.types';
+export declare const InputGroupAddon: (props: InputGroupAddonProps) => import("solid-js").JSX.Element;

package/dist/components/input-group/InputGroupAddon/InputGroupAddon.js

@@ -0,0 +1,28 @@
+import { clsx as e } from "../../../lib/utils/clsx.js";
+import { inputGroupAddonVariants as t } from "./InputGroupAddon.styles.js";
+import { delegateEvents as n, mergeProps as r, spread as i, template as a } from "solid-js/web";
+import { mergeProps as o, splitProps as s } from "solid-js";
+//#region src/components/input-group/InputGroupAddon/InputGroupAddon.tsx
+var c = /* @__PURE__ */ a("<div role=group data-slot=input-group-addon>"), l = (n) => {
+	let [a, l] = s(o({ align: "inline-start" }, n), [
+		"align",
+		"class",
+		"classList"
+	]);
+	return (() => {
+		var n = c();
+		return n.$$click = (e) => {
+			e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
+		}, i(n, r({
+			get "data-align"() {
+				return a.align;
+			},
+			get class() {
+				return e(t({ align: a.align }), a.class);
+			}
+		}, l), !1, !1), n;
+	})();
+};
+n(["click"]);
+//#endregion
+export { l as InputGroupAddon };

package/dist/components/input-group/InputGroupAddon/InputGroupAddon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;