@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/chunk-CT46KJOR.js

@@ -0,0 +1,133 @@
+import { CloseIcon, SearchIcon } from './chunk-VQVVHMPG.js';
+import { useState, useRef, useEffect } from 'react';
+import InputBase from '@mui/material/InputBase';
+import InputAdornment from '@mui/material/InputAdornment';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import { useTheme, alpha } from '@mui/material/styles';
+import { jsx } from 'react/jsx-runtime';
+
+function SearchIcon2({ size = 18 }) {
+  return /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: size } });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 16 } });
+}
+function SearchInput({
+  value: controlledValue,
+  onChange,
+  placeholder = "Search...",
+  "aria-label": ariaLabel,
+  debounce = 0,
+  compact = false,
+  fullWidth = true,
+  width,
+  minWidth,
+  clearTooltip = "Clear",
+  autoFocus,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  sx,
+  ref
+}) {
+  const theme = useTheme();
+  const [localValue, setLocalValue] = useState(controlledValue ?? "");
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      clearTimeout(timerRef.current);
+      setLocalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const displayValue = controlledValue !== void 0 && debounce === 0 ? controlledValue : localValue;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (debounce > 0) {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => onChange?.(val), debounce);
+    } else {
+      onChange?.(val);
+    }
+  };
+  const handleClear = () => {
+    setLocalValue("");
+    clearTimeout(timerRef.current);
+    onChange?.("");
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const py = compact ? 0.625 : 0.75;
+  const px = compact ? 1.25 : 1.5;
+  const inputPy = compact ? "3px" : "4px";
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    {
+      "data-keyboard-search": true,
+      ref,
+      fullWidth,
+      placeholder,
+      inputProps: { "aria-label": ariaLabel ?? placeholder },
+      value: displayValue,
+      onChange: handleChange,
+      autoFocus,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { color: "text.disabled", mr: compact ? 0.75 : 1 }, children: /* @__PURE__ */ jsx(SearchIcon2, { size: compact ? 16 : 18 }) }),
+      endAdornment: displayValue ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          "aria-label": clearTooltip,
+          onClick: handleClear,
+          sx: {
+            p: 0.25,
+            border: "none",
+            background: "none",
+            cursor: "pointer",
+            color: "text.disabled",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "50%",
+            "&:hover": { color: "text.secondary" }
+          },
+          children: /* @__PURE__ */ jsx(ClearIcon, {})
+        }
+      ) }) }) : null,
+      sx: {
+        px,
+        py,
+        borderRadius: 1,
+        fontSize: "0.875rem",
+        bgcolor: alpha(theme.palette.grey[500], 0.08),
+        transition: theme.transitions.create(["background-color"], {
+          duration: theme.transitions.duration.shorter
+        }),
+        "&:hover": {
+          bgcolor: alpha(theme.palette.grey[500], 0.12)
+        },
+        "&.Mui-focused": {
+          bgcolor: alpha(theme.palette.grey[500], 0.16)
+        },
+        "& .MuiInputBase-input": {
+          py: inputPy,
+          px: 0,
+          overflow: "visible",
+          "&::placeholder": {
+            opacity: 0.64
+          }
+        },
+        ...width != null && { width },
+        ...minWidth != null && { minWidth },
+        ...!fullWidth && { width: width ?? "auto" },
+        ...Array.isArray(sx) ? Object.assign({}, ...sx) : sx
+      }
+    }
+  );
+}
+
+export { SearchInput };
+//# sourceMappingURL=chunk-CT46KJOR.js.map
+//# sourceMappingURL=chunk-CT46KJOR.js.map

package/dist/chunk-CT46KJOR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/search-input/search-input.tsx"],"names":["SearchIcon"],"mappings":"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","file":"chunk-CT46KJOR.js","sourcesContent":["import { SearchIcon as SearchGlyph, CloseIcon } from '../../icons/controls.js';\n/**\n * SearchInput — Unified search field for the entire platform.\n *\n * Features:\n * - Consistent styling (filled appearance, no outline notch issues)\n * - Built-in search icon (left) and clear button (right)\n * - Optional debounce for expensive filters\n * - Compact mode for sidebars (smaller padding)\n * - Works standalone or controlled\n */\n\nimport { useState, useEffect, useRef, type ChangeEvent, type ReactNode } from 'react';\nimport type { Ref } from 'react';\nimport InputBase from '@mui/material/InputBase';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Tooltip from '@mui/material/Tooltip';\nimport Box from '@mui/material/Box';\nimport { alpha, useTheme, type SxProps, type Theme } from '@mui/material/styles';\n\n// ---------------------------------------------------------------------------\n// Icons (inline SVG — no external dependency)\n// ---------------------------------------------------------------------------\n\nfunction SearchIcon({ size = 18 }: { size?: number }): ReactNode {\n  return <SearchGlyph sx={{ fontSize: size }} />;\n}\n\nfunction ClearIcon(): ReactNode {\n  return <CloseIcon sx={{ fontSize: 16 }} />;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface SearchInputProps {\n  /** Current value (controlled). */\n  value?: string;\n  /** Change handler. Receives the raw string (or debounced string if `debounce` > 0). */\n  onChange?: (value: string) => void;\n  /** Accessible name; defaults to the placeholder. */\n  'aria-label'?: string;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Debounce delay in ms. 0 = no debounce (default). */\n  debounce?: number;\n  /** Compact mode — smaller padding, for sidebars and tight spaces. */\n  compact?: boolean;\n  /** Full width. Default true. */\n  fullWidth?: boolean;\n  /** Fixed or min width. */\n  width?: number | string;\n  /** Min width. */\n  minWidth?: number | string;\n  /** Clear button tooltip text. */\n  clearTooltip?: string;\n  /** Autofocus on mount. */\n  autoFocus?: boolean;\n  /** Focus handler. */\n  onFocus?: () => void;\n  /** Blur handler. */\n  onBlur?: () => void;\n  /** Keyboard handler. */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Custom sx overrides. */\n  sx?: SxProps<Theme>;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function SearchInput({\n  value: controlledValue,\n  onChange,\n  placeholder = 'Search...',\n  'aria-label': ariaLabel,\n  debounce = 0,\n  compact = false,\n  fullWidth = true,\n  width,\n  minWidth,\n  clearTooltip = 'Clear',\n  autoFocus,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  sx,\n  ref,\n}: SearchInputProps & { ref?: Ref<HTMLInputElement> }) {\n  const theme = useTheme();\n\n  // Internal state for debounced mode or uncontrolled usage\n  const [localValue, setLocalValue] = useState(controlledValue ?? '');\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  // Sync internal state when controlled value changes externally\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      clearTimeout(timerRef.current);\n      setLocalValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const displayValue = controlledValue !== undefined && debounce === 0 ? controlledValue : localValue;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    setLocalValue(val);\n\n    if (debounce > 0) {\n      clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => onChange?.(val), debounce);\n    } else {\n      onChange?.(val);\n    }\n  };\n\n  const handleClear = () => {\n    setLocalValue('');\n    clearTimeout(timerRef.current);\n    onChange?.('');\n  };\n\n  // Cleanup timer\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  const py = compact ? 0.625 : 0.75;\n  const px = compact ? 1.25 : 1.5;\n  const inputPy = compact ? '3px' : '4px';\n\n  return (\n    <InputBase\n      data-keyboard-search\n      ref={ref}\n      fullWidth={fullWidth}\n      placeholder={placeholder}\n      inputProps={{ 'aria-label': ariaLabel ?? placeholder }}\n      value={displayValue}\n      onChange={handleChange}\n      autoFocus={autoFocus}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      startAdornment={\n        <InputAdornment position=\"start\" sx={{ color: 'text.disabled', mr: compact ? 0.75 : 1 }}>\n          <SearchIcon size={compact ? 16 : 18} />\n        </InputAdornment>\n      }\n      endAdornment={\n        displayValue ? (\n          <InputAdornment position=\"end\">\n            <Tooltip title={clearTooltip}>\n              <Box\n                component=\"button\"\n                type=\"button\"\n                aria-label={clearTooltip}\n                onClick={handleClear}\n                sx={{\n                  p: 0.25,\n                  border: 'none',\n                  background: 'none',\n                  cursor: 'pointer',\n                  color: 'text.disabled',\n                  display: 'flex',\n                  alignItems: 'center',\n                  borderRadius: '50%',\n                  '&:hover': { color: 'text.secondary' },\n                }}\n              >\n                <ClearIcon />\n              </Box>\n            </Tooltip>\n          </InputAdornment>\n        ) : null\n      }\n      sx={{\n        px,\n        py,\n        borderRadius: 1,\n        fontSize: '0.875rem',\n        bgcolor: alpha(theme.palette.grey[500], 0.08),\n        transition: theme.transitions.create(['background-color'], {\n          duration: theme.transitions.duration.shorter,\n        }),\n        '&:hover': {\n          bgcolor: alpha(theme.palette.grey[500], 0.12),\n        },\n        '&.Mui-focused': {\n          bgcolor: alpha(theme.palette.grey[500], 0.16),\n        },\n        '& .MuiInputBase-input': {\n          py: inputPy,\n          px: 0,\n          overflow: 'visible',\n          '&::placeholder': {\n            opacity: 0.64,\n          },\n        },\n        ...(width != null && { width }),\n        ...(minWidth != null && { minWidth }),\n        ...(!fullWidth && { width: width ?? 'auto' }),\n        ...(Array.isArray(sx) ? Object.assign({}, ...sx) : sx),\n      }}\n    />\n  );\n}\n"]}