@mediquo/medicore 0.1.0

package/dist/components/select/native-select.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { ChevronDownIcon } from "../../icons/generated/chevron-down.js";
+import { cn } from "../../lib/cn.js";
+import { controlIcon, wrappedControlStates, controlHeight, controlBox } from "../input/control-styles.js";
+function NativeSelect({
+  size = "default",
+  invalid = false,
+  leadingIcon,
+  placeholder,
+  className,
+  children,
+  id,
+  name,
+  value,
+  defaultValue,
+  disabled,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  ref,
+  ...props
+}) {
+  const startOnPlaceholder = placeholder !== void 0 && value === void 0 && defaultValue === void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "native-select",
+      className: cn(
+        "group/control relative flex items-center text-label-default",
+        controlBox,
+        controlHeight[size],
+        wrappedControlStates,
+        className
+      ),
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(controlIcon, "pointer-events-none absolute start-3"),
+            children: leadingIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Field.Control,
+          {
+            ref,
+            "data-slot": "native-select-control",
+            id,
+            name,
+            value,
+            defaultValue: startOnPlaceholder ? "" : defaultValue,
+            disabled,
+            onValueChange,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": invalid && !disabled ? true : void 0,
+            className: cn(
+              "size-full min-w-0 cursor-pointer appearance-none truncate bg-transparent pe-9 outline-none",
+              "enabled:has-[option[value='']:checked]:text-text-secondary disabled:cursor-not-allowed",
+              // Some platforms paint the open list with the select's colours.
+              "[&_option]:bg-background [&_option]:text-text-primary",
+              leadingIcon ? "ps-9" : "ps-3"
+            ),
+            render: /* @__PURE__ */ jsxs("select", { ...props, children: [
+              placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+              children
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            size: "sm",
+            className: "pointer-events-none absolute end-3 text-text-primary group-has-[select:disabled]/control:text-text-disabled"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NativeSelect
+};
+//# sourceMappingURL=native-select.js.map

package/dist/components/select/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","sources":["../../../src/components/select/native-select.tsx"],"sourcesContent":["import { Field as BaseField } from \"@base-ui/react/field\";\nimport type { ComponentProps, ReactNode, Ref } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  type ControlSize,\n  controlBox,\n  controlHeight,\n  controlIcon,\n  wrappedControlStates,\n} from \"../input/control-styles\";\n\nexport interface NativeSelectProps\n  extends Omit<ComponentProps<\"select\">, \"className\" | \"size\" | \"ref\"> {\n  ref?: Ref<HTMLSelectElement>;\n  /** `default` 40px, `small` 36px: the same heights as Input and Button. */\n  size?: ControlSize;\n  /** Red 2px border and `aria-invalid`. The message goes under it, in `Field`. */\n  invalid?: boolean;\n  /** Content icon before the value. The chevron is structure, not a prop. */\n  leadingIcon?: ReactNode;\n  /**\n   * First, unselectable option shown in text-secondary while nothing is chosen\n   * (\"Elige una opción\"). Without `value`/`defaultValue` the select starts on it.\n   */\n  placeholder?: string;\n  /** Called with the chosen option's value. */\n  onValueChange?: (value: string) => void;\n  /** Applied to the box: use it for the width. */\n  className?: string;\n}\n\n/**\n * Dropdown on a native `<select>` with the geometry of Input. The default choice,\n * and the only one on mobile: it opens the operating system's picker and is\n * accessible out of the box (keyboard, screen reader, type to search). GOV.UK uses it\n * by rule; Doctolib on mobile.\n *\n * Options are plain `<option>` / `<optgroup>` children. For a list styled like\n * MediCore on desktop use `Select`.\n */\nexport function NativeSelect({\n  size = \"default\",\n  invalid = false,\n  leadingIcon,\n  placeholder,\n  className,\n  children,\n  id,\n  name,\n  value,\n  defaultValue,\n  disabled,\n  onValueChange,\n  \"aria-describedby\": ariaDescribedBy,\n  ref,\n  ...props\n}: NativeSelectProps): React.JSX.Element {\n  const startOnPlaceholder =\n    placeholder !== undefined &&\n    value === undefined &&\n    defaultValue === undefined;\n\n  return (\n    <div\n      data-slot=\"native-select\"\n      className={cn(\n        \"group/control relative flex items-center text-label-default\",\n        controlBox,\n        controlHeight[size],\n        wrappedControlStates,\n        className,\n      )}\n    >\n      {leadingIcon && (\n        <span\n          className={cn(controlIcon, \"pointer-events-none absolute start-3\")}\n        >\n          {leadingIcon}\n        </span>\n      )}\n      <BaseField.Control\n        ref={ref}\n        data-slot=\"native-select-control\"\n        id={id}\n        name={name}\n        value={value}\n        defaultValue={startOnPlaceholder ? \"\" : defaultValue}\n        disabled={disabled}\n        onValueChange={onValueChange}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={invalid && !disabled ? true : undefined}\n        className={cn(\n          \"size-full min-w-0 cursor-pointer appearance-none truncate bg-transparent pe-9 outline-none\",\n          \"enabled:has-[option[value='']:checked]:text-text-secondary disabled:cursor-not-allowed\",\n          // Some platforms paint the open list with the select's colours.\n          \"[&_option]:bg-background [&_option]:text-text-primary\",\n          leadingIcon ? \"ps-9\" : \"ps-3\",\n        )}\n        render={\n          <select {...props}>\n            {placeholder !== undefined && (\n              <option value=\"\" disabled hidden>\n                {placeholder}\n              </option>\n            )}\n            {children}\n          </select>\n        }\n      />\n      <ChevronDownIcon\n        size=\"sm\"\n        className=\"pointer-events-none absolute end-3 text-text-primary group-has-[select:disabled]/control:text-text-disabled\"\n      />\n    </div>\n  );\n}\n"],"names":["BaseField"],"mappings":";;;;;AA0CO,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;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,GAAyC;AACvC,QAAM,qBACJ,gBAAgB,UAChB,UAAU,UACV,iBAAiB;AAEnB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,cAAc,IAAI;AAAA,QAClB;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,aAAa,sCAAsC;AAAA,YAEhE,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL;AAAA,UAACA,MAAU;AAAA,UAAV;AAAA,YACC;AAAA,YACA,aAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA,cAAc,qBAAqB,KAAK;AAAA,YACxC;AAAA,YACA;AAAA,YACA,oBAAkB;AAAA,YAClB,gBAAc,WAAW,CAAC,WAAW,OAAO;AAAA,YAC5C,WAAW;AAAA,cACT;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,cACA,cAAc,SAAS;AAAA,YAAA;AAAA,YAEzB,QACE,qBAAC,UAAA,EAAQ,GAAG,OACT,UAAA;AAAA,cAAA,gBAAgB,8BACd,UAAA,EAAO,OAAM,IAAG,UAAQ,MAAC,QAAM,MAC7B,UAAA,YAAA,CACH;AAAA,cAED;AAAA,YAAA,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,49 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { type ReactNode, type Ref } from "react";
+import { type ControlSize } from "../input/control-styles";
+export interface SelectOption<Value> {
+    value: Value;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps<Value> extends Omit<BaseSelect.Root.Props<Value, false>, "multiple" | "items" | "children"> {
+    /** The options. Also lets the trigger show the label of the chosen value. */
+    items?: readonly SelectOption<Value>[];
+    /** Custom options (`SelectItem`) instead of `items`. */
+    children?: ReactNode;
+    /** Shown in text-secondary while nothing is chosen: "Elige una opción". */
+    placeholder?: ReactNode;
+    /** `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;
+    /** Applied to the trigger. */
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Dropdown with a styled list (Base UI Select). The trigger has exactly the geometry
+ * of Input, so a field and a select in the same row only differ by the chevron.
+ *
+ * The open list is not in Figma on purpose. Prefer `NativeSelect` on mobile and
+ * whenever the options are plain text: it opens the operating system's picker and
+ * is accessible out of the box. Use this one on desktop screens (the clinics admin)
+ * where the list has to look like MediCore. Options that an `<option>` can't draw
+ * (a doctor with photo and licence number) are a `Menu`, not this.
+ *
+ * Name it with `Field`'s label, or with `aria-label` when there is no visible label.
+ */
+export declare function Select<Value>({ items, children, placeholder, size, invalid, leadingIcon, className, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ref, ...props }: SelectProps<Value>): React.JSX.Element;
+export interface SelectItemProps extends Omit<BaseSelect.Item.Props, "className"> {
+    className?: string;
+}
+/**
+ * One option of `Select`: 40px rows like MenuItem (a list is used with a finger on
+ * it), surface on hover / arrow keys, a check on the chosen one.
+ */
+export declare function SelectItem({ className, children, ...props }: SelectItemProps): React.JSX.Element;

package/dist/components/select/select.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { useLayoutEffect } from "react";
+import { CheckIcon } from "../../icons/generated/check.js";
+import { ChevronDownIcon } from "../../icons/generated/chevron-down.js";
+import { cn } from "../../lib/cn.js";
+import { useFieldContext } from "../field/field-context.js";
+import { controlIcon, triggerControlStates, controlHeight, controlRow, controlBox } from "../input/control-styles.js";
+function Select({
+  items,
+  children,
+  placeholder,
+  size = "default",
+  invalid = false,
+  leadingIcon,
+  className,
+  disabled,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ref,
+  ...props
+}) {
+  const setNativeLabel = useFieldContext()?.setNativeLabel;
+  useLayoutEffect(() => {
+    if (!setNativeLabel) {
+      return void 0;
+    }
+    setNativeLabel(false);
+    return () => setNativeLabel(true);
+  }, [setNativeLabel]);
+  return /* @__PURE__ */ jsxs(Select$1.Root, { items, disabled, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        "data-slot": "select",
+        ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+        ...ariaLabelledBy !== void 0 && {
+          "aria-labelledby": ariaLabelledBy
+        },
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid && !disabled ? true : void 0,
+        className: cn(
+          "group/control cursor-pointer text-start",
+          controlBox,
+          controlRow,
+          controlHeight[size],
+          triggerControlStates,
+          className
+        ),
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx("span", { className: controlIcon, children: leadingIcon }),
+          /* @__PURE__ */ jsx(
+            Select$1.Value,
+            {
+              placeholder,
+              className: "min-w-0 flex-1 truncate data-placeholder:text-text-secondary group-data-disabled/control:text-text-disabled"
+            }
+          ),
+          /* @__PURE__ */ jsx(Select$1.Icon, { className: "flex shrink-0 text-text-primary group-data-disabled/control:text-text-disabled", children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "sm" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        alignItemWithTrigger: false,
+        sideOffset: 4,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ jsx(
+          Select$1.Popup,
+          {
+            "data-slot": "select-popup",
+            className: cn(
+              // Same surface as Menu: shadow-md to lift it and a border for when the
+              // shadow doesn't show (dark backgrounds, poor screens).
+              "max-h-[min(20rem,var(--available-height))] min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto",
+              "rounded-lg border border-border-subtle bg-background p-1 shadow-md outline-none",
+              "transition-[opacity,scale] duration-150 motion-reduce:transition-none",
+              "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0"
+            ),
+            children: /* @__PURE__ */ jsx(Select$1.List, { children: children ?? items?.map((item) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: item.value,
+                disabled: item.disabled,
+                children: item.label
+              },
+              String(item.value)
+            )) })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "flex h-control-md cursor-pointer select-none items-center gap-3 rounded-md px-3 text-label-default text-text-primary outline-none",
+        "data-highlighted:bg-surface focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-inset",
+        "data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "min-w-0 flex-1 truncate", children }),
+        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "flex shrink-0 text-text-brand", children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) })
+      ]
+    }
+  );
+}
+export {
+  Select,
+  SelectItem
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { type ReactNode, type Ref, useLayoutEffect } from \"react\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useFieldContext } from \"../field/field-context\";\nimport {\n  type ControlSize,\n  controlBox,\n  controlHeight,\n  controlIcon,\n  controlRow,\n  triggerControlStates,\n} from \"../input/control-styles\";\n\nexport interface SelectOption<Value> {\n  value: Value;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectProps<Value>\n  extends Omit<\n    BaseSelect.Root.Props<Value, false>,\n    \"multiple\" | \"items\" | \"children\"\n  > {\n  /** The options. Also lets the trigger show the label of the chosen value. */\n  items?: readonly SelectOption<Value>[];\n  /** Custom options (`SelectItem`) instead of `items`. */\n  children?: ReactNode;\n  /** Shown in text-secondary while nothing is chosen: \"Elige una opción\". */\n  placeholder?: ReactNode;\n  /** `default` 40px, `small` 36px: the same heights as Input and Button. */\n  size?: ControlSize;\n  /** Red 2px border and `aria-invalid`. The message goes under it, in `Field`. */\n  invalid?: boolean;\n  /** Content icon before the value. The chevron is structure, not a prop. */\n  leadingIcon?: ReactNode;\n  /** Applied to the trigger. */\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Dropdown with a styled list (Base UI Select). The trigger has exactly the geometry\n * of Input, so a field and a select in the same row only differ by the chevron.\n *\n * The open list is not in Figma on purpose. Prefer `NativeSelect` on mobile and\n * whenever the options are plain text: it opens the operating system's picker and\n * is accessible out of the box. Use this one on desktop screens (the clinics admin)\n * where the list has to look like MediCore. Options that an `<option>` can't draw\n * (a doctor with photo and licence number) are a `Menu`, not this.\n *\n * Name it with `Field`'s label, or with `aria-label` when there is no visible label.\n */\nexport function Select<Value>({\n  items,\n  children,\n  placeholder,\n  size = \"default\",\n  invalid = false,\n  leadingIcon,\n  className,\n  disabled,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ref,\n  ...props\n}: SelectProps<Value>): React.JSX.Element {\n  const setNativeLabel = useFieldContext()?.setNativeLabel;\n\n  // A native <label> around a button would open the list on click: Field renders a\n  // non-native label while a Select is inside.\n  useLayoutEffect(() => {\n    if (!setNativeLabel) {\n      return undefined;\n    }\n    setNativeLabel(false);\n    return () => setNativeLabel(true);\n  }, [setNativeLabel]);\n\n  return (\n    <BaseSelect.Root items={items} disabled={disabled} {...props}>\n      <BaseSelect.Trigger\n        ref={ref}\n        data-slot=\"select\"\n        // Only when given: an explicit undefined would override Field's aria-labelledby.\n        {...(ariaLabel !== undefined && { \"aria-label\": ariaLabel })}\n        {...(ariaLabelledBy !== undefined && {\n          \"aria-labelledby\": ariaLabelledBy,\n        })}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={invalid && !disabled ? true : undefined}\n        className={cn(\n          \"group/control cursor-pointer text-start\",\n          controlBox,\n          controlRow,\n          controlHeight[size],\n          triggerControlStates,\n          className,\n        )}\n      >\n        {leadingIcon && <span className={controlIcon}>{leadingIcon}</span>}\n        <BaseSelect.Value\n          placeholder={placeholder}\n          className=\"min-w-0 flex-1 truncate data-placeholder:text-text-secondary group-data-disabled/control:text-text-disabled\"\n        />\n        <BaseSelect.Icon className=\"flex shrink-0 text-text-primary group-data-disabled/control:text-text-disabled\">\n          <ChevronDownIcon size=\"sm\" />\n        </BaseSelect.Icon>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner\n          alignItemWithTrigger={false}\n          sideOffset={4}\n          className=\"z-50 outline-none\"\n        >\n          <BaseSelect.Popup\n            data-slot=\"select-popup\"\n            className={cn(\n              // Same surface as Menu: shadow-md to lift it and a border for when the\n              // shadow doesn't show (dark backgrounds, poor screens).\n              \"max-h-[min(20rem,var(--available-height))] min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto\",\n              \"rounded-lg border border-border-subtle bg-background p-1 shadow-md outline-none\",\n              \"transition-[opacity,scale] duration-150 motion-reduce:transition-none\",\n              \"data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\",\n            )}\n          >\n            <BaseSelect.List>\n              {children ??\n                items?.map((item) => (\n                  <SelectItem\n                    key={String(item.value)}\n                    value={item.value}\n                    disabled={item.disabled}\n                  >\n                    {item.label}\n                  </SelectItem>\n                ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\n\nexport interface SelectItemProps\n  extends Omit<BaseSelect.Item.Props, \"className\"> {\n  className?: string;\n}\n\n/**\n * One option of `Select`: 40px rows like MenuItem (a list is used with a finger on\n * it), surface on hover / arrow keys, a check on the chosen one.\n */\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectItemProps): React.JSX.Element {\n  return (\n    <BaseSelect.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"flex h-control-md cursor-pointer select-none items-center gap-3 rounded-md px-3 text-label-default text-text-primary outline-none\",\n        \"data-highlighted:bg-surface focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-inset\",\n        \"data-disabled:cursor-not-allowed data-disabled:text-text-disabled\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseSelect.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className=\"flex shrink-0 text-text-brand\">\n        <CheckIcon size=\"sm\" />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n"],"names":["BaseSelect"],"mappings":";;;;;;;;AA0DO,SAAS,OAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,iBAAiB,mBAAmB;AAI1C,kBAAgB,MAAM;AACpB,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA,IACT;AACA,mBAAe,KAAK;AACpB,WAAO,MAAM,eAAe,IAAI;AAAA,EAClC,GAAG,CAAC,cAAc,CAAC;AAEnB,8BACGA,SAAW,MAAX,EAAgB,OAAc,UAAqB,GAAG,OACrD,UAAA;AAAA,IAAA;AAAA,MAACA,SAAW;AAAA,MAAX;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QAET,GAAI,cAAc,UAAa,EAAE,cAAc,UAAA;AAAA,QAC/C,GAAI,mBAAmB,UAAa;AAAA,UACnC,mBAAmB;AAAA,QAAA;AAAA,QAErB,oBAAkB;AAAA,QAClB,gBAAc,WAAW,CAAC,WAAW,OAAO;AAAA,QAC5C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,cAAc,IAAI;AAAA,UAClB;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,eAAe,oBAAC,QAAA,EAAK,WAAW,aAAc,UAAA,aAAY;AAAA,UAC3D;AAAA,YAACA,SAAW;AAAA,YAAX;AAAA,cACC;AAAA,cACA,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,oBAACA,SAAW,MAAX,EAAgB,WAAU,kFACzB,UAAA,oBAAC,iBAAA,EAAgB,MAAK,KAAA,CAAK,EAAA,CAC7B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,oBAACA,SAAW,QAAX,EACC,UAAA;AAAA,MAACA,SAAW;AAAA,MAAX;AAAA,QACC,sBAAsB;AAAA,QACtB,YAAY;AAAA,QACZ,WAAU;AAAA,QAEV,UAAA;AAAA,UAACA,SAAW;AAAA,UAAX;AAAA,YACC,aAAU;AAAA,YACV,WAAW;AAAA;AAAA;AAAA,cAGT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,oBAACA,SAAW,MAAX,EACE,sBACC,OAAO,IAAI,CAAC,SACV;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,KAAK;AAAA,gBACZ,UAAU,KAAK;AAAA,gBAEd,UAAA,KAAK;AAAA,cAAA;AAAA,cAJD,OAAO,KAAK,KAAK;AAAA,YAAA,CAMzB,EAAA,CACL;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;AAWO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,SACE;AAAA,IAACA,SAAW;AAAA,IAAX;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAACA,SAAW,UAAX,EAAoB,WAAU,2BAC5B,UACH;AAAA,QACA,oBAACA,SAAW,eAAX,EAAyB,WAAU,iCAClC,UAAA,oBAAC,WAAA,EAAU,MAAK,KAAA,CAAK,EAAA,CACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/selection-card/index.d.ts

@@ -0,0 +1 @@
+export { SelectionCard, SelectionCardGroup, type SelectionCardGroupProps, type SelectionCardProps, } from "./selection-card";

package/dist/components/selection-card/selection-card.d.ts

@@ -0,0 +1,31 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { type ReactNode } from "react";
+import { type RadioGroupProps } from "../radio/radio";
+export interface SelectionCardGroupProps<Value = string> extends RadioGroupProps<Value> {
+}
+/**
+ * The group of `SelectionCard`s: one choice, arrow keys to move between cards.
+ * Name it with `aria-labelledby` (the question: "¿Cómo quieres la consulta?") or put
+ * it inside `Field` (Control=Custom).
+ */
+export declare function SelectionCardGroup<Value = string>({ className, ...props }: SelectionCardGroupProps<Value>): React.JSX.Element;
+export interface SelectionCardProps<Value = string> extends Omit<BaseRadio.Root.Props<Value>, "className" | "children" | "title"> {
+    /** "Videoconsulta". It is the radio's accessible name. */
+    title: ReactNode;
+    /**
+     * What the person needs to know to choose: "Con cámara, desde el móvil o el
+     * ordenador". Leave it out if it adds nothing new; don't fill it in.
+     */
+    description?: ReactNode;
+    /** A MediCore icon, shown in a 40px IconContainer that turns brand when selected. */
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * Large selectable option: consultation type, payment method, who the appointment is
+ * for. Goes inside `SelectionCardGroup`.
+ *
+ * The whole card is the target (a `<label>` wrapping a real radio), at least 56px
+ * high. Selected reads without colour: 2px border, ticked radio and the icon in brand.
+ */
+export declare function SelectionCard<Value = string>({ title, description, icon, className, ...props }: SelectionCardProps<Value>): React.JSX.Element;

package/dist/components/selection-card/selection-card.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { FieldItemLabel } from "../radio/field-item-label.js";
+import { RadioDot, radioVariants, RadioGroup } from "../radio/radio.js";
+import { IconContainer } from "../icon-container/icon-container.js";
+function SelectionCardGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "data-slot": "selection-card-group",
+      className: cn("gap-3", className),
+      ...props
+    }
+  );
+}
+function SelectionCard({
+  title,
+  description,
+  icon,
+  className,
+  ...props
+}) {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  return /* @__PURE__ */ jsxs(
+    FieldItemLabel,
+    {
+      "data-slot": "selection-card",
+      className: cn(
+        "group/selection-card flex min-h-14 cursor-pointer items-center gap-3 rounded-lg border border-border bg-background p-4 transition-colors",
+        "focus-ring-within",
+        // 2px border without moving the content: the 1px border plus a 1px inset ring.
+        "has-data-checked:border-text-brand has-data-checked:bg-brand-subtle has-data-checked:inset-ring has-data-checked:inset-ring-text-brand",
+        "has-data-disabled:cursor-not-allowed has-data-disabled:border-border-subtle has-data-disabled:bg-surface",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          IconContainer,
+          {
+            size: 40,
+            tone: "neutral",
+            icon,
+            className: "group-has-data-checked/selection-card:bg-brand-subtle group-has-data-checked/selection-card:text-text-brand group-has-data-disabled/selection-card:opacity-50"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: titleId,
+              className: "text-label-strong text-text-primary group-has-data-disabled/selection-card:text-text-disabled",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: descriptionId,
+              className: "text-body-small text-text-secondary group-has-data-checked/selection-card:text-text-primary group-has-data-disabled/selection-card:text-text-disabled",
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Radio.Root,
+          {
+            "data-slot": "selection-card-radio",
+            "aria-labelledby": titleId,
+            "aria-describedby": description ? descriptionId : void 0,
+            className: radioVariants({ standalone: false }),
+            ...props,
+            children: /* @__PURE__ */ jsx(RadioDot, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SelectionCard,
+  SelectionCardGroup
+};
+//# sourceMappingURL=selection-card.js.map

package/dist/components/selection-card/selection-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-card.js","sources":["../../../src/components/selection-card/selection-card.tsx"],"sourcesContent":["import { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { type ReactNode, useId } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { IconContainer } from \"../icon-container\";\nimport { FieldItemLabel } from \"../radio/field-item-label\";\nimport {\n  RadioDot,\n  RadioGroup,\n  type RadioGroupProps,\n  radioVariants,\n} from \"../radio/radio\";\n\nexport interface SelectionCardGroupProps<Value = string>\n  extends RadioGroupProps<Value> {}\n\n/**\n * The group of `SelectionCard`s: one choice, arrow keys to move between cards.\n * Name it with `aria-labelledby` (the question: \"¿Cómo quieres la consulta?\") or put\n * it inside `Field` (Control=Custom).\n */\nexport function SelectionCardGroup<Value = string>({\n  className,\n  ...props\n}: SelectionCardGroupProps<Value>): React.JSX.Element {\n  return (\n    <RadioGroup<Value>\n      data-slot=\"selection-card-group\"\n      className={cn(\"gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface SelectionCardProps<Value = string>\n  extends Omit<\n    BaseRadio.Root.Props<Value>,\n    \"className\" | \"children\" | \"title\"\n  > {\n  /** \"Videoconsulta\". It is the radio's accessible name. */\n  title: ReactNode;\n  /**\n   * What the person needs to know to choose: \"Con cámara, desde el móvil o el\n   * ordenador\". Leave it out if it adds nothing new; don't fill it in.\n   */\n  description?: ReactNode;\n  /** A MediCore icon, shown in a 40px IconContainer that turns brand when selected. */\n  icon?: ReactNode;\n  className?: string;\n}\n\n/**\n * Large selectable option: consultation type, payment method, who the appointment is\n * for. Goes inside `SelectionCardGroup`.\n *\n * The whole card is the target (a `<label>` wrapping a real radio), at least 56px\n * high. Selected reads without colour: 2px border, ticked radio and the icon in brand.\n */\nexport function SelectionCard<Value = string>({\n  title,\n  description,\n  icon,\n  className,\n  ...props\n}: SelectionCardProps<Value>): React.JSX.Element {\n  const id = useId();\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <FieldItemLabel\n      data-slot=\"selection-card\"\n      className={cn(\n        \"group/selection-card flex min-h-14 cursor-pointer items-center gap-3 rounded-lg border border-border bg-background p-4 transition-colors\",\n        \"focus-ring-within\",\n        // 2px border without moving the content: the 1px border plus a 1px inset ring.\n        \"has-data-checked:border-text-brand has-data-checked:bg-brand-subtle has-data-checked:inset-ring has-data-checked:inset-ring-text-brand\",\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:border-border-subtle has-data-disabled:bg-surface\",\n        className,\n      )}\n    >\n      {icon && (\n        <IconContainer\n          size={40}\n          tone=\"neutral\"\n          icon={icon}\n          className=\"group-has-data-checked/selection-card:bg-brand-subtle group-has-data-checked/selection-card:text-text-brand group-has-data-disabled/selection-card:opacity-50\"\n        />\n      )}\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span\n          id={titleId}\n          className=\"text-label-strong text-text-primary group-has-data-disabled/selection-card:text-text-disabled\"\n        >\n          {title}\n        </span>\n        {description && (\n          <span\n            id={descriptionId}\n            className=\"text-body-small text-text-secondary group-has-data-checked/selection-card:text-text-primary group-has-data-disabled/selection-card:text-text-disabled\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n      <BaseRadio.Root\n        data-slot=\"selection-card-radio\"\n        aria-labelledby={titleId}\n        aria-describedby={description ? descriptionId : undefined}\n        className={radioVariants({ standalone: false })}\n        {...props}\n      >\n        <RadioDot />\n      </BaseRadio.Root>\n    </FieldItemLabel>\n  );\n}\n"],"names":["BaseRadio"],"mappings":";;;;;;;AAqBO,SAAS,mBAAmC;AAAA,EACjD;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,SAAS,SAAS;AAAA,MAC/B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AA0BO,SAAS,cAA8B;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,QAAM,KAAK,MAAA;AACX,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,MAAK;AAAA,YACL;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,qBAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GAEJ;AAAA,QACA;AAAA,UAACA,MAAU;AAAA,UAAV;AAAA,YACC,aAAU;AAAA,YACV,mBAAiB;AAAA,YACjB,oBAAkB,cAAc,gBAAgB;AAAA,YAChD,WAAW,cAAc,EAAE,YAAY,OAAO;AAAA,YAC7C,GAAG;AAAA,YAEJ,8BAAC,UAAA,CAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/severity-indicator/index.d.ts

@@ -0,0 +1 @@
+export { SeverityIndicator, type SeverityIndicatorProps, severityIndicatorVariants, } from "./severity-indicator";

package/dist/components/severity-indicator/severity-indicator.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+import type { SeverityLevel } from "../severity-scale";
+export declare const severityIndicatorVariants: (props?: ({
+    level?: 1 | 2 | 3 | 4 | 5 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SeverityIndicatorProps extends Omit<ComponentProps<"span">, "children"> {
+    /** 1 Muy leve · 2 Leve · 3 Moderada · 4 Alta · 5 Crítica. */
+    level: SeverityLevel;
+}
+/**
+ * The severity of an allergy or condition already recorded (1–5). Read only: to
+ * choose it use `SeverityScale`.
+ *
+ * The written label is the main cue; the dots and the colour back it up. Never drop
+ * the label: colour alone fails WCAG 1.4.1. It is a `role="img"` named "Gravedad 3
+ * de 5, moderada" (`severity` and `severityLevel` labels); the dots are hidden.
+ */
+export declare function SeverityIndicator({ level, className, ...props }: SeverityIndicatorProps): React.JSX.Element;

package/dist/components/severity-indicator/severity-indicator.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const MAX = 5;
+const DOTS = [1, 2, 3, 4, 5];
+const severityIndicatorVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-label-small text-text-primary",
+  {
+    variants: {
+      level: {
+        1: "bg-accent-subtle",
+        2: "bg-accent-subtle",
+        3: "bg-warning-subtle",
+        4: "bg-error-subtle",
+        5: "bg-error-subtle"
+      }
+    }
+  }
+);
+const dotColors = {
+  1: "bg-text-accent",
+  2: "bg-text-accent",
+  3: "bg-text-warning",
+  4: "bg-text-error",
+  5: "bg-text-error"
+};
+function SeverityIndicator({
+  level,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const name = labels.severityLevel(level);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "severity-indicator",
+      "data-level": level,
+      role: "img",
+      "aria-label": labels.severity(level, MAX, name),
+      className: cn(severityIndicatorVariants({ level }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex items-center gap-0.5", children: DOTS.map((dot) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-2 rounded-full",
+              dot <= level ? dotColors[level] : "bg-text-disabled"
+            )
+          },
+          dot
+        )) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: name })
+      ]
+    }
+  );
+}
+export {
+  SeverityIndicator,
+  severityIndicatorVariants
+};
+//# sourceMappingURL=severity-indicator.js.map

package/dist/components/severity-indicator/severity-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"severity-indicator.js","sources":["../../../src/components/severity-indicator/severity-indicator.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport type { SeverityLevel } from \"../severity-scale\";\n\nconst MAX = 5;\nconst DOTS = [1, 2, 3, 4, 5] as const;\n\n// Fill in *-subtle and the label in text-primary, which passes in both modes: the\n// orange of text-warning on warning-subtle is 3.93:1, so it only colours the dots.\nexport const severityIndicatorVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-label-small text-text-primary\",\n  {\n    variants: {\n      level: {\n        1: \"bg-accent-subtle\",\n        2: \"bg-accent-subtle\",\n        3: \"bg-warning-subtle\",\n        4: \"bg-error-subtle\",\n        5: \"bg-error-subtle\",\n      },\n    },\n  },\n);\n\nconst dotColors: Record<SeverityLevel, string> = {\n  1: \"bg-text-accent\",\n  2: \"bg-text-accent\",\n  3: \"bg-text-warning\",\n  4: \"bg-text-error\",\n  5: \"bg-text-error\",\n};\n\nexport interface SeverityIndicatorProps\n  extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** 1 Muy leve · 2 Leve · 3 Moderada · 4 Alta · 5 Crítica. */\n  level: SeverityLevel;\n}\n\n/**\n * The severity of an allergy or condition already recorded (1–5). Read only: to\n * choose it use `SeverityScale`.\n *\n * The written label is the main cue; the dots and the colour back it up. Never drop\n * the label: colour alone fails WCAG 1.4.1. It is a `role=\"img\"` named \"Gravedad 3\n * de 5, moderada\" (`severity` and `severityLevel` labels); the dots are hidden.\n */\nexport function SeverityIndicator({\n  level,\n  className,\n  ...props\n}: SeverityIndicatorProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const name = labels.severityLevel(level);\n\n  return (\n    <span\n      data-slot=\"severity-indicator\"\n      data-level={level}\n      role=\"img\"\n      aria-label={labels.severity(level, MAX, name)}\n      className={cn(severityIndicatorVariants({ level }), className)}\n      {...props}\n    >\n      <span aria-hidden className=\"flex items-center gap-0.5\">\n        {DOTS.map((dot) => (\n          <span\n            key={dot}\n            className={cn(\n              \"size-2 rounded-full\",\n              dot <= level ? dotColors[level] : \"bg-text-disabled\",\n            )}\n          />\n        ))}\n      </span>\n      <span aria-hidden>{name}</span>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,MAAM;AACZ,MAAM,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAIpB,MAAM,4BAA4B;AAAA,EACvC;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAEA,MAAM,YAA2C;AAAA,EAC/C,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAgBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,QAAM,SAAS,kBAAA;AACf,QAAM,OAAO,OAAO,cAAc,KAAK;AAEvC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAY,OAAO,SAAS,OAAO,KAAK,IAAI;AAAA,MAC5C,WAAW,GAAG,0BAA0B,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,6BACzB,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA,OAAO,QAAQ,UAAU,KAAK,IAAI;AAAA,YAAA;AAAA,UACpC;AAAA,UAJK;AAAA,QAAA,CAMR,GACH;AAAA,QACA,oBAAC,QAAA,EAAK,eAAW,MAAE,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9B;"}

package/dist/components/severity-scale/index.d.ts

@@ -0,0 +1 @@
+export { type SeverityLevel, SeverityScale, type SeverityScaleProps, } from "./severity-scale";

package/dist/components/severity-scale/severity-scale.d.ts

@@ -0,0 +1,17 @@
+import { type RadioGroupProps } from "../radio";
+declare const LEVELS: readonly [1, 2, 3, 4, 5];
+export type SeverityLevel = (typeof LEVELS)[number];
+export interface SeverityScaleProps extends Omit<RadioGroupProps<SeverityLevel>, "children"> {
+}
+/**
+ * Clinical severity from 1 to 5, to record an allergy or a condition. Starts with
+ * nothing selected (don't pass `defaultValue`): preselecting a clinical value nudges
+ * the patient into leaving it.
+ *
+ * Goes inside `Field` (Control=Custom): its label names the group ("Gravedad") and
+ * its message explains the scale ("Del 1 (molestia leve) al 5 (reacción grave)").
+ * Without Field, name it with `aria-labelledby`. Every option is 44px high. To show
+ * a saved severity use Severity/Indicator, not this.
+ */
+export declare function SeverityScale({ className, ...props }: SeverityScaleProps): React.JSX.Element;
+export {};

package/dist/components/severity-scale/severity-scale.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { RadioGroup, RadioField } from "../radio/radio.js";
+const LEVELS = [1, 2, 3, 4, 5];
+function SeverityScale({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      "data-slot": "severity-scale",
+      className: cn("flex-row flex-wrap gap-x-4", className),
+      ...props,
+      children: LEVELS.map((level) => /* @__PURE__ */ jsx(RadioField, { value: level, label: level }, level))
+    }
+  );
+}
+export {
+  SeverityScale
+};
+//# sourceMappingURL=severity-scale.js.map

package/dist/components/severity-scale/severity-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"severity-scale.js","sources":["../../../src/components/severity-scale/severity-scale.tsx"],"sourcesContent":["import { cn } from \"../../lib/cn\";\nimport { RadioField, RadioGroup, type RadioGroupProps } from \"../radio\";\n\nconst LEVELS = [1, 2, 3, 4, 5] as const;\n\nexport type SeverityLevel = (typeof LEVELS)[number];\n\nexport interface SeverityScaleProps\n  extends Omit<RadioGroupProps<SeverityLevel>, \"children\"> {}\n\n/**\n * Clinical severity from 1 to 5, to record an allergy or a condition. Starts with\n * nothing selected (don't pass `defaultValue`): preselecting a clinical value nudges\n * the patient into leaving it.\n *\n * Goes inside `Field` (Control=Custom): its label names the group (\"Gravedad\") and\n * its message explains the scale (\"Del 1 (molestia leve) al 5 (reacción grave)\").\n * Without Field, name it with `aria-labelledby`. Every option is 44px high. To show\n * a saved severity use Severity/Indicator, not this.\n */\nexport function SeverityScale({\n  className,\n  ...props\n}: SeverityScaleProps): React.JSX.Element {\n  return (\n    <RadioGroup<SeverityLevel>\n      data-slot=\"severity-scale\"\n      className={cn(\"flex-row flex-wrap gap-x-4\", className)}\n      {...props}\n    >\n      {LEVELS.map((level) => (\n        <RadioField<SeverityLevel> key={level} value={level} label={level} />\n      ))}\n    </RadioGroup>\n  );\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,SAAS,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAiBtB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA,MAEH,UAAA,OAAO,IAAI,CAAC,UACX,oBAAC,YAAA,EAAsC,OAAO,OAAO,OAAO,MAAA,GAA5B,KAAmC,CACpE;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1 @@
+export { Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarUser, type SidebarUserProps, useSidebar, } from "./sidebar";