@mediquo/medicore 0.1.0

package/dist/components/modal/modal.js

@@ -0,0 +1,248 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+import { Drawer } from "@base-ui/react/drawer";
+import { useState, useCallback, useMemo, useRef, createContext, useContext } from "react";
+import { XCloseIcon } from "../../icons/generated/x-close.js";
+import { cn } from "../../lib/cn.js";
+import { useMediaQuery, DESKTOP_MEDIA_QUERY } from "./use-media-query.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { IconButton } from "../icon-button/icon-button.js";
+const ModalContext = createContext(null);
+function useModalContext(part) {
+  const context = useContext(ModalContext);
+  if (context === null) {
+    throw new Error(`MediCore: <${part}> must be used inside <Modal>.`);
+  }
+  return context;
+}
+function Modal({
+  layout,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) {
+  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
+  const resolvedLayout = layout ?? (isDesktop ? "center" : "sheet");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const isControlled = openProp !== void 0;
+  const handleOpenChange = useCallback(
+    (nextOpen, eventDetails) => {
+      onOpenChange?.(nextOpen, eventDetails);
+      if (!isControlled && !eventDetails.isCanceled) {
+        setUncontrolledOpen(nextOpen);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  const context = useMemo(() => ({ layout: resolvedLayout }), [resolvedLayout]);
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: context, children: resolvedLayout === "sheet" ? /* @__PURE__ */ jsx(Drawer.Root, { open, onOpenChange: handleOpenChange, ...props, children }) : /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange: handleOpenChange, ...props, children }) });
+}
+function ModalTrigger(props) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "modal-trigger", ...props });
+}
+function ModalClose(props) {
+  return /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "modal-close", ...props });
+}
+const backdropBase = "fixed inset-0 z-50 min-h-dvh bg-scrim-image transition-opacity duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none supports-[-webkit-touch-callout:none]:absolute";
+function ModalContent({
+  className,
+  children,
+  initialFocus,
+  ref,
+  ...props
+}) {
+  const { layout } = useModalContext("ModalContent");
+  const popupRef = useRef(null);
+  const setPopupRef = useCallback(
+    (node) => {
+      popupRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  if (layout === "sheet") {
+    return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Drawer.Backdrop,
+        {
+          "data-slot": "modal-backdrop",
+          className: cn(
+            backdropBase,
+            "opacity-[calc(1-var(--drawer-swipe-progress,0))] data-swiping:duration-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Drawer.Viewport,
+        {
+          "data-slot": "modal-viewport",
+          className: "fixed inset-0 z-50 flex items-end justify-center",
+          children: /* @__PURE__ */ jsxs(
+            Drawer.Popup,
+            {
+              ref: setPopupRef,
+              "data-slot": "modal-content",
+              "data-layout": "sheet",
+              initialFocus: initialFocus ?? popupRef,
+              className: cn(
+                "flex max-h-[90dvh] w-full flex-col gap-4 overflow-y-auto overscroll-contain",
+                "rounded-t-xl bg-background px-6 pt-3 pb-8 text-text-primary shadow-xl outline-hidden",
+                "[transform:translateY(var(--drawer-swipe-movement-y,0px))] transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+                "data-starting-style:[transform:translateY(100%)] data-ending-style:[transform:translateY(100%)]",
+                "data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] data-swiping:select-none",
+                "motion-reduce:transition-none",
+                className
+              ),
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "modal-handle",
+                    className: "mx-auto h-1 w-9 shrink-0 rounded-full bg-border"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Drawer.Content, { className: "flex flex-col gap-4", children })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { "data-slot": "modal-backdrop", className: backdropBase }),
+    /* @__PURE__ */ jsx(
+      Dialog.Viewport,
+      {
+        "data-slot": "modal-viewport",
+        className: "fixed inset-0 z-50 flex items-center justify-center p-6",
+        children: /* @__PURE__ */ jsx(
+          Dialog.Popup,
+          {
+            ref: setPopupRef,
+            "data-slot": "modal-content",
+            "data-layout": "center",
+            initialFocus: initialFocus ?? popupRef,
+            className: cn(
+              "flex max-h-full w-120 max-w-full flex-col gap-4 overflow-y-auto overscroll-contain",
+              "rounded-xl bg-background p-6 text-text-primary shadow-xl outline-hidden",
+              "transition-[opacity,scale] duration-200 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
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    )
+  ] });
+}
+function ModalHeader({
+  closeButton = true,
+  className,
+  children,
+  ...props
+}) {
+  const { layout } = useModalContext("ModalHeader");
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "modal-header",
+      className: cn("flex items-start gap-3", className),
+      ...props,
+      children: [
+        children,
+        closeButton && layout === "center" && /* @__PURE__ */ jsx(
+          Dialog.Close,
+          {
+            render: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                icon: /* @__PURE__ */ jsx(XCloseIcon, {}),
+                "aria-label": labels.close
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ModalTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "modal-title",
+      className: cn(
+        "min-w-0 flex-1 text-heading-h3 text-text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ModalBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      "data-slot": "modal-body",
+      className: cn("text-body-default text-text-secondary", className),
+      ...props
+    }
+  );
+}
+function ModalFooter({
+  primaryAction,
+  secondaryAction,
+  className,
+  ...props
+}) {
+  const { layout } = useModalContext("ModalFooter");
+  const isSheet = layout === "sheet";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "modal-footer",
+      className: cn(
+        "flex gap-2",
+        isSheet ? "flex-col *:w-full" : "flex-row flex-wrap justify-end",
+        className
+      ),
+      ...props,
+      children: [
+        isSheet ? primaryAction : secondaryAction,
+        isSheet ? secondaryAction : primaryAction
+      ]
+    }
+  );
+}
+export {
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger
+};
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { Dialog } from \"@base-ui/react/dialog\";\nimport { Drawer } from \"@base-ui/react/drawer\";\nimport {\n  type ComponentProps,\n  type CSSProperties,\n  createContext,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { IconButton } from \"../icon-button\";\nimport { DESKTOP_MEDIA_QUERY, useMediaQuery } from \"./use-media-query\";\n\nexport type ModalLayout = \"center\" | \"sheet\";\n\nexport type ModalChangeEventDetails =\n  | Dialog.Root.ChangeEventDetails\n  | Drawer.Root.ChangeEventDetails;\n\nexport interface ModalActions {\n  /** Closes the modal as if the person had dismissed it. */\n  close: () => void;\n  /** Unmounts the popup after an externally controlled closing animation. */\n  unmount: () => void;\n}\n\ninterface ModalContextValue {\n  layout: ModalLayout;\n}\n\nconst ModalContext = createContext<ModalContextValue | null>(null);\n\nfunction useModalContext(part: string): ModalContextValue {\n  const context = useContext(ModalContext);\n  if (context === null) {\n    throw new Error(`MediCore: <${part}> must be used inside <Modal>.`);\n  }\n  return context;\n}\n\nexport interface ModalProps {\n  /**\n   * `center` is the 480px dialog, `sheet` the bottom sheet. Leave it unset and it\n   * follows the screen: sheet below `md`, centered dialog from `md` up.\n   */\n  layout?: ModalLayout;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: ModalChangeEventDetails) => void;\n  /** Called after the open/close animation finishes. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  /** Keeps the modal open when the person clicks or taps outside it. */\n  disablePointerDismissal?: boolean;\n  /** Imperative `close()` / `unmount()`. */\n  actionsRef?: RefObject<ModalActions | null>;\n  children?: ReactNode;\n}\n\n/**\n * Confirmation and interruption dialog. One component, two layouts with the same\n * content: a centered dialog on desktop and a bottom sheet on mobile.\n *\n * - `center`: close X in the header, actions in a row aligned right.\n * - `sheet`: drag handle and no X (it closes by swiping down or tapping outside),\n *   actions stacked full width with the primary on top.\n *\n * Focus moves into the dialog when it opens, Tab stays inside, Escape closes it\n * and focus returns to the element that opened it.\n *\n * There is no destructive Modal: what is destructive is the action, so pass a\n * `destructive` Button as the primary action (or use `ConfirmModal`).\n */\nexport function Modal({\n  layout,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}: ModalProps): React.JSX.Element {\n  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n  const resolvedLayout: ModalLayout =\n    layout ?? (isDesktop ? \"center\" : \"sheet\");\n\n  // The open state lives here (not in Base UI) so the modal stays open when the\n  // screen crosses the breakpoint and the Dialog root is swapped for the Drawer one.\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp ?? uncontrolledOpen;\n  const isControlled = openProp !== undefined;\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean, eventDetails: ModalChangeEventDetails) => {\n      onOpenChange?.(nextOpen, eventDetails);\n      if (!isControlled && !eventDetails.isCanceled) {\n        setUncontrolledOpen(nextOpen);\n      }\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const context = useMemo(() => ({ layout: resolvedLayout }), [resolvedLayout]);\n\n  return (\n    <ModalContext.Provider value={context}>\n      {resolvedLayout === \"sheet\" ? (\n        <Drawer.Root open={open} onOpenChange={handleOpenChange} {...props}>\n          {children}\n        </Drawer.Root>\n      ) : (\n        <Dialog.Root open={open} onOpenChange={handleOpenChange} {...props}>\n          {children}\n        </Dialog.Root>\n      )}\n    </ModalContext.Provider>\n  );\n}\n\nexport interface ModalTriggerProps extends Dialog.Trigger.Props {}\n\n/**\n * The element that opens the modal. Unstyled: pass the look with\n * `render={<Button variant=\"…\" />}`.\n */\nexport function ModalTrigger(props: ModalTriggerProps): React.JSX.Element {\n  // Drawer.Trigger is Dialog.Trigger, so the same part works for both layouts.\n  return <Dialog.Trigger data-slot=\"modal-trigger\" {...props} />;\n}\n\nexport interface ModalCloseProps extends Dialog.Close.Props {}\n\n/** Closes the modal. Use it for the \"Cancelar\" action: `render={<Button variant=\"secondary\" />}`. */\nexport function ModalClose(props: ModalCloseProps): React.JSX.Element {\n  return <Dialog.Close data-slot=\"modal-close\" {...props} />;\n}\n\nconst backdropBase =\n  \"fixed inset-0 z-50 min-h-dvh bg-scrim-image transition-opacity duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none supports-[-webkit-touch-callout:none]:absolute\";\n\nexport interface ModalContentProps\n  extends Omit<Dialog.Popup.Props, \"className\" | \"style\" | \"render\" | \"ref\"> {\n  className?: string;\n  style?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The dialog itself, with the scrim behind it. Children go in a column with 16px\n * between them: `ModalHeader`, then `ModalBody` (or your own content, sized to\n * the popup width) and `ModalFooter`.\n *\n * On open, focus goes to the dialog itself so screen readers announce its title and\n * message, and a destructive primary action is never focused by default. Pass\n * `initialFocus` to focus a field instead (e.g. in a form).\n */\nexport function ModalContent({\n  className,\n  children,\n  initialFocus,\n  ref,\n  ...props\n}: ModalContentProps): React.JSX.Element {\n  const { layout } = useModalContext(\"ModalContent\");\n  const popupRef = useRef<HTMLDivElement | null>(null);\n\n  const setPopupRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      popupRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  if (layout === \"sheet\") {\n    return (\n      <Drawer.Portal>\n        <Drawer.Backdrop\n          data-slot=\"modal-backdrop\"\n          className={cn(\n            backdropBase,\n            \"opacity-[calc(1-var(--drawer-swipe-progress,0))] data-swiping:duration-0\",\n          )}\n        />\n        <Drawer.Viewport\n          data-slot=\"modal-viewport\"\n          className=\"fixed inset-0 z-50 flex items-end justify-center\"\n        >\n          <Drawer.Popup\n            ref={setPopupRef}\n            data-slot=\"modal-content\"\n            data-layout=\"sheet\"\n            initialFocus={initialFocus ?? popupRef}\n            className={cn(\n              \"flex max-h-[90dvh] w-full flex-col gap-4 overflow-y-auto overscroll-contain\",\n              \"rounded-t-xl bg-background px-6 pt-3 pb-8 text-text-primary shadow-xl outline-hidden\",\n              \"[transform:translateY(var(--drawer-swipe-movement-y,0px))] transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]\",\n              \"data-starting-style:[transform:translateY(100%)] data-ending-style:[transform:translateY(100%)]\",\n              \"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] data-swiping:select-none\",\n              \"motion-reduce:transition-none\",\n              className,\n            )}\n            {...props}\n          >\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"modal-handle\"\n              className=\"mx-auto h-1 w-9 shrink-0 rounded-full bg-border\"\n            />\n            <Drawer.Content className=\"flex flex-col gap-4\">\n              {children}\n            </Drawer.Content>\n          </Drawer.Popup>\n        </Drawer.Viewport>\n      </Drawer.Portal>\n    );\n  }\n\n  return (\n    <Dialog.Portal>\n      <Dialog.Backdrop data-slot=\"modal-backdrop\" className={backdropBase} />\n      <Dialog.Viewport\n        data-slot=\"modal-viewport\"\n        className=\"fixed inset-0 z-50 flex items-center justify-center p-6\"\n      >\n        <Dialog.Popup\n          ref={setPopupRef}\n          data-slot=\"modal-content\"\n          data-layout=\"center\"\n          initialFocus={initialFocus ?? popupRef}\n          className={cn(\n            \"flex max-h-full w-120 max-w-full flex-col gap-4 overflow-y-auto overscroll-contain\",\n            \"rounded-xl bg-background p-6 text-text-primary shadow-xl outline-hidden\",\n            \"transition-[opacity,scale] duration-200 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          {...props}\n        >\n          {children}\n        </Dialog.Popup>\n      </Dialog.Viewport>\n    </Dialog.Portal>\n  );\n}\n\nexport interface ModalHeaderProps extends ComponentProps<\"div\"> {\n  /**\n   * Shows the close X (default). Only in the `center` layout: the sheet never has one,\n   * it closes by swiping or tapping outside.\n   */\n  closeButton?: boolean;\n}\n\n/** Title row. Put a `ModalTitle` inside; the close X is added for you. */\nexport function ModalHeader({\n  closeButton = true,\n  className,\n  children,\n  ...props\n}: ModalHeaderProps): React.JSX.Element {\n  const { layout } = useModalContext(\"ModalHeader\");\n  const labels = useMediCoreLabels();\n\n  return (\n    <div\n      data-slot=\"modal-header\"\n      className={cn(\"flex items-start gap-3\", className)}\n      {...props}\n    >\n      {children}\n      {closeButton && layout === \"center\" && (\n        <Dialog.Close\n          render={\n            <IconButton\n              variant=\"ghost\"\n              icon={<XCloseIcon />}\n              aria-label={labels.close}\n            />\n          }\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface ModalTitleProps extends Omit<Dialog.Title.Props, \"className\"> {\n  className?: string;\n}\n\n/** Names the dialog (it becomes its accessible name). Renders an `<h2>`. */\nexport function ModalTitle({\n  className,\n  ...props\n}: ModalTitleProps): React.JSX.Element {\n  return (\n    <Dialog.Title\n      data-slot=\"modal-title\"\n      className={cn(\n        \"min-w-0 flex-1 text-heading-h3 text-text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface ModalBodyProps\n  extends Omit<Dialog.Description.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * The default content: the dialog's message, announced as its description.\n * For your own content (a form, a list) put it directly inside `ModalContent`\n * instead of `ModalBody`.\n */\nexport function ModalBody({\n  className,\n  ...props\n}: ModalBodyProps): React.JSX.Element {\n  return (\n    <Dialog.Description\n      data-slot=\"modal-body\"\n      className={cn(\"text-body-default text-text-secondary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ModalFooterProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /** The main action, usually a `Button` (`variant=\"destructive\"` for a destructive confirmation). */\n  primaryAction: ReactNode;\n  /** Usually `<ModalClose render={<Button variant=\"secondary\" />}>Cancelar</ModalClose>`. */\n  secondaryAction?: ReactNode;\n}\n\n/**\n * The actions. `center`: in a row aligned right, secondary first. `sheet`: stacked\n * full width with the primary on top, away from the resting thumb.\n */\nexport function ModalFooter({\n  primaryAction,\n  secondaryAction,\n  className,\n  ...props\n}: ModalFooterProps): React.JSX.Element {\n  const { layout } = useModalContext(\"ModalFooter\");\n  const isSheet = layout === \"sheet\";\n\n  return (\n    <div\n      data-slot=\"modal-footer\"\n      className={cn(\n        \"flex gap-2\",\n        isSheet ? \"flex-col *:w-full\" : \"flex-row flex-wrap justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {isSheet ? primaryAction : secondaryAction}\n      {isSheet ? secondaryAction : primaryAction}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/modal/use-media-query.d.ts

@@ -0,0 +1,7 @@
+/** Tailwind's `md` breakpoint: from here up overlays switch to their desktop layout. */
+export declare const DESKTOP_MEDIA_QUERY = "(min-width: 48rem)";
+/**
+ * Tracks a CSS media query. On the server (and in the first hydration pass) it
+ * reports `false`, so overlays start in their mobile layout.
+ */
+export declare function useMediaQuery(query: string): boolean;

package/dist/components/modal/use-media-query.js

@@ -0,0 +1,22 @@
+import { useCallback, useSyncExternalStore } from "react";
+const DESKTOP_MEDIA_QUERY = "(min-width: 48rem)";
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+export {
+  DESKTOP_MEDIA_QUERY,
+  useMediaQuery
+};
+//# sourceMappingURL=use-media-query.js.map

package/dist/components/modal/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sources":["../../../src/components/modal/use-media-query.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\n/** Tailwind's `md` breakpoint: from here up overlays switch to their desktop layout. */\nexport const DESKTOP_MEDIA_QUERY = \"(min-width: 48rem)\";\n\n/**\n * Tracks a CSS media query. On the server (and in the first hydration pass) it\n * reports `false`, so overlays start in their mobile layout.\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      const list = window.matchMedia(query);\n      list.addEventListener(\"change\", onChange);\n      return () => list.removeEventListener(\"change\", onChange);\n    },\n    [query],\n  );\n\n  return useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(query).matches,\n    () => false,\n  );\n}\n"],"names":[],"mappings":";AAGO,MAAM,sBAAsB;AAM5B,SAAS,cAAc,OAAwB;AACpD,QAAM,YAAY;AAAA,IAChB,CAAC,aAAyB;AACxB,YAAM,OAAO,OAAO,WAAW,KAAK;AACpC,WAAK,iBAAiB,UAAU,QAAQ;AACxC,aAAO,MAAM,KAAK,oBAAoB,UAAU,QAAQ;AAAA,IAC1D;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,SAAO;AAAA,IACL;AAAA,IACA,MAAM,OAAO,WAAW,KAAK,EAAE;AAAA,IAC/B,MAAM;AAAA,EAAA;AAEV;"}

package/dist/components/nav-item/index.d.ts

@@ -0,0 +1 @@
+export { NavItem, type NavItemProps, type NavItemState, navItemVariants, } from "./nav-item";

package/dist/components/nav-item/nav-item.d.ts

@@ -0,0 +1,54 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactNode } from "react";
+export declare const navItemVariants: (props?: ({
+    collapsed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface NavItemState extends Record<string, unknown> {
+    active: boolean;
+    collapsed: boolean;
+    disabled: boolean;
+    loading: boolean;
+}
+export interface NavItemProps extends Omit<useRender.ComponentProps<"a", NavItemState>, "className" | "children"> {
+    /** A MediCore icon (`<Home02Icon />`). It is sized to 20 by the item. */
+    icon: ReactNode;
+    /** The section name ("Inicio"). Always required: it stays in the DOM when collapsed. */
+    children: ReactNode;
+    /**
+     * The section on screen: `aria-current="page"`, brand pill and rail. Leave it out if
+     * the router link already sets `aria-current="page"` (TanStack Router's `<Link>`
+     * does): the styles follow the attribute, not the prop.
+     */
+    active?: boolean;
+    /**
+     * Figma "Show Label" off: icon only, 40×40. The label becomes screen-reader text and
+     * shows in a tooltip on hover and keyboard focus.
+     */
+    collapsed?: boolean;
+    /** Section not available: `aria-disabled`, out of the tab order, ignores clicks. */
+    disabled?: boolean;
+    /**
+     * The section is loading after a click: the icon turns into a spinner, the label
+     * stays and further clicks are ignored (without it people click twice).
+     */
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * Navigation item: icon + label. The atom of `SidebarItem` (and any other nav bar).
+ * Renders an `<a>`; pass the router's link with `render`:
+ *
+ * ```tsx
+ * <NavItem icon={<Home02Icon />} render={<Link to="/" activeOptions={{ exact: true }} />}>
+ *   Inicio
+ * </NavItem>
+ * ```
+ *
+ * - The active item is not told apart by colour alone (brand-subtle on surface is
+ *   1.22:1): it carries a 3px rail on the left. Mark it with `active` or let the
+ *   router set `aria-current="page"`.
+ * - Collapsed (icon only) keeps the label in the DOM as its accessible name and adds a
+ *   tooltip with it.
+ * - Hover and focus are CSS: the focus ring is inside the item and adds to the hover.
+ */
+export declare function NavItem({ icon, children, active, collapsed, disabled, loading, className, render, ...props }: NavItemProps): React.JSX.Element;

package/dist/components/nav-item/nav-item.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+const navItemVariants = cva(
+  [
+    "group/nav-item relative flex min-w-0 cursor-pointer select-none items-center gap-2.5 rounded-md p-2.5",
+    "text-body-small text-text-secondary no-underline transition-colors",
+    "[&_svg]:size-icon-md [&_svg]:shrink-0",
+    // Inside the item, not around it: in navigation there is no room outside. It is
+    // added on top of hover, so with the keyboard it shows even without the mouse.
+    "focus-ring focus-visible:-outline-offset-2",
+    // Figma says hover = `surface`, but every nav bar already sits on `surface`, where
+    // it would be invisible: the next step up keeps the hover visible.
+    "not-aria-disabled:not-aria-busy:not-aria-[current=page]:hover:bg-surface-raised",
+    "not-aria-disabled:not-aria-busy:not-aria-[current=page]:hover:text-text-primary",
+    // Active: brand-subtle pill + brand text + the 3px rail (the non-colour cue).
+    "aria-[current=page]:bg-brand-subtle aria-[current=page]:text-text-brand",
+    "aria-disabled:cursor-not-allowed aria-disabled:text-text-disabled",
+    "aria-busy:cursor-progress aria-busy:text-text-secondary"
+  ],
+  {
+    variants: {
+      collapsed: {
+        true: "size-10 shrink-0 justify-center",
+        false: "w-full"
+      }
+    },
+    defaultVariants: {
+      collapsed: false
+    }
+  }
+);
+const preventNavigation = (event) => {
+  event.preventDefault();
+  event.preventBaseUIHandler();
+};
+function NavItem({
+  icon,
+  children,
+  active = false,
+  collapsed = false,
+  disabled = false,
+  loading = false,
+  className,
+  render,
+  ...props
+}) {
+  const state = { active, collapsed, disabled, loading };
+  const ownProps = {
+    "data-slot": "nav-item",
+    className: cn(navItemVariants({ collapsed }), className),
+    "aria-current": active ? "page" : void 0,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          "data-slot": "nav-item-rail",
+          className: "absolute inset-y-0 left-0 hidden w-0.75 rounded-xs bg-text-brand group-aria-[current=page]/nav-item:block"
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx(Spinner, { size: 20, label: null }) : icon,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "nav-item-label",
+          className: collapsed ? "sr-only" : "min-w-0 flex-1",
+          children
+        }
+      )
+    ] })
+  };
+  const blockedProps = disabled ? {
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: preventNavigation
+  } : loading ? { "aria-busy": true, onClick: preventNavigation } : {};
+  const element = useRender({
+    defaultTagName: "a",
+    render,
+    state,
+    props: mergeProps(ownProps, props, blockedProps)
+  });
+  if (!collapsed) {
+    return element;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { disabled, children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { render: element }),
+    /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { side: "right", sideOffset: 8, className: "z-70", children: /* @__PURE__ */ jsxs(
+      Tooltip.Popup,
+      {
+        "data-slot": "nav-item-tooltip",
+        className: cn(
+          "max-w-60 rounded-md bg-surface-inverse px-2 py-1.5 text-label-small text-text-inverse",
+          "origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out",
+          "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:opacity-0",
+          "data-instant:transition-none motion-reduce:transition-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Tooltip.Arrow,
+            {
+              className: cn(
+                "h-2.5 w-1.5 bg-surface-inverse",
+                "data-[side=right]:right-full data-[side=right]:[clip-path:polygon(100%_0,100%_100%,0_50%)]",
+                "data-[side=left]:left-full data-[side=left]:[clip-path:polygon(0_0,100%_50%,0_100%)]"
+              )
+            }
+          ),
+          children
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  NavItem,
+  navItemVariants
+};
+//# sourceMappingURL=nav-item.js.map

package/dist/components/nav-item/nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.js","sources":["../../../src/components/nav-item/nav-item.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport type { BaseUIEvent } from \"@base-ui/react/types\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva } from \"class-variance-authority\";\nimport type { MouseEvent, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Spinner } from \"../spinner\";\n\nexport const navItemVariants = cva(\n  [\n    \"group/nav-item relative flex min-w-0 cursor-pointer select-none items-center gap-2.5 rounded-md p-2.5\",\n    \"text-body-small text-text-secondary no-underline transition-colors\",\n    \"[&_svg]:size-icon-md [&_svg]:shrink-0\",\n    // Inside the item, not around it: in navigation there is no room outside. It is\n    // added on top of hover, so with the keyboard it shows even without the mouse.\n    \"focus-ring focus-visible:-outline-offset-2\",\n    // Figma says hover = `surface`, but every nav bar already sits on `surface`, where\n    // it would be invisible: the next step up keeps the hover visible.\n    \"not-aria-disabled:not-aria-busy:not-aria-[current=page]:hover:bg-surface-raised\",\n    \"not-aria-disabled:not-aria-busy:not-aria-[current=page]:hover:text-text-primary\",\n    // Active: brand-subtle pill + brand text + the 3px rail (the non-colour cue).\n    \"aria-[current=page]:bg-brand-subtle aria-[current=page]:text-text-brand\",\n    \"aria-disabled:cursor-not-allowed aria-disabled:text-text-disabled\",\n    \"aria-busy:cursor-progress aria-busy:text-text-secondary\",\n  ],\n  {\n    variants: {\n      collapsed: {\n        true: \"size-10 shrink-0 justify-center\",\n        false: \"w-full\",\n      },\n    },\n    defaultVariants: {\n      collapsed: false,\n    },\n  },\n);\n\nexport interface NavItemState extends Record<string, unknown> {\n  active: boolean;\n  collapsed: boolean;\n  disabled: boolean;\n  loading: boolean;\n}\n\nexport interface NavItemProps\n  extends Omit<\n    useRender.ComponentProps<\"a\", NavItemState>,\n    \"className\" | \"children\"\n  > {\n  /** A MediCore icon (`<Home02Icon />`). It is sized to 20 by the item. */\n  icon: ReactNode;\n  /** The section name (\"Inicio\"). Always required: it stays in the DOM when collapsed. */\n  children: ReactNode;\n  /**\n   * The section on screen: `aria-current=\"page\"`, brand pill and rail. Leave it out if\n   * the router link already sets `aria-current=\"page\"` (TanStack Router's `<Link>`\n   * does): the styles follow the attribute, not the prop.\n   */\n  active?: boolean;\n  /**\n   * Figma \"Show Label\" off: icon only, 40×40. The label becomes screen-reader text and\n   * shows in a tooltip on hover and keyboard focus.\n   */\n  collapsed?: boolean;\n  /** Section not available: `aria-disabled`, out of the tab order, ignores clicks. */\n  disabled?: boolean;\n  /**\n   * The section is loading after a click: the icon turns into a spinner, the label\n   * stays and further clicks are ignored (without it people click twice).\n   */\n  loading?: boolean;\n  className?: string;\n}\n\n// Cancels the navigation and skips the handlers passed in `props`.\nconst preventNavigation = (\n  event: BaseUIEvent<MouseEvent<HTMLAnchorElement>>,\n): void => {\n  event.preventDefault();\n  event.preventBaseUIHandler();\n};\n\n/**\n * Navigation item: icon + label. The atom of `SidebarItem` (and any other nav bar).\n * Renders an `<a>`; pass the router's link with `render`:\n *\n * ```tsx\n * <NavItem icon={<Home02Icon />} render={<Link to=\"/\" activeOptions={{ exact: true }} />}>\n *   Inicio\n * </NavItem>\n * ```\n *\n * - The active item is not told apart by colour alone (brand-subtle on surface is\n *   1.22:1): it carries a 3px rail on the left. Mark it with `active` or let the\n *   router set `aria-current=\"page\"`.\n * - Collapsed (icon only) keeps the label in the DOM as its accessible name and adds a\n *   tooltip with it.\n * - Hover and focus are CSS: the focus ring is inside the item and adds to the hover.\n */\nexport function NavItem({\n  icon,\n  children,\n  active = false,\n  collapsed = false,\n  disabled = false,\n  loading = false,\n  className,\n  render,\n  ...props\n}: NavItemProps): React.JSX.Element {\n  const state: NavItemState = { active, collapsed, disabled, loading };\n\n  const ownProps: useRender.ElementProps<\"a\"> & { \"data-slot\": string } = {\n    \"data-slot\": \"nav-item\",\n    className: cn(navItemVariants({ collapsed }), className),\n    \"aria-current\": active ? \"page\" : undefined,\n    children: (\n      <>\n        <span\n          aria-hidden\n          data-slot=\"nav-item-rail\"\n          className=\"absolute inset-y-0 left-0 hidden w-0.75 rounded-xs bg-text-brand group-aria-[current=page]/nav-item:block\"\n        />\n        {loading ? <Spinner size={20} label={null} /> : icon}\n        <span\n          data-slot=\"nav-item-label\"\n          className={collapsed ? \"sr-only\" : \"min-w-0 flex-1\"}\n        >\n          {children}\n        </span>\n      </>\n    ),\n  };\n\n  // Last, so they win over whatever came in `props`.\n  const blockedProps: useRender.ElementProps<\"a\"> = disabled\n    ? {\n        \"aria-disabled\": true,\n        tabIndex: -1,\n        onClick: preventNavigation,\n      }\n    : loading\n      ? { \"aria-busy\": true, onClick: preventNavigation }\n      : {};\n\n  const element = useRender({\n    defaultTagName: \"a\",\n    render,\n    state,\n    props: mergeProps<\"a\">(ownProps, props, blockedProps),\n  });\n\n  if (!collapsed) {\n    return element;\n  }\n\n  // Same look as MediCore's `Tooltip`, but to the right (it only opens top/bottom) and\n  // without `aria-describedby`: the label is already the link's name, and describing\n  // it with the same words would make screen readers say it twice.\n  return (\n    <Tooltip.Root disabled={disabled}>\n      <Tooltip.Trigger render={element} />\n      <Tooltip.Portal>\n        <Tooltip.Positioner side=\"right\" sideOffset={8} className=\"z-70\">\n          <Tooltip.Popup\n            data-slot=\"nav-item-tooltip\"\n            className={cn(\n              \"max-w-60 rounded-md bg-surface-inverse px-2 py-1.5 text-label-small text-text-inverse\",\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:opacity-0\",\n              \"data-instant:transition-none motion-reduce:transition-none\",\n            )}\n          >\n            <Tooltip.Arrow\n              className={cn(\n                \"h-2.5 w-1.5 bg-surface-inverse\",\n                \"data-[side=right]:right-full data-[side=right]:[clip-path:polygon(100%_0,100%_100%,0_50%)]\",\n                \"data-[side=left]:left-full data-[side=left]:[clip-path:polygon(0_0,100%_50%,0_100%)]\",\n              )}\n            />\n            {children}\n          </Tooltip.Popup>\n        </Tooltip.Positioner>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAwCA,MAAM,oBAAoB,CACxB,UACS;AACT,QAAM,eAAA;AACN,QAAM,qBAAA;AACR;AAmBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,QAAM,QAAsB,EAAE,QAAQ,WAAW,UAAU,QAAA;AAE3D,QAAM,WAAkE;AAAA,IACtE,aAAa;AAAA,IACb,WAAW,GAAG,gBAAgB,EAAE,UAAA,CAAW,GAAG,SAAS;AAAA,IACvD,gBAAgB,SAAS,SAAS;AAAA,IAClC,UACE,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEX,UAAU,oBAAC,SAAA,EAAQ,MAAM,IAAI,OAAO,MAAM,IAAK;AAAA,MAChD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW,YAAY,YAAY;AAAA,UAElC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA;AAKJ,QAAM,eAA4C,WAC9C;AAAA,IACE,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,IAEX,UACE,EAAE,aAAa,MAAM,SAAS,kBAAA,IAC9B,CAAA;AAEN,QAAM,UAAU,UAAU;AAAA,IACxB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,OAAO,WAAgB,UAAU,OAAO,YAAY;AAAA,EAAA,CACrD;AAED,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,SACE,qBAAC,QAAQ,MAAR,EAAa,UACZ,UAAA;AAAA,IAAA,oBAAC,QAAQ,SAAR,EAAgB,QAAQ,QAAA,CAAS;AAAA,IAClC,oBAAC,QAAQ,QAAR,EACC,UAAA,oBAAC,QAAQ,YAAR,EAAmB,MAAK,SAAQ,YAAY,GAAG,WAAU,QACxD,UAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/otp-input/index.d.ts

@@ -0,0 +1 @@
+export { OTPInput, type OTPInputProps } from "./otp-input";

package/dist/components/otp-input/otp-input.d.ts

@@ -0,0 +1,40 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import { type ReactNode } from "react";
+export interface OTPInputProps extends Omit<BaseInput.Props, "className" | "value" | "defaultValue" | "onValueChange" | "type" | "size" | "maxLength" | "pattern"> {
+    /** Number of digits. The Figma spec is 6 (WhatsApp / SMS code). */
+    length?: number;
+    /** The code typed so far (digits only). Use when controlled. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Called when the last digit is typed or a full code is pasted. Check the code here
+     * and set `validating`: there is no submit button.
+     */
+    onComplete?: (value: string) => void;
+    /** State=Validating: spinner + message, and the code can't be edited meanwhile. */
+    validating?: boolean;
+    /** Text next to the spinner: "Comprobando el código…". Defaults to "Cargando". */
+    validatingLabel?: ReactNode;
+    /**
+     * State=Error: every cell in red and this message under them. Say what to do: "El
+     * código no es correcto. Revisa el mensaje o pide uno nuevo."
+     */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * Verification code sent by WhatsApp or SMS. Drawn as six cells but it is ONE input
+ * (`inputmode="numeric" autocomplete="one-time-code"`), laid transparently over the
+ * cells: the phone offers the code from the message in one tap, paste works, and a
+ * screen reader announces a single field ("Código de verificación"), not six.
+ *
+ * Base UI's OTPField renders one input per cell, which is exactly what the spec rules
+ * out, so this is a plain input driving the cells.
+ *
+ * - The code is checked on its own when complete (`onComplete` → `validating`).
+ * - The message under the cells (validating / error) is `aria-live="polite"`.
+ * - The accessible name defaults to "Código de verificación"; the heading above the
+ *   cells ("Escribe el código") is not a label.
+ */
+export declare function OTPInput({ length, value, defaultValue, onValueChange, onComplete, validating, validatingLabel, error, disabled, readOnly, className, onFocus, onBlur, onChange, onPaste, onSelect, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: OTPInputProps): React.JSX.Element;