@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/inputs/Select.js

@@ -1,303 +1,302 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useRef, useId, useLayoutEffect, useEffect } from "react";
-import { createPortal } from "react-dom";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-const Select = memo(forwardRef(function Select2({
-  label,
-  options,
-  value,
-  onChange,
-  placeholder = "Select...",
-  helperText,
-  error,
-  disabled = false,
-  fullWidth = false,
-  size = "medium",
-  className = "",
-  labelPlacement = "outlined",
-  required
-}, ref) {
-  const { tokens, theme } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const [isOpen, setIsOpen] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const [dropdownRect, setDropdownRect] = useState(null);
-  const selectRef = useRef(null);
-  const triggerRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const generatedId = useId();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  tokens.colors.interactive.transparentDefault;
-  tokens.colors.interactive.transparentInputBg;
-  const hasError = !!error;
-  const selectedOption = options.find((o) => o.value === value);
-  const isOutlined = labelPlacement === "outlined";
-  const sizeConfig = {
-    small: { height: tokens.elementSize.sm, fontSize: tokens.typography.fontSize.xs, padding: tokens.spacing.sm, inputPaddingLeft: 8 },
-    medium: { height: tokens.elementSize.md, fontSize: tokens.typography.fontSize.sm, padding: tokens.spacing.md, inputPaddingLeft: 16 },
-    large: { height: tokens.elementSize.lg, fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.lg, inputPaddingLeft: 24 }
-  };
-  const config = sizeConfig[size];
-  const controlHeight = isMobile ? "44px" : config.height;
-  const optionRowHeight = isMobile ? 40 : size === "small" ? 30 : size === "medium" ? 34 : 38;
-  const DROPDOWN_MAX_HEIGHT = 200;
-  const GAP = 4;
-  useLayoutEffect(() => {
-    if (!isOpen || !triggerRef.current) {
-      setDropdownRect(null);
-      return;
-    }
-    const update = () => {
-      if (triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom - GAP;
-        const spaceAbove = rect.top - GAP;
-        const openUp = spaceBelow < Math.min(DROPDOWN_MAX_HEIGHT, options.length * optionRowHeight) && spaceAbove > spaceBelow;
-        setDropdownRect({
-          top: openUp ? rect.top - GAP : rect.bottom + GAP,
-          left: rect.left,
-          width: rect.width,
-          openUp
-        });
-      }
-    };
-    update();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [isOpen, options.length, optionRowHeight]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleClickOutside = (e) => {
-      var _a, _b;
-      const target = e.target;
-      if (((_a = selectRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.current) == null ? void 0 : _b.contains(target))) {
-        return;
-      }
-      setIsOpen(false);
-    };
-    document.addEventListener("click", handleClickOutside, true);
-    return () => document.removeEventListener("click", handleClickOutside, true);
-  }, [isOpen]);
-  const computedBorder = hasError ? tokens.borders.input.error : focused || isOpen ? tokens.borders.input.focus : tokens.borders.input.default;
-  const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
-  const outlinedLabelSizeMap = { small: "0.625rem", medium: "0.6875rem", large: "0.75rem" };
-  const outlinedLabelLeftMap = { small: "2px", medium: "10px", large: "18px" };
-  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label,
-    required && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.status.critical, marginLeft: "2px" }, children: "*" })
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: classNames("zendir-select-wrapper", className),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacing.xs,
-        width: fullWidth ? "100%" : void 0
-      },
-      children: [
-        label && !isOutlined && /* @__PURE__ */ jsx(
-          "span",
-          {
-            id: `${generatedId}-label`,
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              fontWeight: tokens.typography.fontWeight.medium,
-              color: tokens.colors.text.secondary
-            },
-            children: labelContent
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { ref: selectRef, style: { position: "relative" }, children: [
-          label && isOutlined && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: `${generatedId}-label`,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: outlinedLabelLeftMap[size],
-                transform: "translateY(-50%)",
-                backgroundColor: labelBg,
-                padding: `0 ${tokens.spacing.xs}`,
-                fontSize: outlinedLabelSizeMap[size],
-                fontWeight: tokens.typography.fontWeight.medium,
-                color: focused || isOpen ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
-                zIndex: 1,
-                pointerEvents: "none",
-                transition: `color ${tokens.animation.fast}`,
-                lineHeight: 1.2,
-                whiteSpace: "nowrap",
-                letterSpacing: "0.01em"
-              },
-              children: labelContent
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              ref: triggerRef,
-              type: "button",
-              disabled,
-              onClick: () => !disabled && setIsOpen(!isOpen),
-              onFocus: () => setFocused(true),
-              onBlur: () => setFocused(false),
-              "aria-haspopup": "listbox",
-              "aria-expanded": isOpen,
-              "aria-labelledby": label ? `${generatedId}-label` : void 0,
-              "aria-describedby": helperText || error ? `${generatedId}-hint` : void 0,
-              style: {
-                width: "100%",
-                height: controlHeight,
-                padding: `0 ${config.padding}`,
-                fontSize: config.fontSize,
-                fontFamily: tokens.typography.fontFamily.primary,
-                color: selectedOption ? tokens.colors.text.primary : tokens.colors.text.muted,
-                backgroundColor: isTransparentTheme ? "rgba(10, 15, 25, 0.4)" : tokens.colors.background.surface,
-                border: computedBorder,
-                borderRadius: tokens.borderRadius.md,
-                cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? 0.5 : 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                textAlign: "left",
-                outline: "none",
-                transition: `border-color ${tokens.animation.fast}`,
-                boxShadow: focused || isOpen ? tokens.borders.focusRing.default : "none"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: (selectedOption == null ? void 0 : selectedOption.label) ?? placeholder }),
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 24 24",
-                    fill: tokens.colors.text.muted,
-                    style: {
-                      transform: isOpen ? "rotate(180deg)" : "rotate(0)",
-                      transition: `transform ${tokens.animation.fast}`
-                    },
-                    children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5z" })
-                  }
-                )
-              ]
-            }
-          ),
-          isOpen && dropdownRect && createPortal(
-            /* @__PURE__ */ jsxs(
-              "ul",
-              {
-                ref: dropdownRef,
-                role: "listbox",
-                style: {
-                  position: "fixed",
-                  top: dropdownRect.openUp ? void 0 : dropdownRect.top,
-                  bottom: dropdownRect.openUp ? window.innerHeight - dropdownRect.top : void 0,
-                  left: dropdownRect.left,
-                  width: dropdownRect.width,
-                  padding: tokens.spacing.xs,
-                  backgroundColor: isTransparentTheme ? "rgba(139, 92, 246, 0.12)" : tokens.colors.background.elevated,
-                  backdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
-                  WebkitBackdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
-                  border: tokens.borders.dropdown,
-                  borderRadius: tokens.borderRadius.md,
-                  boxShadow: `${tokens.shadows.lg}, 0 0 30px ${tokens.colors.accent.primary}10`,
-                  zIndex: 1e4,
-                  maxHeight: "200px",
-                  overflowY: "auto",
-                  listStyle: "none",
-                  margin: 0,
-                  animation: `zendir-dropdown ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
-                },
-                children: [
-                  /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }` }),
-                  options.map((option) => /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      role: "option",
-                      "aria-selected": option.value === value,
-                      tabIndex: option.disabled ? -1 : 0,
-                      onMouseDown: (e) => {
-                        e.stopPropagation();
-                      },
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        if (!option.disabled) {
-                          onChange == null ? void 0 : onChange(option.value);
-                          setIsOpen(false);
-                        }
-                      },
-                      onKeyDown: (e) => {
-                        if (option.disabled) return;
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          onChange == null ? void 0 : onChange(option.value);
-                          setIsOpen(false);
-                        }
-                      },
-                      style: {
-                        padding: `0 ${tokens.spacing.md}`,
-                        height: optionRowHeight,
-                        minHeight: optionRowHeight,
-                        display: "flex",
-                        alignItems: "center",
-                        fontSize: config.fontSize,
-                        lineHeight: 1.2,
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        color: option.disabled ? tokens.colors.text.muted : tokens.colors.text.primary,
-                        backgroundColor: option.value === value ? `${tokens.colors.accent.primary}15` : "transparent",
-                        borderRadius: tokens.borderRadius.sm,
-                        cursor: option.disabled ? "not-allowed" : "pointer",
-                        opacity: option.disabled ? 0.5 : 1,
-                        transition: `background-color ${tokens.animation.fast}`
-                      },
-                      onMouseEnter: (e) => {
-                        if (!option.disabled) {
-                          e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}10`;
-                        }
-                      },
-                      onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = option.value === value ? `${tokens.colors.accent.primary}15` : "transparent";
-                      },
-                      children: option.label
-                    },
-                    option.value
-                  ))
-                ]
-              }
-            ),
-            document.body
-          )
-        ] }),
-        (helperText || error) && /* @__PURE__ */ jsx(
-          "span",
-          {
-            id: `${generatedId}-hint`,
-            role: hasError ? "alert" : void 0,
-            style: {
-              fontSize: tokens.typography.fontSize.xs,
-              color: hasError ? tokens.colors.status.critical : tokens.colors.text.muted
-            },
-            children: error || helperText
-          }
-        )
-      ]
-    }
-  );
+import { forwardRef, memo, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/react/core/inputs/Select.tsx
+/**
+* @zendir/ui - Select Component
+*
+* Dropdown select following Astro UX Design System.
+*
+* @example
+* ```tsx
+* <Select
+*   label="Spacecraft"
+*   options={[
+*     { value: 'sat-001', label: 'Explorer-1' },
+*     { value: 'sat-002', label: 'Voyager-2' },
+*   ]}
+*   value={selected}
+*   onChange={setSelected}
+* />
+* ```
+*/
+var Select = memo(forwardRef(function Select({ label, options, value, onChange, placeholder = "Select...", helperText, error, disabled = false, fullWidth = false, size = "medium", className = "", labelPlacement = "outlined", required }, ref) {
+	const { tokens, theme } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const [isOpen, setIsOpen] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [dropdownRect, setDropdownRect] = useState(null);
+	const selectRef = useRef(null);
+	const triggerRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const generatedId = useId();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	tokens.colors.interactive.transparentDefault;
+	tokens.colors.interactive.transparentInputBg;
+	const hasError = !!error;
+	const selectedOption = options.find((o) => o.value === value);
+	const isOutlined = labelPlacement === "outlined";
+	const config = {
+		small: {
+			height: tokens.elementSize.sm,
+			fontSize: tokens.typography.fontSize.xs,
+			padding: tokens.spacing.sm,
+			inputPaddingLeft: 8
+		},
+		medium: {
+			height: tokens.elementSize.md,
+			fontSize: tokens.typography.fontSize.sm,
+			padding: tokens.spacing.md,
+			inputPaddingLeft: 16
+		},
+		large: {
+			height: tokens.elementSize.lg,
+			fontSize: tokens.typography.fontSize.base,
+			padding: tokens.spacing.lg,
+			inputPaddingLeft: 24
+		}
+	}[size];
+	const controlHeight = isMobile ? "44px" : config.height;
+	const optionRowHeight = isMobile ? 40 : size === "small" ? 30 : size === "medium" ? 34 : 38;
+	const DROPDOWN_MAX_HEIGHT = 200;
+	const GAP = 4;
+	useLayoutEffect(() => {
+		if (!isOpen || !triggerRef.current) {
+			setDropdownRect(null);
+			return;
+		}
+		const update = () => {
+			if (triggerRef.current) {
+				const rect = triggerRef.current.getBoundingClientRect();
+				const spaceBelow = window.innerHeight - rect.bottom - GAP;
+				const spaceAbove = rect.top - GAP;
+				const openUp = spaceBelow < Math.min(DROPDOWN_MAX_HEIGHT, options.length * optionRowHeight) && spaceAbove > spaceBelow;
+				setDropdownRect({
+					top: openUp ? rect.top - GAP : rect.bottom + GAP,
+					left: rect.left,
+					width: rect.width,
+					openUp
+				});
+			}
+		};
+		update();
+		window.addEventListener("scroll", update, true);
+		window.addEventListener("resize", update);
+		return () => {
+			window.removeEventListener("scroll", update, true);
+			window.removeEventListener("resize", update);
+		};
+	}, [
+		isOpen,
+		options.length,
+		optionRowHeight
+	]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleClickOutside = (e) => {
+			const target = e.target;
+			if (selectRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+			setIsOpen(false);
+		};
+		document.addEventListener("click", handleClickOutside, true);
+		return () => document.removeEventListener("click", handleClickOutside, true);
+	}, [isOpen]);
+	const computedBorder = hasError ? tokens.borders.input.error : focused || isOpen ? tokens.borders.input.focus : tokens.borders.input.default;
+	const labelBg = isTransparentTheme ? tokens.colors.background.base : tokens.colors.background.surface;
+	const outlinedLabelSizeMap = {
+		small: "0.625rem",
+		medium: "0.6875rem",
+		large: "0.75rem"
+	};
+	const outlinedLabelLeftMap = {
+		small: "2px",
+		medium: "10px",
+		large: "18px"
+	};
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required && /* @__PURE__ */ jsx("span", {
+		style: {
+			color: tokens.colors.status.critical,
+			marginLeft: "2px"
+		},
+		children: "*"
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("zendir-select-wrapper", className),
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing.xs,
+			width: fullWidth ? "100%" : void 0
+		},
+		children: [
+			label && !isOutlined && /* @__PURE__ */ jsx("span", {
+				id: `${generatedId}-label`,
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: tokens.colors.text.secondary
+				},
+				children: labelContent
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: selectRef,
+				style: { position: "relative" },
+				children: [
+					label && isOutlined && /* @__PURE__ */ jsx("span", {
+						id: `${generatedId}-label`,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: outlinedLabelLeftMap[size],
+							transform: "translateY(-50%)",
+							backgroundColor: labelBg,
+							padding: `0 ${tokens.spacing.xs}`,
+							fontSize: outlinedLabelSizeMap[size],
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: focused || isOpen ? hasError ? tokens.colors.status.critical : tokens.colors.accent.primary : hasError ? tokens.colors.status.critical : tokens.colors.text.secondary,
+							zIndex: 1,
+							pointerEvents: "none",
+							transition: `color ${tokens.animation.fast}`,
+							lineHeight: 1.2,
+							whiteSpace: "nowrap",
+							letterSpacing: "0.01em"
+						},
+						children: labelContent
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						ref: triggerRef,
+						type: "button",
+						disabled,
+						onClick: () => !disabled && setIsOpen(!isOpen),
+						onFocus: () => setFocused(true),
+						onBlur: () => setFocused(false),
+						"aria-haspopup": "listbox",
+						"aria-expanded": isOpen,
+						"aria-labelledby": label ? `${generatedId}-label` : void 0,
+						"aria-describedby": helperText || error ? `${generatedId}-hint` : void 0,
+						style: {
+							width: "100%",
+							height: controlHeight,
+							padding: `0 ${config.padding}`,
+							fontSize: config.fontSize,
+							fontFamily: tokens.typography.fontFamily.primary,
+							color: selectedOption ? tokens.colors.text.primary : tokens.colors.text.muted,
+							backgroundColor: isTransparentTheme ? "rgba(10, 15, 25, 0.4)" : tokens.colors.background.surface,
+							border: computedBorder,
+							borderRadius: tokens.borderRadius.md,
+							cursor: disabled ? "not-allowed" : "pointer",
+							opacity: disabled ? .5 : 1,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							textAlign: "left",
+							outline: "none",
+							transition: `border-color ${tokens.animation.fast}`,
+							boxShadow: focused || isOpen ? tokens.borders.focusRing.default : "none"
+						},
+						children: [/* @__PURE__ */ jsx("span", { children: selectedOption?.label ?? placeholder }), /* @__PURE__ */ jsx("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: tokens.colors.text.muted,
+							style: {
+								transform: isOpen ? "rotate(180deg)" : "rotate(0)",
+								transition: `transform ${tokens.animation.fast}`
+							},
+							children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5z" })
+						})]
+					}),
+					isOpen && dropdownRect && createPortal(/* @__PURE__ */ jsxs("ul", {
+						ref: dropdownRef,
+						role: "listbox",
+						style: {
+							position: "fixed",
+							top: dropdownRect.openUp ? void 0 : dropdownRect.top,
+							bottom: dropdownRect.openUp ? window.innerHeight - dropdownRect.top : void 0,
+							left: dropdownRect.left,
+							width: dropdownRect.width,
+							padding: tokens.spacing.xs,
+							backgroundColor: isTransparentTheme ? `${tokens.colors.accent.primary}1f` : tokens.colors.background.elevated,
+							backdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
+							WebkitBackdropFilter: isTransparentTheme ? "blur(12px)" : void 0,
+							border: tokens.borders.dropdown,
+							borderRadius: tokens.borderRadius.md,
+							boxShadow: `${tokens.shadows.lg}, 0 0 30px ${tokens.colors.accent.primary}10`,
+							zIndex: 1e4,
+							maxHeight: "200px",
+							overflowY: "auto",
+							listStyle: "none",
+							margin: 0,
+							animation: `zendir-dropdown ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`
+						},
+						children: [/* @__PURE__ */ jsx("style", { children: `@keyframes zendir-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }` }), options.map((option) => /* @__PURE__ */ jsx("li", {
+							role: "option",
+							"aria-selected": option.value === value,
+							tabIndex: option.disabled ? -1 : 0,
+							onMouseDown: (e) => {
+								e.stopPropagation();
+							},
+							onClick: (e) => {
+								e.stopPropagation();
+								if (!option.disabled) {
+									onChange?.(option.value);
+									setIsOpen(false);
+								}
+							},
+							onKeyDown: (e) => {
+								if (option.disabled) return;
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									onChange?.(option.value);
+									setIsOpen(false);
+								}
+							},
+							style: {
+								padding: `0 ${tokens.spacing.md}`,
+								height: optionRowHeight,
+								minHeight: optionRowHeight,
+								display: "flex",
+								alignItems: "center",
+								fontSize: config.fontSize,
+								lineHeight: 1.2,
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								color: option.disabled ? tokens.colors.text.muted : tokens.colors.text.primary,
+								backgroundColor: option.value === value ? `${tokens.colors.accent.primary}15` : "transparent",
+								borderRadius: tokens.borderRadius.sm,
+								cursor: option.disabled ? "not-allowed" : "pointer",
+								opacity: option.disabled ? .5 : 1,
+								transition: `background-color ${tokens.animation.fast}`
+							},
+							onMouseEnter: (e) => {
+								if (!option.disabled) e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}10`;
+							},
+							onMouseLeave: (e) => {
+								e.currentTarget.style.backgroundColor = option.value === value ? `${tokens.colors.accent.primary}15` : "transparent";
+							},
+							children: option.label
+						}, option.value))]
+					}), document.body)
+				]
+			}),
+			(helperText || error) && /* @__PURE__ */ jsx("span", {
+				id: `${generatedId}-hint`,
+				role: hasError ? "alert" : void 0,
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					color: hasError ? tokens.colors.status.critical : tokens.colors.text.muted
+				},
+				children: error || helperText
+			})
+		]
+	});
 }));
-export {
-  Select
-};
-//# sourceMappingURL=Select.js.map
+//#endregion
+export { Select, Select as default };
+
+//# sourceMappingURL=Select.js.map