@mediquo/medicore 0.1.0

package/dist/components/menu/menu.js

@@ -0,0 +1,250 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+import { cva } from "class-variance-authority";
+import { createContext, useContext } from "react";
+import { DotsHorizontalIcon } from "../../icons/generated/dots-horizontal.js";
+import { cn } from "../../lib/cn.js";
+import { Modal, ModalContent, ModalClose, ModalTrigger } from "../modal/modal.js";
+import { useMediaQuery, DESKTOP_MEDIA_QUERY } from "../modal/use-media-query.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Divider } from "../divider/divider.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const MenuLayoutContext = createContext(null);
+function useMenuLayout(part) {
+  const layout = useContext(MenuLayoutContext);
+  if (layout === null) {
+    throw new Error(`MediCore: <${part}> must be used inside <Menu>.`);
+  }
+  return layout;
+}
+function Menu({
+  layout,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children
+}) {
+  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
+  const resolvedLayout = layout ?? (isDesktop ? "popover" : "sheet");
+  return /* @__PURE__ */ jsx(MenuLayoutContext.Provider, { value: resolvedLayout, children: resolvedLayout === "sheet" ? /* @__PURE__ */ jsx(
+    Modal,
+    {
+      layout: "sheet",
+      open,
+      defaultOpen,
+      onOpenChange,
+      children
+    }
+  ) : /* @__PURE__ */ jsx(
+    Menu$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      children
+    }
+  ) });
+}
+function MenuTrigger({
+  render,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const layout = useMenuLayout("MenuTrigger");
+  const labels = useMediCoreLabels();
+  const Trigger = layout === "sheet" ? ModalTrigger : Menu$1.Trigger;
+  if (render === void 0 && children === void 0) {
+    return /* @__PURE__ */ jsx(
+      Trigger,
+      {
+        "data-slot": "menu-trigger",
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            icon: /* @__PURE__ */ jsx(DotsHorizontalIcon, {}),
+            "aria-label": ariaLabel ?? labels.moreOptions
+          }
+        ),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Trigger,
+    {
+      "data-slot": "menu-trigger",
+      "aria-label": ariaLabel,
+      render,
+      ...props,
+      children
+    }
+  );
+}
+function MenuContent({
+  children,
+  className,
+  side = "bottom",
+  align = "end",
+  label
+}) {
+  const layout = useMenuLayout("MenuContent");
+  const labels = useMediCoreLabels();
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsx(ModalContent, { "aria-label": label ?? labels.moreOptions, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "menu-content",
+        className: cn("-mx-3 flex flex-col", className),
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(
+    Menu$1.Positioner,
+    {
+      side,
+      align,
+      sideOffset: 4,
+      className: "z-50 outline-hidden",
+      children: /* @__PURE__ */ jsx(
+        Menu$1.Popup,
+        {
+          "data-slot": "menu-content",
+          className: cn(
+            // The shadow separates it from the content below; the border, where the
+            // shadow doesn't show (dark backgrounds, poor screens).
+            "flex w-60 flex-col rounded-lg border border-border-subtle bg-background p-1 shadow-md outline-hidden",
+            "origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out",
+            "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+            "motion-reduce:transition-none",
+            className
+          ),
+          children
+        }
+      )
+    }
+  ) });
+}
+const menuItemVariants = cva(
+  [
+    "flex w-full shrink-0 cursor-pointer select-none items-center gap-3 rounded-md px-3 text-left text-label-default",
+    "outline-hidden focus-visible:outline-2 focus-visible:outline-border-focus focus-visible:outline-solid focus-visible:-outline-offset-2",
+    "[&_svg]:size-icon-md [&_svg]:shrink-0",
+    "data-disabled:cursor-not-allowed data-disabled:text-text-disabled disabled:cursor-not-allowed disabled:text-text-disabled"
+  ],
+  {
+    variants: {
+      type: {
+        default: "text-text-primary",
+        destructive: "text-text-error"
+      },
+      layout: {
+        popover: "h-control-md",
+        sheet: "h-12"
+      }
+    },
+    // Base UI marks the pointer/keyboard position with data-highlighted in the popover;
+    // the sheet's rows are plain buttons, so they use :hover.
+    compoundVariants: [
+      {
+        type: "default",
+        layout: "popover",
+        className: "not-data-disabled:data-highlighted:bg-surface"
+      },
+      {
+        type: "destructive",
+        layout: "popover",
+        className: "not-data-disabled:data-highlighted:bg-error-subtle"
+      },
+      {
+        type: "default",
+        layout: "sheet",
+        className: "enabled:hover:bg-surface"
+      },
+      {
+        type: "destructive",
+        layout: "sheet",
+        className: "enabled:hover:bg-error-subtle"
+      }
+    ],
+    defaultVariants: {
+      type: "default",
+      layout: "popover"
+    }
+  }
+);
+function MenuItem({
+  children,
+  icon,
+  type = "default",
+  disabled = false,
+  onClick,
+  closeOnClick = true,
+  className
+}) {
+  const layout = useMenuLayout("MenuItem");
+  const classes = cn(menuItemVariants({ type, layout }), className);
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsxs(
+      ModalClose,
+      {
+        "data-slot": "menu-item",
+        "data-type": type,
+        disabled,
+        className: classes,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!closeOnClick) {
+            event.preventBaseUIHandler();
+          }
+        },
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Menu$1.Item,
+    {
+      "data-slot": "menu-item",
+      "data-type": type,
+      disabled,
+      closeOnClick,
+      onClick,
+      className: classes,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
+      ]
+    }
+  );
+}
+function MenuSeparator({
+  className
+}) {
+  const layout = useMenuLayout("MenuSeparator");
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsx(Divider, { className: cn("my-1", className) });
+  }
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      "data-slot": "menu-separator",
+      className: cn("my-1 h-px shrink-0 bg-border-subtle", className)
+    }
+  );
+}
+export {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger
+};
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { cva } from \"class-variance-authority\";\nimport {\n  type CSSProperties,\n  createContext,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n} from \"react\";\n\nimport { DotsHorizontalIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Divider } from \"../divider\";\nimport { IconButton } from \"../icon-button\";\nimport {\n  Modal,\n  type ModalChangeEventDetails,\n  ModalClose,\n  ModalContent,\n  ModalTrigger,\n} from \"../modal/modal\";\nimport { DESKTOP_MEDIA_QUERY, useMediaQuery } from \"../modal/use-media-query\";\n\n/**\n * `popover`: the floating 240px menu next to the trigger. `sheet`: a bottom sheet\n * (`Modal layout=\"sheet\"`) with the same options in 48px rows.\n */\nexport type MenuLayout = \"popover\" | \"sheet\";\n\nexport type MenuChangeEventDetails =\n  | BaseMenu.Root.ChangeEventDetails\n  | ModalChangeEventDetails;\n\nconst MenuLayoutContext = createContext<MenuLayout | null>(null);\n\nfunction useMenuLayout(part: string): MenuLayout {\n  const layout = useContext(MenuLayoutContext);\n  if (layout === null) {\n    throw new Error(`MediCore: <${part}> must be used inside <Menu>.`);\n  }\n  return layout;\n}\n\nexport interface MenuProps {\n  /**\n   * Leave it unset and it follows the screen: a sheet below `md` (a 240px menu next\n   * to the thumb covers what the person is looking at) and a popover from `md` up.\n   */\n  layout?: MenuLayout;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: MenuChangeEventDetails) => void;\n  /** Disables the whole menu (popover only). */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Contextual menu: what the \"⋯\" of a Card, an appointment or the chat header opens.\n * It is where everything that isn't the block's single primary action lives.\n *\n * Up to four options and, if there is one, the destructive option LAST, after a\n * `MenuSeparator` — never in the middle, where a thumb going down the list would\n * cross \"Cancelar cita\" on its way to \"Compartir\". If you need more than five, those\n * things deserve their own screen.\n *\n * Keyboard: arrow keys move between options, Enter picks, Escape closes and focus\n * returns to the trigger.\n */\nexport function Menu({\n  layout,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  children,\n}: MenuProps): React.JSX.Element {\n  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n  const resolvedLayout: MenuLayout =\n    layout ?? (isDesktop ? \"popover\" : \"sheet\");\n\n  return (\n    <MenuLayoutContext.Provider value={resolvedLayout}>\n      {resolvedLayout === \"sheet\" ? (\n        <Modal\n          layout=\"sheet\"\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n        >\n          {children}\n        </Modal>\n      ) : (\n        <BaseMenu.Root\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          disabled={disabled}\n        >\n          {children}\n        </BaseMenu.Root>\n      )}\n    </MenuLayoutContext.Provider>\n  );\n}\n\nexport interface MenuTriggerProps\n  extends Omit<\n    BaseMenu.Trigger.Props,\n    | \"className\"\n    | \"style\"\n    | \"render\"\n    | \"handle\"\n    | \"payload\"\n    | \"openOnHover\"\n    | \"delay\"\n    | \"closeDelay\"\n  > {\n  className?: string;\n  style?: CSSProperties;\n  /** Your own trigger element. Without `render` and `children` you get the \"⋯\" button. */\n  render?: ReactElement;\n}\n\n/**\n * Opens the menu. With no `children` or `render` it is the \"⋯\" ghost icon button,\n * named with the MediCore `moreOptions` label — pass `aria-label` to be more\n * specific (\"Opciones de la cita\").\n */\nexport function MenuTrigger({\n  render,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: MenuTriggerProps): React.JSX.Element {\n  const layout = useMenuLayout(\"MenuTrigger\");\n  const labels = useMediCoreLabels();\n  const Trigger = layout === \"sheet\" ? ModalTrigger : BaseMenu.Trigger;\n\n  if (render === undefined && children === undefined) {\n    return (\n      <Trigger\n        data-slot=\"menu-trigger\"\n        render={\n          <IconButton\n            variant=\"ghost\"\n            icon={<DotsHorizontalIcon />}\n            aria-label={ariaLabel ?? labels.moreOptions}\n          />\n        }\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Trigger\n      data-slot=\"menu-trigger\"\n      aria-label={ariaLabel}\n      render={render}\n      {...props}\n    >\n      {children}\n    </Trigger>\n  );\n}\n\nexport interface MenuContentProps {\n  children?: ReactNode;\n  className?: string;\n  /** Popover only: which side of the trigger it opens on. Flips when there is no room. */\n  side?: \"top\" | \"bottom\";\n  /** Popover only. `end` by default: the \"⋯\" usually sits at the right edge. */\n  align?: \"start\" | \"center\" | \"end\";\n  /** Sheet only: accessible name of the sheet. Defaults to the `moreOptions` label. */\n  label?: string;\n}\n\n/** The list of options. 240px popover with `shadow-md` and a border, or a bottom sheet. */\nexport function MenuContent({\n  children,\n  className,\n  side = \"bottom\",\n  align = \"end\",\n  label,\n}: MenuContentProps): React.JSX.Element {\n  const layout = useMenuLayout(\"MenuContent\");\n  const labels = useMediCoreLabels();\n\n  if (layout === \"sheet\") {\n    return (\n      <ModalContent aria-label={label ?? labels.moreOptions}>\n        <div\n          data-slot=\"menu-content\"\n          className={cn(\"-mx-3 flex flex-col\", className)}\n        >\n          {children}\n        </div>\n      </ModalContent>\n    );\n  }\n\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner\n        side={side}\n        align={align}\n        sideOffset={4}\n        className=\"z-50 outline-hidden\"\n      >\n        <BaseMenu.Popup\n          data-slot=\"menu-content\"\n          className={cn(\n            // The shadow separates it from the content below; the border, where the\n            // shadow doesn't show (dark backgrounds, poor screens).\n            \"flex w-60 flex-col rounded-lg border border-border-subtle bg-background p-1 shadow-md outline-hidden\",\n            \"origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out\",\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0\",\n            \"motion-reduce:transition-none\",\n            className,\n          )}\n        >\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n}\n\nconst menuItemVariants = cva(\n  [\n    \"flex w-full shrink-0 cursor-pointer select-none items-center gap-3 rounded-md px-3 text-left text-label-default\",\n    \"outline-hidden focus-visible:outline-2 focus-visible:outline-border-focus focus-visible:outline-solid focus-visible:-outline-offset-2\",\n    \"[&_svg]:size-icon-md [&_svg]:shrink-0\",\n    \"data-disabled:cursor-not-allowed data-disabled:text-text-disabled disabled:cursor-not-allowed disabled:text-text-disabled\",\n  ],\n  {\n    variants: {\n      type: {\n        default: \"text-text-primary\",\n        destructive: \"text-text-error\",\n      },\n      layout: {\n        popover: \"h-control-md\",\n        sheet: \"h-12\",\n      },\n    },\n    // Base UI marks the pointer/keyboard position with data-highlighted in the popover;\n    // the sheet's rows are plain buttons, so they use :hover.\n    compoundVariants: [\n      {\n        type: \"default\",\n        layout: \"popover\",\n        className: \"not-data-disabled:data-highlighted:bg-surface\",\n      },\n      {\n        type: \"destructive\",\n        layout: \"popover\",\n        className: \"not-data-disabled:data-highlighted:bg-error-subtle\",\n      },\n      {\n        type: \"default\",\n        layout: \"sheet\",\n        className: \"enabled:hover:bg-surface\",\n      },\n      {\n        type: \"destructive\",\n        layout: \"sheet\",\n        className: \"enabled:hover:bg-error-subtle\",\n      },\n    ],\n    defaultVariants: {\n      type: \"default\",\n      layout: \"popover\",\n    },\n  },\n);\n\nexport interface MenuItemProps {\n  /** The option's label. */\n  children: ReactNode;\n  /** 20px icon before the label. */\n  icon?: ReactNode;\n  /** `destructive` goes in text-error and always last, after a `MenuSeparator`. */\n  type?: \"default\" | \"destructive\";\n  disabled?: boolean;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /** Closes the menu after the click (default). */\n  closeOnClick?: boolean;\n  className?: string;\n}\n\n/** One option. 40px tall in the popover (48 in the sheet) so neighbours aren't tapped by mistake. */\nexport function MenuItem({\n  children,\n  icon,\n  type = \"default\",\n  disabled = false,\n  onClick,\n  closeOnClick = true,\n  className,\n}: MenuItemProps): React.JSX.Element {\n  const layout = useMenuLayout(\"MenuItem\");\n  const classes = cn(menuItemVariants({ type, layout }), className);\n\n  if (layout === \"sheet\") {\n    return (\n      <ModalClose\n        data-slot=\"menu-item\"\n        data-type={type}\n        disabled={disabled}\n        className={classes}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!closeOnClick) {\n            event.preventBaseUIHandler();\n          }\n        }}\n      >\n        {icon}\n        <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      </ModalClose>\n    );\n  }\n\n  return (\n    <BaseMenu.Item\n      data-slot=\"menu-item\"\n      data-type={type}\n      disabled={disabled}\n      closeOnClick={closeOnClick}\n      onClick={onClick}\n      className={classes}\n    >\n      {icon}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    </BaseMenu.Item>\n  );\n}\n\nexport interface MenuSeparatorProps {\n  className?: string;\n}\n\n/** The line before the destructive option. */\nexport function MenuSeparator({\n  className,\n}: MenuSeparatorProps): React.JSX.Element {\n  const layout = useMenuLayout(\"MenuSeparator\");\n\n  if (layout === \"sheet\") {\n    return <Divider className={cn(\"my-1\", className)} />;\n  }\n\n  return (\n    <BaseMenu.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\"my-1 h-px shrink-0 bg-border-subtle\", className)}\n    />\n  );\n}\n"],"names":["BaseMenu"],"mappings":"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"}

package/dist/components/mobile-header/index.d.ts

@@ -0,0 +1 @@
+export { MobileHeader, MobileHeaderAction, type MobileHeaderActionProps, MobileHeaderBack, type MobileHeaderBackProps, type MobileHeaderProps, } from "./mobile-header";

package/dist/components/mobile-header/mobile-header.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type IconButtonProps } from "../icon-button";
+export interface MobileHeaderProps extends Omit<ComponentProps<"header">, "title"> {
+    /** The screen's name. One line: it truncates with an ellipsis instead of wrapping. */
+    title: ReactNode;
+    /**
+     * Left slot. On a second-level screen, `<MobileHeaderBack />` (the way back); on a
+     * root screen, the button that opens the menu (`AppShellMenuButton`). Leave it out
+     * only on a root screen without a menu.
+     */
+    leading?: ReactNode;
+    /** Right slot: one `MobileHeaderAction` (e.g. "Más opciones" opening a `Menu`). */
+    trailing?: ReactNode;
+    /**
+     * The title is the page's `<h1>` on mobile, the counterpart of `PageHeader` on
+     * desktop (each one only shows at its own width). Use `"p"` if the screen already
+     * has its own `<h1>` in the content.
+     */
+    titleAs?: "h1" | "h2" | "p";
+}
+/**
+ * Mobile header: 56px, title filling the space between two optional icon buttons.
+ * `AppShell` keeps it stuck to the top below the desktop breakpoint and adds the
+ * `safe-area-inset-top` of phones with a notch.
+ *
+ * Every screen needs a way out: a second-level screen ALWAYS gets a back button in
+ * `leading` — `<MobileHeaderBack render={<Link to=".." />} />` — which looks
+ * different from the menu one on purpose, so people can tell "back" from "menu".
+ */
+export declare function MobileHeader({ title, leading, trailing, titleAs: Title, className, ...props }: MobileHeaderProps): React.JSX.Element;
+export interface MobileHeaderActionProps extends Omit<IconButtonProps, "variant" | "size"> {
+}
+/**
+ * An icon button for the header's slots: IconButton `ghost` `small` (36px drawn, 44px
+ * hit area), with the hover one step above the header's `surface`. `aria-label` is
+ * required. With `render={<Link />}` it becomes a link on its own.
+ */
+export declare function MobileHeaderAction({ className, render, nativeButton, role, ...props }: MobileHeaderActionProps): React.JSX.Element;
+export interface MobileHeaderBackProps extends Omit<MobileHeaderActionProps, "icon" | "aria-label"> {
+    /** Defaults to the `back` label ("Volver"). */
+    "aria-label"?: string;
+}
+/**
+ * The way back of a second-level screen: `arrow-narrow-left`, named "Volver".
+ * Give it the parent route — `render={<Link to="/programas" />}` — rather than
+ * `history.back()`: someone who arrived from a shared link has no history to go
+ * back to.
+ */
+export declare function MobileHeaderBack({ "aria-label": ariaLabel, ...props }: MobileHeaderBackProps): React.JSX.Element;

package/dist/components/mobile-header/mobile-header.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowNarrowLeftIcon } from "../../icons/generated/arrow-narrow-left.js";
+import { cn } from "../../lib/cn.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function MobileHeader({
+  title,
+  leading,
+  trailing,
+  titleAs: Title = "h1",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-slot": "mobile-header",
+      className: cn(
+        "border-border border-b bg-surface pt-[env(safe-area-inset-top)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center gap-2 px-2", children: [
+        leading,
+        /* @__PURE__ */ jsx(
+          Title,
+          {
+            "data-slot": "mobile-header-title",
+            className: cn(
+              "min-w-0 flex-1 truncate text-heading-h3 text-text-primary",
+              !leading && "ps-2",
+              !trailing && "pe-2"
+            ),
+            children: title
+          }
+        ),
+        trailing
+      ] })
+    }
+  );
+}
+function MobileHeaderAction({
+  className,
+  render,
+  nativeButton,
+  role,
+  ...props
+}) {
+  const isLink = render !== void 0;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "data-slot": "mobile-header-action",
+      variant: "ghost",
+      size: "small",
+      render,
+      nativeButton: nativeButton ?? !isLink,
+      role,
+      className: cn("not-data-disabled:hover:bg-surface-raised", className),
+      ...props
+    }
+  );
+}
+function MobileHeaderBack({
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    MobileHeaderAction,
+    {
+      "data-slot": "mobile-header-back",
+      icon: /* @__PURE__ */ jsx(ArrowNarrowLeftIcon, {}),
+      "aria-label": ariaLabel ?? labels.back,
+      ...props
+    }
+  );
+}
+export {
+  MobileHeader,
+  MobileHeaderAction,
+  MobileHeaderBack
+};
+//# sourceMappingURL=mobile-header.js.map

package/dist/components/mobile-header/mobile-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-header.js","sources":["../../../src/components/mobile-header/mobile-header.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { ArrowNarrowLeftIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton, type IconButtonProps } from \"../icon-button\";\n\nexport interface MobileHeaderProps\n  extends Omit<ComponentProps<\"header\">, \"title\"> {\n  /** The screen's name. One line: it truncates with an ellipsis instead of wrapping. */\n  title: ReactNode;\n  /**\n   * Left slot. On a second-level screen, `<MobileHeaderBack />` (the way back); on a\n   * root screen, the button that opens the menu (`AppShellMenuButton`). Leave it out\n   * only on a root screen without a menu.\n   */\n  leading?: ReactNode;\n  /** Right slot: one `MobileHeaderAction` (e.g. \"Más opciones\" opening a `Menu`). */\n  trailing?: ReactNode;\n  /**\n   * The title is the page's `<h1>` on mobile, the counterpart of `PageHeader` on\n   * desktop (each one only shows at its own width). Use `\"p\"` if the screen already\n   * has its own `<h1>` in the content.\n   */\n  titleAs?: \"h1\" | \"h2\" | \"p\";\n}\n\n/**\n * Mobile header: 56px, title filling the space between two optional icon buttons.\n * `AppShell` keeps it stuck to the top below the desktop breakpoint and adds the\n * `safe-area-inset-top` of phones with a notch.\n *\n * Every screen needs a way out: a second-level screen ALWAYS gets a back button in\n * `leading` — `<MobileHeaderBack render={<Link to=\"..\" />} />` — which looks\n * different from the menu one on purpose, so people can tell \"back\" from \"menu\".\n */\nexport function MobileHeader({\n  title,\n  leading,\n  trailing,\n  titleAs: Title = \"h1\",\n  className,\n  ...props\n}: MobileHeaderProps): React.JSX.Element {\n  return (\n    <header\n      data-slot=\"mobile-header\"\n      className={cn(\n        \"border-border border-b bg-surface pt-[env(safe-area-inset-top)]\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex h-14 items-center gap-2 px-2\">\n        {leading}\n        {/* Without a button on a side, the title lines up with the 16px page gutter. */}\n        <Title\n          data-slot=\"mobile-header-title\"\n          className={cn(\n            \"min-w-0 flex-1 truncate text-heading-h3 text-text-primary\",\n            !leading && \"ps-2\",\n            !trailing && \"pe-2\",\n          )}\n        >\n          {title}\n        </Title>\n        {trailing}\n      </div>\n    </header>\n  );\n}\n\nexport interface MobileHeaderActionProps\n  extends Omit<IconButtonProps, \"variant\" | \"size\"> {}\n\n/**\n * An icon button for the header's slots: IconButton `ghost` `small` (36px drawn, 44px\n * hit area), with the hover one step above the header's `surface`. `aria-label` is\n * required. With `render={<Link />}` it becomes a link on its own.\n */\nexport function MobileHeaderAction({\n  className,\n  render,\n  nativeButton,\n  role,\n  ...props\n}: MobileHeaderActionProps): React.JSX.Element {\n  const isLink = render !== undefined;\n\n  return (\n    <IconButton\n      data-slot=\"mobile-header-action\"\n      variant=\"ghost\"\n      size=\"small\"\n      render={render}\n      nativeButton={nativeButton ?? !isLink}\n      // Always passed, even when undefined: Base UI puts role=\"button\" on non-native\n      // buttons, and a router link that navigates must stay a link.\n      role={role}\n      className={cn(\"not-data-disabled:hover:bg-surface-raised\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MobileHeaderBackProps\n  extends Omit<MobileHeaderActionProps, \"icon\" | \"aria-label\"> {\n  /** Defaults to the `back` label (\"Volver\"). */\n  \"aria-label\"?: string;\n}\n\n/**\n * The way back of a second-level screen: `arrow-narrow-left`, named \"Volver\".\n * Give it the parent route — `render={<Link to=\"/programas\" />}` — rather than\n * `history.back()`: someone who arrived from a shared link has no history to go\n * back to.\n */\nexport function MobileHeaderBack({\n  \"aria-label\": ariaLabel,\n  ...props\n}: MobileHeaderBackProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <MobileHeaderAction\n      data-slot=\"mobile-header-back\"\n      icon={<ArrowNarrowLeftIcon />}\n      aria-label={ariaLabel ?? labels.back}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,QAAQ;AAAA,EACjB;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,QAAA;AAAA,QAED;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA,cACT;AAAA,cACA,CAAC,WAAW;AAAA,cACZ,CAAC,YAAY;AAAA,YAAA;AAAA,YAGd,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAUO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+C;AAC7C,QAAM,SAAS,WAAW;AAE1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,cAAc,gBAAgB,CAAC;AAAA,MAG/B;AAAA,MACA,WAAW,GAAG,6CAA6C,SAAS;AAAA,MACnE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAcO,SAAS,iBAAiB;AAAA,EAC/B,cAAc;AAAA,EACd,GAAG;AACL,GAA6C;AAC3C,QAAM,SAAS,kBAAA;AAEf,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,0BAAO,qBAAA,EAAoB;AAAA,MAC3B,cAAY,aAAa,OAAO;AAAA,MAC/B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/modal/confirm-modal.d.ts

@@ -0,0 +1,32 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ModalChangeEventDetails, type ModalLayout } from "./modal";
+export interface ConfirmModalProps {
+    /** The element that opens it, e.g. `<Button variant="destructive">Eliminar</Button>`. Omit it when controlled. */
+    trigger?: ReactElement;
+    /** A question about the action: "¿Eliminar Penicilina de tus alergias?". */
+    title: ReactNode;
+    /** What happens if the person confirms, and whether it can be undone. */
+    message?: ReactNode;
+    /** Names the action ("Eliminar alergia"), never a bare "Aceptar" or "Sí". */
+    confirmLabel: ReactNode;
+    /** Defaults to the MediCore `close` label. */
+    cancelLabel?: ReactNode;
+    /**
+     * Runs on confirm. If it returns a promise, the confirm button shows a spinner and
+     * the modal closes when it resolves; if it rejects, the modal stays open so the
+     * screen can explain what failed.
+     */
+    onConfirm: () => unknown;
+    /** The confirm button goes in `destructive` red. */
+    destructive?: boolean;
+    layout?: ModalLayout;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;
+}
+/**
+ * Ready-made confirmation: title, message, cancel and confirm. For irreversible
+ * actions (cancel an appointment, delete data) confirm here first, then show the
+ * result in a persistent state — not only in a Toast.
+ */
+export declare function ConfirmModal({ trigger, title, message, confirmLabel, cancelLabel, onConfirm, destructive, ...modalProps }: ConfirmModalProps): React.JSX.Element;

package/dist/components/modal/confirm-modal.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter, ModalClose } from "./modal.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Button } from "../button/button.js";
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
+}
+function ConfirmModal({
+  trigger,
+  title,
+  message,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  destructive = false,
+  ...modalProps
+}) {
+  const labels = useMediCoreLabels();
+  const actionsRef = useRef(null);
+  const [pending, setPending] = useState(false);
+  const handleConfirm = async () => {
+    const result = onConfirm();
+    if (!isPromiseLike(result)) {
+      actionsRef.current?.close();
+      return;
+    }
+    setPending(true);
+    try {
+      await result;
+      actionsRef.current?.close();
+    } catch {
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      actionsRef,
+      disablePointerDismissal: pending,
+      ...modalProps,
+      children: [
+        trigger && /* @__PURE__ */ jsx(ModalTrigger, { render: trigger }),
+        /* @__PURE__ */ jsxs(ModalContent, { children: [
+          /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: title }) }),
+          message && /* @__PURE__ */ jsx(ModalBody, { children: message }),
+          /* @__PURE__ */ jsx(
+            ModalFooter,
+            {
+              primaryAction: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: destructive ? "destructive" : "primary",
+                  loading: pending,
+                  onClick: handleConfirm,
+                  children: confirmLabel
+                }
+              ),
+              secondaryAction: /* @__PURE__ */ jsx(
+                ModalClose,
+                {
+                  disabled: pending,
+                  render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+                  children: cancelLabel ?? labels.close
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ConfirmModal
+};
+//# sourceMappingURL=confirm-modal.js.map

package/dist/components/modal/confirm-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-modal.js","sources":["../../../src/components/modal/confirm-modal.tsx"],"sourcesContent":["import { type ReactElement, type ReactNode, useRef, useState } from \"react\";\n\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Button } from \"../button\";\nimport {\n  Modal,\n  type ModalActions,\n  ModalBody,\n  type ModalChangeEventDetails,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  type ModalLayout,\n  ModalTitle,\n  ModalTrigger,\n} from \"./modal\";\n\nexport interface ConfirmModalProps {\n  /** The element that opens it, e.g. `<Button variant=\"destructive\">Eliminar</Button>`. Omit it when controlled. */\n  trigger?: ReactElement;\n  /** A question about the action: \"¿Eliminar Penicilina de tus alergias?\". */\n  title: ReactNode;\n  /** What happens if the person confirms, and whether it can be undone. */\n  message?: ReactNode;\n  /** Names the action (\"Eliminar alergia\"), never a bare \"Aceptar\" or \"Sí\". */\n  confirmLabel: ReactNode;\n  /** Defaults to the MediCore `close` label. */\n  cancelLabel?: ReactNode;\n  /**\n   * Runs on confirm. If it returns a promise, the confirm button shows a spinner and\n   * the modal closes when it resolves; if it rejects, the modal stays open so the\n   * screen can explain what failed.\n   */\n  onConfirm: () => unknown;\n  /** The confirm button goes in `destructive` red. */\n  destructive?: boolean;\n  layout?: ModalLayout;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"then\" in value &&\n    typeof value.then === \"function\"\n  );\n}\n\n/**\n * Ready-made confirmation: title, message, cancel and confirm. For irreversible\n * actions (cancel an appointment, delete data) confirm here first, then show the\n * result in a persistent state — not only in a Toast.\n */\nexport function ConfirmModal({\n  trigger,\n  title,\n  message,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  destructive = false,\n  ...modalProps\n}: ConfirmModalProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const actionsRef = useRef<ModalActions | null>(null);\n  const [pending, setPending] = useState(false);\n\n  const handleConfirm = async (): Promise<void> => {\n    const result = onConfirm();\n    if (!isPromiseLike(result)) {\n      actionsRef.current?.close();\n      return;\n    }\n    setPending(true);\n    try {\n      await result;\n      actionsRef.current?.close();\n    } catch {\n      // Stays open: the caller shows what went wrong.\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Modal\n      actionsRef={actionsRef}\n      disablePointerDismissal={pending}\n      {...modalProps}\n    >\n      {trigger && <ModalTrigger render={trigger} />}\n      <ModalContent>\n        <ModalHeader>\n          <ModalTitle>{title}</ModalTitle>\n        </ModalHeader>\n        {message && <ModalBody>{message}</ModalBody>}\n        <ModalFooter\n          primaryAction={\n            <Button\n              variant={destructive ? \"destructive\" : \"primary\"}\n              loading={pending}\n              onClick={handleConfirm}\n            >\n              {confirmLabel}\n            </Button>\n          }\n          secondaryAction={\n            <ModalClose\n              disabled={pending}\n              render={<Button variant=\"secondary\" />}\n            >\n              {cancelLabel ?? labels.close}\n            </ModalClose>\n          }\n        />\n      </ModalContent>\n    </Modal>\n  );\n}\n"],"names":[],"mappings":";;;;;AA2CA,SAAS,cAAc,OAA+C;AACpE,SACE,OAAO,UAAU,YACjB,UAAU,QACV,UAAU,SACV,OAAO,MAAM,SAAS;AAE1B;AAOO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAyC;AACvC,QAAM,SAAS,kBAAA;AACf,QAAM,aAAa,OAA4B,IAAI;AACnD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,gBAAgB,YAA2B;AAC/C,UAAM,SAAS,UAAA;AACf,QAAI,CAAC,cAAc,MAAM,GAAG;AAC1B,iBAAW,SAAS,MAAA;AACpB;AAAA,IACF;AACA,eAAW,IAAI;AACf,QAAI;AACF,YAAM;AACN,iBAAW,SAAS,MAAA;AAAA,IACtB,QAAQ;AAAA,IAER,UAAA;AACE,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,yBAAyB;AAAA,MACxB,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,oBAAC,cAAA,EAAa,QAAQ,QAAA,CAAS;AAAA,6BAC1C,cAAA,EACC,UAAA;AAAA,UAAA,oBAAC,aAAA,EACC,UAAA,oBAAC,YAAA,EAAY,UAAA,MAAA,CAAM,GACrB;AAAA,UACC,WAAW,oBAAC,WAAA,EAAW,UAAA,QAAA,CAAQ;AAAA,UAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,cAAc,gBAAgB;AAAA,kBACvC,SAAS;AAAA,kBACT,SAAS;AAAA,kBAER,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGL,iBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,UAAU;AAAA,kBACV,QAAQ,oBAAC,QAAA,EAAO,SAAQ,YAAA,CAAY;AAAA,kBAEnC,yBAAe,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzB;AAAA,UAAA;AAAA,QAEJ,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmModal, type ConfirmModalProps } from "./confirm-modal";
+export { Modal, type ModalActions, ModalBody, type ModalBodyProps, type ModalChangeEventDetails, ModalClose, type ModalCloseProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalLayout, type ModalProps, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, } from "./modal";

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,103 @@
+import { Dialog } from "@base-ui/react/dialog";
+import { Drawer } from "@base-ui/react/drawer";
+import { type ComponentProps, type CSSProperties, type ReactNode, type Ref, type RefObject } from "react";
+export type ModalLayout = "center" | "sheet";
+export type ModalChangeEventDetails = Dialog.Root.ChangeEventDetails | Drawer.Root.ChangeEventDetails;
+export interface ModalActions {
+    /** Closes the modal as if the person had dismissed it. */
+    close: () => void;
+    /** Unmounts the popup after an externally controlled closing animation. */
+    unmount: () => void;
+}
+export interface ModalProps {
+    /**
+     * `center` is the 480px dialog, `sheet` the bottom sheet. Leave it unset and it
+     * follows the screen: sheet below `md`, centered dialog from `md` up.
+     */
+    layout?: ModalLayout;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;
+    /** Called after the open/close animation finishes. */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /** Keeps the modal open when the person clicks or taps outside it. */
+    disablePointerDismissal?: boolean;
+    /** Imperative `close()` / `unmount()`. */
+    actionsRef?: RefObject<ModalActions | null>;
+    children?: ReactNode;
+}
+/**
+ * Confirmation and interruption dialog. One component, two layouts with the same
+ * content: a centered dialog on desktop and a bottom sheet on mobile.
+ *
+ * - `center`: close X in the header, actions in a row aligned right.
+ * - `sheet`: drag handle and no X (it closes by swiping down or tapping outside),
+ *   actions stacked full width with the primary on top.
+ *
+ * Focus moves into the dialog when it opens, Tab stays inside, Escape closes it
+ * and focus returns to the element that opened it.
+ *
+ * There is no destructive Modal: what is destructive is the action, so pass a
+ * `destructive` Button as the primary action (or use `ConfirmModal`).
+ */
+export declare function Modal({ layout, open: openProp, defaultOpen, onOpenChange, children, ...props }: ModalProps): React.JSX.Element;
+export interface ModalTriggerProps extends Dialog.Trigger.Props {
+}
+/**
+ * The element that opens the modal. Unstyled: pass the look with
+ * `render={<Button variant="…" />}`.
+ */
+export declare function ModalTrigger(props: ModalTriggerProps): React.JSX.Element;
+export interface ModalCloseProps extends Dialog.Close.Props {
+}
+/** Closes the modal. Use it for the "Cancelar" action: `render={<Button variant="secondary" />}`. */
+export declare function ModalClose(props: ModalCloseProps): React.JSX.Element;
+export interface ModalContentProps extends Omit<Dialog.Popup.Props, "className" | "style" | "render" | "ref"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The dialog itself, with the scrim behind it. Children go in a column with 16px
+ * between them: `ModalHeader`, then `ModalBody` (or your own content, sized to
+ * the popup width) and `ModalFooter`.
+ *
+ * On open, focus goes to the dialog itself so screen readers announce its title and
+ * message, and a destructive primary action is never focused by default. Pass
+ * `initialFocus` to focus a field instead (e.g. in a form).
+ */
+export declare function ModalContent({ className, children, initialFocus, ref, ...props }: ModalContentProps): React.JSX.Element;
+export interface ModalHeaderProps extends ComponentProps<"div"> {
+    /**
+     * Shows the close X (default). Only in the `center` layout: the sheet never has one,
+     * it closes by swiping or tapping outside.
+     */
+    closeButton?: boolean;
+}
+/** Title row. Put a `ModalTitle` inside; the close X is added for you. */
+export declare function ModalHeader({ closeButton, className, children, ...props }: ModalHeaderProps): React.JSX.Element;
+export interface ModalTitleProps extends Omit<Dialog.Title.Props, "className"> {
+    className?: string;
+}
+/** Names the dialog (it becomes its accessible name). Renders an `<h2>`. */
+export declare function ModalTitle({ className, ...props }: ModalTitleProps): React.JSX.Element;
+export interface ModalBodyProps extends Omit<Dialog.Description.Props, "className"> {
+    className?: string;
+}
+/**
+ * The default content: the dialog's message, announced as its description.
+ * For your own content (a form, a list) put it directly inside `ModalContent`
+ * instead of `ModalBody`.
+ */
+export declare function ModalBody({ className, ...props }: ModalBodyProps): React.JSX.Element;
+export interface ModalFooterProps extends Omit<ComponentProps<"div">, "children"> {
+    /** The main action, usually a `Button` (`variant="destructive"` for a destructive confirmation). */
+    primaryAction: ReactNode;
+    /** Usually `<ModalClose render={<Button variant="secondary" />}>Cancelar</ModalClose>`. */
+    secondaryAction?: ReactNode;
+}
+/**
+ * The actions. `center`: in a row aligned right, secondary first. `sheet`: stacked
+ * full width with the primary on top, away from the resting thumb.
+ */
+export declare function ModalFooter({ primaryAction, secondaryAction, className, ...props }: ModalFooterProps): React.JSX.Element;