@mediquo/medicore 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"health-record.js","sources":["../../../src/components/health-record/health-record.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, useId } from \"react\";\n\nimport {\n  CheckIcon,\n  DotsVerticalIcon,\n  Edit05Icon,\n  Trash01Icon,\n} from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Button } from \"../button\";\nimport { IconButton } from \"../icon-button\";\nimport { IconContainer } from \"../icon-container\";\nimport {\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuSeparator,\n  MenuTrigger,\n} from \"../menu\";\nimport { Tooltip } from \"../tooltip\";\n\n/*\n * Figma `Layout` is not a prop: the section is a container and switches to Desktop\n * (a table with a header row) from 720px wide; below that the rows stack (Mobile).\n * Mobile-first classes, `@min-[720px]:` for Desktop.\n */\n\nexport type HealthRecordHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport type HealthRecordSectionState = \"empty\" | \"declined\" | \"list\";\n\nexport interface HealthRecordSectionProps\n  extends Omit<ComponentProps<\"section\">, \"title\"> {\n  /** The category: \"Alergias\", \"Medicación\", \"Enfermedades\". Heading/h4 look. */\n  title: ReactNode;\n  /** Heading level for the page outline. Default 2 (under the page's h1). */\n  headingLevel?: HealthRecordHeadingLevel;\n  /**\n   * The category's icon, shown in Empty in a brand `IconContainer`:\n   * `AllergyPeanutIcon` (allergies), `PillIcon` (medication), `VirusIcon` or\n   * `MedicalCrossIcon` (conditions).\n   */\n  icon?: ReactNode;\n  /**\n   * The patient's three possible answers: `empty` (hasn't said anything yet: \"Añadir…\"\n   * and \"No refiero…\") · `declined` (has said there is none: shown as a confirmed\n   * fact, green check) · `list` (has records: `header` + `HealthRecordRow`s).\n   */\n  state: HealthRecordSectionState;\n  /** Empty: what goes here and how to say there's none. */\n  description?: ReactNode;\n  /** Declined: replaces the title (\"No refieres alergias\"). */\n  declinedTitle?: ReactNode;\n  /** Declined: \"Has indicado que no tienes alergias. Si en el futuro…\". */\n  declinedDescription?: ReactNode;\n  /** \"Añadir alergia\". The primary action (secondary at the bottom of a mobile list). */\n  addLabel: ReactNode;\n  onAdd?: () => void;\n  /**\n   * Empty only: \"No refiero alergias\". It exists because, for the doctor, \"has no\n   * allergies\" and \"hasn't filled it in\" are different data.\n   */\n  declineLabel?: ReactNode;\n  onDecline?: () => void;\n  /** List: a `HealthRecordHeader` with the column names. */\n  header?: ReactNode;\n  /** List: the `HealthRecordRow`s. */\n  children?: ReactNode;\n}\n\n/**\n * The medical-history block for one category (allergies, medication, conditions):\n * one instance per category.\n *\n * On mobile the buttons take the full width and the primary goes on top; each row's\n * actions go in its \"⋮\" menu. The list is a real `<table>` named by the title.\n */\nexport function HealthRecordSection({\n  title,\n  headingLevel = 2,\n  icon,\n  state,\n  description,\n  declinedTitle,\n  declinedDescription,\n  addLabel,\n  onAdd,\n  declineLabel,\n  onDecline,\n  header,\n  children,\n  className,\n  ...props\n}: HealthRecordSectionProps): React.JSX.Element {\n  const titleId = useId();\n  const Heading = `h${headingLevel}` as const;\n  const declined = state === \"declined\";\n  const list = state === \"list\";\n  const leadingIcon = declined ? (\n    <IconContainer size={32} tone=\"success\" icon={<CheckIcon />} />\n  ) : (\n    state === \"empty\" &&\n    icon && <IconContainer size={32} tone=\"brand\" icon={icon} />\n  );\n  const text = declined ? declinedDescription : list ? undefined : description;\n  const fullWidth = \"w-full @min-[720px]:w-auto\";\n\n  return (\n    <section\n      data-slot=\"health-record-section\"\n      data-state={state}\n      aria-labelledby={titleId}\n      className={cn(\"@container rounded-xl bg-background shadow-s\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-4 p-4 @min-[720px]:p-6\">\n        <div className=\"flex flex-col gap-4 @min-[720px]:flex-row @min-[720px]:items-center @min-[720px]:gap-6\">\n          <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n            <div className=\"flex items-center gap-3\">\n              {leadingIcon}\n              <Heading\n                id={titleId}\n                className=\"min-w-0 text-heading-h4 text-text-primary\"\n              >\n                {declined ? (declinedTitle ?? title) : title}\n              </Heading>\n            </div>\n            {text && (\n              <p className=\"text-body-small text-text-secondary\">{text}</p>\n            )}\n          </div>\n          {/* DOM order primary first; on desktop the row is reversed so it ends up last. */}\n          <div className=\"flex flex-col gap-3 @min-[720px]:flex-row-reverse @min-[720px]:items-center\">\n            <Button\n              size=\"small\"\n              onClick={onAdd}\n              className={cn(\n                fullWidth,\n                list && \"hidden @min-[720px]:inline-flex\",\n              )}\n            >\n              {addLabel}\n            </Button>\n            {state === \"empty\" && declineLabel && (\n              <Button\n                size=\"small\"\n                variant=\"secondary\"\n                onClick={onDecline}\n                className={fullWidth}\n              >\n                {declineLabel}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {list && (\n          <table\n            aria-labelledby={titleId}\n            className=\"block w-full border-collapse @min-[720px]:table\"\n          >\n            {header}\n            <tbody className=\"block @min-[720px]:table-row-group\">\n              {children}\n            </tbody>\n          </table>\n        )}\n\n        {list && (\n          <Button\n            size=\"small\"\n            variant=\"secondary\"\n            onClick={onAdd}\n            className=\"w-full @min-[720px]:hidden\"\n          >\n            {addLabel}\n          </Button>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport interface HealthRecordHeaderProps\n  extends Omit<ComponentProps<\"thead\">, \"children\"> {\n  /**\n   * The three column names: the record (\"Alergia\", \"Medicamento\", \"Enfermedad\"),\n   * \"Detalles\" and the data (\"Gravedad\", \"Posología\").\n   */\n  columns: readonly [ReactNode, ReactNode, ReactNode];\n}\n\n/**\n * The header row of a `HealthRecordSection` list (`header` prop). Visible on\n * desktop; on mobile the rows stack and it is only read by screen readers.\n */\nexport function HealthRecordHeader({\n  columns,\n  className,\n  ...props\n}: HealthRecordHeaderProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const cell = \"py-2 text-left align-top text-label-small text-text-secondary\";\n\n  return (\n    <thead\n      data-slot=\"health-record-header\"\n      className={cn(\n        \"sr-only @min-[720px]:not-sr-only @min-[720px]:table-header-group\",\n        className,\n      )}\n      {...props}\n    >\n      <tr className=\"border-border-subtle border-b\">\n        <th scope=\"col\" className={cn(cell, \"w-44 pr-6\")}>\n          {columns[0]}\n        </th>\n        <th scope=\"col\" className={cn(cell, \"pr-6\")}>\n          {columns[1]}\n        </th>\n        <th scope=\"col\" className={cn(cell, \"w-40 pr-6\")}>\n          {columns[2]}\n        </th>\n        <th scope=\"col\" className={cn(cell, \"w-19\")}>\n          <span className=\"sr-only\">{labels.healthRecordActions}</span>\n        </th>\n      </tr>\n    </thead>\n  );\n}\n\nexport interface HealthRecordRowProps\n  extends Omit<ComponentProps<\"tr\">, \"children\"> {\n  /** \"Pescados y mariscos\", \"Enalapril 10 mg\". Also names the actions. */\n  name: string;\n  /** \"Picor de garganta, dificultad para respirar y ronchas…\". */\n  details?: ReactNode;\n  /**\n   * Meta=Severity: a `<SeverityIndicator level={3} />`. Meta=Text: the dosage of a\n   * medication (\"3 veces al día\").\n   */\n  meta?: ReactNode;\n  /** Shows \"Editar\" (ghost IconButton with Tooltip on desktop, the \"⋮\" menu on mobile). */\n  onEdit?: () => void;\n  /**\n   * Shows \"Eliminar\". It must open a confirmation `ConfirmModal`: deleting clinical\n   * data can't be undone with a Toast.\n   */\n  onDelete?: () => void;\n}\n\n/**\n * One record of the medical history: an allergy, a medication or a condition. A\n * table row of `HealthRecordSection`.\n *\n * Desktop: name · details · meta · edit and delete (ghost small IconButtons named\n * \"Editar Pescados y mariscos\" / \"Eliminar Pescados y mariscos\", with a Tooltip;\n * 36 drawn, 44 to the touch). Mobile: name and \"⋮\" on top, then details and meta;\n * the actions are in the menu.\n */\nexport function HealthRecordRow({\n  name,\n  details,\n  meta,\n  onEdit,\n  onDelete,\n  className,\n  ...props\n}: HealthRecordRowProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const hasActions = Boolean(onEdit || onDelete);\n  const cell =\n    \"block @min-[720px]:table-cell @min-[720px]:py-4 @min-[720px]:align-top\";\n\n  return (\n    <tr\n      data-slot=\"health-record-row\"\n      className={cn(\n        \"grid grid-cols-[1fr_auto] items-center gap-x-2 gap-y-2 border-border-subtle border-b py-4\",\n        \"@min-[720px]:table-row @min-[720px]:py-0\",\n        className,\n      )}\n      {...props}\n    >\n      <th\n        scope=\"row\"\n        className={cn(\n          cell,\n          \"min-w-0 text-left text-label-strong text-text-primary @min-[720px]:w-44 @min-[720px]:pr-6\",\n        )}\n      >\n        {name}\n      </th>\n      <td\n        className={cn(\n          cell,\n          \"col-span-2 text-body-small text-text-primary @min-[720px]:pr-6\",\n        )}\n      >\n        {details}\n      </td>\n      <td\n        className={cn(\n          cell,\n          \"col-span-2 flex text-body-small text-text-primary @min-[720px]:w-40 @min-[720px]:pr-6\",\n        )}\n      >\n        {meta}\n      </td>\n      <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\">\n        {hasActions && (\n          <>\n            <div className=\"hidden items-center gap-1 @min-[720px]:flex\">\n              {onEdit && (\n                <Tooltip label={labels.healthRecordEdit}>\n                  <IconButton\n                    variant=\"ghost\"\n                    size=\"small\"\n                    icon={<Edit05Icon />}\n                    aria-label={labels.healthRecordEditItem(name)}\n                    onClick={onEdit}\n                  />\n                </Tooltip>\n              )}\n              {onDelete && (\n                <Tooltip label={labels.healthRecordDelete}>\n                  <IconButton\n                    variant=\"ghost\"\n                    size=\"small\"\n                    icon={<Trash01Icon />}\n                    aria-label={labels.healthRecordDeleteItem(name)}\n                    onClick={onDelete}\n                    className=\"text-text-error\"\n                  />\n                </Tooltip>\n              )}\n            </div>\n            <div className=\"flex @min-[720px]:hidden\">\n              <Menu>\n                <MenuTrigger\n                  aria-label={labels.healthRecordOptions(name)}\n                  render={\n                    <IconButton\n                      variant=\"ghost\"\n                      size=\"small\"\n                      icon={<DotsVerticalIcon />}\n                      aria-label={labels.healthRecordOptions(name)}\n                    />\n                  }\n                />\n                <MenuContent label={name}>\n                  {onEdit && (\n                    <MenuItem icon={<Edit05Icon />} onClick={onEdit}>\n                      {labels.healthRecordEdit}\n                    </MenuItem>\n                  )}\n                  {onEdit && onDelete && <MenuSeparator />}\n                  {onDelete && (\n                    <MenuItem\n                      type=\"destructive\"\n                      icon={<Trash01Icon />}\n                      onClick={onDelete}\n                    >\n                      {labels.healthRecordDelete}\n                    </MenuItem>\n                  )}\n                </MenuContent>\n              </Menu>\n            </div>\n          </>\n        )}\n      </td>\n    </tr>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { HealthRecordHeader, type HealthRecordHeaderProps, type HealthRecordHeadingLevel, HealthRecordRow, type HealthRecordRowProps, HealthRecordSection, type HealthRecordSectionProps, type HealthRecordSectionState, } from "./health-record";

package/dist/components/hero-greeting/hero-greeting.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface HeroGreetingProps extends Omit<ComponentProps<"div">, "title"> {
+    /** "Hola, Marta". The page's only `<h1>`. No emoji. */
+    title: ReactNode;
+    /** "Tu salud, siempre a tu lado." */
+    subtitle?: ReactNode;
+    /** The access to the advisor: `<AdvisorContact variant="hero" />`. */
+    advisor?: ReactNode;
+}
+/**
+ * The home's header: the patient's greeting and the access to their advisor.
+ * `brand-dark` background in both modes, text in `text-inverse` (16.3:1).
+ *
+ * Figma `Layout` is not a prop: from 800px wide the advisor sits on the right
+ * (Desktop), below it goes under the greeting (Mobile).
+ */
+export declare function HeroGreeting({ title, subtitle, advisor, className, ...props }: HeroGreetingProps): React.JSX.Element;

package/dist/components/hero-greeting/hero-greeting.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function HeroGreeting({
+  title,
+  subtitle,
+  advisor,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "hero-greeting",
+      className: cn("@container bg-brand-dark", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 px-4 py-6 @min-[800px]:flex-row @min-[800px]:items-center @min-[800px]:px-15 @min-[800px]:py-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-heading-h2 text-text-inverse", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-body-default text-text-inverse-secondary", children: subtitle })
+        ] }),
+        advisor && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col @min-[800px]:w-105 @min-[800px]:shrink-0", children: advisor })
+      ] })
+    }
+  );
+}
+export {
+  HeroGreeting
+};
+//# sourceMappingURL=hero-greeting.js.map

package/dist/components/hero-greeting/hero-greeting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-greeting.js","sources":["../../../src/components/hero-greeting/hero-greeting.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface HeroGreetingProps\n  extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** \"Hola, Marta\". The page's only `<h1>`. No emoji. */\n  title: ReactNode;\n  /** \"Tu salud, siempre a tu lado.\" */\n  subtitle?: ReactNode;\n  /** The access to the advisor: `<AdvisorContact variant=\"hero\" />`. */\n  advisor?: ReactNode;\n}\n\n/**\n * The home's header: the patient's greeting and the access to their advisor.\n * `brand-dark` background in both modes, text in `text-inverse` (16.3:1).\n *\n * Figma `Layout` is not a prop: from 800px wide the advisor sits on the right\n * (Desktop), below it goes under the greeting (Mobile).\n */\nexport function HeroGreeting({\n  title,\n  subtitle,\n  advisor,\n  className,\n  ...props\n}: HeroGreetingProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"hero-greeting\"\n      className={cn(\"@container bg-brand-dark\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-6 px-4 py-6 @min-[800px]:flex-row @min-[800px]:items-center @min-[800px]:px-15 @min-[800px]:py-8\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <h1 className=\"text-heading-h2 text-text-inverse\">{title}</h1>\n          {subtitle && (\n            <p className=\"text-body-default text-text-inverse-secondary\">\n              {subtitle}\n            </p>\n          )}\n        </div>\n        {advisor && (\n          <div className=\"flex min-w-0 flex-col @min-[800px]:w-105 @min-[800px]:shrink-0\">\n            {advisor}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAqBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,sHACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,qCAAqC,UAAA,OAAM;AAAA,UACxD,YACC,oBAAC,KAAA,EAAE,WAAU,iDACV,UAAA,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QACC,WACC,oBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA,QAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/hero-greeting/index.d.ts

@@ -0,0 +1 @@
+export { HeroGreeting, type HeroGreetingProps } from "./hero-greeting";

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

@@ -0,0 +1,37 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ReactNode } from "react";
+import { type ButtonProps } from "../button";
+export type IconButtonVariant = NonNullable<ButtonProps["variant"]>;
+export type IconButtonSize = "default" | "small";
+/** Square sizes on top of `buttonVariants`, which keeps the colours of each variant. */
+export declare const iconButtonVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IconButtonProps extends Omit<BaseButton.Props, "className" | "children"> {
+    /**
+     * Required: an icon says nothing to a screen reader. Use the same text in the
+     * Tooltip that accompanies the button.
+     */
+    "aria-label": string;
+    /** A MediCore icon (`<XCloseIcon />`). It is sized by the button: 20, or 16 in `small`. */
+    icon: ReactNode;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    /** Keeps the variant colour, swaps the icon for a spinner and ignores clicks without losing focus. */
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * Button whose only content is an icon. Same variants, states and sizes as `Button`,
+ * so switching between the two keeps them.
+ *
+ * - `aria-label` is mandatory, and in the UI it goes with a Tooltip showing the same
+ *   text. If the icon isn't obvious, don't look for another icon: use a `Button`
+ *   with a label.
+ * - `ghost` is the one for toolbars and headers (the close "x" of a Modal).
+ *   `inverse` and `inverse-ghost` only on dark surfaces (`bg-brand-dark`, a photo
+ *   with a scrim).
+ * - The drawing is 40×40 (36 in `small`, only for dense desktop bars) but the hit
+ *   area is always 44×44.
+ */
+export declare function IconButton({ variant, size, disabled, loading, icon, className, type, ...props }: IconButtonProps): React.JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+import { buttonVariants } from "../button/button.js";
+const iconButtonVariants = cva("", {
+  variants: {
+    size: {
+      default: "size-control-md [&_svg]:size-icon-md",
+      small: "size-control-sm [&_svg]:size-icon-sm"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const inverseSpinner = /* @__PURE__ */ new Set([
+  "primary",
+  "destructive",
+  "inverse-ghost"
+]);
+function IconButton({
+  variant = "primary",
+  size = "default",
+  disabled = false,
+  loading = false,
+  icon,
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "icon-button",
+      type,
+      disabled: disabled || loading,
+      focusableWhenDisabled: loading,
+      "aria-busy": loading || void 0,
+      className: cn(
+        // `size: null` drops Button's height and horizontal padding; the square
+        // size comes from iconButtonVariants.
+        buttonVariants({ variant, size: null, disabled }),
+        iconButtonVariants({ size }),
+        className
+      ),
+      ...props,
+      children: loading ? /* @__PURE__ */ jsx(
+        Spinner,
+        {
+          size: size === "small" ? 16 : 20,
+          color: inverseSpinner.has(variant) ? "inverse" : "default",
+          label: null
+        }
+      ) : icon
+    }
+  );
+}
+export {
+  IconButton,
+  iconButtonVariants
+};
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { type ButtonProps, buttonVariants } from \"../button\";\nimport { Spinner } from \"../spinner\";\n\nexport type IconButtonVariant = NonNullable<ButtonProps[\"variant\"]>;\n\nexport type IconButtonSize = \"default\" | \"small\";\n\n/** Square sizes on top of `buttonVariants`, which keeps the colours of each variant. */\nexport const iconButtonVariants = cva(\"\", {\n  variants: {\n    size: {\n      default: \"size-control-md [&_svg]:size-icon-md\",\n      small: \"size-control-sm [&_svg]:size-icon-sm\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\n// Figma: the spinner goes inverse on solid fills (and on dark surfaces) and in\n// text-secondary on the light variants.\nconst inverseSpinner: ReadonlySet<IconButtonVariant> = new Set([\n  \"primary\",\n  \"destructive\",\n  \"inverse-ghost\",\n]);\n\nexport interface IconButtonProps\n  extends Omit<BaseButton.Props, \"className\" | \"children\"> {\n  /**\n   * Required: an icon says nothing to a screen reader. Use the same text in the\n   * Tooltip that accompanies the button.\n   */\n  \"aria-label\": string;\n  /** A MediCore icon (`<XCloseIcon />`). It is sized by the button: 20, or 16 in `small`. */\n  icon: ReactNode;\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  /** Keeps the variant colour, swaps the icon for a spinner and ignores clicks without losing focus. */\n  loading?: boolean;\n  className?: string;\n}\n\n/**\n * Button whose only content is an icon. Same variants, states and sizes as `Button`,\n * so switching between the two keeps them.\n *\n * - `aria-label` is mandatory, and in the UI it goes with a Tooltip showing the same\n *   text. If the icon isn't obvious, don't look for another icon: use a `Button`\n *   with a label.\n * - `ghost` is the one for toolbars and headers (the close \"x\" of a Modal).\n *   `inverse` and `inverse-ghost` only on dark surfaces (`bg-brand-dark`, a photo\n *   with a scrim).\n * - The drawing is 40×40 (36 in `small`, only for dense desktop bars) but the hit\n *   area is always 44×44.\n */\nexport function IconButton({\n  variant = \"primary\",\n  size = \"default\",\n  disabled = false,\n  loading = false,\n  icon,\n  className,\n  type = \"button\",\n  ...props\n}: IconButtonProps): React.JSX.Element {\n  return (\n    <BaseButton\n      data-slot=\"icon-button\"\n      type={type}\n      disabled={disabled || loading}\n      focusableWhenDisabled={loading}\n      aria-busy={loading || undefined}\n      className={cn(\n        // `size: null` drops Button's height and horizontal padding; the square\n        // size comes from iconButtonVariants.\n        buttonVariants({ variant, size: null, disabled }),\n        iconButtonVariants({ size }),\n        className,\n      )}\n      {...props}\n    >\n      {loading ? (\n        <Spinner\n          size={size === \"small\" ? 16 : 20}\n          color={inverseSpinner.has(variant) ? \"inverse\" : \"default\"}\n          label={null}\n        />\n      ) : (\n        icon\n      )}\n    </BaseButton>\n  );\n}\n"],"names":["BaseButton"],"mappings":";;;;;;AAaO,MAAM,qBAAqB,IAAI,IAAI;AAAA,EACxC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAID,MAAM,qCAAqD,IAAI;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AACF,CAAC;AA+BM,SAAS,WAAW;AAAA,EACzB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAuC;AACrC,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,uBAAuB;AAAA,MACvB,aAAW,WAAW;AAAA,MACtB,WAAW;AAAA;AAAA;AAAA,QAGT,eAAe,EAAE,SAAS,MAAM,MAAM,UAAU;AAAA,QAChD,mBAAmB,EAAE,MAAM;AAAA,QAC3B;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA,UACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,SAAS,UAAU,KAAK;AAAA,UAC9B,OAAO,eAAe,IAAI,OAAO,IAAI,YAAY;AAAA,UACjD,OAAO;AAAA,QAAA;AAAA,MAAA,IAGT;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1 @@
+export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, iconButtonVariants, } from "./icon-button";

package/dist/components/icon-container/icon-container.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode } from "react";
+export declare const iconContainerVariants: (props?: ({
+    size?: 32 | 40 | 48 | null | undefined;
+    tone?: "error" | "brand" | "neutral" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconContainerSize = 32 | 40 | 48;
+export type IconContainerTone = "neutral" | "brand" | "success" | "warning" | "error";
+export interface IconContainerProps extends Omit<ComponentProps<"span">, "children"> {
+    /** A MediCore icon (`<ActivityHeartIcon />`). It is sized by the container: 32→16, 40→20, 48→24. */
+    icon: ReactNode;
+    size?: IconContainerSize;
+    /**
+     * Semantic, not decoration: `neutral` for things without a state, `brand` for an
+     * entry to a service, `success`/`warning`/`error` only when the content really has
+     * that state (a download icon is not `success`).
+     */
+    tone?: IconContainerTone;
+}
+/**
+ * Rounded square with an icon inside: the leading element of list rows, service
+ * blocks and cards.
+ *
+ * - Icons only, never text: `warning` is 3.93:1, enough for an icon (WCAG 1.4.11) but
+ *   not for text.
+ * - Its fill against the surface is 1.07–1.14:1 on purpose: it is decoration, not a
+ *   control boundary. If it has to look pressable, the ListRow or Card around it does.
+ * - Square look (the old Square_40): override the radius, `className="rounded-sm"`.
+ */
+export declare function IconContainer({ icon, size, tone, className, ...props }: IconContainerProps): React.JSX.Element;

package/dist/components/icon-container/icon-container.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const iconContainerVariants = cva(
+  "inline-flex shrink-0 items-center justify-center [&>svg]:shrink-0",
+  {
+    variants: {
+      // The icon size goes with the container size: it can't be mismatched.
+      size: {
+        32: "size-avatar-md rounded-lg [&>svg]:size-icon-sm",
+        40: "size-avatar-lg rounded-xl [&>svg]:size-icon-md",
+        48: "size-avatar-xl rounded-xl [&>svg]:size-icon-lg"
+      },
+      tone: {
+        neutral: "bg-surface-raised text-text-primary",
+        brand: "bg-brand-subtle text-text-brand",
+        success: "bg-success-subtle text-text-success",
+        warning: "bg-warning-subtle text-text-warning",
+        error: "bg-error-subtle text-text-error"
+      }
+    },
+    defaultVariants: {
+      size: 32,
+      tone: "neutral"
+    }
+  }
+);
+function IconContainer({
+  icon,
+  size,
+  tone,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "icon-container",
+      className: cn(iconContainerVariants({ size, tone }), className),
+      ...props,
+      children: icon
+    }
+  );
+}
+export {
+  IconContainer,
+  iconContainerVariants
+};
+//# sourceMappingURL=icon-container.js.map

package/dist/components/icon-container/icon-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-container.js","sources":["../../../src/components/icon-container/icon-container.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport const iconContainerVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center [&>svg]:shrink-0\",\n  {\n    variants: {\n      // The icon size goes with the container size: it can't be mismatched.\n      size: {\n        32: \"size-avatar-md rounded-lg [&>svg]:size-icon-sm\",\n        40: \"size-avatar-lg rounded-xl [&>svg]:size-icon-md\",\n        48: \"size-avatar-xl rounded-xl [&>svg]:size-icon-lg\",\n      },\n      tone: {\n        neutral: \"bg-surface-raised text-text-primary\",\n        brand: \"bg-brand-subtle text-text-brand\",\n        success: \"bg-success-subtle text-text-success\",\n        warning: \"bg-warning-subtle text-text-warning\",\n        error: \"bg-error-subtle text-text-error\",\n      },\n    },\n    defaultVariants: {\n      size: 32,\n      tone: \"neutral\",\n    },\n  },\n);\n\nexport type IconContainerSize = 32 | 40 | 48;\n\nexport type IconContainerTone =\n  | \"neutral\"\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"error\";\n\nexport interface IconContainerProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** A MediCore icon (`<ActivityHeartIcon />`). It is sized by the container: 32→16, 40→20, 48→24. */\n  icon: ReactNode;\n  size?: IconContainerSize;\n  /**\n   * Semantic, not decoration: `neutral` for things without a state, `brand` for an\n   * entry to a service, `success`/`warning`/`error` only when the content really has\n   * that state (a download icon is not `success`).\n   */\n  tone?: IconContainerTone;\n}\n\n/**\n * Rounded square with an icon inside: the leading element of list rows, service\n * blocks and cards.\n *\n * - Icons only, never text: `warning` is 3.93:1, enough for an icon (WCAG 1.4.11) but\n *   not for text.\n * - Its fill against the surface is 1.07–1.14:1 on purpose: it is decoration, not a\n *   control boundary. If it has to look pressable, the ListRow or Card around it does.\n * - Square look (the old Square_40): override the radius, `className=\"rounded-sm\"`.\n */\nexport function IconContainer({\n  icon,\n  size,\n  tone,\n  className,\n  ...props\n}: IconContainerProps): React.JSX.Element {\n  return (\n    <span\n      data-slot=\"icon-container\"\n      className={cn(iconContainerVariants({ size, tone }), className)}\n      {...props}\n    >\n      {icon}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAkCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sBAAsB,EAAE,MAAM,KAAA,CAAM,GAAG,SAAS;AAAA,MAC7D,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/icon-container/index.d.ts

@@ -0,0 +1 @@
+export { IconContainer, type IconContainerProps, type IconContainerSize, type IconContainerTone, iconContainerVariants, } from "./icon-container";

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

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+export interface IncludedItemProps extends ComponentProps<"li"> {
+}
+/**
+ * One item of "Qué incluye" in a programme page. It is an `<li>`: put it in a
+ * `<ul>` (a grid of three on desktop). The check is decorative.
+ *
+ * Only what the programme really includes and ops backs up.
+ */
+export declare function IncludedItem({ className, children, ...props }: IncludedItemProps): React.JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { cn } from "../../lib/cn.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+function IncludedItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "included-item",
+      className: cn(
+        "flex min-w-0 items-center gap-3 rounded-xl border border-border-subtle bg-background p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconContainer,
+          {
+            size: 32,
+            tone: "success",
+            icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-body-small text-text-primary", children })
+      ]
+    }
+  );
+}
+export {
+  IncludedItem
+};
+//# sourceMappingURL=included-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"included-item.js","sources":["../../../src/components/included-item/included-item.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { CheckIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { IconContainer } from \"../icon-container\";\n\nexport interface IncludedItemProps extends ComponentProps<\"li\"> {}\n\n/**\n * One item of \"Qué incluye\" in a programme page. It is an `<li>`: put it in a\n * `<ul>` (a grid of three on desktop). The check is decorative.\n *\n * Only what the programme really includes and ops backs up.\n */\nexport function IncludedItem({\n  className,\n  children,\n  ...props\n}: IncludedItemProps): React.JSX.Element {\n  return (\n    <li\n      data-slot=\"included-item\"\n      className={cn(\n        \"flex min-w-0 items-center gap-3 rounded-xl border border-border-subtle bg-background p-3\",\n        className,\n      )}\n      {...props}\n    >\n      <IconContainer\n        size={32}\n        tone=\"success\"\n        icon={<CheckIcon />}\n        aria-hidden\n      />\n      <span className=\"min-w-0 flex-1 text-body-small text-text-primary\">\n        {children}\n      </span>\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,MAAK;AAAA,YACL,0BAAO,WAAA,EAAU;AAAA,YACjB,eAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,oBAAC,QAAA,EAAK,WAAU,oDACb,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1 @@
+export { IncludedItem, type IncludedItemProps } from "./included-item";

package/dist/components/input/control-styles.d.ts

@@ -0,0 +1,34 @@
+/** Border, radius, fill and text colour of the box. */
+export declare const controlBox = "w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
+/** One-line content: 12px side padding, 8px between icon and text, Label/Default (14). */
+export declare const controlRow = "flex items-center gap-2 px-3 text-label-default";
+/** control-md (40) and control-sm (36): the same tokens as Button, so they line up. */
+export declare const controlHeight: {
+    readonly default: "h-control-md";
+    readonly small: "h-control-sm";
+};
+export type ControlSize = keyof typeof controlHeight;
+/**
+ * States for a box that WRAPS the real control (Input, NativeSelect, the phone
+ * prefix). Read from the control inside: `aria-invalid` (set by `invalid` or by
+ * Field), `:focus` and `:disabled` (of the input/select only: a native select's
+ * placeholder `<option disabled>` must not grey the box out). Buttons inside the box
+ * (reveal password, clear) keep their own focus ring and don't light the box up.
+ */
+export declare const wrappedControlStates: string;
+/** States for a box that IS the control (Textarea). */
+export declare const selfControlStates: string;
+/**
+ * States for a button box (Select trigger). It keeps the focus border while its popup
+ * is open, because focus is inside the list then.
+ */
+export declare const triggerControlStates: string;
+/** Placeholder: the same Value node in text-secondary, never a variant. */
+export declare const controlPlaceholder = "placeholder:text-text-secondary disabled:placeholder:text-text-disabled";
+/**
+ * Leading / trailing icon slot: 16px in text-secondary (5.07:1), disabled with the
+ * box. The box carries `group/control`.
+ */
+export declare const controlIcon = "flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled";
+/** Small icon button inside the box (reveal password, clear). 44px hit area. */
+export declare const controlAction = "focus-ring touch-target -me-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-disabled [&_svg]:size-icon-sm";

package/dist/components/input/control-styles.js

@@ -0,0 +1,36 @@
+const controlBox = "w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]";
+const controlRow = "flex items-center gap-2 px-3 text-label-default";
+const controlHeight = {
+  default: "h-control-md",
+  small: "h-control-sm"
+};
+const wrappedControlStates = [
+  "has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:ring-error",
+  "has-[:focus:not(button)]:border-border-focus has-[:focus:not(button)]:ring-border-focus",
+  "has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled"
+].join(" ");
+const selfControlStates = [
+  "outline-none focus:border-border-focus focus:ring-border-focus",
+  "aria-invalid:not-focus:border-error aria-invalid:not-focus:ring-error",
+  "disabled:cursor-not-allowed disabled:border-border disabled:bg-surface disabled:text-text-disabled"
+].join(" ");
+const triggerControlStates = [
+  "outline-none focus:border-border-focus focus:ring-border-focus data-popup-open:border-border-focus data-popup-open:ring-border-focus",
+  "aria-invalid:not-focus:not-data-popup-open:border-error aria-invalid:not-focus:not-data-popup-open:ring-error",
+  "data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface data-disabled:text-text-disabled"
+].join(" ");
+const controlPlaceholder = "placeholder:text-text-secondary disabled:placeholder:text-text-disabled";
+const controlIcon = "flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled";
+const controlAction = "focus-ring touch-target -me-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-disabled [&_svg]:size-icon-sm";
+export {
+  controlAction,
+  controlBox,
+  controlHeight,
+  controlIcon,
+  controlPlaceholder,
+  controlRow,
+  selfControlStates,
+  triggerControlStates,
+  wrappedControlStates
+};
+//# sourceMappingURL=control-styles.js.map

package/dist/components/input/control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-styles.js","sources":["../../../src/components/input/control-styles.ts"],"sourcesContent":["/*\n * The box shared by Input, Textarea, Select, NativeSelect and PhoneInput. Figma draws\n * them as the same object on purpose: same radius, padding, border and states, so a\n * field and a dropdown in the same row only differ by the chevron.\n *\n * Focus and Error are a 2px border (border-thick), not just a colour change. The\n * second pixel is an inset ring, so the content never moves when the state changes.\n * Focus wins over Error: the message under the field keeps saying what is wrong.\n */\n\n/** Border, radius, fill and text colour of the box. */\nexport const controlBox =\n  \"w-full min-w-0 rounded-md border border-border-input bg-background text-text-primary ring-1 ring-transparent ring-inset transition-[border-color,box-shadow]\";\n\n/** One-line content: 12px side padding, 8px between icon and text, Label/Default (14). */\nexport const controlRow = \"flex items-center gap-2 px-3 text-label-default\";\n\n/** control-md (40) and control-sm (36): the same tokens as Button, so they line up. */\nexport const controlHeight = {\n  default: \"h-control-md\",\n  small: \"h-control-sm\",\n} as const;\n\nexport type ControlSize = keyof typeof controlHeight;\n\n/**\n * States for a box that WRAPS the real control (Input, NativeSelect, the phone\n * prefix). Read from the control inside: `aria-invalid` (set by `invalid` or by\n * Field), `:focus` and `:disabled` (of the input/select only: a native select's\n * placeholder `<option disabled>` must not grey the box out). Buttons inside the box\n * (reveal password, clear) keep their own focus ring and don't light the box up.\n */\nexport const wrappedControlStates = [\n  \"has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:ring-error\",\n  \"has-[:focus:not(button)]:border-border-focus has-[:focus:not(button)]:ring-border-focus\",\n  \"has-[:is(input,select):disabled]:cursor-not-allowed has-[:is(input,select):disabled]:border-border has-[:is(input,select):disabled]:bg-surface has-[:is(input,select):disabled]:text-text-disabled\",\n].join(\" \");\n\n/** States for a box that IS the control (Textarea). */\nexport const selfControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus\",\n  \"aria-invalid:not-focus:border-error aria-invalid:not-focus:ring-error\",\n  \"disabled:cursor-not-allowed disabled:border-border disabled:bg-surface disabled:text-text-disabled\",\n].join(\" \");\n\n/**\n * States for a button box (Select trigger). It keeps the focus border while its popup\n * is open, because focus is inside the list then.\n */\nexport const triggerControlStates = [\n  \"outline-none focus:border-border-focus focus:ring-border-focus data-popup-open:border-border-focus data-popup-open:ring-border-focus\",\n  \"aria-invalid:not-focus:not-data-popup-open:border-error aria-invalid:not-focus:not-data-popup-open:ring-error\",\n  \"data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface data-disabled:text-text-disabled\",\n].join(\" \");\n\n/** Placeholder: the same Value node in text-secondary, never a variant. */\nexport const controlPlaceholder =\n  \"placeholder:text-text-secondary disabled:placeholder:text-text-disabled\";\n\n/**\n * Leading / trailing icon slot: 16px in text-secondary (5.07:1), disabled with the\n * box. The box carries `group/control`.\n */\nexport const controlIcon =\n  \"flex shrink-0 text-text-secondary [&_svg]:size-icon-sm group-has-[:is(input,select):disabled]/control:text-text-disabled group-data-disabled/control:text-text-disabled\";\n\n/** Small icon button inside the box (reveal password, clear). 44px hit area. */\nexport const controlAction =\n  \"focus-ring touch-target -me-1 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:text-text-disabled [&_svg]:size-icon-sm\";\n"],"names":[],"mappings":"AAWO,MAAM,aACX;AAGK,MAAM,aAAa;AAGnB,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT;AAWO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAMH,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGH,MAAM,qBACX;AAMK,MAAM,cACX;AAGK,MAAM,gBACX;"}

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

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./input";

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

@@ -0,0 +1,35 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import { type ReactNode, type Ref } from "react";
+import { type ControlSize } from "./control-styles";
+export interface InputProps extends Omit<BaseInput.Props, "className" | "size" | "ref"> {
+    ref?: Ref<HTMLInputElement>;
+    /** `default` 40px (control-md), `small` 36px (control-sm): the same heights as Button. */
+    size?: ControlSize;
+    /**
+     * Red 2px border and `aria-invalid`. Never on its own: the message that says what
+     * is wrong goes under the field (use `Field` with `error`, which sets this for you).
+     */
+    invalid?: boolean;
+    /** Decorative 16px icon before the text: `SearchMdIcon`, `CalendarIcon`, `User01Icon`. */
+    leadingIcon?: ReactNode;
+    /** Decorative 16px icon after the text: `CalendarIcon`, `AlertCircleIcon`. */
+    trailingIcon?: ReactNode;
+    /** Shows an × button ("Borrar") while there is text. It fires `onChange` with "". */
+    clearable?: boolean;
+    /** Applied to the box, not to the `<input>`: use it for the width. */
+    className?: string;
+}
+/**
+ * One-line text field. Only the box: the label, the help text and the error go
+ * OUTSIDE, in `Field`, so the message can grow to two lines.
+ *
+ * - It fills its container (Figma draws it at 280 as a reference). Constrain it with
+ *   `className="max-w-xs"` or with the layout.
+ * - Placeholder in text-secondary, value in text-primary. The placeholder is an
+ *   example, never the label.
+ * - `type="password"` adds the reveal button (eye / eye-off) with its accessible name.
+ * - Ask the browser for help: `type="email"`, `inputMode="numeric"`,
+ *   `autoComplete="given-name"`… The keyboard and autofill depend on it.
+ * - Inside `Field` the label, description and `aria-invalid` wire themselves.
+ */
+export declare function Input({ size, invalid, leadingIcon, trailingIcon, clearable, className, type, disabled, readOnly, value, defaultValue, onChange, ref, ...props }: InputProps): React.JSX.Element;

package/dist/components/input/input.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+import { useRef, useState, useCallback } from "react";
+import { EyeIcon } from "../../icons/generated/eye.js";
+import { EyeOffIcon } from "../../icons/generated/eye-off.js";
+import { XCloseIcon } from "../../icons/generated/x-close.js";
+import { cn } from "../../lib/cn.js";
+import { controlIcon, controlPlaceholder, controlAction, wrappedControlStates, controlHeight, controlRow, controlBox } from "./control-styles.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+function Input({
+  size = "default",
+  invalid = false,
+  leadingIcon,
+  trailingIcon,
+  clearable = false,
+  className,
+  type = "text",
+  disabled,
+  readOnly,
+  value,
+  defaultValue,
+  onChange,
+  ref,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const inputRef = useRef(null);
+  const [revealed, setRevealed] = useState(false);
+  const [uncontrolledFilled, setUncontrolledFilled] = useState(
+    () => defaultValue != null && String(defaultValue) !== ""
+  );
+  const filled = value === void 0 ? uncontrolledFilled : value !== null && String(value) !== "";
+  const isPassword = type === "password";
+  const setRefs = useCallback(
+    (node) => {
+      const input = node;
+      inputRef.current = input;
+      if (typeof ref === "function") {
+        ref(input);
+      } else if (ref) {
+        ref.current = input;
+      }
+    },
+    [ref]
+  );
+  function clear() {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value"
+    )?.set?.call(input, "");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.focus();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input",
+      className: cn(
+        "group/control",
+        controlBox,
+        controlRow,
+        controlHeight[size],
+        wrappedControlStates,
+        className
+      ),
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: controlIcon, children: leadingIcon }),
+        /* @__PURE__ */ jsx(
+          Input$1,
+          {
+            ref: setRefs,
+            "data-slot": "input-control",
+            type: isPassword && revealed ? "text" : type,
+            disabled,
+            readOnly,
+            value,
+            defaultValue,
+            "aria-invalid": invalid && !disabled ? true : void 0,
+            onChange: (event) => {
+              setUncontrolledFilled(event.currentTarget.value !== "");
+              onChange?.(event);
+            },
+            className: cn(
+              "h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed",
+              controlPlaceholder
+            ),
+            ...props
+          }
+        ),
+        clearable && filled && !disabled && !readOnly && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.clear,
+            className: controlAction,
+            onClick: clear,
+            children: /* @__PURE__ */ jsx(XCloseIcon, { size: "sm" })
+          }
+        ),
+        trailingIcon && /* @__PURE__ */ jsx("span", { className: controlIcon, children: trailingIcon }),
+        isPassword && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": revealed ? labels.hidePassword : labels.showPassword,
+            disabled,
+            className: controlAction,
+            onClick: () => setRevealed((current) => !current),
+            children: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(EyeIcon, { size: "sm" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map