@senestia/ui 0.1.0-beta.00c7f75

package/dist/senestia-ui.es.js

@@ -0,0 +1,684 @@
+import e, { useState as t } from "react";
+import { Circle as n, Eye as r, Info as i, Search as a, X as o, XCircle as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var u = Object.defineProperty, d = (e, t) => {
+	let n = {};
+	for (var r in e) u(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || u(n, Symbol.toStringTag, { value: "Module" }), n;
+}, f = "Sarabun, sans-serif", p = {
+	Gray: {
+		bg: "#f9fafb",
+		border: "#eaecf0",
+		text: "#06080b",
+		dot: "#667085"
+	},
+	Primary: {
+		bg: "#f4f6f9",
+		border: "#e6ebf2",
+		text: "#1e2b3b",
+		dot: "#6c8fbe"
+	},
+	Error: {
+		bg: "#fef0ef",
+		border: "#fbd2d0",
+		text: "#cc1a11",
+		dot: "#f04438"
+	},
+	Warning: {
+		bg: "#fff9ee",
+		border: "#ffedcc",
+		text: "#db8f02",
+		dot: "#f79009"
+	},
+	Success: {
+		bg: "#f0fdfa",
+		border: "#d2f9f1",
+		text: "#15a686",
+		dot: "#12b76a"
+	},
+	"Blue light": {
+		bg: "#f0f9ff",
+		border: "#b9e6fe",
+		text: "#026aa2",
+		dot: "#0ba5ec"
+	},
+	Blue: {
+		bg: "#eff8ff",
+		border: "#b2ddff",
+		text: "#175cd3",
+		dot: "#2e90fa"
+	},
+	Indigo: {
+		bg: "#eef4ff",
+		border: "#c7d7fe",
+		text: "#3538cd",
+		dot: "#6172f3"
+	},
+	Purple: {
+		bg: "#f4f3ff",
+		border: "#d9d6fe",
+		text: "#5925dc",
+		dot: "#7a5af8"
+	},
+	Pink: {
+		bg: "#fef6fb",
+		border: "#fce7f6",
+		text: "#c11574",
+		dot: "#ee46bc"
+	},
+	Orange: {
+		bg: "#fef6ee",
+		border: "#ffd6ae",
+		text: "#b93815",
+		dot: "#ef6820"
+	},
+	"Gray blue": {
+		bg: "#f8f9fc",
+		border: "#d5d9eb",
+		text: "#363f72",
+		dot: "#717bbc"
+	}
+}, m = {
+	sm: {
+		paddingX: 8,
+		paddingY: 2,
+		paddingXClose: {
+			left: 8,
+			right: 4
+		},
+		paddingXDot: {
+			left: 6,
+			right: 8
+		},
+		paddingPill: 5,
+		fontSize: 12,
+		lineHeight: 18,
+		dotSize: 6,
+		iconSize: 12,
+		closeSize: 12
+	},
+	md: {
+		paddingX: 8,
+		paddingY: 2,
+		paddingXClose: {
+			left: 8,
+			right: 4
+		},
+		paddingXDot: {
+			left: 6,
+			right: 8
+		},
+		paddingPill: 6,
+		fontSize: 14,
+		lineHeight: 20,
+		dotSize: 6,
+		iconSize: 14,
+		closeSize: 14
+	},
+	lg: {
+		paddingX: 12,
+		paddingY: 4,
+		paddingXClose: {
+			left: 12,
+			right: 6
+		},
+		paddingXDot: {
+			left: 8,
+			right: 12
+		},
+		paddingPill: 8,
+		fontSize: 14,
+		lineHeight: 20,
+		dotSize: 8,
+		iconSize: 16,
+		closeSize: 16
+	}
+}, h = ({ label: e = "Label", color: t = "Gray", size: n = "sm", type: r = "Idle", icon: i, onClose: a }) => {
+	let s = p[t], u = m[n], d = {
+		display: "inline-flex",
+		alignItems: "center",
+		backgroundColor: s.bg,
+		border: `1px solid ${s.border}`,
+		borderRadius: 16,
+		boxSizing: "border-box",
+		width: "fit-content",
+		fontFamily: f
+	}, h = {
+		fontSize: u.fontSize,
+		lineHeight: `${u.lineHeight}px`,
+		fontWeight: 500,
+		color: s.text,
+		whiteSpace: "nowrap",
+		fontFamily: f,
+		margin: 0
+	};
+	if (r === "Idle") return /* @__PURE__ */ c("span", {
+		style: {
+			...d,
+			padding: `${u.paddingY}px ${u.paddingX}px`
+		},
+		children: /* @__PURE__ */ c("span", {
+			style: h,
+			children: e
+		})
+	});
+	if (r === "Status Dot") return /* @__PURE__ */ l("span", {
+		style: {
+			...d,
+			gap: 4,
+			paddingTop: u.paddingY,
+			paddingBottom: u.paddingY,
+			paddingLeft: u.paddingXDot.left,
+			paddingRight: u.paddingXDot.right
+		},
+		children: [/* @__PURE__ */ c("span", { style: {
+			display: "inline-block",
+			width: u.dotSize,
+			height: u.dotSize,
+			borderRadius: "50%",
+			backgroundColor: s.dot,
+			flexShrink: 0
+		} }), /* @__PURE__ */ c("span", {
+			style: h,
+			children: e
+		})]
+	});
+	if (r === "Closable") return /* @__PURE__ */ l("span", {
+		style: {
+			...d,
+			gap: 2,
+			paddingTop: u.paddingY,
+			paddingBottom: u.paddingY,
+			paddingLeft: u.paddingXClose.left,
+			paddingRight: u.paddingXClose.right
+		},
+		children: [/* @__PURE__ */ c("span", {
+			style: h,
+			children: e
+		}), /* @__PURE__ */ c("button", {
+			onClick: a,
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "none",
+				border: "none",
+				padding: 2,
+				borderRadius: 3,
+				cursor: "pointer",
+				color: s.text,
+				flexShrink: 0,
+				lineHeight: 1
+			},
+			"aria-label": "Remove",
+			children: /* @__PURE__ */ c(o, {
+				size: u.closeSize,
+				strokeWidth: 2.5
+			})
+		})]
+	});
+	if (r === "Pill color") {
+		let e = i;
+		return /* @__PURE__ */ c("span", {
+			style: {
+				...d,
+				padding: u.paddingPill
+			},
+			children: e ? /* @__PURE__ */ c(e, {
+				size: u.iconSize,
+				color: s.dot,
+				strokeWidth: 2
+			}) : /* @__PURE__ */ c("span", { style: {
+				display: "inline-block",
+				width: u.iconSize,
+				height: u.iconSize,
+				borderRadius: "50%",
+				backgroundColor: s.dot
+			} })
+		});
+	}
+	return null;
+}, g = /* @__PURE__ */ d({
+	ciPrimary: () => y,
+	font: () => w,
+	grayNeutral: () => _,
+	interactive: () => x,
+	oePrimary: () => b,
+	padding: () => S,
+	radius: () => C,
+	status: () => v
+}), _ = {
+	fgHigh: "#1B1D22",
+	fgMid: "#6A6E83",
+	fgLow: "#9A9DAD",
+	bgWhite: "#FFFFFF",
+	bgLightgray: "#F8F8F9",
+	bgDisabled: "#F3F4F6",
+	borderMidgray: "#CFD1D9",
+	borderLight: "#EBECEF",
+	borderDisabled: "#E5EAF1",
+	gray300: "#D0D5DD",
+	bgSkeleton: "#EEF0F3",
+	bgDisabledStrong: "#EBECEF"
+}, v = {
+	error: "#DB1439",
+	warning: "#DB8F02",
+	success: "#15A686"
+}, y = {
+	fgLow: "#C4B3F6",
+	fgHigh: "#802CEB",
+	bgLow: "#D4C9F6",
+	bgMid: "#802CEB",
+	bgHigh: "#5A1DA9",
+	borderMid: "#996CF3",
+	borderHigh: "#802CEB"
+}, b = {
+	fgLow: "#5273A1",
+	fgHigh: "#3A5274",
+	bgLowest: "#EFF2F6",
+	bgLow: "#6E90BF",
+	bgMid: "#5273A1",
+	bgHigh: "#3A5274",
+	borderLowest: "#C6D2E3",
+	borderLow: "#9CB3D2",
+	borderMid: "#5273A1",
+	p300: "#809BBF",
+	linkBlue: "#3C5BD5"
+}, x = {
+	activeBorder: b.fgLow,
+	hoverBorder: "#3B82F6",
+	focusRing: "#D7DFEA",
+	invalidBorder: v.error
+}, S = {
+	"PD-0": 0,
+	"PD-1": 1,
+	"PD-2": 2,
+	"PD-3": 4,
+	"PD-4": 6,
+	"PD-5": 8,
+	"PD-6": 12,
+	"PD-7": 16,
+	"PD-8": 24,
+	"PD-9": 32,
+	"PD-10": 40,
+	"PD-11": 48,
+	"PD-12": 56,
+	"PD-13": 64,
+	"PD-14": 72,
+	"PD-15": 80
+}, C = {
+	"CR-0": 0,
+	"CR-1": 2,
+	"CR-2": 4,
+	"CR-3": 8,
+	"CR-4": 12,
+	"CR-5": 16,
+	"CR-6": 20,
+	"CR-7": 24,
+	"CR-8": 32,
+	"CR-9": 48,
+	"CR-10": 100
+}, w = "Sarabun, sans-serif", T = {
+	sm: {
+		inputHeight: 32,
+		labelFontSize: 12,
+		labelLineHeight: 18,
+		inputFontSize: 14,
+		inputLineHeight: 20,
+		helperFontSize: 12,
+		helperLineHeight: 18,
+		paddingX: 12,
+		iconSize: 16,
+		labelIconSize: 12,
+		labelGap: 4,
+		helperGap: 4,
+		leadingPl: 8,
+		leadingPr: 4,
+		leadingPy: 6,
+		chevronSize: 14,
+		counterPadding: "1px 4px",
+		counterRadius: 4,
+		counterFontSize: 12,
+		counterLineHeight: 18,
+		skeletonLabelH: 18,
+		skeletonInputH: 32
+	},
+	md: {
+		inputHeight: 40,
+		labelFontSize: 14,
+		labelLineHeight: 20,
+		inputFontSize: 16,
+		inputLineHeight: 24,
+		helperFontSize: 14,
+		helperLineHeight: 20,
+		paddingX: 16,
+		iconSize: 20,
+		labelIconSize: 14,
+		labelGap: 6,
+		helperGap: 4,
+		leadingPl: 12,
+		leadingPr: 8,
+		leadingPy: 8,
+		chevronSize: 16,
+		counterPadding: "2px 8px",
+		counterRadius: 8,
+		counterFontSize: 14,
+		counterLineHeight: 20,
+		skeletonLabelH: 20,
+		skeletonInputH: 40
+	},
+	lg: {
+		inputHeight: 48,
+		labelFontSize: 16,
+		labelLineHeight: 24,
+		inputFontSize: 16,
+		inputLineHeight: 24,
+		helperFontSize: 14,
+		helperLineHeight: 20,
+		paddingX: 16,
+		iconSize: 20,
+		labelIconSize: 16,
+		labelGap: 8,
+		helperGap: 6,
+		leadingPl: 16,
+		leadingPr: 8,
+		leadingPy: 12,
+		chevronSize: 16,
+		counterPadding: "2px 8px",
+		counterRadius: 8,
+		counterFontSize: 14,
+		counterLineHeight: 20,
+		skeletonLabelH: 24,
+		skeletonInputH: 48
+	}
+}, E = `0 0 0 2px ${x.focusRing}`, D = (e) => {
+	let t = e ?? "Idle";
+	return {
+		s: t,
+		isInvalid: t.includes("invalid"),
+		isHover: t.includes("hover"),
+		isActive: t === "Active" || t === "Keyboard focus" || t.endsWith("active"),
+		isDisabled: t === "Disable",
+		isSkeleton: t === "Skeleton",
+		isFilled: t.includes("Filled"),
+		isKeyboardFocus: t === "Keyboard focus"
+	};
+}, O = {
+	clear: s,
+	search: a,
+	password: r
+}, k = ({ label: r, required: a = !1, labelRemark: o, placeholder: s = "Placeholder", value: u, onChange: d, helperText: f, errorText: p, state: m = "Idle", size: h = "md", leadingDropdownText: g, leadingIcon: y, counter: b, unit: S, trailingIcon: C, trailingIcons: k, trailingIconSeparator: A = !1 }) => {
+	let [j, M] = t(u ?? ""), N = (e) => {
+		M(e), d?.(e);
+	}, { isInvalid: P, isHover: F, isActive: I, isDisabled: L, isSkeleton: R, isKeyboardFocus: z } = D(m), B = T[h], V = P ? x.invalidBorder : I || z ? x.activeBorder : F ? x.hoverBorder : _.borderMidgray, H = L ? _.bgDisabled : F ? _.bgLightgray : _.bgWhite, U = L ? _.fgLow : _.fgMid, W = L ? _.fgLow : _.fgHigh, G = L ? _.fgLow : _.fgHigh, K = L ? _.fgLow : _.fgMid, q = P ? v.error : _.fgMid;
+	if (R) return /* @__PURE__ */ l("div", {
+		style: {
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: B.labelGap
+		},
+		children: [/* @__PURE__ */ c("div", { style: {
+			height: B.skeletonLabelH,
+			background: _.bgSkeleton,
+			borderRadius: 6
+		} }), /* @__PURE__ */ c("div", { style: {
+			height: B.skeletonInputH,
+			background: _.bgSkeleton,
+			border: `1px solid ${_.bgSkeleton}`,
+			borderRadius: 24
+		} })]
+	});
+	let J = y === !0 ? n : y || null, Y = k?.length ? k : C ? [C] : [], X = P ? p : f, Z = {
+		fontFamily: w,
+		fontWeight: 500
+	};
+	return /* @__PURE__ */ l("div", {
+		style: {
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: B.helperGap
+		},
+		children: [/* @__PURE__ */ l("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: B.labelGap,
+				width: "100%"
+			},
+			children: [/* @__PURE__ */ l("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4,
+					width: "100%"
+				},
+				children: [
+					/* @__PURE__ */ l("div", {
+						style: {
+							display: "flex",
+							flex: "1 0 0",
+							alignItems: "center",
+							gap: B.labelIconSize === 12 ? 4 : 6,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ c("span", {
+							style: {
+								...Z,
+								fontSize: B.labelFontSize,
+								lineHeight: `${B.labelLineHeight}px`,
+								color: U,
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: r
+						}), /* @__PURE__ */ c(i, {
+							size: B.labelIconSize,
+							color: K,
+							strokeWidth: 1.8,
+							style: { flexShrink: 0 }
+						})]
+					}),
+					o && /* @__PURE__ */ c("span", {
+						style: {
+							...Z,
+							fontSize: B.labelFontSize,
+							lineHeight: `${B.labelLineHeight}px`,
+							color: U,
+							whiteSpace: "nowrap",
+							flexShrink: 0
+						},
+						children: o
+					}),
+					a && /* @__PURE__ */ c("span", {
+						style: {
+							color: v.error,
+							fontWeight: 800,
+							flexShrink: 0
+						},
+						children: "*"
+					})
+				]
+			}), /* @__PURE__ */ l("div", {
+				style: {
+					background: H,
+					border: `1px solid ${V}`,
+					height: B.inputHeight,
+					width: "100%",
+					borderRadius: 24,
+					display: "flex",
+					alignItems: g ? "stretch" : "center",
+					...g ? {} : {
+						gap: 8,
+						padding: `0 ${B.paddingX}px`
+					},
+					overflow: "hidden",
+					boxShadow: I || z ? E : "none",
+					opacity: L ? .7 : 1,
+					boxSizing: "border-box"
+				},
+				children: [g ? /* @__PURE__ */ l("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 4,
+						background: _.bgWhite,
+						padding: `${B.leadingPy}px ${B.leadingPr}px ${B.leadingPy}px ${B.leadingPl}px`,
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ c("span", {
+						style: {
+							...Z,
+							fontSize: B.inputFontSize,
+							lineHeight: `${B.inputLineHeight}px`,
+							color: _.fgHigh,
+							whiteSpace: "nowrap"
+						},
+						children: g
+					}), /* @__PURE__ */ c("svg", {
+						width: B.chevronSize,
+						height: B.chevronSize,
+						viewBox: "0 0 16 16",
+						fill: "none",
+						children: /* @__PURE__ */ c("path", {
+							d: "M4 6L8 10L12 6",
+							stroke: _.fgHigh,
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})]
+				}) : J ? /* @__PURE__ */ c(J, {
+					size: B.iconSize,
+					color: G,
+					strokeWidth: 1.6,
+					style: { flexShrink: 0 }
+				}) : null, /* @__PURE__ */ l("div", {
+					style: {
+						flex: "1 0 0",
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						height: "100%",
+						minWidth: 0,
+						...g ? {
+							borderLeft: `1px solid ${_.borderLight}`,
+							padding: "0 12px"
+						} : {}
+					},
+					children: [
+						/* @__PURE__ */ c("input", {
+							type: "text",
+							value: j,
+							onChange: (e) => N(e.target.value),
+							placeholder: s,
+							disabled: L,
+							style: {
+								...Z,
+								flex: "1 0 0",
+								border: "none",
+								outline: "none",
+								background: "transparent",
+								fontSize: B.inputFontSize,
+								lineHeight: `${B.inputLineHeight}px`,
+								color: W,
+								width: "100%",
+								minWidth: 0,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+								cursor: L ? "not-allowed" : "text"
+							}
+						}),
+						b && /* @__PURE__ */ l("div", {
+							style: {
+								background: _.bgLightgray,
+								display: "flex",
+								gap: 2,
+								alignItems: "center",
+								justifyContent: "center",
+								padding: B.counterPadding,
+								borderRadius: B.counterRadius,
+								flexShrink: 0,
+								opacity: L ? .7 : 1
+							},
+							children: [/* @__PURE__ */ c("span", {
+								style: {
+									...Z,
+									fontSize: B.counterFontSize,
+									lineHeight: `${B.counterLineHeight}px`,
+									color: _.fgHigh
+								},
+								children: b.value
+							}), /* @__PURE__ */ l("span", {
+								style: {
+									...Z,
+									fontSize: B.counterFontSize,
+									lineHeight: `${B.counterLineHeight}px`,
+									color: _.fgMid
+								},
+								children: ["/ ", b.max]
+							})]
+						}),
+						S && /* @__PURE__ */ c("span", {
+							style: {
+								...Z,
+								fontSize: B.inputFontSize,
+								lineHeight: `${B.inputLineHeight}px`,
+								color: _.fgHigh,
+								whiteSpace: "nowrap",
+								flexShrink: 0,
+								maxWidth: 64,
+								overflow: "hidden"
+							},
+							children: S
+						}),
+						Y.length > 0 && /* @__PURE__ */ c("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 4,
+								flexShrink: 0
+							},
+							children: Y.map((t, n) => {
+								let r = O[t];
+								return /* @__PURE__ */ l(e.Fragment, { children: [A && n > 0 && /* @__PURE__ */ c("div", { style: {
+									width: 1,
+									height: B.iconSize,
+									background: _.gray300,
+									flexShrink: 0,
+									alignSelf: "center"
+								} }), /* @__PURE__ */ c(r, {
+									size: B.iconSize,
+									color: G,
+									strokeWidth: 1.6,
+									style: { flexShrink: 0 }
+								})] }, `${t}-${n}`);
+							})
+						})
+					]
+				})]
+			})]
+		}), X && /* @__PURE__ */ c("p", {
+			style: {
+				...Z,
+				margin: 0,
+				fontSize: B.helperFontSize,
+				lineHeight: `${B.helperLineHeight}px`,
+				color: q,
+				width: "100%"
+			},
+			children: X
+		})]
+	});
+}, A = g;
+//#endregion
+export { h as Badge, k as InputField, y as ciPrimary, w as font, _ as grayNeutral, x as interactive, b as oePrimary, S as padding, C as radius, v as status, A as tokens };
+
+//# sourceMappingURL=senestia-ui.es.js.map