@mediquo/medicore 0.1.0

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,99 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactNode } from "react";
+import { type NavItemProps } from "../nav-item";
+interface SidebarContextValue {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    /** Set by AppShell when the sidebar is shown as the mobile menu drawer. */
+    onClose?: () => void;
+}
+/**
+ * Internal: AppShell renders the same sidebar inside the mobile menu drawer. There it
+ * is always expanded and the collapse chevron becomes a close button.
+ */
+export declare const SidebarDrawerContext: import("react").Context<(() => void) | null>;
+/** Collapsed state of the nearest `Sidebar`, for custom content inside it. */
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProps extends ComponentProps<"div"> {
+    /** Icon-only rail (76px). Controlled; pair it with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Called by the header chevron. Persist it (e.g. in localStorage) if the app wants to remember it. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+/**
+ * Desktop side menu: 320px expanded, 76px collapsed, full height. Compose it:
+ *
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader />                       // logo + collapse chevron
+ *   <SidebarNav>                            // <nav aria-label="Navegación principal">
+ *     <SidebarSection>
+ *       <SidebarItem icon={<Home02Icon />} render={<Link to="/" />}>Inicio</SidebarItem>
+ *     </SidebarSection>
+ *     <SidebarSection>…</SidebarSection>    // a divider separates sections
+ *   </SidebarNav>
+ *   <SidebarFooter><SidebarUser … /></SidebarFooter>
+ * </Sidebar>
+ * ```
+ *
+ * - Sections and items come from the app: MediCore draws them, it doesn't decide them.
+ * - `SidebarNav` takes the free height, so the footer (user card) sits at the bottom;
+ *   if the items don't fit, the nav scrolls on its own.
+ * - Collapsed keeps every section name in the DOM (it is each link's accessible name)
+ *   and shows it in a tooltip.
+ */
+export declare function Sidebar({ collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, className, ...props }: SidebarProps): React.JSX.Element;
+export interface SidebarHeaderProps extends ComponentProps<"div"> {
+    /** The brand at the top. Defaults to the mediQuo `Logo`; a clinic passes its own. Hidden when collapsed. */
+    children?: ReactNode;
+}
+/**
+ * Logo on the left, collapse chevron on the right (the chevron used to be at the
+ * bottom, under the user card, where nobody found it). 88px tall, like PageHeader,
+ * so both lines match.
+ */
+export declare function SidebarHeader({ children, className, ...props }: SidebarHeaderProps): React.JSX.Element;
+export interface SidebarNavProps extends ComponentProps<"nav"> {
+}
+/**
+ * The `<nav>` landmark, named "Navegación principal" (`mainNavigation` label). Takes
+ * the free height and scrolls if the sections don't fit.
+ */
+export declare function SidebarNav({ "aria-label": ariaLabel, className, children, ...props }: SidebarNavProps): React.JSX.Element;
+export interface SidebarSectionProps extends ComponentProps<"ul"> {
+}
+/**
+ * A group of items (a `<ul>`). Every section after the first is preceded by a
+ * `Divider`: main sections first, support/secondary ones after.
+ */
+export declare function SidebarSection({ className, ...props }: SidebarSectionProps): React.JSX.Element;
+export interface SidebarItemProps extends Omit<NavItemProps, "collapsed"> {
+}
+/**
+ * A `NavItem` in a list item, collapsed together with the sidebar. Pass the router's
+ * link with `render`; for the root route use exact matching
+ * (`<Link to="/" activeOptions={{ exact: true }} />`) or it is active everywhere.
+ */
+export declare function SidebarItem(props: SidebarItemProps): React.JSX.Element;
+export interface SidebarFooterProps extends ComponentProps<"div"> {
+}
+/** Bottom of the sidebar, pushed down by the nav: the user card (`SidebarUser`). */
+export declare function SidebarFooter({ className, ...props }: SidebarFooterProps): React.JSX.Element;
+export interface SidebarUserProps extends Omit<useRender.ComponentProps<"div">, "className" | "children"> {
+    /** `<Avatar size={40} initials="UP" />` (or with `src`). Leave its `alt` out: the name is next to it. */
+    avatar: ReactNode;
+    /** "Usuario paciente". */
+    name: ReactNode;
+    /** Second line, truncated: the email, or the clinic and role in the admin. */
+    description?: ReactNode;
+    className?: string;
+}
+/**
+ * Who is signed in: avatar, name and a secondary line. Collapsed, only the avatar
+ * shows (the name stays for screen readers). To open the profile or a menu, pass
+ * `render={<Link to="/perfil" />}` or `render={<button type="button" />}`.
+ */
+export declare function SidebarUser({ avatar, name, description, className, render, ...props }: SidebarUserProps): React.JSX.Element;
+export {};

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,228 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { useRender } from "@base-ui/react/use-render";
+import { useContext, useState, useCallback, useMemo, createContext } from "react";
+import { ChevronLeftIcon } from "../../icons/generated/chevron-left.js";
+import { ChevronRightIcon } from "../../icons/generated/chevron-right.js";
+import { XCloseIcon } from "../../icons/generated/x-close.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Logo } from "../logo/logo.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { NavItem } from "../nav-item/nav-item.js";
+import { Divider } from "../divider/divider.js";
+const SidebarContext = createContext({
+  collapsed: false,
+  setCollapsed: () => {
+  }
+});
+const SidebarDrawerContext = createContext(null);
+function useSidebar() {
+  return useContext(SidebarContext);
+}
+function Sidebar({
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  className,
+  ...props
+}) {
+  const onClose = useContext(SidebarDrawerContext) ?? void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);
+  const isControlled = collapsedProp !== void 0;
+  const collapsed = onClose ? false : isControlled ? collapsedProp : uncontrolled;
+  const setCollapsed = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onCollapsedChange?.(next);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const value = useMemo(
+    () => ({ collapsed, setCollapsed, onClose }),
+    [collapsed, setCollapsed, onClose]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar",
+      "data-collapsed": collapsed || void 0,
+      className: cn(
+        "flex h-full shrink-0 flex-col overflow-hidden border-border border-r bg-surface pb-5",
+        "transition-[width] duration-200 motion-reduce:transition-none",
+        onClose ? "w-full" : collapsed ? "w-19" : "w-80",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function SidebarHeader({
+  children,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const { collapsed, setCollapsed, onClose } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      className: cn(
+        "flex h-22 shrink-0 items-center gap-2",
+        collapsed ? "justify-center" : "justify-between pr-5 pl-6",
+        className
+      ),
+      ...props,
+      children: [
+        !collapsed && (children ?? /* @__PURE__ */ jsx(Logo, {})),
+        onClose ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(XCloseIcon, {}),
+            "aria-label": labels.close,
+            onClick: onClose,
+            className: "not-data-disabled:hover:bg-surface-raised"
+          }
+        ) : /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "data-slot": "sidebar-toggle",
+            variant: "ghost",
+            size: "small",
+            icon: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+            "aria-label": collapsed ? labels.expandSidebar : labels.collapseSidebar,
+            "aria-expanded": !collapsed,
+            onClick: () => setCollapsed(!collapsed),
+            className: "not-data-disabled:hover:bg-surface-raised"
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarNav({
+  "aria-label": ariaLabel,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "sidebar-nav",
+      "aria-label": ariaLabel ?? labels.mainNavigation,
+      className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 300, children })
+    }
+  );
+}
+function SidebarSection({
+  className,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-section", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex py-2 [:first-child>&]:hidden",
+          collapsed ? "justify-center" : "px-5"
+        ),
+        children: /* @__PURE__ */ jsx(Divider, { className: collapsed ? "w-10" : void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn(
+          "flex flex-col gap-1 py-2 [:not(:first-child)>&]:pt-0",
+          collapsed ? "items-center" : "px-5",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function SidebarItem(props) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsx("li", { "data-slot": "sidebar-item", className: "flex", children: /* @__PURE__ */ jsx(NavItem, { collapsed, ...props }) });
+}
+function SidebarFooter({
+  className,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      className: cn(
+        "flex shrink-0 flex-col py-2",
+        collapsed ? "items-center" : "px-5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarUser({
+  avatar,
+  name,
+  description,
+  className,
+  render,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: {
+      "data-slot": "sidebar-user",
+      className: cn(
+        "flex min-w-0 items-center gap-3 rounded-md text-left",
+        "focus-ring focus-visible:-outline-offset-2",
+        render && "cursor-pointer",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        avatar,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col",
+              collapsed && "sr-only"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-body-default-strong text-text-primary", children: name }),
+              description && /* @__PURE__ */ jsx("span", { className: "truncate text-caption-default text-text-secondary", children: description })
+            ]
+          }
+        )
+      ] }),
+      ...props
+    }
+  });
+}
+export {
+  Sidebar,
+  SidebarDrawerContext,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarNav,
+  SidebarSection,
+  SidebarUser,
+  useSidebar
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/components/sidebar/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Tooltip } from \"@base-ui/react/tooltip\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { ChevronLeftIcon, ChevronRightIcon, XCloseIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Divider } from \"../divider\";\nimport { IconButton } from \"../icon-button\";\nimport { Logo } from \"../logo\";\nimport { NavItem, type NavItemProps } from \"../nav-item\";\n\ninterface SidebarContextValue {\n  collapsed: boolean;\n  setCollapsed: (collapsed: boolean) => void;\n  /** Set by AppShell when the sidebar is shown as the mobile menu drawer. */\n  onClose?: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({\n  collapsed: false,\n  setCollapsed: () => {},\n});\n\n/**\n * Internal: AppShell renders the same sidebar inside the mobile menu drawer. There it\n * is always expanded and the collapse chevron becomes a close button.\n */\nexport const SidebarDrawerContext = createContext<(() => void) | null>(null);\n\n/** Collapsed state of the nearest `Sidebar`, for custom content inside it. */\nexport function useSidebar(): SidebarContextValue {\n  return useContext(SidebarContext);\n}\n\nexport interface SidebarProps extends ComponentProps<\"div\"> {\n  /** Icon-only rail (76px). Controlled; pair it with `onCollapsedChange`. */\n  collapsed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultCollapsed?: boolean;\n  /** Called by the header chevron. Persist it (e.g. in localStorage) if the app wants to remember it. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n/**\n * Desktop side menu: 320px expanded, 76px collapsed, full height. Compose it:\n *\n * ```tsx\n * <Sidebar>\n *   <SidebarHeader />                       // logo + collapse chevron\n *   <SidebarNav>                            // <nav aria-label=\"Navegación principal\">\n *     <SidebarSection>\n *       <SidebarItem icon={<Home02Icon />} render={<Link to=\"/\" />}>Inicio</SidebarItem>\n *     </SidebarSection>\n *     <SidebarSection>…</SidebarSection>    // a divider separates sections\n *   </SidebarNav>\n *   <SidebarFooter><SidebarUser … /></SidebarFooter>\n * </Sidebar>\n * ```\n *\n * - Sections and items come from the app: MediCore draws them, it doesn't decide them.\n * - `SidebarNav` takes the free height, so the footer (user card) sits at the bottom;\n *   if the items don't fit, the nav scrolls on its own.\n * - Collapsed keeps every section name in the DOM (it is each link's accessible name)\n *   and shows it in a tooltip.\n */\nexport function Sidebar({\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  className,\n  ...props\n}: SidebarProps): React.JSX.Element {\n  const onClose = useContext(SidebarDrawerContext) ?? undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const isControlled = collapsedProp !== undefined;\n  // In the mobile drawer there is room for the labels: never collapsed.\n  const collapsed = onClose\n    ? false\n    : isControlled\n      ? collapsedProp\n      : uncontrolled;\n\n  const setCollapsed = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCollapsedChange?.(next);\n    },\n    [isControlled, onCollapsedChange],\n  );\n\n  const value = useMemo(\n    () => ({ collapsed, setCollapsed, onClose }),\n    [collapsed, setCollapsed, onClose],\n  );\n\n  return (\n    <SidebarContext.Provider value={value}>\n      <div\n        data-slot=\"sidebar\"\n        data-collapsed={collapsed || undefined}\n        className={cn(\n          \"flex h-full shrink-0 flex-col overflow-hidden border-border border-r bg-surface pb-5\",\n          \"transition-[width] duration-200 motion-reduce:transition-none\",\n          onClose ? \"w-full\" : collapsed ? \"w-19\" : \"w-80\",\n          className,\n        )}\n        {...props}\n      />\n    </SidebarContext.Provider>\n  );\n}\n\nexport interface SidebarHeaderProps extends ComponentProps<\"div\"> {\n  /** The brand at the top. Defaults to the mediQuo `Logo`; a clinic passes its own. Hidden when collapsed. */\n  children?: ReactNode;\n}\n\n/**\n * Logo on the left, collapse chevron on the right (the chevron used to be at the\n * bottom, under the user card, where nobody found it). 88px tall, like PageHeader,\n * so both lines match.\n */\nexport function SidebarHeader({\n  children,\n  className,\n  ...props\n}: SidebarHeaderProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const { collapsed, setCollapsed, onClose } = useSidebar();\n\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      className={cn(\n        \"flex h-22 shrink-0 items-center gap-2\",\n        collapsed ? \"justify-center\" : \"justify-between pr-5 pl-6\",\n        className,\n      )}\n      {...props}\n    >\n      {!collapsed && (children ?? <Logo />)}\n      {onClose ? (\n        <IconButton\n          variant=\"ghost\"\n          size=\"small\"\n          icon={<XCloseIcon />}\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"not-data-disabled:hover:bg-surface-raised\"\n        />\n      ) : (\n        <IconButton\n          data-slot=\"sidebar-toggle\"\n          variant=\"ghost\"\n          size=\"small\"\n          icon={collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n          aria-label={collapsed ? labels.expandSidebar : labels.collapseSidebar}\n          aria-expanded={!collapsed}\n          onClick={() => setCollapsed(!collapsed)}\n          // Ghost hovers to `surface`, which is the sidebar's own background.\n          className=\"not-data-disabled:hover:bg-surface-raised\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface SidebarNavProps extends ComponentProps<\"nav\"> {}\n\n/**\n * The `<nav>` landmark, named \"Navegación principal\" (`mainNavigation` label). Takes\n * the free height and scrolls if the sections don't fit.\n */\nexport function SidebarNav({\n  \"aria-label\": ariaLabel,\n  className,\n  children,\n  ...props\n}: SidebarNavProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  return (\n    <nav\n      data-slot=\"sidebar-nav\"\n      aria-label={ariaLabel ?? labels.mainNavigation}\n      className={cn(\"flex min-h-0 flex-1 flex-col overflow-y-auto\", className)}\n      {...props}\n    >\n      {/* Moving from one collapsed item to the next opens its tooltip at once. */}\n      <Tooltip.Provider delay={300}>{children}</Tooltip.Provider>\n    </nav>\n  );\n}\n\nexport interface SidebarSectionProps extends ComponentProps<\"ul\"> {}\n\n/**\n * A group of items (a `<ul>`). Every section after the first is preceded by a\n * `Divider`: main sections first, support/secondary ones after.\n */\nexport function SidebarSection({\n  className,\n  ...props\n}: SidebarSectionProps): React.JSX.Element {\n  const { collapsed } = useSidebar();\n\n  return (\n    <div data-slot=\"sidebar-section\" className=\"flex flex-col\">\n      <div\n        className={cn(\n          \"flex py-2 [:first-child>&]:hidden\",\n          collapsed ? \"justify-center\" : \"px-5\",\n        )}\n      >\n        <Divider className={collapsed ? \"w-10\" : undefined} />\n      </div>\n      <ul\n        className={cn(\n          \"flex flex-col gap-1 py-2 [:not(:first-child)>&]:pt-0\",\n          collapsed ? \"items-center\" : \"px-5\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport interface SidebarItemProps extends Omit<NavItemProps, \"collapsed\"> {}\n\n/**\n * A `NavItem` in a list item, collapsed together with the sidebar. Pass the router's\n * link with `render`; for the root route use exact matching\n * (`<Link to=\"/\" activeOptions={{ exact: true }} />`) or it is active everywhere.\n */\nexport function SidebarItem(props: SidebarItemProps): React.JSX.Element {\n  const { collapsed } = useSidebar();\n\n  return (\n    <li data-slot=\"sidebar-item\" className=\"flex\">\n      <NavItem collapsed={collapsed} {...props} />\n    </li>\n  );\n}\n\nexport interface SidebarFooterProps extends ComponentProps<\"div\"> {}\n\n/** Bottom of the sidebar, pushed down by the nav: the user card (`SidebarUser`). */\nexport function SidebarFooter({\n  className,\n  ...props\n}: SidebarFooterProps): React.JSX.Element {\n  const { collapsed } = useSidebar();\n\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      className={cn(\n        \"flex shrink-0 flex-col py-2\",\n        collapsed ? \"items-center\" : \"px-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface SidebarUserProps\n  extends Omit<useRender.ComponentProps<\"div\">, \"className\" | \"children\"> {\n  /** `<Avatar size={40} initials=\"UP\" />` (or with `src`). Leave its `alt` out: the name is next to it. */\n  avatar: ReactNode;\n  /** \"Usuario paciente\". */\n  name: ReactNode;\n  /** Second line, truncated: the email, or the clinic and role in the admin. */\n  description?: ReactNode;\n  className?: string;\n}\n\n/**\n * Who is signed in: avatar, name and a secondary line. Collapsed, only the avatar\n * shows (the name stays for screen readers). To open the profile or a menu, pass\n * `render={<Link to=\"/perfil\" />}` or `render={<button type=\"button\" />}`.\n */\nexport function SidebarUser({\n  avatar,\n  name,\n  description,\n  className,\n  render,\n  ...props\n}: SidebarUserProps): React.JSX.Element {\n  const { collapsed } = useSidebar();\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: {\n      \"data-slot\": \"sidebar-user\",\n      className: cn(\n        \"flex min-w-0 items-center gap-3 rounded-md text-left\",\n        \"focus-ring focus-visible:-outline-offset-2\",\n        render && \"cursor-pointer\",\n        className,\n      ),\n      children: (\n        <>\n          {avatar}\n          <span\n            className={cn(\n              \"flex min-w-0 flex-1 flex-col\",\n              collapsed && \"sr-only\",\n            )}\n          >\n            <span className=\"text-body-default-strong text-text-primary\">\n              {name}\n            </span>\n            {description && (\n              <span className=\"truncate text-caption-default text-text-secondary\">\n                {description}\n              </span>\n            )}\n          </span>\n        </>\n      ),\n      ...props,\n    },\n  });\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, type SkeletonShape, skeletonVariants, } from "./skeleton";

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from "react";
+export declare const skeletonVariants: (props?: ({
+    shape?: "circle" | "line" | "block" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SkeletonShape = "line" | "block" | "circle";
+export interface SkeletonProps extends ComponentProps<"span"> {
+    /**
+     * `line` for a line of text (14px, the height of Body/Small) · `block` for cards and
+     * images · `circle` for avatars. Resize freely with `className` (`w-3/5`, `h-40`,
+     * `size-avatar-2xl`…).
+     */
+    shape?: SkeletonShape;
+}
+/**
+ * Placeholder for content that is loading. It is a shape, not a mock-up.
+ *
+ * A skeleton is not a prettier spinner. The rule is duration and predictability:
+ * - Under 300ms: show NOTHING. A skeleton that flashes for two frames is worse than
+ *   the wait (the delay is the app's job, not this component's).
+ * - Known, stable shape (a list of appointments, a professional's card): skeleton,
+ *   with the SAME shape as what will arrive, or the content jumps when it lands.
+ * - Unknown duration or unpredictable shape (a submission, a search): `Spinner`.
+ *
+ * Don't imitate a paragraph with lines of random widths: use two or three lines of
+ * clearly different widths (100%, 60%) that suggest hierarchy.
+ *
+ * Accessibility: every skeleton is `aria-hidden`; put `aria-busy="true"` on the
+ * container while it loads, otherwise a screen reader announces a list of empty boxes.
+ *
+ * It uses `surface-raised`, not a darker grey: it must read as "something goes here",
+ * not as real content.
+ */
+export declare function Skeleton({ shape, className, ...props }: SkeletonProps): React.JSX.Element;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const skeletonVariants = cva(
+  [
+    "block bg-surface-raised",
+    // Shimmer only with motion allowed; with prefers-reduced-motion it stays still in
+    // its colour, which still reads as "loading".
+    "motion-safe:bg-linear-to-r motion-safe:bg-size-[300%_100%]",
+    "motion-safe:from-surface-raised motion-safe:from-40%",
+    "motion-safe:via-surface motion-safe:via-50%",
+    "motion-safe:to-surface-raised motion-safe:to-60%",
+    "motion-safe:animate-skeleton-shimmer"
+  ],
+  {
+    variants: {
+      shape: {
+        line: "h-3.5 w-full rounded-full",
+        block: "h-24 w-full rounded-md",
+        circle: "size-avatar-lg shrink-0 rounded-full"
+      }
+    },
+    defaultVariants: {
+      shape: "line"
+    }
+  }
+);
+function Skeleton({
+  shape,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "skeleton",
+      "aria-hidden": "true",
+      className: cn(skeletonVariants({ shape }), className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\n// The shimmer (`animate-skeleton-shimmer`, in tokens.css) moves background-position\n// 100% → 0%, so the highlight band travels left to right; both ends are flat, so the\n// loop has no visible jump.\nexport const skeletonVariants = cva(\n  [\n    \"block bg-surface-raised\",\n    // Shimmer only with motion allowed; with prefers-reduced-motion it stays still in\n    // its colour, which still reads as \"loading\".\n    \"motion-safe:bg-linear-to-r motion-safe:bg-size-[300%_100%]\",\n    \"motion-safe:from-surface-raised motion-safe:from-40%\",\n    \"motion-safe:via-surface motion-safe:via-50%\",\n    \"motion-safe:to-surface-raised motion-safe:to-60%\",\n    \"motion-safe:animate-skeleton-shimmer\",\n  ],\n  {\n    variants: {\n      shape: {\n        line: \"h-3.5 w-full rounded-full\",\n        block: \"h-24 w-full rounded-md\",\n        circle: \"size-avatar-lg shrink-0 rounded-full\",\n      },\n    },\n    defaultVariants: {\n      shape: \"line\",\n    },\n  },\n);\n\nexport type SkeletonShape = \"line\" | \"block\" | \"circle\";\n\nexport interface SkeletonProps extends ComponentProps<\"span\"> {\n  /**\n   * `line` for a line of text (14px, the height of Body/Small) · `block` for cards and\n   * images · `circle` for avatars. Resize freely with `className` (`w-3/5`, `h-40`,\n   * `size-avatar-2xl`…).\n   */\n  shape?: SkeletonShape;\n}\n\n/**\n * Placeholder for content that is loading. It is a shape, not a mock-up.\n *\n * A skeleton is not a prettier spinner. The rule is duration and predictability:\n * - Under 300ms: show NOTHING. A skeleton that flashes for two frames is worse than\n *   the wait (the delay is the app's job, not this component's).\n * - Known, stable shape (a list of appointments, a professional's card): skeleton,\n *   with the SAME shape as what will arrive, or the content jumps when it lands.\n * - Unknown duration or unpredictable shape (a submission, a search): `Spinner`.\n *\n * Don't imitate a paragraph with lines of random widths: use two or three lines of\n * clearly different widths (100%, 60%) that suggest hierarchy.\n *\n * Accessibility: every skeleton is `aria-hidden`; put `aria-busy=\"true\"` on the\n * container while it loads, otherwise a screen reader announces a list of empty boxes.\n *\n * It uses `surface-raised`, not a darker grey: it must read as \"something goes here\",\n * not as real content.\n */\nexport function Skeleton({\n  shape,\n  className,\n  ...props\n}: SkeletonProps): React.JSX.Element {\n  return (\n    <span\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(skeletonVariants({ shape }), className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAQO,MAAM,mBAAmB;AAAA,EAC9B;AAAA,IACE;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAgCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,WAAW,GAAG,iBAAiB,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MACnD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/social-button/index.d.ts

@@ -0,0 +1 @@
+export { SocialButton, type SocialButtonProps, type SocialProvider, } from "./social-button";

package/dist/components/social-button/social-button.d.ts

@@ -0,0 +1,29 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ReactNode } from "react";
+/** `phone`: a code by WhatsApp to the mobile number. */
+export type SocialProvider = "google" | "apple" | "phone";
+export interface SocialButtonProps extends Omit<BaseButton.Props, "className" | "children"> {
+    provider: SocialProvider;
+    /**
+     * While the provider's window opens: the mark becomes a spinner and the button
+     * ignores more taps (`aria-busy`), without looking disabled.
+     */
+    loading?: boolean;
+    /**
+     * Defaults to "Continuar con Google" / "Continuar con Apple" / "Continuar con mi
+     * móvil" — "Continuar", not "Iniciar sesión": the same button signs in and signs
+     * up, and the patient doesn't need to know whether they have an account.
+     */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A way in: Google, Apple or the phone. The three look the same on purpose — none is
+ * "the right one", and it meets Google's and Apple's rules (a white or black button
+ * with their logo, never in another brand's colour). 44px high, full width.
+ *
+ * Never disable them until the terms are accepted: a grey button doesn't say why it
+ * doesn't work. If pressed without accepting, mark the missing checkboxes in error
+ * (`CheckboxField error`) with the message below.
+ */
+export declare function SocialButton({ provider, loading, children, className, type, ...props }: SocialButtonProps): React.JSX.Element;

package/dist/components/social-button/social-button.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { MessageIcon } from "../../icons/generated/message.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Spinner } from "../spinner/spinner.js";
+import { buttonVariants } from "../button/button.js";
+import { BrandMark } from "../brand-mark/brand-mark.js";
+function SocialButton({
+  provider,
+  loading = false,
+  children,
+  className,
+  type = "button",
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const mark = {
+    google: /* @__PURE__ */ jsx(BrandMark, { brand: "google" }),
+    apple: /* @__PURE__ */ jsx(BrandMark, { brand: "apple" }),
+    phone: /* @__PURE__ */ jsx(MessageIcon, {})
+  }[provider];
+  const label = {
+    google: labels.continueWithGoogle,
+    apple: labels.continueWithApple,
+    phone: labels.continueWithPhone
+  }[provider];
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "social-button",
+      "data-provider": provider,
+      type,
+      disabled: loading,
+      focusableWhenDisabled: loading,
+      "aria-busy": loading || void 0,
+      className: cn(
+        buttonVariants({ variant: "outline", size: null }),
+        "h-control-lg w-full gap-3 px-4 [&_svg]:size-icon-md",
+        className
+      ),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: 20, label: null }) : mark,
+        children ?? label
+      ]
+    }
+  );
+}
+export {
+  SocialButton
+};
+//# sourceMappingURL=social-button.js.map

package/dist/components/social-button/social-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-button.js","sources":["../../../src/components/social-button/social-button.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport type { ReactNode } from \"react\";\n\nimport { MessageIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { BrandMark } from \"../brand-mark\";\nimport { buttonVariants } from \"../button\";\nimport { Spinner } from \"../spinner\";\n\n/** `phone`: a code by WhatsApp to the mobile number. */\nexport type SocialProvider = \"google\" | \"apple\" | \"phone\";\n\nexport interface SocialButtonProps\n  extends Omit<BaseButton.Props, \"className\" | \"children\"> {\n  provider: SocialProvider;\n  /**\n   * While the provider's window opens: the mark becomes a spinner and the button\n   * ignores more taps (`aria-busy`), without looking disabled.\n   */\n  loading?: boolean;\n  /**\n   * Defaults to \"Continuar con Google\" / \"Continuar con Apple\" / \"Continuar con mi\n   * móvil\" — \"Continuar\", not \"Iniciar sesión\": the same button signs in and signs\n   * up, and the patient doesn't need to know whether they have an account.\n   */\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * A way in: Google, Apple or the phone. The three look the same on purpose — none is\n * \"the right one\", and it meets Google's and Apple's rules (a white or black button\n * with their logo, never in another brand's colour). 44px high, full width.\n *\n * Never disable them until the terms are accepted: a grey button doesn't say why it\n * doesn't work. If pressed without accepting, mark the missing checkboxes in error\n * (`CheckboxField error`) with the message below.\n */\nexport function SocialButton({\n  provider,\n  loading = false,\n  children,\n  className,\n  type = \"button\",\n  ...props\n}: SocialButtonProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  const mark = {\n    google: <BrandMark brand=\"google\" />,\n    apple: <BrandMark brand=\"apple\" />,\n    phone: <MessageIcon />,\n  }[provider];\n\n  const label = {\n    google: labels.continueWithGoogle,\n    apple: labels.continueWithApple,\n    phone: labels.continueWithPhone,\n  }[provider];\n\n  return (\n    <BaseButton\n      data-slot=\"social-button\"\n      data-provider={provider}\n      type={type}\n      disabled={loading}\n      focusableWhenDisabled={loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        buttonVariants({ variant: \"outline\", size: null }),\n        \"h-control-lg w-full gap-3 px-4 [&_svg]:size-icon-md\",\n        className,\n      )}\n      {...props}\n    >\n      {loading ? <Spinner size={20} label={null} /> : mark}\n      {children ?? label}\n    </BaseButton>\n  );\n}\n"],"names":["BaseButton"],"mappings":";;;;;;;;AAuCO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAyC;AACvC,QAAM,SAAS,kBAAA;AAEf,QAAM,OAAO;AAAA,IACX,QAAQ,oBAAC,WAAA,EAAU,OAAM,SAAA,CAAS;AAAA,IAClC,OAAO,oBAAC,WAAA,EAAU,OAAM,QAAA,CAAQ;AAAA,IAChC,2BAAQ,aAAA,CAAA,CAAY;AAAA,EAAA,EACpB,QAAQ;AAEV,QAAM,QAAQ;AAAA,IACZ,QAAQ,OAAO;AAAA,IACf,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,EAAA,EACd,QAAQ;AAEV,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf;AAAA,MACA,UAAU;AAAA,MACV,uBAAuB;AAAA,MACvB,aAAW,WAAW;AAAA,MACtB,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,WAAW,MAAM,MAAM;AAAA,QACjD;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,8BAAW,SAAA,EAAQ,MAAM,IAAI,OAAO,MAAM,IAAK;AAAA,QAC/C,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB;"}

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

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from "./spinner";

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+export interface SpinnerProps extends Omit<ComponentProps<"span">, "color"> {
+    /** 16 inside Button and IconButton, 20 in NavItem, 24 standalone. */
+    size?: 16 | 20 | 24;
+    /** `inverse` on solid brand or error fills, where the default colour disappears. */
+    color?: "default" | "inverse";
+    /**
+     * What is loading, for screen readers. Defaults to "Cargando". Pass `null` when the
+     * spinner sits inside a control that already announces it (e.g. `aria-busy`).
+     */
+    label?: string | null;
+}
+/**
+ * Loading indicator: the `loading-01` glyph spinning 360° in 800ms, linear.
+ *
+ * It goes in text-secondary, not in the brand colour: it means "working on it", not
+ * success or a call to action. With `prefers-reduced-motion` it stays still, so the
+ * label becomes visible — a still glyph says nothing on its own.
+ */
+export declare function Spinner({ size, color, label, className, ...props }: SpinnerProps): React.JSX.Element;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Loading01Icon } from "../../icons/generated/loading-01.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const spinnerVariants = cva("inline-flex shrink-0 items-center gap-2", {
+  variants: {
+    color: {
+      default: "text-text-secondary",
+      inverse: "text-text-inverse"
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+const iconSizes = {
+  16: "sm",
+  20: "md",
+  24: "lg"
+};
+function Spinner({
+  size = 20,
+  color,
+  label,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const text = label === void 0 ? labels.loading : label;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "spinner",
+      role: text === null ? void 0 : "status",
+      className: cn(spinnerVariants({ color }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Loading01Icon,
+          {
+            size: iconSizes[size],
+            className: "motion-safe:animate-[spin_800ms_linear_infinite]"
+          }
+        ),
+        text !== null && /* @__PURE__ */ jsx("span", { className: "sr-only text-body-small motion-reduce:not-sr-only", children: text })
+      ]
+    }
+  );
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { Loading01Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nconst spinnerVariants = cva(\"inline-flex shrink-0 items-center gap-2\", {\n  variants: {\n    color: {\n      default: \"text-text-secondary\",\n      inverse: \"text-text-inverse\",\n    },\n  },\n  defaultVariants: {\n    color: \"default\",\n  },\n});\n\nconst iconSizes = {\n  16: \"sm\",\n  20: \"md\",\n  24: \"lg\",\n} as const;\n\nexport interface SpinnerProps extends Omit<ComponentProps<\"span\">, \"color\"> {\n  /** 16 inside Button and IconButton, 20 in NavItem, 24 standalone. */\n  size?: 16 | 20 | 24;\n  /** `inverse` on solid brand or error fills, where the default colour disappears. */\n  color?: \"default\" | \"inverse\";\n  /**\n   * What is loading, for screen readers. Defaults to \"Cargando\". Pass `null` when the\n   * spinner sits inside a control that already announces it (e.g. `aria-busy`).\n   */\n  label?: string | null;\n}\n\n/**\n * Loading indicator: the `loading-01` glyph spinning 360° in 800ms, linear.\n *\n * It goes in text-secondary, not in the brand colour: it means \"working on it\", not\n * success or a call to action. With `prefers-reduced-motion` it stays still, so the\n * label becomes visible — a still glyph says nothing on its own.\n */\nexport function Spinner({\n  size = 20,\n  color,\n  label,\n  className,\n  ...props\n}: SpinnerProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const text = label === undefined ? labels.loading : label;\n\n  return (\n    <span\n      data-slot=\"spinner\"\n      role={text === null ? undefined : \"status\"}\n      className={cn(spinnerVariants({ color }), className)}\n      {...props}\n    >\n      <Loading01Icon\n        size={iconSizes[size]}\n        className=\"motion-safe:animate-[spin_800ms_linear_infinite]\"\n      />\n      {text !== null && (\n        <span className=\"sr-only text-body-small motion-reduce:not-sr-only\">\n          {text}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,kBAAkB,IAAI,2CAA2C;AAAA,EACrE,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAED,MAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAqBO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,QAAM,SAAS,kBAAA;AACf,QAAM,OAAO,UAAU,SAAY,OAAO,UAAU;AAEpD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAM,SAAS,OAAO,SAAY;AAAA,MAClC,WAAW,GAAG,gBAAgB,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,UAAU,IAAI;AAAA,YACpB,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEX,SAAS,QACR,oBAAC,QAAA,EAAK,WAAU,qDACb,UAAA,KAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/stat-tile/index.d.ts

@@ -0,0 +1 @@
+export { StatTile, type StatTileProps } from "./stat-tile";