@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/_chunk/contextualhelp.jsx

@@ -0,0 +1,164 @@
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
+import { t as s2IntlStrings } from "./intl.jsx";
+import { t as ActionButton } from "./ActionButton.jsx";
+import { r as createIcon } from "./spectrum-icon.jsx";
+import { c as TextContext, f as HeadingContext, i as FooterContext, n as ContentContext } from "./text.jsx";
+import { t as InfoCircleIcon } from "./InfoCircleIcon.jsx";
+import { Popover as Popover$1, PopoverTrigger as PopoverTrigger$1 } from "../popover/index.jsx";
+import { createContext, createUniqueId, mergeProps, splitProps, useContext } from "solid-js";
+import { createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
+import { MenuTriggerContext } from "@proyecto-viviana/solidaria-components";
+//#region src/icon/s2wf-icons/HelpCircleIcon.tsx
+function HelpCircleIconSvg(props) {
+	const { class: className, ...rest } = props;
+	return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" {...rest} class={className}>
+      <path d="m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z" fill="var(--iconPrimary, #222)" />
+      <path d="m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z" fill="var(--iconPrimary, #222)" />
+      <path d="m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z" fill="var(--iconPrimary, #222)" />
+    </svg>;
+}
+const HelpCircleIcon = createIcon(HelpCircleIconSvg);
+//#endregion
+//#region src/contextualhelp/index.tsx
+const ContextualHelpContext = createContext(null);
+const contextualHelpFrame = " NOBje7c151 ZOBje7c151 Th151 Qh151 Sh151 Rh151 _oa151 Fb151";
+const contextualHelpInner = " sd151 _ta151 _ub151 K40ub4c151 _oa151 _Le151 _Na151 Pa151 od151 nd151 kd151 jd151 Th151 Qh151 Sh151 Rh151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151";
+const contextualHelpInnerStyle = { margin: "-24px" };
+const contextualHelpHeading = " uiWD3ad151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-e151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pHKLAu151 Jy151 Gv151 Iy151 Hy151";
+const contextualHelpText = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151";
+const contextualHelpFooter = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 JC151";
+/**
+* A popover with contextual help sizing for unavailable menu item affordances.
+*/ function ContextualHelpPopover(props) {
+	const [local, popoverProps] = splitProps(props, ["children", "class"]);
+	const menuTriggerContext = useContext(MenuTriggerContext);
+	const titleId = createUniqueId();
+	const menuTriggerMenuProps = () => menuTriggerContext?.menuProps;
+	const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;
+	const ariaLabelledBy = () => popoverProps["aria-labelledby"] ?? (popoverProps["aria-label"] ? void 0 : titleId);
+	const headingContext = { slots: {
+		default: { styles: contextualHelpHeading },
+		title: {
+			id: titleId,
+			level: 2,
+			styles: contextualHelpHeading
+		}
+	} };
+	const textContext = { slots: { default: {
+		styles: contextualHelpText,
+		"data-rsp-slot": "text"
+	} } };
+	const contentContext = { styles: contextualHelpText };
+	const footerContext = { styles: contextualHelpFooter };
+	return <Popover$1 {...popoverProps} id={popoverId()} aria-labelledby={ariaLabelledBy()} hideArrow trigger="SubmenuTrigger" placement={popoverProps.placement ?? "end top"} offset={popoverProps.offset ?? -2} crossOffset={popoverProps.crossOffset ?? -8} padding="none" class={local.class}>
+      <div class={contextualHelpFrame}>
+        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
+          <TextContext.Provider value={textContext}>
+            <ContentContext.Provider value={contentContext}>
+              <FooterContext.Provider value={footerContext}>
+                <HeadingContext.Provider value={headingContext}>
+                  {local.children}
+                </HeadingContext.Provider>
+              </FooterContext.Provider>
+            </ContentContext.Provider>
+          </TextContext.Provider>
+        </div>
+      </div>
+    </Popover$1>;
+}
+function ContextualHelp(props) {
+	const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);
+	const merged = mergeProps(contextProps ?? {}, props);
+	const [local, popoverProps] = splitProps(merged, [
+		"children",
+		"content",
+		"triggerLabel",
+		"variant",
+		"size",
+		"defaultOpen",
+		"isOpen",
+		"onOpenChange",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"id",
+		"ref",
+		"slot",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const titleId = createUniqueId();
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	const variant = () => local.variant ?? "help";
+	const variantLabel = () => stringFormatter().format(`contextualhelp.${variant()}`);
+	const triggerLabel = () => {
+		const explicitLabel = local.triggerLabel ?? local["aria-label"];
+		return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();
+	};
+	const icon = () => variant() === "info" ? <InfoCircleIcon /> : <HelpCircleIcon />;
+	const content = () => local.content ?? local.children;
+	const triggerDomProps = () => filterDOMProps(merged, { labelable: true });
+	const triggerClassName = () => [
+		contextProps?.UNSAFE_className,
+		contextProps?.class,
+		props.UNSAFE_className,
+		props.class
+	].filter(Boolean).join(" ");
+	const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const triggerUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const triggerRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const headingContext = { slots: {
+		default: { styles: contextualHelpHeading },
+		title: {
+			id: titleId,
+			level: 2,
+			styles: contextualHelpHeading
+		}
+	} };
+	const textContext = { slots: { default: {
+		styles: contextualHelpText,
+		"data-rsp-slot": "text"
+	} } };
+	const contentContext = { styles: contextualHelpText };
+	const footerContext = { styles: contextualHelpFooter };
+	const popoverTriggerProps = {
+		get defaultOpen() {
+			return local.defaultOpen;
+		},
+		get isOpen() {
+			return local.isOpen;
+		},
+		get onOpenChange() {
+			return local.onOpenChange;
+		}
+	};
+	return <PopoverTrigger$1 {...popoverTriggerProps}>
+      <ActionButton {...triggerDomProps()} id={local.id} aria-label={triggerLabel()} aria-labelledby={local["aria-labelledby"]} aria-describedby={local["aria-describedby"]} aria-details={local["aria-details"]} aria-haspopup="dialog" ref={(element) => {
+		triggerRef(element);
+	}} size={local.size ?? "XS"} isQuiet styles={triggerStyles()} UNSAFE_className={triggerClassName()} UNSAFE_style={triggerUnsafeStyle()}>
+        {icon()}
+      </ActionButton>
+      <Popover$1 {...popoverProps} aria-labelledby={titleId} hideArrow placement={popoverProps.placement ?? "bottom start"} containerPadding={popoverProps.containerPadding ?? 8} offset={8} shouldFlip={popoverProps.shouldFlip ?? true} padding="none">
+        <div class={contextualHelpFrame}>
+          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
+            <TextContext.Provider value={textContext}>
+              <ContentContext.Provider value={contentContext}>
+                <FooterContext.Provider value={footerContext}>
+                  <HeadingContext.Provider value={headingContext}>
+                    {content()}
+                  </HeadingContext.Provider>
+                </FooterContext.Provider>
+              </ContentContext.Provider>
+            </TextContext.Provider>
+          </div>
+        </div>
+      </Popover$1>
+    </PopoverTrigger$1>;
+}
+//#endregion
+export { ContextualHelpContext as n, ContextualHelpPopover as r, ContextualHelp as t };
+
+//# sourceMappingURL=contextualhelp.jsx.map

package/dist/_chunk/contextualhelp.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextualhelp.jsx","names":[],"sources":["../../src/icon/s2wf-icons/HelpCircleIcon.tsx","../../src/contextualhelp/index.tsx"],"sourcesContent":["/*\n * Auto-generated from vendored React Spectrum S2 icon sources.\n * Do not edit by hand.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createIcon } from \"../spectrum-icon\";\n\nfunction HelpCircleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Element {\n  const { class: className, ...rest } = props;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      {...rest}\n      class={className}\n    >\n      <path\n        d=\"m9.9881,15.52679c-.23065.00813-.45538-.07387-.62661-.22862-.33033-.36505-.33033-.92102,0-1.28607.16935-.15851.39483-.24308.62664-.23504.23635-.00948.46589.08035.63302.24775.16207.1679.24916.39432.24137.62755.01238.23497-.06959.46515-.2277.6394-.17358.16474-.40786.24988-.64671.23503Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n      <path\n        d=\"m9.99219,12.70605c-.41406,0-.75-.33594-.75-.75,0-1.02246.07031-1.71387,1.03906-2.68262.78516-.78613.91797-1.10156.91797-1.65137,0-.20996-.06641-1.25781-1.37402-1.25781-1.36523,0-1.51074,1.15625-1.52637,1.3877-.02637.41309-.39258.7207-.79688.69922-.41406-.02734-.72656-.38379-.69922-.79688.06348-.96484.77637-2.79004,3.02246-2.79004,1.88672,0,2.87402,1.3877,2.87402,2.75781,0,1.14355-.45703,1.81055-1.35742,2.71191-.57617.57617-.59961.81152-.59961,1.62207,0,.41406-.33594.75-.75.75Z\"\n        fill=\"var(--iconPrimary, #222)\"\n      />\n    </svg>\n  );\n}\n\nexport type HelpCircleIconProps = JSX.SvgSVGAttributes<SVGSVGElement>;\nexport const HelpCircleIcon = createIcon(HelpCircleIconSvg);\nexport default HelpCircleIcon;\n","import {\n  type JSX,\n  createContext,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { MenuTriggerContext } from \"@proyecto-viviana/solidaria-components\";\nimport { createStringFormatter, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { Popover, type PopoverProps, type PopoverTriggerProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { ActionButton, type ActionButtonSize } from \"../button/ActionButton\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, FooterContext, HeadingContext, TextContext } from \"../text\";\nimport { HelpCircleIcon } from \"../icon/s2wf-icons/HelpCircleIcon\";\nimport { InfoCircleIcon } from \"../icon/s2wf-icons/InfoCircleIcon\";\nimport { s2IntlStrings, type S2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ContextualHelpVariant = \"help\" | \"info\";\nexport type ContextualHelpSize = Extract<ActionButtonSize, \"XS\" | \"S\">;\n\nexport interface ContextualHelpStyleProps {\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n}\n\nexport interface ContextualHelpProps extends Omit<\n  PopoverProps,\n  | \"children\"\n  | \"class\"\n  | \"defaultOpen\"\n  | \"isOpen\"\n  | \"onOpenChange\"\n  | \"padding\"\n  | \"hideArrow\"\n  | \"size\"\n  | \"slot\"\n  | \"trigger\"\n> {\n  /** Contextual help popover content. */\n  children?: JSX.Element;\n  /** Backward-compatible content alias. Prefer children for S2 parity. */\n  content?: JSX.Element;\n  /** Accessible label for the icon trigger button. */\n  triggerLabel?: string;\n  /** Indicates whether contents are informative or provide help. @default 'help' */\n  variant?: ContextualHelpVariant;\n  /** Size of the trigger ActionButton. @default 'XS' */\n  size?: ContextualHelpSize;\n  /** Whether the overlay is open by default (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Whether the overlay is open (controlled). */\n  isOpen?: boolean;\n  /** Handler called when the overlay's open state changes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Spectrum-defined generated classes for the trigger. */\n  styles?: StyleString;\n  /** Additional CSS class name for the trigger. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles for the trigger. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible trigger class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Id of the element that provides detailed information. */\n  \"aria-details\"?: string;\n  /** Slotted context key. */\n  slot?: string | null;\n  /** Ref for the icon trigger button. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport interface ContextualHelpPopoverProps extends Omit<\n  PopoverProps,\n  \"children\" | \"class\" | \"padding\" | \"hideArrow\" | \"size\"\n> {\n  /** Contextual help popover content. */\n  children: JSX.Element;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport const ContextualHelpContext = createContext<SpectrumContextValue<ContextualHelpProps>>(null);\n\nconst contextualHelpFrame = style({\n  minWidth: 268,\n  width: 268,\n  padding: 24,\n  boxSizing: \"border-box\",\n  // Upstream `wrappingDiv` (ContextualHelp.tsx) sets `height: 'full'` so the\n  // frame fills the popover surface; the port had dropped it (a self-inflicted\n  // divergence D1 catches on the frame's computed height).\n  height: \"full\",\n});\n\nconst contextualHelpInner = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  maxHeight: \"inherit\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"none\",\n  overflow: \"auto\",\n  borderRadius: \"none\",\n  padding: 24,\n  // Upstream's inner is `mergeStyles(dialogInner, {borderRadius:'none', margin,\n  // padding:24})`; `dialogInner` (Dialog.tsx) carries only `fontFamily: 'sans'`\n  // — NOT a `font: body-sm` shorthand and NO explicit `color`. The body copy's\n  // `body-sm` font + neutral color are delegated to the Content/Text/Footer\n  // contexts (and the inherited theme neutral), exactly as upstream. The port's\n  // `font:\"body-sm\"`+`color:\"neutral\"` on the inner div were self-inflicted\n  // (D1 catches the differing computed font/color on the inner element).\n  fontFamily: \"sans\",\n});\n\nconst contextualHelpInnerStyle: JSX.CSSProperties = {\n  // React S2 uses calc(self(paddingTop) * -1); the local style macro does not emit\n  // negative margin classes for this component, so keep the computed margin explicit.\n  margin: \"-24px\",\n};\n\nconst contextualHelpHeading = style({\n  font: \"heading-xs\",\n  margin: 0,\n  marginBottom: 8,\n});\n\nconst contextualHelpText = style({\n  font: \"body-sm\",\n});\n\nconst contextualHelpFooter = style({\n  font: \"body-sm\",\n  marginTop: 16,\n});\n\n/**\n * A popover with contextual help sizing for unavailable menu item affordances.\n */\nexport function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {\n  const [local, popoverProps] = splitProps(props, [\"children\", \"class\"]);\n  const menuTriggerContext = useContext(MenuTriggerContext);\n  const titleId = createUniqueId();\n  const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;\n  const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;\n  const ariaLabelledBy = () =>\n    popoverProps[\"aria-labelledby\"] ?? (popoverProps[\"aria-label\"] ? undefined : titleId);\n  // Upstream `HeadingContext` (ContextualHelp.tsx): the DEFAULT slot carries\n  // styles ONLY — no id, no level — so a headless `<Heading>` (no slot) renders\n  // at the RAC default level (h3) and does NOT name the dialog (combobox/picker\n  // get the name from the field label). Only the explicit `title` slot (the\n  // unavailable-menu-item case) mints the id + level 2 that names the dialog.\n  // The port had put `{id, level:2}` on the default slot too — a self-inflicted\n  // divergence (it named the dialog and forced h2 in canonical default usage).\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n\n  return (\n    <Popover\n      {...popoverProps}\n      id={popoverId()}\n      aria-labelledby={ariaLabelledBy()}\n      hideArrow\n      trigger=\"SubmenuTrigger\"\n      placement={popoverProps.placement ?? \"end top\"}\n      offset={popoverProps.offset ?? -2}\n      crossOffset={popoverProps.crossOffset ?? -8}\n      padding=\"none\"\n      class={local.class}\n    >\n      <div class={contextualHelpFrame}>\n        <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n          <TextContext.Provider value={textContext}>\n            <ContentContext.Provider value={contentContext}>\n              <FooterContext.Provider value={footerContext}>\n                <HeadingContext.Provider value={headingContext}>\n                  {local.children}\n                </HeadingContext.Provider>\n              </FooterContext.Provider>\n            </ContentContext.Provider>\n          </TextContext.Provider>\n        </div>\n      </div>\n    </Popover>\n  );\n}\n\nexport function ContextualHelp(props: ContextualHelpProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ContextualHelpContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ContextualHelpProps;\n  const [local, popoverProps] = splitProps(merged, [\n    \"children\",\n    \"content\",\n    \"triggerLabel\",\n    \"variant\",\n    \"size\",\n    \"defaultOpen\",\n    \"isOpen\",\n    \"onOpenChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const titleId = createUniqueId();\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const variant = () => local.variant ?? \"help\";\n  const variantLabel = () =>\n    stringFormatter().format(`contextualhelp.${variant()}` as keyof S2IntlStrings);\n  const triggerLabel = () => {\n    const explicitLabel = local.triggerLabel ?? local[\"aria-label\"];\n    return explicitLabel ? `${explicitLabel} ${variantLabel()}` : variantLabel();\n  };\n  const icon = () => (variant() === \"info\" ? <InfoCircleIcon /> : <HelpCircleIcon />);\n  const content = () => local.content ?? local.children;\n  const triggerDomProps = () =>\n    filterDOMProps(merged as Record<string, unknown>, { labelable: true });\n  const triggerClassName = () =>\n    [contextProps?.UNSAFE_className, contextProps?.class, props.UNSAFE_className, props.class]\n      .filter(Boolean)\n      .join(\" \");\n  const triggerStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const triggerUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const triggerRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLButtonElement> } | null)?.ref,\n    props.ref,\n  );\n  // Upstream default heading slot = styles only (no id/level); only the explicit\n  // `title` slot names the dialog. See ContextualHelpPopover above.\n  const headingContext = {\n    slots: {\n      default: {\n        styles: contextualHelpHeading,\n      },\n      title: {\n        id: titleId,\n        level: 2 as const,\n        styles: contextualHelpHeading,\n      },\n    },\n  };\n  const textContext = {\n    slots: {\n      default: {\n        styles: contextualHelpText,\n        \"data-rsp-slot\": \"text\",\n      },\n    },\n  };\n  const contentContext = {\n    styles: contextualHelpText,\n  };\n  const footerContext = {\n    styles: contextualHelpFooter,\n  };\n  const popoverTriggerProps: Partial<PopoverTriggerProps> = {\n    get defaultOpen() {\n      return local.defaultOpen;\n    },\n    get isOpen() {\n      return local.isOpen;\n    },\n    get onOpenChange() {\n      return local.onOpenChange;\n    },\n  };\n\n  return (\n    <PopoverTrigger {...popoverTriggerProps}>\n      <ActionButton\n        {...triggerDomProps()}\n        id={local.id}\n        aria-label={triggerLabel()}\n        aria-labelledby={local[\"aria-labelledby\"]}\n        aria-describedby={local[\"aria-describedby\"]}\n        aria-details={local[\"aria-details\"]}\n        aria-haspopup=\"dialog\"\n        ref={(element: HTMLButtonElement) => {\n          triggerRef(element);\n        }}\n        size={local.size ?? \"XS\"}\n        isQuiet\n        styles={triggerStyles()}\n        UNSAFE_className={triggerClassName()}\n        UNSAFE_style={triggerUnsafeStyle()}\n      >\n        {icon()}\n      </ActionButton>\n      <Popover\n        {...popoverProps}\n        aria-labelledby={titleId}\n        hideArrow\n        placement={popoverProps.placement ?? \"bottom start\"}\n        containerPadding={popoverProps.containerPadding ?? 8}\n        offset={8}\n        shouldFlip={popoverProps.shouldFlip ?? true}\n        padding=\"none\"\n      >\n        <div class={contextualHelpFrame}>\n          <div class={contextualHelpInner} style={contextualHelpInnerStyle}>\n            <TextContext.Provider value={textContext}>\n              <ContentContext.Provider value={contentContext}>\n                <FooterContext.Provider value={footerContext}>\n                  <HeadingContext.Provider value={headingContext}>\n                    {content()}\n                  </HeadingContext.Provider>\n                </FooterContext.Provider>\n              </ContentContext.Provider>\n            </TextContext.Provider>\n          </div>\n        </div>\n      </Popover>\n    </PopoverTrigger>\n  );\n}\n"],"mappings":"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"}

package/dist/_chunk/createMediaQuery.js

@@ -0,0 +1,34 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+//#region src/utils/createMediaQuery.ts
+/**
+* createMediaQuery — a SolidJS reactive media-query primitive.
+*
+* Based on @react-spectrum/utils' useMediaQuery: subscribes to
+* `window.matchMedia` and updates when the query's match state changes. Returns
+* `false` during SSR (and before mount) so the server and first client render
+* agree, then resolves to the real value once mounted on the client.
+*/
+function createMediaQuery(query) {
+	const supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+	const [matches, setMatches] = createSignal(false);
+	onMount(() => {
+		if (!supportsMatchMedia) return;
+		const mq = window.matchMedia(query);
+		setMatches(mq.matches);
+		const onChange = (event) => {
+			setMatches(event.matches);
+		};
+		if (typeof mq.addEventListener === "function") {
+			mq.addEventListener("change", onChange);
+			onCleanup(() => mq.removeEventListener("change", onChange));
+		} else {
+			mq.addListener(onChange);
+			onCleanup(() => mq.removeListener(onChange));
+		}
+	});
+	return matches;
+}
+//#endregion
+export { createMediaQuery as t };
+
+//# sourceMappingURL=createMediaQuery.js.map

package/dist/_chunk/createMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMediaQuery.js","names":[],"sources":["../../src/utils/createMediaQuery.ts"],"sourcesContent":["/**\n * createMediaQuery — a SolidJS reactive media-query primitive.\n *\n * Based on @react-spectrum/utils' useMediaQuery: subscribes to\n * `window.matchMedia` and updates when the query's match state changes. Returns\n * `false` during SSR (and before mount) so the server and first client render\n * agree, then resolves to the real value once mounted on the client.\n */\nimport { createSignal, onCleanup, onMount } from \"solid-js\";\n\nexport function createMediaQuery(query: string): () => boolean {\n  const supportsMatchMedia =\n    typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n  const [matches, setMatches] = createSignal(false);\n\n  onMount(() => {\n    if (!supportsMatchMedia) {\n      return;\n    }\n\n    const mq = window.matchMedia(query);\n    setMatches(mq.matches);\n\n    const onChange = (event: MediaQueryListEvent): void => {\n      setMatches(event.matches);\n    };\n\n    if (typeof mq.addEventListener === \"function\") {\n      mq.addEventListener(\"change\", onChange);\n      onCleanup(() => mq.removeEventListener(\"change\", onChange));\n    } else {\n      // Safari < 14 only supports the deprecated MediaQueryList listener API.\n      mq.addListener(onChange);\n      onCleanup(() => mq.removeListener(onChange));\n    }\n  });\n\n  return matches;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,qBACJ,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CAEhE,MAAM,CAAC,SAAS,cAAc,aAAa,KAAK;CAEhD,cAAc;EACZ,IAAI,CAAC,oBACH;EAGF,MAAM,KAAK,OAAO,WAAW,KAAK;EAClC,WAAW,GAAG,OAAO;EAErB,MAAM,YAAY,UAAqC;GACrD,WAAW,MAAM,OAAO;EAC1B;EAEA,IAAI,OAAO,GAAG,qBAAqB,YAAY;GAC7C,GAAG,iBAAiB,UAAU,QAAQ;GACtC,gBAAgB,GAAG,oBAAoB,UAAU,QAAQ,CAAC;EAC5D,OAAO;GAEL,GAAG,YAAY,QAAQ;GACvB,gBAAgB,GAAG,eAAe,QAAQ,CAAC;EAC7C;CACF,CAAC;CAED,OAAO;AACT"}

package/dist/_chunk/createMediaQuery.jsx

@@ -0,0 +1,34 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+//#region src/utils/createMediaQuery.ts
+/**
+* createMediaQuery — a SolidJS reactive media-query primitive.
+*
+* Based on @react-spectrum/utils' useMediaQuery: subscribes to
+* `window.matchMedia` and updates when the query's match state changes. Returns
+* `false` during SSR (and before mount) so the server and first client render
+* agree, then resolves to the real value once mounted on the client.
+*/
+function createMediaQuery(query) {
+	const supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
+	const [matches, setMatches] = createSignal(false);
+	onMount(() => {
+		if (!supportsMatchMedia) return;
+		const mq = window.matchMedia(query);
+		setMatches(mq.matches);
+		const onChange = (event) => {
+			setMatches(event.matches);
+		};
+		if (typeof mq.addEventListener === "function") {
+			mq.addEventListener("change", onChange);
+			onCleanup(() => mq.removeEventListener("change", onChange));
+		} else {
+			mq.addListener(onChange);
+			onCleanup(() => mq.removeListener(onChange));
+		}
+	});
+	return matches;
+}
+//#endregion
+export { createMediaQuery as t };
+
+//# sourceMappingURL=createMediaQuery.jsx.map

package/dist/_chunk/createMediaQuery.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMediaQuery.jsx","names":[],"sources":["../../src/utils/createMediaQuery.ts"],"sourcesContent":["/**\n * createMediaQuery — a SolidJS reactive media-query primitive.\n *\n * Based on @react-spectrum/utils' useMediaQuery: subscribes to\n * `window.matchMedia` and updates when the query's match state changes. Returns\n * `false` during SSR (and before mount) so the server and first client render\n * agree, then resolves to the real value once mounted on the client.\n */\nimport { createSignal, onCleanup, onMount } from \"solid-js\";\n\nexport function createMediaQuery(query: string): () => boolean {\n  const supportsMatchMedia =\n    typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n  const [matches, setMatches] = createSignal(false);\n\n  onMount(() => {\n    if (!supportsMatchMedia) {\n      return;\n    }\n\n    const mq = window.matchMedia(query);\n    setMatches(mq.matches);\n\n    const onChange = (event: MediaQueryListEvent): void => {\n      setMatches(event.matches);\n    };\n\n    if (typeof mq.addEventListener === \"function\") {\n      mq.addEventListener(\"change\", onChange);\n      onCleanup(() => mq.removeEventListener(\"change\", onChange));\n    } else {\n      // Safari < 14 only supports the deprecated MediaQueryList listener API.\n      mq.addListener(onChange);\n      onCleanup(() => mq.removeListener(onChange));\n    }\n  });\n\n  return matches;\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,qBACJ,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CAEhE,MAAM,CAAC,SAAS,cAAc,aAAa,KAAK;CAEhD,cAAc;EACZ,IAAI,CAAC,oBACH;EAGF,MAAM,KAAK,OAAO,WAAW,KAAK;EAClC,WAAW,GAAG,OAAO;EAErB,MAAM,YAAY,UAAqC;GACrD,WAAW,MAAM,OAAO;EAC1B;EAEA,IAAI,OAAO,GAAG,qBAAqB,YAAY;GAC7C,GAAG,iBAAiB,UAAU,QAAQ;GACtC,gBAAgB,GAAG,oBAAoB,UAAU,QAAQ,CAAC;EAC5D,OAAO;GAEL,GAAG,YAAY,QAAQ;GACvB,gBAAgB,GAAG,eAAe,QAAQ,CAAC;EAC7C;CACF,CAAC;CAED,OAAO;AACT"}