@mediquo/medicore 0.1.0

package/dist/components/promo-app/promo-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promo-app.js","sources":["../../../src/components/promo-app/promo-app.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, useId } from \"react\";\n\nimport { CheckIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\n\nexport type PromoAppHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface PromoAppProps\n  extends Omit<ComponentProps<\"section\">, \"title\"> {\n  /** \"APP DE MEDIQUO\". */\n  eyebrow?: ReactNode;\n  /** \"Tu seguimiento en la app\". Heading/h2 look. */\n  title: ReactNode;\n  /** \"La misma cuenta en el navegador y en el móvil: mismas citas, documentos e historial.\" */\n  description?: ReactNode;\n  /**\n   * Only benefits the app has TODAY (\"Pide cita y entra a la videoconsulta.\"):\n   * nothing about uploading documents.\n   */\n  benefits?: string[];\n  /** The two `StoreBadge`s. */\n  stores?: ReactNode;\n  /** A screenshot of the app (`<img alt=\"…\" />`). Desktop only. */\n  image?: ReactNode;\n  /** Default 2. */\n  headingLevel?: PromoAppHeadingLevel;\n}\n\n/**\n * The block that takes the patient to the app, at the end of the home. `brand-dark`\n * background and white text in both modes. Not shown inside the native app.\n *\n * Figma `Layout` is not a prop: from 800px wide the screenshot sits on the right\n * (Desktop); below it the block stacks and the screenshot is left out (Mobile).\n */\nexport function PromoApp({\n  eyebrow,\n  title,\n  description,\n  benefits,\n  stores,\n  image,\n  headingLevel = 2,\n  className,\n  ...props\n}: PromoAppProps): React.JSX.Element {\n  const titleId = useId();\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <section\n      data-slot=\"promo-app\"\n      aria-labelledby={titleId}\n      className={cn(\"@container rounded-2xl bg-brand-dark\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-10 p-6 @min-[800px]:flex-row @min-[800px]:items-center @min-[800px]:p-12\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          {eyebrow && (\n            <p className=\"text-label-small text-text-inverse-secondary\">\n              {eyebrow}\n            </p>\n          )}\n          <Heading id={titleId} className=\"text-heading-h2 text-text-inverse\">\n            {title}\n          </Heading>\n          {description && (\n            <p className=\"text-body-default text-text-inverse-secondary\">\n              {description}\n            </p>\n          )}\n          {benefits && benefits.length > 0 && (\n            <ul className=\"flex flex-col gap-2\">\n              {benefits.map((benefit) => (\n                <li\n                  key={benefit}\n                  className=\"flex items-start gap-3 text-body-small text-text-inverse\"\n                >\n                  <CheckIcon size=\"md\" />\n                  <span className=\"min-w-0 flex-1\">{benefit}</span>\n                </li>\n              ))}\n            </ul>\n          )}\n          {stores && <div className=\"flex flex-wrap gap-3\">{stores}</div>}\n        </div>\n        {image && (\n          <div className=\"hidden h-75 w-90 shrink-0 overflow-hidden rounded-xl bg-overlay-light-subtle @min-[800px]:block [&>img]:size-full [&>img]:object-cover\">\n            {image}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;AAmCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,QAAM,UAAU,MAAA;AAChB,QAAM,UAAU,IAAI,YAAY;AAEhC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,WAAW,GAAG,wCAAwC,SAAS;AAAA,MAC9D,GAAG;AAAA,MAEJ,UAAA,qBAAC,OAAA,EAAI,WAAU,8FACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,UAAA,WACC,oBAAC,KAAA,EAAE,WAAU,gDACV,UAAA,SACH;AAAA,8BAED,SAAA,EAAQ,IAAI,SAAS,WAAU,qCAC7B,UAAA,OACH;AAAA,UACC,eACC,oBAAC,KAAA,EAAE,WAAU,iDACV,UAAA,aACH;AAAA,UAED,YAAY,SAAS,SAAS,KAC7B,oBAAC,MAAA,EAAG,WAAU,uBACX,UAAA,SAAS,IAAI,CAAC,YACb;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,oBAAC,WAAA,EAAU,MAAK,KAAA,CAAK;AAAA,gBACrB,oBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA,QAAA,CAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,YAJrC;AAAA,UAAA,CAMR,GACH;AAAA,UAED,UAAU,oBAAC,OAAA,EAAI,WAAU,wBAAwB,UAAA,OAAA,CAAO;AAAA,QAAA,GAC3D;AAAA,QACC,SACC,oBAAC,OAAA,EAAI,WAAU,0IACZ,UAAA,MAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/radio/field-item-label.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface FieldItemLabelProps {
+    "data-slot"?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * The `<label>` that wraps one option (a radio, a checkbox) and its text. Inside a
+ * MediCore `Field` it is rendered as a Base UI `Field.Item`, which gives the control
+ * its own id and its own label; without it every option would take the Field's id
+ * and be named by the Field label. Internal.
+ */
+export declare function FieldItemLabel({ className, children, ...props }: FieldItemLabelProps): React.JSX.Element;

package/dist/components/radio/field-item-label.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { useFieldContext } from "../field/field-context.js";
+function FieldItemLabel({
+  className,
+  children,
+  ...props
+}) {
+  const insideField = useFieldContext() !== null;
+  if (!insideField) {
+    return (
+      // biome-ignore lint/a11y/noLabelWithoutControl: the Base UI control among the children renders its own input.
+      /* @__PURE__ */ jsx("label", { className, ...props, children })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Field.Item,
+    {
+      render: /* @__PURE__ */ jsx("label", {}),
+      className,
+      ...props,
+      children
+    }
+  );
+}
+export {
+  FieldItemLabel
+};
+//# sourceMappingURL=field-item-label.js.map

package/dist/components/radio/field-item-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-item-label.js","sources":["../../../src/components/radio/field-item-label.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\n\nimport { useFieldContext } from \"../field/field-context\";\n\nexport interface FieldItemLabelProps {\n  \"data-slot\"?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * The `<label>` that wraps one option (a radio, a checkbox) and its text. Inside a\n * MediCore `Field` it is rendered as a Base UI `Field.Item`, which gives the control\n * its own id and its own label; without it every option would take the Field's id\n * and be named by the Field label. Internal.\n */\nexport function FieldItemLabel({\n  className,\n  children,\n  ...props\n}: FieldItemLabelProps): React.JSX.Element {\n  const insideField = useFieldContext() !== null;\n\n  if (!insideField) {\n    return (\n      // biome-ignore lint/a11y/noLabelWithoutControl: the Base UI control among the children renders its own input.\n      <label className={className} {...props}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Item\n      // biome-ignore lint/a11y/noLabelWithoutControl: the Base UI control among the children renders its own input.\n      render={<label />}\n      className={className}\n      {...props}\n    >\n      {children}\n    </BaseField.Item>\n  );\n}\n"],"names":["BaseField"],"mappings":";;;AAiBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,cAAc,sBAAsB;AAE1C,MAAI,CAAC,aAAa;AAChB;AAAA;AAAA,MAEE,oBAAC,SAAA,EAAM,WAAuB,GAAG,OAC9B,SAAA,CACH;AAAA;AAAA,EAEJ;AAEA,SACE;AAAA,IAACA,MAAU;AAAA,IAAV;AAAA,MAEC,4BAAS,SAAA,EAAM;AAAA,MACf;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1 @@
+export { Radio, RadioField, type RadioFieldProps, RadioGroup, type RadioGroupProps, type RadioProps, radioVariants, } from "./radio";

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,38 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+export declare const radioVariants: (props?: ({
+    standalone?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The dot of a checked radio: 8px in text-inverse. */
+export declare function RadioDot(): React.JSX.Element;
+export interface RadioProps<Value = string> extends Omit<BaseRadio.Root.Props<Value>, "className" | "children"> {
+    className?: string;
+}
+/**
+ * Single choice inside a `RadioGroup`. The label lives outside: use `RadioField`, or
+ * wrap radio and text in a `<label>`.
+ *
+ * A radio never unticks itself. If the person can go back to "none", that is a
+ * Checkbox or an explicit "Ninguna" option. The drawing is 20×20; the hit area is
+ * 44×44, and the whole row with `RadioField`.
+ */
+export declare function Radio<Value = string>({ className, ...props }: RadioProps<Value>): React.JSX.Element;
+export interface RadioFieldProps<Value = string> extends RadioProps<Value> {
+    /** The option's text. */
+    label: ReactNode;
+}
+/**
+ * Radio with its label: a row at least 44px high, all of it pressable, with the
+ * text 8px after the radio.
+ */
+export declare function RadioField<Value = string>({ label, className, ...props }: RadioFieldProps<Value>): React.JSX.Element;
+export interface RadioGroupProps<Value = string> extends Omit<BaseRadioGroup.Props<Value>, "className"> {
+    className?: string;
+}
+/**
+ * Group of radios with arrow-key navigation. Name it with `aria-labelledby`, or put
+ * it inside `Field` (Control=Custom), which labels it and shows the message under it.
+ * Don't preselect an option unless there is a real default.
+ */
+export declare function RadioGroup<Value = string>({ className, ...props }: RadioGroupProps<Value>): React.JSX.Element;

package/dist/components/radio/radio.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { FieldItemLabel } from "./field-item-label.js";
+import { useFieldGroupLabel } from "./use-field-group-label.js";
+const radioVariants = cva(
+  [
+    "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border",
+    "border-border-input bg-background transition-colors",
+    "data-checked:border-brand data-checked:bg-brand",
+    "data-invalid:data-unchecked:border-error",
+    "data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface",
+    "data-disabled:data-checked:border-border-strong data-disabled:data-checked:bg-border-strong"
+  ],
+  {
+    variants: {
+      // Off when the focus ring and the hit area belong to a bigger container that
+      // wraps the radio (SelectionCard).
+      standalone: {
+        true: "focus-ring touch-target",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      standalone: true
+    }
+  }
+);
+function RadioDot() {
+  return /* @__PURE__ */ jsx(Radio$1.Indicator, { className: "size-2 rounded-full bg-text-inverse" });
+}
+function Radio({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Radio$1.Root,
+    {
+      "data-slot": "radio",
+      className: cn(radioVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioDot, {})
+    }
+  );
+}
+function RadioField({
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    FieldItemLabel,
+    {
+      "data-slot": "radio-field",
+      className: cn(
+        "flex min-h-11 cursor-pointer items-start gap-2 py-3 text-label-default text-text-primary",
+        "has-data-disabled:cursor-not-allowed has-data-disabled:text-text-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Radio, { ...props }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function RadioGroup({
+  className,
+  ...props
+}) {
+  useFieldGroupLabel();
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1,
+    {
+      "data-slot": "radio-group",
+      className: cn("flex flex-col", className),
+      ...props
+    }
+  );
+}
+export {
+  Radio,
+  RadioDot,
+  RadioField,
+  RadioGroup,
+  radioVariants
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { FieldItemLabel } from \"./field-item-label\";\nimport { useFieldGroupLabel } from \"./use-field-group-label\";\n\nexport const radioVariants = cva(\n  [\n    \"inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border\",\n    \"border-border-input bg-background transition-colors\",\n    \"data-checked:border-brand data-checked:bg-brand\",\n    \"data-invalid:data-unchecked:border-error\",\n    \"data-disabled:cursor-not-allowed data-disabled:border-border data-disabled:bg-surface\",\n    \"data-disabled:data-checked:border-border-strong data-disabled:data-checked:bg-border-strong\",\n  ],\n  {\n    variants: {\n      // Off when the focus ring and the hit area belong to a bigger container that\n      // wraps the radio (SelectionCard).\n      standalone: {\n        true: \"focus-ring touch-target\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      standalone: true,\n    },\n  },\n);\n\n/** The dot of a checked radio: 8px in text-inverse. */\nexport function RadioDot(): React.JSX.Element {\n  return (\n    <BaseRadio.Indicator className=\"size-2 rounded-full bg-text-inverse\" />\n  );\n}\n\nexport interface RadioProps<Value = string>\n  extends Omit<BaseRadio.Root.Props<Value>, \"className\" | \"children\"> {\n  className?: string;\n}\n\n/**\n * Single choice inside a `RadioGroup`. The label lives outside: use `RadioField`, or\n * wrap radio and text in a `<label>`.\n *\n * A radio never unticks itself. If the person can go back to \"none\", that is a\n * Checkbox or an explicit \"Ninguna\" option. The drawing is 20×20; the hit area is\n * 44×44, and the whole row with `RadioField`.\n */\nexport function Radio<Value = string>({\n  className,\n  ...props\n}: RadioProps<Value>): React.JSX.Element {\n  return (\n    <BaseRadio.Root\n      data-slot=\"radio\"\n      className={cn(radioVariants(), className)}\n      {...props}\n    >\n      <RadioDot />\n    </BaseRadio.Root>\n  );\n}\n\nexport interface RadioFieldProps<Value = string> extends RadioProps<Value> {\n  /** The option's text. */\n  label: ReactNode;\n}\n\n/**\n * Radio with its label: a row at least 44px high, all of it pressable, with the\n * text 8px after the radio.\n */\nexport function RadioField<Value = string>({\n  label,\n  className,\n  ...props\n}: RadioFieldProps<Value>): React.JSX.Element {\n  return (\n    <FieldItemLabel\n      data-slot=\"radio-field\"\n      className={cn(\n        \"flex min-h-11 cursor-pointer items-start gap-2 py-3 text-label-default text-text-primary\",\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:text-text-disabled\",\n        className,\n      )}\n    >\n      <Radio {...props} />\n      <span>{label}</span>\n    </FieldItemLabel>\n  );\n}\n\nexport interface RadioGroupProps<Value = string>\n  extends Omit<BaseRadioGroup.Props<Value>, \"className\"> {\n  className?: string;\n}\n\n/**\n * Group of radios with arrow-key navigation. Name it with `aria-labelledby`, or put\n * it inside `Field` (Control=Custom), which labels it and shows the message under it.\n * Don't preselect an option unless there is a real default.\n */\nexport function RadioGroup<Value = string>({\n  className,\n  ...props\n}: RadioGroupProps<Value>): React.JSX.Element {\n  useFieldGroupLabel();\n\n  return (\n    <BaseRadioGroup\n      data-slot=\"radio-group\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n"],"names":["BaseRadio","BaseRadioGroup"],"mappings":";;;;;;;AASO,MAAM,gBAAgB;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,YAAY;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,YAAY;AAAA,IAAA;AAAA,EACd;AAEJ;AAGO,SAAS,WAA8B;AAC5C,SACE,oBAACA,QAAU,WAAV,EAAoB,WAAU,sCAAA,CAAsC;AAEzE;AAeO,SAAS,MAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE;AAAA,IAACA,QAAU;AAAA,IAAV;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAA,GAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,MAEJ,8BAAC,UAAA,CAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGhB;AAWO,SAAS,WAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAO,GAAG,OAAO;AAAA,QAClB,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnB;AAYO,SAAS,WAA2B;AAAA,EACzC;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,qBAAA;AAEA,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/radio/use-field-group-label.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Inside a MediCore `Field`, a group of options (radios, checkboxes, stars) is named
+ * by the Field label through `aria-labelledby`. That label must not be a native
+ * `<label>`: it can only point at one input, and a click on it would tick an option.
+ * Internal to MediCore's group controls.
+ */
+export declare function useFieldGroupLabel(): void;

package/dist/components/radio/use-field-group-label.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useFieldContext } from "../field/field-context.js";
+function useFieldGroupLabel() {
+  const setNativeLabel = useFieldContext()?.setNativeLabel;
+  useEffect(() => {
+    if (!setNativeLabel) {
+      return void 0;
+    }
+    setNativeLabel(false);
+    return () => setNativeLabel(true);
+  }, [setNativeLabel]);
+}
+export {
+  useFieldGroupLabel
+};
+//# sourceMappingURL=use-field-group-label.js.map

package/dist/components/radio/use-field-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-group-label.js","sources":["../../../src/components/radio/use-field-group-label.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { useFieldContext } from \"../field/field-context\";\n\n/**\n * Inside a MediCore `Field`, a group of options (radios, checkboxes, stars) is named\n * by the Field label through `aria-labelledby`. That label must not be a native\n * `<label>`: it can only point at one input, and a click on it would tick an option.\n * Internal to MediCore's group controls.\n */\nexport function useFieldGroupLabel(): void {\n  const setNativeLabel = useFieldContext()?.setNativeLabel;\n\n  useEffect(() => {\n    if (!setNativeLabel) {\n      return undefined;\n    }\n    setNativeLabel(false);\n    return () => setNativeLabel(true);\n  }, [setNativeLabel]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,qBAA2B;AACzC,QAAM,iBAAiB,mBAAmB;AAE1C,YAAU,MAAM;AACd,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA,IACT;AACA,mBAAe,KAAK;AACpB,WAAO,MAAM,eAAe,IAAI;AAAA,EAClC,GAAG,CAAC,cAAc,CAAC;AACrB;"}

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

@@ -0,0 +1 @@
+export { Rating, type RatingProps } from "./rating";

package/dist/components/rating/rating.d.ts

@@ -0,0 +1,23 @@
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+export interface RatingProps extends Omit<BaseRadioGroup.Props<number | null>, "className" | "children" | "value" | "defaultValue" | "onValueChange"> {
+    /** 1–5, or `null` for no rating yet. */
+    value?: number | null;
+    /** Leave it empty: a rating that starts at 5 measures nothing. */
+    defaultValue?: number | null;
+    onValueChange?: (value: number, eventDetails: BaseRadioGroup.ChangeEventDetails) => void;
+    /**
+     * Display only: a still image of the stars named "4 de 5 estrellas", with no
+     * radios. Decimals are rounded.
+     */
+    readOnly?: boolean;
+    className?: string;
+}
+/**
+ * 1-to-5 rating after a consultation. Interactive, it is a radio group (arrow keys
+ * move and select) with one accessible name per star ("4 de 5 estrellas", from
+ * `labels.rating`); name the group with `aria-label` or `aria-labelledby`.
+ *
+ * Every star has a 44×44 area although it is drawn at 28: it is tapped with the
+ * thumb, one-handed, right after the video call. Starts with no star selected.
+ */
+export declare function Rating({ value, defaultValue, onValueChange, readOnly, className, ...props }: RatingProps): React.JSX.Element;

package/dist/components/rating/rating.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { useState } from "react";
+import { Star01Icon } from "../../icons/generated/star-01.js";
+import { cn } from "../../lib/cn.js";
+import { useFieldContext } from "../field/field-context.js";
+import { useFieldGroupLabel } from "../radio/use-field-group-label.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const MAX = 5;
+const STARS = [1, 2, 3, 4, 5];
+function Star({ filled }) {
+  return /* @__PURE__ */ jsx(
+    Star01Icon,
+    {
+      className: cn(
+        "size-7",
+        filled ? "fill-current text-text-brand" : "text-border-input"
+      )
+    }
+  );
+}
+function Rating({
+  value,
+  defaultValue = null,
+  onValueChange,
+  readOnly = false,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const current = value !== void 0 ? value : uncontrolledValue;
+  const rounded = current === null ? 0 : Math.round(current);
+  const insideField = useFieldContext() !== null;
+  useFieldGroupLabel();
+  if (readOnly) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "rating",
+        role: "img",
+        "aria-label": labels.rating(rounded, MAX),
+        className: cn("inline-flex", className),
+        children: STARS.map((star) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex size-11 items-center justify-center",
+            children: /* @__PURE__ */ jsx(Star, { filled: star <= rounded })
+          },
+          star
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "data-slot": "rating",
+      value: current,
+      onValueChange: (next, eventDetails) => {
+        if (next === null) {
+          return;
+        }
+        setUncontrolledValue(next);
+        onValueChange?.(next, eventDetails);
+      },
+      className: cn("inline-flex", className),
+      ...props,
+      children: STARS.map((star) => {
+        const radio = /* @__PURE__ */ jsx(
+          Radio.Root,
+          {
+            value: star,
+            "aria-label": labels.rating(star, MAX),
+            className: cn(
+              "inline-flex size-11 cursor-pointer items-center justify-center rounded-lg focus-ring",
+              "data-disabled:cursor-not-allowed data-disabled:[&_svg]:text-text-disabled"
+            ),
+            children: /* @__PURE__ */ jsx(Star, { filled: star <= rounded })
+          },
+          star
+        );
+        return insideField ? /* @__PURE__ */ jsx(Field.Item, { className: "flex", children: radio }, star) : radio;
+      })
+    }
+  );
+}
+export {
+  Rating
+};
+//# sourceMappingURL=rating.js.map

package/dist/components/rating/rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","sources":["../../../src/components/rating/rating.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { useState } from \"react\";\n\nimport { Star01Icon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { useFieldContext } from \"../field/field-context\";\nimport { useFieldGroupLabel } from \"../radio/use-field-group-label\";\n\nconst MAX = 5;\nconst STARS = [1, 2, 3, 4, 5] as const;\n\n// Filled in brand with a fill, empty only outlined in border-input (5.41:1): the\n// difference is the shape, not just the colour. The typical amber gives 2.36:1.\nfunction Star({ filled }: { filled: boolean }): React.JSX.Element {\n  return (\n    <Star01Icon\n      className={cn(\n        \"size-7\",\n        filled ? \"fill-current text-text-brand\" : \"text-border-input\",\n      )}\n    />\n  );\n}\n\nexport interface RatingProps\n  extends Omit<\n    BaseRadioGroup.Props<number | null>,\n    \"className\" | \"children\" | \"value\" | \"defaultValue\" | \"onValueChange\"\n  > {\n  /** 1–5, or `null` for no rating yet. */\n  value?: number | null;\n  /** Leave it empty: a rating that starts at 5 measures nothing. */\n  defaultValue?: number | null;\n  onValueChange?: (\n    value: number,\n    eventDetails: BaseRadioGroup.ChangeEventDetails,\n  ) => void;\n  /**\n   * Display only: a still image of the stars named \"4 de 5 estrellas\", with no\n   * radios. Decimals are rounded.\n   */\n  readOnly?: boolean;\n  className?: string;\n}\n\n/**\n * 1-to-5 rating after a consultation. Interactive, it is a radio group (arrow keys\n * move and select) with one accessible name per star (\"4 de 5 estrellas\", from\n * `labels.rating`); name the group with `aria-label` or `aria-labelledby`.\n *\n * Every star has a 44×44 area although it is drawn at 28: it is tapped with the\n * thumb, one-handed, right after the video call. Starts with no star selected.\n */\nexport function Rating({\n  value,\n  defaultValue = null,\n  onValueChange,\n  readOnly = false,\n  className,\n  ...props\n}: RatingProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const current = value !== undefined ? value : uncontrolledValue;\n  const rounded = current === null ? 0 : Math.round(current);\n  const insideField = useFieldContext() !== null;\n  useFieldGroupLabel();\n\n  if (readOnly) {\n    return (\n      <span\n        data-slot=\"rating\"\n        role=\"img\"\n        aria-label={labels.rating(rounded, MAX)}\n        className={cn(\"inline-flex\", className)}\n      >\n        {STARS.map((star) => (\n          <span\n            key={star}\n            className=\"inline-flex size-11 items-center justify-center\"\n          >\n            <Star filled={star <= rounded} />\n          </span>\n        ))}\n      </span>\n    );\n  }\n\n  return (\n    <BaseRadioGroup<number | null>\n      data-slot=\"rating\"\n      value={current}\n      onValueChange={(next, eventDetails) => {\n        if (next === null) {\n          return;\n        }\n        setUncontrolledValue(next);\n        onValueChange?.(next, eventDetails);\n      }}\n      className={cn(\"inline-flex\", className)}\n      {...props}\n    >\n      {STARS.map((star) => {\n        const radio = (\n          <BaseRadio.Root\n            key={star}\n            value={star}\n            aria-label={labels.rating(star, MAX)}\n            className={cn(\n              \"inline-flex size-11 cursor-pointer items-center justify-center rounded-lg focus-ring\",\n              \"data-disabled:cursor-not-allowed data-disabled:[&_svg]:text-text-disabled\",\n            )}\n          >\n            <Star filled={star <= rounded} />\n          </BaseRadio.Root>\n        );\n        // Inside a Field, Field.Item keeps each star's own id instead of the Field's.\n        return insideField ? (\n          <BaseField.Item key={star} className=\"flex\">\n            {radio}\n          </BaseField.Item>\n        ) : (\n          radio\n        );\n      })}\n    </BaseRadioGroup>\n  );\n}\n"],"names":["BaseRadioGroup","BaseRadio","BaseField"],"mappings":";;;;;;;;;;AAWA,MAAM,MAAM;AACZ,MAAM,QAAQ,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAI5B,SAAS,KAAK,EAAE,UAAkD;AAChE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,iCAAiC;AAAA,MAAA;AAAA,IAC5C;AAAA,EAAA;AAGN;AA+BO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS,kBAAA;AACf,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,YAAY;AACvE,QAAM,UAAU,UAAU,SAAY,QAAQ;AAC9C,QAAM,UAAU,YAAY,OAAO,IAAI,KAAK,MAAM,OAAO;AACzD,QAAM,cAAc,sBAAsB;AAC1C,qBAAA;AAEA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,OAAO,OAAO,SAAS,GAAG;AAAA,QACtC,WAAW,GAAG,eAAe,SAAS;AAAA,QAErC,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,QAAQ,QAAQ,QAAA,CAAS;AAAA,UAAA;AAAA,UAH1B;AAAA,QAAA,CAKR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,MACP,eAAe,CAAC,MAAM,iBAAiB;AACrC,YAAI,SAAS,MAAM;AACjB;AAAA,QACF;AACA,6BAAqB,IAAI;AACzB,wBAAgB,MAAM,YAAY;AAAA,MACpC;AAAA,MACA,WAAW,GAAG,eAAe,SAAS;AAAA,MACrC,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,cAAM,QACJ;AAAA,UAACC,MAAU;AAAA,UAAV;AAAA,YAEC,OAAO;AAAA,YACP,cAAY,OAAO,OAAO,MAAM,GAAG;AAAA,YACnC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,oBAAC,MAAA,EAAK,QAAQ,QAAQ,QAAA,CAAS;AAAA,UAAA;AAAA,UAR1B;AAAA,QAAA;AAYT,eAAO,kCACJC,MAAU,MAAV,EAA0B,WAAU,QAClC,UAAA,SADkB,IAErB,IAEA;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/section-header/index.d.ts

@@ -0,0 +1 @@
+export { SectionHeader, SectionHeaderAction, type SectionHeaderActionProps, type SectionHeaderHeadingLevel, type SectionHeaderProps, } from "./section-header";

package/dist/components/section-header/section-header.d.ts

@@ -0,0 +1,37 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from "react";
+export type SectionHeaderHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface SectionHeaderProps extends Omit<ComponentProps<"div">, "title"> {
+    title: ReactNode;
+    /**
+     * Heading level (h2–h6) for the page outline. The look is always Body/Default
+     * Strong; the level comes from the context. Default 2.
+     */
+    headingLevel?: SectionHeaderHeadingLevel;
+    /**
+     * "Ver todas": a `SectionHeaderAction`. Leave it out when the section has nowhere
+     * to go — a "Ver todas" that opens a list of three things is worse than none.
+     */
+    action?: ReactNode;
+}
+/**
+ * Section header: title on the left, optional "Ver todas" on the right. The home
+ * has five of these.
+ *
+ * The title is Body/Default Strong (16 Medium), not a heading style: an h3/h4 look
+ * here would compete with the page title. The real level is `headingLevel`.
+ */
+export declare function SectionHeader({ title, headingLevel, action, className, ...props }: SectionHeaderProps): React.JSX.Element;
+export interface SectionHeaderActionProps extends useRender.ComponentProps<"a"> {
+    /** Default `arrow-right`. */
+    trailingIcon?: ReactNode;
+}
+/**
+ * The "Ver todas" of a `SectionHeader`: a real link (`href`, or
+ * `render={<Link to="…" />}` for the router) drawn as a ghost small `Button` with an
+ * arrow — not a text link. A loose link that is a main action needs a hit area (36
+ * drawn, 44 to the touch), and an inline Link can't have one without breaking the
+ * line height. Not underlined either: it's a control on its own row, its position
+ * already sets it apart.
+ */
+export declare function SectionHeaderAction({ render, ref, trailingIcon, className, children, ...props }: SectionHeaderActionProps): React.JSX.Element;

package/dist/components/section-header/section-header.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowRightIcon } from "../../icons/generated/arrow-right.js";
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "../button/button.js";
+function SectionHeader({
+  title,
+  headingLevel = 2,
+  action,
+  className,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "section-header",
+      className: cn(
+        "flex min-h-10 w-full items-center justify-between gap-4 px-1",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Heading, { className: "min-w-0 text-body-default-strong text-text-primary", children: title }),
+        action
+      ]
+    }
+  );
+}
+function SectionHeaderAction({
+  render,
+  ref,
+  trailingIcon = /* @__PURE__ */ jsx(ArrowRightIcon, {}),
+  className,
+  children,
+  ...props
+}) {
+  return useRender({
+    render,
+    ref,
+    defaultTagName: "a",
+    props: {
+      "data-slot": "section-header-action",
+      className: cn(
+        buttonVariants({ variant: "ghost", size: "small" }),
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        trailingIcon
+      ] }),
+      ...props
+    }
+  });
+}
+export {
+  SectionHeader,
+  SectionHeaderAction
+};
+//# sourceMappingURL=section-header.js.map

package/dist/components/section-header/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.js","sources":["../../../src/components/section-header/section-header.tsx"],"sourcesContent":["import { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { ArrowRightIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"../button\";\n\nexport type SectionHeaderHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface SectionHeaderProps\n  extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: ReactNode;\n  /**\n   * Heading level (h2–h6) for the page outline. The look is always Body/Default\n   * Strong; the level comes from the context. Default 2.\n   */\n  headingLevel?: SectionHeaderHeadingLevel;\n  /**\n   * \"Ver todas\": a `SectionHeaderAction`. Leave it out when the section has nowhere\n   * to go — a \"Ver todas\" that opens a list of three things is worse than none.\n   */\n  action?: ReactNode;\n}\n\n/**\n * Section header: title on the left, optional \"Ver todas\" on the right. The home\n * has five of these.\n *\n * The title is Body/Default Strong (16 Medium), not a heading style: an h3/h4 look\n * here would compete with the page title. The real level is `headingLevel`.\n */\nexport function SectionHeader({\n  title,\n  headingLevel = 2,\n  action,\n  className,\n  ...props\n}: SectionHeaderProps): React.JSX.Element {\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <div\n      data-slot=\"section-header\"\n      className={cn(\n        \"flex min-h-10 w-full items-center justify-between gap-4 px-1\",\n        className,\n      )}\n      {...props}\n    >\n      <Heading className=\"min-w-0 text-body-default-strong text-text-primary\">\n        {title}\n      </Heading>\n      {action}\n    </div>\n  );\n}\n\nexport interface SectionHeaderActionProps\n  extends useRender.ComponentProps<\"a\"> {\n  /** Default `arrow-right`. */\n  trailingIcon?: ReactNode;\n}\n\n/**\n * The \"Ver todas\" of a `SectionHeader`: a real link (`href`, or\n * `render={<Link to=\"…\" />}` for the router) drawn as a ghost small `Button` with an\n * arrow — not a text link. A loose link that is a main action needs a hit area (36\n * drawn, 44 to the touch), and an inline Link can't have one without breaking the\n * line height. Not underlined either: it's a control on its own row, its position\n * already sets it apart.\n */\nexport function SectionHeaderAction({\n  render,\n  ref,\n  trailingIcon = <ArrowRightIcon />,\n  className,\n  children,\n  ...props\n}: SectionHeaderActionProps): React.JSX.Element {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: \"a\",\n    props: {\n      \"data-slot\": \"section-header-action\",\n      className: cn(\n        buttonVariants({ variant: \"ghost\", size: \"small\" }),\n        className,\n      ),\n      children: (\n        <>\n          {children}\n          {trailingIcon}\n        </>\n      ),\n      ...props,\n    },\n  });\n}\n"],"names":[],"mappings":";;;;;AA+BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,UAAU,IAAI,YAAY;AAEhC,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,oBAAC,SAAA,EAAQ,WAAU,sDAChB,UAAA,OACH;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAgBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,mCAAgB,gBAAA,EAAe;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SAAO,UAAU;AAAA,IACf;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL,aAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,SAAS,MAAM,SAAS;AAAA,QAClD;AAAA,MAAA;AAAA,MAEF,UACE,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,MAAA,GACH;AAAA,MAEF,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AACH;"}

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export { SegmentedControl, type SegmentedControlOption, type SegmentedControlOptions, type SegmentedControlProps, } from "./segmented-control";

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,34 @@
+import { RadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+export interface SegmentedControlOption<Value extends string = string> {
+    value: Value;
+    /** Short: one or two words. With long labels the segments get cut on mobile. */
+    label: ReactNode;
+    disabled?: boolean;
+}
+/** Two or three segments, never more: the type doesn't let you build a fourth. */
+export type SegmentedControlOptions<Value extends string = string> = readonly [SegmentedControlOption<Value>, SegmentedControlOption<Value>] | readonly [
+    SegmentedControlOption<Value>,
+    SegmentedControlOption<Value>,
+    SegmentedControlOption<Value>
+];
+export interface SegmentedControlProps<Value extends string = string> extends Omit<RadioGroup.Props<Value>, "className" | "children"> {
+    /** 2 or 3 options. For more use a `Select` or a row of `Chip`s. */
+    options: SegmentedControlOptions<Value>;
+    className?: string;
+}
+/**
+ * Exclusive filter of the SAME list: Todos / No leídos in Chats.
+ *
+ * - It filters, it doesn't switch views: it's a `radiogroup` of `radio`s with
+ *   `aria-checked` (←/→ move the selection), not a tablist. To change what you are
+ *   looking at, use `Tabs`.
+ * - Name it with `aria-label` ("Filtrar chats") or `aria-labelledby`.
+ * - The active segment is told apart by shape, not only colour: the only white pill
+ *   with a shadow on the grey track, label in Medium. Inactive `text-secondary` on
+ *   `surface-raised` is 4.60:1 — don't lighten the track.
+ * - Every segment is the same width even if the labels aren't, so the control
+ *   doesn't jump when the language changes. It hugs the longest label; pass
+ *   `className="w-full"` to fill its container.
+ */
+export declare function SegmentedControl<Value extends string>({ options, className, ...props }: SegmentedControlProps<Value>): React.JSX.Element;

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import { cn } from "../../lib/cn.js";
+function SegmentedControl({
+  options,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "data-slot": "segmented-control",
+      className: cn(
+        "relative inline-grid h-control-md auto-cols-fr grid-flow-col gap-1 rounded-lg bg-surface-raised p-1",
+        className
+      ),
+      ...props,
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        Radio.Root,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          "data-slot": "segmented-control-segment",
+          className: cn(
+            "inline-flex min-w-0 cursor-pointer select-none items-center justify-center rounded-md px-3",
+            "text-label-default text-text-secondary transition-colors",
+            "not-data-disabled:not-data-checked:hover:text-text-primary",
+            "data-checked:bg-background data-checked:text-label-strong data-checked:text-text-primary data-checked:shadow-xs",
+            "data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+            // 32px drawn, 44px hit area.
+            "focus-ring touch-target"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-label": typeof option.label === "string" ? option.label : void 0,
+              className: "flex min-w-0 flex-col after:invisible after:h-0 after:overflow-hidden after:text-label-strong after:content-[attr(data-label)]",
+              children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+            }
+          )
+        },
+        option.value
+      ))
+    }
+  );
+}
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface SegmentedControlOption<Value extends string = string> {\n  value: Value;\n  /** Short: one or two words. With long labels the segments get cut on mobile. */\n  label: ReactNode;\n  disabled?: boolean;\n}\n\n/** Two or three segments, never more: the type doesn't let you build a fourth. */\nexport type SegmentedControlOptions<Value extends string = string> =\n  | readonly [SegmentedControlOption<Value>, SegmentedControlOption<Value>]\n  | readonly [\n      SegmentedControlOption<Value>,\n      SegmentedControlOption<Value>,\n      SegmentedControlOption<Value>,\n    ];\n\nexport interface SegmentedControlProps<Value extends string = string>\n  extends Omit<RadioGroup.Props<Value>, \"className\" | \"children\"> {\n  /** 2 or 3 options. For more use a `Select` or a row of `Chip`s. */\n  options: SegmentedControlOptions<Value>;\n  className?: string;\n}\n\n/**\n * Exclusive filter of the SAME list: Todos / No leídos in Chats.\n *\n * - It filters, it doesn't switch views: it's a `radiogroup` of `radio`s with\n *   `aria-checked` (←/→ move the selection), not a tablist. To change what you are\n *   looking at, use `Tabs`.\n * - Name it with `aria-label` (\"Filtrar chats\") or `aria-labelledby`.\n * - The active segment is told apart by shape, not only colour: the only white pill\n *   with a shadow on the grey track, label in Medium. Inactive `text-secondary` on\n *   `surface-raised` is 4.60:1 — don't lighten the track.\n * - Every segment is the same width even if the labels aren't, so the control\n *   doesn't jump when the language changes. It hugs the longest label; pass\n *   `className=\"w-full\"` to fill its container.\n */\nexport function SegmentedControl<Value extends string>({\n  options,\n  className,\n  ...props\n}: SegmentedControlProps<Value>): React.JSX.Element {\n  return (\n    <RadioGroup\n      data-slot=\"segmented-control\"\n      className={cn(\n        \"relative inline-grid h-control-md auto-cols-fr grid-flow-col gap-1 rounded-lg bg-surface-raised p-1\",\n        className,\n      )}\n      {...props}\n    >\n      {options.map((option) => (\n        <Radio.Root\n          key={option.value}\n          value={option.value}\n          disabled={option.disabled}\n          data-slot=\"segmented-control-segment\"\n          className={cn(\n            \"inline-flex min-w-0 cursor-pointer select-none items-center justify-center rounded-md px-3\",\n            \"text-label-default text-text-secondary transition-colors\",\n            \"not-data-disabled:not-data-checked:hover:text-text-primary\",\n            \"data-checked:bg-background data-checked:text-label-strong data-checked:text-text-primary data-checked:shadow-xs\",\n            \"data-disabled:cursor-not-allowed data-disabled:text-text-disabled\",\n            // 32px drawn, 44px hit area.\n            \"focus-ring touch-target\",\n          )}\n        >\n          <span\n            // An invisible Medium copy of the label reserves the selected width, so\n            // the control doesn't jump when the selection changes.\n            data-label={\n              typeof option.label === \"string\" ? option.label : undefined\n            }\n            className=\"flex min-w-0 flex-col after:invisible after:h-0 after:overflow-hidden after:text-label-strong after:content-[attr(data-label)]\"\n          >\n            <span className=\"truncate\">{option.label}</span>\n          </span>\n        </Radio.Root>\n      ))}\n    </RadioGroup>\n  );\n}\n"],"names":[],"mappings":";;;;AA2CO,SAAS,iBAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoD;AAClD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,WACZ;AAAA,QAAC,MAAM;AAAA,QAAN;AAAA,UAEC,OAAO,OAAO;AAAA,UACd,UAAU,OAAO;AAAA,UACjB,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,YAEA;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAGC,cACE,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ;AAAA,cAEpD,WAAU;AAAA,cAEV,UAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,iBAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3C;AAAA,QAvBK,OAAO;AAAA,MAAA,CAyBf;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,2 @@
+export { NativeSelect, type NativeSelectProps } from "./native-select";
+export { Select, SelectItem, type SelectItemProps, type SelectOption, type SelectProps, } from "./select";

package/dist/components/select/native-select.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode, Ref } from "react";
+import { type ControlSize } from "../input/control-styles";
+export interface NativeSelectProps extends Omit<ComponentProps<"select">, "className" | "size" | "ref"> {
+    ref?: Ref<HTMLSelectElement>;
+    /** `default` 40px, `small` 36px: the same heights as Input and Button. */
+    size?: ControlSize;
+    /** Red 2px border and `aria-invalid`. The message goes under it, in `Field`. */
+    invalid?: boolean;
+    /** Content icon before the value. The chevron is structure, not a prop. */
+    leadingIcon?: ReactNode;
+    /**
+     * First, unselectable option shown in text-secondary while nothing is chosen
+     * ("Elige una opción"). Without `value`/`defaultValue` the select starts on it.
+     */
+    placeholder?: string;
+    /** Called with the chosen option's value. */
+    onValueChange?: (value: string) => void;
+    /** Applied to the box: use it for the width. */
+    className?: string;
+}
+/**
+ * Dropdown on a native `<select>` with the geometry of Input. The default choice,
+ * and the only one on mobile: it opens the operating system's picker and is
+ * accessible out of the box (keyboard, screen reader, type to search). GOV.UK uses it
+ * by rule; Doctolib on mobile.
+ *
+ * Options are plain `<option>` / `<optgroup>` children. For a list styled like
+ * MediCore on desktop use `Select`.
+ */
+export declare function NativeSelect({ size, invalid, leadingIcon, placeholder, className, children, id, name, value, defaultValue, disabled, onValueChange, "aria-describedby": ariaDescribedBy, ref, ...props }: NativeSelectProps): React.JSX.Element;