@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/searchfield/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/searchfield/index.tsx"],"sourcesContent":["// @ts-nocheck\nimport {\n  type JSX,\n  createContext,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport {\n  SearchField as HeadlessSearchField,\n  SearchFieldLabel as HeadlessSearchFieldLabel,\n  SearchFieldInput as HeadlessSearchFieldInput,\n  SearchFieldClearButton as HeadlessSearchFieldClearButton,\n  SearchFieldContext as HeadlessSearchFieldContext,\n  type SearchFieldProps as HeadlessSearchFieldProps,\n  type SearchFieldRenderProps,\n  type SearchFieldClearButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport {\n  control,\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport { FieldSuffix } from \"../field/suffix\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport SearchIcon from \"../icon/s2wf-icons/SearchIcon\";\nimport CrossIcon from \"../icon/ui-icons/Cross\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type SearchFieldVariant = \"outline\" | \"filled\";\nexport type SearchFieldLabelPosition = \"top\" | \"side\";\nexport type SearchFieldLabelAlign = \"start\" | \"end\";\nexport type SearchFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface SearchFieldProps extends Omit<\n  HeadlessSearchFieldProps,\n  \"class\" | \"style\" | \"children\" | \"label\" | \"slot\" | \"ref\"\n> {\n  /** The size of the search field. */\n  size?: SearchFieldSize;\n  /** Legacy visual variant. S2 SearchFields do not expose visual variants. */\n  variant?: SearchFieldVariant;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Label text for the input. */\n  label?: JSX.Element;\n  /** Description text shown below the input. */\n  description?: JSX.Element;\n  /** Error message shown when invalid. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the input. */\n  labelPosition?: SearchFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: SearchFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: SearchFieldNecessityIndicator;\n  /** A contextual help element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /**\n   * An icon or text rendered before the input in place of the built-in search\n   * magnifier, e.g. the register's `/` slash-command glyph.\n   */\n  prefix?: JSX.Element;\n  /** An icon or text rendered after the input, e.g. a key hint. */\n  suffix?: JSX.Element;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the search field root element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\ninterface SearchFieldStyleProps extends SearchFieldRenderProps {\n  size?: S2SearchFieldSize;\n  labelPosition?: SearchFieldLabelPosition;\n  labelAlign?: SearchFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStaticColor?: boolean;\n  isInForm?: boolean;\n  isQuiet?: boolean;\n}\n\ninterface ClearButtonStyleProps extends SearchFieldClearButtonRenderProps {\n  size?: S2SearchFieldSize;\n  isFocusVisible?: boolean;\n  isStaticColor?: boolean;\n}\n\nexport const SearchFieldContext = createContext<SpectrumContextValue<SearchFieldProps>>(null);\n\nconst hideNativeSearchCancelButton = css(\n  \"&::-webkit-search-cancel-button { display: none }\",\n) as StyleString;\n\nconst searchFieldRoot = style<SearchFieldStyleProps>(\n  {\n    ...field(),\n    \"--iconMargin\": {\n      type: \"marginTop\",\n      value: fontRelative(-2),\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isDisabled: {\n        default: \"disabled\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nconst searchFieldLabelWrapper = style<SearchFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n    isQuiet: \"none\",\n  },\n});\n\nconst searchFieldLabel = style<SearchFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst searchFieldGroup = style<SearchFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  /* No borderRadius here on purpose. `control({ register: \"matte\" })` above already\n   * sets `borderRadius: \"default\"` (8px) via its non-pill branch, and `fieldInput()`\n   * emits no radius, so the spread survives. The `full` that used to sit here made\n   * SearchField the only matte field drawn as a pill — textfield/index.tsx,\n   * textfield/TextArea.tsx and numberfield/index.tsx all spread the same\n   * `control({ shape: \"default\", register: \"matte\" })` and declare no radius of their\n   * own. The `full` on `clearButton` below is a different object and stays: that one\n   * is a round icon button. */\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\n/* End side only. `control({ register: \"matte\" })` already sets `paddingX:\n * \"edge-to-text\"`, so dropping the old `paddingStart: \"pill\"` lets the start inset\n * fall back in line with the other matte fields; zeroing just the end keeps the\n * clear button flush with the well edge. That is the same shape NumberField gives\n * its stepper — numberfield/index.tsx spells `paddingStart: \"edge-to-text\"` with\n * `paddingEnd` defaulting to 0. */\nconst searchFieldGroupEndPadding = style({\n  paddingEnd: 0,\n});\n\nconst searchIconWrapper = style({\n  flexShrink: 0,\n  marginEnd: \"text-to-visual\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst searchIcon = style<SearchFieldStyleProps>({\n  size: fontRelative(20),\n  marginStart: \"--iconMargin\",\n});\n\nconst searchFieldInput = style({\n  padding: 0,\n  backgroundColor: \"transparent\",\n  color: {\n    default: \"inherit\",\n    \"::placeholder\": {\n      default: \"gray-600\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  fontFamily: \"inherit\",\n  fontSize: \"inherit\",\n  fontWeight: \"inherit\",\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  width: \"full\",\n  outlineStyle: \"none\",\n  borderStyle: \"none\",\n  truncate: true,\n});\n\nconst clearButton = style<ClearButtonStyleProps>({\n  ...focusRing(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  height: \"full\",\n  width: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  boxSizing: \"border-box\",\n  padding: 0,\n  outlineOffset: -4,\n  outlineColor: {\n    default: focusRing().outlineColor,\n    isStaticColor: \"white\",\n  },\n  color: \"inherit\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst helpTextStyles = style<SearchFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\n// Byte-faithful to upstream Field.tsx HelpText: the description renders a RAC\n// `<Text slot=\"description\">` (a `<span>`), NOT a `<p>` (whose UA `margin` the\n// port previously had to zero out in `helpTextStyles`). The `slot` mirrors RAC's\n// Text; the id/aria wiring is read from the headless SearchField context.\nfunction SearchFieldDescription(props: {\n  class?: string;\n  children?: JSX.Element;\n}): JSX.Element | null {\n  const context = useContext(HeadlessSearchFieldContext);\n  if (!context?.descriptionProps) return null;\n  const descriptionProps = () => {\n    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <span {...descriptionProps()} slot=\"description\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\n// Upstream renders the invalid message through a RAC `<FieldError>`, which is a\n// `<Text slot=\"errorMessage\">` (a `<span>`), not a `<p>`.\nfunction SearchFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessSearchFieldContext);\n  if (!context?.errorMessageProps) return null;\n  const errorMessageProps = () => {\n    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <span {...errorMessageProps()} slot=\"errorMessage\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nfunction normalizeSearchFieldSize(size: SearchFieldSize | undefined): S2SearchFieldSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\nfunction focusFieldInput(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n\n  if (target?.closest(\"button,input,textarea,[role='button']\")) {\n    return;\n  }\n\n  event.preventDefault();\n  event.currentTarget.querySelector<HTMLElement>(\"input, textarea\")?.focus();\n}\n\nfunction requiredIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"L\" || size === \"XL\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nfunction clearIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"XL\" ? 12 : size === \"L\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nexport function SearchField(props: SearchFieldProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const providerProps = useProviderProps(useFormProps(props));\n  const contextProps = getSlottedContextProps(useContext(SearchFieldContext), props.slot);\n  const defaultProps: Partial<SearchFieldProps> = {\n    labelPosition: \"top\",\n    labelAlign: \"start\",\n    necessityIndicator: \"icon\",\n  };\n  const mergedProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"variant\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"contextualHelp\",\n    \"prefix\",\n    \"suffix\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  const prefixId = createUniqueId();\n  const suffixId = createUniqueId();\n  // Space-separated adornment ids appended to the input's `aria-labelledby`,\n  // visual order (prefix before suffix). Read live by PrefixInputProvider.\n  const adornmentIds = () =>\n    [local.prefix ? prefixId : null, local.suffix ? suffixId : null].filter(Boolean).join(\" \");\n\n  const size = () => normalizeSearchFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRootRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n\n  // Upstream S2 SearchField.tsx invokes the root `style()(...)` with ONLY\n  // `{size, labelPosition, isInForm}` (lines 117-124) — it does NOT pass\n  // `isDisabled`, so the root's `color.isDisabled: 'disabled'` branch never\n  // activates and the root stays `baseColor('neutral')` even when disabled.\n  // (The render-prop `isDisabled` is threaded DOWN to FieldLabel/FieldGroup,\n  // not back into the root's own style call.) Spreading `...renderProps` here\n  // would light up that branch and diverge the root color (D1). Keep parity:\n  // pass only the same three style props upstream does. `renderProps` stays a\n  // param so the signature matches AriaSearchField's className callback shape.\n  const rootClassName = (_renderProps: SearchFieldRenderProps) =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      searchFieldRoot(\n        {\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    searchFieldLabelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: SearchFieldRenderProps) =>\n    searchFieldLabel({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n      isStaticColor: false,\n    });\n\n  const groupClass = (renderProps: SearchFieldRenderProps) =>\n    mergeStyles(\n      searchFieldGroup({\n        ...renderProps,\n        size: size(),\n        isFocusWithin: isFocusWithin(),\n      }),\n      searchFieldGroupEndPadding,\n    );\n\n  const inputClass = () => [searchFieldInput, hideNativeSearchCancelButton].join(\" \");\n\n  const clearButtonClass = (renderProps: SearchFieldClearButtonRenderProps) =>\n    clearButton({\n      ...renderProps,\n      size: size(),\n      isStaticColor: false,\n    });\n\n  const helpClass = (renderProps: SearchFieldRenderProps, isInvalid: boolean) =>\n    helpTextStyles({\n      ...renderProps,\n      size: size(),\n      isInvalid,\n    });\n\n  return (\n    <HeadlessSearchField\n      {...headlessProps}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      ref={(element) => assignRootRef(element)}\n      slot={local.slot ?? undefined}\n      class={rootClassName}\n      style={mergedUnsafeStyle()}\n      data-size={size()}\n      children={(renderProps: SearchFieldRenderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <HeadlessSearchFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"icon\"}\n                      fallback={\n                        <span aria-hidden={renderProps.isRequired ? true : undefined}>\n                          {renderProps.isRequired ? \"(required)\" : \"(optional)\"}\n                        </span>\n                      }\n                    >\n                      <AsteriskIcon\n                        size={size() === \"S\" ? \"M\" : size()}\n                        styles={requiredIcon}\n                        style={requiredIconStyle(size())}\n                        aria-hidden=\"true\"\n                      />\n                    </Show>\n                  </span>\n                </Show>\n              </HeadlessSearchFieldLabel>\n              <Show when={local.contextualHelp}>\n                <span data-slot=\"contextualHelp\">{local.contextualHelp}</span>\n              </Show>\n            </div>\n          </Show>\n\n          <div\n            // Mirrors S2's FieldGroup, which renders RAC <Group> as the field\n            // shell around the icon, input, and clear button. This group IS\n            // role=\"group\" (unlike TextField's, which is role=\"presentation\"):\n            // RAC's SearchField seeds GroupContext with only {isInvalid,\n            // isDisabled} — NO role — (react-aria-components SearchField.mjs), so\n            // the inner <Group> falls back to its default role ?? 'group'.\n            // Verified against the rendered React AX tree (D6). The group is\n            // intentionally unnamed — the searchbox itself carries the label.\n            role=\"group\"\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setIsFocusWithin(false);\n              }\n            }}\n            data-focused={isFocusWithin() ? \"true\" : undefined}\n            data-disabled={renderProps.isDisabled ? \"true\" : undefined}\n            data-invalid={renderProps.isInvalid ? \"true\" : undefined}\n          >\n            <Show\n              when={local.prefix}\n              fallback={\n                <CenterBaseline slot=\"icon\" styles={searchIconWrapper}>\n                  <SearchIcon styles={searchIcon} />\n                </CenterBaseline>\n              }\n            >\n              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>\n            </Show>\n            <Show\n              when={local.prefix || local.suffix}\n              fallback={<HeadlessSearchFieldInput class={inputClass()} />}\n            >\n              <PrefixInputProvider context={HeadlessSearchFieldContext} prefixId={adornmentIds()}>\n                <HeadlessSearchFieldInput class={inputClass()} />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={local.suffix}>\n              <FieldSuffix id={suffixId}>{local.suffix}</FieldSuffix>\n            </Show>\n            <Show when={!renderProps.isReadOnly}>\n              <HeadlessSearchFieldClearButton class={clearButtonClass}>\n                <CrossIcon size={size()} style={clearIconStyle(size())} />\n              </HeadlessSearchFieldClearButton>\n            </Show>\n          </div>\n\n          <Show when={local.description && !renderProps.isInvalid}>\n            <SearchFieldDescription class={helpClass(renderProps, false)}>\n              {local.description}\n            </SearchFieldDescription>\n          </Show>\n\n          <Show when={local.errorMessage && renderProps.isInvalid}>\n            <SearchFieldError class={helpClass(renderProps, true)}>\n              <CenterBaseline>\n                <AlertTriangleIcon aria-hidden=\"true\" styles={fieldErrorIcon} />\n              </CenterBaseline>\n              <span>{local.errorMessage}</span>\n            </SearchFieldError>\n          </Show>\n        </>\n      )}\n    />\n  );\n}\n\nexport type { SearchFieldState } from \"@proyecto-viviana/solid-stately\";\n"],"mappings":"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"}

package/dist/searchfield/index.jsx

@@ -0,0 +1,590 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { useProviderProps } from "../provider/index.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { CenterBaseline } from "../icon/center-baseline.jsx";
+import { a as useIsInForm, i as useFormProps } from "../_chunk/form.jsx";
+import { t as Cross } from "../_chunk/Cross.jsx";
+import { t as AlertTriangleIcon } from "../_chunk/AlertTriangleIcon.jsx";
+import { t as Asterisk } from "../_chunk/Asterisk.jsx";
+import { SearchIcon } from "../icon/s2wf-icons/SearchIcon.jsx";
+import { n as PrefixInputProvider, t as FieldPrefix } from "../_chunk/prefix.jsx";
+import { t as FieldSuffix } from "../_chunk/suffix.jsx";
+import { Show, createContext, createSignal, createUniqueId, mergeProps, splitProps, useContext } from "solid-js";
+import { SearchField as SearchField$1, SearchFieldClearButton, SearchFieldContext as SearchFieldContext$1, SearchFieldInput, SearchFieldLabel } from "@proyecto-viviana/solidaria-components";
+//#region src/searchfield/index.tsx
+const SearchFieldContext = createContext(null);
+const hideNativeSearchCancelButton = "zc3JFe";
+const searchFieldRoot = function anonymous(props, overrides) {
+	let rules = " ";
+	let gridColumnStart = false;
+	let gridColumnEnd = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "z") gridColumnStart = true;
+		if (p[1] === "y") gridColumnEnd = true;
+		rules += p[0];
+	}
+	rules += " se151";
+	if (props.isInForm) {
+		if (!gridColumnStart) rules += " z2mU151";
+	}
+	if (props.isInForm) {
+		if (props.labelPosition === "side") {
+			if (!gridColumnEnd) rules += " yvoofG151";
+		}
+	}
+	if (props.isInForm) rules += " DLwlgod151";
+	else if (props.labelPosition === "side") rules += " DPlN5qb151";
+	else if (props.labelPosition === "top") rules += " DM8Mfn151";
+	if (props.labelPosition === "side") rules += " EPlN5qb151";
+	else if (props.labelPosition === "top") rules += " E4w1sLc151";
+	if (props.labelPosition === "side") rules += " CfFpp6c151";
+	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " ea151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.size === "XL") rules += " -BhX7R-Fz151";
+	else if (props.size === "L") rules += " -BhX7R-Fv151";
+	else if (props.size === "S") rules += " -BhX7R-Fp151";
+	else if (props.size === "XS") rules += " -BhX7R-Fn151";
+	else rules += " -BhX7R-Fx151";
+	rules += " -AJjOLd-UVkF0Db151";
+	rules += " qg151";
+	rules += " __ca151";
+	rules += " -Qg41Lb-JAxCW0c151";
+	if (props.isDisabled) {
+		rules += " pUvnvv151";
+		rules += " plc151";
+	} else if (props.isPressed) rules += " pMwyHo151";
+	else if (props.isFocusVisible) rules += " pMwyHo151";
+	else if (props.isHovered) rules += " pMwyHo151";
+	else rules += " pHKLAu151";
+	return rules;
+};
+const searchFieldLabelWrapper = function anonymous(props) {
+	let rules = " ";
+	rules += " zv6x9r151";
+	rules += " yv6x9r151";
+	rules += " Bv6x9r151";
+	rules += " Av6x9r151";
+	rules += " sf151";
+	if (props.labelAlign === "end") rules += " _Wb151";
+	else if (props.labelAlign === "start") rules += " _Wd151";
+	if (props.labelPosition === "top") rules += " QgOnRt151";
+	if (props.isQuiet) rules += " _qd151";
+	else if (props.labelPosition === "top") rules += " _qb151";
+	return rules;
+};
+const searchFieldLabel = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	return rules;
+};
+const searchFieldGroup = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isDisabled) {
+		rules += " pUvnvv151";
+		rules += " plc151";
+	} else {
+		if (props.isPressed) rules += " pMwyHo151";
+		else if (props.isFocusVisible) rules += " pMwyHo151";
+		else if (props.isHovered) rules += " pMwyHo151";
+		else rules += " pHKLAu151";
+		rules += " plb151";
+	}
+	rules += " sd151";
+	rules += " eb151";
+	rules += " _oa151";
+	rules += " SMBFGYc151";
+	rules += " RfBFGYc151";
+	if (props.size === "XL") rules += " Nl151";
+	else if (props.size === "L") rules += " Nj151";
+	else if (props.size === "S") rules += " Nf151";
+	else if (props.size === "XS") rules += " Ne151";
+	else rules += " Nk151";
+	rules += " ob151";
+	rules += " nb151";
+	rules += " kb151";
+	rules += " jb151";
+	rules += " _kb151";
+	rules += " hb151";
+	rules += " mCPFGYc151";
+	rules += " l5OFGYc151";
+	rules += " _jf151";
+	if (props.isDisabled) {
+		rules += " ifbAdGe151";
+		rules += " ilc151";
+	} else if (props.isFocusWithin) {
+		if (props.isInvalid) rules += " iQxdzb151";
+		else rules += " iMwyHo151";
+		rules += " ild151";
+	} else if (props.isInvalid) {
+		if (props.isPressed) rules += " iQxdzb151";
+		else if (props.isFocusVisible) rules += " iQxdzb151";
+		else if (props.isHovered) rules += " iQxdzb151";
+		else rules += " iYjUhNc151";
+		rules += " ile151";
+	} else {
+		rules += " iAv83Hb151";
+		rules += " ila151";
+	}
+	rules += " gHPXipd151";
+	rules += " gl1kG7o151";
+	rules += " _iRvAxPd151";
+	rules += " _ilc151";
+	rules += " __mrmLYsd151";
+	rules += " FRuFGYc151";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	if (props.isQuiet) rules += " _qd151";
+	else rules += " _qtb151";
+	if (props.size === "XL") rules += " -Anxdcc-Zt151";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
+	else if (props.size === "S") rules += " -Anxdcc-Zr151";
+	else rules += " -Anxdcc-Z3fn9H151";
+	rules += " __v6TNLWb151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	if (props.isDisabled) rules += " ri151";
+	else rules += " rD151";
+	if (props.size === "XL") rules += " -F_-Fz151";
+	else if (props.size === "L") rules += " -F_-Fv151";
+	else if (props.size === "S") rules += " -F_-Fp151";
+	else if (props.size === "XS") rules += " -F_-Fn151";
+	else rules += " -F_-Fx151";
+	rules += " -S_-Sv151";
+	rules += " -R_-Rv151";
+	rules += " -m_-mb151";
+	rules += " -l_-lb151";
+	return rules;
+};
+const searchFieldGroupEndPadding = " Rd151";
+const searchIconWrapper = " _va151 Ht151 Hsu151 -_8sjo0b-t5ZbAob151";
+const searchIcon = " ZuUmpre151 FuUmpre151 I67logd151";
+const searchFieldInput = " Td151 Qd151 Sd151 Rd151 g9151 p40ub4c151 pYFIK2bQKeKoe151 pYFIK2blc151 u40ub4c151 v40ub4c151 x40ub4c151 _xa151 _ub151 _vb151 Na151 Za151 _Le151 _je151 _Nc151 Pc151 _Yb151 _7c151";
+const clearButton = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	if (props.isStaticColor) rules += " Ok151";
+	else {
+		rules += " O8KaFke151";
+		rules += " Olc151";
+	}
+	rules += " _Mc151";
+	rules += " _Kc151";
+	rules += " sd151";
+	rules += " eb151";
+	rules += " _Ca151";
+	rules += " Fb151";
+	if (props.size === "XL") rules += " ZF151";
+	else if (props.size === "L") rules += " Zw151";
+	else if (props.size === "S") rules += " Zo151";
+	else if (props.size === "XS") rules += " Zm151";
+	else rules += " ZC151";
+	rules += " _va151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _je151";
+	rules += " g9151";
+	rules += " _oa151";
+	rules += " Td151";
+	rules += " Qd151";
+	rules += " Sd151";
+	rules += " Rd151";
+	rules += " p40ub4c151";
+	rules += " -_8sjo0b-t5ZbAob151";
+	return rules;
+};
+const helpTextStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zzBWQ8d151";
+	rules += " yzBWQ8d151";
+	rules += " BzBWQ8d151";
+	rules += " AzBWQ8d151";
+	rules += " sd151";
+	rules += " ea151";
+	rules += " Uc151";
+	rules += " Usd151";
+	rules += " qc151";
+	rules += " qsd151";
+	if (props.size === "XL") rules += " uxe7h4151";
+	else if (props.size === "L") rules += " uxe7h4151";
+	else if (props.size === "S") rules += " uxe7h4151";
+	else if (props.size === "XS") rules += " uxe7h4151";
+	else rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isDisabled) {
+		rules += " pUvnvv151";
+		rules += " plc151";
+	} else if (props.isInvalid) {
+		rules += " pYjUhNc151";
+		rules += " plQBRyrc151";
+	} else rules += " pUUi0Fe151";
+	rules += " -_8sjo0b-t5ZbAob151";
+	rules += " _qb151";
+	rules += " TgOnRt151";
+	if (props.isDisabled) rules += " ri151";
+	else rules += " rD151";
+	return rules;
+};
+const fieldErrorIcon = " ZuUmpre151 FuUmpre151 It151 Isu151 HAxCW0c151 _va151 -_8sjo0b-tQQET4151 -_8sjo0b-ltQBRyrc151";
+const requiredIcon = " -_8sjo0b-t5ZbAob151";
+const noWrap = " _7c151";
+function SearchFieldDescription(props) {
+	const context = useContext(SearchFieldContext$1);
+	if (!context?.descriptionProps) return null;
+	const descriptionProps = () => {
+		const { ref: _ref, ...rest } = context.descriptionProps;
+		return rest;
+	};
+	return <span {...descriptionProps()} slot="description" class={props.class}>
+      {props.children}
+    </span>;
+}
+function SearchFieldError(props) {
+	const context = useContext(SearchFieldContext$1);
+	if (!context?.errorMessageProps) return null;
+	const errorMessageProps = () => {
+		const { ref: _ref, ...rest } = context.errorMessageProps;
+		return rest;
+	};
+	return <span {...errorMessageProps()} slot="errorMessage" class={props.class}>
+      {props.children}
+    </span>;
+}
+function normalizeSearchFieldSize(size) {
+	switch (size) {
+		case "sm": return "S";
+		case "md": return "M";
+		case "lg": return "L";
+		case "S":
+		case "M":
+		case "L":
+		case "XL": return size;
+		default: return "M";
+	}
+}
+function focusFieldInput(event) {
+	if (event.target?.closest("button,input,textarea,[role='button']")) return;
+	event.preventDefault();
+	event.currentTarget.querySelector("input, textarea")?.focus();
+}
+function requiredIconStyle(size) {
+	const pixelSize = size === "L" || size === "XL" ? 10 : 8;
+	return {
+		width: `${pixelSize}px`,
+		height: `${pixelSize}px`
+	};
+}
+function clearIconStyle(size) {
+	const pixelSize = size === "XL" ? 12 : size === "L" ? 10 : 8;
+	return {
+		width: `${pixelSize}px`,
+		height: `${pixelSize}px`
+	};
+}
+function SearchField(props) {
+	const isInForm = useIsInForm();
+	const providerProps = useProviderProps(useFormProps(props));
+	const contextProps = getSlottedContextProps(useContext(SearchFieldContext), props.slot);
+	const [local, headlessProps] = splitProps(mergeProps({
+		labelPosition: "top",
+		labelAlign: "start",
+		necessityIndicator: "icon"
+	}, providerProps, contextProps ?? {}, props), [
+		"size",
+		"variant",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"label",
+		"description",
+		"errorMessage",
+		"labelPosition",
+		"labelAlign",
+		"necessityIndicator",
+		"contextualHelp",
+		"prefix",
+		"suffix",
+		"slot",
+		"ref"
+	]);
+	const [isFocusWithin, setIsFocusWithin] = createSignal(false);
+	const prefixId = createUniqueId();
+	const suffixId = createUniqueId();
+	const adornmentIds = () => [local.prefix ? prefixId : null, local.suffix ? suffixId : null].filter(Boolean).join(" ");
+	const size = () => normalizeSearchFieldSize(local.size);
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const necessityIndicator = () => local.necessityIndicator ?? "icon";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRootRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const rootClassName = (_renderProps) => [
+		contextProps?.UNSAFE_className,
+		props.UNSAFE_className,
+		props.class,
+		searchFieldRoot({
+			size: size(),
+			labelPosition: labelPosition(),
+			isInForm
+		}, mergedStyles())
+	].filter(Boolean).join(" ");
+	const labelWrapperClass = () => searchFieldLabelWrapper({
+		size: size(),
+		labelPosition: labelPosition(),
+		labelAlign: labelAlign()
+	});
+	const labelClass = (renderProps) => searchFieldLabel({
+		...renderProps,
+		size: size(),
+		labelPosition: labelPosition(),
+		isStaticColor: false
+	});
+	const groupClass = (renderProps) => mergeStyles(searchFieldGroup({
+		...renderProps,
+		size: size(),
+		isFocusWithin: isFocusWithin()
+	}), searchFieldGroupEndPadding);
+	const inputClass = () => [searchFieldInput, hideNativeSearchCancelButton].join(" ");
+	const clearButtonClass = (renderProps) => clearButton({
+		...renderProps,
+		size: size(),
+		isStaticColor: false
+	});
+	const helpClass = (renderProps, isInvalid) => helpTextStyles({
+		...renderProps,
+		size: size(),
+		isInvalid
+	});
+	return <SearchField$1 {...headlessProps} label={local.label} description={local.description} errorMessage={local.errorMessage} ref={(element) => assignRootRef(element)} slot={local.slot ?? void 0} class={rootClassName} style={mergedUnsafeStyle()} data-size={size()} children={(renderProps) => <>
+          <Show when={local.label}>
+            <div class={labelWrapperClass()}>
+              <SearchFieldLabel class={labelClass(renderProps)}>
+                {local.label}
+                <Show when={renderProps.isRequired || necessityIndicator() === "label"}>
+                  <span class={noWrap}>
+                    &nbsp;
+                    <Show when={necessityIndicator() === "icon"} fallback={<span aria-hidden={renderProps.isRequired ? true : void 0}>
+                          {renderProps.isRequired ? "(required)" : "(optional)"}
+                        </span>}>
+                      <Asterisk size={size() === "S" ? "M" : size()} styles={requiredIcon} style={requiredIconStyle(size())} aria-hidden="true" />
+                    </Show>
+                  </span>
+                </Show>
+              </SearchFieldLabel>
+              <Show when={local.contextualHelp}>
+                <span data-slot="contextualHelp">{local.contextualHelp}</span>
+              </Show>
+            </div>
+          </Show>
+
+          <div role="group" class={groupClass(renderProps)} onPointerDown={(event) => {
+		if (event.pointerType === "mouse") focusFieldInput(event);
+	}} onTouchEnd={focusFieldInput} onFocusIn={() => setIsFocusWithin(true)} onFocusOut={(event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) setIsFocusWithin(false);
+	}} data-focused={isFocusWithin() ? "true" : void 0} data-disabled={renderProps.isDisabled ? "true" : void 0} data-invalid={renderProps.isInvalid ? "true" : void 0}>
+            <Show when={local.prefix} fallback={<CenterBaseline slot="icon" styles={searchIconWrapper}>
+                  <SearchIcon styles={searchIcon} />
+                </CenterBaseline>}>
+              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>
+            </Show>
+            <Show when={local.prefix || local.suffix} fallback={<SearchFieldInput class={inputClass()} />}>
+              <PrefixInputProvider context={SearchFieldContext$1} prefixId={adornmentIds()}>
+                <SearchFieldInput class={inputClass()} />
+              </PrefixInputProvider>
+            </Show>
+            <Show when={local.suffix}>
+              <FieldSuffix id={suffixId}>{local.suffix}</FieldSuffix>
+            </Show>
+            <Show when={!renderProps.isReadOnly}>
+              <SearchFieldClearButton class={clearButtonClass}>
+                <Cross size={size()} style={clearIconStyle(size())} />
+              </SearchFieldClearButton>
+            </Show>
+          </div>
+
+          <Show when={local.description && !renderProps.isInvalid}>
+            <SearchFieldDescription class={helpClass(renderProps, false)}>
+              {local.description}
+            </SearchFieldDescription>
+          </Show>
+
+          <Show when={local.errorMessage && renderProps.isInvalid}>
+            <SearchFieldError class={helpClass(renderProps, true)}>
+              <CenterBaseline>
+                <AlertTriangleIcon aria-hidden="true" styles={fieldErrorIcon} />
+              </CenterBaseline>
+              <span>{local.errorMessage}</span>
+            </SearchFieldError>
+          </Show>
+        </>} />;
+}
+//#endregion
+export { SearchField, SearchFieldContext };
+
+//# sourceMappingURL=index.jsx.map