@mediquo/medicore 0.1.0

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,58 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type { ReactNode } from "react";
+export interface TabsProps extends Omit<BaseTabs.Root.Props, "className"> {
+    className?: string;
+}
+/**
+ * Switches WHAT you are looking at inside the same page: Próximas / Pasadas in
+ * Mis citas, Datos personales / Historial / Facturación in the profile.
+ *
+ * - **Tabs are not a SegmentedControl.** A tab changes the content (another
+ *   section); a segmented control filters the same list (Todos / No leídos). If the
+ *   list keeps its structure and only its items change, use `SegmentedControl`.
+ * - If every tab is its own URL they are links with `aria-current="page"`, not
+ *   tabs: don't use this component for route navigation.
+ * - `role="tablist"` / `role="tab"` with `aria-selected` and ←/→ between tabs come
+ *   from Base UI. Put the panels right after the list with `TabsPanel`.
+ *
+ * ```tsx
+ * <Tabs defaultValue="upcoming">
+ *   <TabsList aria-label="Mis citas">
+ *     <TabsTab value="upcoming" count={3}>Próximas</TabsTab>
+ *     <TabsTab value="past">Pasadas</TabsTab>
+ *   </TabsList>
+ *   <TabsPanel value="upcoming">…</TabsPanel>
+ *   <TabsPanel value="past">…</TabsPanel>
+ * </Tabs>
+ * ```
+ */
+export declare function Tabs({ className, ...props }: TabsProps): React.JSX.Element;
+export interface TabsListProps extends Omit<BaseTabs.List.Props, "className"> {
+    className?: string;
+}
+/**
+ * The row of tabs. It sits on a full-width 1px `border-subtle` line that the active
+ * tab's bar covers. When the tabs don't fit (mobile) the row scrolls sideways.
+ */
+export declare function TabsList({ className, ...props }: TabsListProps): React.JSX.Element;
+export interface TabsTabProps extends Omit<BaseTabs.Tab.Props, "className"> {
+    /**
+     * Counter next to the label ("3"): unread messages, pending appointments. Only for
+     * something that updates live; a fixed number is noise.
+     */
+    count?: ReactNode;
+    className?: string;
+}
+/**
+ * One tab. 44px tall (`control-lg`): a tab row lives at the top of the screen, the
+ * hardest place to reach with a thumb.
+ *
+ * The active tab is not told apart by colour alone: 2px bar underneath, Medium label
+ * and brand text (9.67:1; default 5.07:1).
+ */
+export declare function TabsTab({ count, className, children, ...props }: TabsTabProps): React.JSX.Element;
+export interface TabsPanelProps extends Omit<BaseTabs.Panel.Props, "className"> {
+    className?: string;
+}
+/** The content of one tab. It is only mounted while its tab is active (`keepMounted` to keep it). */
+export declare function TabsPanel({ className, ...props }: TabsPanelProps): React.JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { cn } from "../../lib/cn.js";
+import { Badge } from "../badge/badge.js";
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-4", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "flex overflow-x-auto [scrollbar-width:none]",
+        // The baseline is an inset shadow and not a border so it stays full width
+        // while the tabs scroll, and the active bar can paint over it.
+        "shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTab({
+  count,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.Tab,
+    {
+      "data-slot": "tabs-tab",
+      className: cn(
+        "relative inline-flex h-control-lg shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md px-4",
+        "text-label-default text-text-secondary transition-colors",
+        "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-transparent",
+        "not-data-disabled:not-data-active:hover:text-text-primary",
+        "data-active:text-label-strong data-active:text-text-brand data-active:after:bg-text-brand",
+        "data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+        // Inside the tab, not around it: in navigation there is no room outside.
+        "focus-ring focus-visible:-outline-offset-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-label": typeof children === "string" ? children : void 0,
+            className: "flex flex-col after:invisible after:h-0 after:overflow-hidden after:text-label-strong after:content-[attr(data-label)]",
+            children
+          }
+        ),
+        count !== void 0 && count !== null && /* @__PURE__ */ jsx(Badge, { variant: "brand", children: count })
+      ]
+    }
+  );
+}
+function TabsPanel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Panel,
+    {
+      "data-slot": "tabs-panel",
+      className: cn("focus-ring", className),
+      ...props
+    }
+  );
+}
+export {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { Badge } from \"../badge\";\n\nexport interface TabsProps extends Omit<BaseTabs.Root.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * Switches WHAT you are looking at inside the same page: Próximas / Pasadas in\n * Mis citas, Datos personales / Historial / Facturación in the profile.\n *\n * - **Tabs are not a SegmentedControl.** A tab changes the content (another\n *   section); a segmented control filters the same list (Todos / No leídos). If the\n *   list keeps its structure and only its items change, use `SegmentedControl`.\n * - If every tab is its own URL they are links with `aria-current=\"page\"`, not\n *   tabs: don't use this component for route navigation.\n * - `role=\"tablist\"` / `role=\"tab\"` with `aria-selected` and ←/→ between tabs come\n *   from Base UI. Put the panels right after the list with `TabsPanel`.\n *\n * ```tsx\n * <Tabs defaultValue=\"upcoming\">\n *   <TabsList aria-label=\"Mis citas\">\n *     <TabsTab value=\"upcoming\" count={3}>Próximas</TabsTab>\n *     <TabsTab value=\"past\">Pasadas</TabsTab>\n *   </TabsList>\n *   <TabsPanel value=\"upcoming\">…</TabsPanel>\n *   <TabsPanel value=\"past\">…</TabsPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs({ className, ...props }: TabsProps): React.JSX.Element {\n  return (\n    <BaseTabs.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsListProps extends Omit<BaseTabs.List.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * The row of tabs. It sits on a full-width 1px `border-subtle` line that the active\n * tab's bar covers. When the tabs don't fit (mobile) the row scrolls sideways.\n */\nexport function TabsList({\n  className,\n  ...props\n}: TabsListProps): React.JSX.Element {\n  return (\n    <BaseTabs.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        \"flex overflow-x-auto [scrollbar-width:none]\",\n        // The baseline is an inset shadow and not a border so it stays full width\n        // while the tabs scroll, and the active bar can paint over it.\n        \"shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface TabsTabProps extends Omit<BaseTabs.Tab.Props, \"className\"> {\n  /**\n   * Counter next to the label (\"3\"): unread messages, pending appointments. Only for\n   * something that updates live; a fixed number is noise.\n   */\n  count?: ReactNode;\n  className?: string;\n}\n\n/**\n * One tab. 44px tall (`control-lg`): a tab row lives at the top of the screen, the\n * hardest place to reach with a thumb.\n *\n * The active tab is not told apart by colour alone: 2px bar underneath, Medium label\n * and brand text (9.67:1; default 5.07:1).\n */\nexport function TabsTab({\n  count,\n  className,\n  children,\n  ...props\n}: TabsTabProps): React.JSX.Element {\n  return (\n    <BaseTabs.Tab\n      data-slot=\"tabs-tab\"\n      className={cn(\n        \"relative inline-flex h-control-lg shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md px-4\",\n        \"text-label-default text-text-secondary transition-colors\",\n        \"after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-transparent\",\n        \"not-data-disabled:not-data-active:hover:text-text-primary\",\n        \"data-active:text-label-strong data-active:text-text-brand data-active:after:bg-text-brand\",\n        \"data-disabled:cursor-not-allowed data-disabled:text-text-disabled\",\n        // Inside the tab, not around it: in navigation there is no room outside.\n        \"focus-ring focus-visible:-outline-offset-2\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        // An invisible Medium copy of the label reserves the active width, so the\n        // row doesn't jump when the active tab changes.\n        data-label={typeof children === \"string\" ? children : undefined}\n        className=\"flex flex-col after:invisible after:h-0 after:overflow-hidden after:text-label-strong after:content-[attr(data-label)]\"\n      >\n        {children}\n      </span>\n      {count !== undefined && count !== null && (\n        <Badge variant=\"brand\">{count}</Badge>\n      )}\n    </BaseTabs.Tab>\n  );\n}\n\nexport interface TabsPanelProps\n  extends Omit<BaseTabs.Panel.Props, \"className\"> {\n  className?: string;\n}\n\n/** The content of one tab. It is only mounted while its tab is active (`keepMounted` to keep it). */\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPanelProps): React.JSX.Element {\n  return (\n    <BaseTabs.Panel\n      data-slot=\"tabs-panel\"\n      className={cn(\"focus-ring\", className)}\n      {...props}\n    />\n  );\n}\n"],"names":["BaseTabs"],"mappings":";;;;AAiCO,SAAS,KAAK,EAAE,WAAW,GAAG,SAAuC;AAC1E,SACE;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAUO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAkBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,SACE;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAGC,cAAY,OAAO,aAAa,WAAW,WAAW;AAAA,YACtD,WAAU;AAAA,YAET;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,UAAU,UAAa,UAAU,4BAC/B,OAAA,EAAM,SAAQ,SAAS,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAItC;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAACA,OAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./textarea";

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentProps, type Ref } from "react";
+export interface TextareaProps extends Omit<ComponentProps<"textarea">, "className" | "ref"> {
+    ref?: Ref<HTMLTextAreaElement>;
+    /**
+     * Red 2px border and `aria-invalid`. Never on its own: the message goes under the
+     * field (use `Field` with `error`, which sets this for you).
+     */
+    invalid?: boolean;
+    /** Called with the new text on every change. */
+    onValueChange?: (value: string) => void;
+    className?: string;
+}
+/**
+ * Multi-line text field. Same states, radius, padding and borders as Input and
+ * Select; there is no size axis (if only one line fits, use Input).
+ *
+ * - The text starts at the top, never vertically centred.
+ * - 96px minimum (about three and a half lines). It grows with the content up to
+ *   240px and then scrolls; there is no drag handle. Change the limits with
+ *   `className="min-h-40 max-h-96"`.
+ * - Inside `<Field maxLength={240}>` it takes the limit and feeds the counter.
+ * - The placeholder should lower the barrier ("Describe los síntomas con tus
+ *   palabras…"), not say "Escribe aquí".
+ */
+export declare function Textarea({ invalid, className, id, name, value, defaultValue, disabled, maxLength, onChange, onValueChange, "aria-describedby": ariaDescribedBy, ref, ...props }: TextareaProps): React.JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { useRef, useCallback, useLayoutEffect } from "react";
+import { cn } from "../../lib/cn.js";
+import { useFieldContext } from "../field/field-context.js";
+import { selfControlStates, controlPlaceholder, controlBox } from "../input/control-styles.js";
+function Textarea({
+  invalid = false,
+  className,
+  id,
+  name,
+  value,
+  defaultValue,
+  disabled,
+  maxLength,
+  onChange,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  ref,
+  ...props
+}) {
+  const field = useFieldContext();
+  const setLength = field?.setLength;
+  const textareaRef = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      const textarea = node;
+      textareaRef.current = textarea;
+      if (typeof ref === "function") {
+        ref(textarea);
+      } else if (ref) {
+        ref.current = textarea;
+      }
+    },
+    [ref]
+  );
+  useLayoutEffect(() => {
+    if (setLength && textareaRef.current) {
+      setLength(textareaRef.current.value.length);
+    }
+  }, [setLength, value]);
+  return /* @__PURE__ */ jsx(
+    Field.Control,
+    {
+      ref: setRefs,
+      "data-slot": "textarea",
+      id,
+      name,
+      value,
+      defaultValue,
+      disabled,
+      onValueChange,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": invalid && !disabled ? true : void 0,
+      className: cn(
+        controlBox,
+        "block min-h-24 max-h-60 resize-none overflow-y-auto p-3 text-body-small field-sizing-content",
+        controlPlaceholder,
+        selfControlStates,
+        className
+      ),
+      render: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          maxLength: maxLength ?? field?.maxLength,
+          onChange: (event) => {
+            setLength?.(event.currentTarget.value.length);
+            onChange?.(event);
+          },
+          ...props
+        }
+      )
+    }
+  );
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport {\n  type ComponentProps,\n  type Ref,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useFieldContext } from \"../field/field-context\";\nimport {\n  controlBox,\n  controlPlaceholder,\n  selfControlStates,\n} from \"../input/control-styles\";\n\nexport interface TextareaProps\n  extends Omit<ComponentProps<\"textarea\">, \"className\" | \"ref\"> {\n  ref?: Ref<HTMLTextAreaElement>;\n  /**\n   * Red 2px border and `aria-invalid`. Never on its own: the message goes under the\n   * field (use `Field` with `error`, which sets this for you).\n   */\n  invalid?: boolean;\n  /** Called with the new text on every change. */\n  onValueChange?: (value: string) => void;\n  className?: string;\n}\n\n/**\n * Multi-line text field. Same states, radius, padding and borders as Input and\n * Select; there is no size axis (if only one line fits, use Input).\n *\n * - The text starts at the top, never vertically centred.\n * - 96px minimum (about three and a half lines). It grows with the content up to\n *   240px and then scrolls; there is no drag handle. Change the limits with\n *   `className=\"min-h-40 max-h-96\"`.\n * - Inside `<Field maxLength={240}>` it takes the limit and feeds the counter.\n * - The placeholder should lower the barrier (\"Describe los síntomas con tus\n *   palabras…\"), not say \"Escribe aquí\".\n */\nexport function Textarea({\n  invalid = false,\n  className,\n  id,\n  name,\n  value,\n  defaultValue,\n  disabled,\n  maxLength,\n  onChange,\n  onValueChange,\n  \"aria-describedby\": ariaDescribedBy,\n  ref,\n  ...props\n}: TextareaProps): React.JSX.Element {\n  const field = useFieldContext();\n  const setLength = field?.setLength;\n  const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  const setRefs = useCallback(\n    (node: HTMLElement | null) => {\n      const textarea = node as HTMLTextAreaElement | null;\n      textareaRef.current = textarea;\n      if (typeof ref === \"function\") {\n        ref(textarea);\n      } else if (ref) {\n        ref.current = textarea;\n      }\n    },\n    [ref],\n  );\n\n  // Keeps Field's counter right for controlled values and for the default value.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is the trigger, the length is read from the DOM.\n  useLayoutEffect(() => {\n    if (setLength && textareaRef.current) {\n      setLength(textareaRef.current.value.length);\n    }\n  }, [setLength, value]);\n\n  return (\n    <BaseField.Control\n      ref={setRefs}\n      data-slot=\"textarea\"\n      id={id}\n      name={name}\n      value={value}\n      defaultValue={defaultValue}\n      disabled={disabled}\n      onValueChange={onValueChange}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={invalid && !disabled ? true : undefined}\n      className={cn(\n        controlBox,\n        \"block min-h-24 max-h-60 resize-none overflow-y-auto p-3 text-body-small field-sizing-content\",\n        controlPlaceholder,\n        selfControlStates,\n        className,\n      )}\n      render={\n        <textarea\n          maxLength={maxLength ?? field?.maxLength}\n          onChange={(event) => {\n            setLength?.(event.currentTarget.value.length);\n            onChange?.(event);\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n"],"names":["BaseField"],"mappings":";;;;;;AA0CO,SAAS,SAAS;AAAA,EACvB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,QAAM,QAAQ,gBAAA;AACd,QAAM,YAAY,OAAO;AACzB,QAAM,cAAc,OAAmC,IAAI;AAE3D,QAAM,UAAU;AAAA,IACd,CAAC,SAA6B;AAC5B,YAAM,WAAW;AACjB,kBAAY,UAAU;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,QAAQ;AAAA,MACd,WAAW,KAAK;AACd,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EAAA;AAKN,kBAAgB,MAAM;AACpB,QAAI,aAAa,YAAY,SAAS;AACpC,gBAAU,YAAY,QAAQ,MAAM,MAAM;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE;AAAA,IAACA,MAAU;AAAA,IAAV;AAAA,MACC,KAAK;AAAA,MACL,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,gBAAc,WAAW,CAAC,WAAW,OAAO;AAAA,MAC5C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,OAAO;AAAA,UAC/B,UAAU,CAAC,UAAU;AACnB,wBAAY,MAAM,cAAc,MAAM,MAAM;AAC5C,uBAAW,KAAK;AAAA,UAClB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIR;"}

package/dist/components/time-slot/index.d.ts

@@ -0,0 +1 @@
+export { TimeSlot, TimeSlotGroup, type TimeSlotGroupLayout, type TimeSlotGroupProps, type TimeSlotProps, } from "./time-slot";

package/dist/components/time-slot/time-slot.d.ts

@@ -0,0 +1,50 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import type { ReactNode } from "react";
+import { type RadioGroupProps } from "../radio";
+export type TimeSlotGroupLayout = "columns" | "rows";
+export interface TimeSlotGroupProps<Value = string> extends RadioGroupProps<Value> {
+    /**
+     * `columns` (default): `AvailabilityColumn`s side by side, as in `CardProfessional`.
+     * The days that don't fit are hidden, never squeezed: a slot never goes below
+     * 64×44, the rest of the week is in "Ver agenda completa".
+     * `rows`: `AvailabilityRow`s one under another.
+     */
+    layout?: TimeSlotGroupLayout;
+}
+/**
+ * The single choice of an agenda: every `TimeSlot` inside it (across all the days)
+ * is one radio group, so there is one tab stop and the arrow keys move from hour to
+ * hour. Name it with `aria-label` ("Horas disponibles con la Dra. Díaz").
+ */
+export declare function TimeSlotGroup<Value = string>({ layout, className, ...props }: TimeSlotGroupProps<Value>): React.JSX.Element;
+interface TimeSlotRadioProps<Value> extends Omit<BaseRadio.Root.Props<Value>, "className" | "children"> {
+    /** The time, formatted in the patient's time zone: "11:00" (no "h", no space). */
+    children: ReactNode;
+    /**
+     * Unavailable (taken): struck through and not selectable. A screen reader hears
+     * "11:00, no disponible" (`timeSlotUnavailable` label): the line isn't read.
+     */
+    disabled?: boolean;
+    loading?: false;
+    className?: string;
+}
+interface TimeSlotLoadingProps {
+    /** Grey placeholder while the availability arrives, so the grid doesn't jump. */
+    loading: true;
+    value?: undefined;
+    children?: undefined;
+    className?: string;
+}
+export type TimeSlotProps<Value = string> = TimeSlotRadioProps<Value> | TimeSlotLoadingProps;
+/**
+ * One hour of the agenda, 64×44 (`control-lg`: tapped with the thumb in a dense
+ * grid). A radio inside `TimeSlotGroup`.
+ *
+ * - Available: `brand-subtle` fill with brand text, no border.
+ * - Selected: brand fill, inverse text, 1.5px border and Medium label — three cues
+ *   besides colour.
+ * - Unavailable (`disabled`): struck through, the cue that doesn't depend on colour.
+ * - `loading`: the grey slot while the availability loads (no radio, `aria-hidden`).
+ */
+export declare function TimeSlot<Value = string>(props: TimeSlotProps<Value>): React.JSX.Element;
+export {};

package/dist/components/time-slot/time-slot.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { RadioGroup } from "../radio/radio.js";
+const columnsClasses = [
+  "flex-row items-start justify-between gap-2",
+  "@max-[208px]:[&>*:nth-child(n+3)]:hidden",
+  "@max-[280px]:[&>*:nth-child(n+4)]:hidden",
+  "@max-[352px]:[&>*:nth-child(n+5)]:hidden",
+  "@max-[424px]:[&>*:nth-child(n+6)]:hidden",
+  "@max-[496px]:[&>*:nth-child(n+7)]:hidden"
+];
+function TimeSlotGroup({
+  layout = "columns",
+  className,
+  ...props
+}) {
+  const group = /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "data-slot": "time-slot-group",
+      className: cn(layout === "columns" ? columnsClasses : "gap-2", className),
+      ...props
+    }
+  );
+  if (layout === "rows") {
+    return group;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "@container w-full min-w-0", children: group });
+}
+function TimeSlot(props) {
+  const labels = useMediCoreLabels();
+  if (props.loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        "data-slot": "time-slot",
+        "data-loading": "",
+        shape: "block",
+        className: cn("h-control-lg w-16 shrink-0 rounded-md", props.className)
+      }
+    );
+  }
+  const { children, disabled, className, loading: _loading, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    Radio.Root,
+    {
+      "data-slot": "time-slot",
+      disabled,
+      className: cn(
+        "inline-flex h-control-lg w-16 shrink-0 cursor-pointer select-none items-center justify-center rounded-md border border-transparent px-1 py-2",
+        "bg-brand-subtle text-label-default text-text-brand transition-colors",
+        "focus-ring",
+        "data-checked:border-[1.5px] data-checked:border-brand data-checked:bg-brand data-checked:text-label-strong data-checked:text-text-inverse",
+        "data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-secondary data-disabled:line-through",
+        className
+      ),
+      ...rest,
+      children: [
+        children,
+        disabled && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          ", ",
+          labels.timeSlotUnavailable
+        ] })
+      ]
+    }
+  );
+}
+export {
+  TimeSlot,
+  TimeSlotGroup
+};
+//# sourceMappingURL=time-slot.js.map

package/dist/components/time-slot/time-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.js","sources":["../../../src/components/time-slot/time-slot.tsx"],"sourcesContent":["import { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { RadioGroup, type RadioGroupProps } from \"../radio\";\nimport { Skeleton } from \"../skeleton\";\n\nexport type TimeSlotGroupLayout = \"columns\" | \"rows\";\n\nexport interface TimeSlotGroupProps<Value = string>\n  extends RadioGroupProps<Value> {\n  /**\n   * `columns` (default): `AvailabilityColumn`s side by side, as in `CardProfessional`.\n   * The days that don't fit are hidden, never squeezed: a slot never goes below\n   * 64×44, the rest of the week is in \"Ver agenda completa\".\n   * `rows`: `AvailabilityRow`s one under another.\n   */\n  layout?: TimeSlotGroupLayout;\n}\n\n// A column is 64px and the gap 8px: n days need 72n − 8. Below that width the\n// n-th day and the ones after it are hidden (the container is the wrapper div).\nconst columnsClasses = [\n  \"flex-row items-start justify-between gap-2\",\n  \"@max-[208px]:[&>*:nth-child(n+3)]:hidden\",\n  \"@max-[280px]:[&>*:nth-child(n+4)]:hidden\",\n  \"@max-[352px]:[&>*:nth-child(n+5)]:hidden\",\n  \"@max-[424px]:[&>*:nth-child(n+6)]:hidden\",\n  \"@max-[496px]:[&>*:nth-child(n+7)]:hidden\",\n];\n\n/**\n * The single choice of an agenda: every `TimeSlot` inside it (across all the days)\n * is one radio group, so there is one tab stop and the arrow keys move from hour to\n * hour. Name it with `aria-label` (\"Horas disponibles con la Dra. Díaz\").\n */\nexport function TimeSlotGroup<Value = string>({\n  layout = \"columns\",\n  className,\n  ...props\n}: TimeSlotGroupProps<Value>): React.JSX.Element {\n  const group = (\n    <RadioGroup<Value>\n      data-slot=\"time-slot-group\"\n      className={cn(layout === \"columns\" ? columnsClasses : \"gap-2\", className)}\n      {...props}\n    />\n  );\n\n  if (layout === \"rows\") {\n    return group;\n  }\n\n  return <div className=\"@container w-full min-w-0\">{group}</div>;\n}\n\ninterface TimeSlotRadioProps<Value>\n  extends Omit<BaseRadio.Root.Props<Value>, \"className\" | \"children\"> {\n  /** The time, formatted in the patient's time zone: \"11:00\" (no \"h\", no space). */\n  children: ReactNode;\n  /**\n   * Unavailable (taken): struck through and not selectable. A screen reader hears\n   * \"11:00, no disponible\" (`timeSlotUnavailable` label): the line isn't read.\n   */\n  disabled?: boolean;\n  loading?: false;\n  className?: string;\n}\n\ninterface TimeSlotLoadingProps {\n  /** Grey placeholder while the availability arrives, so the grid doesn't jump. */\n  loading: true;\n  value?: undefined;\n  children?: undefined;\n  className?: string;\n}\n\nexport type TimeSlotProps<Value = string> =\n  | TimeSlotRadioProps<Value>\n  | TimeSlotLoadingProps;\n\n/**\n * One hour of the agenda, 64×44 (`control-lg`: tapped with the thumb in a dense\n * grid). A radio inside `TimeSlotGroup`.\n *\n * - Available: `brand-subtle` fill with brand text, no border.\n * - Selected: brand fill, inverse text, 1.5px border and Medium label — three cues\n *   besides colour.\n * - Unavailable (`disabled`): struck through, the cue that doesn't depend on colour.\n * - `loading`: the grey slot while the availability loads (no radio, `aria-hidden`).\n */\nexport function TimeSlot<Value = string>(\n  props: TimeSlotProps<Value>,\n): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  if (props.loading) {\n    return (\n      <Skeleton\n        data-slot=\"time-slot\"\n        data-loading=\"\"\n        shape=\"block\"\n        className={cn(\"h-control-lg w-16 shrink-0 rounded-md\", props.className)}\n      />\n    );\n  }\n\n  const { children, disabled, className, loading: _loading, ...rest } = props;\n\n  return (\n    <BaseRadio.Root<Value>\n      data-slot=\"time-slot\"\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-control-lg w-16 shrink-0 cursor-pointer select-none items-center justify-center rounded-md border border-transparent px-1 py-2\",\n        \"bg-brand-subtle text-label-default text-text-brand transition-colors\",\n        \"focus-ring\",\n        \"data-checked:border-[1.5px] data-checked:border-brand data-checked:bg-brand data-checked:text-label-strong data-checked:text-text-inverse\",\n        \"data-disabled:cursor-not-allowed data-disabled:border-border-subtle data-disabled:bg-surface data-disabled:text-text-secondary data-disabled:line-through\",\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {disabled && (\n        <span className=\"sr-only\">, {labels.timeSlotUnavailable}</span>\n      )}\n    </BaseRadio.Root>\n  );\n}\n"],"names":["BaseRadio"],"mappings":";;;;;;AAuBA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAOO,SAAS,cAA8B;AAAA,EAC5C,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,WAAW,YAAY,iBAAiB,SAAS,SAAS;AAAA,MACvE,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,MAAI,WAAW,QAAQ;AACrB,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,OAAA,EAAI,WAAU,6BAA6B,UAAA,OAAM;AAC3D;AAqCO,SAAS,SACd,OACmB;AACnB,QAAM,SAAS,kBAAA;AAEf,MAAI,MAAM,SAAS;AACjB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,WAAW,GAAG,yCAAyC,MAAM,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5E;AAEA,QAAM,EAAE,UAAU,UAAU,WAAW,SAAS,UAAU,GAAG,SAAS;AAEtE,SACE;AAAA,IAACA,MAAU;AAAA,IAAV;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA,YACC,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,UAAA;AAAA,UAAG,OAAO;AAAA,QAAA,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhE;"}

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

@@ -0,0 +1 @@
+export { type ToastActionOptions, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastStatus, type UseToastReturnValue, useToast, } from "./toast";

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+/**
+ * There is no `warning` on purpose: a warning that matters can't vanish on its own,
+ * and one that can vanish wasn't a warning. Use a persistent `Banner`.
+ */
+export type ToastStatus = "neutral" | "success" | "error";
+export interface ToastActionOptions {
+    /** Defaults to the MediCore `undo` label ("Deshacer"). */
+    label?: string;
+    /** Runs on click; the toast closes right after. */
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /**
+     * What happened, concrete: "Cita guardada", "No se pudo guardar la cita". Never
+     * "Operación completada con éxito" or "Ha ocurrido un error".
+     */
+    message: ReactNode;
+    /** `neutral` (default) for system state, `success` in past tense, `error` for what failed. */
+    status?: ToastStatus;
+    /** Undo for success, retry for errors. Leave it out when there is nothing to do. */
+    action?: ToastActionOptions;
+    /** The icon follows the status; pass `false` to hide it. */
+    icon?: boolean;
+    /** Milliseconds before it closes on its own (the provider's default otherwise). `0` keeps it open. */
+    timeout?: number;
+    /** Passing the id of a visible toast updates it in place. */
+    id?: string;
+    onClose?: () => void;
+}
+export interface UseToastReturnValue {
+    /** Shows a toast and returns its id. */
+    toast: (options: ToastOptions) => string;
+    /** Closes a toast by id, or all of them. */
+    close: (id?: string) => void;
+}
+/**
+ * Shows transient notices. Needs a `ToastProvider` above.
+ *
+ * ```tsx
+ * const { toast } = useToast();
+ * toast({ message: "Cita guardada", status: "success", action: { onClick: undo } });
+ * ```
+ */
+export declare function useToast(): UseToastReturnValue;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    /** Default time on screen in milliseconds. Hovering or focusing the toasts pauses it. */
+    timeout?: number;
+    /** Toasts visible at once; older ones are hidden until there is room. */
+    limit?: number;
+    /** Accessible name of the notifications region. */
+    label?: string;
+}
+/**
+ * Wrap the app once. Renders the toast region: at the bottom on mobile (full width
+ * minus 16px per side) and top right on desktop (360px), at most three at a time.
+ * The timer pauses on hover and keyboard focus, and F6 jumps into the region.
+ */
+export declare function ToastProvider({ children, timeout, limit, label, }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast/toast.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+import { cva } from "class-variance-authority";
+import { useContext, useCallback, useMemo, createContext } from "react";
+import { AlertCircleIcon } from "../../icons/generated/alert-circle.js";
+import { CheckCircleIcon } from "../../icons/generated/check-circle.js";
+import { InfoCircleIcon } from "../../icons/generated/info-circle.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+import { Button } from "../button/button.js";
+const ToastApiContext = createContext(null);
+function useToast() {
+  const manager = useContext(ToastApiContext);
+  const labels = useMediCoreLabels();
+  if (manager === null) {
+    throw new Error(
+      "MediCore: useToast() must be used inside <ToastProvider>."
+    );
+  }
+  const toast = useCallback(
+    ({
+      message,
+      status = "neutral",
+      action,
+      icon = true,
+      ...options
+    }) => {
+      let id = "";
+      id = manager.add({
+        ...options,
+        title: message,
+        type: status,
+        // High priority is announced assertively, so only errors use it.
+        priority: status === "error" ? "high" : "low",
+        data: { icon },
+        actionProps: action && {
+          children: action.label ?? labels.undo,
+          onClick: () => {
+            action.onClick();
+            manager.close(id);
+          }
+        }
+      });
+      return id;
+    },
+    [manager, labels.undo]
+  );
+  return useMemo(() => ({ toast, close: manager.close }), [toast, manager]);
+}
+function ToastProvider({
+  children,
+  timeout,
+  limit = 3,
+  label = "Notificaciones"
+}) {
+  return /* @__PURE__ */ jsxs(Toast.Provider, { timeout, limit, children: [
+    /* @__PURE__ */ jsx(ToastApiBridge, { children }),
+    /* @__PURE__ */ jsx(Toaster, { label })
+  ] });
+}
+function ToastApiBridge({
+  children
+}) {
+  const { add, close } = Toast.useToastManager();
+  const api = useMemo(() => ({ add, close }), [add, close]);
+  return /* @__PURE__ */ jsx(ToastApiContext.Provider, { value: api, children });
+}
+function Toaster({ label }) {
+  const { toasts } = Toast.useToastManager();
+  return /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(
+    Toast.Viewport,
+    {
+      "data-slot": "toast-viewport",
+      "aria-label": label,
+      className: cn(
+        "fixed inset-x-4 bottom-4 z-60 flex flex-col-reverse gap-2 outline-hidden",
+        "md:inset-x-auto md:top-8 md:right-8 md:bottom-auto md:w-90 md:flex-col"
+      ),
+      children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, { toast }, toast.id))
+    }
+  ) });
+}
+const toastVariants = cva(
+  [
+    "flex items-center gap-3 rounded-lg px-4 py-3 text-text-inverse shadow-lg select-none",
+    "[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-swipe-movement-y))]",
+    "transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none",
+    "data-starting-style:opacity-0 data-starting-style:[transform:translateY(100%)] md:data-starting-style:[transform:translateY(-100%)]",
+    "data-ending-style:opacity-0",
+    "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+    "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+    "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))]",
+    "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))]",
+    "data-limited:hidden focus-ring"
+  ],
+  {
+    variants: {
+      status: {
+        neutral: "bg-surface-inverse",
+        // success-STRONG, not the status green: white on #34C759 is 2.22:1.
+        success: "bg-success-strong",
+        error: "bg-error-strong"
+      }
+    },
+    defaultVariants: {
+      status: "neutral"
+    }
+  }
+);
+const statusIcons = {
+  neutral: InfoCircleIcon,
+  success: CheckCircleIcon,
+  error: AlertCircleIcon
+};
+function isToastStatus(value) {
+  return value === "neutral" || value === "success" || value === "error";
+}
+function ToastItem({
+  toast
+}) {
+  const status = isToastStatus(toast.type) ? toast.type : "neutral";
+  const Icon = statusIcons[status];
+  return /* @__PURE__ */ jsxs(
+    Toast.Root,
+    {
+      toast,
+      "data-slot": "toast",
+      className: toastVariants({ status }),
+      children: [
+        toast.data?.icon !== false && /* @__PURE__ */ jsx(Icon, { size: "md", className: "shrink-0" }),
+        /* @__PURE__ */ jsx(
+          Toast.Title,
+          {
+            render: /* @__PURE__ */ jsx("p", {}),
+            className: "min-w-0 flex-1 text-body-small"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toast.Action,
+          {
+            render: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "inverse-ghost",
+                size: "small",
+                className: "-my-1.5 underline underline-offset-2"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ToastProvider,
+  useToast
+};
+//# sourceMappingURL=toast.js.map