@mediquo/medicore 0.1.0

package/dist/components/field/field.d.ts

@@ -0,0 +1,47 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { type ReactNode } from "react";
+export interface FieldProps extends Omit<BaseField.Root.Props, "className" | "children"> {
+    /** Visible label (Label/Strong). Without it, name the control with `aria-label`. */
+    label?: ReactNode;
+    /**
+     * Adds "(opcional)" to the label. Mark what is optional, not what is required: in a
+     * clinical form almost everything is required, and a lone asterisk says nothing to
+     * a screen reader.
+     */
+    optional?: boolean;
+    /** Help text under the control, in text-secondary. Replaced by `error` when there is one. */
+    description?: ReactNode;
+    /**
+     * Error message. Turns the field invalid (red border on the control, `aria-invalid`)
+     * and takes the place of the description, in text-error. Say what to do, not just
+     * "Campo no válido".
+     */
+    error?: ReactNode;
+    /**
+     * Character limit. Shows the "140/240" counter next to the label, applies
+     * `maxLength` to the Textarea/Input inside and announces the count to screen
+     * readers only when the limit is close, not on every key.
+     */
+    maxLength?: number;
+    className?: string;
+    /** The control: Input, Select, NativeSelect, Textarea, PhoneInput or any custom one. */
+    children: ReactNode;
+}
+/**
+ * Label + control + message: the building block of every form. Built on Base UI
+ * Field, so the label, `aria-describedby` and `aria-invalid` wire themselves to the
+ * control inside.
+ *
+ * - Label, control and message are 8px apart.
+ * - The message is 14px (Body/Small): an error is content, it tells the person why
+ *   they can't continue.
+ * - An error is never shown only with the red border: `error` always renders the text.
+ * - Any control works: Input, Select, NativeSelect, Textarea, PhoneInput, a date
+ *   (Input with `CalendarIcon` and "dd/mm/aaaa"), or a custom one such as a
+ *   RadioGroup or a SegmentedControl (they pick up the label via `aria-labelledby`).
+ * - With PhoneInput, pass `name` to PhoneInput, not to Field: it submits the number
+ *   without spaces from a hidden input.
+ * - Native constraints (`required`, `pattern`…) and Base UI's `validate` show their
+ *   message here too.
+ */
+export declare function Field({ label, optional, description, error, maxLength, invalid, disabled, className, children, ...props }: FieldProps): React.JSX.Element;

package/dist/components/field/field.js

@@ -0,0 +1,116 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Field as Field$1 } from "@base-ui/react/field";
+import { useState, useMemo, useEffect } from "react";
+import { cn } from "../../lib/cn.js";
+import { FieldContext } from "./field-context.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const messageClass = "text-body-small";
+function Field({
+  label,
+  optional = false,
+  description,
+  error,
+  maxLength,
+  invalid,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const [nativeLabel, setNativeLabel] = useState(true);
+  const [length, setLength] = useState(0);
+  const [announcement, setAnnouncement] = useState("");
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const context = useMemo(
+    () => ({ disabled, maxLength, setLength, setNativeLabel }),
+    [disabled, maxLength]
+  );
+  useEffect(() => {
+    if (maxLength === void 0) {
+      return void 0;
+    }
+    const threshold = Math.max(10, Math.ceil(maxLength * 0.1));
+    if (maxLength - length > threshold) {
+      setAnnouncement("");
+      return void 0;
+    }
+    const timeout = setTimeout(
+      () => setAnnouncement(labels.characterCount(length, maxLength)),
+      600
+    );
+    return () => clearTimeout(timeout);
+  }, [length, maxLength, labels]);
+  return /* @__PURE__ */ jsxs(
+    Field$1.Root,
+    {
+      "data-slot": "field",
+      invalid: invalid || hasError,
+      disabled,
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props,
+      children: [
+        (label || maxLength !== void 0) && /* @__PURE__ */ jsxs("div", { "data-slot": "field-label-row", className: "flex items-center gap-1", children: [
+          label && /* @__PURE__ */ jsxs(
+            Field$1.Label,
+            {
+              nativeLabel,
+              render: nativeLabel ? void 0 : /* @__PURE__ */ jsx("div", {}),
+              className: "text-label-strong text-text-primary",
+              children: [
+                label,
+                optional && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " ",
+                  /* @__PURE__ */ jsxs("span", { className: "text-label-default text-text-secondary", children: [
+                    "(",
+                    labels.optional.toLocaleLowerCase(),
+                    ")"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          maxLength !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "field-counter",
+              className: "ms-auto text-label-small text-text-secondary tabular-nums",
+              children: labels.characterCount(length, maxLength)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FieldContext.Provider, { value: context, children }),
+        hasError ? /* @__PURE__ */ jsx(
+          Field$1.Error,
+          {
+            match: true,
+            "data-slot": "field-error",
+            className: cn(messageClass, "text-text-error"),
+            children: error
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          description && /* @__PURE__ */ jsx(Field$1.Validity, { children: (state) => state.validity.valid === false ? null : /* @__PURE__ */ jsx(
+            Field$1.Description,
+            {
+              "data-slot": "field-description",
+              className: cn(messageClass, "text-text-secondary"),
+              children: description
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Field$1.Error,
+            {
+              "data-slot": "field-error",
+              className: cn(messageClass, "text-text-error")
+            }
+          )
+        ] }),
+        maxLength !== void 0 && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  Field
+};
+//# sourceMappingURL=field.js.map

package/dist/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport { type ReactNode, useEffect, useMemo, useState } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { FieldContext, type FieldContextValue } from \"./field-context\";\n\nexport interface FieldProps\n  extends Omit<BaseField.Root.Props, \"className\" | \"children\"> {\n  /** Visible label (Label/Strong). Without it, name the control with `aria-label`. */\n  label?: ReactNode;\n  /**\n   * Adds \"(opcional)\" to the label. Mark what is optional, not what is required: in a\n   * clinical form almost everything is required, and a lone asterisk says nothing to\n   * a screen reader.\n   */\n  optional?: boolean;\n  /** Help text under the control, in text-secondary. Replaced by `error` when there is one. */\n  description?: ReactNode;\n  /**\n   * Error message. Turns the field invalid (red border on the control, `aria-invalid`)\n   * and takes the place of the description, in text-error. Say what to do, not just\n   * \"Campo no válido\".\n   */\n  error?: ReactNode;\n  /**\n   * Character limit. Shows the \"140/240\" counter next to the label, applies\n   * `maxLength` to the Textarea/Input inside and announces the count to screen\n   * readers only when the limit is close, not on every key.\n   */\n  maxLength?: number;\n  className?: string;\n  /** The control: Input, Select, NativeSelect, Textarea, PhoneInput or any custom one. */\n  children: ReactNode;\n}\n\nconst messageClass = \"text-body-small\";\n\n/**\n * Label + control + message: the building block of every form. Built on Base UI\n * Field, so the label, `aria-describedby` and `aria-invalid` wire themselves to the\n * control inside.\n *\n * - Label, control and message are 8px apart.\n * - The message is 14px (Body/Small): an error is content, it tells the person why\n *   they can't continue.\n * - An error is never shown only with the red border: `error` always renders the text.\n * - Any control works: Input, Select, NativeSelect, Textarea, PhoneInput, a date\n *   (Input with `CalendarIcon` and \"dd/mm/aaaa\"), or a custom one such as a\n *   RadioGroup or a SegmentedControl (they pick up the label via `aria-labelledby`).\n * - With PhoneInput, pass `name` to PhoneInput, not to Field: it submits the number\n *   without spaces from a hidden input.\n * - Native constraints (`required`, `pattern`…) and Base UI's `validate` show their\n *   message here too.\n */\nexport function Field({\n  label,\n  optional = false,\n  description,\n  error,\n  maxLength,\n  invalid,\n  disabled = false,\n  className,\n  children,\n  ...props\n}: FieldProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const [nativeLabel, setNativeLabel] = useState(true);\n  const [length, setLength] = useState(0);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const hasError = error !== undefined && error !== null && error !== false;\n\n  const context = useMemo<FieldContextValue>(\n    () => ({ disabled, maxLength, setLength, setNativeLabel }),\n    [disabled, maxLength],\n  );\n\n  // The counter is only read out when the limit is close (the last 10%, at least 10\n  // characters), and after a pause, so it doesn't talk over every key.\n  useEffect(() => {\n    if (maxLength === undefined) {\n      return undefined;\n    }\n    const threshold = Math.max(10, Math.ceil(maxLength * 0.1));\n    if (maxLength - length > threshold) {\n      setAnnouncement(\"\");\n      return undefined;\n    }\n    const timeout = setTimeout(\n      () => setAnnouncement(labels.characterCount(length, maxLength)),\n      600,\n    );\n    return () => clearTimeout(timeout);\n  }, [length, maxLength, labels]);\n\n  return (\n    <BaseField.Root\n      data-slot=\"field\"\n      invalid={invalid || hasError}\n      disabled={disabled}\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    >\n      {(label || maxLength !== undefined) && (\n        <div data-slot=\"field-label-row\" className=\"flex items-center gap-1\">\n          {label && (\n            <BaseField.Label\n              nativeLabel={nativeLabel}\n              render={nativeLabel ? undefined : <div />}\n              className=\"text-label-strong text-text-primary\"\n            >\n              {label}\n              {optional && (\n                <>\n                  {\" \"}\n                  <span className=\"text-label-default text-text-secondary\">\n                    ({labels.optional.toLocaleLowerCase()})\n                  </span>\n                </>\n              )}\n            </BaseField.Label>\n          )}\n          {maxLength !== undefined && (\n            <span\n              data-slot=\"field-counter\"\n              className=\"ms-auto text-label-small text-text-secondary tabular-nums\"\n            >\n              {labels.characterCount(length, maxLength)}\n            </span>\n          )}\n        </div>\n      )}\n      <FieldContext.Provider value={context}>{children}</FieldContext.Provider>\n      {hasError ? (\n        <BaseField.Error\n          match\n          data-slot=\"field-error\"\n          className={cn(messageClass, \"text-text-error\")}\n        >\n          {error}\n        </BaseField.Error>\n      ) : (\n        <>\n          {description && (\n            <BaseField.Validity>\n              {(state) =>\n                state.validity.valid === false ? null : (\n                  <BaseField.Description\n                    data-slot=\"field-description\"\n                    className={cn(messageClass, \"text-text-secondary\")}\n                  >\n                    {description}\n                  </BaseField.Description>\n                )\n              }\n            </BaseField.Validity>\n          )}\n          <BaseField.Error\n            data-slot=\"field-error\"\n            className={cn(messageClass, \"text-text-error\")}\n          />\n        </>\n      )}\n      {maxLength !== undefined && (\n        <span aria-live=\"polite\" className=\"sr-only\">\n          {announcement}\n        </span>\n      )}\n    </BaseField.Root>\n  );\n}\n"],"names":["BaseField"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { Field, type FieldProps } from "./field";

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type LinkProps } from "../link";
+export type FooterLayout = "responsive" | "desktop" | "mobile";
+export interface FooterProps extends ComponentProps<"footer"> {
+    /**
+     * Who owns the copyright: "mediQuo", or the clinic's name. It renders as
+     * "© {current year} {holder}" — the year comes from today's date, never by hand.
+     */
+    holder: ReactNode;
+    /** Figma `Layout`. `responsive` (default) is Mobile below `lg` and Desktop from there. */
+    layout?: FooterLayout;
+    /** `FooterLink`s: Condiciones legales · Política de privacidad · Cookies. */
+    children?: ReactNode;
+}
+/**
+ * Legal footer: copyright and the legal links. The copy is the app's (links as
+ * `FooterLink` children, the owner in `holder`); only the year is computed.
+ *
+ * Links stay at 14px on mobile (they are actions, not metadata), stacked, each in its
+ * own tappable row. `AppShell` puts it at the end of the content column.
+ */
+export declare function Footer({ holder, layout, className, children, ...props }: FooterProps): React.JSX.Element;
+export interface FooterLinkProps extends Omit<LinkProps, "size" | "standalone"> {
+}
+/**
+ * A legal link: a `Link` in a list item. Pass the router's with `render`, or `href`
+ * + `external` for documents hosted elsewhere.
+ */
+export declare function FooterLink({ className, ...props }: FooterLinkProps): React.JSX.Element;

package/dist/components/footer/footer.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useContext, createContext } from "react";
+import { cn } from "../../lib/cn.js";
+import { Link } from "../link/link.js";
+const footerVariants = cva("flex border-border-subtle border-t bg-background", {
+  variants: {
+    layout: {
+      // DOM order is links → copyright (the mobile order); on desktop the row is
+      // reversed so the copyright sits on the left.
+      responsive: "flex-col gap-4 px-4 py-6 lg:flex-row-reverse lg:items-center lg:justify-between lg:gap-6 lg:px-10",
+      desktop: "flex-row-reverse items-center justify-between gap-6 px-10 py-6",
+      mobile: "flex-col gap-4 px-4 py-6"
+    }
+  },
+  defaultVariants: {
+    layout: "responsive"
+  }
+});
+const linksVariants = cva("flex", {
+  variants: {
+    layout: {
+      // On mobile each link is a full 31px row (19 of text + the 12 of gap turned
+      // into padding), so the hit areas touch without overlapping.
+      responsive: "-my-1.5 flex-col lg:my-0 lg:flex-row lg:flex-wrap lg:gap-x-6 lg:gap-y-2",
+      desktop: "flex-row flex-wrap gap-x-6 gap-y-2",
+      mobile: "-my-1.5 flex-col"
+    }
+  },
+  defaultVariants: {
+    layout: "responsive"
+  }
+});
+const linkLayoutClasses = {
+  responsive: "py-1.5 lg:touch-target lg:py-0",
+  desktop: "touch-target",
+  mobile: "py-1.5"
+};
+const FooterLayoutContext = createContext("responsive");
+function Footer({
+  holder,
+  layout = "responsive",
+  className,
+  children,
+  ...props
+}) {
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      "data-slot": "footer",
+      "data-layout": layout,
+      className: cn(footerVariants({ layout }), className),
+      ...props,
+      children: [
+        children && /* @__PURE__ */ jsx(FooterLayoutContext, { value: layout, children: /* @__PURE__ */ jsx("ul", { className: linksVariants({ layout }), children }) }),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            "data-slot": "footer-copyright",
+            className: "text-body-small text-text-secondary",
+            children: [
+              "© ",
+              year,
+              " ",
+              holder
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FooterLink({
+  className,
+  ...props
+}) {
+  const layout = useContext(FooterLayoutContext);
+  return (
+    // A flex item, so the link's vertical padding counts even though it is inline.
+    /* @__PURE__ */ jsx("li", { "data-slot": "footer-link", className: "flex", children: /* @__PURE__ */ jsx(Link, { className: cn(linkLayoutClasses[layout], className), ...props }) })
+  );
+}
+export {
+  Footer,
+  FooterLink
+};
+//# sourceMappingURL=footer.js.map

package/dist/components/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":["../../../src/components/footer/footer.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  useContext,\n} from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Link, type LinkProps } from \"../link\";\n\nexport type FooterLayout = \"responsive\" | \"desktop\" | \"mobile\";\n\nconst footerVariants = cva(\"flex border-border-subtle border-t bg-background\", {\n  variants: {\n    layout: {\n      // DOM order is links → copyright (the mobile order); on desktop the row is\n      // reversed so the copyright sits on the left.\n      responsive:\n        \"flex-col gap-4 px-4 py-6 lg:flex-row-reverse lg:items-center lg:justify-between lg:gap-6 lg:px-10\",\n      desktop: \"flex-row-reverse items-center justify-between gap-6 px-10 py-6\",\n      mobile: \"flex-col gap-4 px-4 py-6\",\n    },\n  },\n  defaultVariants: {\n    layout: \"responsive\",\n  },\n});\n\nconst linksVariants = cva(\"flex\", {\n  variants: {\n    layout: {\n      // On mobile each link is a full 31px row (19 of text + the 12 of gap turned\n      // into padding), so the hit areas touch without overlapping.\n      responsive:\n        \"-my-1.5 flex-col lg:my-0 lg:flex-row lg:flex-wrap lg:gap-x-6 lg:gap-y-2\",\n      desktop: \"flex-row flex-wrap gap-x-6 gap-y-2\",\n      mobile: \"-my-1.5 flex-col\",\n    },\n  },\n  defaultVariants: {\n    layout: \"responsive\",\n  },\n});\n\n// Desktop links sit in a row, where the 44px hit area overlaps nothing.\nconst linkLayoutClasses: Record<FooterLayout, string> = {\n  responsive: \"py-1.5 lg:touch-target lg:py-0\",\n  desktop: \"touch-target\",\n  mobile: \"py-1.5\",\n};\n\nconst FooterLayoutContext = createContext<FooterLayout>(\"responsive\");\n\nexport interface FooterProps extends ComponentProps<\"footer\"> {\n  /**\n   * Who owns the copyright: \"mediQuo\", or the clinic's name. It renders as\n   * \"© {current year} {holder}\" — the year comes from today's date, never by hand.\n   */\n  holder: ReactNode;\n  /** Figma `Layout`. `responsive` (default) is Mobile below `lg` and Desktop from there. */\n  layout?: FooterLayout;\n  /** `FooterLink`s: Condiciones legales · Política de privacidad · Cookies. */\n  children?: ReactNode;\n}\n\n/**\n * Legal footer: copyright and the legal links. The copy is the app's (links as\n * `FooterLink` children, the owner in `holder`); only the year is computed.\n *\n * Links stay at 14px on mobile (they are actions, not metadata), stacked, each in its\n * own tappable row. `AppShell` puts it at the end of the content column.\n */\nexport function Footer({\n  holder,\n  layout = \"responsive\",\n  className,\n  children,\n  ...props\n}: FooterProps): React.JSX.Element {\n  const year = new Date().getFullYear();\n\n  return (\n    <footer\n      data-slot=\"footer\"\n      data-layout={layout}\n      className={cn(footerVariants({ layout }), className)}\n      {...props}\n    >\n      {children && (\n        <FooterLayoutContext value={layout}>\n          <ul className={linksVariants({ layout })}>{children}</ul>\n        </FooterLayoutContext>\n      )}\n      <p\n        data-slot=\"footer-copyright\"\n        className=\"text-body-small text-text-secondary\"\n      >\n        © {year} {holder}\n      </p>\n    </footer>\n  );\n}\n\nexport interface FooterLinkProps\n  extends Omit<LinkProps, \"size\" | \"standalone\"> {}\n\n/**\n * A legal link: a `Link` in a list item. Pass the router's with `render`, or `href`\n * + `external` for documents hosted elsewhere.\n */\nexport function FooterLink({\n  className,\n  ...props\n}: FooterLinkProps): React.JSX.Element {\n  const layout = useContext(FooterLayoutContext);\n\n  return (\n    // A flex item, so the link's vertical padding counts even though it is inline.\n    <li data-slot=\"footer-link\" className=\"flex\">\n      <Link className={cn(linkLayoutClasses[layout], className)} {...props} />\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;AAaA,MAAM,iBAAiB,IAAI,oDAAoD;AAAA,EAC7E,UAAU;AAAA,IACR,QAAQ;AAAA;AAAA;AAAA,MAGN,YACE;AAAA,MACF,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,EAAA;AAEZ,CAAC;AAED,MAAM,gBAAgB,IAAI,QAAQ;AAAA,EAChC,UAAU;AAAA,IACR,QAAQ;AAAA;AAAA;AAAA,MAGN,YACE;AAAA,MACF,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,EAAA;AAEZ,CAAC;AAGD,MAAM,oBAAkD;AAAA,EACtD,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,MAAM,sBAAsB,cAA4B,YAAY;AAqB7D,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,QAAO,oBAAI,KAAA,GAAO,YAAA;AAExB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW,GAAG,eAAe,EAAE,OAAA,CAAQ,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YACC,oBAAC,qBAAA,EAAoB,OAAO,QAC1B,UAAA,oBAAC,MAAA,EAAG,WAAW,cAAc,EAAE,OAAA,CAAQ,GAAI,UAAS,GACtD;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YACX,UAAA;AAAA,cAAA;AAAA,cACI;AAAA,cAAK;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;AASO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,WAAW,mBAAmB;AAE7C;AAAA;AAAA,wBAEG,MAAA,EAAG,aAAU,eAAc,WAAU,QACpC,UAAA,oBAAC,MAAA,EAAK,WAAW,GAAG,kBAAkB,MAAM,GAAG,SAAS,GAAI,GAAG,OAAO,EAAA,CACxE;AAAA;AAEJ;"}

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

@@ -0,0 +1 @@
+export { Footer, type FooterLayout, FooterLink, type FooterLinkProps, type FooterProps, } from "./footer";

package/dist/components/health-record/health-record.d.ts

@@ -0,0 +1,88 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type HealthRecordHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type HealthRecordSectionState = "empty" | "declined" | "list";
+export interface HealthRecordSectionProps extends Omit<ComponentProps<"section">, "title"> {
+    /** The category: "Alergias", "Medicación", "Enfermedades". Heading/h4 look. */
+    title: ReactNode;
+    /** Heading level for the page outline. Default 2 (under the page's h1). */
+    headingLevel?: HealthRecordHeadingLevel;
+    /**
+     * The category's icon, shown in Empty in a brand `IconContainer`:
+     * `AllergyPeanutIcon` (allergies), `PillIcon` (medication), `VirusIcon` or
+     * `MedicalCrossIcon` (conditions).
+     */
+    icon?: ReactNode;
+    /**
+     * The patient's three possible answers: `empty` (hasn't said anything yet: "Añadir…"
+     * and "No refiero…") · `declined` (has said there is none: shown as a confirmed
+     * fact, green check) · `list` (has records: `header` + `HealthRecordRow`s).
+     */
+    state: HealthRecordSectionState;
+    /** Empty: what goes here and how to say there's none. */
+    description?: ReactNode;
+    /** Declined: replaces the title ("No refieres alergias"). */
+    declinedTitle?: ReactNode;
+    /** Declined: "Has indicado que no tienes alergias. Si en el futuro…". */
+    declinedDescription?: ReactNode;
+    /** "Añadir alergia". The primary action (secondary at the bottom of a mobile list). */
+    addLabel: ReactNode;
+    onAdd?: () => void;
+    /**
+     * Empty only: "No refiero alergias". It exists because, for the doctor, "has no
+     * allergies" and "hasn't filled it in" are different data.
+     */
+    declineLabel?: ReactNode;
+    onDecline?: () => void;
+    /** List: a `HealthRecordHeader` with the column names. */
+    header?: ReactNode;
+    /** List: the `HealthRecordRow`s. */
+    children?: ReactNode;
+}
+/**
+ * The medical-history block for one category (allergies, medication, conditions):
+ * one instance per category.
+ *
+ * On mobile the buttons take the full width and the primary goes on top; each row's
+ * actions go in its "⋮" menu. The list is a real `<table>` named by the title.
+ */
+export declare function HealthRecordSection({ title, headingLevel, icon, state, description, declinedTitle, declinedDescription, addLabel, onAdd, declineLabel, onDecline, header, children, className, ...props }: HealthRecordSectionProps): React.JSX.Element;
+export interface HealthRecordHeaderProps extends Omit<ComponentProps<"thead">, "children"> {
+    /**
+     * The three column names: the record ("Alergia", "Medicamento", "Enfermedad"),
+     * "Detalles" and the data ("Gravedad", "Posología").
+     */
+    columns: readonly [ReactNode, ReactNode, ReactNode];
+}
+/**
+ * The header row of a `HealthRecordSection` list (`header` prop). Visible on
+ * desktop; on mobile the rows stack and it is only read by screen readers.
+ */
+export declare function HealthRecordHeader({ columns, className, ...props }: HealthRecordHeaderProps): React.JSX.Element;
+export interface HealthRecordRowProps extends Omit<ComponentProps<"tr">, "children"> {
+    /** "Pescados y mariscos", "Enalapril 10 mg". Also names the actions. */
+    name: string;
+    /** "Picor de garganta, dificultad para respirar y ronchas…". */
+    details?: ReactNode;
+    /**
+     * Meta=Severity: a `<SeverityIndicator level={3} />`. Meta=Text: the dosage of a
+     * medication ("3 veces al día").
+     */
+    meta?: ReactNode;
+    /** Shows "Editar" (ghost IconButton with Tooltip on desktop, the "⋮" menu on mobile). */
+    onEdit?: () => void;
+    /**
+     * Shows "Eliminar". It must open a confirmation `ConfirmModal`: deleting clinical
+     * data can't be undone with a Toast.
+     */
+    onDelete?: () => void;
+}
+/**
+ * One record of the medical history: an allergy, a medication or a condition. A
+ * table row of `HealthRecordSection`.
+ *
+ * Desktop: name · details · meta · edit and delete (ghost small IconButtons named
+ * "Editar Pescados y mariscos" / "Eliminar Pescados y mariscos", with a Tooltip;
+ * 36 drawn, 44 to the touch). Mobile: name and "⋮" on top, then details and meta;
+ * the actions are in the menu.
+ */
+export declare function HealthRecordRow({ name, details, meta, onEdit, onDelete, className, ...props }: HealthRecordRowProps): React.JSX.Element;

package/dist/components/health-record/health-record.js

@@ -0,0 +1,255 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { DotsVerticalIcon } from "../../icons/generated/dots-vertical.js";
+import { Edit05Icon } from "../../icons/generated/edit-05.js";
+import { Trash01Icon } from "../../icons/generated/trash-01.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from "../menu/menu.js";
+import { Button } from "../button/button.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+function HealthRecordSection({
+  title,
+  headingLevel = 2,
+  icon,
+  state,
+  description,
+  declinedTitle,
+  declinedDescription,
+  addLabel,
+  onAdd,
+  declineLabel,
+  onDecline,
+  header,
+  children,
+  className,
+  ...props
+}) {
+  const titleId = useId();
+  const Heading = `h${headingLevel}`;
+  const declined = state === "declined";
+  const list = state === "list";
+  const leadingIcon = declined ? /* @__PURE__ */ jsx(IconContainer, { size: 32, tone: "success", icon: /* @__PURE__ */ jsx(CheckIcon, {}) }) : state === "empty" && icon && /* @__PURE__ */ jsx(IconContainer, { size: 32, tone: "brand", icon });
+  const text = declined ? declinedDescription : list ? void 0 : description;
+  const fullWidth = "w-full @min-[720px]:w-auto";
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-slot": "health-record-section",
+      "data-state": state,
+      "aria-labelledby": titleId,
+      className: cn("@container rounded-xl bg-background shadow-s", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 @min-[720px]:p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 @min-[720px]:flex-row @min-[720px]:items-center @min-[720px]:gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              leadingIcon,
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  id: titleId,
+                  className: "min-w-0 text-heading-h4 text-text-primary",
+                  children: declined ? declinedTitle ?? title : title
+                }
+              )
+            ] }),
+            text && /* @__PURE__ */ jsx("p", { className: "text-body-small text-text-secondary", children: text })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 @min-[720px]:flex-row-reverse @min-[720px]:items-center", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                onClick: onAdd,
+                className: cn(
+                  fullWidth,
+                  list && "hidden @min-[720px]:inline-flex"
+                ),
+                children: addLabel
+              }
+            ),
+            state === "empty" && declineLabel && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "secondary",
+                onClick: onDecline,
+                className: fullWidth,
+                children: declineLabel
+              }
+            )
+          ] })
+        ] }),
+        list && /* @__PURE__ */ jsxs(
+          "table",
+          {
+            "aria-labelledby": titleId,
+            className: "block w-full border-collapse @min-[720px]:table",
+            children: [
+              header,
+              /* @__PURE__ */ jsx("tbody", { className: "block @min-[720px]:table-row-group", children })
+            ]
+          }
+        ),
+        list && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            onClick: onAdd,
+            className: "w-full @min-[720px]:hidden",
+            children: addLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+function HealthRecordHeader({
+  columns,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const cell = "py-2 text-left align-top text-label-small text-text-secondary";
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "health-record-header",
+      className: cn(
+        "sr-only @min-[720px]:not-sr-only @min-[720px]:table-header-group",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("tr", { className: "border-border-subtle border-b", children: [
+        /* @__PURE__ */ jsx("th", { scope: "col", className: cn(cell, "w-44 pr-6"), children: columns[0] }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: cn(cell, "pr-6"), children: columns[1] }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: cn(cell, "w-40 pr-6"), children: columns[2] }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: cn(cell, "w-19"), children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.healthRecordActions }) })
+      ] })
+    }
+  );
+}
+function HealthRecordRow({
+  name,
+  details,
+  meta,
+  onEdit,
+  onDelete,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const hasActions = Boolean(onEdit || onDelete);
+  const cell = "block @min-[720px]:table-cell @min-[720px]:py-4 @min-[720px]:align-top";
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "data-slot": "health-record-row",
+      className: cn(
+        "grid grid-cols-[1fr_auto] items-center gap-x-2 gap-y-2 border-border-subtle border-b py-4",
+        "@min-[720px]:table-row @min-[720px]:py-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "row",
+            className: cn(
+              cell,
+              "min-w-0 text-left text-label-strong text-text-primary @min-[720px]:w-44 @min-[720px]:pr-6"
+            ),
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(
+              cell,
+              "col-span-2 text-body-small text-text-primary @min-[720px]:pr-6"
+            ),
+            children: details
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: cn(
+              cell,
+              "col-span-2 flex text-body-small text-text-primary @min-[720px]:w-40 @min-[720px]:pr-6"
+            ),
+            children: meta
+          }
+        ),
+        /* @__PURE__ */ jsx("td", { className: "col-start-2 row-start-1 flex justify-end @min-[720px]:table-cell @min-[720px]:w-19 @min-[720px]:py-2 @min-[720px]:align-top", children: hasActions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-1 @min-[720px]:flex", children: [
+            onEdit && /* @__PURE__ */ jsx(Tooltip, { label: labels.healthRecordEdit, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(Edit05Icon, {}),
+                "aria-label": labels.healthRecordEditItem(name),
+                onClick: onEdit
+              }
+            ) }),
+            onDelete && /* @__PURE__ */ jsx(Tooltip, { label: labels.healthRecordDelete, children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(Trash01Icon, {}),
+                "aria-label": labels.healthRecordDeleteItem(name),
+                onClick: onDelete,
+                className: "text-text-error"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex @min-[720px]:hidden", children: /* @__PURE__ */ jsxs(Menu, { children: [
+            /* @__PURE__ */ jsx(
+              MenuTrigger,
+              {
+                "aria-label": labels.healthRecordOptions(name),
+                render: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant: "ghost",
+                    size: "small",
+                    icon: /* @__PURE__ */ jsx(DotsVerticalIcon, {}),
+                    "aria-label": labels.healthRecordOptions(name)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(MenuContent, { label: name, children: [
+              onEdit && /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(Edit05Icon, {}), onClick: onEdit, children: labels.healthRecordEdit }),
+              onEdit && onDelete && /* @__PURE__ */ jsx(MenuSeparator, {}),
+              onDelete && /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  type: "destructive",
+                  icon: /* @__PURE__ */ jsx(Trash01Icon, {}),
+                  onClick: onDelete,
+                  children: labels.healthRecordDelete
+                }
+              )
+            ] })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  HealthRecordHeader,
+  HealthRecordRow,
+  HealthRecordSection
+};
+//# sourceMappingURL=health-record.js.map