@zendir/ui 0.1.0

package/dist/react/core/Select.js

@@ -0,0 +1,303 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useRef, useId, useLayoutEffect, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { classNames } from "../utils/index.js";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.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
+          }
+        )
+      ]
+    }
+  );
+}));
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/react/core/Select.tsx"],"sourcesContent":["/**\n * @zendir/ui - Select Component\n * \n * Dropdown select following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Select\n *   label=\"Spacecraft\"\n *   options={[\n *     { value: 'sat-001', label: 'Explorer-1' },\n *     { value: 'sat-002', label: 'Voyager-2' },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n * />\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useId, useRef, useEffect, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\nimport type { LabelPlacement } from './Input';\nimport { useBreakpoint } from './layout/useBreakpoint';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Options array */\n  options: SelectOption[];\n  /** Selected value */\n  value?: string;\n  /** Change handler */\n  onChange?: (value: string) => void;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Helper text */\n  helperText?: string;\n  /** Error message */\n  error?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium' | 'large';\n  /** Custom className */\n  className?: string;\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n}\n\nexport const Select = memo(forwardRef<HTMLDivElement, SelectProps>(function Select(\n  {\n    label,\n    options,\n    value,\n    onChange,\n    placeholder = 'Select...',\n    helperText,\n    error,\n    disabled = false,\n    fullWidth = false,\n    size = 'medium',\n    className = '',\n    labelPlacement = 'outlined',\n    required,\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const [isOpen, setIsOpen] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dropdownRect, setDropdownRect] = useState<{ top: number; left: number; width: number; openUp?: boolean } | null>(null);\n  const selectRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLUListElement>(null);\n  const generatedId = useId();\n  \n  // Transparent theme detection (purple-hue transparent bg)\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const _transparentDefault = tokens.colors.interactive.transparentDefault;\n  const _transparentInputBg = tokens.colors.interactive.transparentInputBg;\n  \n  const hasError = !!error;\n  const selectedOption = options.find(o => o.value === value);\n  const isOutlined = labelPlacement === 'outlined';\n  \n  const sizeConfig = {\n    small: { height: tokens.elementSize.sm, fontSize: tokens.typography.fontSize.xs, padding: tokens.spacing.sm, inputPaddingLeft: 8 },\n    medium: { height: tokens.elementSize.md, fontSize: tokens.typography.fontSize.sm, padding: tokens.spacing.md, inputPaddingLeft: 16 },\n    large: { height: tokens.elementSize.lg, fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.lg, inputPaddingLeft: 24 },\n  };\n  const config = sizeConfig[size];\n  const controlHeight = isMobile ? '44px' : config.height;\n  const optionRowHeight = isMobile\n    ? 40\n    : (size === 'small' ? 30 : size === 'medium' ? 34 : 38);\n  \n  // Position dropdown when open (for portal) - keep in viewport\n  const DROPDOWN_MAX_HEIGHT = 200;\n  const GAP = 4;\n  useLayoutEffect(() => {\n    if (!isOpen || !triggerRef.current) {\n      setDropdownRect(null);\n      return;\n    }\n    const update = () => {\n      if (triggerRef.current) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        const spaceBelow = window.innerHeight - rect.bottom - GAP;\n        const spaceAbove = rect.top - GAP;\n        const openUp = spaceBelow < Math.min(DROPDOWN_MAX_HEIGHT, options.length * optionRowHeight) && spaceAbove > spaceBelow;\n        setDropdownRect({\n          top: openUp ? rect.top - GAP : rect.bottom + GAP,\n          left: rect.left,\n          width: rect.width,\n          openUp,\n        });\n      }\n    };\n    update();\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [isOpen, options.length, optionRowHeight]);\n\n  // Close dropdown on outside click (include portaled dropdown)\n  useEffect(() => {\n    if (!isOpen) return;\n    \n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node;\n      // Check if click is inside the trigger or the portaled dropdown\n      if (\n        selectRef.current?.contains(target) ||\n        dropdownRef.current?.contains(target)\n      ) {\n        return;\n      }\n      setIsOpen(false);\n    };\n    // Use click instead of mousedown to avoid race condition with option onClick\n    document.addEventListener('click', handleClickOutside, true);\n    return () => document.removeEventListener('click', handleClickOutside, true);\n  }, [isOpen]);\n  \n  const computedBorder = hasError\n    ? tokens.borders.input.error\n    : focused || isOpen\n    ? tokens.borders.input.focus\n    : tokens.borders.input.default;\n  \n  // Background for the outlined label \"notch\"\n  const labelBg = isTransparentTheme\n    ? tokens.colors.background.base\n    : tokens.colors.background.surface;\n  \n  // Outlined label font sizes\n  const outlinedLabelSizeMap = { small: '0.625rem', medium: '0.6875rem', large: '0.75rem' };\n  const outlinedLabelLeftMap = { small: '2px', medium: '10px', large: '18px' };\n  \n  // Shared label content\n  const labelContent = (\n    <>\n      {label}\n      {required && (\n        <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('zendir-select-wrapper', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.xs,\n        width: fullWidth ? '100%' : undefined,\n      }}\n    >\n      {/* Label: 'above' variant */}\n      {label && !isOutlined && (\n        <span\n          id={`${generatedId}-label`}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.secondary,\n          }}\n        >\n          {labelContent}\n        </span>\n      )}\n      \n      <div ref={selectRef} style={{ position: 'relative' }}>\n        {/* Label: 'outlined' variant — positioned on the trigger border */}\n        {label && isOutlined && (\n          <span\n            id={`${generatedId}-label`}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: outlinedLabelLeftMap[size],\n              transform: 'translateY(-50%)',\n              backgroundColor: labelBg,\n              padding: `0 ${tokens.spacing.xs}`,\n              fontSize: outlinedLabelSizeMap[size],\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: focused || isOpen\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\n                : hasError\n                  ? tokens.colors.status.critical\n                  : tokens.colors.text.secondary,\n              zIndex: 1,\n              pointerEvents: 'none',\n              transition: `color ${tokens.animation.fast}`,\n              lineHeight: 1.2,\n              whiteSpace: 'nowrap',\n              letterSpacing: '0.01em',\n            }}\n          >\n            {labelContent}\n          </span>\n        )}\n        \n        <button\n          ref={triggerRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\n          aria-describedby={(helperText || error) ? `${generatedId}-hint` : undefined}\n          style={{\n            width: '100%',\n            height: controlHeight,\n            padding: `0 ${config.padding}`,\n            fontSize: config.fontSize,\n            fontFamily: tokens.typography.fontFamily.primary,\n            color: selectedOption ? tokens.colors.text.primary : tokens.colors.text.muted,\n            backgroundColor: isTransparentTheme ? 'rgba(10, 15, 25, 0.4)' : tokens.colors.background.surface,\n            border: computedBorder,\n            borderRadius: tokens.borderRadius.md,\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.5 : 1,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            textAlign: 'left',\n            outline: 'none',\n            transition: `border-color ${tokens.animation.fast}`,\n            boxShadow: focused || isOpen ? tokens.borders.focusRing.default : 'none',\n          }}\n        >\n          <span>{selectedOption?.label ?? placeholder}</span>\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill={tokens.colors.text.muted}\n            style={{\n              transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n              transition: `transform ${tokens.animation.fast}`,\n            }}\n          >\n            <path d=\"M7 10l5 5 5-5z\" />\n          </svg>\n        </button>\n        \n        {isOpen && dropdownRect &&\n          createPortal(\n            <ul\n              ref={dropdownRef}\n              role=\"listbox\"\n              style={{\n                position: 'fixed',\n                top: dropdownRect.openUp ? undefined : dropdownRect.top,\n                bottom: dropdownRect.openUp ? window.innerHeight - dropdownRect.top : undefined,\n                left: dropdownRect.left,\n                width: dropdownRect.width,\n                padding: tokens.spacing.xs,\n                backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.12)' : tokens.colors.background.elevated,\n                backdropFilter: isTransparentTheme ? 'blur(12px)' : undefined,\n                WebkitBackdropFilter: isTransparentTheme ? 'blur(12px)' : undefined,\n                border: tokens.borders.dropdown,\n                borderRadius: tokens.borderRadius.md,\n                boxShadow: `${tokens.shadows.lg}, 0 0 30px ${tokens.colors.accent.primary}10`,\n                zIndex: 10000,\n                maxHeight: '200px',\n                overflowY: 'auto',\n                listStyle: 'none',\n                margin: 0,\n                animation: `zendir-dropdown ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n              }}\n            >\n              <style>{`@keyframes zendir-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }`}</style>\n              {options.map((option) => (\n                <li\n                  key={option.value}\n                  role=\"option\"\n                  aria-selected={option.value === value}\n                  tabIndex={option.disabled ? -1 : 0}\n                  onMouseDown={(e) => {\n                    // Prevent the document click handler from firing before we process this\n                    e.stopPropagation();\n                  }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!option.disabled) {\n                      onChange?.(option.value);\n                      setIsOpen(false);\n                    }\n                  }}\n                  onKeyDown={(e) => {\n                    if (option.disabled) return;\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      onChange?.(option.value);\n                      setIsOpen(false);\n                    }\n                  }}\n                  style={{\n                    padding: `0 ${tokens.spacing.md}`,\n                    height: optionRowHeight,\n                    minHeight: optionRowHeight,\n                    display: 'flex',\n                    alignItems: 'center',\n                    fontSize: config.fontSize,\n                    lineHeight: 1.2,\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    color: option.disabled ? tokens.colors.text.muted : tokens.colors.text.primary,\n                    backgroundColor: option.value === value ? `${tokens.colors.accent.primary}15` : 'transparent',\n                    borderRadius: tokens.borderRadius.sm,\n                    cursor: option.disabled ? 'not-allowed' : 'pointer',\n                    opacity: option.disabled ? 0.5 : 1,\n                    transition: `background-color ${tokens.animation.fast}`,\n                  }}\n                  onMouseEnter={(e) => {\n                    if (!option.disabled) {\n                      e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}10`;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor =\n                      option.value === value ? `${tokens.colors.accent.primary}15` : 'transparent';\n                  }}\n                >\n                  {option.label}\n                </li>\n              ))}\n            </ul>,\n            document.body\n          )}\n      </div>\n      \n      {(helperText || error) && (\n        <span\n          id={`${generatedId}-hint`}\n          role={hasError ? 'alert' : undefined}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.muted,\n          }}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n}));\n\nexport default Select;\n"],"names":["Select"],"mappings":"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"}

package/dist/react/core/SideNav.d.ts

@@ -0,0 +1,103 @@
+import { default as React } from 'react';
+import { IconName } from './Icon';
+
+export interface SideNavProps {
+    /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */
+    collapsed?: boolean;
+    /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Show a collapse/expand toggle button in the sidebar (default true). */
+    showCollapseToggle?: boolean;
+    /** Width in pixels (default 260) */
+    width?: number;
+    /** Collapsed width in pixels (default 64) */
+    collapsedWidth?: number;
+    /**
+     * Mobile viewport behavior.
+     * - `'drawer'` (default): hamburger button with slide-out overlay drawer.
+     * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).
+     */
+    mobileVariant?: 'drawer' | 'collapsed';
+    /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */
+    children?: React.ReactNode;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+declare const SideNavRoot: React.NamedExoticComponent<SideNavProps>;
+export interface SideNavHeaderProps {
+    /** Logo element (Icon, image, or ReactNode) */
+    logo?: React.ReactNode;
+    /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */
+    collapsedLogo?: React.ReactNode;
+    /** App title */
+    title?: string;
+    /** Subtitle or version */
+    subtitle?: string;
+    /** Role badge (e.g., "Operator", "Admin") */
+    badge?: string;
+    /** Badge variant for color */
+    badgeVariant?: 'info' | 'success' | 'warning' | 'caution';
+    /** Children override (advanced: replaces default header content entirely) */
+    children?: React.ReactNode;
+}
+declare const SideNavHeader: React.NamedExoticComponent<SideNavHeaderProps>;
+export interface SideNavItemProps {
+    /** Icon name from zendir-ui icon library */
+    icon?: IconName | React.ReactNode;
+    /** Label text */
+    label: string;
+    /** Description text displayed beneath the label (hidden in collapsed mode) */
+    description?: string;
+    /** Small tag/chip displayed after the label (e.g. "v2", "NEW", "BETA") */
+    tag?: string;
+    /** Tag color variant */
+    tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+    /** Link href (renders <a>) */
+    href?: string;
+    /** Click handler (renders <button>) */
+    onClick?: () => void;
+    /** Active state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Notification badge count */
+    badge?: number;
+    /** External link indicator */
+    external?: boolean;
+    /**
+     * Astro UX status level — renders a dual-coded indicator (color + shape).
+     * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,
+     * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.
+     */
+    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    /** Optional status label shown as tooltip or text next to status shape */
+    statusLabel?: string;
+    /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */
+    suffix?: React.ReactNode;
+}
+declare const SideNavItem: React.NamedExoticComponent<SideNavItemProps>;
+export interface SideNavSectionProps {
+    /** Section title */
+    title?: string;
+    /** Children (SideNav.Item elements) */
+    children?: React.ReactNode;
+}
+declare const SideNavSection: React.NamedExoticComponent<SideNavSectionProps>;
+export interface SideNavDividerProps {
+    /** Optional label shown in the center of the divider line */
+    label?: string;
+}
+declare const SideNavDivider: React.NamedExoticComponent<SideNavDividerProps>;
+export interface SideNavFooterProps {
+    children?: React.ReactNode;
+}
+declare const SideNavFooter: React.NamedExoticComponent<SideNavFooterProps>;
+type SideNavComponent = typeof SideNavRoot & {
+    Header: typeof SideNavHeader;
+    Item: typeof SideNavItem;
+    Section: typeof SideNavSection;
+    Divider: typeof SideNavDivider;
+    Footer: typeof SideNavFooter;
+};
+export declare const SideNav: SideNavComponent;
+export default SideNav;